:root {
    /* Dark + gold guest identity (Solo brand). ThemeService still overrides
       these same token names per bar, so the accent stays customizable. */
    --bg-primary: #15110c;
    --bg-secondary: #15110c;
    --bg-card: #241d14;
    --bg-card-hover: #2c2318;
    --cocktail-top-fill: #241d14;
    --cocktail-bottom-fill: #1c160f;
    --accent-purple: #e0b05c;        /* accent (gold) — name kept for ThemeService mapping */
    --accent-purple-light: #c7994d;  /* deeper gold for gradients */
    --accent-on: #1f170d;            /* legible text on the gold fill */
    --text-primary: #ffffff;
    --text-secondary: #a89578;       /* warm muted */
    --border-color: rgba(224, 176, 92, 0.22);
    --success: #34d399;
    --warning: #fbbf24;
    --danger: #f87171;
}

* {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    min-height: 100%;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

/* App Container */
.app-container {
    max-width: 480px;
    margin: 0 auto;
    padding: 0rem 1rem 6rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Page Header (purple gradient) */
.page-header {
    background: linear-gradient(143deg, var(--accent-purple), var(--accent-purple-light));
    margin: 0 -1rem 1.5rem;
    padding: 1.25rem 1.5rem;
    border-radius: 0 0 20px 20px;
    position: sticky;
    top: 0;
    z-index: 80;
}

.page-header h1 {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
}

.page-header p {
    font-size: 0.875rem;
    margin: 0.25rem 0 0;
    opacity: 0.9;
}

.back-arrow {
    color: var(--text-primary);
    text-decoration: none;
    font-size: 1.75rem;
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);    
    box-shadow: 1px 1px 6px 2px color-mix(in srgb, var(--accent-purple) 73%, transparent);
    border-radius: 8px;
    padding: 6px;
}

.back-arrow:hover {
    color: var(--text-primary);
    opacity: 0.8;
}

.page-header-with-back {
    padding-left: 4rem;
}

/* Top banner (above the purple page-header) — owner / user name + bar name.
   Server-rendered by the HeaderInfo view component. Renders nothing when
   there's no productId or the API lookup fails. */
.bar-banner {
    margin: 0 -1rem;
    padding: 0.5rem 1rem;
    font-size: 0.78rem;
    color: var(--text-secondary, var(--text-secondary));
    text-align: center;
    letter-spacing: 0.02em;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.bar-banner__owner {
    color: var(--text-primary, #ffffff);
    font-weight: 600;
}

.bar-banner__sep {
    margin: 0 0.4rem;
    opacity: 0.5;
}

.bar-banner__bar {
    opacity: 0.85;
}

/* Cards */
.card-dark {
    background: var(--bg-card);
    /* Frosted glass over the theme background photo — the translucent fill is
       the dark overlay, the blur matches the Flutter app's card look. The white
       bottle box (.bottle-card img) is deliberately left untouched. */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    text-decoration: none;
    color: var(--text-primary);
    display: block;
    transition: background 0.2s, transform 0.1s;
}

.card-dark:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
    text-decoration: none;
    transform: translateY(-1px);
}

.card-dark:active {
    transform: translateY(0);
}

.card-dark.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.card-dark h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0.5rem 0 0.25rem;
}

.card-dark p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}

.card-dark .emoji {
    font-size: 2.5rem;
}

.card-dark.text-center .emoji {
    display: block;
    margin-bottom: 0.5rem;
}

/* Category Grid */
.category-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0.5rem 0;
}

.category-grid .card-dark {
    text-align: center;
    padding: 1.25rem 1rem;
}

.category-grid .card-dark h3 {
    font-size: 1.1rem;
}

/* Bottle List */
.bottle-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
}

.bottle-card img {
    width: 60px;
    height: 80px;
    object-fit: contain;
    border-radius: 8px;
    background: #ffffff;
    padding: 4px;
}

.bottle-card .bottle-info h3 {
    font-size: 1.1rem;
    margin: 0 0 0.25rem;
}

.bottle-card .bottle-info p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Size Cards */
.size-card {
    text-align: center;
    padding: 2rem 1.5rem;
}

.size-card .emoji {
    font-size: 3rem;
    display: block;
    margin-bottom: 0.75rem;
}

.size-card h3 {
    font-size: 1.4rem;
}

.size-card p {
    font-size: 1rem;
}

/* Quantity Picker */
.quantity-picker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 3rem 0;
}

.quantity-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent-purple);
    border: none;
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.quantity-btn:hover {
    opacity: 0.85;
}

.quantity-btn:active {
    transform: scale(0.95);
}

.quantity-value {
    font-size: 3rem;
    font-weight: 700;
    min-width: 60px;
    text-align: center;
}

/* Buttons */
.btn-purple {
    background: linear-gradient(90deg, var(--accent-purple), var(--accent-purple-light));
    border: none;
    border-radius: 16px;
    padding: 18px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--accent-on);
    width: 100%;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
    display: block;
    text-align: center;
    text-decoration: none;
}

.btn-purple:hover {
    opacity: 0.9;
    color: var(--accent-on);
    text-decoration: none;
}

.btn-purple:active {
    transform: scale(0.98);
}

.btn-outline {
    background: var(--bg-card);
    /* Frosted surface so the translucent fill reads as a solid button over the
       photo instead of a transparent window — same look as the cards. */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 14px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    width: 100%;
    cursor: pointer;
    display: block;
    text-align: center;
    text-decoration: none;
    transition: background 0.2s;
}

.btn-outline:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
    text-decoration: none;
}

.btn-cancel {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1rem;
    padding: 12px;
    cursor: pointer;
    width: 100%;
    text-align: center;
}

.btn-cancel:hover {
    color: var(--text-primary);
}

/* Form Inputs */
.form-dark label {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
}

.form-dark input {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 18px 20px;
    font-size: 1.05rem;
    color: var(--text-primary);
    width: 100%;
    outline: none;
    transition: border-color 0.2s;
}

.form-dark input::placeholder {
    color: rgba(224, 176, 92, 0.55);
}

.form-dark input:focus {
    border-color: var(--accent-purple);
}

.form-group {
    margin-bottom: 1.25rem;
}

/* ===== Guest redesign (dark + gold) ===== */
/* Gold gradient header — back button + title/subtitle, shared across screens */
.guest-header {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(90deg, var(--accent-purple), var(--accent-purple-light));
    color: var(--accent-on);
    border-radius: 18px;
    padding: 16px;
    margin-bottom: 16px;
}
.guest-header__back {
    width: 44px;
    height: 44px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(31, 23, 13, 0.25);
    border-radius: 12px;
    color: var(--accent-on);
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
}
.guest-header__back:hover { color: var(--accent-on); background: rgba(31, 23, 13, 0.4); }
/* Top-level screens (no back button) — give the title a touch more inset. */
.guest-header--flush { padding-left: 20px; padding-right: 20px; }
.guest-header__text { flex: 1; min-width: 0; }
.guest-header__text h1 { font-size: 1.31rem; font-weight: 700; margin: 0; color: var(--accent-on); }
.guest-header__text p { font-size: 0.81rem; margin: 2px 0 0; opacity: 0.85; color: var(--accent-on); }

/* Search box (list screens) */
.guest-search {
    width: 100%;
    padding: 16px 20px;
    background: var(--bg-card-hover, #1c170f);
    border: 1px solid var(--border-color, rgba(224, 176, 92, 0.3));
    border-radius: 16px;
    color: var(--text-primary);
    font-size: 1rem;
    outline: none;
}
.guest-search::placeholder { color: var(--text-secondary, rgba(224, 176, 92, 0.6)); }
.guest-search:focus { border-color: var(--accent-purple); }

/* Category chooser cards */
.cat-list { display: flex; flex-direction: column; gap: 16px; }
.cat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 148px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 0 18px 0 14px;
    text-decoration: none;
    transition: transform 0.1s ease, background 0.2s ease;
}
.cat-card:active { transform: scale(0.99); }
.cat-card__img {
    width: 120px;
    height: 120px;
    flex: none;
    background: rgba(224, 176, 92, 0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.cat-card__img img { max-width: 85%; max-height: 90%; object-fit: contain; display: block; }
.cat-card__text { flex: 1; min-width: 0; }
.cat-card__text h2 { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin: 0 0 6px; }
.cat-card__text p { font-size: 0.875rem; font-weight: 600; color: var(--accent-purple); margin: 0; }
.cat-card__chev { color: var(--accent-purple); font-size: 1.6rem; font-weight: 700; flex: none; }

/* Spirit type grid (Liquor) */
.spirit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.spirit-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    aspect-ratio: 1.4;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    text-decoration: none;
    transition: transform 0.1s ease;
}
.spirit-card:active { transform: scale(0.98); }
.spirit-card__emoji { font-size: 2.2rem; }
.spirit-card__name { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); }

