/* Storefront authentication pages */
.auth-page {
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    display: grid;
    align-items: start;
    justify-items: stretch;
    box-sizing: border-box;
    padding: 44px 34px;
    background:
        linear-gradient(115deg, rgba(6, 34, 71, .98) 0%, rgba(11, 99, 246, .90) 58%, rgba(62, 133, 239, .82) 100%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.auth-panel {
    box-sizing: border-box;
    width: min(460px, 100%);
    justify-self: end;
    align-self: start;
    margin-top: clamp(24px, 7vh, 76px);
    margin-right: clamp(0px, 3vw, 56px);
    margin-bottom: 24px;
    padding: 38px 40px 34px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 20px !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 24px 70px rgba(3, 21, 50, .28) !important;
}

.auth-brand {
    display: grid;
    min-height: 62px;
    place-items: center;
    margin-bottom: 20px;
}

.auth-brand-fallback {
    grid-area: 1 / 1;
    color: #062247;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .02em;
}

.auth-brand-fallback strong { color: #0b63f6; }

.auth-brand img {
    grid-area: 1 / 1;
    display: block !important;
    width: auto;
    max-width: 230px;
    max-height: 62px;
    margin: 0;
    object-fit: contain;
}

.auth-brand > span,
.register-brand > span { display: none !important; }

.auth-brand span {
    color: #062247;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .02em;
}

.auth-brand span strong { color: #0b63f6; }

.auth-heading {
    margin-bottom: 24px;
    text-align: center;
}

.auth-heading h1 {
    margin: 0 0 8px;
    color: #071b3d;
    font-size: 24px;
    line-height: 1.2;
}

.auth-heading p {
    margin: 0;
    color: #71819c;
    font-size: 13px;
    line-height: 1.5;
}

.auth-panel form { gap: 16px; }
.auth-panel label { gap: 8px; color: #253a5f; font-size: 13px; }

/* Keep credential fields and actions aligned to one shared form width. */
.auth-panel form > label {
    width: 100%;
    margin-inline: auto;
}

.auth-panel form > label input:not([type="checkbox"]) {
    width: 100%;
}

.auth-field-help {
    display: block;
    margin: -8px 0 2px;
    color: #71819c;
    font-size: 11px;
    line-height: 1.4;
}

.auth-panel input:not([type="checkbox"]) {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    border-radius: 10px;
    background: #f8fbff;
    font-size: 14px;
}

.auth-panel input:not([type="checkbox"]):focus {
    border-color: #0b63f6;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(11, 99, 246, .12);
    outline: 0;
}

.auth-options { font-size: 12px; }
.auth-options a { color: #0b63f6; font-weight: 700; }

.auth-panel button.primary,
.auth-panel a.secondary,
.auth-panel button.desktop {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    border-radius: 10px;
}

.auth-panel button.primary { box-shadow: 0 8px 18px rgba(11, 99, 246, .22); }
.auth-panel a.secondary,
.auth-panel button.desktop { margin-top: 12px; }
.auth-powered { display: none !important; }

@media (max-width: 720px) {
    .auth-page { padding: 20px 12px; }
    .auth-panel {
        justify-self: center;
        margin-right: 0;
        padding: 28px 22px 24px;
        border-radius: 18px !important;
    }

    .auth-panel form > label {
        width: 100%;
    }
}

@media (max-width: 980px) {
    .auth-page {
        align-items: start;
        padding: 28px 18px;
        background-position: 35% center;
    }

    .auth-panel {
        justify-self: center;
        align-self: start;
        margin-top: 18px;
        margin-right: 0;
    }
}

/* Final mobile pass: keep the login card inside the device viewport. */
@media (max-width: 767px) {
    .auth-page {
        width: 100%;
        min-height: 100dvh;
        align-items: start;
        padding: 14px 10px 24px;
        background-position: center;
    }

    .auth-panel {
        width: 100% !important;
        max-width: 480px !important;
        margin: 0 auto !important;
        padding: 26px 18px 22px !important;
        border-radius: 18px !important;
    }

    .auth-brand {
        min-height: 52px;
        margin-bottom: 18px;
    }

    .auth-brand span,
    .auth-brand-fallback {
        font-size: 20px;
    }

    .auth-heading h1 { font-size: 22px; }
    .auth-heading p { font-size: 12px; }

    .auth-panel form > label { width: 100%; }
    .auth-options { flex-wrap: wrap; }
    .auth-options label { width: auto; }
}