html {
    min-height: 100%;
}

body.auth-page {
    min-height: 100vh;
    margin: 0;
    background: #fff8f1;
    color: #242424;
}

.auth-hero {
    min-height: 260px;
    box-sizing: border-box;
    padding: 48px 24px 100px;
    background: #eb6d27;
    color: #ffffff;
    text-align: center;
}

.auth-brand {
    margin: 0;
    font-size: clamp(3rem, 9vw, 5.5rem);
    font-weight: 900;
    line-height: 1;
}

.auth-tagline {
    margin: 22px 0 0;
    font-size: clamp(1rem, 3vw, 1.45rem);
    font-weight: 700;
}

.auth-shell {
    width: min(92%, 620px);
    margin: -70px auto 48px;
    position: relative;
}

.auth-card {
    box-sizing: border-box;
    padding: clamp(28px, 6vw, 48px);
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 18px 50px rgba(76, 44, 23, 0.12);
}

.auth-title {
    margin: 0;
    color: #ed7d28;
    text-align: center;
    font-size: clamp(2rem, 7vw, 3rem);
    font-weight: 900;
}

.auth-description {
    margin: 18px 0 30px;
    text-align: center;
    font-size: 1.05rem;
    line-height: 1.9;
}

.auth-form {
    display: grid;
    gap: 18px;
}

.auth-field {
    display: grid;
    gap: 8px;
}

.auth-label {
    font-size: 1rem;
    font-weight: 800;
}

.auth-input {
    width: 100%;
    height: 58px;
    box-sizing: border-box;
    padding: 0 18px;
    border: 2px solid #e6ddd4;
    border-radius: 15px;
    background: #ffffff;
    color: #222222;
    font: inherit;
    font-size: 1rem;
    outline: none;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease;
}

.auth-input:focus {
    border-color: #ed7d28;
    box-shadow: 0 0 0 4px rgba(237, 125, 40, 0.14);
}

.auth-input-ltr {
    direction: ltr;
    text-align: left;
}

.auth-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 8px;
}

.auth-button {
    min-height: 56px;
    box-sizing: border-box;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 12px 20px;
    border: 2px solid #ed7d28;
    border-radius: 999px;
    background: #ed7d28;
    color: #ffffff;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

.auth-button-secondary {
    background: #ffffff;
    color: #ed7d28;
}

.auth-button-full {
    width: 100%;
}

.auth-message {
    box-sizing: border-box;
    margin: 0 0 22px;
    padding: 14px 16px;
    border-radius: 13px;
    text-align: center;
    line-height: 1.7;
}

.auth-message-error {
    border: 1px solid #df6666;
    background: #fff0f0;
    color: #9f2222;
}

.auth-message-info {
    border: 1px solid #e5b077;
    background: #fff7ed;
    color: #8b4b13;
}

.auth-switch {
    margin: 26px 0 0;
    text-align: center;
    line-height: 1.8;
}

.auth-switch a {
    color: #d85e18;
    font-weight: 900;
    text-underline-offset: 4px;
}

.auth-note {
    margin: 18px 0 0;
    color: #6d655f;
    text-align: center;
    font-size: 0.92rem;
    line-height: 1.8;
}

@media (max-width: 560px) {
    .auth-hero {
        min-height: 220px;
        padding-top: 38px;
    }

    .auth-shell {
        margin-top: -58px;
    }

    .auth-card {
        border-radius: 22px;
    }

    .auth-actions {
        grid-template-columns: 1fr;
    }
}

/* Keep the authentication-page brand white despite global heading styles. */
.auth-brand {
    color: #ffffff !important;
    text-shadow: 0 5px 18px rgba(86, 37, 10, 0.18);
}

.auth-resend-form {
    margin: 18px 0 0;
    text-align: center;
}

.auth-resend-button {
    padding: 6px 10px;
    border: 0;
    background: transparent;
    color: #d85e18;
    font: inherit;
    font-size: 0.94rem;
    font-weight: 900;
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
}

.auth-resend-button:hover {
    color: #ad4610;
}


/* =========================================================
   UI Polish #1 - Login Modal
   ========================================================= */

body.login-modal-open {
    overflow: hidden;
}

.login-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;
    box-sizing: border-box;

    background: rgba(15, 23, 42, 0.34);

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 180ms ease,
        visibility 180ms ease;
}

