/* =================================================================
 * Bangalore Cafe Xpress — Daily Specials public CSS (v1.12.4)
 *
 * Customer-facing /specials/ page reached via the table QR code.
 * Mobile-first; the entire layout collapses to a single column on
 * phones because that's the dominant viewport here. Cards are
 * intentionally photo-forward so dishes look mouth-watering on a
 * 6-inch screen at the table.
 *
 * v1.12.1 — Items are now grouped by their bcx_category taxonomy
 * with a sticky chip filter bar so customers can jump straight to
 * "Tiffin", "Dosas", "Drinks" etc. instead of scanning a flat list.
 *
 * v1.12.4 — Adds a Cards/Menu view-mode toggle. Cards mode is the
 * existing photo-forward layout. Menu mode collapses each item to
 * a single-line printed-menu-card row (name on the left, dotted
 * leader, price on the right) for customers who just want to scan
 * the list quickly without scrolling through photos.
 * ================================================================= */

.bcx-specials {
    max-width: 880px;
    margin: 0 auto;
    padding: 28px 18px 48px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1f2a30;
}

.bcx-specials-head {
    text-align: center;
    margin-bottom: 22px;
}
.bcx-specials-head h1 {
    margin: 0 0 6px;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #0a3a23;
}
.bcx-specials-sub {
    margin: 0 0 4px;
    color: #4a5b62;
    font-size: 15px;
}
.bcx-specials-stamp {
    margin: 0;
    font-size: 12px;
    color: #8190;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.bcx-specials-empty {
    text-align: center;
    padding: 40px 18px;
    background: #f8faf9;
    border: 1px dashed #cfdbd0;
    border-radius: 14px;
    color: #4a5b62;
}
.bcx-specials-empty p { margin: 0; font-size: 16px; }

.bcx-specials-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr;
}
@media (min-width: 600px) {
    .bcx-specials-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

.bcx-special-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(15, 30, 25, 0.08);
    border: 1px solid #ecf1ee;
    display: flex;
    flex-direction: column;
    transition: transform .15s ease, box-shadow .2s ease;
}
.bcx-special-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 28px rgba(15, 30, 25, 0.12);
}

.bcx-special-photo {
    width: 100%;
    aspect-ratio: 16 / 10;
    background-size: cover;
    background-position: center;
    background-color: #eef3ef;
}
.bcx-special-photo-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 56px;
    color: #b9c9be;
    background: linear-gradient(135deg, #f4f8f5, #e8efe9);
}

.bcx-special-body {
    padding: 14px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
}

.bcx-special-titlerow {
    display: flex;
    align-items: center;
    gap: 8px;
}
.bcx-special-vegdot {
    width: 14px;
    height: 14px;
    border: 2px solid #d44;
    background: #d44;
    box-shadow: inset 0 0 0 3px #fff;
    flex-shrink: 0;
    border-radius: 2px;
}
.bcx-special-card.is-veg .bcx-special-vegdot {
    border-color: #1f8a4c;
    background: #1f8a4c;
}
.bcx-special-name {
    margin: 0;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 600;
    color: #0a2a1a;
    flex: 1 1 auto;
}

.bcx-special-desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: #4a5b62;
}

