.login-section-wrapper {
    background-color: #f5f1ea;
    min-height: calc(100vh - 120px)
}

.login-hero-side {
    background-color: #031427;
    background-image: radial-gradient(circle at -20% 120%,rgba(212,160,23,.08) 0%,transparent 50%),radial-gradient(circle at 100% 0%,rgba(255,255,255,.03) 0%,transparent 40%);
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
    align-items: flex-start !important
}

.hero-welcome-badge {
    color: #cca23a;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: 2px
}

.hero-welcome-line {
    width: 22px;
    height: 1.5px;
    background-color: #cca23a
}

.hero-main-title {
    font-family: var(--font-serif);
    font-size: 4.2rem !important;
    font-weight: 600;
    color: #fff;
    line-height: 1.05;
    letter-spacing: -1px
}

.hero-subtext {
    color: #a3b8cc;
    font-size: 1.05rem;
    max-width: 460px;
    line-height: 1.5
}

.hero-check-circle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(204,162,58,.4);
    color: #cca23a;
    font-size: .75rem
}

.hero-feature-text {
    color: #e2eaf4;
    font-size: .88rem;
    font-weight: 500
}

.login-card-container {
    background-color: #fff;
    border-top: 4px solid #d4a017;
    box-shadow: 0 16px 40px rgba(0,0,0,.09),0 4px 10px rgba(0,0,0,.04);
    padding: 3rem 3.2rem !important;
    max-width: 480px !important;
    width: 100% !important
}

.form-access-label {
    color: #b58117;
    font-size: .8rem !important;
    font-weight: 800;
    letter-spacing: 2px
}

.form-main-heading {
    font-family: var(--font-serif);
    font-size: 2.3rem !important;
    font-weight: 600;
    color: #0b1e36
}

.form-subtext {
    color: #6b7c93;
    font-size: .95rem !important;
    line-height: 1.5
}

.custom-field-label {
    color: #1a2938;
    font-size: .92rem !important;
    font-weight: 600
}

.custom-forgot-link {
    color: #b58117;
    font-size: .9rem !important;
    font-weight: 600;
    text-decoration: none
}

    .custom-forgot-link:hover {
        color: #8c610d;
        text-decoration: none
    }

.login-card-container form .mb-3, .login-card-container form .form-group {
    width: 100% !important;
    display: block !important
}

.custom-input-box {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background-color: #eff4fc !important;
    border: 1px solid #c9d8eb !important;
    border-radius: 2px !important;
    height: 52px !important;
    padding: 0 16px !important;
    font-size: 1.05rem !important;
    color: #1a2533 !important
}

    .custom-input-box:focus {
        background-color: #eff4fc !important;
        border: 1.5px solid #d4a017 !important;
        box-shadow: 0 0 0 3.5px rgba(212,160,23,.2) !important;
        outline: none !important
    }

.form-check-input {
    width: 18px !important;
    height: 18px !important;
    border: 1.5px solid #c9a342 !important;
    border-radius: 2px !important;
    cursor: pointer !important;
    transition: all .2s ease-in-out !important
}

    .form-check-input:checked {
        background-color: #8c610d !important;
        border-color: #f1dfaa !important;
        box-shadow: 0 0 0 2px #f1dfaa !important
    }

    .form-check-input:focus {
        box-shadow: 0 0 0 3px rgba(212,160,23,.25) !important;
        border-color: #d4a017 !important
    }

.form-check-label {
    color: #4a5868;
    font-size: .9rem !important;
    padding-left: 4px
}

.btn-custom-gold {
    background-color: #e5b02a;
    color: #0c1827;
    font-weight: 700;
    font-size: 1.15rem !important;
    height: 56px !important;
    border-radius: 4px;
    border: none;
    transition: all .2s ease;
    letter-spacing: .3px
}

    .btn-custom-gold:hover {
        background-color: #d4a017;
        color: #000;
        transform: translateY(-1px)
    }

.divider-line {
    height: 1px;
    background-color: #e3e8ee;
    margin: 1.5rem 0 !important
}

.divider-text {
    background-color: #fff;
    padding: 0 16px;
    color: #7a8a9e;
    font-size: .9rem !important;
    font-weight: 500
}

.btn-custom-outline {
    background-color: transparent;
    border: 1.5px solid #a8b8cc;
    color: #0b1e36;
    font-weight: 700;
    font-size: 1.15rem !important;
    height: 56px !important;
    border-radius: 4px;
    transition: all .2s ease;
    letter-spacing: .3px
}

    .btn-custom-outline:hover {
        background-color: #f4f7fb;
        border-color: #0b1e36;
        color: #0b1e36;
        transform: translateY(-1px)
    }

