/* ===========================================================================
   Order funnel — /order, /order/details, /order/payment, /account
   ---------------------------------------------------------------------------
   Built entirely on the existing --ssp-* tokens from site.css, so both the light
   and dark themes work without a single new colour being invented. A separate
   file rather than more of site.css because this is one self-contained feature.
   =========================================================================== */

.order-section { padding-top: 2.5rem; }

/* Two columns: the current step, and the order summary beside it. */
.order-layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 992px) {
    .order-layout { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; }
    .order-side { position: sticky; top: 1.5rem; }
}

/* ── Step indicator ─────────────────────────────────────────────────────── */
.order-steps {
    list-style: none; padding: 0; margin: 0 0 1.75rem;
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.order-step { display: inline-flex; align-items: center; gap: .5rem; color: var(--ssp-muted); font-size: .9rem; }
.order-step + .order-step::before {
    content: ""; width: 1.75rem; height: 1px; background: var(--ssp-line); margin-right: .5rem;
}
.order-step-marker {
    width: 2.1rem; height: 2.1rem; border-radius: 999px;
    display: inline-grid; place-items: center;
    background: var(--ssp-bg-alt); border: 1px solid var(--ssp-line);
    font-size: .85rem;
}
.order-step.is-current { color: var(--ssp-text); font-weight: 600; }
.order-step.is-current .order-step-marker { background: var(--ssp-red); border-color: var(--ssp-red); color: #fff; }
.order-step.is-done .order-step-marker { border-color: var(--ssp-red); color: var(--ssp-red); }
@media (max-width: 575px) { .order-step-label { display: none; } }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.order-card {
    background: var(--ssp-card); border: 1px solid var(--ssp-line);
    border-radius: var(--ssp-radius); padding: 1.6rem; margin-bottom: 1.25rem;
}
.order-card h1, .order-card h2 { margin-top: 0; font-size: 1.3rem; }
.order-card h2 i { color: var(--ssp-red); margin-right: .4rem; }
.order-card-lead { color: var(--ssp-muted); }
.order-card-footnote { font-size: .9rem; color: var(--ssp-muted); margin-bottom: 0; }

.order-plan-card { border-color: var(--ssp-red); }

.order-feature-grid { display: grid; grid-template-columns: 1fr; gap: 0 2rem; }
@media (min-width: 576px) { .order-feature-grid { grid-template-columns: 1fr 1fr; } }
.order-features { list-style: none; padding: 0; margin: 0 0 1rem; }
.order-features li { display: flex; gap: .5rem; padding: .3rem 0; font-size: .93rem; }
.order-features i { color: var(--ssp-success); margin-top: .25rem; }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.order-form-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 576px) { .order-form-grid { grid-template-columns: 1fr 1fr; } }
.order-field-wide { grid-column: 1 / -1; }

.order-field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .25rem; }
.order-field label { font-size: .88rem; font-weight: 600; }
/* Scoped to text-style inputs: an unchecked `input` here is also the GST exemption and terms
   checkboxes, and `width: 100%` stretched those across the row — pushing their captions out of the
   panel. Checkboxes and radios keep their intrinsic size. */
.order-field input:not([type="checkbox"]):not([type="radio"]), .order-field select {
    width: 100%; padding: .65rem .8rem;
    border: 1px solid var(--ssp-line); border-radius: 8px;
    background: var(--ssp-card); color: var(--ssp-text); font: inherit;
}
.order-field input:focus, .order-field select:focus {
    outline: 2px solid var(--ssp-red); outline-offset: 1px; border-color: var(--ssp-red);
}
.order-field input[readonly] { background: var(--ssp-bg-alt); color: var(--ssp-muted); }
.order-field-hint { font-size: .8rem; color: var(--ssp-muted); margin: 0; }
.order-field-error { font-size: .82rem; color: var(--ssp-red-dark); }

.order-switch { display: flex; gap: .6rem; align-items: flex-start; font-size: .86rem; cursor: pointer; }
.order-switch input {
    margin-top: .2rem; flex: 0 0 auto;
    width: 1.05rem; height: 1.05rem; min-width: 1.05rem; min-height: 1.05rem;
}
/* The caption must be allowed to wrap; without this it is forced onto one line by the flex row
   and overflows the card. */
