/* =========================================================================
   Pleazz — shared auth skin (2026 design)

   Linked by application/views/2026/includes/headPublic.php for every view in
   its $sharedStylesheets map (login/login, login/companyLogin, login/buyerLogin)
   with a ?s= . filesize() buster. Nothing @imports this file: a screen that
   needs the skin is added to that map, so there is never a version string that
   has to be bumped and no cached parent that can hide an edit.

   SCOPING CONTRACT
   Every rule below is scoped to .login-2026, the <main> of the 2026 auth
   screens (login, companyLogin, buyerLogin all carry it -- it is the shared
   auth skin). Shell-level rules (canvas, header, language pill, theme switch)
   live in 2026/css/shell/public.css and are NOT repeated here.

   THEME NOTE
   updatePublicTheme() only adds/removes .public-light-mode client-side, so
   after a toggle without a reload <body> can carry both theme classes or
   neither. Dark is therefore keyed off the ABSENCE of .public-light-mode,
   never off .public-dark-mode. <html data-public-theme> is server-rendered
   only and goes stale on toggle -- it is not used here.

   ICON NOTE
   Font Awesome is pinned at 6.0.0 (headPublic.php). Only glyph names that
   exist in that release are used: fa-shield-alt (NOT fa-shield-halved),
   fa-bell-concierge, fa-ticket, fa-calendar-days, fa-credit-card,
   fa-bullhorn, fa-arrow-right, and \f0c2 (cloud) for the logo tile.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. Tokens
   ---------------------------------------------------------------------- */

.login-2026 {
    --l26-primary: #F37220;
    --l26-primary-2: #F5811F;
    --l26-primary-deep: #E8590C;
    --l26-primary-soft: rgba(243, 114, 32, .13);
    --l26-primary-line: rgba(243, 114, 32, .38);

    --l26-title: #FFFFFF;
    --l26-text: #A8A29E;
    --l26-muted: #8A837E;

    --l26-card: rgba(62, 56, 51, .72);
    --l26-card-line: rgba(255, 255, 255, .09);

    --l26-chip: rgba(255, 255, 255, .028);
    --l26-chip-line: rgba(255, 255, 255, .085);
    --l26-chip-text: #D6D3D1;

    /* 2026-09-17 reference (dark): strip #252423, white active tab, #A9A29E label */
    --l26-tabs: #252423;
    --l26-tabs-ring: rgba(0, 0, 0, .18);
    --l26-tab-on: #FFFFFF;
    --l26-tab-on-text: #1D1917;
    --l26-tab-on-shadow: none;
    --l26-tab-off-text: #A9A29E;

    /* 2026-09-17 reference (dark login card): near-black filled fields, no edge,
       light text; captions #D7D3D1 */
    --l26-input: #0A0909;
    --l26-input-line: #353231;      /* field edge, same as the vendor screens (2026-09-18) */
    --l26-input-text: #FFFFFF;
    --l26-placeholder: #D6D3D1;
    --l26-label: #D7D3D1;

    --l26-rule: rgba(255, 255, 255, .14);
    --l26-green: #22C55E;
    --l26-danger: #EF4444;

    --l26-radius-card: 20px;
    /* 14px, to match the fields on the internal dashboard
       (.pz26-input / .pz26-select are 14px there); the submit button takes the
       dashboard's pill instead, see .l26-submit */
    --l26-radius: 14px;

    display: block;
    font-family: 'Inter', 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--l26-text);
}

body.public-light-mode .login-2026 {
    --l26-primary-soft: rgba(243, 114, 32, .10);
    --l26-primary-line: rgba(243, 114, 32, .30);

    --l26-title: #1C1917;
    --l26-text: #57534E;
    --l26-muted: #78716C;

    --l26-card: #FFFDFB;
    --l26-card-line: rgba(0, 0, 0, .05);

    --l26-chip: rgba(255, 255, 255, .62);
    --l26-chip-line: rgba(0, 0, 0, .06);
    --l26-chip-text: #44403C;

    /* 2026-09-17 reference (light): strip #F1EFEC, white active tab with a faint
       drop shadow, #7A716C label */
    --l26-tabs: #F1EFEC;
    --l26-tabs-ring: transparent;
    --l26-tab-on: #FFFFFF;
    --l26-tab-on-text: #1D1917;
    --l26-tab-on-shadow: 0 1px 3px rgba(28, 25, 23, .10), 0 1px 1px rgba(28, 25, 23, .04);
    --l26-tab-off-text: #7A716C;

    --l26-input: #FFFFFF;
    --l26-input-line: #E6E1DC;      /* field edge, same as the vendor screens (2026-09-18) */
    --l26-input-text: #1C1917;
    --l26-placeholder: #A8A29E;
    /* light keeps the title colour for captions; without this it inherited the
       dark theme's #D7D3D1 and the labels went pale on the light card */
    --l26-label: var(--l26-title);

    --l26-rule: #E7E5E4;
}


