/* =============================================================
   POS REORDER STRIP — [ro2, ro3] styles
   Scoped to the [data-mbpos] isolation invariant (the strip root
   carries the attribute itself, like the ce0 toast). Horizontal
   scroll row on mobile, natural wrap-free cards.

   [ro3, O4] Token pass: every colour/radius now reads the
   Appearance design tokens with the ro2 neutrals as fallbacks —
   an un-themed site renders exactly as ro2 did.
   [ro3, O5] Accent: hover/focus border + the "Order again" title
   tick pick up --mbpos-color-selected (the venue accent), same
   token the nav indicator resolves through.
   [ro3] The strip now mounts at layout level (between menubar
   and category nav), so it carries the grid's side-padding token
   itself instead of inheriting the list's.
   ============================================================= */

.mbpos-reorder-strip[data-mbpos] {
    margin: 10px 0 4px;
    /* hh6a: was flush (padding:0) on the assumption a parent supplied the
       inset — measured 0px on the live page, i.e. nothing does. Same token
       as .mbpos-category__title so the strip's cards start under the same
       first letter as every category heading, at every breakpoint. */
    padding: 0 var(--mbpos-grid-pad-x, calc(20px * var(--mbpos-density, 1)));
}

.mbpos-reorder-strip[data-mbpos] .mbpos-reorder-strip__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--mbpos-color-heading, #374151);
    margin: 0 0 8px;
}

