/* =====================================================================
   Theme 2 — alternative public menu style.
   Everything is scoped under body.theme-2 so it can NEVER affect Theme 1.
   Adjustable values arrive as CSS variables injected by _MenuTheme2.cshtml
   (--t2-bg, --t2-accent, --t2-heading, etc.) with fallbacks here.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700;9..144,900&family=Playfair+Display:wght@600;700;800;900&family=DM+Serif+Display&family=Poppins:wght@400;500;600&display=swap');

body.theme-2 {
    --t2-bg: #FCEFE3;
    --t2-accent: #E8853A;
    --t2-heading: #7A1E2B;
    --t2-dish-name: #7A1E2B;
    --t2-dish-desc: #8a7a72;
    --t2-price: #7A1E2B;
    --t2-cat: #7A1E2B;
    --t2-cat-active-bg: #7A1E2B;
    --t2-heading-font: 'Fraunces', Georgia, serif;
    --t2-panel: rgba(255, 255, 255, 0.55);

    background-color: var(--t2-bg) !important;
    background-image: none !important;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--t2-heading);
    position: relative;
    min-height: 100vh;
    /* Base CSS sets `body { overflow-x: hidden }`, which turns body into a scroll container and
       breaks `position: sticky` for the category bar. `clip` blocks horizontal scroll the same
       way WITHOUT creating a scroll container, so sticky works again. */
    overflow-x: clip !important;
}

/* Decorative transparent blob overlay (default subtle pattern; overridable via upload) */
body.theme-2::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* Kept low so an uploaded overlay reads as a soft background watermark rather than
       washing over the dish text. The built-in gradient pattern is already very faint. */
    opacity: 0.22;
    background-image:
        radial-gradient(closest-side, rgba(122, 30, 43, 0.05) 96%, transparent 100%),
        radial-gradient(closest-side, rgba(232, 133, 58, 0.05) 96%, transparent 100%);
    background-size: 340px 340px, 260px 260px;
    background-position: 12% 20%, 82% 60%;
    background-repeat: repeat;
}

/* Lift content above the decorative ::before overlay (z-index:0). Keep this
   selector's specificity LOW — bumping it (e.g. adding :not(...) clauses) makes
   it beat body.theme-2 .header { position:absolute } and drops the header into
   flow, misaligning the logo/flag. Modals/backdrops/bar are re-layered below. */
body.theme-2 > *:not(script) { position: relative; z-index: 1; }
/* The rule above also matches the Bootstrap modals/backdrops (direct children of
   body) and would collapse them to position:relative / z-index:1 — dropping the
   bottom sheets below the fixed action bar and behind the footer. Restore their
   native fixed layering with a higher-specificity override. (The action bar sets
   its own position/z-index with !important, so it needs no exclusion here.) */
body.theme-2 .modal { position: fixed; z-index: 1055; }
body.theme-2 .modal-backdrop { z-index: 1050; }

/* Hide Theme 1 chrome that Theme 2 replaces with its own cover/logo */
body.theme-2 .breadcrumb_area { display: none !important; }

/* Language switcher: a single circular flag button (top-right), like the reference */
body.theme-2 .header {
    background: transparent !important;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 30;
    padding-top: 0;
}
body.theme-2 .header .container,
body.theme-2 .header .container_large { max-width: 900px; }
/* Vertically centre the flag on the same 60px band the logo sits in (wrap padding-top 20 +
   logo band 60 → band centre ≈ 50px; header row min-height 100 from top:0 → centre 50px). */
body.theme-2 .header .row { align-items: center; min-height: 100px; }
body.theme-2 #languageDropdown {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Square container; the flag inside carries the shape/border/edge/tilt (like the reference) */
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    border: none !important;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}
body.theme-2 #languageDropdown:hover,
body.theme-2 #languageDropdown:focus { background: #fff; }
/* Hide the language text label and the dropdown caret — flag only */
body.theme-2 #languageDropdown > span:not(.fi) { display: none !important; }
body.theme-2 #languageDropdown.dropdown-toggle::after { display: none !important; }
body.theme-2 #languageDropdown .fi {
    margin: 0 !important;
    width: 2.35rem;
    height: 2.35rem;
    /* Organic blob shape + white border + cream edge + slight tilt, like the reference */
    border-radius: 43% 51% 33% 48% / 48% 40% 52% 38%;
    border: 2px solid #fff;
    box-shadow: 0 4px 0 var(--t2-pill-base, #e4d5c1);
    transform: translateY(-2px) rotate(3deg);
    background-size: cover;
    background-position: center;
}