/* -------------------------------------------------------------------------
   3. Layout
   ---------------------------------------------------------------------- */

.login-2026 .l26 {
    width: 100%;
    padding: 8px 0 72px;
}

.login-2026 .l26-grid {
    max-width: var(--l26-page);
    margin: 0 auto;
    padding-right: var(--l26-rail);
    padding-left: var(--l26-rail);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 448px;
    gap: 64px;
    align-items: center;
    min-height: calc(100vh - 210px);
}


/* -------------------------------------------------------------------------
   4. Left column
   ---------------------------------------------------------------------- */

.login-2026 .l26-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 17px;
    border: 1px solid var(--l26-primary-line);
    border-radius: 999px;
    background: var(--l26-primary-soft);
    color: var(--l26-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1.2;
    text-transform: uppercase;
}

.login-2026 .l26-dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.login-2026 .l26-dot-green {
    background: var(--l26-green);
    color: var(--l26-green);
}

.login-2026 .l26-title {
    max-width: 11ch;
    margin: 26px 0 0;
    color: var(--l26-title);
    font-size: clamp(40px, 5.1vw, 66px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.022em;
}

.login-2026 .l26-lead {
    max-width: 430px;
    margin: 32px 0 0;
    color: var(--l26-text);
    font-size: 17px;
    line-height: 1.62;
}

.login-2026 .l26-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin: 52px 0 0;
    padding: 0;
    list-style: none;
}

.login-2026 .l26-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 92px;
    padding: 13px 12px;
    border: 1px solid var(--l26-chip-line);
    border-radius: 12px;
    background: var(--l26-chip);
    color: var(--l26-chip-text);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
}

.login-2026 .l26-chip i {
    font-size: 16px;
    color: var(--l26-primary);
}


/* -------------------------------------------------------------------------
   5. Card
   ---------------------------------------------------------------------- */

.login-2026 .l26-panel {
    display: flex;
    justify-content: flex-end;
}

.login-2026 .l26-card {
    width: 100%;
    max-width: 448px;
    padding: 40px;
    border: 1px solid var(--l26-card-line);
    border-radius: var(--l26-radius-card);
    background: var(--l26-card);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 26px 70px rgba(0, 0, 0, .34);
}

body.public-light-mode .login-2026 .l26-card {
    box-shadow: 0 24px 64px rgba(140, 90, 40, .12);
}


/* -------------------------------------------------------------------------
   6. Tabs
   The <ul> keeps id="loginForms" + role="tablist" and the buttons keep
   data-bs-toggle="pill" / data-bs-target -- login.js queries those exact
   selectors for #hash deep-linking and history.pushState.
   ---------------------------------------------------------------------- */

/* 2026-09-17 reference ("Tab Navigation inside card", 366 x 46 at 1x, plus
   both theme screenshots): a 44px strip with 4px of padding and 14px corners,
   two EQUAL tabs 36px tall with 10px corners -- concentric with the strip
   (10 + 4 = 14). Labels are bold, 12.5px. */
.login-2026 .l26-tabs {
    display: flex;
    gap: 0;
    margin: 0 0 24px;
    padding: 4px;
    border-radius: 14px;
    background: var(--l26-tabs);
    box-shadow: 0 0 0 1px var(--l26-tabs-ring, transparent);
    list-style: none;
}

.login-2026 .l26-tabs .nav-item {
    flex: 1 1 0;
}

