:root {
    --brand-red: #E21B22;
    --brand-red-hover: #c8161d;
    --text: #1a1a1a;
    --muted: #6b6b6b;
    --border: #E5E7EB;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    color: var(--text);
    background: #fff;
}

.auth-shell {
    min-height: 100vh;
    width: 100%;
    margin: 0;
    padding: 0;
}

.auth-card {
    width: 100%;
    min-height: 100vh;
    background: #fff;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}

/* Its OWN image, not the shared pizza-hero.jpg: that file is also the customize modal's
   fallback hero (customize.js), so swapping it would change the placeholder for every item
   with no picture. The gradient stays as the backdrop while the photo loads / if it 404s. */
.auth-image {
    background-image: url('/images/login-hero.jpg'), linear-gradient(135deg, #2a1a14 0%, #4a2a1a 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
}

.auth-form {
    padding: 40px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 460px;
    margin: 0 auto;
    width: 100%;
    min-height: 100vh;
}

.auth-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

.auth-logo img {
    height: 38px;
    object-fit: contain;
}

.auth-logo-fallback {
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--brand-red);
    letter-spacing: -0.5px;
    font-style: italic;
}

.auth-title {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-align: left;
    margin: 0 0 6px 0;
}

.auth-subtitle {
    text-align: left;
    color: var(--muted);
    font-size: 0.875rem;
    margin: 0 0 26px 0;
    line-height: 1.5;
}

.auth-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Inline form error — used by Login/SignUp/Otp pages for Firebase / network failures. */
.auth-error {
    margin: 4px 0 0;
    padding: 8px 10px;
    border-radius: 6px;
    background: rgba(226, 27, 34, 0.08);
    border: 1px solid rgba(226, 27, 34, 0.25);
    color: var(--brand-red, #b91c1c);
    font-size: 0.8125rem;
    line-height: 1.4;
}

/* Inline redirect link rendered alongside the error text (e.g. "Phone no. is already create user. Log In"). */
.auth-error-link {
    color: var(--brand-red, #b91c1c);
    font-weight: 600;
    text-decoration: underline;
}

.auth-error-link:hover,
.auth-error-link:focus {
    text-decoration: none;
}

/* Login's validation message is plain red text under the field (no tinted box) — it sits
   directly beneath the combined phone control, where a bordered callout reads as a second
   input. Other pages keep the boxed .auth-error. */
.auth-error.auth-error-plain {
    margin-top: 6px;
    padding: 0;
    background: none;
    border: 0;
}

/* reCAPTCHA target — kept invisible; Firebase injects the iframe here. */
#recaptcha-container {
    margin-top: 4px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text);
}

.field input,
.select-wrap select {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--text);
    background: #fff;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    font-family: inherit;
}

.field input::placeholder {
    color: #bdbdbd;
}

.field input:focus,
.select-wrap select:focus {
    border-color: var(--brand-red);
    box-shadow: 0 0 0 3px rgba(226, 27, 34, 0.12);
}

.select-wrap {
    position: relative;
}

.select-wrap select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 36px;
    cursor: pointer;
}

.select-wrap .chev {
    position: absolute;
    right: 14px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid #6b6b6b;
    border-bottom: 2px solid #6b6b6b;
    transform: translateY(-75%) rotate(45deg);
    pointer-events: none;
}

/* ── Combined phone field ───────────────────────────────────────────────────
   One rounded control instead of the old "Country code" + "Phone no." pair:
   the dial-code <select> on the left (code only — no flag, no country name),
   a hairline divider, then the national-number input. The WRAPPER owns the
   border, radius and background so both native controls can render fully
   transparent and the two read as a single field. */
/* ONE bordered box with a hairline divider (per the current login reference design):
   the dial code is a fixed segment on the left, the number fills the rest. The wrapper
   owns the border, radius, background and focus ring so the two controls read as a
   single field; the children render borderless and transparent.
   (It was briefly two separate pills with a gap — that is what the earlier revision of
   this comment described.) */
.phone-combo {
    display: flex;
    align-items: stretch;
    height: 46px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: #fff;
}

