/**
 * p-login.css — split out of template.css.
 *
 * Loaded by templates/tires/includes/head.php when the active page class is one of:
 * page-login, page-account, page-remind, page-reset. The rules scoped to .auth-surface
 * are the shared auth-panel system (split panel, panel header/tag/sub, forgot-link,
 * remember-me checkbox, form note, auth divider, guest checkout, two-column form row)
 * used by all four of those pages — including the account offcanvas drawer, which
 * carries its own separate #accountOffcanvas-scoped duplicate of a subset of these
 * rules in template.css (do not touch that duplicate; it must remain, since this file
 * is not loaded sitewide and the offcanvas renders on every page). The rules still
 * scoped to .page-login are chrome specific to a full login/register landing page that
 * has no live menu-item route on this site yet.
 */

/* ---- pages/login.css ---- */
/* ============================================================
   INVICTA WHOLESALE TIRE — Login / Register Page
   Scoped: .page-login  |  Target: 90–180 lines
   Covers: page header, auth split panel, sign-in form,
   register form, password toggle, benefits list,
   dealer callout band, responsive stack.
   All values via var() — zero hardcoded hex.
   ============================================================ */

/* ---- PAGE HEADER (short interior hero) ---- */
.page-login .login-page-header {
    position: relative;
    min-height: 28vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--brand-bg);
    padding-bottom: var(--space-8);
}
.page-login .login-page-header-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.page-login .login-page-header-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.page-login .login-page-header::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(17,16,9,.55) 0%, rgba(17,16,9,.93) 100%);
}
.page-login .login-page-header .container-xl {
    position: relative;
    z-index: 2;
}
.page-login .login-page-heading {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    letter-spacing: var(--tracking-tight);
    text-transform: uppercase;
    color: var(--brand-text);
    margin: 0;
}

/* ---- AUTH SECTION BACKGROUND ---- */
.auth-surface .auth-section {
    background:
        radial-gradient(ellipse 80% 60% at 15% 50%, rgba(var(--brand-primary-rgb), .06) 0%, transparent 65%),
        radial-gradient(ellipse 70% 50% at 85% 50%, rgba(var(--brand-secondary-rgb), .04) 0%, transparent 65%),
        var(--brand-bg);
}

/* ---- AUTH SPLIT PANEL ---- */
.auth-surface .auth-split-panel {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-6);
    align-items: start;
    max-width: 1060px;
    margin-inline: auto;
}
@media (max-width: 991.98px) {
    .auth-surface .auth-split-panel {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* ---- VERTICAL DIVIDER ---- */
.auth-surface .auth-vertical-divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: var(--space-16);
    gap: var(--space-3);
    user-select: none;
}
.auth-surface .auth-vertical-divider::before,
.auth-surface .auth-vertical-divider::after {
    content: "";
    flex: 1;
    width: 1px;
    background: var(--brand-border);
    min-height: 60px;
}
.auth-surface .auth-vertical-divider span {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--brand-text-secondary);
    white-space: nowrap;
}
@media (max-width: 991.98px) {
    .auth-surface .auth-vertical-divider {
        flex-direction: row;
        padding-top: 0;
        margin-block: var(--space-8);
    }
    .auth-surface .auth-vertical-divider::before,
    .auth-surface .auth-vertical-divider::after {
        flex: 1;
        width: auto;
        height: 1px;
        min-height: auto;
    }
}

/* ---- AUTH PANEL (shared) ---- */
.auth-surface .auth-panel {
    background: var(--brand-bg-card);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    transition: border-color var(--transition-base);
}
.auth-surface .auth-panel:hover {
    border-color: var(--brand-border-strong);
}
@media (max-width: 575.98px) {
    .auth-surface .auth-panel {
        padding: var(--space-6) var(--space-5);
    }
}

/* Panel header */
.auth-surface .auth-panel-header {
    margin-bottom: var(--space-6);
}
.auth-surface .auth-panel-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--brand-primary-light);
    background: rgba(var(--brand-primary-rgb), .1);
    border: 1px solid rgba(var(--brand-primary-rgb), .28);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    margin-bottom: var(--space-4);
}
.auth-surface .auth-panel-tag--gold {
    color: var(--brand-secondary-light);
    background: rgba(var(--brand-secondary-rgb), .1);
    border-color: rgba(var(--brand-secondary-rgb), .28);
}
.auth-surface .auth-panel-header h2 {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-normal);
    color: var(--brand-text);
    margin-bottom: var(--space-2);
}
.auth-surface .auth-panel-sub {
    font-size: var(--text-sm);
    color: var(--brand-text-secondary);
    line-height: var(--leading-relaxed);
    margin: 0;
}

