/*
 * auth-redesign.css — EZ2290 Auth Split-Screen Layout
 * Figma source: node 341-2278 (file ijr8AlnpuYnfeChHvKvy11)
 * Loaded exclusively via _AccountMaster.cshtml — no dashboard bleed.
 *
 * Image assets: ~/Content/themes/images/auth/
 *   auth-ez2290-logo.png     — Zenwork / EZ 2290 logo
 *   auth-truck-hero.png      — bottom-of-panel truck photo
 *   auth-irs-logo.png        — IRS e-file provider badge
 *   auth-ata-logo.png        — ATA member badge
 *   auth-icon-schedule.svg   — "Schedule 1 in minutes" pill icon
 *   auth-icon-security.svg   — "256-bit secured" pill icon
 *   auth-icon-support.svg    — "US-based support" pill icon
 *   auth-icon-eye-slash.svg  — password toggle (hidden state)
 *
 * Breakpoint coverage:
 *   375px | 768px | 1024px | 1280px | 1440px | 1920px | 2560px
 */

/* ─── Design Tokens ──────────────────────────────────────────────────── */
:root {
    --auth-left-bg:         #56234c;
    --auth-accent:          #8f3a7e;
    --auth-accent-hover:    #6e2c62;
    --auth-accent-ring:     rgba(143, 58, 126, 0.22);
    --auth-heading-dark:    #011941;
    --auth-white:           #ffffff;
    --auth-input-border:    #d7d7d7;
    --auth-label-color:     #101828;
    --auth-placeholder:     #667085;
    --auth-sub-text:        rgba(58, 58, 58, 0.6);
    --auth-error:           #dc3545;

    --auth-input-h:         44px;
    --auth-input-radius:    6px;
    --auth-btn-h:           56px;
    --auth-btn-radius:      12px;
    --auth-panel-radius:    32px;
    --auth-right-pad-v:     72px;   /* right panel vertical padding */
    --auth-right-pad-h:     64px;   /* right panel horizontal padding */
    --auth-left-pad:        48px;
    /* --auth-truck-h removed: truck uses height: auto from the image itself */
    --auth-form-max-w:      520px;  /* max width of the form block */
}

/* ═══════════════════════════════════════════════════════════════════════
   1. PAGE SHELL
   ═══════════════════════════════════════════════════════════════════════ */

html {
    background-color:  var(--auth-left-bg);
    height:            100%;
    min-height:        100vh;
    overflow-x:        hidden;
}

body.full-height {
    font-family:       'Hanken Grotesk', 'Segoe UI', Arial, sans-serif !important;
    background-color:  var(--auth-left-bg) !important;
    height:            100%;
    min-height:        100vh;
    overflow-x:        hidden;
}

body.full-height,
body.full-height .page-wrapper {
    background-image:  none !important;
    background-color:  var(--auth-left-bg) !important;
    height:            100%;
    min-height:        100vh;
}

body.full-height #body {
    display:           flex;
    flex-direction:    column;
    background-color:  var(--auth-left-bg) !important;
    height:            100%;
    min-height:        100vh;
    padding:           0;
    box-sizing:        border-box;
}

body.full-height .main-container {
    /*
     * display: contents removes .main-container from the flex chain entirely.
     * Its children (.auth-split-layout) become direct flex children of #body.
     * This prevents the double-nested flex container from corrupting the
     * height chain that justify-content: center depends on.
     *
     * All other properties (background, padding, box-shadow) are ignored
     * when display: contents is active — that's intentional here, as the
     * body and auth-split-layout handle those directly.
     */
    display:           contents !important;
}