.order-switch > span { flex: 1 1 auto; min-width: 0; }
.order-gst { border-top: 1px solid var(--ssp-line); padding-top: 1rem; }

/* The GST exemption declaration. Given its own surface so it reads as a deliberate attestation
   instead of a checkbox left over from the address fields. Token-based, so both themes are
   unaffected. */
.order-declaration {
    margin-top: .9rem; padding: .8rem .9rem;
    background: var(--ssp-bg-alt); border: 1px solid var(--ssp-line); border-radius: 8px;
}
.order-declaration-title {
    margin: 0 0 .5rem; font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; color: var(--ssp-muted);
}

.order-consent { margin: 1rem 0; }

/* ── Order summary ──────────────────────────────────────────────────────── */
.order-summary {
    background: var(--ssp-card); border: 1px solid var(--ssp-line);
    border-radius: var(--ssp-radius); padding: 1.4rem;
}
.order-summary-form { margin-top: 1rem; }
.order-summary-title { color: var(--ssp-red); font-size: 1.15rem; margin: 0 0 1rem; }
.order-summary-row { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.order-summary-price { white-space: nowrap; }
.order-summary-note { font-size: .82rem; color: var(--ssp-muted); margin: .2rem 0 0; }
.order-summary-terms { font-size: .78rem; color: var(--ssp-muted); margin: .9rem 0 0; }
.order-summary-rule { border: 0; border-top: 1px solid var(--ssp-line); margin: 1rem 0; }
.order-summary-methods { font-size: .82rem; color: var(--ssp-muted); margin: .9rem 0 0; }
.order-summary-tax { font-size: .8rem; color: var(--ssp-muted); margin: .6rem 0 0; }
.order-summary-empty { color: var(--ssp-muted); margin: 0; }
.order-summary-testmode {
    font-size: .82rem; margin: .9rem 0 0; padding: .55rem .7rem;
    background: var(--ssp-red-soft); color: var(--ssp-red-dark); border-radius: 6px;
}
.order-summary-email { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--ssp-line); font-size: .85rem; }
.order-summary-email-label { display: block; color: var(--ssp-muted); }
.order-summary-email-value { font-weight: 600; word-break: break-all; }


/* What a renewal costs — higher whenever the first payment carries a discount. */
.order-summary-recurring { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--ssp-line); }
.order-summary-recurring-title { font-size: .8rem; color: var(--ssp-muted); margin: 0 0 .4rem; }
.order-summary-recurring .order-summary-row { font-size: .82rem; color: var(--ssp-muted); padding: .14rem 0; }
.order-summary-recurring .order-summary-recurring-total { color: var(--ssp-text); font-weight: 600; }


.order-next { width: 100%; }
.order-actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.order-actions form { margin: 0; }

/* ── Messages ───────────────────────────────────────────────────────────── */
.order-error, .order-status, .order-testmode-banner {
    border-radius: 8px; padding: .75rem 1rem; margin-bottom: 1rem; font-size: .9rem;
}
.order-error { background: var(--ssp-red-soft); color: var(--ssp-red-dark); }
.order-status { background: var(--ssp-bg-alt); border: 1px solid var(--ssp-line); }
.order-testmode-banner { background: var(--ssp-red-soft); color: var(--ssp-red-dark); }
.order-pay-status { margin: 1rem 0; font-size: .9rem; color: var(--ssp-muted); }
.order-fallback { margin-top: 1rem; font-size: .88rem; }

/* ── Review + done ──────────────────────────────────────────────────────── */
.order-review { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1.25rem; margin: 1rem 0 1.5rem; }
.order-review dt { color: var(--ssp-muted); font-size: .88rem; }
.order-review dd { margin: 0; font-weight: 600; font-size: .93rem; }

.order-done { max-width: 40rem; margin: 0 auto; text-align: center; padding: 1rem 0 3rem; }
.order-done-icon { font-size: 3rem; color: var(--ssp-success); display: block; margin-bottom: 1rem; }
.order-done-icon.is-waiting { color: var(--ssp-warning); }
.order-done-note { color: var(--ssp-muted); font-size: .9rem; }
.order-done-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-top: 1.75rem; }

