/*
 * POS3000_Globalv3 Storefront — mobile-first, WCAG 2.1 AA.
 *
 * Color palette: high-contrast neutrals (~7:1) with a single accent color
 * used sparingly. Focus rings are 3px so they're visible against any
 * background (WCAG 2.4.7). Tap targets are >=44x44px (WCAG 2.5.5).
 */

:root {
    --color-bg: #f7f7f8;
    --color-surface: #ffffff;
    --color-text: #0f172a;
    --color-text-muted: #475569;
    --color-border: #e2e8f0;
    --color-accent: #0a7d54;
    --color-accent-fg: #ffffff;
    --color-danger: #b91c1c;
    --color-focus: #2563eb;
    --shadow-card: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
    --radius: 12px;
    --tap-min: 44px;
    --category-circle: 128px;
    --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-stack);
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    text-size-adjust: 100%;
}

a { color: var(--color-accent); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: 4px;
}

img { max-width: 100%; height: auto; display: block; }

.skip-link {
    position: absolute; top: -40px; left: 0;
    background: var(--color-text); color: #fff;
    padding: 8px 12px; z-index: 1000;
    text-decoration: none;
}
.skip-link:focus { top: 0; }

/* ----- Header / nav ----- */
.store-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky; top: 0; z-index: 10;
}
.store-header-inner {
    max-width: 1120px; margin: 0 auto;
    padding: 12px 16px;
    display: flex; align-items: center; gap: 16px;
}
.store-brand {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 700; color: var(--color-text); text-decoration: none;
    font-size: 18px;
}
.store-brand-mark { color: var(--color-accent); font-size: 22px; line-height: 1; }
.store-brand-logo { height: 36px; width: auto; max-width: 180px; object-fit: contain; display: block; }
.store-nav {
    margin-left: auto;
    display: flex; align-items: center; gap: 4px;
}
.store-nav-link {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--tap-min); min-width: var(--tap-min);
    padding: 10px 14px; border-radius: 8px;
    background: transparent; border: 0; cursor: pointer;
    font: inherit; color: var(--color-text); text-decoration: none;
}
.store-nav-link:hover { background: #eef2f7; }
.store-nav-link.active { font-weight: 700; }
.store-cart-link {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--tap-min); min-width: var(--tap-min);
    padding: 8px 12px; border-radius: 8px;
    color: var(--color-text); text-decoration: none;
}
.store-cart-link:hover { background: #eef2f7; }
.store-cart-icon { font-size: 22px; }
.store-cart-badge {
    position: absolute; top: 4px; right: 4px;
    background: var(--color-accent); color: var(--color-accent-fg);
    border-radius: 999px; min-width: 18px; height: 18px;
    font-size: 11px; line-height: 18px; padding: 0 5px;
    text-align: center; font-weight: 700;
}

/* ----- Main / pages ----- */
.store-main {
    max-width: 1120px;
    margin: 0 auto;
    padding: 16px;
}
.store-footer {
    max-width: 1120px;
    margin: 32px auto 24px;
    padding: 0 16px;
    color: var(--color-text-muted);
    text-align: center;
}
.store-footer a { color: var(--color-text-muted); }

h1, h2, h3 { line-height: 1.25; }
h1 { font-size: 28px; margin: 8px 0 16px; }
h2 { font-size: 22px; margin: 16px 0 12px; }
h3 { font-size: 18px; margin: 12px 0 8px; }

/* ----- Cards / lists ----- */
.card-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
}
@media (min-width: 600px) {
    .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
    .card-grid { grid-template-columns: repeat(3, 1fr); }
}

.menu-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    display: flex; flex-direction: column;
    text-decoration: none; color: inherit;
}
.menu-card-image {
    background: #eef2f7;
    aspect-ratio: 16 / 10;
    width: 100%;
    object-fit: cover;
}
.menu-card-body { padding: 12px 14px; }
.menu-card-title { font-weight: 600; margin: 0 0 6px; font-size: 17px; }
.menu-card-meta { display: flex; justify-content: space-between; align-items: center; }
.menu-card-price { font-weight: 700; }
.menu-card-description {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.4;
}
.menu-card-soldout {
    color: var(--color-danger); font-weight: 700; font-size: 13px;
}