.phone-cc-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    border-right: 1px solid var(--border);
}

/* The real <select> is stretched transparently across this segment, and the visible
   face below decides how wide the segment is. Why: a native select always auto-sizes to
   its WIDEST option (+971), so it reserved dead space between the shown code and the
   caret no matter which country was selected. The select is invisible, NOT hidden — it
   keeps the native picker, keyboard handling, form value and its aria-label, and the
   face carries pointer-events:none so taps fall straight through to it. */
.phone-combo .phone-cc {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    appearance: none;
    -webkit-appearance: none;
    /* NOT opacity:0 — the browser paints the OPEN dropdown as part of the select, so a
       zero-opacity select produced a ghosted, unreadable popup on click. Transparent TEXT
       hides the closed state just as well (the face renders the code instead) while leaving
       the popup opaque. Options need their colours restated below: they inherit from the
       select, so they would otherwise be transparent-on-transparent in the open list. */
    /* display:none, not just non-clickable: there is one country (+1), so the picker had
       nothing to offer and its popup was the reported "distortion". The element STAYS in the
       DOM because the page reads ccSelect.value when building the E.164 number — a removed
       select would break sendOtp. Hidden selects still expose .value to script. */
    display: none;
}

/* What the customer actually sees: just the dial code. No caret — the <select> is
   display:none (one country), so a caret would advertise a picker that never opens.
   (The outlined .chev above is still used by every other select on the site.) */
.phone-cc-face {
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
    font-family: inherit;
    font-size: 0.9375rem;
    line-height: 1;
    color: var(--text);
    white-space: nowrap;
    pointer-events: none;
}

.phone-combo .phone-num {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0 14px;
    font-family: inherit;
    font-size: 0.9375rem;
    color: var(--text);
    outline: none;
}

/* The wrapper owns the focus ring again: :focus-within fires from the number input (the
   only focusable child) but paints around the whole control, so the ring never cuts the
   dial-code segment off from the field it belongs to. */
.phone-combo:focus-within {
    border-color: var(--brand-red);
    box-shadow: 0 0 0 3px rgba(226, 27, 34, 0.12);
}

/* Invalid: the typed digits turn red alongside the message below (reference design
   leaves the border neutral). The dial code lives on the face, not the (transparent)
   <select>, so it's the face that has to be re-coloured. */
.phone-combo.is-invalid .phone-cc-face,
.phone-combo.is-invalid .phone-num {
    color: var(--brand-red);
}

/* Label left, arrow hard right (per design). The arrow is a ::after and NOT a child
   span on purpose: the submit handlers swap button.textContent ("Sending OTP…"), which
   would delete a real element and would also be captured into dataset.originalText. */
.btn-primary {
    margin-top: 8px;
    width: 100%;
    height: 48px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 0;
    border-radius: 4px;
    background: var(--brand-red);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease;
    font-family: inherit;
}

.btn-primary::after {
    content: "\2192";
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1;
}

.btn-primary:hover { background: var(--brand-red-hover); }
.btn-primary:active { transform: translateY(1px); }

/* Small print under the submit button (e.g. "we'll text a one-time code…"). */
.auth-hint {
    margin: 10px 0 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--muted);
}

.auth-alt-link {
    display: block;
    text-align: center;
    margin-top: 18px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
}

.auth-alt-link:hover { text-decoration: underline; }

/* Same face as .auth-alt-link, but for a real <button>. Guest checkout is an ACTION, not a
   navigation, so it must not be an anchor — a11y and keyboard behaviour differ. These five
   declarations are only the UA button defaults being undone; the look still comes from the
   rule above. */
button.auth-alt-link {
    width: 100%;
    background: none;
    border: 0;
    font-family: inherit;
    cursor: pointer;
}

/* OTP — fluid row that fits any phone width.
   Each box uses flex:1 so the row always fills the available space,
   capped at 56 px so on tablets the boxes don't grow huge. The gap
   shrinks with the viewport via clamp() so all 6 boxes always fit. */