.order-address { font-style: normal; line-height: 1.6; margin: 0; }
.order-auth-card { padding: 2rem; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Failure twin of .order-done-icon.is-waiting. Red rather than amber: a declined payment is a
   finished, negative outcome, not a pending one, and the two must not look alike. */
.order-done-icon.is-failed { color: var(--ssp-red); }

/* Annual-offer presentation on the plan chooser. The badge carries the headline percentage; the note
   carries the two figures that make it checkable (list price struck through, cash saved) so the claim
   is never just an adjective. The "limited time" clause renders only when an end date is configured. */
.order-offer-badge {
    display: inline-block;
    margin-left: .45rem;
    padding: .1rem .45rem;
    border-radius: var(--ssp-radius-pill);
    background: var(--ssp-red);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .03em;
    vertical-align: middle;
}


/* ── Saving / tax accents (3.4.13) ──────────────────────────────────────── */
/* Two tokens this file owns, in the site's own pattern (light on :root, dark under data-theme), so the
   green of "you save" reads in both themes. Everything else below reuses site.css tokens. */
:root {
    --order-save: #15803d;
    --order-save-soft: #ecfdf3;
    --order-total-ink: var(--ssp-red-dark);
}
[data-theme="dark"] {
    --order-save: #4ade80;
    --order-save-soft: rgba(22, 163, 74, .16);
    --order-total-ink: #9CC2FF; /* was the old red brand (#fca5a0), missed by the 3.4.15 rebrand */
}

/* ── Order summary: itemised lines, then the total in its own box ───────── */
.order-summary-lines { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--ssp-line); }
.order-summary-lines .order-summary-row { font-size: .9rem; padding: .32rem 0; }
.order-summary-lines .order-summary-row i { width: 1rem; text-align: center; margin-right: .15rem; }

/* What the customer keeps: green, so it is the first line the eye lands on. */
.order-summary-row.is-saving {
    margin: .15rem -.55rem; padding: .38rem .55rem; border-radius: 8px;
    background: var(--order-save-soft); color: var(--order-save); font-weight: 600;
}
.order-summary-row.is-subtotal {
    margin-top: .3rem; padding-top: .5rem; border-top: 1px dashed var(--ssp-line); font-weight: 600;
}
/* The tax added: highlighted too, but neutral - it is information, not a benefit. */
.order-summary-row.is-tax {
    margin: .15rem -.55rem; padding: .38rem .55rem; border-radius: 8px;
    background: var(--ssp-bg-soft); color: var(--ssp-text); font-weight: 600;
}

.order-summary-grand {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    margin-top: 1rem; padding: .85rem 1rem; border-radius: 10px;
    background: var(--ssp-red-soft); border: 1px solid rgba(59, 130, 255, .28);
}
.order-summary-grand-label { font-weight: 700; color: var(--ssp-heading); }
.order-summary-grand-label small { display: block; font-size: .72rem; font-weight: 500; color: var(--ssp-muted); }
.order-summary-grand-value {
    font-family: var(--ssp-font-head); font-size: 1.45rem; font-weight: 800; line-height: 1.1;
    color: var(--order-total-ink); white-space: nowrap; text-align: right;
}
.order-summary-grand-value small { font-family: var(--ssp-font-body); font-size: .8rem; font-weight: 500; color: var(--ssp-muted); }

.order-summary-savings {
    margin: .7rem 0 0; padding: .55rem .7rem; border-radius: 8px;
    background: var(--order-save-soft); color: var(--order-save); font-size: .84rem; line-height: 1.45;
}
.order-summary-savings i { margin-right: .3rem; }

/* ── Billing choice on step 1: Monthly vs Yearly as two cards ───────────── */
fieldset.order-billing { min-width: 0; margin-top: 1.5rem; }
/* Floated, which is what takes a legend OUT of the fieldset's top border and into its content box;
   the grid below clears it. */
.order-billing-title {
    float: left; width: 100%; padding: 0; margin: 0 0 .9rem;
    font-family: var(--ssp-font-head); font-size: 1.15rem; font-weight: 700; color: var(--ssp-heading);
}
/* Room above for the "Best value" ribbon, which overhangs its card's top edge. */
.order-billing-grid {
    clear: both; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; padding-top: .6rem;
}