/* Promo / coupon cards reuse the menu-card shell but are rendered as buttons. */
button.menu-card {
    font: inherit;
    text-align: left;
    cursor: pointer;
    padding: 0;
    width: 100%;
}
.promo-card { border-color: #0a7d54; }
.promo-card.applied { outline: 3px solid #0a7d54; }

/* The card the shopper tapped before choosing an order type and time, shown again once they have. */
.menu-card-target,
.promo-card.menu-card-target { outline: 3px solid var(--color-accent); outline-offset: 2px; }

.promo-card-image {
    display: flex; align-items: center; justify-content: center;
    font-size: 42px; font-weight: 800; color: #0a7d54; background: #e7f5ef;
}
.promo-strip-icon {
    display: flex; align-items: center; justify-content: center;
    font-size: calc(var(--category-circle) / 4);
    font-weight: 800; color: #0a7d54; background: #e7f5ef;
}
.promo-applied-badge {
    color: #fff; background: #0a7d54; font-weight: 700; font-size: 12px;
    border-radius: 999px; padding: 2px 10px;
}

.store-hero {
    width: 100%;
    max-height: 280px;
    object-fit: cover;
    border-radius: var(--radius);
    margin-bottom: 16px;
}

.category-strip {
    position: sticky;
    top: 64px;
    z-index: 5;
    background: var(--color-bg);
    padding: 8px 0;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    gap: 8px;
}
.category-strip-scroller {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.category-strip-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    list-style: none;
    padding: 4px;
    margin: 0;
    width: max-content;
}
/* Hidden until category-strip.js finds the categories overflowing the strip. */
.category-strip-chevron {
    display: none;
    flex: 0 0 auto;
    align-self: flex-start;
    margin-top: calc(4px + (var(--category-circle) - var(--tap-min)) / 2);
    width: var(--tap-min);
    height: var(--tap-min);
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-card);
    cursor: pointer;
}
.category-strip[data-overflow] .category-strip-chevron { display: inline-flex; }
.category-strip-chevron:hover:not([aria-disabled="true"]) {
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.category-strip-chevron[aria-disabled="true"] {
    opacity: .35;
    box-shadow: none;
    cursor: default;
}
.category-strip-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--color-text);
    min-width: calc(var(--category-circle) + 20px);
    gap: 4px;
}
.category-strip-image {
    width: var(--category-circle);
    height: var(--category-circle);
    border-radius: 50%;
    object-fit: cover;
    background: #eef2f7;
    border: 2px solid var(--color-border);
    display: block;
}
.category-strip-item:hover .category-strip-image {
    border-color: var(--color-accent);
}
.category-strip-placeholder { display: inline-block; }
.category-strip-placeholder.promo-strip-icon { display: flex; }
.category-strip-name {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    max-width: calc(var(--category-circle) + 16px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Lands a jumped-to section's heading just below the sticky header and category strip. */
.category-section { margin: 24px 0; scroll-margin-top: calc(var(--category-circle) + 120px); }
.category-section header { display: flex; align-items: baseline; justify-content: space-between; }
.category-banner {
    width: 100%;
    max-height: 160px;
    object-fit: cover;
    border-radius: var(--radius);
    margin: 8px 0 12px;
    background: #eef2f7;
}
@media (min-width: 600px) {
    .category-banner { max-height: 200px; }
}

/* ----- Option pictures (toppings, sauces, ingredients) -----
   Rendered only for the options the menu has a picture for, so a group is
   often a mix of picture rows and text-only rows. A fixed box keeps the
   checkbox and label columns lined up down the list either way.

   The same 44px is also set as width/height attributes on the tag, so an
   option picture is a thumbnail even on a page that loaded a cached copy of
   this file from before these rules existed. Keep the two in step. */
.option-thumb {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    align-self: center;
    border-radius: 6px;
    /* contain, not cover: a topping is photographed whole on a white field, and
       cropping it to a square cuts the ends off a rasher of bacon. */
    object-fit: contain;
}

/* ----- Pizza topping picker ----- */
.topping-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr;
}
@media (min-width: 600px) {
    .topping-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
    .topping-grid { grid-template-columns: repeat(3, 1fr); }
}
.topping-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.topping-card-selected {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(10,125,84,0.15);
}

/* ----- Pizza base topping picker (whole / left / right circles) ----- */
.pizza-topping-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.pizza-topping-item {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border);
}
.pizza-topping-item:last-child { border-bottom: 0; }
/* Rows are plain white and separated by their rule alone: with a picture on
   most rows, banding the alternates as well made the list busy. */
