:root {
    --bs-body-bg: #f7f9fb;
    --primary-blue: #1047c6;
    --primary-dark: #000000;
    --secondary-dark: #0F172A;
    --slate-600: #475569;
    --slate-900: #0f172a;
    --text-on-surface-variant: #45464d;
    --surface-container-low: #f2f4f6;
    --surface-container-high: #e6e8ea;
}

body {
    font-family: 'Inter', sans-serif;
    color: #191c1e;
    -webkit-font-smoothing: antialiased;
}

.font-headline {
    font-family: 'Manrope', sans-serif;
    font-weight: unset !important;

}


.btn-apply {
    background-color: var(--primary-dark);
    color: white;
    font-weight: 700;
    padding: 0.625rem 1.5rem;
    border-radius: 0.75rem;
    border: none;
    transition: all 0.3s;
}
.btn-apply:hover { opacity: 0.9; transform: scale(0.98); color: white; }

/* Sidebar Styles */
.instruction-card {
    background-color: var(--secondary-dark);
    border-radius: 0.75rem;
    padding: 2rem;
    color: white;
}

.step-badge {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
}

/* Form Card Styles */
.form-card {
    background-color: #ffffff;
    border-radius: 0.75rem;
    padding: 3rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.08);
}

.section-header {
    border-bottom: 1px solid #eceef0;
    /*padding-bottom: 1rem;*/
    margin-bottom: 2.5rem;
    margin-top: 2rem;
}

.form-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-on-surface-variant);
    margin-bottom: 0.5rem;
}

.form-control-custom {
    background-color: var(--surface-container-low);
    border: none;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    transition: all 0.2s;
}
.form-control-custom:focus {
    background-color: var(--bs-body-bg);
    box-shadow: 0 0 0 2px var(--primary-blue);
    outline: none;
}

/* Input Group Focus handling */
.input-group-custom {
    background-color: var(--surface-container-low);
    border-radius: 0.75rem;
    transition: all 0.2s;
    overflow: hidden;
}
    .form-control:focus {
        border: 2px solid rgba(92 96 245 / 100%) !important;
        box-shadow: none !important;
    }
.input-group-custom .form-control-custom {
    background-color: transparent !important;
    box-shadow: none !important;
}

.input-group-text-custom {
    background-color: transparent;
    border: none;
    font-weight: 500;
    color: var(--text-on-surface-variant);
    padding-left: 1rem;
    padding-right: 0.5rem;
}

/* Captcha Styles */
.captcha-box {
    background-color: #fff;
    border: 1px solid #e7eaf0;
    border-radius: 0.75rem;
    height: 62px;
    justify-content: center;
    user-select: none;
}
    .captcha-box2 {
        background-color: #fff;
        border: 1px solid #e7eaf0;
        border-radius: 0.75rem;
        height: 60px;
        display: flex;
        align-items: center;
         user-select: none;
    }
    .captcha-img{
        height: 60px !important;
    }
.captcha-text {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.4em;
    font-style: italic;
    color: rgba(0, 0, 0, 0.4);
    text-decoration: line-through;
    text-decoration-color: var(--primary-blue);
}

.btn-submit {
    background-color: var(--primary-dark);
    color: white;
    padding: 1rem 2.5rem;
    border-radius: 0.75rem;
    font-weight: 700;
    border: none;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: fit-content;
}
.btn-submit:hover {
    background-color: #1e293b;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 25px 30px -5px rgba(0, 0, 0, 0.15);
    color: white;
}
.btn-submit:focus {
    background-color: var(--primary-dark);
    color: white;
    outline: none;
    box-shadow: 0 0 0 4px rgba(16, 71, 198, 0.4), 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}
.btn-submit:active { transform: translateY(0) scale(0.98); }

/* Custom Checkbox Styles */
.form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
    border: 2px solid #cbd5e1;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s;
}
.form-check-input:checked {
    background-color: var(--slate-900);
    border-color: var(--slate-900);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-check-input:focus {
    border-color: var(--slate-900);
    outline: 0;
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.1);
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

 
@media (max-width: 991.98px) {
    .form-card { padding: 2rem; }
    .btn-submit { width: 100%; }
}
.form-control{
    border-radius: 12px !important;
    border:2px solid #e7eaf0 !important;
}
.or-divider {
        display: flex;
        align-items: center;
        text-align: center;
        margin: 15px 0;
        opacity: 50%;
}
    .or-divider::before, .or-divider::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid #ccc;
    }
    .input-group:focus-within{
        border-radius: 12px;
    }
    .instruction-card strong{
        color:rgba(255,255,255,1)!important;
    }
    .instruction-card .text-primary{
        color:rgba(255,255,255,0.7)!important;
    }
    .instruction-card h2{
        color:rgba(255,255,255,1)!important;
    }
    .instruction-card .border-white{
        border-color: rgba(255,255,255,0.1) !important;
    }
    .captcha-rotate {
        animation: rotateCaptcha 0.8s linear;
    }

    @keyframes rotateCaptcha {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(180deg);
        }
    }
    .reload-captcha.captcha-rotate {
        animation: rotateCaptcha 0.8s linear;
    }

    @keyframes rotateCaptcha {
        from { transform: rotate(0deg); }
        to { transform: rotate(180deg); }
    }

    .was-validated .form-control:invalid, .form-control.is-invalid{
        background-image: unset !important;
    }

    .reload-captcha{
        color:#c9c9c9;
        background-color:unset;
    }

    .list-unstyled li p{
        font-size: 16px !important;
        line-height: 2.5 !important;
    }
    .reload-captcha {
        display: inline-block;
        transition: transform 0.8s ease;
    }

    .reload-captcha:hover {
        color:#2040a0;
    }
    .reload-captcha:active {
        color:#2040a0;
        /*transform: rotate(180deg);*/
    }
    .form-control.is-invalid {
        border-color: #f36 !important;
    }
    .form-select{
        font-size: 15px !important;
        padding: 12px !important;
        border-radius: 12px !important;
    }