/* ---------- Layout wrapper ---------- */
body.theme-2 .t2-wrap {
    max-width: 900px;
    margin: 0 auto;
    /* Small bottom padding only: the footer follows this wrapper and the fixed action
       bar overlaps the footer (which carries its own clearance), so a large bottom pad
       here just produces an empty band between the last dish and the footer. */
    padding: 20px 16px 28px;
}

/* Theme 2 ONLY: pin the language flag to the right on mobile (Theme 1 keeps its own centered
   behaviour, which comes from the shared layout's rules — untouched here). */
@media (max-width: 767px) {
    body.theme-2 .header .container .row { justify-content: flex-end !important; }
    body.theme-2 #languageForm { justify-content: flex-end !important; }
    body.theme-2 .header_right,
    body.theme-2 .header_right ul { justify-content: flex-end !important; }
}

/* ---------- Logo (top-left, fully visible, aligned with the language flag row) ---------- */
body.theme-2 .t2-logo {
    display: flex;
    align-items: center;
    /* Fixed-height band; the flag row (in the header) is centred on the same band so
       the logo and flag line up horizontally. */
    height: 60px;
    padding: 0 4px;
    margin: 0 0 14px;
    overflow: visible;
    /* Leave room on the right so the absolute language flag never overlaps the logo */
    max-width: calc(100% - 60px);
}
body.theme-2 .t2-logo img {
    display: block;
    height: auto !important;
    width: auto !important;
    max-height: 52px !important;
    max-width: 100% !important;
    object-fit: contain !important;
}