/* Bottle list (Liquor → bottles) */
.bottle-list { display: flex; flex-direction: column; gap: 12px; }
.bottle-card {
    display: flex; align-items: center; gap: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 12px 16px 12px 12px;
    text-decoration: none;
    transition: transform 0.1s ease;
}
.bottle-card:active { transform: scale(0.99); }
.bottle-card__img {
    width: 64px; height: 88px; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: rgba(224, 176, 92, 0.1);
    border-radius: 12px;
    overflow: hidden;
}
.bottle-card__img img { max-width: 90%; max-height: 100%; object-fit: contain; }
.bottle-card__ph { font-size: 2rem; }
.bottle-card__info { flex: 1; min-width: 0; }
.bottle-card__info h3 { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); margin: 0 0 4px; }
.bottle-card__info p { font-size: 0.85rem; color: var(--accent-purple); margin: 0; }
.bottle-card__chev { color: var(--accent-purple); font-size: 1.5rem; font-weight: 700; flex: none; }

/* ── Catalogue cards (Liquor + Wine lists) ─────────────────────────────────
   Two-up grid of photo + name + "Type · Region" + tasting note + Read more,
   matching the Figma "Guest — Liquor" / "Guest — Wine" screens. */
.catalog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.catalog-card {
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    overflow: hidden;
    text-decoration: none;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    transition: transform 0.1s ease;
}
.catalog-card:active { transform: scale(0.99); }
.catalog-card__img {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(224, 176, 92, 0.06);
    overflow: hidden;
}
.catalog-card__img img { max-width: 68%; max-height: 88%; object-fit: contain; border-radius: 10px; }
.catalog-card__ph { font-size: 2.6rem; }
/* Wine bottles are cut-out transparent PNGs — no tile behind them, and no
   rounding (there's no rectangle left to round). They're tall, so give them a
   portrait frame and let them run nearly its full height. */
/* Geometry stays identical to the liquor cards — the only difference is that
   these bottles are transparent cut-outs, so they need no tile or rounding. */
.catalog-card--photo .catalog-card__img { background: transparent; }
.catalog-card--photo .catalog-card__img img { border-radius: 0; }
.catalog-card__body { padding: 11px 12px 13px; display: flex; flex-direction: column; gap: 4px; }
/* Prefixed with .catalog-card so these beat the generic `.card-dark h3/p`
   sizes (1.25rem / 0.9rem) that would otherwise win on specificity. */
.catalog-card .catalog-card__name {
    font-size: 1rem; font-weight: 700; color: var(--text-primary); margin: 0; line-height: 1.3;
}
.catalog-card .catalog-card__meta {
    font-size: 0.8rem; font-weight: 700; color: var(--accent-purple); margin: 0; line-height: 1.3;
}
.catalog-card .catalog-card__desc {
    font-size: 0.8rem; line-height: 1.45; color: var(--text-secondary); margin: 2px 0 0;
    /* Keep cards even without truncating mid-sentence in a jarring way. */
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.catalog-card .catalog-card__more {
    font-size: 0.8rem; font-weight: 700; color: var(--accent-purple); margin-top: 3px;
}

/* Featured winery promo (Wine list) — photo left, copy right, dismiss top-right. */
.featured-winery {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--accent-purple);
    border-radius: 18px;
    padding: 12px;
    margin-bottom: 14px;
}
.featured-winery__close {
    position: absolute; top: 9px; right: 9px;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
}
.featured-winery__close svg { width: 11px; height: 11px; }
.featured-winery__close:hover { color: var(--text-primary); }
.featured-winery__art {
    flex: none; width: 125px; height: 177px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(224, 176, 92, 0.05);
    border-radius: 12px;
    overflow: hidden;
}
.featured-winery__art img { max-width: 100%; max-height: 100%; object-fit: contain; }
.featured-winery__body { flex: 1; min-width: 0; padding-right: 26px; }
.featured-winery__eyebrow {
    display: block; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.09em;
    text-transform: uppercase; color: var(--accent-purple); margin-bottom: 3px;
}
.featured-winery__name { font-size: 1.15rem; font-weight: 700; color: var(--text-primary); margin: 0 0 4px; }
.featured-winery__head { font-size: 0.82rem; font-weight: 600; color: var(--text-primary); margin: 0 0 6px; line-height: 1.35; }
.featured-winery__head strong { color: var(--accent-purple); font-weight: 700; }
.featured-winery__text { font-size: 0.75rem; line-height: 1.45; color: var(--text-secondary); margin: 0 0 10px; }
.featured-winery__cta {
    display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(90deg, var(--accent-purple), var(--accent-purple-light));
    color: var(--accent-on);
    border: 0; border-radius: 999px;
    padding: 9px 16px; font-size: 0.85rem; font-weight: 700; cursor: pointer;
}
.featured-winery__chev { display: inline-flex; width: 13px; height: 13px; }
.featured-winery__chev svg { width: 100%; height: 100%; }

/* ── Detail screens (Your Pour / Your Glass) ───────────────────────────── */
.bottle-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 6px; }
.bottle-hero__img {
    height: 300px; display: flex; align-items: center; justify-content: center;
}
/* Catalogue photos ship with a baked-in white backdrop, so round them into a
   deliberate product tile instead of leaving a hard white rectangle. */
.bottle-hero__img img {
    max-height: 100%; max-width: 210px; object-fit: contain;
    border-radius: 14px;
}
/* An emoji stand-in doesn't need the full bottle-photo height. */
.bottle-hero__img:has(.bottle-hero__ph) { height: 140px; }
.bottle-hero__ph { font-size: 4.5rem; }
/* Wine heroes are cut-out transparent PNGs, so the bottle stands on the page
   with no tile or rounding behind it — sized to the 260px hero in the design. */