.bcx-special-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}
.bcx-special-price {
    font-size: 18px;
    font-weight: 700;
    color: #0a3a23;
    margin-right: auto;
}
.bcx-special-badge {
    font-size: 11px;
    line-height: 1;
    padding: 5px 9px;
    border-radius: 999px;
    background: #eef4f0;
    color: #2a4a36;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.bcx-special-badge-spicy    { background: #ffe6e1; color: #b22a13; }
.bcx-special-badge-favorite { background: #fff3cd; color: #8a6300; }
.bcx-special-badge-gf       { background: #e6f0ff; color: #1d4faa; }
.bcx-special-badge-vegan    { background: #e6f5ec; color: #1f7a45; }

.bcx-specials-fullmenu {
    text-align: center;
    margin: 28px 0 0;
}
.bcx-specials-fullmenu a {
    display: inline-block;
    padding: 12px 22px;
    background: #0a3a23;
    color: #fff;
    text-decoration: none;
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
    transition: background .15s ease;
}
.bcx-specials-fullmenu a:hover { background: #135233; color: #fff; }

@media (max-width: 480px) {
    .bcx-specials-head h1 { font-size: 26px; }
    .bcx-special-photo    { aspect-ratio: 4 / 3; }
}

/* -----------------------------------------------------------------
 * Category filter chips + per-category sections (v1.12.1)
 *
 * The chip bar is sticky on mobile so it travels with the customer
 * as they scroll — they can re-filter without scrolling back up.
 * Active chip is filled BCX-green; inactive chips are pill outlines.
 * Counts inside chips are tiny so the category label dominates.
 * ----------------------------------------------------------------- */
.bcx-specials-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 2px 14px;
    margin: 0 0 6px;
    position: sticky;
    top: 0;
    z-index: 5;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(255, 255, 255, 0.96) 70%,
        rgba(255, 255, 255, 0) 100%
    );
    backdrop-filter: saturate(180%) blur(6px);
    -webkit-backdrop-filter: saturate(180%) blur(6px);
}

.bcx-specials-chip {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid #cfdbd0;
    background: #fff;
    color: #1f2a30;
    padding: 7px 13px;
    border-radius: 999px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
    white-space: nowrap;
}
.bcx-specials-chip:hover {
    border-color: #0a3a23;
    color: #0a3a23;
}
.bcx-specials-chip:active {
    transform: translateY(1px);
}
.bcx-specials-chip.is-active {
    background: #0a3a23;
    border-color: #0a3a23;
    color: #fff;
}

.bcx-specials-chip-count {
    display: inline-block;
    min-width: 18px;
    padding: 2px 6px;
    border-radius: 999px;
    background: #eef4f0;
    color: #2a4a36;
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    text-align: center;
}
.bcx-specials-chip.is-active .bcx-specials-chip-count {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.bcx-specials-section {
    margin-top: 22px;
}
.bcx-specials-section:first-of-type {
    margin-top: 6px;
}
.bcx-specials-section.is-hidden {
    display: none;
}

.bcx-specials-section-title {
    margin: 0 0 12px;
    padding: 0 2px 6px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    color: #0a3a23;
    letter-spacing: -0.01em;
    border-bottom: 1px solid #e6ece8;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.bcx-specials-section-count {
    font-size: 12px;
    font-weight: 600;
    color: #6a7a72;
    letter-spacing: 0.04em;
}
.bcx-specials-section-count::before { content: "("; }
.bcx-specials-section-count::after  { content: ")"; }

/* The "Today only" pinned section gets a subtle accent so free-form
 * one-offs feel special even when other categories are present. */
.bcx-specials-section[data-cat="today-only"] .bcx-specials-section-title {
    color: #8a4a00;
    border-bottom-color: #f0e2c8;
}

/* Mobile: collapse the filter strip to a single horizontal-scroll row
 * (v1.20.1). Wrap-to-three-rows was producing a ~140px sticky bar that
 * covered the first three menu items as the customer scrolled. Single
 * row keeps the sticky element ~50px tall; a right-edge fade hints
 * that the user can swipe sideways to find a category. Scrollbar is
 * hidden because we already provide the fade affordance.
 *
 * The wrapping `.bcx-specials-filters-wrap` is purely a positioning
 * container for the fade-out gradient — the real scroll surface is
 * still `.bcx-specials-filters` so existing JS that targets it keeps
 * working. */
@media (max-width: 640px) {
    .bcx-specials-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        /* Mask the right edge so the last chip fades out — tells the
         * user there's more to scroll without occupying real estate. */
        -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
                mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
        padding: 8px 24px 10px 2px;
        gap: 6px;
    }
    .bcx-specials-filters::-webkit-scrollbar { display: none; }
    .bcx-specials-chip {
        flex: 0 0 auto;
        scroll-snap-align: start;
        font-size: 12px;
        padding: 6px 11px;
    }
    .bcx-specials-section-title { font-size: 16px; }
}

/* Older breakpoint kept as a no-op landmark for downstream overrides. */
@media (max-width: 480px) {
    .bcx-specials-chip { padding: 6px 10px; }
}

/* -----------------------------------------------------------------
 * View-mode toggle (Cards / Menu) — v1.12.4
 *
 * The toggle sits just under the headline so customers see it before
 * the filter bar. It's a two-button segmented control: filled-pill
 * for the active mode, outlined for the other.
 *
 * In list mode, each special collapses to a single horizontal row —
 * name on the left, a dotted leader, then the price flush right —
 * so the whole page looks like a printed restaurant menu card. The
 * photo, description, and badges hide so customers can scan quickly.
 * ----------------------------------------------------------------- */
.bcx-specials-modebar {
    display: inline-flex;
    align-self: center;
    gap: 0;
    margin: 6px auto 14px;
    padding: 4px;
    background: #eef4f0;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px #dde7e0;
}
.bcx-specials-head + .bcx-specials-modebar,
.bcx-specials-empty + .bcx-specials-modebar {
    display: flex;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
}
/* Center the modebar regardless of where it lands inside .bcx-specials. */
.bcx-specials > .bcx-specials-modebar {
    display: flex;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
}

.bcx-specials-modebtn {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    color: #4a5b62;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.bcx-specials-modebtn:hover { color: #0a3a23; }
.bcx-specials-modebtn.is-active {
    background: #fff;
    color: #0a3a23;
    box-shadow: 0 1px 3px rgba(15, 30, 25, 0.12);
}
.bcx-specials-modebtn-icon { font-size: 14px; line-height: 1; }

/* ---- LIST MODE OVERRIDES ----------------------------------------
 * Flatten every card into a single horizontal row. We keep the
 * grid one-column in list mode so the leader dots align cleanly.
 * The veg/non-veg dot stays so dietary cues don't disappear.
 * Photos, descriptions, and badge pills hide — the price still
 * shows, anchored to the right. A flex spacer with a dotted bottom
 * border draws the leader between the name and the price.
 * ----------------------------------------------------------------- */
.bcx-specials.is-list-mode .bcx-specials-grid {
    grid-template-columns: 1fr;
    gap: 0;
}
.bcx-specials.is-list-mode .bcx-special-card {
    box-shadow: none;
    border: 0;
    border-bottom: 1px dotted #cfdbd0;
    border-radius: 0;
    background: transparent;
    flex-direction: row;
    align-items: baseline;
    padding: 10px 4px;
    transition: none;
}
.bcx-specials.is-list-mode .bcx-special-card:hover {
    transform: none;
    box-shadow: none;
}
.bcx-specials.is-list-mode .bcx-special-card:last-child {
    border-bottom: 0;
}
.bcx-specials.is-list-mode .bcx-special-photo { display: none; }
.bcx-specials.is-list-mode .bcx-special-desc  { display: none; }
.bcx-specials.is-list-mode .bcx-special-badge { display: none; }

.bcx-specials.is-list-mode .bcx-special-body {
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
    padding: 0;
    width: 100%;
}
.bcx-specials.is-list-mode .bcx-special-titlerow {
    flex: 0 1 auto;
    min-width: 0;
}
.bcx-specials.is-list-mode .bcx-special-name {
    font-size: 16px;
    font-weight: 600;
    white-space: normal;
}
.bcx-specials.is-list-mode .bcx-special-vegdot {
    width: 11px;
    height: 11px;
    border-width: 1.5px;
}

/* Dotted leader: a flex-grow:1 spacer with a dotted bottom border
 * sitting on the baseline. Pure CSS — no extra DOM needed. */
.bcx-specials.is-list-mode .bcx-special-body::before {
    content: "";
    flex: 1 1 auto;
    align-self: end;
    margin: 0 6px 6px;
    border-bottom: 1.5px dotted #b9c9be;
    min-width: 24px;
}

.bcx-specials.is-list-mode .bcx-special-foot {
    flex: 0 0 auto;
    margin-top: 0;
    gap: 0;
}
.bcx-specials.is-list-mode .bcx-special-price {
    margin-right: 0;
    font-size: 16px;
    font-weight: 700;
    color: #0a3a23;
}

/* Tighten section titles in list mode — they're acting like menu
 * card section headers, not photo-card group dividers. */
.bcx-specials.is-list-mode .bcx-specials-section { margin-top: 18px; }
.bcx-specials.is-list-mode .bcx-specials-section-title {
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid #d6e0d9;
    padding-bottom: 4px;
    margin-bottom: 6px;
}

@media (max-width: 480px) {
    .bcx-specials-modebtn { font-size: 12px; padding: 7px 14px; }
    .bcx-specials.is-list-mode .bcx-special-name  { font-size: 15px; }
    .bcx-specials.is-list-mode .bcx-special-price { font-size: 15px; }
}