/* one level more specific than Bootstrap's .nav-pills .nav-link.active */
.login-2026 .l26-tabs .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 36px;
    padding: 0 8px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--l26-tab-off-text);
    font-size: 12.5px;   /* measured: cap height / strip width = .0251 in the reference; 12px gave .0232, 13px .0273 */
    font-weight: 700;
    line-height: 1.2;
    transition: background-color .18s ease, color .18s ease;
}

.login-2026 .l26-tabs .nav-link:hover {
    color: var(--l26-title);
}

.login-2026 .l26-tabs .nav-link.active {
    background: var(--l26-tab-on);
    color: var(--l26-tab-on-text);
    box-shadow: var(--l26-tab-on-shadow, none);
}

.login-2026 .l26-tabs .nav-link:focus-visible {
    outline: 2px solid var(--l26-primary);
    outline-offset: 2px;
}


/* -------------------------------------------------------------------------
   7. Response messages
   #responseMessages is left BYTE-IDENTICAL in the markup, including its
   placeholder <div class="alert" role="alert"></div>. That placeholder is
   an empty Bootstrap alert and would otherwise reserve vertical space, so
   it is hidden here rather than removed from the view.
   displayResponseMessagges() replaces the container's innerHTML wholesale
   with .alert.alert-*.alert-dismissible markup containing a .btn-close.
   ---------------------------------------------------------------------- */

.login-2026 #responseMessages .alert:empty {
    display: none;
}

.login-2026 #responseMessages .alert {
    margin-bottom: 14px;
    border: 1px solid var(--l26-card-line);
    border-radius: var(--l26-radius);
    font-size: 13.5px;
}

.login-2026 #responseMessages .alert-danger {
    border-color: rgba(239, 68, 68, .35);
    background: rgba(239, 68, 68, .12);
    color: #FCA5A5;
}

.login-2026 #responseMessages .alert-success {
    border-color: rgba(34, 197, 94, .35);
    background: rgba(34, 197, 94, .12);
    color: #86EFAC;
}

.login-2026 #responseMessages .alert-warning {
    border-color: rgba(245, 158, 11, .35);
    background: rgba(245, 158, 11, .12);
    color: #FCD34D;
}

.login-2026 #responseMessages .alert-info {
    border-color: rgba(59, 130, 246, .35);
    background: rgba(59, 130, 246, .12);
    color: #93C5FD;
}

/* Bootstrap's .btn-close is a dark SVG and is invisible on these
   translucent dark alerts. */
.login-2026 #responseMessages .btn-close {
    filter: invert(1) grayscale(1) brightness(1.9);
    opacity: .7;
}

body.public-light-mode .login-2026 #responseMessages .alert-danger  { background: rgba(239, 68, 68, .10); color: #B91C1C; }
body.public-light-mode .login-2026 #responseMessages .alert-success { background: rgba(34, 197, 94, .10); color: #15803D; }
body.public-light-mode .login-2026 #responseMessages .alert-warning { background: rgba(245, 158, 11, .10); color: #B45309; }
body.public-light-mode .login-2026 #responseMessages .alert-info    { background: rgba(59, 130, 246, .10); color: #1D4ED8; }

body.public-light-mode .login-2026 #responseMessages .btn-close {
    filter: none;
    opacity: .55;
}


/* -------------------------------------------------------------------------
   8. Fields
   Inputs keep .form-control so any Bootstrap validation wiring stays intact;
   these selectors are (0,2,0) and beat .form-control (0,1,0) regardless of
   source order.
   ---------------------------------------------------------------------- */

.login-2026 .l26-field {
    margin: 0 0 18px;
}

.login-2026 .l26-label {
    display: block;
    margin: 0 0 8px;
    color: var(--l26-label, var(--l26-title));
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .075em;
    line-height: 1.2;
    text-transform: uppercase;
}