.bottle-hero--photo .bottle-hero__img { height: 300px; }
.bottle-hero--photo .bottle-hero__img img {
    height: 100%; max-height: 100%; max-width: 100%; width: auto;
    object-fit: contain; border-radius: 0;
}
.bottle-hero__name { font-size: 1rem; font-weight: 700; color: var(--text-primary, #f5f2ed); margin: 8px 0 0; text-align: center; }
.bottle-hero__meta { font-size: 0.82rem; font-weight: 600; color: var(--accent-purple); margin: 0; text-align: center; }

.detail-heading { font-size: 1.13rem; font-weight: 600; color: var(--text-primary, #f5f2ed); margin: 16px 0 8px; }
.detail-body { font-size: 0.85rem; line-height: 1.55; color: var(--text-secondary, #b8b2a8); margin: 0 0 4px; }

.spec-card {
    background: var(--bg-card);
    /* Same frosted treatment as .card-dark so it reads as a solid panel over
       the bar's theme photo rather than floating text. */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 15px 16px;
    display: flex; flex-direction: column; gap: 11px;
    margin-top: 12px;
}
.spec-card__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.spec-card__label {
    font-size: 0.69rem; font-weight: 600; letter-spacing: 0.04em;
    color: var(--accent-purple); flex: none;
}
.spec-card__value { font-size: 0.81rem; font-weight: 500; color: var(--text-primary, #f5f2ed); text-align: right; }

/* Wine placeholder */
.wine-empty { text-align: center; padding: 3rem 1.5rem; }
.wine-empty__icon { font-size: 3rem; margin-bottom: 1rem; }
.wine-empty__title { font-size: 1.15rem; font-weight: 700; color: var(--text-primary); margin: 0 0 0.5rem; }
.wine-empty__sub { font-size: 0.95rem; color: var(--text-secondary); margin: 0 0 1.75rem; }

/* Welcome Page */
.welcome-logo {
    text-align: center;
    /* No top padding — .page-header already supplies 1.5rem margin-bottom.
       Adding another 1.5rem on top would double the gap above the logo
       relative to the gap below. */
    padding: 0 0 1.5rem;
}

.welcome-logo .logo-img {
    width: 180px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.welcome-title {
    text-align: center;
    font-size: 1.75rem;
    font-weight: 700;
    margin: 1rem 0;
    line-height: 1.3;
}

.welcome-icon {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

.welcome-host {
    text-align: center;
    font-size: 0.95rem;
    color: var(--text-secondary, var(--text-secondary));
    margin: -0.25rem 0 0.75rem;
}

.welcome-host strong {
    color: var(--text-primary, #ffffff);
    font-weight: 600;
}

/* Confirm Order */
.confirm-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.confirm-card .bottle-image {
    text-align: center;
    margin-bottom: 1rem;
    background: #ffffff;
    border-radius: 12px;
    padding: 1rem;
}

.confirm-card .bottle-image img {
    max-height: 200px;
    object-fit: contain;
}

.confirm-card .guest-name {
    text-align: center;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.confirm-details {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.confirm-details .detail-row {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
}

.confirm-details .detail-row .label {
    color: var(--text-secondary);
}

.confirm-details .detail-row .value {
    font-weight: 600;
}

.close-warning {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--warning);
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color);
}

/* Order Status */
.status-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2rem 1.5rem;
    text-align: center;
    margin-bottom: 1.5rem;
}

.status-card .order-name {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.status-card .order-number-label {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.status-card .order-item-name {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--accent-purple-light);
    margin-bottom: 1rem;
}

.status-badge {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.status-badge.in-progress {
    background: var(--accent-purple, #e0b05c);
    color: var(--accent-on, #1e1608);
}

.status-badge.ready {
    background: var(--success);
    color: #000;
}

.status-badge.closed {
    background: var(--text-secondary);
    color: #fff;
}

.status-badge.cancelled {
    background: var(--danger);
    color: #000;
}

.estimated-wait {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.estimated-wait-time {
    font-size: 1.75rem;
    font-weight: 700;
}

/* Open Orders */
.open-orders-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.open-order-card {
    padding: 1.25rem;
}

/* Ready-state card is a form-submit button so tapping it closes the order
   directly. Strip the native button chrome and use the same card styling. */
.open-order-form { display: block; margin: 0; }
button.open-order-card {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    border: 0;
}
.open-order-card-ready {
    border: 1px solid color-mix(in srgb, var(--success) 45%, transparent) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--success) 15%, transparent) inset;
}
.open-order-card-ready:hover {
    background: color-mix(in srgb, var(--success) 6%, transparent);
}
.open-order-tap-hint {
    font-size: 0.85rem;
    color: var(--success);
    font-weight: 700;
    margin-top: 0.25rem;
    letter-spacing: 0.2px;
}

.open-order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.open-order-number {
    font-weight: 700;
    font-size: 1.1rem;
}

.open-order-details {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.open-order-wait {
    font-size: 0.85rem;
    color: var(--accent-purple-light);
    font-weight: 600;
}

/* Footer */
.app-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem 0 0.6rem;
    text-align: center;
    z-index: 50;
    pointer-events: none;
    background: linear-gradient(transparent, var(--bg-primary) 40%);
}

.barly-footer-logo {
    display: block;
    margin: 0 auto;
    width: 80px;
    height: auto;
    opacity: 0.55;
}

/* Drink Type page */
.drink-type-card {
    text-align: center;
    padding: 2rem 1.5rem;
}

.drink-type-card .emoji {
    font-size: 3rem;
    display: block;
    margin-bottom: 0.75rem;
}

/* Combined drink picker — full-width Cocktail banner on top of category grid */
.cocktail-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 1.25rem 1.25rem;
    margin-bottom: 0.75rem;
    /* Same frosted card surface as the category cards (.card-dark) — blur is
       inherited from .card-dark, just match the fill + border. */
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}
.cocktail-banner .emoji {
    font-size: 2.4rem;
    line-height: 1;
}
.cocktail-banner-text {
    flex: 1;
    min-width: 0;
}
.cocktail-banner-text h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}
.cocktail-banner-text p {
    margin: 2px 0 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.cocktail-banner-arrow {
    font-size: 1.8rem;
    color: var(--text-secondary);
    line-height: 1;
}

.section-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-secondary);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 1rem 0 0.5rem;
}
.section-divider::before,
.section-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--card-border);
}

/* Spacing utilities */
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }

/* Page content area */
.page-content {
    flex: 1;
    padding: 0.5rem 0;
}

/* The Place Order bar is position:fixed, so it sits outside the flow and would
   otherwise cover the last ~120px of the page — you could scroll to the very
   bottom and still not see it. Reserve its height (button + its 2rem offset)
   on any page that has one. */
.page-content:has(~ .sticky-bottom-btn) {
    padding-bottom: 9rem;
}

/* Action buttons area at bottom */
.action-buttons {
    margin-top: auto;
    padding-top: 1rem;
}

/* Sticky Bottom Button */
.sticky-bottom-btn {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    padding: 0.7rem 1.9rem;
    z-index: 90;
    background: linear-gradient(44deg, var(--bg-primary) 85%, transparent);
    border-top: var(--border-color) solid 1px;
}

/* Refresh Button */
.refresh-header-btn {
    position: absolute;
    top: 50%;
    right: 52px;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent-purple) 85%, transparent);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: opacity 0.2s;
}

.refresh-header-btn:hover {
    opacity: 0.85;
}

/* QR Code Button & Dialog */











/* Cocktail Filters */
.filter-section {
    margin-bottom: 1rem;
    /* Frosted card surface, same as the category cards (.card-dark). */
    padding: 14px;
    border-radius: 14px;
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
}

.filter-group {
    margin-bottom: 0.75rem;
}

.filter-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.4rem;
}

.filter-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.filter-chips::-webkit-scrollbar {
    display: none;
}

.filter-chip {
    flex-shrink: 0;
    background: #292117;
    border: 1px solid var(--border-color);
    color: var(--accent-purple);
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.filter-chip:hover {
    border-color: var(--accent-purple);
    color: var(--accent-purple-light);
}

.filter-chip.active {
    background: linear-gradient(90deg, var(--accent-purple), var(--accent-purple-light));
    border-color: transparent;
    color: var(--accent-on);
}

/* Cocktail Grid */
.cocktail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.cocktail-card {
    text-align: center;
    padding: 0 !important;
    overflow: hidden;
    /* Top fill covers the WHOLE card ("all frame"), like the Flutter cocktail
       card. The bottom section (name + meta) layers the bottom fill ON TOP of
       this, so the details area ends up darker (top + bottom). */
    background: var(--cocktail-top-fill, var(--bg-card));
}

.cocktail-image {
    width: 100%;
    aspect-ratio: 1;
    /* Image area shows the card's top fill only — no extra fill here. */
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px 16px 0 0;
}

.cocktail-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cocktail-placeholder {
    font-size: 3.5rem;
}

.cocktail-name {
    font-size: 1rem;
    font-weight: 600;
    padding: 0.75rem 0.5rem 0.25rem;
    /* Bottom-section fill, layered over the card's top fill → darker. */
    background: var(--cocktail-bottom-fill, transparent);
}

/* Hebrew guests: the cocktail name in Hebrew letters under the English name (2026-10-02). */
.cocktail-translit {
    font-size: 0.8rem;
    color: var(--text-secondary);
    padding: 0 0.5rem 0.25rem;
    margin-top: -0.15rem;
    background: var(--cocktail-bottom-fill, transparent);
}

.cocktail-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0.5rem 0.75rem;
    gap: 4px;
    /* Same bottom-section fill, contiguous with .cocktail-name. */
    background: var(--cocktail-bottom-fill, transparent);
}
.cocktail-glass {
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.cocktail-strength {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    background: rgba(255,255,255,0.08);
}

/* Strength indicator — water-drop icons matching the Flutter tablet UI.
   1/2/3 filled cyan drops for Low/Medium/High, slashed outlined drop for None. */
.strength-indicator {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    vertical-align: middle;
}
.strength-drop {
    display: inline-flex;
    width: 14px;
    height: 14px;
}
.strength-drop svg {
    width: 100%;
    height: 100%;
    display: block;
}
.strength-drop-filled svg path { fill: var(--accent-purple); }
.strength-drop-empty svg path  { fill: rgba(255,255,255,0.18); }
.strength-drop-none svg path   { fill: rgba(255,255,255,0.25); }
.strength-drop-none svg line {
    stroke: rgba(255,255,255,0.55);
    stroke-width: 2;
    stroke-linecap: round;
}
.strength-abv {
    margin-left: 5px;
    font-weight: 600;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.85);
}
.strength-label {
    margin-left: 5px;
    font-weight: 600;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.75);
}
.cocktail-taste {
    font-size: 0.7rem;
    color: var(--accent-purple);
    opacity: 0.8;
    font-weight: 500;
}
.filter-chip-label {
    margin-left: 6px;
    vertical-align: middle;
}
.filter-chip .strength-indicator {
    vertical-align: middle;
}
.custom-badge {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: 6px;
    background: color-mix(in srgb, var(--accent-purple) 25%, transparent);
    color: var(--accent-purple-light);
    margin-left: 0.3rem;
    vertical-align: middle;
}

/* Cocktail Detail */
/* The single frosted card that wraps the image, strength/flavor and the
   ingredient list — one box instead of three. Same surface as the cards. */
.cocktail-detail-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

/* Inner blocks are now frameless — they sit inside .cocktail-detail-card. */
.cocktail-detail-image {
    margin-bottom: 1rem;
    background: transparent;
    border: 0;
    padding: 0;
}

.cocktail-detail-image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    display: block;
}

.cocktail-detail-section {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0 0 1rem;
}
.cocktail-detail-card > .cocktail-detail-section:last-child {
    margin-bottom: 0;
}

.cocktail-detail-section h2 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
}

.cocktail-detail-section > p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.cocktail-info-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 1rem;
}

