/* =========================================================
   ALEA LOGIN V3
   Self-contained so changes to site.css cannot break the login.
   ========================================================= */

.login-body {
    --login-bg: #F8F6F2;
    --login-surface: #FCFBF9;
    --login-text: #302D2A;
    --login-muted: #817A73;
    --login-soft: #A39B94;
    --login-line: #E4DED7;

    min-height: 100vh !important;
    margin: 0 !important;
    background: var(--login-bg) !important;
    color: var(--login-text) !important;
    font-family: Inter, Arial, sans-serif !important;
}

.login-shell {
    width: 100% !important;
    min-height: 100vh !important;
    box-sizing: border-box !important;
    padding: 0 54px !important;
}

.login-brand-row {
    width: min(1340px, 100%) !important;
    height: 108px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
    border-bottom: 1px solid var(--login-line) !important;
}

.login-brand {
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
}

.login-brand-image {
    display: block !important;
    width: 92px !important;
    height: auto !important;
}

.login-language {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.login-language a {
    min-width: 31px !important;
    height: 31px !important;
    display: grid !important;
    place-items: center !important;
    box-sizing: border-box !important;
    border-radius: 50% !important;
    color: var(--login-muted) !important;
    text-decoration: none !important;
    font: 500 10px/1 Inter, Arial, sans-serif !important;
    letter-spacing: .04em !important;
}

.login-language a:hover {
    background: #F0ECE7 !important;
    color: var(--login-text) !important;
}

.login-main {
    width: min(1210px, 100%) !important;
    min-height: calc(100vh - 109px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 430px !important;
    align-items: center !important;
    gap: clamp(70px, 9vw, 150px) !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
    padding: 68px 0 92px !important;
}

.login-intro {
    max-width: 625px !important;
    padding: 0 0 5vh !important;
}

.login-kicker {
    display: block !important;
    margin-bottom: 20px !important;
    color: var(--accent, #9A8979) !important;
    font: 600 10px/1 Inter, Arial, sans-serif !important;
    letter-spacing: .13em !important;
    text-transform: uppercase !important;
}

.login-intro h1 {
    max-width: 620px !important;
    margin: 0 !important;
    color: #3D3935 !important;
    font: 500 clamp(64px, 6vw, 94px)/.91 "Cormorant Garamond", Georgia, serif !important;
    letter-spacing: -.052em !important;
}

.login-intro p {
    max-width: 420px !important;
    margin: 26px 0 0 !important;
    color: var(--login-muted) !important;
    font: 400 13px/1.72 Inter, Arial, sans-serif !important;
}

.login-panel {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 39px 38px 36px !important;
    border: 1px solid var(--login-line) !important;
    border-radius: 18px !important;
    background: rgba(252, 251, 249, .78) !important;
    box-shadow: 0 18px 60px rgba(60, 53, 47, .035) !important;
}

.login-panel-head {
    margin-bottom: 27px !important;
}

.login-panel-head h2 {
    margin: 0 !important;
    color: var(--login-text) !important;
    font: 500 37px/1 "Cormorant Garamond", Georgia, serif !important;
    letter-spacing: -.035em !important;
}

.login-panel-head p {
    margin: 8px 0 0 !important;
    color: var(--login-muted) !important;
    font: 400 11.5px/1.55 Inter, Arial, sans-serif !important;
}

.login-field {
    margin-top: 18px !important;
}

.login-field label {
    display: block !important;
    margin-bottom: 7px !important;
    color: var(--login-muted) !important;
    font: 500 10.5px/1.3 Inter, Arial, sans-serif !important;
}

.login-field input {
    width: 100% !important;
    height: 48px !important;
    box-sizing: border-box !important;
    padding: 0 13px !important;
    border: 1px solid #DCD5CD !important;
    border-radius: 10px !important;
    outline: none !important;
    background: var(--login-surface) !important;
    color: var(--login-text) !important;
    font: 400 13px/1 Inter, Arial, sans-serif !important;
}

.login-field input:focus {
    border-color: var(--accent, #9A8979) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #9A8979) 10%, transparent) !important;
}

.login-options {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 15px 0 21px !important;
}

.login-remember {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    color: var(--login-muted) !important;
    font: 400 10.5px/1.3 Inter, Arial, sans-serif !important;
}

.login-remember input {
    accent-color: var(--accent, #9A8979) !important;
}

.login-submit {
    width: 100% !important;
    height: 48px !important;
    box-sizing: border-box !important;
    border: 1px solid var(--accent, #9A8979) !important;
    border-radius: 10px !important;
    background: var(--accent, #9A8979) !important;
    color: #FFF !important;
    cursor: pointer !important;
    font: 600 11px/1 Inter, Arial, sans-serif !important;
}

.login-submit:hover {
    filter: brightness(.97) !important;
}

.login-error {
    margin: 0 0 17px !important;
    padding: 11px 12px !important;
    border: 1px solid #D9BBB5 !important;
    border-radius: 9px !important;
    background: #FBF3F1 !important;
    color: #865047 !important;
    font: 400 10.5px/1.45 Inter, Arial, sans-serif !important;
}

.login-demo {
    margin-top: 27px !important;
    padding-top: 21px !important;
    border-top: 1px solid var(--login-line) !important;
}

.login-demo-head {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    margin-bottom: 9px !important;
}

.login-demo-head strong {
    color: var(--login-text) !important;
    font: 600 10.5px/1.3 Inter, Arial, sans-serif !important;
}

.login-demo-head span {
    color: var(--login-soft) !important;
    font: 400 9.5px/1.4 Inter, Arial, sans-serif !important;
}

.login-demo > a {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 9px 0 !important;
    border-bottom: 1px solid var(--login-line) !important;
    color: var(--login-text) !important;
    text-decoration: none !important;
}

.login-demo > a span {
    font: 500 10.5px/1.3 Inter, Arial, sans-serif !important;
}

.login-demo > a small {
    color: var(--login-soft) !important;
    font: 400 9.5px/1.3 Inter, Arial, sans-serif !important;
}

.login-demo-password {
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding-top: 12px !important;
    color: var(--login-muted) !important;
    font: 400 9.5px/1.3 Inter, Arial, sans-serif !important;
}

.login-demo-password code {
    color: var(--login-text) !important;
    font: 500 9.5px/1.3 Inter, Arial, sans-serif !important;
}

@media (max-width: 900px) {
    .login-shell { padding: 0 28px !important; }
    .login-main {
        grid-template-columns: 1fr !important;
        width: min(470px, 100%) !important;
        gap: 0 !important;
        padding-top: 44px !important;
    }
    .login-intro { display: none !important; }
}

@media (max-width: 560px) {
    .login-shell { padding: 0 18px !important; }
    .login-brand-row { height: 82px !important; }
    .login-main {
        min-height: calc(100vh - 83px) !important;
        padding: 27px 0 48px !important;
    }
    .login-panel {
        padding: 29px 22px 27px !important;
        border-radius: 15px !important;
    }
}

/* =========================================================
   ALEA PROFESSIONAL — ORBIT DETAIL
   A quieter, light-surface interpretation of the Coming Soon orbit.
   ========================================================= */
.login-intro {
    position: relative !important;
    min-height: 510px !important;
    display: flex !important;
    align-items: center !important;
    overflow: visible !important;
}
.login-intro-copy {
    position: relative !important;
    z-index: 3 !important;
    width: min(100%, 520px) !important;
}
.login-orbit {
    position: absolute !important;
    z-index: 1 !important;
    width: clamp(300px, 30vw, 430px) !important;
    aspect-ratio: 1 !important;
    right: clamp(-155px, -9vw, -75px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
    opacity: .9 !important;
}
.login-orbit-ring {
    position: absolute !important;
    border: 1px solid rgba(154, 137, 121, .25) !important;
    border-radius: 50% !important;
}
.login-orbit-ring-a {
    inset: 0 !important;
    animation: aleaLoginOrbitSpin 38s linear infinite !important;
}
.login-orbit-ring-b {
    inset: 15% !important;
    border-style: dashed !important;
    animation: aleaLoginOrbitSpinReverse 29s linear infinite !important;
}
.login-orbit-ring-c {
    inset: 31% !important;
    border-color: rgba(154, 137, 121, .14) !important;
    animation: aleaLoginOrbitSpin 22s linear infinite !important;
}
.login-orbit-ring-a::before,
.login-orbit-ring-b::after,
.login-orbit-ring-c::before {
    content: "" !important;
    position: absolute !important;
    border-radius: 50% !important;
    background: #b99c82 !important;
    box-shadow: 0 0 22px rgba(185, 156, 130, .45) !important;
}
.login-orbit-ring-a::before {
    width: 9px !important;
    height: 9px !important;
    top: 13% !important;
    left: 12% !important;
}
.login-orbit-ring-b::after {
    width: 6px !important;
    height: 6px !important;
    right: 24% !important;
    bottom: 4% !important;
}
.login-orbit-ring-c::before {
    width: 5px !important;
    height: 5px !important;
    top: 24% !important;
    right: -3px !important;
}
.login-orbit-core {
    position: absolute !important;
    inset: 32% !important;
    display: grid !important;
    place-content: center !important;
    text-align: center !important;
    border: 1px solid rgba(154, 137, 121, .18) !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .34) !important;
    box-shadow: inset 0 0 54px rgba(154, 137, 121, .06), 0 18px 55px rgba(77, 68, 60, .035) !important;
    backdrop-filter: blur(9px) !important;
}
.login-orbit-core strong {
    color: #9a8979 !important;
    font: 400 clamp(38px, 3.3vw, 54px)/.82 "Instrument Serif", Georgia, serif !important;
    letter-spacing: -.03em !important;
}
.login-orbit-core small {
    margin-top: 11px !important;
    color: #a59b92 !important;
    font: 600 8px/1 Inter, Arial, sans-serif !important;
    letter-spacing: .22em !important;
    text-transform: uppercase !important;
}
@keyframes aleaLoginOrbitSpin { to { transform: rotate(360deg); } }
@keyframes aleaLoginOrbitSpinReverse { to { transform: rotate(-360deg); } }

@media (max-width: 1100px) and (min-width: 901px) {
    .login-orbit { right: -125px !important; opacity: .72 !important; }
    .login-intro-copy { width: min(100%, 450px) !important; }
}
@media (max-width: 900px) {
    .login-intro { display: none !important; }
    .login-main {
        position: relative !important;
        isolation: isolate !important;
    }
    .login-main::before,
    .login-main::after {
        content: "" !important;
        position: absolute !important;
        z-index: -1 !important;
        border: 1px solid rgba(154, 137, 121, .12) !important;
        border-radius: 50% !important;
        pointer-events: none !important;
    }
    .login-main::before {
        width: 360px !important;
        height: 360px !important;
        top: 6px !important;
        right: -190px !important;
    }
    .login-main::after {
        width: 230px !important;
        height: 230px !important;
        top: 70px !important;
        right: -90px !important;
        border-style: dashed !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .login-orbit-ring-a,
    .login-orbit-ring-b,
    .login-orbit-ring-c {
        animation: none !important;
    }
}