@import url("/assets/css/base.css");

:root { --header-h: 64px; --nav-h: 52px; }
/* The header is position:fixed, with body padding reserving its space.
   position:sticky flickered/vanished on iOS Safari during fast scrolls; a fixed bar of known
   height needs no JS positioning and is handled entirely by the compositor. */
.customer-sticky {
    position: fixed; top: 0; left: 0; right: 0; z-index: 10;
    background: var(--color-surface);
}
body { padding-top: var(--header-h); }
.customer-header {
    display: flex; justify-content: space-between; align-items: center;
    height: var(--header-h); padding: 0 var(--space-3); overflow: hidden;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}
.customer-header__brand { font-weight: 700; text-decoration: none; color: var(--color-text); font-size: 1.25rem; letter-spacing: 0; }
.customer-header__logo { display: block; max-height: 40px; max-width: 55vw; width: auto; height: auto; object-fit: contain; }
.customer-header__meta.has-table .customer-header__logo { max-height: 32px; margin-bottom: 2px; } /* leave room for the "Table N" line under the logo */
.customer-header__meta { display: flex; flex-direction: column; line-height: 1.3; }
.customer-header__meta .customer-header__table { font-size: 0.78rem; font-weight: 500; color: var(--color-muted); }

.cart-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: var(--color-soft); color: var(--color-text); text-decoration: none; }
.cart-icon__badge {
    position: absolute; top: -4px; right: -4px;
    background: var(--color-primary); color: var(--color-on-primary);
    border-radius: 999px; font-size: 0.7rem; font-weight: 700;
    min-width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;
    padding: 0 4px;
}

.customer-main { max-width: 640px; margin: 0 auto; padding: var(--space-3); padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px)); }

.back-link { display: inline-block; margin-bottom: var(--space-3); color: var(--color-text); text-decoration: none; font-weight: 600; }

.menu-category h2 { margin-top: var(--space-5); font-size: 1.5rem; }

.menu-item {
    display: flex; gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
    text-decoration: none; color: inherit;
}
.menu-item__image { width: 96px; height: 96px; border-radius: var(--radius-card); object-fit: cover; background: var(--color-soft); flex-shrink: 0; }
.item-detail__image { display: block; margin: 0 auto; width: auto; height: auto; max-width: 80vw; border-radius: var(--radius-card); background: var(--color-soft); }
.menu-item__body { flex: 1; }
.menu-item__name { font-weight: 700; font-size: 1.05rem; margin: 0 0 4px; }
.menu-item__price { font-weight: 500; color: var(--color-muted); }
.menu-item--unavailable { opacity: 0.55; }