.info-chip {
    display: inline-block;
    /* Frameless inside the unified card — just inline meta, no nested pill. */
    padding: 2px 0;
    background: transparent;
    border: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.info-chip-calories {
    padding: 6px 12px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--accent-purple) 20%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-purple) 40%, transparent);
    color: var(--accent-purple-light);
}

.ingredient-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.ingredient-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border-color);
}

.ingredient-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.ingredient-name {
    font-size: 0.95rem;
}

.ingredient-amount {
    font-size: 0.9rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* ── "Help me choose" wizard (cocktail list) ─────────────────────────── */
.wizard-launch-row {
    margin: 0 0 12px;
    display: flex;
    justify-content: stretch;
    gap: 8px;
}
.wizard-open-btn {
    flex: 1;
    /* Outlined accent with a soft glow — the "Help me choose" affordance.
       Themed venues: card fill + accent border; fallback = dark + gold. */
    background: var(--bg-card-hover, #1f1a12);
    border: 1.5px solid var(--accent-purple, #f5d185);
    color: var(--accent-purple, #edc270);
    box-shadow: 0 4px 16px rgba(224, 176, 92, 0.28);
    padding: 15px 14px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.wizard-open-btn:hover { filter: brightness(1.08); }
.wizard-open-btn .wizard-open-spark,
.wizard-open-spark { color: var(--accent-purple, #edc270); }

.filter-toggle-btn {
    /* Gold-filled primary — the "Filter" affordance. */
    background: linear-gradient(90deg, var(--accent-purple), var(--accent-purple-light));
    border: none;
    color: var(--accent-on);
    padding: 15px 18px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.filter-toggle-btn:hover { filter: brightness(1.06); }
.filter-toggle-btn.active { filter: brightness(0.94); }
.filter-toggle-icon { font-size: 15px; line-height: 1; }

/* Inline SVG glyphs (sparkle / sliders). The exported markup has its width and
   height stripped so CSS owns the size — they need an explicit box here. */
.wizard-open-spark:has(svg),
.filter-toggle-icon:has(svg) {
    display: inline-flex;
    align-items: center;
    width: 20px;
    height: 20px;
}
.wizard-open-spark svg,
.filter-toggle-icon svg { display: block; width: 100%; height: 100%; }

.wizard-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 8px 10px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent-purple) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-purple) 35%, transparent);
}
.wizard-summary-spark { color: var(--accent-purple); }
.wizard-summary-chips {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.wiz-summary-chip {
    background: color-mix(in srgb, var(--accent-purple) 22%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-purple) 40%, transparent);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 10px;
}
.wizard-summary-edit, .wizard-summary-clear {
    background: transparent;
    border: 0;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
}
.wizard-summary-edit { color: var(--accent-purple); }
.wizard-summary-clear { color: var(--text-secondary, var(--text-secondary)); }

.wizard-panel {
    margin: 0 0 12px;
    padding: 14px;
    border-radius: 14px;
    /* Frosted card surface, same as the category cards (.card-dark). */
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
}
.wizard-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.wizard-header-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}
.wizard-progress {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.wiz-dot {
    width: 6px; height: 6px;
    border-radius: 3px;
    background: var(--border-color, #1E3A5F);
    transition: width 0.2s;
}
.wiz-dot-active {
    background: var(--accent-purple);
    width: 18px;
}
.wizard-count {
    margin-left: auto;
    background: color-mix(in srgb, var(--accent-purple-light) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-purple-light) 45%, transparent);
    color: var(--accent-purple-light);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 20px;
}
.wizard-close-btn {
    background: transparent;
    border: 0;
    color: var(--text-secondary, var(--text-secondary));
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

.wiz-heading {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
}
.wiz-sub {
    color: var(--text-secondary, var(--text-secondary));
    font-size: 12px;
    margin-bottom: 10px;
}
.wiz-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.wiz-chip {
    background: var(--bg-card, #0F1E30);
    border: 1px solid var(--border-color, #1E3A5F);
    color: var(--text-secondary, var(--text-secondary));
    padding: 9px 13px;
    border-radius: 22px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border 0.15s, color 0.15s;
}
.wiz-chip-active {
    background: color-mix(in srgb, var(--accent-purple) 25%, transparent);
    border-color: var(--accent-purple);
    color: #fff;
    font-weight: 700;
}

.wizard-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}
.wizard-btn-text, .wizard-btn-skip {
    background: transparent;
    border: 0;
    color: var(--text-secondary, var(--text-secondary));
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 6px;
}
.wizard-btn-outline {
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--accent-purple-light) 55%, transparent);
    color: var(--accent-purple-light);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
}
.wizard-btn-primary {
    background: var(--accent-purple);
    border: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 16px;
    border-radius: 10px;
    cursor: pointer;
}
.wizard-btn-primary:hover { background: var(--accent-purple); }

/* ── Hotel venue picker (welcome page) ──────────────────────────────────
   Shown when a saved link opens without a fresh venue-QR scan at a
   multi-venue hotel: "Where are you?" list of the hotel's bars. */
.venue-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 24px;
}
.venue-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--accent-purple) 45%, transparent);
    background: color-mix(in srgb, var(--accent-purple) 10%, transparent);
    color: inherit;
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s, transform 0.1s;
}
.venue-btn:active {
    transform: scale(0.98);
}
.venue-btn-current {
    background: linear-gradient(90deg, var(--accent-purple), var(--accent-purple-light));
    color: var(--accent-on);
}
.venue-btn small {
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0.7;
}

/* Hotel: "Switch Venue" pill. It always sits inside the gold .guest-header,
   so it takes the same dark-on-gold ink as the back button — gold text on a
   gold fill is all but unreadable. */
.venue-switch-btn {
    flex: none;
    align-self: center;
    white-space: nowrap;
    padding: 9px 15px;
    border-radius: 999px;
    background: rgba(31, 23, 13, 0.25);
    border: 1px solid rgba(31, 23, 13, 0.45);
    color: var(--accent-on);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
}
.venue-switch-btn:hover,
.venue-switch-btn:active {
    color: var(--accent-on);
    background: rgba(31, 23, 13, 0.4);
}

/* Hotel: order's source venue on the order card */
.open-order-venue { display:block; margin-top:4px; font-size:.78rem; font-weight:700; color: var(--accent-purple); }

/* Hotel prices on guest lists */
.mixer-price { margin-left:6px; font-size:.78rem; font-weight:700; color: var(--accent-purple); }
.cocktail-price { margin-left:8px; font-size:.85rem; font-weight:800; color: var(--accent-purple); }

