/* ============================================================
 * Customer ordering page styles. Loaded by /order.php after site.css.
 *
 * 4-step flow rendered as <ol.order-steps>. Each step is a card with
 * a numbered head + a body. data-state on the <li> drives display:
 *   - locked: muted, body hidden
 *   - active: full UI
 *   - done:   collapsed to a summary line
 * ============================================================ */


.section--order { background: var(--c-cream); }

.muted { color: var(--c-brown-muted); }


/* ============================================================
 * Steps
 * ============================================================ */

.order-steps {
    list-style: none;
    padding: 0;
    margin: var(--s-7) 0 0;
    display: grid;
    gap: var(--s-5);
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

.order-step {
    background: var(--c-cream-soft);
    border: 1px solid rgba(58, 44, 29, 0.08);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: opacity var(--transition-fast);
}

.order-step[data-state="locked"] { opacity: 0.45; }
.order-step[data-state="locked"] .order-step__body { display: none; }

.order-step[data-state="done"] .order-step__body { display: none; }

.order-step__head {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-5) var(--s-6);
    background: var(--c-cream);
    border-bottom: 1px solid rgba(58, 44, 29, 0.08);
    transition: background var(--transition-fast);
}
/* Any step that's been started or completed is clickable to re-enter. */
.order-step[data-state="done"]   .order-step__head,
.order-step[data-state="active"] .order-step__head { cursor: pointer; }
.order-step[data-state="done"]   .order-step__head:hover { background: var(--c-cream-soft); }
.order-step[data-state="locked"] .order-step__head { cursor: not-allowed; }

.order-step__num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--c-tan);
    color: var(--c-white);
    font-weight: 700;
    font-family: var(--font-display);
}

.order-step__title {
    margin: 0;
    font-size: 1.25rem;
    flex: 1 1 auto;
}

.order-step__summary {
    color: var(--c-brown-muted);
    font-size: 0.95rem;
}

.order-step__body {
    padding: var(--s-6);
}

.order-step__hint {
    color: var(--c-brown-muted);
    margin: 0 0 var(--s-5);
}


/* ============================================================
 * Step 1: date cards
 * ============================================================ */

.date-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--s-4);
}

.date-card {
    background: var(--c-cream);
    border: 1px solid rgba(58, 44, 29, 0.12);
    border-radius: var(--radius-md);
    padding: var(--s-5);
    cursor: pointer;
    text-align: left;
    display: grid;
    gap: var(--s-1);
    transition: border-color var(--transition-fast), transform var(--transition-fast);
    font: inherit;
    color: inherit;
}
.date-card:hover {
    border-color: var(--c-tan);
    transform: translateY(-1px);
}

.date-card__day {
    color: var(--c-brown-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}
.date-card__date {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--c-brown-deep);
    line-height: 1.1;
}
.date-card__location {
    color: var(--c-green);
    font-weight: 600;
    margin-top: var(--s-2);
}
.date-card__time {
    color: var(--c-brown-muted);
    font-size: 0.9rem;
}


/* ============================================================
 * Step 2: menu + basket — side by side on wide, stacked on mobile
 * ============================================================ */

.order-step[data-step="menu"] .order-step__body {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--s-6);
    align-items: start;
}

@media (max-width: 860px) {
    .order-step[data-step="menu"] .order-step__body {
        grid-template-columns: 1fr;
    }
}

.menu { margin-top: 0; }

.menu-category + .menu-category { margin-top: var(--s-7); }

.menu-category__title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--c-brown-deep);
    text-align: left;
    margin: 0 0 var(--s-5);
    padding-bottom: var(--s-3);
    border-bottom: 1px solid rgba(58, 44, 29, 0.12);
}

.menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--s-5);
}

/* The whole card is clickable (handler attached in ordering.js). The Add
   button remains as a visible affordance, but tapping anywhere on the row
   triggers the same action (open attr-picker for pizzas, add to basket
   immediately for everything else). */
.menu-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    column-gap: var(--s-4);
    row-gap: var(--s-2);
    align-items: center;
    cursor: pointer;
    padding: var(--s-3);
    margin: 0 calc(var(--s-3) * -1);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}