/* Forgot password inline link */
.auth-surface .form-label-c {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.auth-surface .forgot-link {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    text-transform: none;
    letter-spacing: 0;
    color: var(--brand-primary-light);
}
.auth-surface .forgot-link:hover {
    color: var(--brand-secondary);
}

/* ---- PASSWORD TOGGLE ----
   Removed: covered sitewide, unscoped, by .password-wrap / .j2c-pw-toggle in
   template.css (~lines 4611-4630), which is the pair actually wired to
   template.js's data-pw-toggle click handler. This page-scoped .password-toggle
   class was never wired to any JS and was dead. */

/* ---- REMEMBER ME CHECKBOX ---- */
.auth-surface .form-check-c {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.auth-surface .form-check-input-c {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--brand-primary);
    cursor: pointer;
}
.auth-surface .form-check-label-c {
    font-size: var(--text-sm);
    color: var(--brand-text-body);
    cursor: pointer;
    user-select: none;
}

/* ---- FORM NOTE / SUCCESS ---- */
.auth-surface [data-form-note] {
    display: none;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: rgba(76, 175, 125, .12);
    border: 1px solid rgba(76, 175, 125, .35);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-success-text);
    margin-top: var(--space-5);
}
.auth-surface [data-form-note] i {
    font-size: var(--text-lg);
    flex-shrink: 0;
}

/* ---- AUTH DIVIDER ---- */
.auth-surface .auth-divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-6) 0 var(--space-4);
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--brand-text-secondary);
}
.auth-surface .auth-divider::before,
.auth-surface .auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--brand-border);
}

/* Guest note */
.auth-surface .guest-checkout-btn {
    margin-bottom: var(--space-3);
}
.auth-surface .guest-note {
    font-size: var(--text-xs);
    color: var(--brand-text-secondary);
    text-align: center;
    line-height: var(--leading-relaxed);
    margin: 0;
}

/* ---- ACCOUNT BENEFITS ---- */
.page-login .account-benefits {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--brand-border);
}
.page-login .benefits-heading {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--brand-secondary);
    margin-bottom: var(--space-5);
}
.page-login .benefits-heading i {
    color: var(--brand-secondary);
    font-size: var(--text-base);
}
.page-login .benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.page-login .benefits-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}
.page-login .benefits-list li > i {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: rgba(var(--brand-secondary-rgb), .1);
    border: 1px solid rgba(var(--brand-secondary-rgb), .22);
    color: var(--brand-secondary);
    font-size: var(--text-sm);
}
.page-login .benefits-list li div strong {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-text);
    margin-bottom: 2px;
}
.page-login .benefits-list li div span {
    font-size: var(--text-xs);
    color: var(--brand-text-secondary);
    line-height: var(--leading-relaxed);
}

/* ---- TWO-COLUMN FORM ROW ---- */
.auth-surface .form-row-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}
@media (max-width: 575.98px) {
    .auth-surface .form-row-two {
        grid-template-columns: 1fr;
    }
}

/* ---- ACTIVE ICON STATE IN NAVBAR ---- */
.page-login .active-icon {
    color: var(--brand-primary-light);
    background: rgba(var(--brand-primary-rgb), .1);
    border-color: rgba(var(--brand-primary-rgb), .25);
}

/* ---- DEALER CALLOUT ---- */
.page-login .dealer-callout-section {
    background: var(--brand-bg-surface);
    border-top: 1px solid var(--brand-border);
    border-bottom: 1px solid var(--brand-border);
}
.page-login .dealer-callout {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-6);
    align-items: center;
    max-width: 1060px;
    margin-inline: auto;
    padding: var(--space-6) var(--space-8);
    background: var(--brand-bg-elevated);
    border: 1px solid var(--brand-border-strong);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--brand-secondary);
}
@media (max-width: 991.98px) {
    .page-login .dealer-callout {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        padding: var(--space-6);
    }
    .page-login .dealer-callout-actions {
        grid-column: 1 / -1;
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-3);
    }
}
@media (max-width: 575.98px) {
    .page-login .dealer-callout {
        grid-template-columns: 1fr;
        padding: var(--space-5);
        border-left-width: 3px;
    }
    .page-login .dealer-callout-actions {
        grid-column: unset;
    }
}
.page-login .dealer-callout-icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--brand-secondary-rgb), .12);
    border: 1px solid rgba(var(--brand-secondary-rgb), .3);
    border-radius: var(--radius-md);
    color: var(--brand-secondary);
    font-size: var(--text-xl);
}
.page-login .dealer-callout-body h3 {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-text);
    margin-bottom: var(--space-2);
}
.page-login .dealer-callout-body p {
    font-size: var(--text-sm);
    color: var(--brand-text-secondary);
    line-height: var(--leading-relaxed);
    margin: 0;
    max-width: 56ch;
}
.page-login .dealer-callout-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: stretch;
}