/* Language toggle (EN/HE) */
.lang-toggle {
  position: absolute; top: 10px; z-index: 50;
  inset-inline-end: 12px;
  min-height: 44px; padding: 0 16px; border-radius: 999px;
  font-size: .85rem; font-weight: 700; letter-spacing: .3px;
  /* Same look as the page's option buttons (size cards): frosted theme surface, theme border,
     theme text — was a grey see-through pill (Ofir 2026-10-02). */
  color: var(--text-primary, #fff);
  border: 2px solid var(--border-color, #1E2D4A); text-decoration: none;
  background: color-mix(in srgb, var(--bg-primary, #0a0e27) 38%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.lang-toggle:hover { color: var(--text-primary, #fff); border-color: var(--accent-purple, #E5A100); }
/* Language dropdown — same pill look as the old toggle, native picker UX */
.lang-select {
  appearance: none; -webkit-appearance: none;
  cursor: pointer; text-align: center;
  padding-inline-end: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23E5A100' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
html[dir="rtl"] .lang-select { background-position: left 8px center; }
.lang-select option { background: #0F1629; color: #fff; }
/* RTL: keep numerals/prices readable */
html[dir="rtl"] .catalog-card__meta, html[dir="rtl"] .price { unicode-bidi: plaintext; }


/* ── Partner logo strip (chain branding from the venue theme) ───────────
   One uniform placement: centered at the very top of every guest page,
   above the venue-name banner. */
.partner-top {
    text-align: center;
    padding: 10px 0 2px;
}
.partner-top img {
    height: 34px;
    max-width: 60%;
    object-fit: contain;
}

/* ===== Shopping cart (F&B phase B) ===== */
/* Pinned bottom bar — appears on every page once the cart has lines. */
.cart-bar {
    position: fixed;
    /* Clear of the iPhone home indicator (0 where there is none). */
    bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 2rem);
    max-width: 448px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 16px;
    background: linear-gradient(90deg, var(--accent-purple), var(--accent-purple-light));
    color: var(--accent-on);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    z-index: 95;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.cart-bar:hover { color: var(--accent-on); text-decoration: none; opacity: 0.95; }
/* Added-to-cart feedback: one quick pulse (replaces the toast that covered the bar). */
.cart-bar.bump { animation: cart-bump 0.45s ease-out; }
@keyframes cart-bump {
    0%   { transform: translateX(-50%) scale(1); }
    35%  { transform: translateX(-50%) scale(1.06); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55); }
    100% { transform: translateX(-50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .cart-bar.bump { animation: none; } }
.cart-bar__icon { font-size: 1.25rem; }
.cart-bar__text { flex: 1; }
.cart-bar__cta { font-size: 0.9rem; opacity: 0.9; white-space: nowrap; }
/* Detail pages keep their own Add-to-cart button; lift it above the bar. */
body.has-cart .sticky-bottom-btn { bottom: 5.4rem; }
body.has-cart .page-content:has(~ .sticky-bottom-btn) { padding-bottom: 13rem; }
body.has-cart .app-container { padding-bottom: calc(9rem + env(safe-area-inset-bottom, 0px)); }

.cart-toast {
    position: fixed;
    left: 50%;
    bottom: 6.5rem;
    transform: translateX(-50%) translateY(10px);
    background: var(--bg-card);
    border: 1px solid var(--accent-purple);
    color: var(--text-primary);
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    z-index: 96;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    white-space: nowrap;
}
.cart-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Cart page */
.cart-lines { display: flex; flex-direction: column; gap: 10px; }
.cart-line {
    display: flex;
    gap: 12px;
    padding: 12px;
    align-items: flex-start;
}
.cart-line__thumb {
    width: 56px; height: 56px; flex: none;
    border-radius: 10px;
    background: var(--bg-card-hover);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
    overflow: hidden;
}
.cart-line__thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-line__body { flex: 1; min-width: 0; }
.cart-line__name { font-weight: 700; font-size: 1rem; margin: 0; }
.cart-line__summary { font-size: 0.82rem; color: var(--text-secondary); margin: 2px 0 6px; line-height: 1.35; }
.cart-line__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cart-line__qty { display: flex; align-items: center; gap: 8px; }
.cart-line__qty .qty-btn {
    width: 30px; height: 30px; border-radius: 50%;
    border: 1px solid var(--border-color); background: transparent;
    color: var(--text-primary); font-size: 16px; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.cart-line__qty .qty-value { min-width: 22px; text-align: center; font-weight: 700; }
.cart-line__total { font-weight: 700; color: var(--accent-purple-light); white-space: nowrap; }
.cart-line__remove {
    background: transparent; border: 0; color: var(--text-secondary);
    font-size: 1.3rem; line-height: 1; padding: 0 4px; cursor: pointer; flex: none;
}
.cart-summary {
    margin-top: 14px;
    padding: 14px 16px;
    display: flex; flex-direction: column; gap: 8px;
}
.cart-summary__row { display: flex; justify-content: space-between; font-size: 0.95rem; }
.cart-summary__row .label { color: var(--text-secondary); }
.cart-summary__row.total { font-size: 1.15rem; font-weight: 700; }
.cart-empty { text-align: center; padding: 2.5rem 1rem; }
.cart-empty__icon { font-size: 3rem; display: block; margin-bottom: 8px; }
.cart-error {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 12px 0; padding: 12px 14px;
    background: rgba(220, 38, 38, 0.14);
    border: 1px solid rgba(220, 38, 38, 0.55);
    border-radius: 12px;
    font-size: 0.95rem; line-height: 1.4; font-weight: 600;
}
.cart-line.is-error { outline: 2px solid var(--danger); }

/* ===== Food & Beverage menu ===== */
.hh-banner {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 12px; padding: 10px 14px;
    background: rgba(224, 176, 92, 0.16);
    border: 1px solid var(--accent-purple);
    border-radius: 12px;
    font-weight: 700; font-size: 0.95rem;
}
.hh-banner__icon { font-size: 1.3rem; }
.menu-tabs {
    display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 10px;
    scrollbar-width: none;
    position: sticky; top: 0; z-index: 70;
    background: linear-gradient(var(--bg-primary) 80%, transparent);
}
.menu-tabs::-webkit-scrollbar { display: none; }
.menu-tab {
    flex: none;
    padding: 8px 14px; border-radius: 20px;
    border: 1px solid var(--border-color);
    background: var(--bg-card); color: var(--text-secondary);
    font-size: 0.85rem; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.menu-tab.active, .menu-tab:hover { border-color: var(--accent-purple); color: var(--text-primary); text-decoration: none; }
.menu-group { margin-bottom: 22px; scroll-margin-top: 60px; }
.menu-group__hero {
    position: relative; height: 120px; border-radius: 16px; overflow: hidden; margin-bottom: 10px;
    background: var(--bg-card);
}
.menu-group__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.menu-group__hero h2, .menu-group__title {
    margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--text-primary);
}
.menu-group__hero h2 {
    position: absolute; left: 14px; right: 14px; bottom: 10px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}
.menu-group__title { margin-bottom: 10px; }
.menu-items { display: flex; flex-direction: column; gap: 10px; }
.menu-item {
    display: flex; gap: 12px; padding: 12px; align-items: stretch;
    text-decoration: none; color: inherit;
}
.menu-item:hover { color: inherit; text-decoration: none; }
.menu-item__img {
    width: 84px; height: 84px; flex: none; border-radius: 12px; overflow: hidden;
    background: var(--bg-card-hover);
    display: flex; align-items: center; justify-content: center; font-size: 2rem;
}
.menu-item__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.menu-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.menu-item .menu-item__name { font-size: 1rem; font-weight: 700; margin: 0 0 3px; color: var(--text-primary); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.menu-item .menu-item__desc {
    font-size: 0.82rem; color: var(--text-secondary); margin: 0; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.menu-item__foot { margin-top: auto; padding-top: 6px; display: flex; align-items: center; gap: 8px; }
.menu-item__price { font-weight: 700; color: var(--accent-purple-light); }
.menu-item__price s { color: var(--text-secondary); font-weight: 400; margin-inline-start: 6px; font-size: 0.85rem; }
.menu-item__from { font-size: 0.8rem; color: var(--text-secondary); font-weight: 600; }
.menu-item.unavailable { opacity: 0.5; filter: grayscale(0.6); pointer-events: none; }
.hh-badge {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    background: var(--accent-purple); color: var(--accent-on);
    font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
}

/* Item page */
.item-hero { border-radius: 18px; overflow: hidden; background: var(--bg-card); margin-bottom: 14px; }
.item-hero img { width: 100%; max-height: 260px; object-fit: cover; display: block; }
.item-hero__ph { height: 160px; display: flex; align-items: center; justify-content: center; font-size: 4rem; }
.item-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 6px; }
.item-title h2 { margin: 0; font-size: 1.35rem; font-weight: 700; }
.item-title .menu-item__price { font-size: 1.15rem; white-space: nowrap; }
.item-desc { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.45; margin: 0 0 14px; }
.mod-list { display: flex; flex-direction: column; gap: 10px; }
.mod-row { padding: 10px 12px; }
.mod-row__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.mod-row__thumb { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; }
.mod-row__name { font-weight: 700; flex: 1; }
.mod-row__price { font-size: 0.85rem; color: var(--accent-purple-light); font-weight: 600; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg-btn {
    padding: 7px 12px; border-radius: 18px;
    border: 1px solid var(--border-color); background: transparent;
    color: var(--text-secondary); font-size: 0.82rem; font-weight: 600; cursor: pointer;
    transition: all 0.15s; user-select: none;
}
.seg-btn:active { transform: scale(0.96); }
.seg-btn.active { border-color: var(--accent-purple); background: var(--accent-purple); color: var(--accent-on); font-weight: 700; }
.seg-btn.removed.active { background: var(--danger); border-color: var(--danger); color: #000; }
.side-check {
    display: flex; align-items: center; gap: 8px; margin-top: 8px;
    font-size: 0.85rem; color: var(--text-secondary); cursor: pointer; user-select: none;
}
.side-check input { width: 18px; height: 18px; accent-color: var(--accent-purple); }
.side-check[hidden] { display: none; }
/* Choice groups (pick one): radio list under the group's section label */
.choice-hint {
    font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 0.75rem;
    color: var(--text-secondary); margin-inline-start: 8px;
}
.choice-hint.required { color: var(--warning); }
.choice-group { padding: 4px 12px; display: flex; flex-direction: column; }
.choice-opt {
    display: flex; align-items: center; gap: 10px; padding: 10px 0;
    border-bottom: 1px solid var(--border-color); cursor: pointer; user-select: none;
}
.choice-opt:last-child { border-bottom: none; }
.choice-opt input { width: 20px; height: 20px; flex: none; accent-color: var(--accent-purple); margin: 0; }
.choice-opt__name { flex: 1; font-weight: 600; }
.choice-opt__price { font-size: 0.85rem; color: var(--accent-purple-light); font-weight: 600; white-space: nowrap; }
.choice-opt:has(input:checked) .choice-opt__name { color: var(--accent-purple-light); }
.item-qty { display: flex; align-items: center; justify-content: center; gap: 16px; }
.item-qty .qty-btn {
    width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--border-color); background: var(--bg-card);
    color: var(--text-primary); font-size: 20px; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.item-qty .qty-value { font-size: 1.3rem; font-weight: 700; min-width: 32px; text-align: center; }
.item-note {
    width: 100%; padding: 12px 14px; min-height: 64px; resize: vertical;
    background: var(--bg-card-hover); border: 1px solid var(--border-color);
    border-radius: 14px; color: var(--text-primary); font-size: 0.95rem; outline: none;
    font-family: inherit;
}
.item-note:focus { border-color: var(--accent-purple); }
.item-note-count { text-align: end; font-size: 0.75rem; color: var(--text-secondary); margin-top: 4px; }

/* ===== Tickets ===== */
.ticket-list { display: flex; flex-direction: column; gap: 12px; }
.ticket-card { padding: 14px 16px; display: block; text-decoration: none; color: inherit; }
.ticket-card:hover { color: inherit; text-decoration: none; }
.ticket-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.ticket-num { font-weight: 800; font-size: 1.1rem; }
.ticket-meta { font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 10px; }
.ticket-lines { display: flex; flex-direction: column; gap: 6px; }
.ticket-line { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; }
.ticket-line__qty { color: var(--accent-purple-light); font-weight: 700; min-width: 26px; }
.ticket-line__name { flex: 1; min-width: 0; }
.ticket-line__sub { display: block; font-size: 0.78rem; color: var(--text-secondary); }
.ticket-line__status {
    font-size: 0.7rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
    background: var(--bg-card-hover); color: var(--text-secondary);
}
.ticket-line__status.in-progress { background: var(--accent-purple); color: var(--accent-on); }
.ticket-line__status.ready { background: var(--success); color: #000; }
.ticket-line__status.closed { background: var(--text-secondary); color: #fff; }
.ticket-line__status.cancelled { background: var(--danger); color: #000; }
.ticket-total { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-color); font-weight: 700; }
.ticket-line__pickup {
    padding: 6px 10px; border-radius: 10px; border: 1px solid var(--success);
    background: transparent; color: var(--success); font-size: 0.78rem; font-weight: 700; cursor: pointer;
}
.status-badge.sm { font-size: 0.75rem; padding: 3px 10px; margin: 0; }
html[dir="rtl"] .cart-bar__cta, html[dir="rtl"] .menu-item__price { unicode-bidi: plaintext; }

/* Hotel scan-to-order gate: shown wherever an ordering entry point was
   hidden because the guest has not scanned the table QR since the last
   order (CookieService.CanOrder). */
.scan-gate-banner {
    display: flex; align-items: center; gap: 10px;
    margin: 10px 0; padding: 12px 14px;
    background: rgba(214, 158, 46, 0.14);
    border: 1px solid rgba(214, 158, 46, 0.45);
    border-radius: 12px;
    font-size: 0.95rem; line-height: 1.4; text-align: start;
}
.scan-gate-icon { font-size: 1.3rem; }
/* Line icons replaced the emoji here (2026-10-04) — the exported SVGs have
   their width/height stripped, so the span owns the box. The font-size above
   still serves any banner that has not been converted yet. */
.scan-gate-icon:has(svg) {
    display: inline-flex; align-items: center; flex-shrink: 0;
    width: 22px; height: 22px;
}
.scan-gate-icon svg { display: block; width: 100%; height: 100%; }
/* ── Line icons replacing the emoji (2026-10-04) ──────────────────────────
   The exported SVGs have width/height stripped, so every holder sets its own
   box. One rule per size family; colour comes from the surrounding text. */
.cat-ico, .tile-ico, .inline-ico, .line-ph,
.hh-banner__icon, .svc-hours-icon, .cart-empty__icon, .cart-bar__icon,
.order-error-icon, .wizard-open-spark, .catalog-card__ph, .bottle-hero__ph,
.hero-ph, .cocktail-placeholder, .drink-placeholder, .checkmark, .big-ok,
.cw-tick, .star { display: inline-flex; align-items: center; justify-content: center; }
.cat-ico, .tile-ico, .inline-ico, .line-ph, .hh-banner__icon, .svc-hours-icon,
.cart-empty__icon, .cart-bar__icon, .order-error-icon, .wizard-open-spark,
.catalog-card__ph, .bottle-hero__ph, .hero-ph, .cocktail-placeholder,
.drink-placeholder, .checkmark, .big-ok, .cw-tick, .star { line-height: 0; }
.cat-ico svg, .tile-ico svg, .inline-ico svg, .line-ph svg,
.hh-banner__icon svg, .svc-hours-icon svg, .cart-empty__icon svg,
.cart-bar__icon svg, .order-error-icon svg, .wizard-open-spark svg,
.catalog-card__ph svg, .bottle-hero__ph svg, .hero-ph svg,
.cocktail-placeholder svg, .drink-placeholder svg, .checkmark svg,
.big-ok svg, .cw-tick svg, .star svg { display: block; width: 100%; height: 100%; }

.inline-ico, .cw-tick { width: 20px; height: 20px; flex-shrink: 0; }
.hh-banner__icon, .svc-hours-icon, .order-error-icon { width: 22px; height: 22px; flex-shrink: 0; }
.cart-bar__icon, .star { width: 24px; height: 24px; flex-shrink: 0; }
.cat-ico, .tile-ico { width: 42px; height: 42px; }
.line-ph { width: 40px; height: 40px; }
.catalog-card__ph, .cocktail-placeholder, .drink-placeholder { width: 52px; height: 52px; }
.cart-empty__icon, .checkmark { width: 56px; height: 56px; }
.bottle-hero__ph, .hero-ph, .big-ok, .big.ok { width: 64px; height: 64px; }
/* The rating keeps its own colours — outline is quiet, filled is gold. */
.star { color: var(--border-color, #4A4A4A); cursor: pointer; }
.star.filled { color: var(--accent-purple, #E5A100); }

/* Icon inside an outlined button (e.g. "Scan the table QR"). */
.btn-ico {
    display: inline-flex; align-items: center; flex-shrink: 0;
    width: 20px; height: 20px; margin-inline-end: 8px; vertical-align: -4px;
}
.btn-ico svg { display: block; width: 100%; height: 100%; }

/* ── /Order/Scan — read the table QR in the page ─────────────────────────── */
.scan-done-banner {
    display: flex; align-items: center; gap: 10px;
    margin: 10px 0; padding: 12px 14px;
    background: rgba(56, 161, 105, 0.14);
    border: 1px solid rgba(56, 161, 105, 0.45);
    border-radius: 12px;
    font-size: 1rem; font-weight: 600; line-height: 1.4; text-align: start;
}
.scan-card { padding: 16px; margin-top: 12px; }
.scan-hint { margin: 0 0 12px; text-align: center; font-size: 1rem; line-height: 1.4; }
.scan-box {
    position: relative; width: 100%; max-width: 420px; margin: 0 auto;
    aspect-ratio: 1 / 1; overflow: hidden;
    border-radius: 18px; background: #000;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.15));
}
.scan-box video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-box--off { display: none; }
.scan-frame {
    position: absolute; inset: 14%;
    border: 3px solid rgba(255, 255, 255, 0.85); border-radius: 16px;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.35);
    pointer-events: none; transition: border-color .15s ease;
}
.scan-box--hit .scan-frame { border-color: #38a169; }
.scan-status { margin: 12px 0; text-align: center; font-size: 0.95rem; line-height: 1.45; min-height: 1.45em; }
.scan-status--warn { color: inherit; font-weight: 600; }
.scan-status--ok { color: #38a169; font-weight: 700; }
.scan-gate-banner .scan-gate-go {
    margin-inline-start: auto; flex-shrink: 0;
    padding: 8px 12px; border-radius: 10px;
    background: rgba(214, 158, 46, 0.9); color: #1a202c;
    font-weight: 700; font-size: 0.9rem; text-decoration: none; white-space: nowrap;
}

/* ── Cocktail wizard (CocktailList, 2026-09-20) ──────────────────────────────
   One page, three stages switched by #cw[data-stage]. Theme tokens only, so
   every venue's colours and light / dark mode carry through. */
.cw [class*="cw-stage-"] { display: none; }
.cw[data-stage="entry"]   .cw-stage-entry,
.cw[data-stage="wizard"]  .cw-stage-wizard,
.cw[data-stage="results"] .cw-stage-results { display: block; }
.cw[data-stage="results"] .cocktail-grid.cw-stage-results { display: grid; }
.cw[data-stage="wizard"] .cw-search { display: none; }

.cw-h { display: block; font-size: 1.15rem; font-weight: 700; margin: 0; color: var(--text-primary); }
.cw-sub { display: block; font-size: .9rem; color: var(--text-secondary); margin: 3px 0 0; }
.cw-search { padding: 16px; margin-bottom: 0; }
.cw-search .cw-stage-entry { margin-bottom: 12px; }
.cw-search .guest-search { margin: 0; }
.cw[data-stage="results"] .cw-search { padding: 0; background: transparent; border: 0; box-shadow: none; margin-bottom: 10px; }

.cw-or { display: flex; align-items: center; gap: 12px; margin: 14px 4px; color: var(--text-secondary);
         font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.cw-or::before, .cw-or::after { content: ""; flex: 1; height: 1px; background: var(--border-color); }

.cw-help { display: block; width: 100%; padding: 0; overflow: hidden; text-align: start; cursor: pointer;
           font: inherit; color: inherit; }
.cw-collage { display: grid; grid-template-columns: repeat(4, 1fr); height: 150px;
              background: var(--cocktail-top-fill, var(--bg-card-hover)); }
.cw-collage img { width: 100%; height: 150px; object-fit: contain; padding: 12px 4px 0; }
.cw-collage:empty { display: none; }
.cw-help-text { display: block; padding: 14px 16px 4px; }
.cw-help-cta { display: flex; align-items: center; justify-content: center; gap: 8px;
               margin: 12px 16px 16px; width: auto; padding: 15px; font-size: 1.05rem; }
.cw-help-cta svg { width: 18px; height: 18px; }
.cw-link { display: block; width: 100%; margin-top: 14px; padding: 10px; background: none; border: 0; cursor: pointer;
           color: var(--accent-purple); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.cw-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cw-step { font-size: .78rem; font-weight: 600; color: var(--text-secondary); letter-spacing: .04em; text-transform: uppercase; }
.cw-dots { display: flex; gap: 5px; flex: 1; }
.cw-dots i { flex: 1; height: 4px; border-radius: 99px; background: var(--border-color); }
.cw-dots i.on { background: var(--accent-purple); }
.cw-q { font-size: 1.4rem; font-weight: 700; line-height: 1.2; margin: 0; color: var(--text-primary); }
.cw-wizard .cw-sub { margin-bottom: 14px; }

.cw-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cw-tile { position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; cursor: pointer;
           text-align: start; font: inherit; color: var(--text-primary);
           background: var(--bg-card); border: 1.5px solid var(--border-color); border-radius: 16px;
           transition: border-color .12s, transform .08s, box-shadow .12s; }
.cw-tile:active { transform: scale(.985); }
.cw-tile-img { display: flex; align-items: flex-end; justify-content: center; height: 118px;
               background: var(--cocktail-top-fill, var(--bg-card-hover)); }
.cw-tile-img img { height: 110px; width: auto; max-width: 100%; object-fit: contain; }
.cw-tile-img:empty::after { content: "🍸"; font-size: 40px; align-self: center; opacity: .55; }
.cw-tile-text { display: block; padding: 10px 12px 12px; }
.cw-tile-label { display: block; font-size: 1rem; font-weight: 700; line-height: 1.25; }
.cw-tile-count { display: block; font-size: .78rem; color: var(--text-secondary); margin-top: 2px; }
.cw-tick { position: absolute; top: 8px; inset-inline-end: 8px; width: 26px; height: 26px; border-radius: 50%;
           display: grid; place-items: center; font-size: 15px; font-weight: 700;
           background: var(--accent-purple); color: var(--accent-on); opacity: 0; transform: scale(.6);
           transition: opacity .12s, transform .12s; }
.cw-tile.on { border-color: var(--accent-purple); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-purple) 35%, transparent); }
.cw-tile.on .cw-tick { opacity: 1; transform: none; }
.cw-tile.empty { opacity: .4; cursor: default; }
.cw-tile.wide { grid-column: 1 / -1; flex-direction: row; align-items: center; }
.cw-tile.wide .cw-tile-img { width: 42%; height: 84px; flex: none; gap: 0; }
.cw-tile.wide .cw-tile-img img { height: 76px; max-width: 34%; }
.cw-tile.wide .cw-tile-text { flex: 1; padding-inline-end: 40px; }
.cw-tile.wide .cw-tick { top: 50%; margin-top: -13px; }

.cw-avoid { margin-top: 18px; }
.cw-avoid-title { font-size: .95rem; font-weight: 700; margin: 0 0 8px; color: var(--text-primary); }
.cw-avoid-chips, .cw-summary-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cw-chip { padding: 8px 13px; border-radius: 999px; cursor: pointer; font: inherit; font-size: .88rem; font-weight: 600;
           background: var(--bg-card); color: var(--text-primary); border: 1.5px solid var(--border-color); }
.cw-chip.on { border-color: var(--danger); color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--bg-card)); }
.cw-chip.static { cursor: default; padding: 6px 11px; font-size: .82rem;
                  border-color: color-mix(in srgb, var(--accent-purple) 55%, transparent); color: var(--accent-purple); }
.cw-chip.static.no { border-color: color-mix(in srgb, var(--danger) 55%, transparent); color: var(--danger); }
.cw-chip.static.count { border-style: dashed; color: var(--text-secondary); border-color: var(--border-color); }

/* Back / Next stay reachable while the tiles scroll. */
.cw-foot { position: sticky; bottom: 10px; display: flex; gap: 10px; margin: 18px 0 0; padding: 8px;
           padding-bottom: calc(8px + env(safe-area-inset-bottom)); border-radius: 22px;
           /* frosted, so it sits on a venue's photo background without a hard box */
           background: color-mix(in srgb, var(--bg-card) 78%, transparent);
           -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
           border: 1px solid var(--border-color); }
.cw-foot .cw-back { flex: 0 0 auto; width: auto; padding: 16px 20px; margin: 0; }
.cw-foot .cw-next { flex: 1; margin: 0; padding: 16px; font-size: 1.05rem; }
.cw-foot .cw-next:disabled { opacity: .5; cursor: default; }

.cw-summary { margin-bottom: 12px; }
.cw-summary-acts { display: flex; gap: 8px; margin-top: 10px; }
.cw-pill { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 12px; cursor: pointer;
           font: inherit; font-size: .9rem; font-weight: 700;
           background: var(--bg-card-hover, var(--bg-card)); color: var(--accent-purple); border: 1.5px solid var(--accent-purple); }
.cw-pill svg { width: 16px; height: 16px; }
.cw-pill.ghost { border-color: var(--border-color); color: var(--text-secondary); background: transparent; }
@media (min-width: 560px) { .cw-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ===== Compact page chrome (Ofir, 2026-09-30) =====
   1. The footer logo was position:fixed with a fade, drawn OVER anything
      pinned to the bottom — it cut the cocktail wizard's Next / Back bar
      (.cw-foot) and the cart bar. It is now an ordinary last line of the page.
   2. The gold header card (back button + big title) took ~170 px on a phone.
      The back button moves up into the top row, on the reading-start side,
      level with the language pill and styled like it; the title stays as a
      plain heading. Applies to every .guest-header screen. */
.app-container { position: relative; }
.app-footer {
    position: static;
    margin-top: auto;
    padding: 1.25rem 0 0.5rem;
    background: none;
    pointer-events: auto;
}
.bar-banner {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: 64px;          /* room for the back button and the language pill */
}
/* The language pill is absolutely positioned over this row. At top:12 with its
   44px min-height it ended at 56px while the row was only 52 tall, so it hung
   past the rule under the header. The row is now tall enough to hold it with
   even space above and below (6 + 44 + 6). */
.lang-toggle { top: 6px; }
.guest-header {
    background: none;
    color: var(--text-primary);
    border-radius: 0;
    padding: 6px 2px 0;
    margin-bottom: 12px;
    gap: 0;
}
.guest-header--flush { padding-left: 2px; padding-right: 2px; }
.guest-header__text h1 { font-size: 1.4rem; color: var(--text-primary); }
.guest-header__text p { color: var(--text-secondary); opacity: 1; }
.guest-header__back {
    position: absolute;
    top: 6px;
    inset-inline-start: 12px;
    z-index: 50;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    font-size: 20px;
    /* Same look as the page's option buttons (see .lang-toggle). */
    color: var(--accent-purple);
    border: 2px solid var(--border-color, #1E2D4A);
    background: color-mix(in srgb, var(--bg-primary, #0a0e27) 38%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.guest-header__back:hover { color: var(--accent-purple); border-color: var(--accent-purple); }
/* The arrow is "←" in the markup: in Hebrew, back points right. */
html[dir="rtl"] .guest-header__back { transform: scaleX(-1); }
/* The venue-switch pill sat on the gold card; give it the page ink now. */
.venue-switch-btn { color: var(--accent-purple); border-color: currentColor; }
.venue-switch-btn:hover, .venue-switch-btn:active { color: var(--accent-purple); }

/* ── "Please wait" sign (busy.js): centered, every AJAX call that takes > 300 ms ── */
.busy-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;                    /* over the cart bar (95) and modals */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.18s ease;
}
.busy-overlay[hidden] { display: none; }
.busy-overlay.on { opacity: 1; }
.busy-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 26px 30px 20px;
    border-radius: 20px;
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
}
.busy-ring {
    position: absolute;
    top: 18px;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0 25%, var(--accent-purple-light), var(--accent-purple));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    animation: busy-spin 1s linear infinite;
}
.busy-glass { width: 72px; height: 72px; padding: 14px; box-sizing: border-box; }
.busy-glass-line { fill: none; stroke: var(--accent-purple); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.busy-liquid { fill: var(--accent-purple); opacity: 0.55; transform-origin: 24px 27px; animation: busy-fill 1.6s ease-in-out infinite; }
.busy-text { color: var(--text-secondary); font-size: 0.95rem; font-weight: 600; }
@keyframes busy-spin { to { transform: rotate(360deg); } }
@keyframes busy-fill { 0%, 100% { transform: scaleY(0.15); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
    .busy-ring, .busy-liquid { animation-duration: 3s; }
}

/* Notification prompt (_Layout): in the page flow at the top — never over the cart bar. */
.push-prompt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 10px 0 4px;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--bg-card);
    border: 1px solid var(--accent-purple);
}
.push-prompt__text { display: inline-flex; align-items: center; gap: 8px; color: var(--text-primary); font-size: 0.9rem; font-weight: 600; }
.push-prompt__actions { display: inline-flex; gap: 6px; flex-shrink: 0; }
.push-prompt__enable, .push-prompt__later {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
}
.push-prompt__enable { background: var(--accent-purple); color: var(--accent-on); border: none; }
.push-prompt__later { background: transparent; color: var(--text-secondary); border: 1px solid rgba(255, 255, 255, 0.12); }

/* ── Pay sheet (pay-first restaurants, 2026-10-28; wwwroot/js/pay.js) ── */
body.pay-open { overflow: hidden; }
.pay-backdrop {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(0, 0, 0, 0.55);
    display: flex; align-items: flex-end; justify-content: center;
}
.pay-sheet {
    width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto;
    /* Some themes use see-through surfaces: blur what is behind so the page never reads through the sheet. */
    background: var(--bg-secondary); color: var(--text-primary);
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    border: 1px solid var(--border-color); border-bottom: none;
    border-radius: 22px 22px 0 0;
    padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column; gap: 12px;
}
.pay-sheet.busy { opacity: 0.85; pointer-events: none; }
.pay-head { display: flex; align-items: center; justify-content: space-between; }
.pay-head h3 { margin: 0; font-size: 1.3rem; font-weight: 700; }
.pay-close {
    width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--border-color);
    background: var(--bg-card); color: var(--text-primary); font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.pay-row { display: flex; justify-content: space-between; gap: 12px; font-size: 1.05rem; color: var(--text-secondary); }
.pay-row span:last-child { color: var(--text-primary); font-weight: 600; white-space: nowrap; }
.pay-total { font-size: 1.25rem; padding-top: 4px; border-top: 1px solid var(--border-color); }
.pay-total span { color: var(--text-primary); font-weight: 700; }
.pay-label { font-weight: 600; color: var(--text-secondary); }
.pay-tips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pay-chip {
    min-height: 52px; border-radius: 14px; border: 1px solid var(--border-color);
    background: var(--bg-card); color: var(--text-primary); font-size: 1.05rem; font-weight: 600; cursor: pointer;
}
.pay-chip.active { background: var(--accent-purple); border-color: var(--accent-purple); color: var(--accent-on); }
.pay-cards { display: flex; flex-direction: column; gap: 8px; }
.pay-cards:empty { display: none; }
.pay-card {
    display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 14px;
    border-radius: 14px; border: 1px solid var(--border-color); background: var(--bg-card); cursor: pointer;
}
.pay-card.active { border-color: var(--accent-purple); }
.pay-card input { width: 22px; height: 22px; accent-color: var(--accent-purple); }
.pay-card-name { flex: 1; font-weight: 600; }
.pay-card-remove {
    min-height: 44px; padding: 0 12px; border-radius: 10px; border: none;
    background: transparent; color: var(--text-secondary); text-decoration: underline; cursor: pointer;
}
.pay-hosted { display: flex; flex-direction: column; gap: 10px; }
.pay-hosted[hidden], .pay-btn[hidden] { display: none; }
/* Heartland's frames don't report their height to this page — size them here. */
.pay-field { min-height: 54px; }
.pay-field iframe { width: 100%; height: 54px !important; border: 0; }
.pay-submit iframe { width: 100%; height: 60px !important; border: 0; }
.pay-field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pay-save { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--text-secondary); }
.pay-save input { width: 22px; height: 22px; accent-color: var(--accent-purple); }
.pay-submit { min-height: 60px; }
.pay-error {
    border: 1px solid var(--danger); color: var(--danger); background: var(--bg-card);
    border-radius: 12px; padding: 12px 14px; font-weight: 600;
}
.pay-note { margin: 0; font-size: 0.85rem; color: var(--text-secondary); text-align: center; }
.ticket-paid {
    display: flex; justify-content: space-between; gap: 12px; margin-top: 10px;
    font-weight: 600; color: var(--success);
}
.ticket-paid--sub { margin-top: 2px; font-weight: 500; font-size: 0.9rem; color: var(--text-secondary); }