.modifier-group { margin-bottom: var(--space-4); }
.modifier-group h3 { margin-bottom: var(--space-2); font-size: 1.125rem; }
.modifier-group__hint { font-weight: 400; font-size: 0.78rem; color: var(--color-muted); text-transform: none; letter-spacing: normal; }
.modifier-option { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.modifier-option label { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; }
.modifier-option input { width: auto; }
.modifier-option input:disabled + * { color: var(--color-muted); }

.item-description { color: var(--color-muted); margin-top: -4px; }

.qty-field { margin: var(--space-3) 0; }
.qty-field__label { display: block; font-weight: 500; font-size: 0.9rem; margin-bottom: var(--space-1); }
.qty-stepper { display: flex; flex-wrap: nowrap; align-items: center; gap: 0; width: fit-content; border: none; border-radius: var(--radius-pill); overflow: hidden; background: var(--color-soft); }
.qty-stepper form { display: contents; }
.qty-stepper__btn {
    width: 44px; height: 44px; border-radius: 0; font-size: 1.3rem; line-height: 1;
    background: transparent; color: var(--color-text); border: none; padding: 0;
}
.qty-stepper__btn:hover { background: var(--color-border); }
.qty-stepper input {
    width: 56px; text-align: center; border: none; background: transparent;
    border-radius: 0; height: 44px; font-weight: 700;
}

.cart-line { display: flex; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.cart-line__body { flex: 1; min-width: 0; }
/* Photo spans the full row height (name + quantity stepper), stretched by the flex row. */
.cart-line__thumb { flex: 0 0 96px; width: 96px; align-self: stretch; object-fit: cover; border-radius: var(--radius-card); background: var(--color-soft); }
.cart-line__mods { font-size: 0.85rem; color: var(--color-muted); }
.cart-line__note { font-size: 0.85rem; color: var(--color-text); font-style: italic; overflow-wrap: anywhere; }
.cart-line__edit { margin-top: var(--space-2); }
.cart-line__edit summary { cursor: pointer; font-size: 0.85rem; text-decoration: underline; width: fit-content; }
.cart-line__edit-form { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.item-instructions { display: block; margin: var(--space-3) 0; }
.cart-line__actions { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.cart-line__remove { color: var(--color-danger); background: none; border: none; text-decoration: underline; cursor: pointer; padding: 0; font-size: 0.85rem; }
.cart-line .qty-stepper { transform: scale(0.85); transform-origin: left center; }

.summary-row { display: flex; justify-content: space-between; padding: 4px 0; }
.summary-row--total { font-weight: 700; font-size: 1.1rem; border-top: 1px solid var(--color-border); margin-top: 8px; padding-top: 8px; }

.checkout-section {
    margin-bottom: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--space-4);
}
.checkout-section h2 {
    font-size: 1.25rem;
    color: var(--color-text); margin: 0 0 var(--space-3);
    padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border);
}

.sticky-footer {
    /* Action buttons sit inline at the end of the form/page (no longer pinned to the screen bottom).
       The 30px of blank space below them (see .customer-main) keeps a tap on the button clear of
       iOS Safari's bottom-edge gesture zone, which would show the toolbar instead of clicking. */
    margin: var(--space-4) 0 0;
}
.sticky-footer button { width: 100%; padding: 16px 24px; font-size: 1.125rem; }
.sticky-footer--dual { display: flex; flex-direction: column; gap: 20px; }

.confirmation { text-align: center; padding: var(--space-5) 0; }
.confirmation__icon { font-size: 3rem; }

/* ---------- Online card payment (tip + pay screens) ---------- */
.test-mode-banner {
    background: var(--color-soft); color: #000; border: 1px dashed var(--color-muted);
    border-radius: var(--radius-md); padding: var(--space-2) var(--space-3);
    font-weight: 700; text-align: center; margin-bottom: var(--space-3);
}
.pay-back-form { margin-bottom: var(--space-3); }
.button--link {
    background: none; border: none; padding: 0; color: var(--color-text);
    font-weight: 600; cursor: pointer; text-decoration: none; width: auto;
}
.button--link:hover { background: none; text-decoration: underline; }
.tip-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--space-2); }
.tip-option {
    position: relative; /* anchors the visually-hidden radio inside the tile (otherwise it sat at the page edge and caused sideways scrolling) */
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border: 1px solid var(--color-border); border-radius: var(--radius-card);
    padding: var(--space-3) var(--space-2); cursor: pointer; text-align: center; margin: 0;
}
.tip-option input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; margin: 0; }
.tip-option:has(input:checked) { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); background: var(--color-softer); }
.tip-option:has(input:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.tip-option__label { font-weight: 700; }
.tip-option__amount { font-size: 0.85rem; color: var(--color-muted); }
.tip-custom { margin-top: var(--space-3); }
.tip-custom[hidden] { display: none; }
.pay-change-tip { display: inline-block; margin-top: var(--space-2); font-size: 0.9rem; }
.payment-loading, .payment-secure-note { color: var(--color-muted); font-size: 0.85rem; }
.payment-field { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: var(--space-2); min-height: 44px; background: var(--color-soft); }
.payment-field-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-2); }
.simulator-buttons { display: flex; gap: var(--space-3); }
.simulator-buttons button { flex: 1; }
.simulator-buttons .simulator-decline { background: var(--color-danger); }

/* ---------- Pickup vs delivery step ---------- */
.fulfillment-choice {
    display: flex; gap: var(--space-2); align-items: center; font-weight: 400;
    border: 1px solid var(--color-border); border-radius: var(--radius-card);
    padding: var(--space-3); margin-bottom: var(--space-2); cursor: pointer;
}
.fulfillment-choice input { width: auto; }
.fulfillment-choice__note { display: block; font-style: normal; }
.fulfillment-choice:has(input:checked) { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.fulfillment-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.wait-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 1000;
    display: flex; align-items: center; justify-content: center; padding: var(--space-3);
}
.wait-overlay[hidden] { display: none; }
.wait-box {
    background: #fff; border-radius: var(--radius-card); padding: var(--space-4);
    text-align: center; max-width: 320px; width: 100%; box-shadow: var(--shadow-2);
}
.wait-box p { margin: var(--space-3) 0 0; font-weight: 600; }
.wait-spinner {
    width: 36px; height: 36px; margin: 0 auto; border-radius: 50%;
    border: 4px solid var(--color-border); border-top-color: var(--color-primary);
    animation: wait-spin 0.9s linear infinite;
}
@keyframes wait-spin { to { transform: rotate(360deg); } }
.delivery-summary { background: var(--color-softer); border-radius: var(--radius-card); padding: var(--space-3); margin-bottom: var(--space-3); }
.payment-note { color: var(--color-muted); font-size: 0.85rem; margin: 4px 0 0 28px; }

.checkout-change-link { margin: 0 0 var(--space-4); }
.field-required { font-weight: 400; font-size: 0.8rem; color: var(--color-muted); }

.pause-notice { background: var(--color-primary); color: var(--color-on-primary); padding: var(--space-3); text-align: center; font-weight: 500; }
.button--disabled, .button--disabled:hover { background: var(--color-soft); color: var(--color-faint); cursor: not-allowed; pointer-events: none; }