.menu-item:hover { background: var(--c-cream-soft); }
/* When the inline attr-picker is open the card is no longer clickable
   (the picker has its own Cancel/Add to basket controls). */
.menu-item:has(.attr-picker[data-open="1"]) { cursor: default; }
.menu-item:has(.attr-picker[data-open="1"]):hover { background: transparent; }

.menu-item__body { min-width: 0; }

.menu-item__name {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--c-brown-deep);
    margin: 0 0 var(--s-1);
    font-weight: 700;
}
.menu-item__description {
    margin: 0;
    color: var(--c-brown-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}
.menu-item__price {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--c-green);
    white-space: nowrap;
}
.menu-item__add {
    padding: var(--s-2) var(--s-4) !important;
    font-size: 0.85rem !important;
}
/* Brief 3-second "Added" state after a successful add. Green so the
   colour difference is the first thing the eye catches alongside the
   text change. Reverts to default secondary styling on timer expiry. */
.menu-item__add--added {
    background: var(--c-green) !important;
    color: var(--c-white) !important;
}

/* Brief inline confirmation under the product row after addToBasket()
   succeeds. Full-width band so it's visible whether the customer's eye
   was on the card body or the Add button. */
.menu-item__added {
    grid-column: 1 / -1;
    margin-top: var(--s-2);
    padding: var(--s-2) var(--s-3);
    background: var(--c-green);
    color: var(--c-white);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
}


/* ============================================================
 * Inline attribute picker (cheese / extras / oils)
 * Opens beneath a pizza menu-item when Add is clicked.
 * ============================================================ */

.attr-picker {
    grid-column: 1 / -1;
    margin-top: var(--s-4);
    padding: var(--s-5);
    background: var(--c-cream-soft);
    border: 1px solid rgba(58, 44, 29, 0.15);
    border-radius: var(--radius-md);
}
.attr-picker__inner {
    display: grid;
    gap: var(--s-5);
}

.attr-group {
    border: 0;
    margin: 0;
    padding: 0;
}
.attr-group__legend {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--c-brown-deep);
    margin-bottom: var(--s-3);
    padding: 0;
}
.attr-group__items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--s-2);
}

.attr-check {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    background: var(--c-cream);
    border: 1px solid rgba(58, 44, 29, 0.12);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.9rem;
    transition: border-color var(--transition-fast);
}
.attr-check:hover { border-color: var(--c-tan); }
.attr-check input[type="checkbox"] { margin: 0; cursor: pointer; }
.attr-check__label { flex: 1 1 auto; color: var(--c-brown-deep); }
.attr-check__price { color: var(--c-green); font-weight: 700; font-size: 0.85rem; }

.attr-picker__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--s-3);
    border-top: 1px solid rgba(58, 44, 29, 0.12);
    padding-top: var(--s-4);
}


/* ============================================================
 * Basket option-label sub-line
 * ============================================================ */

.basket-item__options {
    display: block;
    margin-top: var(--s-1);
    color: var(--c-brown-muted);
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.3;
}
.basket-item__option {
    display: block;  /* one option per line */
}


/* ============================================================
 * Basket
 * ============================================================ */

.basket {
    position: sticky;
    top: calc(var(--header-h) + var(--s-4));
    background: var(--c-cream);
    border: 1px solid rgba(58, 44, 29, 0.12);
    border-radius: var(--radius-md);
    padding: var(--s-5);
}

.basket__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 var(--s-4);
}
.basket__title {
    margin: 0;
    font-size: 1.1rem;
}
/* Close button only appears in drawer mode (<860px). Hidden above. */
.basket__close {
    display: none;
    background: transparent;
    border: 0;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--c-brown-muted);
    cursor: pointer;
    padding: 0 var(--s-2);
}
.basket__close:hover { color: var(--c-brown-deep); }

.basket-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--s-4);
    display: grid;
    gap: var(--s-3);
}

/* Two-column grid: label on left, fixed-width right column stacks the qty
   controls above the price. Right column has a fixed width and both elements
   stretch to fill it (qty controls flex-end, price text-align right) so the
   right edges align cleanly down every row. */
