/* ============================================================================
   AUTH 2026  —  .au-*
   ----------------------------------------------------------------------------
   Sign-in and sign-up. Shares the landing page's token set (landing-2026.css
   is loaded alongside), so the account screens cannot drift away from the
   palette the rest of the site uses — they previously carried their own fixed
   burgundy/orange scheme.

   Mobile first: on a phone the panel collapses to a slim branded strip so the
   form is the first thing in reach, and the whole card sits at the top of the
   screen instead of being centred in a tall empty viewport.
   ========================================================================== */

.au {
    min-height: 100%;
    padding: clamp(16px, 4vw, 56px) clamp(14px, 4vw, 32px) clamp(40px, 6vw, 72px);
    background:
        radial-gradient(60rem 34rem at 100% -10%, rgba(var(--lp-brand-rgb), .14), transparent 62%),
        radial-gradient(48rem 32rem at 0% 108%, rgba(var(--lp-accent-rgb), .12), transparent 62%),
        var(--lp-canvas);
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
@media (min-width: 880px) { .au { align-items: center; min-height: 78vh; } }

.au__card {
    width: 100%;
    max-width: 1020px;
    display: grid;
    grid-template-columns: 1fr;
    border-radius: var(--lp-r-xl);
    overflow: hidden;
    background: var(--lp-surface);
    box-shadow: var(--lp-sh-3);
    border: 1px solid var(--lp-line);
}
@media (min-width: 880px) {
    .au__card { grid-template-columns: minmax(0, 1fr) minmax(0, .86fr); }
}

/* ------------------------------------------------------------------ PANEL */
/* The brand side. On desktop it is a photo wall of real dishes; on a phone it
   shrinks to a strip, because a 220px band showing only a logo pushed the
   first input below the fold. */
.au__panel {
    position: relative;
    isolation: isolate;
    order: -1;
    min-height: 104px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(18px, 4vw, 40px);
    background: var(--lp-night);
    color: #fff;
    overflow: hidden;
}
@media (min-width: 880px) {
    .au__panel { order: 2; min-height: 560px; justify-content: space-between; }
}

.au__mosaic {
    position: absolute; inset: 0; z-index: -2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}
@media (min-width: 880px) { .au__mosaic { grid-template-columns: repeat(2, 1fr); } }
.au__mosaic img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    filter: saturate(.85) brightness(.55);
}
.au__panel::after {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(160deg, rgba(16, 10, 6, .82), rgba(16, 10, 6, .93)),
        radial-gradient(70% 60% at 100% 0%, rgba(var(--lp-brand-rgb), .38), transparent 68%);
}

.au__brand {
    display: inline-flex; align-items: center; gap: 10px;
    text-decoration: none !important;
    color: #fff !important;
    font-family: var(--lp-display);
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    font-weight: 700;
}
html[dir="rtl"] .au__brand { font-family: var(--lp-font); font-weight: 800; }
.au__brand img { max-height: 40px; width: auto; }
.au__brand i { color: var(--lp-accent); font-size: .85em; }

/* The selling points only earn their space where there is space. */
.au__pitch { display: none; }
@media (min-width: 880px) {
    .au__pitch { display: block; margin-top: auto; }
}
.au__pitch-title {
    font-family: var(--lp-display);
    font-size: 1.55rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 18px;
    color: #fff;
}
html[dir="rtl"] .au__pitch-title { font-weight: 800; }
.au__perk {
    display: flex; align-items: flex-start; gap: 12px;
    margin-bottom: 14px;
}
.au__perk i {
    flex: none;
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    color: var(--lp-accent);
    font-size: 12px;
}
.au__perk span { font-size: .88rem; line-height: 1.6; color: rgba(255, 255, 255, .82); }