.login-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.login-modal-card {
    position: relative;

    width: min(520px, 100%);
    max-width: 520px;
    max-height: calc(100vh - 48px);

    margin: 0;
    overflow-y: auto;

    box-sizing: border-box;

    transform:
        translateY(12px)
        scale(0.985);

    box-shadow:
        0 28px 70px rgba(15, 23, 42, 0.24);

    transition:
        transform 180ms ease;
}

.login-modal-overlay.is-open
.login-modal-card {
    transform:
        translateY(0)
        scale(1);
}

.login-modal-close {
    position: absolute;
    top: 14px;
    left: 16px;

    width: 38px;
    height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;
    color: #64748b;

    font: inherit;
    font-size: 28px;
    line-height: 1;

    cursor: pointer;

    transition:
        background 140ms ease,
        color 140ms ease,
        transform 140ms ease;
}

.login-modal-close:hover {
    background: rgba(15, 23, 42, 0.06);
    color: #0f172a;
}

.login-modal-close:active {
    transform: scale(0.94);
}

.login-modal-close:focus-visible {
    outline: 3px solid rgba(244, 123, 32, 0.24);
    outline-offset: 2px;
}

.login-modal-title {
    padding-inline: 42px;
}

.login-modal-form {
    margin-top: 22px;
}

.login-modal-links {
    margin-top: 20px;
    text-align: center;
}

.login-modal-links > a,
.login-modal-links p a {
    font-weight: 700;
}

.login-modal-links p {
    margin: 14px 0 0;
}

@media (max-width: 560px) {
    .login-modal-overlay {
        align-items: flex-end;

        padding:
            16px
            12px;
    }

    .login-modal-card {
        width: 100%;
        max-width: none;
        max-height: calc(100vh - 24px);

        border-radius:
            24px
            24px
            18px
            18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-modal-overlay,
    .login-modal-card {
        transition: none;
    }
}


/* =========================================================
   Feature 19 - Auth Glass V2
========================================================= */

body.feature19-auth-page {
    min-height:
        100vh !important;
    margin:
        0 !important;
    padding:
        32px 16px !important;
    display:
        flex !important;
    align-items:
        center !important;
    justify-content:
        center !important;
    overflow-x:
        hidden;
    background:
        radial-gradient(
            circle at 86% 8%,
            rgba(255, 122, 0, 0.13),
            transparent 30rem
        ),
        radial-gradient(
            circle at 8% 88%,
            rgba(255, 122, 0, 0.04),
            transparent 24rem
        ),
        #111214
        !important;
    color:
        #ffffff !important;
}

/*
 * Neutralize old light/split-screen presentation.
 * These selectors intentionally cover the legacy auth
 * wrapper families without changing form semantics.
 */

body.feature19-auth-page
.auth-layout,
body.feature19-auth-page
.auth-shell,
body.feature19-auth-page
.auth-container,
body.feature19-auth-page
.auth-page-container,
body.feature19-auth-page
.auth-wrapper {
    width:
        min(620px, 100%)
        !important;
    min-height:
        0 !important;
    margin:
        0 auto !important;
    padding:
        0 !important;
    display:
        block !important;
    background:
        transparent !important;
    box-shadow:
        none !important;
}

body.feature19-auth-page
.auth-brand,
body.feature19-auth-page
.auth-branding,
body.feature19-auth-page
.auth-brand-panel,
body.feature19-auth-page
.auth-side,
body.feature19-auth-page
.auth-hero {
    display:
        none !important;
}

body.feature19-auth-page
.auth-card {
    width:
        min(620px, 100%)
        !important;
    max-width:
        620px !important;
    min-height:
        0 !important;
    margin:
        0 auto !important;
    padding:
        clamp(
            28px,
            5vw,
            48px
        )
        !important;
    border:
        1px solid
        rgba(255, 122, 0, 0.20)
        !important;
    border-radius:
        26px
        !important;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.035),
            rgba(255, 255, 255, 0.008)
        ),
        rgba(25, 26, 29, 0.96)
        !important;
    color:
        #ffffff
        !important;
    box-shadow:
        0 26px 72px
        rgba(0, 0, 0, 0.46)
        !important;
}