/* Hide any global nav/header that might bleed into auth pages */
body.full-height .header,
body.full-height .navbar,
body.full-height .navbar-default,
body.full-height nav,
body.full-height #header,
body.full-height .sigbtn,
body.full-height .logibutton {
    display:           none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   2. SPLIT LAYOUT SHELL
   ═══════════════════════════════════════════════════════════════════════ */

.auth-split-layout {
    display:           flex;
    align-items:       stretch;
    width:             100%;
    height:            100vh;
    min-height:        100vh;
    flex:              1 0 100vh;   /* as direct flex child of #body after display:contents on .main-container */
    background-color:  var(--auth-left-bg);  /* covers rounded-corner gap + any overflow */
}

/* High-specificity guard — Bootstrap or global styles override display:flex */
body.full-height .auth-split-layout {
    display:           flex !important;
    flex-direction:    row !important;
    align-items:       stretch !important;
    width:             100% !important;
    min-height:        100vh !important;
    margin-left:       0 !important;
    margin-right:      0 !important;
    padding-left:      0 !important;
    padding-right:     0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   3. LEFT PANEL
   ═══════════════════════════════════════════════════════════════════════ */

.auth-split-left {
    /*
     * Strict 50/50 split at all desktop widths.
     * min-height: 100vh guarantees the purple fills the full viewport.
     * Truck is a flex child with margin-top: auto — no padding-bottom reservation needed.
     */
    flex:              0 0 50%;
    width:             50%;
    max-width:         50%;
    height:            100%;
    min-height:        100vh;
    background-color:  var(--auth-left-bg);
    display:           flex;
    flex-direction:    column;
    justify-content:   flex-start;
    align-items:       stretch;   /* explicit — prevents inherited center from shrinking children */
    padding:           60px 56px 0 56px;
    box-sizing:        border-box;
    overflow:          hidden;
}

/* ── All left-panel text content sits above the truck (z-index: 1) ── */
.auth-left-logo,
.auth-left-badges,
.auth-left-headline,
.auth-left-benefits {
    flex-shrink:       0;
}

/* ── Logo ── */
.auth-left-logo {
    margin-bottom:     36px;
}
.auth-left-logo a    { display: inline-block; }
.auth-left-logo img  {
    height:            48px;
    width:             auto;
    display:           block;
}

/* ── Trust badges row ── */
.auth-left-badges {
    display:           flex !important;
    align-items:       center;
    justify-content:   center !important;
    gap:               20px;
    width:             100%;
    padding-bottom:    22px;
    margin-bottom:     22px;
    margin-left:       0 !important;
    border-bottom:     1px solid rgba(255, 255, 255, 0.28);
    box-sizing:        border-box;
}

/* IRS — rectangular badge (updated to show full logo without circular crop) */
.auth-badge-irs {
    position:          relative;
    flex-shrink:       0;
    display:           flex;
    align-items:       center;
    justify-content:   center;
}
.auth-badge-irs .irs-bg {
    display:           none;
}
.auth-badge-irs .irs-logo {
    display:           block;
    height:            60px;
    width:             auto;
    max-width:         120px;
    object-fit:        contain;
    border-radius:     0;
    background:        none;
    position:          static;
}

/* ATA — white rectangle box (Figma: 73×60, radius 3.333px, logo 63×52 inside) */
.auth-badge-ata {
    width:             73px;
    height:            60px;
    background:        #ffffff;
    border-radius:     3px;
    display:           flex;
    align-items:       center;
    justify-content:   center;
    flex-shrink:       0;
    padding:           4px 5px;
    box-sizing:        border-box;
}
.auth-badge-ata img {
    width:             63px;
    height:            52px;
    object-fit:        contain;
    display:           block;
    background:        none;
    padding:           0;
    border-radius:     0;
}

/* Safety: hide any stray direct-child imgs from old markup */
.auth-left-badges > img {
    display:           none;
}

/* ── Headline ── */
.auth-left-headline {
    font-family:       'Hanken Grotesk', Georgia, serif;
    font-size:         42px;
    font-weight:       700;
    color:             #ffffff;
    line-height:       1.2;
    letter-spacing:    0.84px;
    margin:            0 0 24px;
}

/* ── Feature pills ── */
.auth-left-benefits {
    list-style:        none;
    padding:           0;
    margin:            0;
    display:           flex;
    flex-direction:    column;
    gap:               10px;
}

.auth-left-benefits li {
    display:           flex;
    align-items:       center;
    gap:               12px;
    font-family:       'Hanken Grotesk', 'Segoe UI', sans-serif;
    font-size:         15px;
    font-weight:       400;
    color:             rgba(255, 255, 255, 0.96);
    background:        rgba(255, 255, 255, 0.10);
    border-radius:     8px;
    padding:           12px 16px;
    min-height:        47px;
    box-sizing:        border-box;
    line-height:       1.35;
}

.auth-left-benefits li .pill-icon {
    width:             24px;
    height:            24px;
    min-width:         24px;
    flex-shrink:       0;
    object-fit:        contain;
    filter:            none;   /* icons are already white from Figma — no invert needed */
    display:           block;
}

/* ── Left content block — wraps logo/badges/headline/pills, sits at top ── */
.auth-left-content {
    display:           flex;
    flex-direction:    column;
    align-items:       stretch;   /* explicit — keeps children full-width */
    flex-shrink:       0;
    width:             100%;      /* guarantee full width; belt-and-suspenders */
}

/* ── Truck hero — second flex child, pushed to panel bottom by space-between ── */
/* Image already has #56234c purple background — no CSS manipulation needed */
.auth-left-truck {
    width:             100%;
    flex-shrink:       0;
    line-height:       0;
    overflow:          visible;
    pointer-events:    none;
    margin-top:        auto;
    background:        transparent;
}

.auth-left-truck img {
    width:             100%;
    height:            auto;
    display:           block;
    object-fit:        cover;
    object-position:   center center;
    mask-image:        none;
    -webkit-mask-image: none;
    opacity:           1;
    filter:            none;
    mix-blend-mode:    normal;
    background:        transparent;
}

/* ═══════════════════════════════════════════════════════════════════════
   4. RIGHT PANEL
   ═══════════════════════════════════════════════════════════════════════ */

.auth-split-right {
    /*
     * Strict 50/50 split at all desktop widths.
     * height: 100% fills the .auth-split-layout reference height (100vh),
     *   giving justify-content: center a definite height to center within.
     * position: relative allows .auth-footer to be absolute at the bottom.
     */
    flex:              0 0 50%;
    width:             50%;
    max-width:         50%;
    height:            100vh !important;
    min-height:        100vh;
    background-color:  var(--auth-white);
    border-radius:     var(--auth-panel-radius) 0 0 var(--auth-panel-radius);
    display:           flex !important;
    flex-direction:    column !important;
    align-items:       center !important;
    justify-content:   center !important;
    padding:           var(--auth-right-pad-v) var(--auth-right-pad-h) 80px;
    box-sizing:        border-box;
    position:          relative;
}

/* Higher specificity override — ensures no breakpoint or global rule collapses centering */
.auth-split-layout .auth-split-right {
    display:           flex !important;
    justify-content:   center !important;
    align-items:       center !important;
}

/*
 * Form content wrapper — the only flex child being centered.
 * Login uses #js-page-main-content, Register uses .auth-form-inner.
 * Both get the same 480px cap and auto horizontal margins.
 */
#js-page-main-content,
.auth-form-inner {
    width:             100%;
    max-width:         480px;
    margin-left:       auto;
    margin-right:      auto;
    flex-shrink:       0;
}

/*
 * Footer — absolutely pinned to panel bottom, out of flex flow.
 * Removing it from flex flow lets justify-content: center work on
 * just the form wrapper above.
 */
.auth-split-right .auth-footer {
    position:          absolute;
    bottom:            24px;
    left:              0;
    right:             0;
    text-align:        center;
    padding:           0 var(--auth-right-pad-h);
    box-sizing:        border-box;
}

/* ── Page heading ── */
.auth-heading {
    font-family:       'Hanken Grotesk', 'Segoe UI', sans-serif;
    font-size:         24px;
    font-weight:       600;
    color:             var(--auth-heading-dark);
    margin:            0 0 8px;
    letter-spacing:    0;
    line-height:       1.3;
}

/* ── Sub-line: "Don't have an Account? Sign up" ── */
#js-page-main-content > .auth-switch,
.auth-sub-line {
    font-family:       'Hanken Grotesk', 'Segoe UI', sans-serif;
    font-size:         15px;
    color:             var(--auth-sub-text);
    margin:            0 0 32px;
    text-align:        left;
}

.auth-form .auth-switch {
    font-family:       'Hanken Grotesk', 'Segoe UI', sans-serif;
    font-size:         14px;
    color:             var(--auth-sub-text);
    text-align:        center;
    margin-top:        18px;
}

.auth-switch a,
.auth-sub-line a {
    font-weight:       600;
    color:             #262d2f;
    text-decoration:   underline;
    text-underline-offset: 2px;
}
.auth-switch a:hover,
.auth-sub-line a:hover {
    color:             var(--auth-accent);
}

/* ═══════════════════════════════════════════════════════════════════════
   5. FORM ELEMENTS
   ═══════════════════════════════════════════════════════════════════════ */

.auth-form .form-group {
    margin-bottom:     24px;
    position:          relative;
}

/* Labels */
.auth-form .control-label {
    display:           block;
    font-family:       'Hanken Grotesk', 'Segoe UI', sans-serif;
    font-size:         15px;
    font-weight:       400;
    color:             var(--auth-label-color);
    margin-bottom:     10px;
    padding:           0;
    float:             none;
    width:             auto;
    text-align:        left;
    line-height:       1.3;
}

/* Input wrapper */
.auth-form .form-input-wrap {
    position:          relative;
}

/* Inputs */
.auth-form .form-control {
    height:            var(--auth-input-h);
    padding:           10px 44px 10px 16px !important;
    font-family:       'Hanken Grotesk', 'Segoe UI', sans-serif;
    font-size:         14px;
    color:             #1f2937;
    background-color:  #ffffff;
    border:            1px solid var(--auth-input-border);
    border-radius:     var(--auth-input-radius);
    box-shadow:        none;
    width:             100%;
    box-sizing:        border-box;
    transition:        border-color 0.15s, box-shadow 0.15s;
}

.auth-form .form-control::-webkit-input-placeholder { color: var(--auth-placeholder); font-size: 14px; }
.auth-form .form-control::-moz-placeholder           { color: var(--auth-placeholder); font-size: 14px; }
.auth-form .form-control::placeholder                { color: var(--auth-placeholder); font-size: 14px; }

.auth-form .form-control:focus {
    outline:           none;
    border-color:      var(--auth-accent);
    box-shadow:        0 0 0 3px var(--auth-accent-ring);
    background-color:  #ffffff;
}

/* Suppress Edge/IE native password reveal */
.auth-form #Password::-ms-reveal,
.auth-form #Password::-ms-clear { display: none !important; }

/* ── Right-side input icon (envelope, etc.) ── */
.auth-form .input-icon {
    position:          absolute;
    right:             14px;
    top:               50%;
    transform:         translateY(-50%);
    color:             #9ca3af;
    font-size:         14px;
    pointer-events:    none;
}

/* ── Password toggle button ── */
.auth-form .pwd-toggle-btn {
    position:          absolute;
    right:             12px;
    top:               50%;
    transform:         translateY(-50%);
    background:        none;
    border:            none;
    cursor:            pointer;
    padding:           2px;
    z-index:           5;
    line-height:       1;
    display:           flex;
    align-items:       center;
    justify-content:   center;
}
.auth-form .pwd-toggle-btn:focus { outline: none; }
.auth-form .pwd-toggle-btn img {
    width:             20px;
    height:            20px;
    object-fit:        contain;
    opacity:           0.55;
}
.auth-form .pwd-toggle-btn:hover img { opacity: 0.8; }

/* ── Forgot password ── */
.auth-forgot-link {
    display:           block;
    text-align:        right;
    font-family:       'Hanken Grotesk', 'Segoe UI', sans-serif;
    font-size:         14px;
    font-weight:       400;
    color:             var(--auth-accent);
    text-decoration:   none;
    margin-top:        8px;
}
.auth-forgot-link:hover {
    color:             var(--auth-accent-hover);
    text-decoration:   underline;
}

/* ─── Validation states ───────────────────────────────────────────────── */
.auth-form .form-group.has-error .form-control {
    border-color:      var(--auth-error);
    box-shadow:        0 0 0 3px rgba(220, 53, 69, 0.10);
}
.auth-form .form-group.has-error .control-label { color: var(--auth-label-color); }

.auth-form .field-validation-error {
    display:           block;
    font-size:         12px;
    color:             var(--auth-error);
    margin-top:        4px;
}
.auth-form .field-validation-valid { display: none; }

.auth-form #spnPasswordError {
    display:           block;
    font-size:         12px;
    margin-top:        2px;
}
.auth-form .js-totalvalidation { margin-bottom: 8px; }
.auth-form .js-totalvalidation .validation-summary-errors ul {
    padding-left:      16px;
    margin:            0;
    font-size:         13px;
    color:             var(--auth-error);
}
.auth-form .js-totalvalidation .validation-summary-valid { display: none; }

/* ─── "Keep me Logged in" checkbox row ────────────────────────────────── */
.auth-checkbox-row {
    display:           flex;
    align-items:       center;
    flex-wrap:         nowrap;     /* prevent row from wrapping to two lines */
    gap:               10px;
    margin-bottom:     20px;
    font-family:       'Hanken Grotesk', 'Segoe UI', sans-serif;
    font-size:         14px;
    color:             var(--auth-placeholder);
}
.auth-checkbox-row .checkbox,
.auth-checkbox-row .logincheckbox {
    margin:            0;
    padding:           0;
    flex-shrink:       0;
}
/* Label text stays on one line beside the checkbox */
.auth-checkbox-row label,
.auth-checkbox-row .logincheckbox_text {
    white-space:       nowrap;
    margin:            0;
}

/* ─── Primary action button ───────────────────────────────────────────── */
.auth-form .btn_account,
.auth-form .btn_account.btn-default {
    display:           block;
    width:             100%;
    height:            var(--auth-btn-h);
    line-height:       var(--auth-btn-h);
    padding:           0;
    margin:            0;
    font-family:       'Hanken Grotesk', 'Segoe UI', sans-serif;
    font-size:         16px;
    font-weight:       600;
    text-align:        center;
    color:             #ffffff !important;
    background-color:  var(--auth-accent) !important;
    border:            none !important;
    border-radius:     var(--auth-btn-radius);
    cursor:            pointer;
    letter-spacing:    0.5px;
    transition:        background-color 0.18s, box-shadow 0.18s;
    box-sizing:        border-box;
}
.auth-form .btn_account:hover,
.auth-form .btn_account.btn-default:hover,
.auth-form .btn_account:focus,
.auth-form .btn_account.btn-default:focus {
    background-color:  var(--auth-accent-hover) !important;
    color:             #ffffff !important;
    box-shadow:        0 4px 16px rgba(143, 58, 126, 0.38);
}
.auth-form .btn_account[disabled],
.auth-form .btn_account.btn-default[disabled] {
    opacity:           0.52;
    cursor:            not-allowed;
    box-shadow:        none;
}

/* ─── Register misc ──────────────────────────────────────────────────── */
.auth-check-group {
    display:           flex;
    align-items:       flex-start;
    gap:               10px;
    margin-bottom:     12px;
    font-family:       'Hanken Grotesk', 'Segoe UI', sans-serif;
    font-size:         13px;
    color:             #374151;
}
.auth-check-group input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; }
.auth-check-group label { margin: 0; font-weight: 400; cursor: pointer; }
.auth-check-group a { color: var(--auth-accent); }

