/**
 * Dealer Auth Modal — guest login popup + bottom sheet.
 *
 * Two responsive personalities of one dialog:
 *   - ≥768px: centered modal card
 *   - <768px: bottom sheet (matches catalog sort-sheet idiom)
 *
 * The form INSIDE the modal is the same `auth-login.php` template that
 * /my-account/ renders. Form-element selectors live in this file too,
 * because `auth.css` scopes everything to `body.woocommerce-account` and
 * that selector doesn't match elsewhere on the site. We mirror only the
 * subset of form rules that the modal actually shows.
 *
 * Cascade position: tokens.css → base.css → components.css → auth-modal.css
 *
 * Naming convention (BEM, isolated namespace):
 *   .dealer-auth-modal               outer dialog
 *   .dealer-auth-modal__backdrop     dimmed overlay
 *   .dealer-auth-modal__panel        card (centered) / sheet (bottom)
 *   .dealer-auth-modal__grip         visual handle (sheet only)
 *   .dealer-auth-modal__close        ✕ button
 *   .dealer-auth-modal__body         swap target for AJAX step transitions
 *
 * Source of truth: docs/systems/AUTH-SYSTEM.md (Auth Modal section).
 */

/* =========================================================================
 * Local tokens — modal-only knobs.
 *
 * Global tokens (--color-*, --padding-*) come from tokens.css and must
 * not be redefined here. These belong to the modal module only.
 * ========================================================================= */
.dealer-auth-modal {
    --auth-modal-z:          260;
    --auth-modal-backdrop:   rgba(0, 0, 0, 0.55);
    --auth-modal-card-bg:    var(--color-white);
    --auth-modal-card-w:     460px;
    --auth-modal-radius:     14px;
    --auth-modal-padding-x:  28px;
    --auth-modal-padding-y:  36px;
    --auth-modal-transition: 220ms ease;
}

/* =========================================================================
 * Container + backdrop
 * ========================================================================= */
.dealer-auth-modal {
    position: fixed;
    inset: 0;
    z-index: var(--auth-modal-z);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.dealer-auth-modal[hidden] {
    display: none;
}

.dealer-auth-modal__backdrop {
    position: absolute;
    inset: 0;
    background: var(--auth-modal-backdrop);
}

/* =========================================================================
 * Panel — desktop / tablet card
 * ========================================================================= */
.dealer-auth-modal__panel {
    position: relative;
    width: 100%;
    max-width: var(--auth-modal-card-w);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: var(--auth-modal-card-bg);
    border-radius: var(--auth-modal-radius);
    padding: var(--auth-modal-padding-y) var(--auth-modal-padding-x);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
}

.dealer-auth-modal__grip {
    display: none; /* sheet-only — shown on mobile via media query */
}

.dealer-auth-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--color-black);
    cursor: pointer;
    transition: background var(--auth-modal-transition);
}

.dealer-auth-modal__close:hover,
.dealer-auth-modal__close:focus-visible {
    background: rgba(0, 0, 0, 0.06);
}

.dealer-auth-modal__body {
    width: 100%;
}

/* =========================================================================
 * Form rules INSIDE the modal.
 *
 * Mirror the visual contract from auth.css §2-§8, re-scoped under
 * `.dealer-auth-modal`. This duplication is intentional — auth.css ties
 * to `body.woocommerce-account` and shouldn't be loosened until the
 * email-verify-banner styling is also audited. See AUTH-SYSTEM.md.
 * ========================================================================= */
.dealer-auth-modal .dealer-auth {
    display: block;
    width: 100%;
    margin: 0 auto;
}

.dealer-auth-modal .dealer-auth-form {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.dealer-auth-modal .dealer-auth-form__title {
    margin: 0 0 14px;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-black);
    text-align: center;
}

.dealer-auth-modal .dealer-auth-form__lead {
    width: 100%;
    max-width: 340px;
    margin: 0 auto 24px;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.3;
    color: var(--color-black);
    text-align: center;
}

.dealer-auth-modal .dealer-auth-form__lead strong {
    font-weight: var(--font-weight-medium);
    color: var(--color-black);
}

.dealer-auth-modal .dealer-auth-form__label {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.2;
    color: var(--color-black);
    text-align: center;
}