.login-2026 .l26-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.login-2026 .l26-label-row .l26-link {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.login-2026 .l26-input-wrap {
    position: relative;
}

.login-2026 .l26-input {
    display: block;
    width: 100%;
    height: 44px;
    padding: 0 18px;
    border: 1px solid var(--l26-input-line);
    border-radius: 999px;   /* reference: fully rounded fields */
    background: var(--l26-input);
    color: var(--l26-input-text);
    font-size: 15px;
    line-height: 42px;
    outline: none;
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.login-2026 .l26-input::placeholder {
    color: var(--l26-placeholder);
    opacity: 1;
}

/* The ring is the focus mark, and the edge holds still -- the same rule the
   back office follows. Here it is stated in this sheet's own orange, which is
   #F37220 and not the dashboard's #F97316. */
.login-2026 .l26-input:focus {
    border-color: var(--l26-input-line);
    background: var(--l26-input);
    color: var(--l26-input-text);
    box-shadow: 0 0 0 3px rgba(243, 114, 32, .2);
}

.login-2026 .l26-input-pw {
    padding-right: 48px;
}

/* The eye stays an <img> whose src is swapped by toggleInputType(), which
   finds the field via previousElementSibling -- the <input> must remain the
   immediately preceding sibling. view-off.png / view-on.png are pure white
   (drawn for the old dark inputs), so they are darkened for the white field. */
.login-2026 .l26-eye {
    position: absolute;
    top: 50%;
    right: 16px;
    width: 18px;
    height: auto;
    transform: translateY(-50%);
    cursor: pointer;
    filter: brightness(0) saturate(0);
    opacity: .42;
    transition: opacity .18s ease;
}

.login-2026 .l26-eye:hover {
    opacity: .72;
}

/* view-off.png / view-on.png are white; the dark theme's fields are now
   near-black, so the darkening filter above would make the eye vanish there */
body:not(.public-light-mode) .login-2026 .l26-eye { filter: none; opacity: .55; }
body:not(.public-light-mode) .login-2026 .l26-eye:hover { opacity: .85; }

/* Chrome's autofill paints its own pale-blue fill and dark text over the field;
   on the dark card that turned a saved email back into a white box. */
body:not(.public-light-mode) .login-2026 .l26-input:-webkit-autofill,
body:not(.public-light-mode) .login-2026 .l26-input:-webkit-autofill:hover,
body:not(.public-light-mode) .login-2026 .l26-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--l26-input) inset;
    -webkit-text-fill-color: var(--l26-input-text);
    caret-color: var(--l26-input-text);
}

/* .invalid-feedback keeps Bootstrap's display:none until validation marks the
   field; only presentation is set here so that behaviour is unchanged. */
.login-2026 .l26-invalid {
    margin-top: 7px;
    color: var(--l26-danger);
    font-size: 12.5px;
    font-weight: 500;
}


/* -------------------------------------------------------------------------
   9. Submit
   ---------------------------------------------------------------------- */

.login-2026 .l26-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 52px;
    margin: 24px 0 0;
    padding: 0 20px;
    border: 0;
    /* every button on the internal dashboard is a pill (.pz26-btn is 999px) */
    border-radius: 999px;
    background: linear-gradient(90deg, var(--l26-primary-2) 0%, var(--l26-primary-deep) 100%);
    color: #FFFFFF;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: filter .18s ease, transform .12s ease;
}

.login-2026 .l26-submit:hover {
    filter: brightness(1.06);
    color: #FFFFFF;
}

.login-2026 .l26-submit:active {
    transform: translateY(1px);
}

.login-2026 .l26-submit:focus-visible {
    outline: 2px solid var(--l26-primary);
    outline-offset: 3px;
}

.login-2026 .l26-submit i {
    font-size: 12.5px;
}


/* -------------------------------------------------------------------------
   10. Card footer
   ---------------------------------------------------------------------- */

.login-2026 .l26-signup {
    margin: 18px 0 0;
    color: var(--l26-text);
    font-size: 13px;
    text-align: center;
}

.login-2026 .l26-link {
    color: var(--l26-primary);
    font-weight: 600;
    text-decoration: none;
}

.login-2026 .l26-link:hover {
    color: var(--l26-primary);
    text-decoration: underline;
}

.login-2026 .l26-or {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 22px 0;
    color: var(--l26-muted);
    font-size: 11.5px;
    letter-spacing: .09em;
}

.login-2026 .l26-or::before,
.login-2026 .l26-or::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--l26-rule);
}

.login-2026 .l26-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0;
    color: var(--l26-muted);
    font-size: 12px;
}

.login-2026 .l26-secure .fa-shield-alt {
    font-size: 11.5px;
    opacity: .85;
}


/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 1199.98px) {
    .login-2026 .l26-grid {
        grid-template-columns: minmax(0, 1fr) 420px;
        gap: 40px;
    }
}