.auth-terms {
    font-family:       'Hanken Grotesk', 'Segoe UI', sans-serif;
    font-size:         12px;
    color:             #6b7280;
    text-align:        center;
    margin-bottom:     12px;
    line-height:       1.55;
}
.auth-terms a { color: var(--auth-accent); text-decoration: none; }
.auth-terms a:hover { text-decoration: underline; }

.auth-captcha-wrap { margin-bottom: 14px; }

.auth-estimate-banner {
    font-family:       'Hanken Grotesk', 'Segoe UI', sans-serif;
    background-color:  #364d70;
    color:             #ffffff;
    text-align:        center;
    padding:           12px 16px;
    font-size:         17px;
    font-weight:       600;
    border-radius:     8px;
    margin-bottom:     20px;
    line-height:       1.3;
}

/* ─── Footer ─────────────────────────────────────────────────────────── */
.auth-footer {
    text-align:        center;
    margin-top:        24px;
    padding-top:       16px;
    border-top:        1px solid #f3f4f6;
}
.auth-footer p {
    font-family:       'Hanken Grotesk', 'Segoe UI', sans-serif;
    color:             #9ca3af;
    font-size:         11px;
    margin:            0;
    line-height:       1.7;
}
.auth-footer a { color: #6b7280; text-decoration: none; }
.auth-footer a:hover { text-decoration: underline; color: var(--auth-accent); }

/* ═══════════════════════════════════════════════════════════════════════
   6. RESPONSIVE
   375px | 480px | 768px | 1024px | 1280px | 1440px | 1920px | 2560px
   ═══════════════════════════════════════════════════════════════════════ */

/* Large desktop (1440px+) */
@media (min-width: 1440px) {
    .auth-split-left {
        justify-content:   flex-start;
        padding:           60px 56px 0;
    }
    :root { --auth-right-pad-h: 80px; }
}

/* Standard laptops (1025px–1439px) */
@media (min-width: 1025px) and (max-width: 1439px) {
    :root { --auth-right-pad-h: 56px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   7. MOBILE-ONLY HEADER BAR (logo + hamburger inside the white panel)
   Hidden on desktop; shows at top of the white panel on mobile.
   ═══════════════════════════════════════════════════════════════════════ */

.auth-mobile-header {
    display:           none;   /* hidden on desktop */
}

.auth-mobile-logo-link {
    display:           inline-flex;
    align-items:       center;
    flex:              1;
    min-width:         0;
}
.auth-mobile-logo-link img {
    height:            100px;
    width:             auto;
    max-width:         100%;
    display:           block;
    object-fit:        contain;
    object-position:   left center;
}

.auth-hamburger {
    background:        none;
    border:            none;
    cursor:            pointer;
    padding:           6px;
    display:           flex;
    flex-direction:    column;
    justify-content:   center;
    align-items:       center;
    gap:               5px;
    width:             40px;
    height:            40px;
    border-radius:     6px;
    transition:        background 0.15s;
}
.auth-hamburger:hover  { background: rgba(0,0,0,0.05); }
.auth-hamburger:focus  { outline: none; background: rgba(0,0,0,0.06); }
.auth-hamburger span {
    display:           block;
    width:             22px;
    height:            2px;
    background-color:  #374151;
    border-radius:     2px;
    transition:        background 0.15s;
}

/* ═══════════════════════════════════════════════════════════════════════
   8. RESPONSIVE
   375px | 480px | 768px | 1024px | 1280px | 1440px | 1920px | 2560px
   ═══════════════════════════════════════════════════════════════════════ */

/* Large desktop (1440px+) */
@media (min-width: 1440px) {
    .auth-split-left {
        justify-content:   flex-start;
        padding:           60px 56px 0;
    }
    :root { --auth-right-pad-h: 80px; }
}

/* Standard laptops (1025px–1439px) */
@media (min-width: 1025px) and (max-width: 1439px) {
    :root { --auth-right-pad-h: 56px; }
}

/* ── Tablets + mobile (≤1024px) — stack: white form on top, purple brand below ── */
@media (max-width: 1024px) {
    /* Allow page to scroll when stacked content exceeds one viewport */
    html, body.full-height {
        height:            auto !important;
        min-height:        100vh !important;
        overflow-y:        auto !important;
    }
    body.full-height #body {
        height:            auto !important;
        min-height:        100vh !important;
    }

    /* Match high-specificity desktop guard to override flex-direction: row !important */
    body.full-height .auth-split-layout {
        flex-direction:    column !important;
        align-items:       stretch !important;
        height:            auto !important;
        min-height:        100vh !important;
        flex:              none !important;
    }

    /* ── White form panel — order: -1 puts it ABOVE the purple panel ── */
    .auth-split-right {
        order:             -1;
        flex:              none !important;
        width:             100% !important;
        max-width:         100% !important;
        height:            auto !important;
        min-height:        auto !important;
        border-radius:     0 !important;
        justify-content:   flex-start !important;
        align-items:       stretch !important;
        padding:           0 0 48px;
        position:          relative;
    }
    .auth-split-layout .auth-split-right {
        justify-content:   flex-start !important;
        align-items:       stretch !important;
    }

    /* ── Mobile header bar: logo + hamburger at the top of the white panel ── */
    .auth-mobile-header {
        display:           flex;
        align-items:       center;
        justify-content:   space-between;
        padding:           18px 24px 16px;
        border-bottom:     1px solid #f3f4f6;
        margin-bottom:     32px;
        width:             100%;
        min-height:        120px;
        box-sizing:        border-box;
    }

    /* Form content wrapper — constrained width, auto margins for centering */
    #js-page-main-content,
    .auth-form-inner {
        max-width:         560px;
        width:             100%;
        padding-left:      var(--auth-right-pad-h);
        padding-right:     var(--auth-right-pad-h);
        margin-left:       auto;
        margin-right:      auto;
        box-sizing:        border-box;
    }

    /* Footer back into normal flow (was position:absolute) */
    .auth-split-right .auth-footer {
        position:          relative !important;
        bottom:            auto !important;
        left:              auto !important;
        right:             auto !important;
        margin-top:        24px;
        padding-left:      var(--auth-right-pad-h);
        padding-right:     var(--auth-right-pad-h);
        max-width:         none;
    }

    /* ── Purple brand panel — order: 0 puts it BELOW the white panel ── */
    .auth-split-left {
        order:             0;
        flex:              none;
        width:             100%;
        max-width:         100%;
        min-width:         0;
        height:            auto !important;
        min-height:        auto !important;
        padding:           40px 32px 0;
        overflow:          hidden;
    }

    /* Logo hidden on mobile — it's now in the white panel mobile header */
    .auth-left-logo         { display: none !important; }

    /* All brand content visible below the form — no height budget concern */
    .auth-left-badges       { margin-bottom: 20px; padding-bottom: 20px; justify-content: flex-start !important; }
    .auth-left-headline     { font-size: 28px; margin-bottom: 16px; display: block !important; }
    .auth-left-benefits     { display: flex !important; gap: 8px; }
    .auth-left-benefits li  { font-size: 14px; padding: 11px 15px; }

    /* Truck — small spacer, then image fills full width */
    .auth-left-truck {
        margin-top:        20px !important;
        max-height:        none;
        overflow:          visible;
    }
    .auth-left-truck img { max-height: none; object-position: center center; }

    :root { --auth-right-pad-h: 40px; }
}

/* ── Mobile (≤767px) ── */
@media (max-width: 767px) {
    .auth-mobile-header {
        padding:           16px 20px 14px;
        margin-bottom:     24px;
    }

    .auth-split-left        { padding: 32px 20px 0; }
    .auth-left-headline     { font-size: 24px; margin-bottom: 14px; }
    .auth-left-badges       { gap: 12px; padding-bottom: 16px; margin-bottom: 16px; }
    .auth-left-benefits li  { font-size: 14px; padding: 10px 14px; min-height: 44px; }

    .auth-split-right       { padding-bottom: 36px; }

    .auth-heading           { font-size: 20px; }
    .auth-sub-line          { font-size: 14px; margin-bottom: 22px; }

    .auth-form .btn_account,
    .auth-form .btn_account.btn-default {
        height:            48px;
        line-height:       48px;
    }

    :root {
        --auth-right-pad-h: 20px;
        --auth-form-max-w:  100%;
        --auth-btn-h:       48px;
    }
}

/* ── Small mobile (≤480px) ── */
@media (max-width: 480px) {
    .auth-mobile-header {
        padding:           14px 16px 12px;
        margin-bottom:     20px;
    }
    .auth-mobile-logo-link img  { height: 80px; }

    .auth-split-left        { padding: 28px 16px 0; }
    .auth-left-headline     { font-size: 22px; }
    .auth-left-badges       { gap: 10px; }

    .auth-split-right       { padding-bottom: 28px; }
    .auth-heading           { font-size: 19px; }

    :root { --auth-right-pad-h: 16px; }

    .auth-captcha-wrap .g-recaptcha,
    .auth-captcha-wrap #js-captcha {
        transform:         scale(0.84);
        transform-origin:  left top;
        max-width:         100%;
        overflow:          hidden;
    }
}

/* ── Extra-small (≤375px) ── */
@media (max-width: 375px) {
    .auth-mobile-header     { padding: 12px 14px 10px; margin-bottom: 16px; }
    .auth-split-right       { padding-bottom: 24px; }

    :root { --auth-right-pad-h: 14px; }

    .auth-captcha-wrap .g-recaptcha,
    .auth-captcha-wrap #js-captcha {
        transform:         scale(0.78);
        transform-origin:  left top;
    }
}