.dealer-auth-modal .dealer-auth-form__identifier {
    display: block;
    width: 100%;
    margin: 0 auto;
}

.dealer-auth-modal .dealer-auth-form__identifier::placeholder {
    color: rgba(0, 0, 0, 0.28);
    opacity: 1;
}

/* Honeypot — must be visually hidden even though auth.css can't reach it here. */
.dealer-auth-modal .dealer-auth-form__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    min-height: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.dealer-auth-modal .dealer-auth-form__hint {
    width: 100%;
    max-width: 360px;
    margin: 14px auto 24px;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.3;
    color: rgba(0, 0, 0, 0.72);
    text-align: center;
}

.dealer-auth-modal .dealer-auth-form__submit {
    margin: 0 auto;
    width: 100%;
    max-width: 280px;
    border-radius: 99px;
}

.dealer-auth-modal .dealer-auth-form__code-input {
    width: 100%;
    text-align: center;
    letter-spacing: 0.4em;
    font-size: 22px;
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
}

/* Segmented OTP — JS swaps the single text input for these boxes. */
.dealer-auth-modal .dealer-auth-form__otp {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding-bottom: 24px;
}

.dealer-auth-modal .dealer-auth-form__otp-digit {
    width: 44px;
    height: 54px;
    min-height: 0;
    padding: 0;
    font-size: 22px;
    font-weight: 500;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

@media (min-width: 480px) {
    .dealer-auth-modal .dealer-auth-form__otp-digit {
        width: 46px;
        height: 58px;
        font-size: 24px;
    }
}

.dealer-auth-modal .dealer-auth-form__resend {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding-top: 14px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.7);
}

.dealer-auth-modal .dealer-auth-form__resend-timer {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.dealer-auth-modal [data-dealer-auth-countdown] {
    font-weight: var(--font-weight-medium);
    color: var(--color-black);
}

.dealer-auth-modal .dealer-auth-form__alt {
    margin: 12px 0 0;
    text-align: center;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.7);
}

/* =========================================================================
 * Notices — inline below the form. JS swaps this surface for AJAX errors.
 * ========================================================================= */
.dealer-auth-modal .dealer-auth__notices {
    width: 100%;
    max-width: 360px;
    margin: 16px auto 0;
}

.dealer-auth-modal .dealer-auth__notice {
    margin: 0;
    padding: 0;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-light);
    line-height: 1.35;
    text-align: center;
}

.dealer-auth-modal .dealer-auth__notice--success { color: var(--color-primary); }
.dealer-auth-modal .dealer-auth__notice--error   { color: var(--color-error); }
.dealer-auth-modal .dealer-auth__notice--info    { color: var(--color-black); }

/* =========================================================================
 * Body scroll-lock — applied while modal is open.
 * ========================================================================= */
body.dealer-auth-modal-open {
    overflow: hidden;
}

/* =========================================================================
 * Mobile bottom-sheet variant (<768px)
 * ========================================================================= */
@media (max-width: 767px) {
    .dealer-auth-modal {
        align-items: flex-end;
        padding: 0;
    }

    .dealer-auth-modal__panel {
        max-width: 100%;
        max-height: 92vh;
        border-radius: 18px 18px 0 0;
        padding: 18px 20px 32px;
        box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.22);
    }

    .dealer-auth-modal__grip {
        display: block;
        width: 36px;
        height: 4px;
        margin: 0 auto 10px;
        background: rgba(0, 0, 0, 0.18);
        border-radius: 999px;
    }

    .dealer-auth-modal__close {
        top: 10px;
        right: 10px;
    }

    .dealer-auth-modal .dealer-auth-form__title {
        font-size: 24px;
        margin-bottom: 10px;
    }

    .dealer-auth-modal .dealer-auth-form__lead {
        margin-bottom: 18px;
    }

    .dealer-auth-modal .dealer-auth-form__submit {
        max-width: 100%;
    }

    .dealer-auth-modal .dealer-auth-form__otp-digit {
        width: 40px;
        height: 50px;
        font-size: 20px;
    }
}

/* =========================================================================
 * Reduced motion — disable the open/close transition.
 * ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    .dealer-auth-modal,
    .dealer-auth-modal__panel,
    .dealer-auth-modal__close {
        transition-duration: 0s;
    }
}