:root {
    --al-navy-dark: #031427;
    --al-navy-text: #0c1827;
    --al-navy-heading: #0b1e36;
    --al-gold-primary: #e5b02a;
    --al-gold-hover: #d4a017;
    --al-bg-page: #f5f1ea;
    --al-bg-card: #fff;
    --al-bg-input: #eff4fc;
    --al-text-muted: #6b7c93
}

body {
    font-family: 'Inter',sans-serif;
    background-color: var(--al-bg-page);
    color: var(--al-navy-text)
}

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

.register-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
}

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

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

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

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

.register-step-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(204,162,58,.5);
    color: #cca23a;
    font-size: .85rem;
    font-weight: 600
}

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

.register-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: 720px !important;
    width: 100% !important
}

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

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

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

.role-selection-card {
    background-color: #fff;
    border: 1px solid #d0dbe8;
    border-radius: 2px;
    cursor: pointer;
    min-height: 95px;
    transition: all .2s ease-in-out
}

    .role-selection-card:hover {
        border-color: #d4a017;
        background-color: #faf8f3
    }

    .role-selection-card.active {
        border: 1.8px solid #c9a342 !important;
        background-color: #fbf7ee !important;
        box-shadow: 0 0 0 2px rgba(212,160,23,.15)
    }

.role-title {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: #0c1827
}

.role-desc {
    font-size: .82rem;
    color: #6c7d93;
    line-height: 1.3
}

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

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

    .register-link:hover {
        color: #8c610d;
        text-decoration: underline
    }

.register-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
}

    .register-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-floating-custom {
    position: relative;
    width: 100% !important
}

    .form-floating-custom > .form-select {
        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: 58px !important;
        padding: 1.25rem 16px .35rem 16px !important;
        font-size: 1rem !important;
        color: #1a2533 !important
    }

        .form-floating-custom > .form-select: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-floating-custom > label {
        position: absolute;
        top: 6px;
        left: 12px;
        font-size: .75rem !important;
        font-weight: 600;
        color: #6b7c93;
        pointer-events: none
    }

.register-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
}

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

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

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

.btn-register-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-register-gold:hover {
        background-color: #d4a017;
        color: #000;
        transform: translateY(-1px)
    }

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

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

.btn-register-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-register-outline:hover {
        background-color: #f4f7fb;
        border-color: #0b1e36;
        color: #0b1e36;
        transform: translateY(-1px)
    }

.register-password-toggle {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    padding: 0;
    color: #6b7280;
    cursor: pointer;
    z-index: 5
}

    .register-password-toggle:hover {
        color: #c3922e
    }

.register-password-help {
    display: block;
    margin-top: 5px;
    color: #6b7280;
    font-size: .75rem;
    line-height: 1.4
}

/* =========================================================
   SIGN UP - ANIMATION + HOVER
========================================================= */
.register-hero-side {
    position: relative;
    overflow: hidden
}

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

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

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

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

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

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

    .register-hero-side::before, .register-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
    }

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

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

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

.register-step-number {
    transition: background-color .3s ease,color .3s ease,transform .3s ease
}

.register-card-container {
    animation: alFadeUp .9s .15s cubic-bezier(.22,.61,.36,1) backwards;
    transition: box-shadow .35s ease
}

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

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

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

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

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

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

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

#signupForm > * {
    animation: alFadeUp .6s backwards
}

#signupForm > :nth-child(1) {
    animation-delay: .35s
}

#signupForm > :nth-child(2) {
    animation-delay: .41s
}

#signupForm > :nth-child(3) {
    animation-delay: .47s
}

#signupForm > :nth-child(4) {
    animation-delay: .53s
}

#signupForm > :nth-child(5) {
    animation-delay: .59s
}

#signupForm > :nth-child(6) {
    animation-delay: .65s
}

#signupForm > :nth-child(7) {
    animation-delay: .71s
}

#signupForm > :nth-child(8) {
    animation-delay: .77s
}

#signupForm > :nth-child(9) {
    animation-delay: .83s
}

#signupForm > :nth-child(n+10) {
    animation-delay: .89s
}

.role-selection-card.active {
    animation: alSelect .45s ease
}

.register-input-box, .form-floating-custom > .form-select {
    transition: border-color .25s ease,box-shadow .25s ease,transform .25s ease
}

    .register-input-box:focus, .form-floating-custom > .form-select:focus {
        transform: translateY(-2px)
    }

.register-link {
    transition: color .25s ease
}

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

@media (hover:hover) and (pointer:fine) {
    .role-selection-card:not(.active):hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 22px rgba(7,18,30,.08)
    }

    .register-hero-side .hero-content .d-flex.flex-column > div:hover {
        transform: translateX(6px)
    }

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

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

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

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

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

@media (prefers-reduced-motion:reduce) {
    .register-hero-side .hero-content > *, .register-hero-side::before, .register-hero-side::after,
    .register-card-container, .register-card-container > *, #signupForm > *, .role-selection-card.active {
        animation: none !important
    }
}