body.feature19-auth-page
.auth-card::before,
body.feature19-auth-page
.auth-card::after {
    display:
        none !important;
}

body.feature19-auth-page
.auth-title {
    color:
        #ffffff
        !important;
}

body.feature19-auth-page
.auth-subtitle,
body.feature19-auth-page
.auth-helper,
body.feature19-auth-page
.auth-form label,
body.feature19-auth-page
.auth-card p {
    color:
        #c6c9cf
        !important;
}

body.feature19-auth-page
.auth-form input,
body.feature19-auth-page
.auth-form select,
body.feature19-auth-page
.auth-form textarea {
    border:
        1px solid
        rgba(255, 255, 255, 0.11)
        !important;
    background:
        #25262b
        !important;
    color:
        #ffffff
        !important;
}

body.feature19-auth-page
.auth-form input:focus,
body.feature19-auth-page
.auth-form select:focus,
body.feature19-auth-page
.auth-form textarea:focus {
    outline:
        none !important;
    border-color:
        #ff7a00
        !important;
    background:
        #292a2f
        !important;
    box-shadow:
        0 0 0 4px
        rgba(255, 122, 0, 0.12)
        !important;
}

body.feature19-auth-page
.auth-submit,
body.feature19-auth-page
.auth-primary-button {
    border-color:
        #ff7a00
        !important;
    background:
        #ff7a00
        !important;
    color:
        #111214
        !important;
    box-shadow:
        0 12px 30px
        rgba(255, 122, 0, 0.20)
        !important;
}

body.feature19-auth-page
a {
    color:
        #ff9a3d
        !important;
}

/* ---------- Framed/modal state ---------- */

body.feature19-auth-page.feature19-auth-embedded {
    min-height:
        100% !important;
    padding:
        58px 20px 28px
        !important;
    align-items:
        flex-start !important;
    background:
        transparent
        !important;
}

body.feature19-auth-embedded
.auth-layout,
body.feature19-auth-embedded
.auth-shell,
body.feature19-auth-embedded
.auth-container,
body.feature19-auth-embedded
.auth-page-container,
body.feature19-auth-embedded
.auth-wrapper {
    width:
        100% !important;
}

body.feature19-auth-embedded
.auth-card {
    width:
        100% !important;
    max-width:
        none !important;
    margin:
        0 !important;
    padding:
        18px
        clamp(12px, 4vw, 28px)
        28px
        !important;
    border:
        0 !important;
    border-radius:
        0 !important;
    background:
        transparent
        !important;
    box-shadow:
        none !important;
}

body.feature19-auth-embedded
.auth-title {
    margin-top:
        0 !important;
    color:
        #ffffff !important;
    font-size:
        clamp(30px, 7vw, 44px)
        !important;
}

body.feature19-auth-embedded
.auth-form {
    margin-top:
        26px;
}

@media (max-width: 620px) {
    body.feature19-auth-page {
        padding:
            16px 10px
            !important;
    }

    body.feature19-auth-page
    .auth-card {
        padding:
            26px 20px
            !important;
        border-radius:
            20px
            !important;
    }

    body.feature19-auth-page.feature19-auth-embedded {
        padding:
            52px 10px 20px
            !important;
    }
}