.pizza-topping-item.selected { background: rgba(10,125,84,0.07); }
.pizza-topping-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.pizza-topping-name {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-weight: 600;
}
/* Whole-only items (Calzone) have no placement to choose, so the row itself is the toggle. Its
   padding moves onto the button so the whole row, edge to edge, takes the tap. */
.pizza-topping-item.whole-only { padding: 0; }
.pizza-topping-item.whole-only.selected { box-shadow: inset 3px 0 0 var(--color-accent); }
.pizza-topping-toggle {
    width: 100%;
    min-height: var(--tap-min);
    padding: 10px 12px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.pizza-topping-toggle:hover:not(:disabled) { background: rgba(10,125,84,0.04); }
.pizza-topping-toggle:disabled { opacity: .55; cursor: not-allowed; }
/* The list clips its children, so an outline drawn outside the row would be cut off at the edges. */
.pizza-topping-toggle:focus-visible { outline-offset: -3px; }
.pizza-topping-item.whole-only .pizza-attr-row {
    margin-top: 0;
    padding: 0 12px 10px;
}
.pizza-section-toggle {
    display: flex;
    align-items: center;
    /* Left half / whole / right half read as one control, so they sit all but
       touching. The daylight that remains between the shaded shapes is the
       unshaded half of each outer circle, not spacing. */
    gap: 1px;
    flex: 0 0 auto;
}
.pizza-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    /* Darker than the page's border colour on purpose. Only half of each outer
       circle is shaded, and with a near-white outline the unshaded half read as
       a gap between the icons rather than as part of one — which made the three
       look far apart however tightly they were actually packed. */
    border: 1px solid #94a3b8;
    background: #ededed;
    padding: 0;
    cursor: pointer;
    flex: 0 0 auto;
}
.pizza-circle:disabled { opacity: .5; cursor: not-allowed; }
.pizza-circle.whole { background: #bdbdbd; }
.pizza-circle.left  { background: linear-gradient(to right, #bdbdbd 0 50%, #ededed 50% 100%); }
.pizza-circle.right { background: linear-gradient(to right, #ededed 0 50%, #bdbdbd 50% 100%); }
.pizza-circle.whole.selected {
    background: var(--color-accent);
    border-color: var(--color-accent);
}
.pizza-circle.left.selected {
    background: linear-gradient(to right, var(--color-accent) 0 50%, #ededed 50% 100%);
    border-color: var(--color-accent);
}
.pizza-circle.right.selected {
    background: linear-gradient(to right, #ededed 0 50%, var(--color-accent) 50% 100%);
    border-color: var(--color-accent);
}
.pizza-attr-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.pizza-attr-btn {
    padding: 4px 10px;
    min-height: 0;
    font-size: 13px;
}
.pizza-attr-btn.selected { outline: 3px solid var(--color-focus); }

/* ----- Half / Half section watermark (washed-out half moon per half) ----- */
.topping-card.half-left,
.topping-card.half-right {
    position: relative;
    overflow: hidden;
}
.topping-card.half-left::before,
.topping-card.half-right::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    height: 100%;
    aspect-ratio: 1 / 1;            /* circle whose diameter equals the card height */
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(10, 125, 84, 0.10);
    pointer-events: none;
    z-index: 0;
}
/* Keep only the half that points toward this section's side. */
.topping-card.half-left::before { clip-path: inset(0 50% 0 0); }
.topping-card.half-right::before { clip-path: inset(0 0 0 50%); }
/* Keep card content above the watermark. */
.topping-card.half-left > *,
.topping-card.half-right > * {
    position: relative;
    z-index: 1;
}

/* ----- Half / half section panels -----
   Two sections sit side by side once there is room; three or more, and every
   phone, stay stacked. A long topping name must not force the grid wider
   than its track, hence min-width: 0 on the panel. */
.sections-two-col { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 700px) { .sections-two-col { grid-template-columns: 1fr 1fr; } }
.sections-stacked { display: flex; flex-direction: column; gap: 12px; }
.section-panel {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 12px;
    min-width: 0;
    margin: 0;
    background: var(--color-surface);
}
.section-header {
    font-weight: 600;
    padding: 2px 8px;
    background: var(--color-bg);
    border-radius: 4px;
}
.section-preset-slider {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    margin: 8px 0;
}
.section-preset-track {
    display: flex;
    gap: 6px;
    min-width: max-content;
}
.section-preset-item {
    flex: 0 0 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 6px 4px;
    border: 2px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
    min-height: 0;
    cursor: pointer;
}
.section-preset-item.selected {
    border-color: var(--color-accent);
    background: rgba(10, 125, 84, 0.12);
}
.section-preset-item:disabled { opacity: .55; cursor: not-allowed; }
.section-preset-img {
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 6px;
    background: var(--color-bg);
}
.section-preset-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.section-preset-name {
    font-size: 0.8rem;
    line-height: 1.3;
    overflow-wrap: break-word;
    width: 100%;
}
/* The page-level topping grid goes to three columns at 900px, which does not
   fit inside a half-width panel. */
.sections-two-col .section-panel .topping-grid { grid-template-columns: 1fr; }
@media (min-width: 1100px) {
    .sections-two-col .section-panel .topping-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ----- Buttons / forms ----- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--tap-min); padding: 10px 18px;
    border-radius: 999px; border: 0;
    background: var(--color-accent); color: var(--color-accent-fg);
    font: inherit; font-weight: 600; cursor: pointer;
    text-decoration: none;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.secondary {
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}
.btn.danger { background: var(--color-danger); }
.btn.full { width: 100%; }

.input, .select, .textarea {
    width: 100%;
    min-height: var(--tap-min);
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    font: inherit;
    color: var(--color-text);
}
.textarea { min-height: 80px; }
label { display: block; font-weight: 600; margin: 12px 0 4px; }
.form-grid {
    display: grid; gap: 12px;
    grid-template-columns: 1fr;
}
@media (min-width: 600px) {
    .form-grid.two { grid-template-columns: 1fr 1fr; }
}

.help-text { color: var(--color-text-muted); font-size: 13px; }
.error-text { color: var(--color-danger); font-weight: 600; }
.store-closed-notice {
    margin: 8px 0 4px;
    padding: 10px 14px;
    border-radius: 8px;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    color: #92400e;
    font-weight: 600;
}

/* ----- Cart / checkout ----- */
.cart-line {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
}
.cart-line:last-of-type { border-bottom: 0; }

/* A combo reads as one block: the header carries the name and the price, the children sit under it
   without prices, because the money is stored on the children and only displayed on the parent. */
.cart-line.combo-parent { border-bottom: 0; padding-bottom: 4px; font-weight: 600; }
.cart-line.combo-child {
    border-bottom: 0;
    padding: 2px 0 2px 20px;
    border-left: 3px solid var(--color-border);
    margin-left: 4px;
    font-size: 14px;
}
.cart-line.combo-child:not(:has(+ .cart-line.combo-child)) {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
}
.combo-savings { color: #0a7d54; font-weight: 700; font-size: 14px; margin-left: 8px; }

/* ----- Combo builder ----- */
.combo-rail {
    list-style: none;
    margin: 16px 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.combo-rail-button {
    display: flex; align-items: center; gap: 8px;
    font: inherit; text-align: left; cursor: pointer;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 8px 12px;
}
.combo-rail-button:disabled { cursor: default; opacity: 0.55; }
.combo-rail-index {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; flex: 0 0 24px;
    border-radius: 50%;
    background: var(--color-border);
    font-size: 13px; font-weight: 700;
}
.combo-rail-step.current .combo-rail-button { outline: 3px solid var(--color-focus); }
.combo-rail-step.done .combo-rail-index { background: #0a7d54; color: #fff; }
.cart-totals { padding-top: 12px; border-top: 1px solid var(--color-border); }
.cart-totals .total-row { display: flex; justify-content: space-between; padding: 4px 0; }
.cart-totals .total-row.grand { font-weight: 700; font-size: 18px; padding-top: 8px; border-top: 1px dashed var(--color-border); margin-top: 8px; }
.fee-help-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 6px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    vertical-align: middle;
}
/* Visually small, but the hit area still meets the 44px tap minimum. */
.fee-help-toggle::before { content: ""; position: absolute; width: var(--tap-min); height: var(--tap-min); }
.fee-help-text { margin: 0 0 6px; }

/* ----- Timeline ----- */
.timeline { list-style: none; padding: 0; margin: 16px 0; }
.timeline li {
    position: relative;
    padding: 12px 12px 12px 36px;
    border-left: 3px solid var(--color-border);
    margin-left: 8px;
}
.timeline li::before {
    content: ""; position: absolute; left: -8px; top: 16px;
    width: 14px; height: 14px; border-radius: 999px;
    background: var(--color-border);
}
.timeline li.done::before { background: var(--color-accent); }
.timeline li.current { border-left-color: var(--color-accent); }
.timeline li.current::before {
    background: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(10, 125, 84, .25);
}
.timeline-status { font-weight: 600; }
.timeline-time { color: var(--color-text-muted); font-size: 13px; }

/* ----- Iframe checkout ----- */
.payment-frame {
    width: 100%;
    min-height: 600px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

/* ----- Utility ----- */
.muted { color: var(--color-text-muted); }
.stack > * + * { margin-top: 12px; }
.stack-sm > * + * { margin-top: 6px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ----- Tip selector (matches POS/kiosk pattern) ----- */
.tip-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.tip-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 12px;
}
.tip-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 72px;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: #f3f4f6;
    color: var(--color-text);
    cursor: pointer;
    text-align: center;
    font: inherit;
    transition: background .12s ease, border-color .12s ease;
}
.tip-btn:hover { background: #e9eefb; border-color: var(--color-focus); }
.tip-btn-selected { outline: 3px solid var(--color-focus); border-color: var(--color-focus); background: #eaf0fe; }
.tip-btn-label { font-size: 1.35rem; font-weight: 800; line-height: 1.1; color: var(--color-focus); }
.tip-btn-sub { font-size: 0.9rem; color: var(--color-text-muted); }
.tip-btn-none .tip-btn-label,
.tip-btn-custom .tip-btn-label { color: var(--color-text); }
@media (max-width: 520px) {
    .tip-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ----- Custom-tip numpad modal (iOS keypad styling, like the kiosk) ----- */
.tip-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.55);
}
.tip-modal {
    width: 100%;
    max-width: 360px;
    background: var(--color-surface);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
}
.tip-modal-title {
    font-size: 1.4rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 12px;
}
.tip-pad-display {
    font-size: 2.2rem;
    font-weight: 800;
    text-align: center;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: #f8fafc;
}
.tip-pad-total {
    text-align: center;
    color: var(--color-text-muted);
    margin: 8px 0 14px;
}
.tip-pad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 10px;
    border-radius: 10px;
    background: #d2d5db;
}
.tip-pad-btn {
    font-size: 1.7rem;
    font-weight: 400;
    min-height: 64px;
    border: none;
    border-radius: 8px;
    background: #ffffff;
    color: #1c1c1e;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
    transition: background .08s ease, transform .05s ease;
}
.tip-pad-btn:active { background: #e6e7ea; transform: scale(0.97); }
.tip-pad-fn {
    background: #c5c9d1;
    box-shadow: none;
}
.tip-pad-fn:active { background: #b6bac3; }
.tip-modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 16px;
}

/* ----- Payment panel (human check, then the card iframe) ----- */
.payment-panel {
    max-width: 560px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}
.payment-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.payment-panel-header .tip-modal-title { text-align: left; margin-bottom: 8px; }
.payment-panel-header .tip-modal-title:focus { outline: none; }
.payment-panel-close {
    min-width: var(--tap-min);
    min-height: var(--tap-min);
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}
.payment-panel .payment-frame { min-height: 520px; }

/* ----- Human check slider ----- */
.human-check { margin: 12px 0 4px; }
.human-check-help { margin: 0 0 10px; }
.human-check-track {
    position: relative;
    height: 56px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
    user-select: none;
    touch-action: none;
}
.human-check-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 28px;
    background: color-mix(in srgb, var(--color-accent) 25%, transparent);
}
.human-check-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-weight: 600;
    pointer-events: none;
}
.human-check-target {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 48px;
    height: 48px;
    border: 2px dashed var(--color-text-muted);
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 20px;
    cursor: pointer;
}
.human-check-handle {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-accent-fg);
    font-size: 22px;
    font-weight: 700;
    cursor: grab;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .25);
}
.human-check-handle:active { cursor: grabbing; }
.human-check-handle:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.human-check-returning .human-check-handle,
.human-check-returning .human-check-fill { transition: transform .2s ease, width .2s ease; }
.human-check-done .human-check-track { background: color-mix(in srgb, var(--color-accent) 25%, #ffffff); }
.human-check-done .human-check-handle { cursor: default; }
.human-check-done .human-check-target { visibility: hidden; }
.human-check-status { min-height: 1.5em; margin: 8px 0 0; font-weight: 600; }
/* Honeypot: off-screen rather than display:none, which form fillers learn to skip. */
.human-check-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.order-placed { padding: 8px 0; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; animation: none !important; }
}

/* ===== Driver portal (mobile-first) ===== */
.driver-portal {
    max-width: 720px;
    margin: 0 auto;
    padding: 12px 12px 96px;
}
.driver-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.driver-header h1 { font-size: 1.4rem; margin: 0; }
.driver-eta {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 8px 14px;
    text-align: right;
    box-shadow: var(--shadow-card);
}
.driver-eta .eta-label { display: block; font-size: .75rem; color: var(--color-text-muted); }
.driver-eta .eta-value { font-weight: 700; }

.driver-start {
    display: block;
    width: 100%;
    min-height: 72px;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: .02em;
    color: #fff;
    background: #15a35b;
    border: none;
    border-radius: var(--radius);
    box-shadow: 0 4px 0 #0c7a42, var(--shadow-card);
    cursor: pointer;
    margin: 8px 0 6px;
}
.driver-start:active { transform: translateY(2px); box-shadow: 0 2px 0 #0c7a42; }
.driver-start:disabled { opacity: .7; cursor: default; }
.driver-start-hint { text-align: center; margin: 0 0 12px; }

/* Primary action row holds the big green button plus the Pause/Resume button. */
.driver-actions { display: flex; gap: 10px; align-items: stretch; margin: 8px 0 6px; }
.driver-actions .driver-start { margin: 0; flex: 1 1 auto; }

.driver-pause, .driver-resume {
    flex: 0 0 auto;
    min-height: 72px;
    padding: 0 22px;
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
}
.driver-pause { background: #d97706; box-shadow: 0 4px 0 #9a5a05, var(--shadow-card); }
.driver-pause:active { transform: translateY(2px); box-shadow: 0 2px 0 #9a5a05; }
/* When the run is active the Pause button is the only control, so let it fill. */
.driver-actions .driver-pause, .driver-actions .driver-resume { flex: 1 1 auto; }
.driver-resume { background: #15a35b; box-shadow: 0 4px 0 #0c7a42, var(--shadow-card); }
.driver-resume:active { transform: translateY(2px); box-shadow: 0 2px 0 #0c7a42; }
.driver-pause:disabled, .driver-resume:disabled { opacity: .7; cursor: default; }

.driver-paused {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-left: 5px solid #d97706;
    border-radius: var(--radius);
    padding: 12px 14px;
    margin: 0 0 12px;
}
.driver-paused strong { color: #b45309; font-size: 1.05rem; }

.driver-returning {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-left: 5px solid #1565c0;
    border-radius: var(--radius);
    padding: 12px 14px;
    margin: 0 0 12px;
}
.driver-returning strong { color: #1565c0; font-size: 1.05rem; }

.driver-done, .driver-error {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 18px;
    text-align: center;
    margin: 12px 0;
}

/* Per-stop tip prompt, shown right after Delivered. */
.tip-prompt-backdrop {
    position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 1000;
    display: flex; align-items: flex-end; justify-content: center; padding: 12px;
}
@media (min-width: 600px) { .tip-prompt-backdrop { align-items: center; } }
.tip-prompt {
    width: 100%; max-width: 440px; background: var(--color-surface, #fff); color: var(--color-text, #111);
    border-radius: var(--radius, 12px); padding: 18px 18px 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
}
.tip-prompt h3 { margin: 0 0 4px; font-size: 1.15rem; }
.tip-prompt-sub { margin: 0 0 12px; font-size: .95rem; }
.tip-prompt-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tip-prompt-row label { flex: 1 1 auto; font-weight: 600; }
.tip-prompt-currency { font-size: 1.3rem; font-weight: 600; }
.tip-prompt-row input {
    flex: 0 0 140px; min-width: 0; font-size: 1.4rem; padding: 10px 12px; text-align: right;
    border: 1px solid var(--color-border, #d1d5db); border-radius: var(--radius, 10px);
}
.tip-prompt-error { margin: 6px 0 0; color: #b91c1c; }
.tip-prompt-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; }
.tip-prompt-skip, .tip-prompt-save {
    min-height: 48px; min-width: 110px; padding: 12px 18px; font-size: 1rem; font-weight: 600;
    border-radius: var(--radius, 10px); cursor: pointer;
}
.tip-prompt-skip { color: var(--color-text, #111); background: transparent; border: 1px solid var(--color-border, #d1d5db); }
.tip-prompt-save { color: #fff; background: #2563eb; border: none; }
.tip-prompt-skip:disabled, .tip-prompt-save:disabled { opacity: .6; cursor: default; }

.stop-tips { display: block; font-size: .85rem; color: #166534; margin-top: 2px; }
.stop-tips-edit {
    margin-left: 8px; padding: 2px 10px; font-size: .8rem; font-weight: 600;
    color: #2563eb; background: transparent; border: 1px solid #2563eb; border-radius: 12px; cursor: pointer;
}
.stop-cod {
    margin: 10px 0 0; padding: 10px 12px; border-radius: var(--radius, 10px);
    background: #fef3c7; color: #78350f; border: 1px solid #f59e0b;
}

.driver-stops { list-style: none; margin: 8px 0 0; padding: 0; }
.driver-stops.locked { opacity: .5; pointer-events: none; filter: grayscale(.4); }

.driver-stop {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: 10px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
.driver-stop.active { border-color: var(--color-accent); border-width: 2px; }
.driver-stop.delivered { opacity: .6; }

.stop-summary { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.stop-num {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--color-accent); color: #fff; font-weight: 700;
}
.driver-stop.delivered .stop-num { background: #64748b; }
.stop-head { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.stop-name { font-weight: 700; }
.stop-addr { color: var(--color-text-muted); font-size: .9rem; }
.stop-reorder { display: flex; flex-direction: column; gap: 2px; }
.reorder-btn {
    min-width: 36px; min-height: 28px;
    border: 1px solid var(--color-border); background: #fff;
    border-radius: 6px; cursor: pointer;
}

.stop-detail { padding: 0 14px 14px; border-top: 1px solid var(--color-border); }
.driver-map {
    width: 100%; height: 260px;
    border-radius: 10px; margin: 12px 0;
    background: #e9eef3;
}
.driver-steps-wrap { max-height: 160px; overflow-y: auto; margin-bottom: 10px; }
.driver-steps { margin: 0; padding-left: 18px; }
.driver-steps li { margin-bottom: 6px; font-size: .92rem; }
.driver-steps .step-dist { display: block; color: var(--color-text-muted); font-size: .8rem; }

.stop-facts, .stop-totals { margin: 8px 0; }
.stop-facts div, .stop-totals div { display: flex; justify-content: space-between; padding: 2px 0; }
.stop-facts dt, .stop-totals dt { color: var(--color-text-muted); margin: 0; }
.stop-facts dd, .stop-totals dd { margin: 0; font-weight: 600; }
.stop-totals .grand { border-top: 1px solid var(--color-border); margin-top: 4px; padding-top: 6px; font-size: 1.05rem; }

.items-h { font-size: 1rem; margin: 10px 0 4px; }
.stop-items { list-style: none; margin: 0; padding: 0; }
.stop-items > li { padding: 6px 0; border-bottom: 1px dashed var(--color-border); }
.item-line { display: flex; gap: 8px; }
.item-qty { font-weight: 700; }
.item-name { flex: 1 1 auto; }
.item-price { font-weight: 600; }
.item-mods { color: var(--color-text-muted); font-size: .85rem; padding-left: 4px; }
.item-note { color: var(--color-danger); font-size: .85rem; padding-left: 4px; }
.order-note { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; padding: 8px 10px; }

.driver-delivered {
    display: block; width: 100%;
    min-height: 56px; margin-top: 12px;
    font-size: 1.15rem; font-weight: 700;
    color: #fff; background: var(--color-accent);
    border: none; border-radius: var(--radius); cursor: pointer;
}
.driver-delivered:disabled { opacity: .7; cursor: default; }

/* Per-transmission location log shown at the bottom of the driver page. */
.driver-log {
    margin-top: 20px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}
.driver-log-h { font-size: 1rem; margin: 0 0 8px; }
.driver-log-list { list-style: none; margin: 0; padding: 0; }
.driver-log-item {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: .9rem;
    border: 1px solid var(--color-border);
    margin-bottom: 6px;
    background: var(--color-surface);
}
.driver-log-item .log-time { color: var(--color-text-muted); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.driver-log-item .log-msg { flex: 1 1 auto; }
.driver-log-item.ok { color: #0c7a42; }
.driver-log-item.ok .log-time { color: #0c7a42; }
.driver-log-item.failed {
    color: #c62828;
    background: #fdecea;
    border-color: #f5c6cb;
    font-weight: 600;
}
.driver-log-item.failed .log-time { color: #c62828; }

/* ----- Save-payment opt-in toggle (checkout) ----- */
.save-card-toggle {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    margin-top: 8px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    cursor: pointer;
}
.save-card-toggle .switch {
    position: relative;
    flex: 0 0 auto;
    width: 52px;
    height: 30px;
    margin-top: 2px;
}
.save-card-toggle .switch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}
.save-card-toggle .track {
    position: absolute;
    inset: 0;
    background: #cbd5e1;
    border-radius: 999px;
    transition: background .15s ease;
}
.save-card-toggle .track::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .35);
    transition: transform .15s ease;
}
.save-card-toggle .switch input:checked + .track { background: var(--color-accent); }
.save-card-toggle .switch input:checked + .track::before { transform: translateX(22px); }
.save-card-toggle .switch input:focus-visible + .track {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}
.save-card-toggle .switch-label { font-weight: 600; }
.save-card-toggle .switch-help { color: var(--color-text-muted); font-size: .88rem; margin: 2px 0 0; }

/* ----- Order type and time (asked before ordering) ----- */
.ctx-bar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
    margin: 8px 0 16px;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}
.ctx-bar-text { flex: 1 1 220px; }
.ctx-bar-btn { min-height: 36px; padding: 6px 14px; }
.ctx-overlay {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.55);
}
.ctx-dialog {
    width: 100%; max-width: 560px;
    max-height: calc(100vh - 32px); overflow-y: auto;
    background: var(--color-surface);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
}
.ctx-dialog:focus { outline: none; }
.ctx-title { margin: 0 0 12px; font-size: 1.3rem; }
.ctx-fieldset { border: 0; padding: 0; margin: 0 0 16px; }
.ctx-fieldset legend { font-weight: 700; margin-bottom: 8px; }
.ctx-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ctx-type {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    padding: 12px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.ctx-type.selected { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent) inset; }
.ctx-type:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.ctx-type-name { font-weight: 700; font-size: 1.05rem; }
.ctx-type-time, .ctx-type-asap { font-size: 13px; color: var(--color-text-muted); }
.ctx-when { display: flex; flex-direction: column; gap: 6px; }
.ctx-when-option { display: flex; align-items: center; gap: 8px; font-weight: 500; margin: 0; }
.ctx-conflicts { margin: 8px 0 12px; padding-left: 20px; }
.ctx-actions { justify-content: flex-end; margin-top: 8px; }