/* ------------------------------------------------------------------- FORM */
.au__form {
    order: 1;
    padding: clamp(24px, 5vw, 44px) clamp(20px, 5vw, 44px) clamp(28px, 5vw, 44px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.au__title {
    font-family: var(--lp-display);
    font-size: clamp(1.5rem, 4.5vw, 2rem);
    font-weight: 600;
    line-height: 1.2;
    color: var(--lp-ink);
    margin: 0;
}
html[dir="rtl"] .au__title { font-weight: 800; }
.au__sub {
    margin: 8px 0 26px;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--lp-ink-mute);
}

.au__field { margin-bottom: 15px; }
.au__label {
    display: block;
    margin-bottom: 7px;
    font-size: 12.5px; font-weight: 800;
    color: var(--lp-ink-soft);
}
.au__wrap { position: relative; display: flex; align-items: center; }
.au__wrap > i:first-child {
    position: absolute;
    inset-inline-start: 15px;
    color: var(--lp-ink-mute);
    font-size: 14px;
    pointer-events: none;
    transition: color .2s;
}
.au__input {
    width: 100%;
    height: 52px;
    padding-inline: 44px 46px;
    border: 1.5px solid var(--lp-line-2);
    border-radius: 14px;
    background: var(--lp-surface-2);
    font-family: inherit;
    font-size: 15px;
    color: var(--lp-ink);
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.au__input::placeholder { color: var(--lp-ink-mute); opacity: .8; }
.au__input:focus {
    outline: none;
    border-color: var(--lp-brand);
    background: var(--lp-surface);
    box-shadow: 0 0 0 4px rgba(var(--lp-brand-rgb), .13);
}
.au__wrap:focus-within > i:first-child { color: var(--lp-brand); }

.au__toggle {
    position: absolute;
    inset-inline-end: 8px;
    width: 36px; height: 36px;
    border: 0; padding: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--lp-ink-mute);
    font-size: 14px;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: color .2s, background .2s;
}
.au__toggle:hover { color: var(--lp-brand); background: rgba(var(--lp-brand-rgb), .08); }
.au__toggle:focus-visible { outline: 2px solid var(--lp-brand); outline-offset: 1px; }

/* Password strength: a quiet meter under the field, not a pink rule. */
.au__meter { margin-top: 9px; }
.au__meter-bar {
    height: 5px;
    border-radius: var(--lp-pill);
    background: var(--lp-line-2);
    overflow: hidden;
}
.au__meter-fill {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--lp-brand);
    transition: width .3s var(--lp-ease), background .3s;
}
.au__meter-fill[data-level="1"] { width: 25%;  background: #C73E3E; }
.au__meter-fill[data-level="2"] { width: 50%;  background: #D89B1F; }
.au__meter-fill[data-level="3"] { width: 75%;  background: #7BA05B; }
.au__meter-fill[data-level="4"] { width: 100%; background: #2D8659; }
.au__meter-text {
    display: block;
    margin-top: 6px;
    font-size: 11.5px; font-weight: 700;
    color: var(--lp-ink-mute);
}

/* Remember / forgot row */
.au__row {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px;
    margin-bottom: 20px;
}
.au__remember {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 13px; font-weight: 700;
    color: var(--lp-ink-soft);
    cursor: pointer;
    margin: 0;
}
.au__remember input { position: absolute; opacity: 0; width: 0; height: 0; }
.au__box {
    width: 20px; height: 20px;
    border: 1.5px solid var(--lp-line-2);
    border-radius: 6px;
    background: var(--lp-surface);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .2s, border-color .2s;
}
.au__box::after {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 10px;
    color: #fff;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .18s, transform .18s;
}
.au__remember input:checked + .au__box { background: var(--lp-brand); border-color: var(--lp-brand); }
.au__remember input:checked + .au__box::after { opacity: 1; transform: scale(1); }
.au__remember input:focus-visible + .au__box { outline: 2px solid var(--lp-brand); outline-offset: 2px; }

.au__forgot {
    font-size: 13px; font-weight: 800;
    color: var(--lp-brand) !important;
    text-decoration: none !important;
}
.au__forgot:hover { text-decoration: underline !important; text-underline-offset: 3px; }

/* Submit */
.au__submit {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%;
    min-height: 54px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--lp-brand), var(--lp-brand-dark));
    color: #fff;
    font-family: inherit;
    font-size: 15px; font-weight: 800;
    cursor: pointer;
    box-shadow: var(--lp-sh-brand);
    transition: transform .2s var(--lp-ease), filter .2s;
}
.au__submit:hover { transform: translateY(-2px); filter: brightness(1.07); }
.au__submit:active { transform: translateY(0) scale(.99); }
.au__submit:focus-visible { outline: 2px solid var(--lp-brand); outline-offset: 3px; }
.au__submit[disabled] { opacity: .6; pointer-events: none; }
html[dir="rtl"] .au__submit i { transform: scaleX(-1); }

.au__bottom {
    margin: 20px 0 0;
    text-align: center;
    font-size: 13.5px;
    color: var(--lp-ink-mute);
}
.au__bottom a {
    font-weight: 800;
    color: var(--lp-brand) !important;
    text-decoration: none !important;
}
.au__bottom a:hover { text-decoration: underline !important; text-underline-offset: 3px; }

.au__captcha { margin-bottom: 16px; }
.au__captcha > div { max-width: 100%; overflow: hidden; }

/* Validation messages arrive from the session, so they render above the form. */
.au__alert {
    display: flex; align-items: flex-start; gap: 10px;
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(199, 62, 62, .08);
    border: 1px solid rgba(199, 62, 62, .22);
    color: #A32B2B;
    font-size: 13px; line-height: 1.6;
}
.au__alert i { font-size: 13px; margin-top: 2px; flex: none; }
.au__alert ul { margin: 0; padding-inline-start: 1.1em; }

/* ═══════════════════════════════════════════════════════════════════════
   Google sign-in — the delivery channel's one-tap way in.

   Deliberately NOT painted in the site's brand colours. Google's branding
   terms require their own mark, unaltered, and a customer recognises this
   button by its shape before they read it; restyling it to match the site
   would cost the recognition that is the whole reason for offering it.

   Table / QR ordering never shows this: a guest at a table orders without an
   account at all, so there is nothing on that flow for it to sit on.
   ═══════════════════════════════════════════════════════════════════════ */
.au__google {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    width: 100%;
    min-height: 54px;
    padding: 0 18px;
    border: 1.5px solid rgba(60, 64, 67, .18);
    border-radius: 14px;
    background: #fff;
    color: #3c4043 !important;
    font-family: inherit;
    font-size: 15px; font-weight: 800;
    text-decoration: none !important;
    box-shadow: 0 1px 3px rgba(60, 64, 67, .14);
    transition: transform .2s var(--lp-ease), box-shadow .2s, border-color .2s;
}
.au__google:hover {
    transform: translateY(-2px);
    border-color: rgba(60, 64, 67, .3);
    box-shadow: 0 8px 20px -10px rgba(60, 64, 67, .5);
    color: #202124 !important;
}
.au__google:active { transform: translateY(0) scale(.99); }
.au__google:focus-visible { outline: 2px solid var(--lp-brand); outline-offset: 3px; }

.au__google-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; flex: none;
}
.au__google-mark svg { width: 100%; height: 100%; display: block; }

/* "or" rule between Google and the password form. */
.au__or {
    display: flex; align-items: center; gap: 14px;
    margin: 20px 0;
    font-size: 12px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--lp-ink-mute);
}
.au__or::before, .au__or::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(60, 40, 20, .16), transparent);
}