/* ---- CORE FORM RESKIN INSIDE THE AUTH SURFACE ----
   remind/reset render their fields through $this->form->renderFieldset(), which
   goes to core layouts/joomla/form/renderfield.php — .control-group /
   .control-label / .controls, not the template's .form-group-c pair. Overriding
   that layout would change every form on the site (the com_contact reskin at
   template.css ~2400 depends on the core classes), so the skin is applied here
   by targeting the real wrappers, exactly as the contact form does. */
.auth-surface fieldset {
    border: 0;
    padding: 0;
    margin: 0;
}
.auth-surface legend {
    display: none;
}
.auth-surface .control-group {
    margin-bottom: var(--space-5);
}
.auth-surface .control-label {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-text);
    margin-bottom: var(--space-2);
}
.auth-surface .control-label label {
    margin-bottom: 0;
}
/* The required marker is decorative (the input carries the required attribute),
   so it must not be the only signal — it stays coloured AND keeps its glyph. */
.auth-surface .control-label .star {
    color: var(--brand-primary-light);
}
.auth-surface .controls input,
.auth-surface .controls textarea,
.auth-surface .controls select {
    width: 100%;
    background: var(--brand-bg);
    border: 1px solid var(--brand-border);
    color: var(--brand-text);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--text-base);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.auth-surface .controls input::placeholder,
.auth-surface .controls textarea::placeholder {
    color: var(--brand-text-secondary);
}
.auth-surface .controls input:focus,
.auth-surface .controls textarea:focus,
.auth-surface .controls select:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: var(--shadow-glow-primary);
}
.auth-surface .controls input[type="checkbox"],
.auth-surface .controls input[type="radio"] {
    width: auto;
}
.auth-surface .controls .form-text,
.auth-surface .controls small {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--brand-text-secondary);
}
/* Core marks a failed field with .invalid + aria-invalid; pair the colour with
   the border weight so the state is not carried by hue alone. */
.auth-surface .controls input.invalid,
.auth-surface .controls textarea.invalid,
.auth-surface .controls select.invalid {
    border-width: 2px;
    border-color: var(--color-danger-text);
}
.auth-surface .invalid-feedback,
.auth-surface .form-control-feedback {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-danger-text);
}

/* ---- TABBED AUTH PANEL (account sign-in / guest-order lookup) ----
   The tab strip runs edge-to-edge, so the panel drops its own padding and the
   tab body carries it instead. Active state is signalled three ways — colour,
   a 2px underline and aria-selected — so it never rests on hue alone.
   Bootstrap's tab JS (requested in includes/head.php) owns .active and the
   roving tabindex; nothing here needs custom script. */
.auth-surface .auth-panel--tabbed {
    padding: 0;
    overflow: hidden;
}
.auth-surface .auth-tabs {
    display: flex;
    border-bottom: 1px solid var(--brand-border);
}
.auth-surface .auth-tab {
    flex: 1;
    background: none;
    border: 0;
    padding: var(--space-4) var(--space-5);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--brand-text-secondary);
    cursor: pointer;
    position: relative;
    transition: color var(--transition-fast), background var(--transition-fast);
    outline-offset: -3px;
}
.auth-surface .auth-tab::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: transparent;
    transition: background var(--transition-base);
}
.auth-surface .auth-tab.active {
    color: var(--brand-primary-light);
    background: var(--brand-bg);
}
.auth-surface .auth-tab.active::after {
    background: var(--brand-primary);
}
.auth-surface .auth-tab:hover:not(.active) {
    color: var(--brand-text);
    background: rgba(var(--brand-primary-rgb), .06);
}
.auth-surface .auth-tab:focus-visible {
    outline: 2px solid var(--brand-primary);
    border-radius: 2px;
}
.auth-surface .auth-tab-body {
    padding: var(--space-8);
}
@media (max-width: 575.98px) {
    .auth-surface .auth-tab {
        padding: var(--space-3) var(--space-4);
    }
    .auth-surface .auth-tab-body {
        padding: var(--space-6) var(--space-5);
    }
}