/* =========================================================
   GOVERNMENT STYLE EVISA FORM SYSTEM
========================================================= */

.form-section{
    padding:80px 0;
    background:var(--bg-light);
}

/* =========================================================
   FORM CARD
========================================================= */

.form-card{
    background:var(--bg-primary);
    border:1px solid var(--border-color);
    border-radius:6px;
    padding:32px;
    box-shadow:none;
    position:relative;
    overflow:hidden;
}

/* .form-card::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:3px;
    background:var(--primary-red);
} */

.form-card:hover{
    box-shadow:none;
}

/* =========================================================
   HEADER
========================================================= */

.form-header{
    margin-bottom:25px;
    padding-bottom:15px;
    border-bottom:1px solid var(--border-color);
}

.form-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:rgba(200,169,81,.10);
    border:1px solid rgba(200,169,81,.25);
    color:var(--yellow-dark);
    padding:5px 10px;
    border-radius:3px;
    font-size:11px;
    font-weight:600;
    margin-bottom:12px;
    text-transform:uppercase;
    letter-spacing:.4px;
}

.form-header h2{
    font-size:24px;
    font-weight:700;
    color:var(--red-dark);
    margin-bottom:6px;
    line-height:1.3;
}

.form-header p{
    color:var(--text-muted);
    margin:0;
    font-size:13px;
    line-height:1.6;
}

/* =========================================================
   SUB TITLE
========================================================= */

.form-card h3{
    color:var(--primary-red);
    font-size:18px;
    font-weight:700;
    margin-bottom:8px;
}

.form-card p{
    color:var(--text-muted);
    line-height:1.6;
    font-size:13px;
}

/* =========================================================
   FORM GROUP
========================================================= */

.form-group{
    margin-bottom:18px;
}

.form-group label{
    display:block;
    margin-bottom:6px;
    color:var(--text-dark);
    font-size:13px;
    font-weight:600;
}

.required,
.form-group label span{
    color:#dc2626;
}

/* =========================================================
   INPUTS
========================================================= */

.form-control{
    width:100%;
    height:46px;
    background:#fff;
    border:1px solid rgba(0,108,53,.15);
    border-radius:4px;
    padding:0 12px;
    color:var(--text-dark);
    font-size:13px;
    transition:all .25s ease;
}

.form-control:hover{
    border-color:rgba(0,108,53,.35);
}

.form-control:focus{
    border-color:var(--primary-red);
    box-shadow:0 0 0 3px rgba(0,108,53,.10);
    outline:none;
}

.form-control::placeholder{
    color:#9ca3af;
    font-size:12px;
}

/* =========================================================
   SELECT
========================================================= */

select.form-control{
    cursor:pointer;
}

.form-subject{
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23006C35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

    background-repeat:no-repeat;
    background-position:right 12px center;
    background-size:14px;
    padding-right:40px;
}

/* =========================================================
   TEXTAREA
========================================================= */

textarea.form-control{
    min-height:120px;
    padding:10px 12px;
    resize:vertical;
    font-size:13px;
}

/* =========================================================
   VALIDATION
========================================================= */

.text-danger{
    color:#dc2626 !important;
}

.is-invalid{
    border-color:#dc2626 !important;
    background:#fff7f7;
}

.invalid-feedback,
.error-text{
    color:#dc2626;
    font-size:12px;
    font-weight:500;
    margin-top:5px;
    display:block;
}

.is-valid{
    border-color:#16a34a !important;
}

/* =========================================================
   INPUT ICON GROUP
========================================================= */

.input-group-text{
    background:var(--bg-light);
    border:1px solid rgba(0,108,53,.15);
    color:var(--primary-red);
    font-size:13px;
}

/* =========================================================
   BUTTON
========================================================= */

.btn-submit{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    height:46px;
    padding:0 24px;
    border:none;
    border-radius:4px;
    background:var(--gradient-primary);
    color:#fff;
    font-size:13px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.4px;
    cursor:pointer;
    transition:.25s ease;
}

.btn-submit:hover{
    background:var(--red-dark);
    color:#fff;
}

.btn-submit:disabled{
    opacity:.7;
    cursor:not-allowed;
}

/* =========================================================
   FOOTER
========================================================= */

.form-footer{
    margin-top:20px;
    display:flex;
    justify-content:flex-end;
}

/* =========================================================
   HELP TEXT
========================================================= */

.form-text{
    color:var(--text-muted);
    font-size:11px;
    margin-top:5px;
}

/* =========================================================
   GOVT NOTICE
========================================================= */

.form-notice{
    background:rgba(0,108,53,.04);
    border:1px solid rgba(0,108,53,.12);
    border-left:4px solid var(--primary-red);
    padding:12px 15px;
    margin-bottom:20px;
    font-size:12px;
    color:var(--text-dark);
    line-height:1.6;
}

.form-notice strong{
    display:block;
    margin-bottom:4px;
    color:var(--red-dark);
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:768px){

    .form-section{
        padding:50px 0;
    }

    .form-card{
        padding:20px;
    }

    .form-header h2{
        font-size:20px;
    }

    .form-header p{
        font-size:12px;
    }

    .form-control{
        height:44px;
        font-size:13px;
    }

    textarea.form-control{
        min-height:110px;
    }

    .btn-submit{
        width:100%;
        height:44px;
    }

    .form-footer{
        justify-content:stretch;
    }
}