.basket-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7rem;
    grid-template-rows: auto auto;
    column-gap: var(--s-3);
    row-gap: var(--s-2);
    align-items: center;
    font-size: 0.95rem;
}
.basket-item__label {
    grid-column: 1;
    grid-row: 1 / 3;
    font-weight: 600;
    color: var(--c-brown-deep);
    min-width: 0;
    align-self: center;
}
.basket-item__qty-controls {
    grid-column: 2;
    grid-row: 1;
    justify-self: stretch;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--s-1);
}
.basket-item__price {
    grid-column: 2;
    grid-row: 2;
    justify-self: stretch;
    text-align: right;
    color: var(--c-green);
    font-weight: 700;
}
.basket-item__btn {
    width: 1.5rem; height: 1.5rem;
    border-radius: 50%;
    background: var(--c-cream-soft);
    border: 1px solid rgba(58, 44, 29, 0.15);
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
}
.basket-item__btn:hover { border-color: var(--c-tan); }
.basket-item__qty { min-width: 1.25rem; text-align: center; font-weight: 700; }

.basket__empty {
    text-align: center;
    color: var(--c-brown-muted);
    font-size: 0.9rem;
    margin: 0 0 var(--s-4);
}

.basket[data-state="has-items"] .basket__empty { display: none; }

.basket__notes {
    margin: 0 0 var(--s-4);
}
.basket__notes-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--c-brown-deep);
    margin-bottom: var(--s-1);
}
.basket__notes-label small {
    font-weight: 400;
    color: var(--c-brown-muted);
}
.basket__notes textarea {
    width: 100%;
    box-sizing: border-box;
    padding: var(--s-2) var(--s-3);
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.4;
    border: 1px solid rgba(58, 44, 29, 0.2);
    border-radius: var(--radius-md);
    background: var(--c-white);
    color: var(--c-brown-deep);
    resize: vertical;
}
.basket__notes textarea:focus {
    outline: none;
    border-color: var(--c-tan);
    box-shadow: 0 0 0 3px rgba(184, 142, 92, 0.15);
}

/* Promo code input — same styling as the notes textarea so the basket
   feels cohesive. Apply button is brand-secondary green for contrast.
   When a code is applied, the input + Apply hide and the "applied" pill
   takes over until the customer removes it with the × button. */
.basket__promo { margin: 0 0 var(--s-4); }
.basket__promo-row {
    display: flex;
    gap: var(--s-2);
    align-items: stretch;
}

/* Favourites Quick-add row at the top of the basket. Only renders
   server-side when the customer is signed in AND has saved favourites. */
.basket__favourites-quickadd {
    padding: var(--s-3) var(--s-4) 0;
}
.basket__favourites-row {
    display: flex;
    gap: var(--s-2);
    align-items: stretch;
    margin-top: var(--s-2);
}
.basket__favourites-row select {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--s-2) var(--s-3);
    font-family: inherit;
    font-size: 0.9rem;
    border: 1px solid rgba(58, 44, 29, 0.2);
    border-radius: var(--radius-md);
    background: var(--c-white);
    color: var(--c-brown-deep);
}
.basket__favourites-row .btn {
    flex: 0 0 auto;
    padding: var(--s-2) var(--s-4) !important;
}
.basket__promo-row input {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--s-2) var(--s-3);
    font-family: inherit;
    font-size: 0.9rem;
    border: 1px solid rgba(58, 44, 29, 0.2);
    border-radius: var(--radius-md);
    background: var(--c-white);
    color: var(--c-brown-deep);
    text-transform: uppercase;
}
.basket__promo-row input:focus {
    outline: none;
    border-color: var(--c-tan);
    box-shadow: 0 0 0 3px rgba(184, 142, 92, 0.15);
}
.basket__promo-row .btn {
    flex: 0 0 auto;
    padding: var(--s-2) var(--s-4) !important;
    font-size: 0.85rem !important;
}
.basket__promo-error {
    margin-top: var(--s-2);
    padding: var(--s-2) var(--s-3);
    background: #fce8e6;
    color: #a32018;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
}
/* :not([hidden]) so the explicit display doesn't override the
   hidden HTML attribute on initial render or after removing the code. */