.order-billing-option {
    position: relative; display: flex; flex-direction: column; gap: .3rem;
    padding: 1.15rem 1.15rem 1rem; border: 1.5px solid var(--ssp-line); border-radius: var(--ssp-radius);
    background: var(--ssp-card); cursor: pointer;
    transition: border-color var(--ssp-transition), box-shadow var(--ssp-transition);
}
/* Deliberately no lift on hover: a card that moves under the pointer was reported as a defect (3.4.9). */
.order-billing-option:hover { border-color: rgba(59, 130, 255, .5); }
.order-billing-option.is-selected,
.order-billing-option:has(.order-billing-radio:checked) {
    border-color: var(--ssp-red); box-shadow: 0 0 0 3px rgba(59, 130, 255, .18);
}
.order-billing-option:has(.order-billing-radio:focus-visible) { outline: 2px solid var(--ssp-red); outline-offset: 3px; }

/* The real radio stays in the DOM and focusable - keyboard and screen readers use it - but is drawn by
   .order-billing-check instead. */
.order-billing-radio { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }

.order-billing-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.order-billing-check {
    width: 1.15rem; height: 1.15rem; flex: none; border-radius: 50%;
    border: 2px solid var(--ssp-line); display: inline-grid; place-items: center;
}
.order-billing-option.is-selected .order-billing-check,
.order-billing-option:has(.order-billing-radio:checked) .order-billing-check { border-color: var(--ssp-red); }
.order-billing-option.is-selected .order-billing-check::after,
.order-billing-option:has(.order-billing-radio:checked) .order-billing-check::after {
    content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--ssp-red);
}
.order-billing-cycle { font-family: var(--ssp-font-head); font-size: 1.1rem; font-weight: 700; color: var(--ssp-heading); }
.order-billing-head .order-offer-badge { margin-left: 0; }
.order-billing-product { font-size: .78rem; color: var(--ssp-muted); padding-left: 1.65rem; }

.order-billing-price { display: flex; align-items: baseline; gap: .3rem; margin-top: .55rem; }
.order-billing-amount {
    font-family: var(--ssp-font-head); font-size: 2rem; font-weight: 800; line-height: 1; color: var(--ssp-heading);
}
.order-billing-per { font-size: .9rem; color: var(--ssp-muted); }

.order-billing-compare { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .85rem; }
.order-billing-compare s { color: var(--ssp-muted); }
.order-billing-save {
    padding: .12rem .55rem; border-radius: var(--ssp-radius-pill);
    background: var(--order-save-soft); color: var(--order-save); font-size: .78rem; font-weight: 700;
}
.order-billing-sub { font-size: .84rem; color: var(--ssp-slate); }
.order-billing-limit { font-size: .78rem; font-weight: 600; color: var(--order-total-ink); }
.order-billing-fine {
    margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--ssp-line);
    font-size: .75rem; line-height: 1.45; color: var(--ssp-muted);
}

.order-billing-ribbon {
    position: absolute; top: -.72rem; right: 1rem;
    padding: .2rem .65rem; border-radius: var(--ssp-radius-pill);
    background: var(--ssp-success-strong); color: #fff; box-shadow: var(--ssp-shadow-xs);
    font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}

/* A plan an administrator switched OFF but left Shown, styled as "coming soon": dashed outline on a flat
   grey card, a small grey pill in the corner, and NO radio circle. The text stays at full strength - it
   is information the customer may want to read, not a broken control - and the dashed edge plus the
   missing radio are what say "not selectable". */
.order-billing-option.is-unavailable {
    cursor: not-allowed; border: 1.5px dashed var(--ssp-muted); background: var(--ssp-bg-soft); box-shadow: none;
}
.order-billing-option.is-unavailable:hover { border-color: var(--ssp-muted); }
/* Belt and braces: never the selected look, whatever state the radio arrives in. */
.order-billing-option.is-unavailable:has(.order-billing-radio:checked) { border-color: var(--ssp-muted); box-shadow: none; }
.order-billing-option.is-unavailable .order-billing-product { padding-left: 0; }
.order-billing-option.is-unavailable .order-offer-badge,
.order-billing-option.is-unavailable .order-billing-save { background: var(--ssp-line); color: var(--ssp-slate); }
.order-billing-soon {
    position: absolute; top: .75rem; right: .75rem;
    padding: .18rem .6rem; border-radius: 6px;
    background: var(--ssp-line); color: var(--ssp-slate); /* muted on line-grey was under 4.5:1 */
    font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}