/* ---------- Cover carousel ---------- */
body.theme-2 .t2-cover {
    position: relative;
    border-radius: 26px;
    overflow: hidden;
    /* Same crisp cream 3D edge as the pills */
    box-shadow: 0 6px 0 0 var(--t2-pill-base, #e4d5c1);
    border: 5px solid #fff;
    background: #fff;
}
body.theme-2 .t2-cover-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
body.theme-2 .t2-cover-slide {
    flex: 0 0 100%;
    aspect-ratio: 16 / 10;
}
body.theme-2 .t2-cover-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
body.theme-2 .t2-cover-dots {
    position: absolute;
    bottom: 14px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
}
body.theme-2 .t2-cover-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
body.theme-2 .t2-cover-dot.active {
    background: var(--t2-accent);
    transform: scale(1.25);
}

/* ---------- WiFi card ---------- */
body.theme-2 .t2-wifi {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border-radius: 18px;
    padding: 14px 18px;
    margin-top: 18px;
    /* Same crisp cream 3D edge as the pills */
    box-shadow: 0 4px 0 0 var(--t2-pill-base, #e4d5c1);
}
body.theme-2 .t2-wifi-icon {
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    /* Organic blob shape + slight tilt, exactly like the reference */
    border-radius: 58% 42% 53% 47% / 44% 56%;
    transform: rotate(-4deg);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Follows the active category colour, with the cream 2px edge */
    background: var(--t2-cat-active-bg);
    color: #fff;
    font-size: 18px;
    box-shadow: 0 2px 0 var(--t2-pill-base, #e4d5c1);
}
body.theme-2 .t2-wifi-body { flex: 1; min-width: 0; }
body.theme-2 .t2-wifi-row {
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.7;
}
body.theme-2 .t2-wifi-label { color: var(--t2-dish-desc); font-size: 0.9rem; }
body.theme-2 .t2-wifi-value { color: var(--t2-heading); font-weight: 600; margin-left: auto; }
body.theme-2 .t2-wifi-copy {
    border: none;
    background: transparent;
    color: var(--t2-accent);
    cursor: pointer;
    padding: 4px;
    font-size: 15px;
}

/* ---------- Sticky pill nav ---------- */
body.theme-2 .t2-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    margin: 18px -16px 2px;
    /* A little vertical room so the pills' 3px bottom edge + press animation aren't clipped
       by the horizontal-scroll box (overflow-x:auto also clips the y axis). Bar is transparent. */
    padding: 12px 16px 14px;
    /* Fully transparent bar — only the pills float above the menu */
    background: transparent;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
body.theme-2 .t2-nav.stuck { background: transparent; }
body.theme-2 .t2-nav::-webkit-scrollbar { display: none; }
body.theme-2 .t2-nav ul {
    display: flex;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
    width: max-content;
}
body.theme-2 .t2-pill {
    display: block;
    white-space: nowrap;
    padding: 9px 20px;
    border-radius: 999px;
    background: #fff;
    color: var(--t2-cat);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    /* Carta-style: no full outline — just a crisp 3px bottom edge. On a fully-rounded pill this
       fades up the sides to ~half height and leaves the top clean (no top line). */
    border: none;
    box-shadow: 0 3px 0 0 var(--t2-pill-base, #e4d5c1);
    transition: background 0.15s, color 0.15s, box-shadow 0.1s, transform 0.1s;
}
body.theme-2 .t2-pill:not(.active):active {
    transform: translateY(3px);
    box-shadow: 0 0 0 0 var(--t2-pill-base, #e4d5c1);
}
body.theme-2 .t2-pill.active {
    background: var(--t2-cat-active-bg);
    color: #fff;
    /* Same crisp bottom edge, in the active colour's darker shade */
    box-shadow: 0 3px 0 0 var(--t2-active-dark, #52141d);
}
body.theme-2 .t2-pill.active:active { transform: translateY(3px); box-shadow: 0 0 0 0 var(--t2-active-dark, #52141d); }

/* ---------- Category sections + alternating soft panels ---------- */
body.theme-2 .t2-section {
    padding: 30px 14px 6px;
    margin: 0 -14px;
    scroll-margin-top: 88px;
}
/* Every other category sits inside a soft rounded panel (like the reference) */
body.theme-2 .t2-section:nth-of-type(even) {
    background: rgba(232, 133, 58, 0.08);
    border-radius: 30px;
    padding-bottom: 26px;
    margin-top: 10px;
    margin-bottom: 10px;
    box-shadow: 0 14px 34px var(--t2-shadow, rgba(163, 145, 122, 0.55));
}

/* ---------- Section headings with hand-drawn swoosh ---------- */
body.theme-2 .t2-section-title {
    font-family: var(--t2-heading-font);
    font-weight: 900;
    font-size: clamp(2rem, 7vw, 3.1rem);
    line-height: 1.05;
    color: var(--t2-heading);
    margin: 0 0 22px;
    display: inline-block;
    position: relative;
}
body.theme-2 .t2-section-title::after {
    content: "";
    position: absolute;
    left: 4%;
    right: 14%;
    bottom: -10px;
    height: 10px;
    background: var(--t2-accent);
    border-radius: 60% 40% 55% 45% / 100% 100% 40% 60%;
    transform: rotate(-1.5deg);
    opacity: 0.9;
}

/* ---------- Item rows (restyle the shared .single_menu_2 card) ---------- */
body.theme-2 .t2-items { display: block; }
body.theme-2 .single_menu_2 {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 2px;
    margin: 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    /* Clean hairline separator BETWEEN dishes (needs !important to beat the reset above) */
    border-bottom: 1px solid rgba(122, 30, 43, 0.14) !important;
    cursor: pointer;
}
body.theme-2 .t2-items .single_menu_2:last-child { border-bottom: 0 !important; }
body.theme-2 .single_menu_2_img {
    order: 2;
    flex: 0 0 84px;
    width: 84px;
    height: 84px;
    border-radius: 14px;
    overflow: hidden;
    margin: 0;
}
body.theme-2 .single_menu_2_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
body.theme-2 .single_menu_2_text {
    order: 1;
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding: 0;
}
/* Kill the classic theme's dotted "leader" line that ran behind the dish title */
body.theme-2 .single_menu_2 .single_menu_2_text a::after { display: none !important; }
body.theme-2 .single_menu_2_text { width: auto; }
body.theme-2 .single_menu_2_text h3 { position: static; }
body.theme-2 .single_menu_2_text .menu_item_info { flex: 1; }
body.theme-2 .single_menu_2_text .title {
    font-family: var(--t2-heading-font);
    font-weight: 700;
    font-size: 1.12rem;
    color: var(--t2-dish-name);
    text-decoration: none;
    display: block;
}
body.theme-2 .single_menu_2_text .title span { color: inherit; transition: color 0.15s ease; }
body.theme-2 .single_menu_2:active .single_menu_2_text .title span { color: var(--t2-accent); }
body.theme-2 .single_menu_2_text p {
    margin: 4px 0 0;
    color: var(--t2-dish-desc);
    font-size: 0.92rem;
    line-height: 1.45;
}
body.theme-2 .single_menu_2_text h3 {
    margin: 0;
    white-space: nowrap;
    font-family: var(--t2-heading-font);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--t2-price);
}
body.theme-2 .single_menu_2 .dish-allergens {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
body.theme-2 .single_menu_2.out-of-stock { opacity: 0.55; }

/* Desktop hover feedback */
@media (hover: hover) {
    body.theme-2 .single_menu_2:hover .single_menu_2_text .title span { color: var(--t2-accent); }
    body.theme-2 .single_menu_2:hover .single_menu_2_img img { transform: scale(1.06); }
}
body.theme-2 .single_menu_2_img img { transition: transform 0.35s ease; }

/* ---------- Scroll-reveal animations (only when JS enables them) ---------- */
body.theme-2.t2-anim .single_menu_2,
body.theme-2.t2-anim .t2-section-title {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.55s ease, transform 0.55s ease;
    will-change: opacity, transform;
}
body.theme-2.t2-anim .single_menu_2.t2-in,
body.theme-2.t2-anim .t2-section-title.t2-in {
    opacity: 1;
    transform: none;
}
body.theme-2.t2-anim .t2-section-title.t2-in::after {
    animation: t2SwooshIn 0.6s ease 0.15s both;
}
@keyframes t2SwooshIn {
    from { transform: rotate(-1.5deg) scaleX(0); opacity: 0; }
    to   { transform: rotate(-1.5deg) scaleX(1); opacity: 0.9; }
}
body.theme-2 .t2-section-title::after { transform-origin: left center; }
@media (prefers-reduced-motion: reduce) {
    body.theme-2.t2-anim .single_menu_2,
    body.theme-2.t2-anim .t2-section-title { opacity: 1; transform: none; transition: none; }
    body.theme-2.t2-anim .t2-section-title.t2-in::after { animation: none; }
}

/* ---------- Footer readability ---------- */
body.theme-2 footer { position: relative; z-index: 1; }

/* ---------- Mobile refinements ---------- */
@media (max-width: 600px) {
    body.theme-2 .t2-wrap { padding: 16px 14px 24px; }

    /* Keep the sticky bar flush to the screen edges without causing horizontal scroll */
    body.theme-2 .t2-nav {
        margin-left: -14px;
        margin-right: -14px;
        padding: 10px 14px 12px;
    }
    body.theme-2 .t2-pill { padding: 8px 16px; font-size: 0.9rem; }

    body.theme-2 .t2-cover { border-radius: 20px; }

    /* Alternating panels align to the screen edges on mobile */
    body.theme-2 .t2-section {
        margin: 0 -14px;
        padding: 26px 14px 4px;
    }
    body.theme-2 .t2-section:nth-of-type(even) {
        border-radius: 24px;
        padding-bottom: 22px;
    }

    body.theme-2 .single_menu_2 { padding: 14px 2px; gap: 12px; }
    body.theme-2 .single_menu_2_img { flex-basis: 68px; width: 68px; height: 68px; }
    body.theme-2 .single_menu_2_text { gap: 10px; }
    body.theme-2 .single_menu_2_text .title { font-size: 1.05rem; }
    body.theme-2 .single_menu_2_text p { font-size: 0.86rem; }
    body.theme-2 .single_menu_2_text h3 { font-size: 1.05rem; }

    body.theme-2 .t2-wifi { padding: 12px 14px; gap: 12px; }
    body.theme-2 .t2-wifi-icon { width: 38px; height: 38px; font-size: 16px; }
}

/* =====================================================================
   Carta-style bottom sheets — every order popup (add-to-order, cart,
   fast-food, delivery, waiter, bill) is a Bootstrap modal, so this generic
   restyle converts them all. Reuses all existing ordering JS.
   ===================================================================== */

/* ---- Generic bottom sheet: slide up from the bottom, rounded top ---- */
body.theme-2 .modal.fade .modal-dialog {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    margin: 0;
    width: 100%;
    max-width: 100%;
    /* Neutralize Bootstrap .modal-dialog-centered (flex + min-height) and
       .modal-dialog-scrollable (height:100%) so the sheet hugs its content
       at the bottom instead of stretching full-height and centering it. */
    display: block;
    align-items: initial;
    min-height: 0;
    height: auto;
    transform: translateY(100%);
    transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}
body.theme-2 .modal.show .modal-dialog { transform: translateY(0); }

body.theme-2 .modal-content {
    position: relative;
    border: none;
    border-radius: 24px 24px 0 0;
    max-height: 92vh;
    background: var(--t2-bg, #FCEFE3);
    color: var(--t2-heading, #7A1E2B);
    box-shadow: 0 -12px 44px rgba(122, 30, 43, 0.20);
    overflow: hidden;
}
/* Drag handle */
body.theme-2 .modal-content::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 5px;
    border-radius: 3px;
    background: var(--t2-pill-base, #e4d5c1);
    z-index: 3;
}
body.theme-2 .modal-header {
    border-bottom: none;
    padding: 24px 22px 6px;
}
body.theme-2 .modal-title {
    font-family: var(--t2-heading-font, 'Fraunces', serif);
    font-weight: 700;
    color: var(--t2-heading);
}
body.theme-2 .modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 22px 16px;
}
body.theme-2 .modal-footer {
    border-top: 1px solid rgba(122, 30, 43, 0.10);
    background: var(--t2-bg, #FCEFE3);
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
    position: sticky;
    bottom: 0;
}

/* ---- Dish sheet content polish ---- */
body.theme-2 #addToOrderModal #modalItemName {
    font-family: var(--t2-heading-font, 'Fraunces', serif);
    font-weight: 700;
    color: var(--t2-heading);
}
/* !important is required: the element carries Bootstrap's .text-primary utility,
   which sets `color: … !important` and would otherwise win (blue price). */
body.theme-2 #addToOrderModal #modalItemPrice { color: var(--t2-price, #7A1E2B) !important; font-weight: 700; }
body.theme-2 #addToOrderModal #modalItemImage { border-radius: 16px !important; }
body.theme-2 #modalItemDescription {
    display: block !important;
    color: var(--t2-dish-desc, #8a7a72);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0 0 4px;
}

/* Quantity stepper (Theme 2 shows the −/+ buttons; native spinner hidden) */
body.theme-2 .t2-qty-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
body.theme-2 .t2-qty-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 14px;
    background: #fff;
    color: var(--t2-heading);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 3px 0 0 var(--t2-pill-base, #e4d5c1);
}
body.theme-2 .t2-qty-btn:active { transform: translateY(3px); box-shadow: 0 0 0 0 var(--t2-pill-base, #e4d5c1); }
body.theme-2 .t2-qty-wrap #itemQuantityInput {
    width: 64px;
    text-align: center;
    font-weight: 700;
    border-radius: 12px;
    -moz-appearance: textfield;
}
body.theme-2 .t2-qty-wrap #itemQuantityInput::-webkit-outer-spin-button,
body.theme-2 .t2-qty-wrap #itemQuantityInput::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Add-on cards */
body.theme-2 #addOnGroupsList .add-on-group h6 {
    font-family: var(--t2-heading-font, 'Fraunces', serif);
    color: var(--t2-heading);
    font-weight: 700;
}
body.theme-2 .add-on-item {
    border: 1.5px solid var(--t2-pill-base, #e4d5c1);
    border-radius: 14px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}
body.theme-2 .add-on-item.selected {
    border-color: var(--t2-cat-active-bg, #7A1E2B);
    box-shadow: inset 0 0 0 1px var(--t2-cat-active-bg, #7A1E2B);
}
body.theme-2 .add-on-name { font-weight: 600; color: var(--t2-heading); }
body.theme-2 .add-on-price { color: var(--t2-cat-active-bg, #7A1E2B); font-weight: 700; }
/* The base menu CSS sizes .add-on-checkbox at 44x28 with border-radius:50%, so a
   single-select radio renders as a squashed white oval. Restore a clean, correctly
   proportioned circular control (Theme 2 only). */
body.theme-2 .add-on-checkbox {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
    border-radius: 50% !important;
    margin: 2px 0 0 !important;
    border: 2px solid var(--t2-pill-base, #e4d5c1) !important;
    cursor: pointer;
}
body.theme-2 .add-on-checkbox:checked { background-color: var(--t2-cat-active-bg, #7A1E2B) !important; border-color: var(--t2-cat-active-bg, #7A1E2B) !important; }

/* Sticky footer bar: total left, prominent full-width Add to Order */
body.theme-2 #addToOrderModal .modal-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}
body.theme-2 #addToOrderModal .modal-footer > div:last-child { display: flex; gap: 10px; }
body.theme-2 #addToOrderModal #confirmAddItemButton {
    flex: 1;
    background: var(--t2-cat-active-bg, #7A1E2B) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 999px;
    padding: 13px 24px;
    font-weight: 700;
    box-shadow: 0 4px 0 0 var(--t2-active-dark, #52141d);
}
body.theme-2 #addToOrderModal #confirmAddItemButton:active { transform: translateY(3px); box-shadow: 0 1px 0 0 var(--t2-active-dark, #52141d); }
body.theme-2 #addToOrderModal #cancelAddItemButton {
    border-radius: 999px;
    background: #fff;
    border: none;
    color: var(--t2-heading);
    box-shadow: 0 3px 0 0 var(--t2-pill-base, #e4d5c1);
}
body.theme-2 #totalPriceDisplay { color: var(--t2-cat-active-bg, #7A1E2B); }

/* Primary buttons inside other order sheets (cart place-order, waiter, bill, delivery) */
body.theme-2 .modal-content .btn-primary,
body.theme-2 .modal-content .btn-success {
    border-radius: 999px;
    border: none;
    background: var(--t2-cat-active-bg, #7A1E2B);
    box-shadow: 0 4px 0 0 var(--t2-active-dark, #52141d);
}

/* =====================================================================
   Bottom action-button row (More actions / View Order / Waiter / Bill).
   These carry inline colours and the base menu CSS colours them with
   ID-level !important, so the theme overrides below must also key off the
   IDs (and their <span>s) to win. Look: warm Carta pills matching the
   category tabs — a filled crimson "View Order" primary, the rest ivory
   pills with a soft peach 3D edge.
   ===================================================================== */
/* Persistent bottom bar: always visible on screen; only the bottom sheet and
   its backdrop (z 1055/1050) may cover it. The base CSS centres the container
   with left:50% + transform:translateX(-50%) and a ~100vw width, so we clear
   the transform and pin it edge-to-edge. z-index 1040 keeps it above the menu
   content (z 1) but below the sheet + backdrop. */
body.theme-2 .action-button-container {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    z-index: 1040;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--t2-bg, #FCEFE3) 62%, rgba(255, 255, 255, 0));
    pointer-events: none;                 /* let taps fall through the empty gaps */
}
body.theme-2 .action-button-row {
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    pointer-events: auto;
}
body.theme-2 .action-button-options,
body.theme-2 #orderStatusBanner { pointer-events: auto; }

/* Order-status pill: match the Carta language — ivory pill with the same crisp
   3D bottom edge as the category tabs / cover / Wi-Fi card, warm heading text,
   and a slightly larger status dot. The dot's status colours are kept (they carry
   meaning: amber=pending, blue=preparing, violet=on the way, green=served). */
body.theme-2 #orderStatusBanner {
    color: var(--t2-heading, #7A1E2B);
    background: #fff;
    border: none;
    border-radius: 999px;
    box-shadow: 0 3px 0 0 var(--t2-pill-base, #e4d5c1), 0 6px 16px var(--t2-shadow, rgba(122, 30, 43, 0.14));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.005em;
    padding: 7px 18px;
    margin-bottom: 12px;
}
body.theme-2 #orderStatusBanner:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 0 var(--t2-pill-base, #e4d5c1), 0 6px 16px var(--t2-shadow, rgba(122, 30, 43, 0.14));
}
body.theme-2 .order-status-dot { width: 8px; height: 8px; }
/* ---------- Footer: structural Theme 2 fit ----------
   Colours stay Appearance-driven (Footer/Header colours, social colours) — we
   only reshape the elements: rounded top, content aligned to the same 900px band
   as the menu, round social chips, and space for the fixed action bar. Any tints
   derive from currentColor so they adapt to whatever colours are configured. */
body.theme-2 footer {
    border-radius: 30px 30px 0 0;
    overflow: hidden;
    margin-top: 24px;
    padding-bottom: 96px !important;   /* clear the fixed action bar */
}
body.theme-2 footer > .container { max-width: 900px; }
body.theme-2 footer .footer_logo img { max-height: 52px; width: auto; }
body.theme-2 footer .list-inline { display: flex; gap: 10px; }
body.theme-2 footer .list-inline-item { margin: 0 !important; }
body.theme-2 footer .list-inline-item > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: color-mix(in srgb, currentColor 14%, transparent);
    transition: transform 0.12s ease, background 0.12s ease;
}
body.theme-2 footer .list-inline-item > a:hover {
    transform: translateY(-2px);
    background: color-mix(in srgb, currentColor 26%, transparent);
}
body.theme-2 footer .footer_copyright { margin-top: 10px; opacity: 0.85; }
body.theme-2 .action-button-main {
    border: none !important;
    border-radius: 999px !important;
    padding: 0 22px !important;
    height: 52px !important;
    min-height: 52px;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    background: #fff !important;
    box-shadow: 0 3px 0 0 var(--t2-pill-base, #e4d5c1) !important;
    transition: transform 0.12s ease, box-shadow 0.12s ease !important;
}
body.theme-2 .action-button-main:active {
    transform: translateY(3px);
    box-shadow: 0 0 0 0 var(--t2-pill-base, #e4d5c1) !important;
}
/* Secondary pills: ivory with theme text + crimson icon (mirrors inactive tabs) */
body.theme-2 #mainActionButton, body.theme-2 #mainActionButton span,
body.theme-2 #request-waiter-btn, body.theme-2 #request-waiter-btn span,
body.theme-2 #request-bill-btn, body.theme-2 #request-bill-btn span {
    color: var(--t2-heading, #080521) !important;
}
body.theme-2 #mainActionButton i,
body.theme-2 #request-waiter-btn i,
body.theme-2 #request-bill-btn i {
    color: var(--t2-cat-active-bg, #7A1E2B) !important;
}
/* Primary CTA: View Order — filled crimson with the darker 3D edge */
body.theme-2 #viewOrderButton {
    background: var(--t2-cat-active-bg, #7A1E2B) !important;
    box-shadow: 0 4px 0 0 var(--t2-active-dark, #52141d) !important;
}
body.theme-2 #viewOrderButton,
body.theme-2 #viewOrderButton span,
body.theme-2 #viewOrderButton i { color: #fff !important; }
body.theme-2 #viewOrderButton:active { box-shadow: 0 1px 0 0 var(--t2-active-dark, #52141d) !important; }
/* Count badge: white pill with the crimson number. Qualify with #viewOrderButton
   so it out-specifies the "#viewOrderButton span { color:#fff }" rule above —
   otherwise the number is white-on-white and unreadable. */
body.theme-2 #viewOrderButton #orderItemCountBadge {
    background: #fff !important;
    color: var(--t2-cat-active-bg, #7A1E2B) !important;
    font-weight: 800 !important;
}

/* "More actions" dropdown options — de-blue the labels, warm the icons */
body.theme-2 .action-option,
body.theme-2 .action-option span,
body.theme-2 .action-option-link { color: var(--t2-heading, #080521) !important; }
body.theme-2 .action-option .icon-wrapper i { color: var(--t2-cat-active-bg, #7A1E2B) !important; }

/* =====================================================================
   On-theme add-on validation (Theme 2): the shared ordering JS surfaces
   "required but missing" errors as a floating dark toast that clashes with
   this theme. A Theme-2-only script (in _MenuTheme2.cshtml) intercepts that
   toast and shows the message INSIDE the sheet instead, styled below, and
   rings the offending required group. Theme 1 keeps the original toast.
   ===================================================================== */
body.theme-2 .t2-addon-error {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 11px 14px;
    margin: 0 0 6px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--t2-cat-active-bg, #ab162c) 10%, transparent);
    color: var(--t2-cat-active-bg, #ab162c);
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: inset 0 0 0 1.5px var(--t2-cat-active-bg, #ab162c);
    animation: t2AddonErr 0.3s ease;
}
body.theme-2 .t2-addon-error i { font-size: 1rem; flex: 0 0 auto; }
/* Ring the required group that's missing a value */
body.theme-2 #addOnGroupsList .add-on-group.t2-invalid {
    background: color-mix(in srgb, var(--t2-cat-active-bg, #ab162c) 6%, transparent);
    box-shadow: 0 0 0 1.5px var(--t2-cat-active-bg, #ab162c);
    border-radius: 14px;
    padding: 10px 12px;
    animation: t2AddonErr 0.3s ease;
}
body.theme-2 #addOnGroupsList .add-on-group.t2-invalid h6 { color: var(--t2-cat-active-bg, #ab162c) !important; }
@keyframes t2AddonErr {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
    100% { transform: translateX(0); }
}

/* =====================================================================
   MOBILE action bar (Theme 2, <= 768px).
   The base menu CSS (_MenuLayout.cshtml) switches .action-button-row to
   flex-direction:column on phones and injects a collapse chevron. In
   Theme 2 that produced a ~300px-tall stack of full-width pills covering
   the bottom third of the screen, with menu content bleeding through the
   semi-transparent gradient container — and the chevron was dead because
   the container is pointer-events:none and the chevron sits outside the
   (pointer-events:auto) row.

   Here we replace that with a compact, OPAQUE bottom-nav: one horizontal
   row of equal-width icon+label cells that never covers content. Scoped to
   body.theme-2 (+ this breakpoint) so Theme 1 and Theme 2 desktop are
   untouched.
   ===================================================================== */
@media (max-width: 768px) {
    body.theme-2 .action-button-container {
        /* Solid bar — no more see-through gradient, so nothing bleeds through */
        background: var(--t2-bg, #FCEFE3) !important;
        border-top: 1px solid var(--t2-pill-base, #e4d5c1);
        box-shadow: 0 -6px 22px rgba(122, 30, 43, 0.14);
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
        /* The whole bar is solid and compact now, so it can take taps directly
           (the pointer-events:none trick was only needed for the tall see-through
           version that let taps fall through its empty gaps). */
        pointer-events: auto !important;
        gap: 0 !important;
    }

    /* Horizontal, single row, equal cells — override the base column stack */
    body.theme-2 .action-button-row {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: space-between !important;
        width: 100% !important;
        gap: 6px !important;
        max-height: none !important;   /* cancel the base collapse animation */
        overflow: visible !important;
        opacity: 1 !important;
    }
    /* The collapse chevron is unreachable (inherits pointer-events:none) and no
       longer needed now that the bar is compact — remove it entirely. */
    body.theme-2 .action-buttons-toggle { display: none !important; }

    /* Each action = a flat, equal-width icon-over-label cell */
    body.theme-2 .action-button-main {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: auto !important;
        height: 56px !important;
        min-height: 56px !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 3px !important;
        padding: 6px 4px !important;
        border-radius: 16px !important;
        background: transparent !important;
        box-shadow: none !important;
        font-size: 0.72rem !important;
        line-height: 1.05 !important;
    }
    /* "More actions" markup is <span> then <i>; reverse so its icon sits on top
       like every other cell. */
    body.theme-2 #mainActionButton { flex-direction: column-reverse !important; }

    body.theme-2 .action-button-main i {
        font-size: 1.15rem !important;
        margin: 0 !important;
    }
    body.theme-2 .action-button-main span {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        white-space: normal;
        text-align: center;
        max-width: 100%;
        font-size: 0.68rem !important;
        font-weight: 600;
    }

    /* Primary CTA: View Order stands out as a filled crimson cell */
    body.theme-2 #viewOrderButton {
        background: var(--t2-cat-active-bg, #7A1E2B) !important;
        box-shadow: 0 3px 0 0 var(--t2-active-dark, #52141d) !important;
        position: relative;
    }
    body.theme-2 #viewOrderButton:active {
        transform: translateY(2px);
        box-shadow: 0 1px 0 0 var(--t2-active-dark, #52141d) !important;
    }
    /* Count badge: small chip pinned to the cell's top-right (the inline ms-2
       badge would otherwise push onto its own line in the column layout). */
    body.theme-2 #viewOrderButton #orderItemCountBadge {
        position: absolute;
        top: 4px;
        right: 6px;
        margin: 0 !important;
        min-width: 18px;
        padding: 1px 5px !important;
        font-size: 0.6rem !important;
        line-height: 1.4;
    }

    /* Press feedback for the flat cells */
    body.theme-2 .action-button-main:active { transform: translateY(1px); }

    /* More-actions dropdown: keep it above the bar, sized to the screen. Zero its
       base 15px bottom margin — collapsed, that margin just padded out the solid bar. */
    body.theme-2 .action-button-options {
        width: calc(100vw - 24px) !important;
        max-width: 420px;
        margin-bottom: 0 !important;
    }

    /* Status pill: float it as a detached chip ABOVE the solid bar (over the menu),
       instead of stacking inside it — otherwise its height thickens the opaque bar.
       Absolute removes it from the bar's flow, so the bar hugs just the button row. */
    body.theme-2 #orderStatusBanner {
        position: absolute;
        left: 50%;
        bottom: 100%;
        transform: translateX(-50%);
        margin: 0 0 10px !important;
        z-index: 2;
    }
    body.theme-2 #orderStatusBanner:active {
        transform: translateX(-50%) translateY(3px);
    }
}