.otp-row {
    display: flex;
    gap: clamp(6px, 2vw, 14px);
    justify-content: center;
    margin: 8px 0 6px;
    width: 100%;
}

.otp-box {
    flex: 1 1 0;
    min-width: 0;
    max-width: 56px;
    aspect-ratio: 1 / 1;
    width: auto;
    height: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    text-align: center;
    font-size: clamp(16px, 4.6vw, 22px);
    font-weight: 600;
    color: var(--text);
    outline: none;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    font-family: inherit;
    padding: 0;
    box-sizing: border-box;
}

.otp-box:focus {
    border-color: var(--brand-red);
    box-shadow: 0 0 0 3px rgba(226, 27, 34, 0.12);
}

.resend {
    text-align: center;
    margin: 16px 0 0;
    font-size: 0.8125rem;
    color: var(--muted);
}

/* ---------------------------------------------------------
   Responsive breakpoints
   --------------------------------------------------------- */

/* Large laptop / small desktop (<= 1280px): tighten form padding */
@media (max-width: 1280px) {
    .auth-form {
        padding: 32px 48px;
        max-width: 440px;
    }
}

/* Tablet landscape (<= 1024px): still split, more compact */
@media (max-width: 1024px) {
    .auth-form {
        padding: 28px 36px;
        max-width: 400px;
    }
    .auth-logo img { height: 34px; }
    .auth-title { font-size: 1.25rem; }
    /* .otp-box sizing is now fluid via flex + clamp() above — no override. */
}

/* Tablet portrait & large phones (<= 820px): stack vertically */
@media (max-width: 820px) {
    .auth-card {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .auth-image {
        min-height: 240px;
        height: 32vh;
        max-height: 320px;
    }
    .auth-form {
        min-height: auto;
        padding: 36px 32px 48px;
        max-width: 520px;
    }
    .auth-logo { margin-bottom: 20px; }
    .auth-logo img { height: 36px; }
}

/* Mobile (<= 560px) */
@media (max-width: 560px) {
    .auth-image {
        min-height: 200px;
        height: 28vh;
        max-height: 260px;
    }
    .auth-form {
        padding: 28px 20px 40px;
    }
    .auth-logo { margin-bottom: 18px; }
    .auth-logo img { height: 32px; }
    .auth-title { font-size: 1.1875rem; }
    .auth-subtitle { font-size: 0.8125rem; margin-bottom: 22px; }
    .field input,
    .select-wrap select { height: 44px; }
    .btn-primary { height: 46px; font-size: 0.9375rem; }
    /* .otp-row gap and .otp-box sizing flow from the fluid defaults above. */
}

/* Small phones (<= 380px) */
@media (max-width: 380px) {
    .auth-image {
        min-height: 160px;
        height: 24vh;
        max-height: 200px;
    }
    .auth-form { padding: 24px 16px 32px; }
    .auth-logo img { height: 30px; }
    /* .otp-row gap and .otp-box sizing flow from the fluid defaults above. */
    .otp-box {
        max-width: 44px;
    }
}

/* Short landscape phones: shrink the hero so the form is reachable */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 900px) {
    .auth-card { grid-template-columns: 1fr 1fr; }
    .auth-image {
        min-height: 100vh;
        height: 100vh;
        max-height: none;
    }
    .auth-form {
        min-height: 100vh;
        padding: 20px 28px;
        justify-content: flex-start;
        overflow-y: auto;
    }
    .auth-logo { margin-bottom: 12px; }
    .auth-logo img { height: 28px; }
    .auth-subtitle { margin-bottom: 16px; }
    .auth-fields { gap: 10px; }
}

/* Touch-input refinements: prevent iOS auto-zoom on focused inputs.
   .phone-combo's own children need naming here — their .phone-combo-scoped rules
   out-specify the generic .field input / .select-wrap select selectors. */
@media (hover: none) and (pointer: coarse) {
    .field input,
    .select-wrap select,
    .otp-box {
        font-size: 1rem;
    }
    .phone-combo .phone-cc,
    .phone-combo .phone-cc-face,
    .phone-combo .phone-num {
        font-size: 1rem;
    }
}