/* Shown under the cards when every plan is "Coming soon" and there is no order form beside them. */
.order-billing-notice {
    margin: 1rem 0 0; padding: .7rem .9rem; border-radius: 8px;
    background: var(--ssp-bg-soft); color: var(--ssp-text); font-size: .88rem;
}
.order-billing-notice i { margin-right: .35rem; color: var(--ssp-muted); }

/* ── Pricing page plan cards (/pricing) ─────────────────────────────────── */
/* Same catalogue, same states as the order page's billing cards, and the same pieces reused
   (.order-billing-soon, .order-billing-ribbon, .order-offer-badge, .order-billing-save) so the two pages
   read as one system. A column so the button sits at the foot of every card whatever its content. */
.pricing-plan { position: relative; display: flex; flex-direction: column; }
.pricing-plan.is-pro { border-color: var(--ssp-red); }
/* The Free card, highlighted: green edge and a soft green glow - "available", not "for sale". */
.pricing-plan.is-free {
    border: 1.5px solid var(--ssp-success);
    box-shadow: 0 0 0 4px rgba(22, 163, 74, .12), var(--ssp-shadow-sm);
}
.pricing-plan.is-free .feature-icon { background: var(--order-save-soft); color: var(--order-save); }
.pricing-plan h2 .order-offer-badge { font-size: .62rem; vertical-align: .35em; }
.pricing-plan-price { font-size: 2.1rem; font-weight: 800; margin: .75rem 0 .35rem; color: var(--ssp-heading); }
.pricing-plan-per { font-size: 1rem; font-weight: 500; color: var(--ssp-muted); }
.pricing-plan-compare { display: flex; justify-content: center; align-items: center; gap: .5rem; margin: 0 0 .35rem; font-size: .88rem; }
.pricing-plan-compare s { color: var(--ssp-muted); }
.pricing-plan-sub { font-size: .88rem; color: var(--ssp-slate); margin: 0 0 .2rem; }
/* Room for two lines on every card, so the buttons above line up across cards with notes of different length. */
.pricing-plan-fine { font-size: .78rem; line-height: 1.45; color: var(--ssp-muted); margin: .6rem 0 0; min-height: 2.9em; }
/* The spacing the removed GST line used to provide above the features. */
.pricing-plan .check-list { margin-top: 1rem; margin-bottom: 1.25rem; }
.pricing-plan .order-billing-ribbon { right: 1.25rem; }

/* Disabled but Shown in Admin > Plans: the dashed "Coming soon" card, as on the order page. */
.pricing-plan.is-coming-soon { border: 1.5px dashed var(--ssp-muted); background: var(--ssp-bg-soft); box-shadow: none; }
.pricing-plan.is-coming-soon .order-offer-badge,
.pricing-plan.is-coming-soon .order-billing-save { background: var(--ssp-line); color: var(--ssp-slate); } /* muted on line-grey was under 4.5:1 */

/* ── Sign in / create account (/account/login) ───────────────────────────── */
/* One split card: a brand panel saying what the account is for, and the form. The panel is a FIXED dark
   gradient in both themes (it is decoration, not content), so it needs no dark-mode twin; everything in
   the form half uses the site tokens and themes normally. */
.auth-section { padding-top: 2.5rem; padding-bottom: 3.5rem; }
.auth-shell {
    display: grid; grid-template-columns: 1fr; max-width: 60rem; margin: 0 auto;
    background: var(--ssp-card); border: 1px solid var(--ssp-line);
    border-radius: var(--ssp-radius-lg); box-shadow: var(--ssp-shadow); overflow: hidden;
}
@media (min-width: 768px) { .auth-shell { grid-template-columns: 5fr 6fr; } }