@media (max-width: 991.98px) {
    /* Once the intro column is hidden the card IS the page, so the space above
       and below it has to match. It did not: .l26 carried 8px of top padding
       against 72px of bottom (4 against 48 below 576px), and login's grid added
       a min-height that biased the centring on top of that. Measured before:
       64 above / 130 below on login at 767px, and 12 above / 181 below on the
       signup card at 500px. One value, used both ends, for every auth screen. */
    /* Filling the space under the header and centring in it is what actually
       makes the two margins equal -- symmetric padding alone does not, because
       when the card is shorter than the screen the leftover viewport all lands
       underneath it (measured at 390px: 24 above, 230 below). The chain is
       body -> main -> .l26, each passing the remaining height down, so no
       header height is hardcoded anywhere. The padding stays as the minimum for
       when the card is taller than the screen and the page scrolls. */
    body.public-body-flex {
        display: flex;
        flex-direction: column;
    }

    body.public-body-flex > main.login-2026 {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .login-2026 .l26 {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-top: var(--l26-stack-gap, 32px);
        padding-bottom: var(--l26-stack-gap, 32px);
    }

    .login-2026 .l26-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
        min-height: 0;
        padding-top: 0;
    }

    .login-2026 .l26-panel {
        justify-content: flex-start;
    }

    .login-2026 .l26-card {
        max-width: 540px;
    }

    .login-2026 .l26-title {
        max-width: none;
    }

    .login-2026 .l26-chips {
        margin-top: 36px;
    }
}

@media (max-width: 575.98px) {
    /* side gutters come from --l26-rail on .l26-grid; the vertical pair is the
       same value at both ends, a little tighter than on a tablet */
    .login-2026 .l26 {
        --l26-stack-gap: 24px;
        padding-top: var(--l26-stack-gap);
        padding-bottom: var(--l26-stack-gap);
    }

    .login-2026 .l26-card {
        padding: 20px;
    }

    .login-2026 .l26-lead {
        margin-top: 24px;
        font-size: 15.5px;
    }

    .login-2026 .l26-chips {
        gap: 8px;
    }

    .login-2026 .l26-chip {
        flex: 1 1 28%;
        min-width: 0;
        padding: 13px 8px;
    }
}

/* ==========================================================================
   SUBMIT LOADER
   Added by assets/home/2026/js/auth/submitLoader.js, which puts .l26-loading
   on the pressed control and takes it off again. Two shapes are covered:

     .l26-submit                     the <button type="submit"> the six plain
                                     POST screens share -- <span>label</span>
                                     followed by <i class="fa-arrow-right">
     .wizard .actions li a[#finish]  the jQuery Steps Submit on
                                     registerBusinessWizard, which exists in no
                                     view file (see that screen's stylesheet)

   The label and the arrow are made transparent rather than hidden, so they
   keep their boxes and NOTHING moves -- swapping the 13px arrow glyph for an
   18px spinner in the flex row had slid the label 3px. The spinner is then
   absolutely centred over the whole control, which also gives the wizard's
   text-only anchor the same treatment without a layout shift.

   pointer-events is what blocks the second click; the script itself never
   cancels a submit.

   The wizard selector repeats .registerbusiness-2026 on purpose: the screen's
   own sheet loads AFTER this one and its
   `.registerbusiness-2026 .wizard .actions li a[href="#finish"] {color:#FFF}`
   ties on specificity, so the doubled class is what keeps the label hidden.
   ========================================================================== */

.login-2026 .l26-submit.l26-loading,
.login-2026.registerbusiness-2026 .wizard .actions li a.l26-loading {
    position: relative;
    color: transparent;
    pointer-events: none;
    cursor: default;
    /* hold the resting gradient: :hover brightness would otherwise still apply
       while the pointer sits on the button that was just pressed */
    filter: none;
}

.login-2026 .l26-submit.l26-loading::after,
.login-2026.registerbusiness-2026 .wizard .actions li a.l26-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: l26-spin .6s linear infinite;
}

@keyframes l26-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    /* it still has to read as "working", so it slows rather than stops */
    .login-2026 .l26-submit.l26-loading::after,
    .login-2026.registerbusiness-2026 .wizard .actions li a.l26-loading::after {
        animation-duration: 2.4s;
    }
}