/* Why this page is being shown — set when the delivery checkout bounced a
   guest here. It also states the thing people ask about most: the table QR
   flow does not need any of this. */
.au__why {
    display: flex; align-items: flex-start; gap: 12px;
    margin-bottom: 18px;
    padding: 13px 15px;
    border-radius: 14px;
    background: rgba(var(--lp-brand-rgb), .07);
    border: 1px solid rgba(var(--lp-brand-rgb), .2);
    color: var(--lp-ink);
    line-height: 1.6;
}
.au__why i { font-size: 14px; margin-top: 3px; flex: none; color: var(--lp-brand); }
.au__why strong { display: block; font-size: 13.5px; font-weight: 800; }
.au__why span   { display: block; font-size: 12.5px; color: var(--lp-ink-mute); margin-top: 2px; }

@media (max-width: 400px) {
    .au__google { font-size: 14px; gap: 9px; }
}

@media (prefers-reduced-motion: reduce) {
    .au__submit, .au__toggle, .au__meter-fill, .au__box, .au__google { transition: none; }
}

/* The panel's photography was doubly darkened — a filter on the images plus a
   near-opaque overlay — so the food was unreadable. The overlay alone carries
   the contrast the white text needs. */
.au__mosaic img { filter: saturate(.95) brightness(.9); }
.au__panel::after {
    background:
        linear-gradient(160deg, rgba(16, 10, 6, .58), rgba(16, 10, 6, .86)),
        radial-gradient(70% 60% at 100% 0%, rgba(var(--lp-brand-rgb), .34), transparent 68%);
}