.auth-brand { display: none; }
@media (min-width: 768px) {
    .auth-brand {
        display: flex; flex-direction: column; justify-content: center; gap: .9rem;
        position: relative; padding: 3rem 2.5rem; color: #e2e8f0;
        background:
            radial-gradient(120% 80% at 0% 0%, rgba(59, 130, 255, .38) 0%, rgba(59, 130, 255, 0) 55%),
            radial-gradient(90% 70% at 100% 100%, rgba(34, 197, 94, .22) 0%, rgba(34, 197, 94, 0) 60%),
            linear-gradient(160deg, #0C1530 0%, #060B1A 100%);
    }
}
.auth-brand-mark {
    width: 3rem; height: 3rem; border-radius: 14px; display: inline-grid; place-items: center;
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12);
}
.auth-brand-mark img { width: 2.1rem; height: auto; display: block; }
.auth-brand-title { font-family: var(--ssp-font-head); font-size: 1.75rem; font-weight: 800; color: #fff; margin: .4rem 0 0; }
.auth-brand-lead { color: #cbd5e1; margin: 0; line-height: 1.55; }
.auth-brand-points { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .7rem; }
.auth-brand-points li { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; color: #e2e8f0; }
.auth-brand-points i { color: #4ade80; margin-top: .2rem; }

.auth-panel { padding: 2rem 1.5rem; }
@media (min-width: 576px) { .auth-panel { padding: 2.5rem 2.5rem 2.25rem; } }

/* The two modes as a segmented control. Links, not buttons: the URL says which one is open. */
.auth-tabs {
    display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; padding: .25rem; margin-bottom: 1.6rem;
    background: var(--ssp-bg-soft); border: 1px solid var(--ssp-line); border-radius: 10px;
}
.auth-tab {
    text-align: center; padding: .55rem .5rem; border-radius: 8px;
    font-size: .9rem; font-weight: 600; color: var(--ssp-muted); text-decoration: none;
    transition: background-color var(--ssp-transition), color var(--ssp-transition);
}
.auth-tab:hover { color: var(--ssp-text); }
.auth-tab.is-active {
    background: var(--ssp-card); color: var(--ssp-heading);
    box-shadow: 0 0 0 1px var(--ssp-line), var(--ssp-shadow-xs);
}
/* In dark, card and track are nearly the same navy; lift the active tab so the mode is unmistakable. */
[data-theme="dark"] .auth-tab.is-active { background: rgba(255, 255, 255, .08); }

.auth-title { font-family: var(--ssp-font-head); font-size: 1.55rem; font-weight: 800; margin: 0 0 .35rem; color: var(--ssp-heading); }
.auth-subtitle { color: var(--ssp-muted); margin: 0 0 1.4rem; font-size: .93rem; }

.auth-form { display: grid; gap: 1rem; }
.auth-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.auth-forgot { font-size: .82rem; font-weight: 600; }

/* A leading icon inside the field, and an optional trailing reveal button. */
.auth-input { position: relative; }
.auth-input > i {
    position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
    color: var(--ssp-muted); pointer-events: none; font-size: .95rem;
}
.order-field .auth-input input:not([type="checkbox"]):not([type="radio"]) { padding: .75rem .9rem .75rem 2.5rem; border-radius: 10px; }
.order-field .auth-input input[data-password] { padding-right: 2.9rem; }
.auth-input input:focus + .auth-reveal, .auth-input:focus-within > i { color: var(--ssp-red); }
.auth-reveal {
    position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
    width: 2.25rem; height: 2.25rem; border: 0; border-radius: 8px; background: transparent;
    color: var(--ssp-muted); cursor: pointer; display: inline-grid; place-items: center;
}
.auth-reveal:hover { color: var(--ssp-text); background: var(--ssp-bg-soft); }
.auth-reveal:focus-visible { outline: 2px solid var(--ssp-red); outline-offset: 1px; }

.auth-submit { margin-top: .4rem; display: inline-flex; justify-content: center; align-items: center; gap: .55rem; }
.auth-submit i { font-size: .9em; transition: transform var(--ssp-transition); }
.auth-submit:hover i { transform: translateX(3px); }
.auth-secure { margin: 0; text-align: center; font-size: .78rem; color: var(--ssp-muted); }
.auth-secure i { color: var(--ssp-success); margin-right: .3rem; }
.auth-footnote {
    margin: 1.4rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--ssp-line);
    text-align: center; font-size: .88rem; color: var(--ssp-muted);
}