/* =========================================================
   LOGIN / FORGOT PASSWORD - ANIMATION + HOVER
========================================================= */
/* left panel: content appears one piece after another */
.login-hero-side {
    position: relative;
    overflow: hidden
}

    .login-hero-side .hero-content {
        position: relative;
        z-index: 1
    }

        .login-hero-side .hero-content > * {
            animation: alFadeUp .8s backwards
        }

        .login-hero-side .hero-content > :nth-child(1) {
            animation-delay: .05s
        }

        .login-hero-side .hero-content > :nth-child(2) {
            animation-delay: .15s
        }

        .login-hero-side .hero-content > :nth-child(3) {
            animation-delay: .25s
        }

        .login-hero-side .hero-content > :nth-child(4) {
            animation-delay: .35s
        }

    .login-hero-side::before, .login-hero-side::after {
        content: '';
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
        border: 1px solid rgba(204,162,58,.16);
        animation: alPulse 9s ease-in-out infinite
    }

    .login-hero-side::before {
        width: 420px;
        height: 420px;
        right: -170px;
        top: -170px
    }

    .login-hero-side::after {
        width: 300px;
        height: 300px;
        left: -120px;
        bottom: -120px;
        animation-delay: -4s
    }

    .login-hero-side .hero-content .d-flex.flex-column > div {
        transition: transform .3s ease
    }

.hero-check-circle {
    transition: background-color .3s ease,color .3s ease,transform .3s ease
}

/* right card: card, then its parts, then the form fields */
.login-card-container {
    animation: alFadeUp .9s .15s cubic-bezier(.22,.61,.36,1) backwards;
    transition: box-shadow .35s ease
}

    .login-card-container > :not(form) {
        animation: alFadeUp .6s backwards
    }

    .login-card-container > :nth-child(1) {
        animation-delay: .25s
    }

    .login-card-container > :nth-child(2) {
        animation-delay: .31s
    }

    .login-card-container > :nth-child(3) {
        animation-delay: .37s
    }

    .login-card-container > :nth-child(4) {
        animation-delay: .43s
    }

    .login-card-container > :nth-child(5) {
        animation-delay: .49s
    }

    .login-card-container > :nth-child(n+6) {
        animation-delay: .55s
    }

    .login-card-container form > * {
        animation: alFadeUp .6s backwards
    }

    .login-card-container form > :nth-child(1) {
        animation-delay: .35s
    }

    .login-card-container form > :nth-child(2) {
        animation-delay: .41s
    }

    .login-card-container form > :nth-child(3) {
        animation-delay: .47s
    }

    .login-card-container form > :nth-child(4) {
        animation-delay: .53s
    }

    .login-card-container form > :nth-child(5) {
        animation-delay: .59s
    }

    .login-card-container form > :nth-child(n+6) {
        animation-delay: .65s
    }

/* inputs, links, buttons */
.custom-input-box {
    transition: border-color .25s ease,box-shadow .25s ease,transform .25s ease
}

    .custom-input-box:focus {
        transform: translateY(-2px)
    }

.custom-forgot-link {
    position: relative;
    transition: color .25s ease
}

    .custom-forgot-link::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 100%;
        height: 1px;
        background: currentColor;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .3s ease
    }

.btn-custom-gold i {
    display: inline-block;
    transition: transform .3s ease
}

@media (hover:hover) and (pointer:fine) {
    .login-hero-side .hero-content .d-flex.flex-column > div:hover {
        transform: translateX(6px)
    }

        .login-hero-side .hero-content .d-flex.flex-column > div:hover .hero-check-circle {
            background: #cca23a;
            color: #031427;
            transform: scale(1.12)
        }

    .login-card-container:hover {
        box-shadow: 0 22px 50px rgba(0,0,0,.13),0 4px 10px rgba(0,0,0,.05)
    }

    .custom-forgot-link:hover::after {
        transform: scaleX(1)
    }

    .btn-custom-gold:hover i {
        transform: translateX(5px)
    }

    .btn-custom-gold:hover {
        box-shadow: 0 10px 22px rgba(212,160,23,.35)
    }

    .btn-custom-outline:hover {
        box-shadow: 0 8px 18px rgba(11,30,54,.1)
    }
}

@media (prefers-reduced-motion:reduce) {
    .login-hero-side .hero-content > *, .login-hero-side::before, .login-hero-side::after,
    .login-card-container, .login-card-container > *, .login-card-container form > * {
        animation: none !important
    }
}