/* Table-ordering UI (cart pill, cart sheet, add buttons).
 *
 * 2026-08-06: extracted from a hardcoded CSS string inside ordering.js. That
 * version painted the cart in fixed hex colours (#111827 navy, #16a34a green),
 * so it clashed with every one of the 14 menu templates. Everything here is
 * expressed in the SAME --ym-* tokens the templates already define, so the
 * cart, the service panel and the menu now share one design language and each
 * template themes all three for free.
 *
 * Token contract (every template defines these): --ym-primary, --ym-primary-dark,
 * --ym-ink, --ym-muted, --ym-bg, --ym-card, --ym-border, --ym-radius,
 * --ym-shadow, --ym-shadow-lg.
 */

/* ---------- add-to-cart button on a product card ---------- */
.ym-ord-add {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 5;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ym-primary);
    color: #fff;
    font-size: 20px;
    line-height: 34px;
    text-align: center;
    cursor: pointer;
    box-shadow: var(--ym-shadow);
    user-select: none;
    -webkit-user-select: none;
    transition: transform .15s ease, background .15s ease;
}
.ym-ord-add:active { transform: scale(0.92); }
.ym-ord-add.ym-in-cart {
    background: var(--ym-primary-dark, var(--ym-primary));
    font-size: 13px;
    font-weight: 700;
}

/* The cart pill is fixed at z-index 1150; the product detail sheet sits at 91,
   so the pill paints OVER the end of the sheet. The sheet scrolls internally,
   and its scroll ends where its content ends — so whatever the pill covers
   (ingredients, allergens) could not be revealed at all (owner report,
   2026-08-09: ALLERGENS stuck under "View order"). Reserve the pill's height
   inside the sheet's own scroll area, only while the pill is on screen.
   Applies to every template: this file is shared and loads after the skin. */
body.ym-has-ord-bar .ym-sheet {
    padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px));
}

/* ---------- the cart pill ---------- */
/* Sits ABOVE the service FAB rather than across it: the FAB is lifted by
   .ym-has-ord-bar (see menu-actions.css) so the two never overlap. */
.ym-ord-bar {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 1150;              /* under the service sheet (1210), over the page */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--ym-ink);
    color: var(--ym-card, #fff);
    border-radius: calc(var(--ym-radius, 14px) * 2);
    padding: 13px 16px;
    padding-bottom: calc(13px + env(safe-area-inset-bottom, 0px));
    box-shadow: var(--ym-shadow-lg);
    cursor: pointer;
    font-size: 15px;
    animation: ymOrdBarIn .28s cubic-bezier(.22, 1, .36, 1);
}
.ym-ord-bar b { font-size: 16px; }
.ym-ord-bar .ym-ord-bar-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    opacity: .95;
}
@keyframes ymOrdBarIn {
    from { transform: translateY(120%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* ---------- cart sheet ---------- */
.ym-ord-overlay {
    position: fixed;
    inset: 0;
    z-index: 1220;              /* above the service sheet so it wins focus */
    background: rgba(0, 0, 0, .55);
    display: flex;
    align-items: flex-end;
    animation: ymOrdFade .2s ease;
}
@keyframes ymOrdFade { from { opacity: 0; } to { opacity: 1; } }

.ym-ord-sheet {
    background: var(--ym-card);
    color: var(--ym-ink);
    width: 100%;
    max-height: 88vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: calc(var(--ym-radius, 18px) * 3) calc(var(--ym-radius, 18px) * 3) 0 0;
    padding: 8px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    font-size: 15px;
    /* the page behind must never steal the swipe gesture */
    touch-action: none;
    animation: ymOrdSheetIn .3s cubic-bezier(.22, 1, .36, 1);
}
@keyframes ymOrdSheetIn { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* grab handle - the same affordance the services sheet uses, so guests learn
   the swipe-down gesture once and it works on every panel */
.ym-ord-grab {
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: var(--ym-border);
    margin: 6px auto 14px;
    flex: none;
}

.ym-ord-sheet h3 {
    margin: 0 0 12px;
    font-size: 18px;
    color: var(--ym-ink);
}

/* Title row + "empty basket" (2026-08-09). Tokens only, so all 21 templates
   theme it; #b91c1c is the same deliberate error red used elsewhere here. */
.ym-ord-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.ym-ord-head h3 { margin: 0; flex: 1; min-width: 0; }
.ym-ord-clear {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: none;
    padding: 7px 11px;
    border: 1px solid var(--ym-border);
    border-radius: 999px;
    background: none;
    color: var(--ym-muted);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}
.ym-ord-clear i { font-size: 15px; }
.ym-ord-clear:active { transform: scale(.96); }
/* Armed = one more tap empties it. Reads as a warning without a modal. */
.ym-ord-clear.is-armed {
    color: #b91c1c;
    border-color: #b91c1c;
    background: rgba(185, 29, 29, .08);
}
@media (prefers-reduced-motion: reduce) {
    .ym-ord-clear { transition: none; }
}

.ym-ord-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ym-border);
}
.ym-ord-row .ym-ord-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.ym-ord-qty { display: flex; align-items: center; gap: 8px; }
.ym-ord-qty span[role=button] {
    width: 30px;
    height: 30px;
    border-radius: var(--ym-radius, 8px);
    background: var(--ym-bg);
    border: 1px solid var(--ym-border);
    text-align: center;
    line-height: 28px;
    font-size: 17px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.ym-ord-field { margin: 12px 0 0; }
.ym-ord-field label {
    display: block;
    font-size: 12.5px;
    color: var(--ym-muted);
    margin-bottom: 4px;
}
.ym-ord-field input {
    width: 100%;
    border: 1px solid var(--ym-border);
    border-radius: var(--ym-radius, 10px);
    padding: 11px 12px;
    font-size: 15px;
    box-sizing: border-box;
    background: var(--ym-card);
    color: var(--ym-ink);
    font-family: inherit;
}
.ym-ord-field input:focus {
    outline: none;
    border-color: var(--ym-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ym-primary) 18%, transparent);
}
.ym-ord-hint { font-size: 12px; color: var(--ym-muted); margin-top: 4px; }

.ym-ord-submit {
    width: 100%;
    margin-top: 16px;
    background: var(--ym-primary);
    color: #fff;
    border: 0;
    border-radius: var(--ym-radius, 12px);
    padding: 15px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: transform .12s ease, background .15s ease;
}
.ym-ord-submit:active { transform: scale(0.99); }
.ym-ord-submit[disabled] { opacity: .6; }

.ym-ord-err { color: #b91c1c; font-size: 13.5px; margin-top: 10px; display: none; }

.ym-ord-status {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--ym-bg);
    border: 1px solid var(--ym-border);
    border-radius: var(--ym-radius, 12px);
    padding: 12px;
    margin-bottom: 12px;
    font-size: 14.5px;
}
.ym-ord-status .ym-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ym-primary);
    animation: ymOrdPulse 1.6s infinite;
    flex: none;
}
@keyframes ymOrdPulse { 50% { opacity: .35; } }