/* ---------- Menu page: restaurant info + sticky category carousel ---------- */
.restaurant-info { text-align: center; margin-bottom: var(--space-3); }
.restaurant-info__logo { display: block; margin: 0 auto var(--space-2); max-width: 70%; max-height: 110px; width: auto; height: auto; object-fit: contain; }
.restaurant-info__line { margin: 2px 0; color: var(--color-muted); }
.restaurant-hours { margin-top: var(--space-2); }
.restaurant-map { display: block; width: 100%; max-width: 640px; height: 260px; margin: var(--space-3) auto 0; border: 0; border-radius: var(--radius-card); background: var(--color-soft); }
.restaurant-hours__today { display: flex; justify-content: center; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.restaurant-hours__toggle { background: var(--color-soft); border: none; color: var(--color-text); padding: 6px 14px; font-size: 0.85rem; border-radius: 999px; }
.restaurant-hours__toggle:hover { background: var(--color-border); }
.restaurant-hours__all { margin: var(--space-2) auto 0; border-collapse: collapse; font-size: 0.9rem; }
.restaurant-hours__all td { padding: 3px 12px; text-align: left; }
.restaurant-hours__all .is-today { font-weight: 700; }

.category-nav {
    margin: 0 calc(-1 * var(--space-3));
    display: flex; align-items: center; gap: var(--space-2); overflow-x: auto; scrollbar-width: none;
    height: var(--nav-h); padding: 0 var(--space-3);
    background: var(--color-bg); border-bottom: 1px solid var(--color-border);
}
.category-nav::-webkit-scrollbar { display: none; }
/* Placeholder keeps the carousel's slot in the page while the bar itself is pinned. */
.category-nav-holder { height: var(--nav-h); }
/* Pinned under the fixed header (class toggled by menu.php's script once scrolled past). */
.category-nav.is-stuck {
    position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 9; margin: 0;
    padding-left: max(var(--space-3), calc((100vw - 640px) / 2 + var(--space-3)));
}
.category-pill {
    flex: 0 0 auto; padding: 8px 16px; border: none; border-radius: 999px;
    color: var(--color-text); background: var(--color-soft); text-decoration: none; font-weight: 500; font-size: 0.875rem; white-space: nowrap;
}
.category-pill.is-active { background: var(--color-primary); color: var(--color-on-primary); }
.menu-category { scroll-margin-top: var(--sticky-offset, 120px); }

/* =====================================================================
   Responsive / desktop layout
   Mobile (default): single column, 640px max. >= 900px: 1200px max container,
   menu = category list (300px) + two-column item grid, checkout = form + order summary.
   ===================================================================== */
.category-sidebar { display: none; }
.menu-items { display: block; }

/* Header content aligns with the 1200px container on wide screens. */
@media (min-width: 900px) {
    .customer-header { padding: 0 max(var(--space-3), calc((100vw - 1200px) / 2 + var(--space-3))); }
}

/* Tablets / small laptops: the single column is simply wider and centred. */
@media (min-width: 700px) {
    .customer-main { max-width: 760px; }
}

@media (min-width: 900px) {
    .customer-main { padding: var(--space-4); padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px)); }
    .customer-main--menu { max-width: 1200px; }
    .customer-main--checkout { max-width: 1100px; }

    /* ---- Menu: [ category list 300px | items ] ---- */
    .category-nav-holder { display: none; }
    .menu-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
    .category-sidebar {
        display: block; position: sticky; top: calc(var(--header-h) + var(--space-3));
    }
    .category-sidebar__inner {
        position: relative; max-height: calc(100vh - var(--header-h) - var(--space-5)); overflow-y: auto;
        background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-2);
    }
    .category-link {
        display: block; padding: 12px 16px; border-radius: 999px; text-decoration: none;
        color: var(--color-text); font-weight: 500;
    }
    .category-link:hover { background: var(--color-soft); }
    .category-link.is-active { background: var(--color-primary); color: var(--color-on-primary); }

    .menu-category:first-child h2 { margin-top: 0; }
    /* Two columns of cards; one column when two cards would each be narrower than 250px. */
    .menu-items {
        display: grid; gap: var(--space-3);
        grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - var(--space-3)) / 2)), 1fr));
    }
    .menu-item {
        border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface);
        padding: var(--space-3); transition: box-shadow .12s;
    }
    .menu-item:hover { box-shadow: var(--shadow-1); }

    /* ---- Checkout: form on the left, order summary on the right ---- */
    .checkout-form { display: grid; grid-template-columns: minmax(0, 1fr) 360px; column-gap: var(--space-4); align-items: start; }
    .checkout-form > section { grid-column: 1; }
    .checkout-form > section:first-of-type {
        grid-column: 2; grid-row: 1 / span 10;
        position: sticky; top: calc(var(--header-h) + var(--space-3));
    }
    .checkout-form > .sticky-footer { grid-column: 1; }
}


.summary-row--total.summary-row--noline { border-top: none; margin-top: 0; padding-top: 0; }

input.field-invalid { border-color: var(--color-danger); box-shadow: 0 0 0 1px var(--color-danger); }

/* Invalid custom tip amount: light red background on top of the red border. */
.tip-custom input.field-invalid { background-color: #fdecea; }