.basket__promo-applied:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    background: #e8f5e9;
    color: #1b5e20;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
}
.basket__promo-applied button {
    background: transparent;
    border: 0;
    color: #1b5e20;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 var(--s-1);
}
.basket__promo-applied button:hover { color: #a32018; }

/* Subtotal + Discount rows above the Total. Only visible when a discount
   is applied — basket footer shows just "Total" otherwise. `:not([hidden])`
   scope so the explicit display doesn't override the hidden HTML attribute. */
.basket__subtotal:not([hidden]),
.basket__discount:not([hidden]) {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.9rem;
    color: var(--c-brown-muted);
    padding-bottom: var(--s-1);
}
.basket__discount:not([hidden]) {
    color: #a32018;
    margin-bottom: var(--s-2);
    padding-bottom: var(--s-3);
    border-bottom: 1px solid rgba(58, 44, 29, 0.12);
}

/* ============================================================
 * Basket drawer (mobile/tablet, <860px)
 * Same DOM node as the inline basket. Toggling position from sticky to
 * fixed via media query avoids any DOM-moving JS — single source of truth.
 * ============================================================ */

/* Drawer + backdrop both start below the sticky header (--header-h = 70px,
   site-header has z-index: 100) so the header — including the cart toggle
   button — stays visible and clickable while the drawer is open. */
.basket-backdrop {
    display: none;
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(58, 44, 29, 0.45);
    z-index: 60;
}
.basket-backdrop[data-open="true"] { display: block; }

@media (max-width: 860px) {
    .basket {
        position: fixed;
        top: var(--header-h);
        right: 0;
        bottom: 0;
        width: min(90vw, 360px);
        border-radius: 0;
        border: 0;
        border-left: 1px solid rgba(58, 44, 29, 0.12);
        box-shadow: -8px 0 24px rgba(58, 44, 29, 0.18);
        overflow-y: auto;
        z-index: 70;
        transform: translateX(100%);
        transition: transform 0.25s ease;
    }
    .basket[data-open="true"] { transform: translateX(0); }
    .basket__close { display: inline-flex; align-items: center; justify-content: center; }
}

/* Continue button: full-width inside the basket footer with centered text,
   so a short label (just "Continue") still looks deliberate rather than
   stranded on the left of the grid cell. */
#basket-continue {
    width: 100%;
    justify-content: center;
}

.basket__footer {
    border-top: 1px solid rgba(58, 44, 29, 0.12);
    padding-top: var(--s-4);
    display: grid;
    gap: var(--s-3);
}
.basket__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--c-brown-deep);
}
.basket__total strong { color: var(--c-green); }


/* ============================================================
 * Step 3: timeslots
 * ============================================================ */

.timeslot-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--s-3);
}

.timeslot {
    background: var(--c-cream);
    border: 1px solid rgba(58, 44, 29, 0.12);
    border-radius: var(--radius-md);
    padding: var(--s-4);
    cursor: pointer;
    display: grid;
    gap: var(--s-1);
    font: inherit;
    text-align: center;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.timeslot:hover { border-color: var(--c-tan); }
.timeslot[aria-pressed="true"] {
    background: var(--c-green);
    color: var(--c-white);
    border-color: var(--c-green);
}
.timeslot[aria-pressed="true"] .timeslot__free { color: rgba(255,255,255,0.85); }
.timeslot__time {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
}
.timeslot__free {
    color: var(--c-brown-muted);
    font-size: 0.85rem;
}


/* ============================================================
 * Step 4: checkout error
 * ============================================================ */

.checkout-error {
    background: #fde7e3;
    color: #6e1c10;
    border: 1px solid #d8a499;
    padding: var(--s-3) var(--s-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--s-4);
    font-size: 0.95rem;
}

.checkout-form { max-width: 600px; }


/* ============================================================
 * Payment page (Stripe Elements)
 * ============================================================ */

.payment-form {
    max-width: 540px;
    margin: var(--s-6) auto 0;
    display: grid;
    gap: var(--s-5);
}
.payment-form #payment-element { min-height: 250px; }
.payment-form button[type="submit"] {
    width: 100%;
    justify-content: center;
}
.payment-form button[disabled] {
    opacity: 0.7;
    cursor: progress;
}