.mbpos-reorder-strip[data-mbpos] .mbpos-reorder-strip__row {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.mbpos-reorder-strip[data-mbpos] .mbpos-reorder-strip__row::-webkit-scrollbar {
    display: none;
}

/* [ro3] Card root is a wrapper (link + dismiss) — see pos-reorder-strip.js. */
.mbpos-reorder-strip[data-mbpos] .mbpos-reorder-card {
    position: relative;
    flex: 0 0 auto;
    max-width: 240px;
}

.mbpos-reorder-strip[data-mbpos] .mbpos-reorder-card__link {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 26px 10px 14px; /* right pad clears the dismiss × */
    background: var(--mbpos-color-surface, #ffffff);
    border: 1px solid var(--mbpos-color-border, #e5e7eb);
    border-radius: var(--mbpos-radius, 10px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mbpos-reorder-strip[data-mbpos] .mbpos-reorder-card__link:hover,
.mbpos-reorder-strip[data-mbpos] .mbpos-reorder-card__link:focus-visible {
    border-color: var(--mbpos-color-selected, var(--mbpos-color-heading, #9ca3af));
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    text-decoration: none;
}

/* [ro4] Thumbnail row — sits above the label as the visual anchor. A tight
   horizontal run of square thumbs; display only (server gates on tap). */
.mbpos-reorder-strip[data-mbpos] .mbpos-reorder-card__thumbs {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
}

.mbpos-reorder-strip[data-mbpos] .mbpos-reorder-card__thumb {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: calc(var(--mbpos-radius, 10px) - 4px);
    background: var(--mbpos-color-border, #e5e7eb); /* tint while the image loads */
    display: block;
}

.mbpos-reorder-strip[data-mbpos] .mbpos-reorder-card__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--mbpos-color-heading, #111827);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mbpos-reorder-strip[data-mbpos] .mbpos-reorder-card__meta {
    font-size: 12px; /* [ro4.1] now the primary text line (count · total · date) */
    color: var(--mbpos-color-text-muted, #6b7280);
    white-space: nowrap;
}

/* [ro3] Availability badge — display only; server decides on tap. */
.mbpos-reorder-strip[data-mbpos] .mbpos-reorder-card__badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--mbpos-color-text-muted, #6b7280);
    white-space: nowrap;
}

.mbpos-reorder-strip[data-mbpos] .mbpos-reorder-card__badge--none {
    color: var(--mbpos-color-danger, #b91c1c);
}

/* [ro3] Per-card dismiss ×. Always present (touch has no hover);
   deliberately quiet until pointed at. */
.mbpos-reorder-strip[data-mbpos] .mbpos-reorder-card__dismiss {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--mbpos-color-text-muted, #9ca3af);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.mbpos-reorder-strip[data-mbpos] .mbpos-reorder-card__dismiss:hover,
.mbpos-reorder-strip[data-mbpos] .mbpos-reorder-card__dismiss:focus-visible {
    background: var(--mbpos-color-border, #e5e7eb);
    color: var(--mbpos-color-heading, #111827);
}

/* =============================================================
   [ro4.2] Tap-to-preview modal — a look-first confirmation before
   the signed link re-seeds the cart. Overlay carries [data-mbpos]
   (isolation invariant); tokens with the ro2 neutrals as fallback.

   hh6b: now a .mbpos-lightbox instance (see pos-reorder-strip.js) —
   position/inset/z-index/display/justify-content/opacity/the fade
   transition all come from the shared .mbpos-lightbox base rule in
   mbpos-lightbox.css. Only what's actually DIFFERENT for this variant
   lives here: the bottom-sheet align-items on mobile, and a lighter
   backdrop tint. The old standalone __backdrop div is gone — the root
   element IS the backdrop now, exactly like every other lightbox, so
   clicking outside the panel is a plain backdrop click the shared
   click-delegation already understands.
   ============================================================= */

.mbpos-reorder-preview[data-mbpos] {
    align-items: flex-end;   /* mobile: bottom sheet, not a centred card */
    background: rgba(0, 0, 0, 0.45);
}

@media (min-width: 560px) {
    .mbpos-reorder-preview[data-mbpos] {
        align-items: center; /* desktop: centred card, not a bottom sheet */
    }
}

.mbpos-reorder-preview[data-mbpos] .mbpos-reorder-preview__panel {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    background: var(--mbpos-color-surface, #ffffff);
    border-radius: var(--mbpos-radius-card, 20px) var(--mbpos-radius-card, 20px) 0 0;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

@media (min-width: 560px) {
    .mbpos-reorder-preview[data-mbpos] .mbpos-reorder-preview__panel {
        border-radius: var(--mbpos-radius-card, 20px);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.24);
    }
}

.mbpos-reorder-preview[data-mbpos] .mbpos-reorder-preview__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 8px;
}

.mbpos-reorder-preview[data-mbpos] .mbpos-reorder-preview__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--mbpos-color-heading, #111827);
}

.mbpos-reorder-preview[data-mbpos] .mbpos-reorder-preview__close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--mbpos-color-text-muted, #6b7280);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.mbpos-reorder-preview[data-mbpos] .mbpos-reorder-preview__close:hover,
.mbpos-reorder-preview[data-mbpos] .mbpos-reorder-preview__close:focus-visible {
    background: var(--mbpos-color-border, #e5e7eb);
    color: var(--mbpos-color-heading, #111827);
}

.mbpos-reorder-preview[data-mbpos] .mbpos-reorder-preview__head,
.mbpos-reorder-preview[data-mbpos] .mbpos-reorder-preview__foot {
    flex: 0 0 auto;   /* hh6d: never compress — see __list comment below */
}

.mbpos-reorder-preview[data-mbpos] .mbpos-reorder-preview__list {
    list-style: none;
    margin: 0;
    padding: 0 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* hh6d: without these two, a flex item's default min-height is "auto"
       (~its content size), so a long order (many lines) could push the
       panel's total content past the 80vh cap. The panel clips overflow
       (border-radius), so the FOOT — Add to my order — got clipped off
       entirely rather than scrolled to. Invisible == untappable, which is
       exactly "doesn't add" with no console error. Taller desktop viewports
       made 80vh a bigger absolute number, so the same list rarely overflowed
       there — that's why it only showed up on mobile. flex:1 1 auto makes
       the list the one flexible region; min-height:0 lets it actually
       shrink to fit, so head and foot are always fully visible and only the
       list itself scrolls. */
    flex: 1 1 auto;
    min-height: 0;
}

.mbpos-reorder-preview[data-mbpos] .mbpos-reorder-preview__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--mbpos-color-border, #f0efec);
    font-size: 14px;
    color: var(--mbpos-color-text, #1f2937);
}

.mbpos-reorder-preview[data-mbpos] .mbpos-reorder-preview__row:first-child {
    border-top: 0;
}

/* hh6f: a line whose product is sold out / off the menu right now / outside
   its time rule. Two independent signals (not colour alone) so it still
   reads correctly for colourblind users and on a washed-out mobile screen
   in daylight — the same reasoning as the muted "3 of 4 available" card
   badge above it in the strip, just applied per line. DISPLAY ONLY: the
   ro1 server gate on tap is still the real check, this never blocks Add. */
.mbpos-reorder-preview[data-mbpos] .mbpos-reorder-preview__row--unavailable {
    color: var(--mbpos-color-text-muted, #6b7280);
}
.mbpos-reorder-preview[data-mbpos] .mbpos-reorder-preview__row--unavailable .mbpos-reorder-preview__thumb {
    opacity: 0.45;
}
.mbpos-reorder-preview[data-mbpos] .mbpos-reorder-preview__row--unavailable .mbpos-reorder-preview__name {
    text-decoration: line-through;
    text-decoration-color: var(--mbpos-color-text-muted, #9ca3af);
}

.mbpos-reorder-preview[data-mbpos] .mbpos-reorder-preview__thumb {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: calc(var(--mbpos-radius, 10px) - 2px);
    background: var(--mbpos-color-border, #e5e7eb);
}

.mbpos-reorder-preview[data-mbpos] .mbpos-reorder-preview__name {
    flex: 1 1 auto;
    min-width: 0;
}

.mbpos-reorder-preview[data-mbpos] .mbpos-reorder-preview__qty {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    color: var(--mbpos-color-text-muted, #6b7280);
    font-weight: 600;
}

.mbpos-reorder-preview[data-mbpos] .mbpos-reorder-preview__row--more {
    color: var(--mbpos-color-text-muted, #6b7280);
    font-size: 13px;
}

.mbpos-reorder-preview[data-mbpos] .mbpos-reorder-preview__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--mbpos-color-border, #e5e7eb);
}

.mbpos-reorder-preview[data-mbpos] .mbpos-reorder-preview__total {
    font-size: 13px;
    color: var(--mbpos-color-text-muted, #6b7280);
    white-space: nowrap;
}

.mbpos-reorder-preview[data-mbpos] .mbpos-reorder-preview__add {
    flex: 0 0 auto;
    padding: 11px 20px;
    background: var(--mbpos-color-primary, #171717);
    color: var(--mbpos-color-primary-text, #ffffff);
    border-radius: var(--mbpos-radius, 10px);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.mbpos-reorder-preview[data-mbpos] .mbpos-reorder-preview__add:hover,
.mbpos-reorder-preview[data-mbpos] .mbpos-reorder-preview__add:focus-visible {
    background: var(--mbpos-color-primary-hover, #000000);
    color: var(--mbpos-color-primary-text, #ffffff);
    text-decoration: none;
}