.ym-ord-tabs { display: flex; gap: 8px; margin: 6px 0 4px; }
.ym-ord-tabs span {
    flex: 1;
    text-align: center;
    padding: 10px;
    border-radius: var(--ym-radius, 10px);
    background: var(--ym-bg);
    border: 1px solid var(--ym-border);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
.ym-ord-tabs span.ym-active {
    background: var(--ym-primary);
    border-color: var(--ym-primary);
    color: #fff;
}

/* Google sign-in: real brand mark + neutral surface, per Google's branding
   guidance (the logo must sit on white/neutral, never be recoloured). */
.ym-ord-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid var(--ym-border);
    border-radius: var(--ym-radius, 12px);
    background: #fff;
    color: #3c4043;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    box-sizing: border-box;
}
.ym-ord-google svg { width: 18px; height: 18px; flex: none; }

.ym-ord-check {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-top: 12px;
    font-size: 13px;
    color: var(--ym-muted);
}
.ym-ord-check input { width: 18px; height: 18px; margin-top: 1px; flex: none; accent-color: var(--ym-primary); }
.ym-ord-check a { color: var(--ym-ink); text-decoration: underline; }

.ym-ord-note {
    background: var(--ym-bg);
    border: 1px solid var(--ym-border);
    border-left: 3px solid var(--ym-primary);
    border-radius: var(--ym-radius, 12px);
    padding: 12px;
    margin-top: 12px;
    font-size: 13.5px;
}

.ym-ord-acct {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12.5px;
    color: var(--ym-muted);
    margin-top: 10px;
}
.ym-ord-acct span[role=button] { text-decoration: underline; cursor: pointer; }

.ym-ord-turnstile { margin-top: 12px; min-height: 65px; }

@media (prefers-reduced-motion: reduce) {
    .ym-ord-bar,
    .ym-ord-sheet,
    .ym-ord-overlay { animation: none; }
}

/* ---- previous orders / order again + phone panel (2026-08-30) ----
   Deliberately reuses the sheet's existing colour variables rather than
   introducing a palette: this stylesheet is loaded unmodified by all nine
   customer-menu templates, so any hardcoded colour here would be wrong on
   at least one of them. */
.ym-ord-history { margin-top: 14px; }

.ym-ord-hist-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    opacity: .85;
}

.ym-ord-hist-row {
    padding: 10px 0;
    border-top: 1px solid rgba(128, 128, 128, .22);
}

.ym-ord-hist-when { font-size: 12px; font-weight: 600; margin-bottom: 2px; }

.ym-ord-hist-items {
    font-size: 12px;
    line-height: 1.45;
    opacity: .8;
    /* A long order must wrap, never widen the sheet: a fixed overlay that
       overflows is invisible to every document-level overflow probe. */
    overflow-wrap: anywhere;
}

/* A dish that is gone is struck through rather than hidden, so the diner can
   still recognise the order they are looking at. */
.ym-ord-gone { text-decoration: line-through; opacity: .55; }

.ym-ord-hist-again {
    margin-top: 8px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    cursor: pointer;
    /* Touch target: 44px is the floor on a phone held in one hand at a table. */
    min-height: 36px;
}

.ym-ord-hist-toggle {
    margin-top: 12px;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    opacity: .8;
}

/* ---- two-column auth form on wider screens (2026-08-30) ----
   The sheet is width:100%, so a viewport query maps directly to the sheet's own
   width - no container query needed. Only .ym-ord-field takes part in the
   columns; everything else in the pane (terms checkbox, Turnstile, submit,
   Google button, error, forgot-password) spans the full row, because a half
   width consent checkbox or captcha is worse than a tall form.
   minmax(0, 1fr), not 1fr: a bare 1fr track is minmax(auto, 1fr) and inherits
   its content's min-content floor, which is how a grid silently overflows on a
   narrow screen. */
@media (min-width: 600px) {
    .ym-ord-pane {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 14px;
        align-items: start;
    }

    .ym-ord-pane > *:not(.ym-ord-field) { grid-column: 1 / -1; }
}

/* The data-use promise, shown where the details are actually being asked for.
   Full row inside the two-column pane - it is one sentence about everything
   above it, not a field. */
.ym-ord-datanote {
    margin-top: 10px;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--ym-muted);
    opacity: .95;
}