/*
 * Auth Shell — customer-facing Splash / Welcome / Sign-up / Sign-in app shell.
 * Headerless + footerless, mobile-first (375px), safe-area aware.
 *
 * Color VALUES (--auth-primary, --auth-deep, --auth-ink, --auth-white) are
 * declared per-request in resources/views/bsslms/auth-shell.blade.php from
 * App\Support\Branding so every tenant (any white-label brand) gets its own
 * accent automatically. This file only defines structure/typography that
 * consumes those variables — never hard-code a brand color here.
 *
 * FIGMA PIXEL PASS (2026-07 figma-2026 set1/set2) — reworked to match the
 * Splash / Welcome / 4-step Create Account / Login screens: photo hero band
 * with floating numbered progress pill, icon-prefixed rounded inputs,
 * password eye-toggles, teal info callouts, account-type picker cards.
 *
 * RESPONSIVE CONTRACT: 375-430 mobile portrait is the reference; the same
 * card/hero system scales up through tablet portrait (768) and clamps at a
 * tablet-landscape "app frame" width (~640px) that stays centered with a
 * neutral fill on anything wider (desktop never stretches edge-to-edge).
 */

*, *::before, *::after { box-sizing: border-box; }

:root {
    --auth-app-max: 640px;
    --auth-frame-bg: #eef3f2;
}

