/* ============================================================================
   SIGN IN OR REGISTER (Scene 10 / .ps-scene-auth-v2) — desktop centering
   ----------------------------------------------------------------------------
   Default styling pins the form to the left edge of .ps-left. On desktop
   the left pane is wide, leaving a lot of awkward empty space to the right
   of the form. This fix centers .ps-auth-v2-stack horizontally inside
   .ps-left and gives it a sensible reading max-width while keeping every-
   thing left-aligned on mobile.

   Load AFTER private-seller-scenes-extra.css:
     <link rel="stylesheet" href="~/css/private-seller-scenes-extra.css" asp-append-version="true" />
     <link rel="stylesheet" href="~/css/auth-center-fix.css"             asp-append-version="true" />
   ============================================================================ */


/* ── DESKTOP (≥901px) — center the auth column inside .ps-left ────────── */
@media (min-width: 901px) {

    .ps-scene-auth-v2 > .ps-left {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;        /* horizontal centering */
        justify-content: center !important;    /* vertical centering    */
        padding: 32px 40px !important;
        overflow-y: auto !important;
    }

        /* Header items (progress / eyebrow / h2 / subtitle) align with
           the centered stack instead of stretching full width. */
        .ps-scene-auth-v2 > .ps-left > .ps-progress,
        .ps-scene-auth-v2 > .ps-left > .ps-scene-label,
        .ps-scene-auth-v2 > .ps-left > .ps-question,
        .ps-scene-auth-v2 > .ps-left > .ps-subtitle,
        .ps-scene-auth-v2 > .ps-left > .ps-auth-v2-stack,
        .ps-scene-auth-v2 > .ps-left > .ps-nav {
            width: 100% !important;
            max-width: 460px !important;
            align-self: center !important;
        }

        /* Progress dots stay flush-left within the centered column. */
        .ps-scene-auth-v2 > .ps-left > .ps-progress {
            margin-bottom: 12px !important;
        }

        /* Headline + subtitle aligned with the form below. */
        .ps-scene-auth-v2 > .ps-left > .ps-scene-label {
            align-self: flex-start !important;
        }

        .ps-scene-auth-v2 > .ps-left > .ps-question,
        .ps-scene-auth-v2 > .ps-left > .ps-subtitle {
            text-align: left !important;
        }

        /* The auth stack itself stretches to the 460px column */
        .ps-scene-auth-v2 .ps-auth-v2-stack {
            max-width: 100% !important;
            width: 100% !important;
            margin: 0 !important;
        }

        /* Back button left-aligned within the centered column */
        .ps-scene-auth-v2 > .ps-left > .ps-nav {
            justify-content: flex-start !important;
            margin-top: 18px !important;
        }
}


/* ── ULTRA-WIDE (≥1200px) — slightly looser max-width for breathing room  */
@media (min-width: 1200px) {
    .ps-scene-auth-v2 > .ps-left > .ps-progress,
    .ps-scene-auth-v2 > .ps-left > .ps-scene-label,
    .ps-scene-auth-v2 > .ps-left > .ps-question,
    .ps-scene-auth-v2 > .ps-left > .ps-subtitle,
    .ps-scene-auth-v2 > .ps-left > .ps-auth-v2-stack,
    .ps-scene-auth-v2 > .ps-left > .ps-nav {
        max-width: 500px !important;
    }
}


/* ── MOBILE (≤900px) — restore default left-aligned full-width layout ── */
@media (max-width: 900px) {
    .ps-scene-auth-v2 > .ps-left {
        align-items: stretch !important;
        justify-content: flex-start !important;
        padding: 18px 18px 16px !important;
    }

        .ps-scene-auth-v2 > .ps-left > .ps-auth-v2-stack {
            max-width: 100% !important;
            width: 100% !important;
        }
}