.auth-shell-body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--auth-white);
    color: var(--auth-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.auth-shell-body.is-splash {
    /* Figma splash: full-bleed port photo under a deep-teal wash (55KB webp
       — Bahamas-mobile-data budget), teal as the paint-first fallback. */
    background:
        linear-gradient(rgba(10, 42, 40, 0.82), rgba(10, 42, 40, 0.82)),
        url('/lms-assets/img/bss/splash-bg.webp') center / cover no-repeat,
        var(--auth-deep);
    background-color: var(--auth-deep);
    overscroll-behavior-y: contain;
}

/* CLAUDE DESIGN HANDOFF — auth phase backdrop. The design frames every auth
   screen as a centred app card on a radial navy field:
   radial-gradient(120% 80% at 50% 0%, #12454C, #0A2B31 45%, #061C20).
   Brand-derived (not literal) so a non-teal tenant gets the same treatment
   in its own hue; the reference primary reproduces the spec exactly.
   Full-bleed below 640px per the design's own authRadius rule. */
@media (min-width: 640px) {
    .auth-shell-body:not(.is-splash) {
        background:
            radial-gradient(120% 80% at 50% 0%,
                color-mix(in srgb, var(--auth-primary) 42%, #06181C) 0%,
                var(--auth-deep) 45%,
                color-mix(in srgb, var(--auth-deep) 72%, #000000) 100%);
        background-attachment: fixed;
    }
}

.auth-shell {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: max(0px, env(safe-area-inset-top, 0px));
    padding-bottom: max(28px, calc(env(safe-area-inset-bottom, 0px) + 16px));
    padding-left: max(0px, env(safe-area-inset-left, 0px));
    padding-right: max(0px, env(safe-area-inset-right, 0px));
}

.auth-shell.has-hero { padding-top: 0; justify-content: flex-start; }

@media (min-width: 900px) {
    .auth-shell:not(.is-splash-shell) { padding-top: max(40px, env(safe-area-inset-top, 0px)); padding-bottom: 40px; }
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--auth-white);
    border-radius: 20px;
    padding: 32px 24px;
}

.is-splash .auth-card {
    background: transparent;
    max-width: 480px;
    min-height: calc(100dvh - 56px);
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--auth-white);
}

/* Screens with a hero photo/dark-banner band (login, wizard) — the card
   loses its own top padding/radius so the hero can bleed flush into it.
   NO overflow:hidden here (removed) — an overflow-restricted ancestor
   breaks position:sticky on the hero below; the card's own rounded
   corners are reproduced on the hero/sheet elements themselves instead
   (see .auth-hero / .auth-hero-dark / .auth-sheet), so corners still
   read as clipped without blocking the sticky-hero + scrolling-sheet
   behavior Marco asked for. */
.auth-card.has-hero { max-width: var(--auth-app-max); padding: 0 0 28px; border-radius: 22px; }

/* Design's auth frame: a 470px app card, 40px radius, deep shadow — and
   edge-to-edge with no radius under 640px (spec: authRadius = vw < 640 ? 0 : 40). */
@media (min-width: 640px) {
    .auth-shell:not(.is-splash-shell) .auth-card {
        max-width: 470px;
        border-radius: 40px;
        box-shadow: 0 30px 90px rgba(0, 0, 0, .5);
        border: none;
    }
    .auth-shell:not(.is-splash-shell) .auth-card.has-hero { margin-top: 0; }
    .auth-shell:not(.is-splash-shell) { align-items: center; justify-content: center; padding-top: 24px; padding-bottom: 24px; }
}
@media (max-width: 639.98px) {
    .auth-card, .auth-card.has-hero { border-radius: 0; box-shadow: none; }
}
.auth-card.has-hero .auth-card__body { padding: 0 20px; }

@media (min-width: 640px) {
    .auth-shell:not(.is-splash-shell):not(.has-hero) { align-items: flex-start; padding-top: max(64px, calc(env(safe-area-inset-top, 0px) + 48px)); }
    .auth-card:not(.has-hero) {
        box-shadow: 0 1px 2px rgba(1, 1, 1, .04), 0 12px 32px rgba(1, 1, 1, .08);
        border: 1px solid rgba(1, 1, 1, .06);
        padding: 40px 36px;
    }
    .is-splash .auth-card { box-shadow: none; border: none; }
    .auth-card.has-hero {
        margin-top: 32px;
        box-shadow: 0 1px 2px rgba(1, 1, 1, .04), 0 20px 48px rgba(1, 1, 1, .1);
        border: 1px solid rgba(1, 1, 1, .06);
    }
    .auth-card.has-hero .auth-card__body { padding: 0 36px; }
}

@media (min-width: 900px) {
    .auth-card.has-hero { margin-top: 40px; margin-bottom: 40px; }
}

/* ---------------------------------------------------------------- */
/* Hero band (photo — login hero, wizard step 1)                     */
/* ---------------------------------------------------------------- */
/* CLAUDE DESIGN HANDOFF — the design puts the brand mark OVER the top of
   the hero photo (not floating near the bottom), same on welcome/login/
   forgot. justify-content: flex-start + a top-weighted padding reproduces
   that; the back button (login/forgot/wizard) stays absolutely positioned
   so it is unaffected by this axis. */
/* STICKY HERO + POLISHED CURVE (Marco, 2026-07-29) — the hero band stays
   pinned to the top of the viewport while the content sheet below it
   scrolls up and over it (position: sticky), and its own top corners are
   rounded to match the card's (0 full-bleed <640px / 40px app-frame
   >=640px, same breakpoints as .auth-card's own radius) since the card no
   longer clips via overflow:hidden. z-index:1 keeps it BEHIND the sheet
   (.auth-sheet, z-index:2) so the sheet's rounded top edge visibly slides
   over the photo instead of the photo re-appearing on top. --}} */
.auth-hero {
    position: sticky;
    top: 0;
    z-index: 1;
    height: 260px;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: max(30px, calc(env(safe-area-inset-top, 0px) + 24px)) 20px 16px;
    color: var(--auth-white);
    overflow: hidden;
    border-radius: 0;
}
.auth-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 34, 32, .35) 0%, rgba(6, 34, 32, .15) 45%, rgba(6, 34, 32, .82) 100%);
}
/* Welcome hero — design: 330px tall photo band, logo pinned near the top. */
.auth-hero--tall { height: 330px; justify-content: flex-start; padding-top: max(64px, calc(env(safe-area-inset-top, 0px) + 56px)); padding-bottom: 0; }
@media (min-width: 640px) {
    .auth-hero, .auth-hero-dark { border-radius: 40px 40px 0 0; }
}
.auth-hero--compact { height: 172px; padding-bottom: 30px; }
.auth-hero__brand { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.auth-hero__brand img { max-height: 40px; width: auto; display: block; }

.auth-hero__back {
    position: absolute;
    top: max(16px, env(safe-area-inset-top, 0px));
    left: 16px;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .95);
    color: var(--auth-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    z-index: 3;
    box-shadow: 0 2px 8px rgba(1, 1, 1, .18);
    transition: transform .12s ease;
}
.auth-hero__back:active { transform: scale(.92); }
.auth-hero__back svg { width: 18px; height: 18px; }

/* Dark solid banner variant — the design uses this SAME solid #0d3138 band
   (no photo) for EVERY wizard step, including Step 1 ("Personal Info") —
   confirmed against the design source, which never gives reg1 a
   background-image. Only the logo size and vertical padding shrink a touch
   for Step 1 (compact) vs Steps 2-4 (regular). */
/* [hidden] must win over the component's own `display` below — same
   specificity, so source order alone would let .auth-hero-dark leak
   through when both hero variants are toggled via the `hidden` attribute. */
.auth-hero[hidden],
.auth-hero-dark[hidden] { display: none; }

/* The register wizard renders its dark band INSIDE .auth-card__body (the
   sticky/step-swap script owns that subtree), but the design's band bleeds
   the FULL card width — escape the body's side padding (20px mobile /
   36px >=640) so the navy runs edge to edge like the file. */
.auth-card__body > .auth-hero-dark { margin-left: -20px; margin-right: -20px; }
@media (min-width: 640px) {
    .auth-card__body > .auth-hero-dark { margin-left: -36px; margin-right: -36px; }
}
/* Same escape for the PHOTO hero (sign-in / forgot / reset): it also renders
   inside .auth-card__body, and without it the white card showed as a frame
   around the image on desktop — Marco 2026-08-01 "still has white border".
   The hero's own 40px top radius then meets the card's radius exactly. */
.auth-card__body > .auth-hero { margin-left: -20px; margin-right: -20px; }
@media (min-width: 640px) {
    .auth-card__body > .auth-hero { margin-left: -36px; margin-right: -36px; }
}

.auth-hero-dark {
    position: relative;
    background: var(--auth-deep);
    padding: max(18px, env(safe-area-inset-top, 0px)) 20px 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.auth-hero-dark--compact { padding: max(14px, env(safe-area-inset-top, 0px)) 20px 34px; }
.auth-hero-dark__back {
    position: absolute;
    top: max(16px, env(safe-area-inset-top, 0px));
    left: 16px;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--auth-white);
    border: none;
    color: var(--auth-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    transition: transform .12s ease, background .15s ease;
}
.auth-hero-dark__back:hover { background: #f3f7f7; }
.auth-hero-dark__back:active { transform: scale(.92); }
.auth-hero-dark__back svg { width: 18px; height: 18px; }
.auth-hero-dark img { width: 190px; height: auto; max-height: none; display: block; }
.auth-hero-dark--compact img { width: 160px; }

/* ---------------------------------------------------------------- */
/* Brand mark                                                        */
/* ---------------------------------------------------------------- */
.auth-header { display: flex; justify-content: center; margin-bottom: 28px; }

.brand-mark { display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; gap: 2px; }
.brand-mark__logo { max-height: 48px; width: auto; display: block; }
.brand-mark--lg .brand-mark__logo { max-height: 64px; }
.brand-mark__wordmark { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.brand-mark__word {
    font-family: "Baloo 2", "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: .01em;
    color: var(--auth-primary);
}
.brand-mark--lg .brand-mark__word { font-size: 32px; }
.brand-mark--light .brand-mark__word { color: var(--auth-white); }
.brand-mark__sub {
    font-family: "Baloo 2", "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 600;
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--auth-muted, #6b7280);
    margin-top: 2px;
}
.brand-mark--light .brand-mark__sub { color: rgba(255, 255, 255, .72); }

/* ---------------------------------------------------------------- */
/* Headings / copy                                                   */
/* ---------------------------------------------------------------- */
.auth-heading {
    font-family: "Baloo 2", "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    font-size: clamp(22px, 5vw, 26px);
    line-height: 1.25;
    margin: 24px 0 8px;
    color: var(--auth-ink);
    text-align: center;
}
.has-hero .auth-heading { margin-top: 22px; }
/* Login/Forgot use a slightly larger 28px heading per the design (every
   other screen's heading is 26px) — a real, distinct value, not a typo. */
.auth-heading--lg { font-size: 28px; margin-top: 0; }
.auth-subheading {
    font-size: 14px;
    line-height: 1.5;
    color: #5b6b73;
    margin: 0 0 24px;
    text-align: center;
}

/* ---------------------------------------------------------------- */
/* Sheet — the white/near-white content panel that overlaps the hero's  */
/* bottom edge with a large radius (Marco: "polished curve"). Design's   */
/* literal login/forgot values: #f7f9f9, 34px 34px 0 0, -34px overlap,   */
/* 32px 28px 24px padding. Wizard Steps 2-4 reuse the SAME curve system   */
/* at their own literal values (34px radius, -24px overlap) via          */
/* --wizard. z-index:2 keeps it above the sticky hero (z-index:1) so the */
/* curve visibly slides over the photo/dark band as the page scrolls.    */
/* ---------------------------------------------------------------- */
.auth-sheet {
    position: relative;
    z-index: 2;
    background: #f7f9f9;
    border-radius: 34px 34px 0 0;
    margin-top: -34px;
    padding: 32px 28px 24px;
}
.auth-sheet--wizard { margin-top: -24px; padding: 24px 26px 30px; }
@media (max-width: 639.98px) { .auth-sheet { padding-left: 20px; padding-right: 20px; } }

/* Inline card footer (Login/Forgot only) — design keeps this INSIDE the
   same rounded card, background #fff (distinct from the sheet's #f7f9f9),
   right after the sheet. The shared shell's generic .auth-copyright is
   suppressed on these pages (body-class="has-inline-footer") so the
   credit line isn't duplicated. */
.auth-inline-footer {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #5b6b73;
    font-size: 12.5px;
    line-height: 1.6;
    padding: 18px 20px 26px;
    background: var(--auth-white);
}
.auth-inline-footer__powered { color: #8a979d; }
.auth-inline-footer__vendor { color: var(--auth-primary); font-weight: 600; }
.has-inline-footer .auth-copyright { display: none; }

/* Login/Forgot hero logo — the TEAL brand mark (not the white watermark)
   with a white glow so it reads against the dark photo overlay. This only
   ever targeted the <img> logo — when no logo_url is set (common: "real
   client logo files are not available yet for every white-label tenant",
   per partials/brand-mark.blade.php's own docblock) the text wordmark
   fallback renders in this exact same glowing hero with no glow of its
   own, so the thin, gray, letter-spaced .brand-mark__sub line became
   near-illegible against the photo's darker/busier regions (Product Truth
   Audit, Section 2 breakpoint QA at 375px). Same treatment, both cases. */
.auth-hero__brand--glow .brand-mark__logo {
    filter: drop-shadow(0 1px 6px rgba(255, 255, 255, .7)) drop-shadow(0 0 22px rgba(255, 255, 255, .45));
}
.auth-hero__brand--glow .brand-mark__word,
.auth-hero__brand--glow .brand-mark__sub {
    text-shadow: 0 1px 6px rgba(255, 255, 255, .7), 0 0 16px rgba(255, 255, 255, .5);
}
.auth-hero__brand--glow .brand-mark__sub {
    color: rgba(255, 255, 255, .92);
}

/* ---------------------------------------------------------------- */
/* Alerts                                                            */
/* ---------------------------------------------------------------- */
.alert { border-radius: 12px; padding: 12px 14px; font-size: 13px; margin-bottom: 18px; line-height: 1.4; }
.alert--success { background: #e8f5f3; color: #0b6b5f; border: 1px solid #c3e8e2; }
.alert--error { background: #fdecea; color: #b3261e; border: 1px solid #f5c6cb; }

/* ---------------------------------------------------------------- */
/* Form fields                                                       */
/* ---------------------------------------------------------------- */
.auth-form { display: flex; flex-direction: column; gap: 16px; }
/* Design's "label outside, bordered box below" pattern — used verbatim by
   Login / Forgot Password ("Email or Phone Number", "Password") and, in its
   --spacious variant, by wizard Steps 3-4 (Island, Branch, Business Name,
   Address, ID Type). Literal design values (radius/padding/font), not
   brand-derived — only the icon color and the focus ring pull from
   var(--auth-primary). */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 14.5px; font-weight: 600; color: #14303a; }
.field input,
.field select,
.field textarea {
    width: 100%;
    border-radius: 14px;
    border: 1px solid #dde5e7;
    background: var(--auth-white);
    padding: 14px 16px;
    font-size: 14.5px;
    font-family: inherit;
    color: #14303a;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
    appearance: none;
    -webkit-appearance: none;
}
.field textarea { min-height: 92px; resize: vertical; line-height: 1.4; }
.field select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%23767676' stroke-width='1.5' fill='none' fill-rule='evenodd'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 36px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--auth-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--auth-primary) 20%, transparent);
}
.field input::placeholder,
.field textarea::placeholder { color: #a7b3b8; }
.field-error { font-size: 12px; color: #b3261e; }
.field-hint { font-size: 12px; color: #7d8b92; display: flex; justify-content: space-between; gap: 8px; }

/* --spacious — Steps 3-4's roomier version of the same pattern (design:
   16px radius, 15-16px padding, 15px type, 14px icon gap vs Login/Forgot's
   14px radius / 14px16px padding / 14.5px type / 12px gap). */
.field--spacious input,
.field--spacious select,
.field--spacious textarea { height: 53px; border-radius: 16px; font-size: 15px; padding: 0 18px; }
.field--spacious textarea { height: auto; padding-top: 15px; }
.field--spacious .field__icon { left: 18px; width: 20px; height: 20px; }
.field--spacious input,
.field--spacious select,
.field--spacious textarea { padding-left: 50px; }
.field--spacious label { font-size: 15px; }

/* Icon-prefixed inputs — icon absolutely positioned inside a relative wrap. */
.field-icon-wrap { position: relative; }
.field-icon-wrap .field__icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--auth-primary);
    pointer-events: none;
    display: flex;
}
.field-icon-wrap .field__icon svg { width: 100%; height: 100%; }
.field-icon-wrap input,
.field-icon-wrap select,
.field-icon-wrap textarea { padding-left: 46px; }
.field-icon-wrap:has(textarea) .field__icon { top: 16px; transform: none; }

/* Password show/hide toggle */
.field-icon-wrap .field__toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    color: #9aa0a1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    transition: color .15s ease, background .15s ease;
}
.field-icon-wrap .field__toggle:hover { background: #f2f4f4; color: #5b5f60; }
.field-icon-wrap .field__toggle svg { width: 20px; height: 20px; }
/* CORRECTED — the design's icon convention is the OPPOSITE of the common
   "open eye = click to reveal" pattern: the CROSSED eye (gray #7d8b92) is
   shown while the password is masked (pwHidden, the default state), and
   the OPEN eye (teal) shows once revealed (pwShown). Verified directly
   against the rendered design (isLogin) — a prior pass had this inverted. */
.field-icon-wrap .field__toggle .icon-eye { display: none; }
.field-icon-wrap .field__toggle.is-visible .icon-eye { display: block; }
.field-icon-wrap .field__toggle.is-visible .icon-eye-off { display: none; }
.field-icon-wrap .field__toggle.is-visible { color: var(--auth-primary); }
.field-icon-wrap:has(.field__toggle) input { padding-right: 46px; }

.field-char-count { text-align: right; font-size: 11px; color: #9aa0a1; }

/* ---------------------------------------------------------------- */
/* CORE FIX — the "boxed" field: icon + IN-BOX label + borderless input,  */
/* all inside ONE bordered container. This is the create-account Step 1  */
/* pattern (Full Name / Phone Number / Email Address / Password / Confirm */
/* Password) that Marco flagged as "not even close" — the previous build */
/* put the label OUTSIDE, above a bordered input. Design's literal spec:  */
/* 16px radius, 13px 18px padding, 21px icon, label 14.5/600/#14303A,    */
/* input 13.5px borderless — copied verbatim (only the icon/eye color    */
/* pulls the brand var; the border/text hexes are the design's own      */
/* literal neutrals, not a brand color).                                 */
/* ---------------------------------------------------------------- */
.field-box-group { display: flex; flex-direction: column; gap: 10px; }
.field-box {
    background: var(--auth-white);
    border: 1px solid #dde5e7;
    border-radius: 16px;
    padding: 13px 18px;
}
.field-box__row { display: flex; align-items: center; gap: 14px; }
.field-box__icon { flex: none; width: 21px; height: 21px; color: var(--auth-primary); display: flex; }
.field-box__icon svg { width: 100%; height: 100%; }
.field-box__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.field-box__label { font-size: 14.5px; font-weight: 600; color: #14303a; }
.field-box__input,
.field-box__textarea {
    border: none;
    outline: none;
    width: 100%;
    font-size: 13.5px;
    background: transparent;
    color: #14303a;
    padding: 2px 0 0;
    font-family: inherit;
    resize: none;
}
.field-box__input::placeholder,
.field-box__textarea::placeholder { color: #a7b3b8; }
.field-box__toggle {
    flex: none;
    width: 20px;
    height: 20px;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    color: #7d8b92;
    cursor: pointer;
    display: flex;
}
.field-box__toggle svg { width: 100%; height: 100%; }
/* CORRECTED — same icon-convention fix as .field-icon-wrap above: crossed
   eye = default/masked state, open eye = revealed state. */
.field-box__toggle .icon-eye { display: none; }
.field-box__toggle.is-visible { color: var(--auth-primary); }
.field-box__toggle.is-visible .icon-eye { display: block; }
.field-box__toggle.is-visible .icon-eye-off { display: none; }
.field-box__hint { font-size: 12px; color: #7d8b92; margin-top: 7px; padding-left: 35px; }
.field-box__error { font-size: 12px; color: #b3261e; margin-top: 6px; padding-left: 35px; }

.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; flex-wrap: wrap; }
.checkbox { display: flex; align-items: center; gap: 8px; color: #33393a; font-size: 14px; cursor: pointer; }
.checkbox input { width: 18px; height: 18px; accent-color: var(--auth-primary); }

.auth-link { color: var(--auth-primary); text-decoration: none; font-weight: 600; }
.auth-link:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- */
/* Buttons                                                            */
/* ---------------------------------------------------------------- */
/* CORRECTION — the design centers the BUTTON TEXT ALONE (flex
   align-items/justify-content:center) and pins the arrow glyph
   ABSOLUTELY at right:26px — it does NOT sit in the flex flow next to
   the text. padding:16px 26px + font-size:17px/600 + position:relative
   are the literal values (verified against every Continue/Sign In/
   Create Account button in the design source). */
.btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    padding: 16px 26px;
    border: none;
    border-radius: 999px;
    background: var(--auth-primary);
    /* Real Lighthouse accessibility finding, 2026-08-03: white text on the
       brand teal was 2.17:1 contrast — fails WCAG AA (needs 4.5:1). --auth-ink
       (already used everywhere else in this file for body text) gives 6.4:1
       against this exact teal — fixes it without touching the brand color
       itself, which isn't a call to make unilaterally. */
    color: var(--auth-ink);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .01em;
    text-decoration: none;
    cursor: pointer;
    transition: filter .15s ease, transform .05s ease, box-shadow .15s ease;
    box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--auth-primary) 65%, transparent);
}
.btn-primary:hover { filter: brightness(0.94); }
.btn-primary:active { transform: scale(.98); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn-primary:focus-visible { outline: 3px solid color-mix(in srgb, var(--auth-primary) 35%, transparent); outline-offset: 2px; }
.btn-arrow {
    position: absolute;
    right: 26px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 19px;
    line-height: 1;
    display: inline-flex;
}

.btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    border-radius: 999px;
    border: 1.5px solid #dfe3e4;
    background: var(--auth-white);
    color: var(--auth-ink);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.btn-secondary:hover { background: #f7f8f8; border-color: var(--auth-primary); }
.btn-secondary:disabled { opacity: .6; cursor: not-allowed; }

/* SETTINGS WORKSTREAM — passkey sign-in button (bsslms/auth-login.blade.php)
   reuses .btn-secondary, just with an icon + gap alongside the label. */
.btn-secondary--icon { gap: 10px; }
.btn-secondary__icon { display: inline-flex; width: 20px; height: 20px; flex: none; color: var(--auth-primary); }
.btn-secondary__icon svg { width: 100%; height: 100%; }

.btn-plain {
    background: none;
    border: 0;
    color: var(--auth-primary);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 0;
}

.auth-footnote { text-align: center; margin-top: 24px; font-size: 14px; color: #33393a; }
.auth-copyright { text-align: center; margin-top: 18px; font-size: 12px; line-height: 1.6; color: rgba(1, 1, 1, .38); }
.is-splash .auth-copyright { display: none; }
.splash-powered-by { font-size: 12px; letter-spacing: .02em; color: rgba(255, 255, 255, .68); margin: 0; }
.splash-powered-by strong { color: rgba(255, 255, 255, .9); }
.splash-powered-by .is-accent { color: var(--auth-primary); font-weight: 600; }
.splash-footer-rule { width: 220px; max-width: 70vw; height: 1px; background: rgba(255, 255, 255, .18); margin: 0 0 16px; }

/* ---------------------------------------------------------------- */
/* Account type picker cards (sign-up step 2) — design's literal spec:   */
/* 15px gap, 18px radius, 16px 12px 20px padding, 70px icon circle,      */
/* 22px radio at 13px inset, 16.5px/700 title, 12.5px desc. Personal's   */
/* icon circle is a brand tint (color-mix) + brand-teal glyph; Business' */
/* is a flat neutral gray (#e2e6e8/#6b7a81, literal — not brand-derived). */
/* ---------------------------------------------------------------- */
.account-type-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.account-type-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 12px 20px;
    border: 2px solid #e2e8ea;
    border-radius: 18px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.account-type-card:active { transform: scale(.98); }
.account-type-card.is-selected { border-color: var(--auth-primary); }
.account-type-card input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.account-type-card__icon {
    width: 70px;
    height: 70px;
    border-radius: 999px;
    margin-top: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.account-type-card__icon--personal { background: color-mix(in srgb, var(--auth-primary) 24%, white); color: var(--auth-primary); }
.account-type-card__icon--business { background: #e2e6e8; color: #6b7a81; }
.account-type-card__icon svg { width: 32px; height: 32px; }
.account-type-card__icon--business svg { width: 30px; height: 30px; }
.account-type-card__title { font-size: 16.5px; font-weight: 700; color: #14303a; margin-top: 13px; }
.account-type-card__desc { font-size: 12.5px; color: #5b6b73; line-height: 1.5; margin-top: 7px; }
.account-type-card__radio {
    position: absolute;
    top: 13px;
    right: 13px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 2px solid #ccd6d9;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .15s ease;
}
.account-type-card.is-selected .account-type-card__radio { border-color: var(--auth-primary); }
.account-type-card__radio::after {
    content: "";
    width: 11px;
    height: 11px;
    border-radius: 999px;
    background: var(--auth-primary);
    transform: scale(0);
    transition: transform .15s ease;
}
.account-type-card.is-selected .account-type-card__radio::after { transform: scale(1); }

/* ---------------------------------------------------------------- */
/* Info / callout panels                                             */
/* ---------------------------------------------------------------- */
.info-panel {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: color-mix(in srgb, var(--auth-primary) 9%, white);
    border-radius: 14px;
    padding: 14px 16px;
    font-size: 13px;
    line-height: 1.5;
    color: #33393a;
}
.info-panel__icon { flex-shrink: 0; width: 22px; height: 22px; color: var(--auth-primary); margin-top: 1px; }
.info-panel__icon svg { width: 100%; height: 100%; }
.info-panel strong { display: block; margin-bottom: 2px; color: var(--auth-ink); }

.security-notice {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: color-mix(in srgb, var(--auth-primary) 9%, white);
    border-radius: 14px;
    padding: 16px;
    margin-top: 20px;
}
.security-notice__icon { flex-shrink: 0; width: 24px; height: 24px; color: var(--auth-primary); }
.security-notice__icon svg { width: 100%; height: 100%; }
.security-notice strong { display: block; font-size: 13px; color: var(--auth-ink); margin-bottom: 2px; }
.security-notice p { margin: 0; font-size: 12px; color: #5b6062; line-height: 1.5; }

/* ---------------------------------------------------------------- */
/* Sign-up wizard (4 steps)                                          */
/* ---------------------------------------------------------------- */
.wizard-progress {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px;
    background: var(--auth-white);
    border-radius: 20px;
    padding: 16px 14px 14px;
    margin: -34px 16px 0;
    box-shadow: 0 10px 28px -8px rgba(1, 1, 1, .18);
}
@media (min-width: 640px) { .wizard-progress { margin-left: 28px; margin-right: 28px; } }

.wizard-progress__step {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}
.wizard-progress__step::before {
    content: "";
    position: absolute;
    top: 15px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: #dfe3e4;
    z-index: -1;
}
.wizard-progress__step:first-child::before { display: none; }
.wizard-progress__step.is-done::before,
.wizard-progress__step.is-active::before { background: var(--auth-primary); }

.wizard-progress__circle {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--auth-white);
    border: 2px solid #dfe3e4;
    color: #8a9091;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.wizard-progress__circle svg { width: 15px; height: 15px; }
.wizard-progress__step.is-active .wizard-progress__circle { background: var(--auth-primary); border-color: var(--auth-primary); color: var(--auth-white); transform: scale(1.08); }
.wizard-progress__step.is-done .wizard-progress__circle { background: var(--auth-primary); border-color: var(--auth-primary); color: var(--auth-white); }
.wizard-progress__label { font-size: 10.5px; font-weight: 600; color: #9aa0a1; line-height: 1.2; }
.wizard-progress__step.is-active .wizard-progress__label { color: var(--auth-primary); }
.wizard-progress__step.is-done .wizard-progress__label { color: var(--auth-ink); }

.signup-step { display: none; }
.signup-step.is-active { display: block; }

.signup-nav { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.signup-nav .btn-primary { flex: 1; }
.signup-nav .step-back {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    border: 1.5px solid #dfe3e4;
    background: var(--auth-white);
    color: var(--auth-ink);
    cursor: pointer;
    font-size: 18px;
}
.signup-nav .step-back svg { width: 18px; height: 18px; }

.terms-line { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: #33393a; line-height: 1.5; }
.terms-line input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--auth-primary); }

/* No-JS fallback lives entirely in the per-page <noscript><style> block in
   auth-register.blade.php — a bare `noscript ~ .wizard-progress` sibling
   selector was tried here first, but that ALWAYS matches (the <noscript>
   ELEMENT is present in the DOM whether or not its content is "live"; only
   an actual <noscript> descendant rule only ever applies when scripting is
   genuinely off), so it was hiding the progress pill even with JS enabled.
   The `.no-js` class selectors below were dead code too — nothing ever set
   that class. Both removed rather than left as a trap for the next pass. */

/* ---------------------------------------------------------------- */
/* Welcome / Landing                                                 */
/* ---------------------------------------------------------------- */
.welcome-eyebrow { text-align: center; font-size: 13px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--auth-primary); margin: 0; }
.welcome-title { text-align: center; font-family: "Baloo 2", "Montserrat", sans-serif; font-weight: 700; font-size: clamp(26px, 6vw, 33px); color: #14303a; margin: 4px 0 0; }
.welcome-rule { width: 44px; height: 3px; border-radius: 2px; background: var(--auth-primary); margin: 13px auto; }
.welcome-copy { text-align: center; font-size: 14px; line-height: 1.6; color: #5b6b73; max-width: 330px; margin: 2px auto 0; }

/* CORE FIX — design's feature row is a FIXED 4-across grid (never 2x2,
   at ANY width down to 375px reference), bare icons with NO circle chip,
   and a light divider between columns (not a gap) — confirmed against the
   design source (Marco: "ours renders 2x2"). The previous 400px breakpoint
   that collapsed this to 2 columns is gone. */
.welcome-features { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 24px; }
.welcome-feature { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 0 5px; text-align: center; border-right: 1px solid #e5eaeb; }
.welcome-feature:last-child { border-right: none; }
.welcome-feature__icon { width: 32px; height: 32px; color: var(--auth-primary); display: flex; }
.welcome-feature__icon svg { width: 100%; height: 100%; }
.welcome-feature__title { font-size: 10px; font-weight: 700; letter-spacing: .5px; color: #14303a; }
.welcome-feature__desc { font-size: 9.5px; color: #7d8b92; margin-top: -4px; }

.welcome-actions { display: flex; flex-direction: column; gap: 13px; margin-top: 28px; margin-bottom: 18px; }
.welcome-secure { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12.5px; color: #6b7076; }
.welcome-secure svg { width: 15px; height: 15px; color: var(--auth-primary); flex-shrink: 0; }

/* ---------------------------------------------------------------- */
/* Success screen                                                    */
/* ---------------------------------------------------------------- */
/* Design's literal badge geometry: 118px outer ring (tint), 82px inner
   solid-brand circle, 42px check — reproduced with the ring drawn via
   box-shadow (same visual result as the design's two nested circles). */
.success-badge-wrap { position: relative; display: flex; align-items: center; justify-content: center; margin: 6px auto 0; width: 118px; height: 118px; }
.success-badge {
    width: 82px;
    height: 82px;
    border-radius: 999px;
    background: var(--auth-primary);
    color: var(--auth-white);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 18px color-mix(in srgb, var(--auth-primary) 12%, white);
    animation: success-pop .55s cubic-bezier(.34, 1.56, .64, 1) both;
}
.success-badge svg { width: 42px; height: 42px; }
.success-confetti { position: absolute; inset: 0; pointer-events: none; }
.success-confetti span {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--auth-primary) 45%, white);
    animation: success-confetti .9s ease-out both;
}
.success-confetti span:nth-child(1) { top: 6%; left: 8%; animation-delay: .05s; }
.success-confetti span:nth-child(2) { top: 12%; right: 6%; animation-delay: .12s; width: 6px; height: 6px; border-radius: 999px; }
.success-confetti span:nth-child(3) { bottom: 10%; left: 4%; animation-delay: .18s; }
.success-confetti span:nth-child(4) { bottom: 4%; right: 12%; animation-delay: .08s; width: 6px; height: 6px; border-radius: 999px; }
.success-confetti span:nth-child(5) { top: 46%; left: -2%; animation-delay: .2s; }
.success-confetti span:nth-child(6) { top: 40%; right: -2%; animation-delay: .14s; }

.success-title { text-align: center; font-family: "Baloo 2", "Montserrat", sans-serif; font-weight: 700; font-size: clamp(22px, 5vw, 26px); color: #14303a; margin: 16px 0 0; }
.success-subtitle { text-align: center; font-size: 14px; line-height: 1.6; color: #5b6b73; max-width: 300px; margin: 6px auto 22px; }

.success-list { background: color-mix(in srgb, var(--auth-primary) 8%, white); border-radius: 16px; padding: 4px 16px; margin-bottom: 16px; }
.success-list__row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; }
.success-list__row + .success-list__row { border-top: 1px solid color-mix(in srgb, var(--auth-primary) 16%, white); }
.success-list__icon { flex-shrink: 0; width: 22px; height: 22px; color: var(--auth-primary); margin-top: 1px; }
.success-list__icon svg { width: 100%; height: 100%; }
.success-list__title { font-size: 13.5px; font-weight: 700; color: var(--auth-ink); }
.success-list__sub { font-size: 12.5px; color: #6b7076; margin-top: 1px; }
.success-list__label { font-size: 11.5px; color: #9aa0a1; text-transform: uppercase; letter-spacing: .04em; }

.success-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }

@keyframes success-pop {
    0% { transform: scale(.4); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes success-confetti {
    0% { transform: translateY(0) scale(0); opacity: 0; }
    35% { opacity: 1; }
    100% { transform: translateY(-14px) scale(1); opacity: 0; }
}

/* ---------------------------------------------------------------- */
/* Splash                                                             */
/* ---------------------------------------------------------------- */
.splash-mark { margin-bottom: 22px; animation: splash-pulse 2.6s ease-in-out infinite; }
.splash-divider { width: 48px; height: 2px; background: color-mix(in srgb, var(--auth-white) 40%, transparent); margin: 4px auto 18px; }
.splash-tagline { font-size: 16px; line-height: 1.4; color: rgba(255, 255, 255, .88); margin: 0 0 34px; max-width: 320px; font-weight: 500; }
.splash-tagline .is-accent { color: var(--auth-primary); font-weight: 700; }
.splash-progress {
    width: 140px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    overflow: hidden;
    margin-bottom: 12px;
}
.splash-progress span {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: var(--auth-primary);
    transition: width .2s linear;
}
.splash-loading-label { font-size: 12px; letter-spacing: .04em; color: rgba(255, 255, 255, .68); margin: 0 0 26px; }
.splash-loader { display: flex; flex-direction: column; align-items: center; }
.splash-loader[hidden] { display: none; }

/* Home-screen primary CTA — the only way forward (no auto-advance). */
.splash-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    width: min(320px, 78vw);
    margin: 0 0 30px;
    padding: 0 28px;
    border-radius: 999px;
    background: var(--auth-primary);
    /* Same WCAG AA contrast fix as .btn-primary — white text on this teal
       was 2.17:1, --auth-ink gives 6.4:1. */
    color: var(--auth-ink);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .01em;
    text-decoration: none;
    border: 0;
    box-shadow: 0 10px 28px -10px color-mix(in srgb, var(--auth-primary) 85%, transparent);
    transition: transform .18s ease-out, box-shadow .18s ease-out, background-color .18s ease-out;
}
.splash-cta[hidden] { display: none; }
.splash-cta:hover { background: color-mix(in srgb, var(--auth-primary) 88%, #ffffff); box-shadow: 0 14px 34px -10px color-mix(in srgb, var(--auth-primary) 95%, transparent); }
.splash-cta:active { transform: scale(.985); }
.splash-cta:focus-visible { outline: 3px solid rgba(255, 255, 255, .65); outline-offset: 3px; }
.splash-cta__arrow { font-size: 18px; line-height: 1; }

@keyframes splash-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.045); opacity: .92; }
}

@media (prefers-reduced-motion: reduce) {
    .splash-progress span { transition: none; }
    .splash-mark { animation: none; }
    .splash-cta { transition: none; }
    .success-badge { animation: none; }
    .success-confetti span { animation: none; display: none; }
    .btn-primary:hover .btn-arrow { transform: none; }
}

/* ---------------------------------------------------------------------------
   SPLASH — fluid per-breakpoint scaling (Marco 2026-07-30 "scale the text and
   logo per breakpoint"). The splash is full-bleed at every size but its content
   was pinned to a 480px column at mobile sizes, so the mark/tagline/CTA looked
   lost on tablet and desktop. Widen the splash column and scale its logo, text
   and button fluidly with the viewport (clamped so mobile stays exactly as
   drawn and large screens scale up smoothly). Scoped to .is-splash so the login
   and wizard hero logos are untouched. --------------------------------------- */
.is-splash .auth-card { max-width: clamp(480px, 56vw, 720px); }

.splash-mark .brand-mark__logo { max-height: clamp(60px, 9vw, 128px); }
.splash-mark .brand-mark__word { font-size: clamp(30px, 4.4vw, 58px); }
.splash-mark .brand-mark__sub  { font-size: clamp(9px, 1.3vw, 16px); }

.is-splash .splash-divider { width: clamp(48px, 5vw, 78px); }

.is-splash .splash-tagline {
    font-size: clamp(16px, 2.5vw, 30px);
    max-width: clamp(320px, 46vw, 560px);
}

.is-splash .splash-cta {
    min-height: clamp(54px, 6.2vw, 68px);
    width: clamp(300px, 44vw, 460px);
    font-size: clamp(16px, 2vw, 21px);
}
.is-splash .splash-cta__arrow { font-size: clamp(18px, 2.2vw, 24px); }

.is-splash .splash-powered-by { font-size: clamp(12px, 1.5vw, 16px); }
.is-splash .splash-loading-label { font-size: clamp(12px, 1.4vw, 15px); }