/* ==========================================================================
   Bab Sharqi Digital Restaurant Menu Design System
   Responsive: phone -> tablet / iPad -> desktop, portrait & landscape
   ========================================================================== */

:root {
    --bg-main: #F9E3CC;
    --bg-surface: #FDF3E7;
    --bg-card: #FFFFFF;
    --bg-card-hover: #F3D9BB;

    --primary-gold: #9C3B1D;
    --primary-gold-bright: #D2793D;
    --primary-gold-glow: rgba(156, 59, 29, 0.4);

    --accent-cyan: #4A2A18;
    --accent-cyan-bright: #9C3B1D;

    --accent-veg: #2E7D32;
    --accent-veg-bright: #388E3C;
    --accent-veg-glow: rgba(46, 125, 50, 0.45);
    --accent-ember: #B5301A;

    --text-light: #2B160D;
    --text-muted: #6B4530;
    --border-dark: rgba(74, 42, 24, 0.15);

    --shadow-glow: 0 0 25px rgba(156, 59, 29, 0.4);
    --shadow-card: 0 8px 24px rgba(74, 42, 24, 0.12);

    --font-en: 'Outfit', sans-serif;
    --font-ar: 'Tajawal', sans-serif;

    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 24px;
    --radius-full: 9999px;

    --transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);

    /* Kept in sync with the header's actual rendered height by
       syncHeaderHeight() in app.js — staff controls live inside the header
       itself and can wrap onto a second line, so this grows/shrinks with it. */
    --header-h: 80px;
    --gutter: clamp(1rem, 3vw, 2rem);
}

/* Global Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    background-color: var(--bg-main);
    color: var(--text-light);
    line-height: 1.6;
}

html {
    /* Stop iOS/Android from inflating text in landscape */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-en);
    /* Safety net: no sideways scroll if a child overshoots. `clip` (not
       `hidden`) so the sticky sidebar keeps working. */
    overflow-x: clip;
}

html[dir="rtl"] body {
    font-family: var(--font-ar);
}

img {
    max-width: 100%;
}

button, input {
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}

/* This runs exclusively on iPad/iPhone kiosks — no mouse, ever — so every
   tappable surface skips the ~300ms click delay, iOS's long-press callout
   (save-image / text-selection popup), and accidental text selection. */
button,
[role="button"],
.kiosk-food-card,
.cat-tile-btn,
.hero-photo-btn,
.lang-btn,
.admin-card-btn,
.cart-btn,
.staff-access-btn,
.modal-close,
.variant-btn,
.close-modal-btn,
.add-to-cart-btn,
.modal-qty-stepper button,
.cart-item-qty button,
.cart-item-remove {
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

img {
    -webkit-touch-callout: none;
}

/* Header Navigation Bar */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 0.75rem var(--gutter);
    /* Respect notch / rounded-corner insets on phones */
    padding-top: max(0.75rem, env(safe-area-inset-top, 0px));
    padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
    padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
    /* Solid and opaque on the menu screen - it sits over a light, busy
       blurred food-photo backdrop there, so a translucent/blurred header
       (which only reads well over the dark hero video) just muddied
       everything into low contrast. .header-on-hero below overrides this
       back to fully transparent for the hero screen specifically. */
    background: #F9E3CC;
    border-bottom: 1px solid rgba(74, 42, 24, 0.15);
    transition: var(--transition), transform 0.3s ease;
}

/* Auto-hide on the way down while scrolling the menu on phones/portrait
   tablets - see initHeaderAutoHide() in app.js. */
.main-header.header-hidden {
    transform: translateY(-100%);
}

/* On the hero screen only, the header has no bar of its own at all - logo,
   language pill, cart and login just float directly over the video with
   nothing behind them. showHomeScreen()/openMenuSection() in app.js toggle
   this class; !important is needed to beat the second .main-header block's
   own !important background/border-bottom declarations further down. */
.main-header.header-on-hero {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.brand-logo {
    cursor: pointer;
    min-width: 0;
}

.logo-flex {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.brand-logo-img {
    height: clamp(36px, 6vw, 48px);
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 10px var(--primary-gold-glow));
}

.brand-title-wrap {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.arabic-logo {
    font-family: var(--font-ar);
    font-size: clamp(1.05rem, 3vw, 1.35rem);
    font-weight: 900;
    color: var(--primary-gold-bright);
    line-height: 1;
    white-space: nowrap;
}

.english-logo {
    font-size: clamp(0.55rem, 1.6vw, 0.65rem);
    letter-spacing: 2.5px;
    color: var(--text-light);
    font-weight: 700;
    white-space: nowrap;
}

.home-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: rgba(156, 59, 29, 0.2);
    border: 1px solid var(--primary-gold-bright);
    color: var(--primary-gold-bright);
    padding: 0.45rem 1.2rem;
    min-height: 40px;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    transition: var(--transition);
}

.home-nav-btn:hover {
    background: var(--primary-gold-bright);
    color: white;
    box-shadow: var(--shadow-glow);
}

/* 2 Language Switcher Buttons */
.lang-switch-container {
    display: flex;
    background: rgba(255, 255, 255, 0.06);
    padding: 3px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-dark);
}

.lang-btn {
    border: none;
    background: transparent;
    color: var(--text-muted);
    padding: 0.45rem 1.1rem;
    min-height: 36px;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition);
}

.lang-btn.active {
    background: linear-gradient(135deg, var(--primary-gold-bright), var(--primary-gold));
    color: white;
    box-shadow: 0 4px 12px var(--primary-gold-glow);
}

/* SCREEN 1: Landing Screen — fills the viewport, but grows and scrolls
   instead of clipping when the screen is too short for the content. */
.hero-screen {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh; /* excludes mobile browser chrome */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--header-h) + 1.5rem) var(--gutter) 2rem var(--gutter);
    padding-bottom: max(2rem, calc(env(safe-area-inset-bottom, 0px) + 1rem));
    overflow: hidden;
    color: white;
    text-align: center;
}

.hero-bg-container {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #0F0E0C;
}

/* cover fills the screen edge-to-edge on every device/aspect ratio (phone
   portrait, tablet landscape, desktop widescreen) with zero letterboxing —
   the browser center-crops whichever axis overflows, so this stays "full
   screen and responsive" with no per-device media queries needed. */
.hero-bg-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(1.15) contrast(1.05);
    pointer-events: none;
}

@keyframes zoomBg {
    from { transform: scale(1); }
    to { transform: scale(1.08); }
}

.hero-gradient-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(15, 14, 12, 0.05) 0%, rgba(15, 14, 12, 0.45) 100%);
}

.flame-glow-effect {
    position: absolute;
    bottom: -10%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 300px;
    background: radial-gradient(ellipse at bottom, rgba(181, 48, 26, 0.35) 0%, transparent 70%);
    pointer-events: none;
    animation: pulseFlame 3s ease-in-out infinite alternate;
}

@keyframes pulseFlame {
    from { opacity: 0.6; transform: translateX(-50%) scale(1); }
    to { opacity: 1; transform: translateX(-50%) scale(1.15); }
}

#embersCanvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* A soft, localized dark vignette behind just the title/subtitle/buttons -
   the video itself is deliberately bright now, so instead of re-darkening
   the whole hero (which would undo that), only the text block gets a bit
   of contrast backing, wherever it happens to land on the footage. */
.hero-content::before {
    content: "";
    position: absolute;
    inset: -2rem -1.5rem;
    z-index: -1;
    background: radial-gradient(ellipse at center, rgba(10, 8, 6, 0.4) 0%, rgba(10, 8, 6, 0.15) 55%, transparent 80%);
    pointer-events: none;
}

.hero-title {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 1rem;
}

.title-main {
    font-size: clamp(2.4rem, 8vw, 4.5rem);
    font-weight: 900;
    letter-spacing: -1px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F7D29E 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.05;
    /* text-shadow doesn't render on background-clip:text reliably across
       browsers - drop-shadow works on the rendered glyph shape instead. */
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.8)) drop-shadow(0 1px 4px rgba(0, 0, 0, 0.9));
}

.title-ar {
    font-family: var(--font-ar);
    font-size: clamp(1.5rem, 5vw, 2.6rem);
    color: var(--primary-gold-bright);
    font-weight: 800;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75), 0 1px 3px rgba(0, 0, 0, 0.9);
}

.hero-subtitle {
    font-size: clamp(0.9rem, 2.2vw, 1.15rem);
    color: rgba(255, 255, 255, 0.9);
    max-width: 680px;
    margin-bottom: clamp(1.4rem, 4vh, 2.5rem);
    font-weight: 300;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75), 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* 2 Main Hero Photo Background Buttons */
.hero-primary-btns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(0.8rem, 2vw, 1.3rem);
    width: 100%;
    max-width: 600px;
}

.hero-photo-btn {
    position: relative;
    border: none;
    border-radius: 20px;
    padding: clamp(1.2rem, 3.2vw, 1.8rem) clamp(1rem, 2.4vw, 1.4rem);
    min-height: clamp(130px, 15vw, 175px);
    cursor: pointer;
    overflow: hidden;
    background: var(--bg-surface);
    transition: var(--transition);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
    text-align: center;
}

/* Always-on floating + flickering ember glow — this is a touch-only kiosk,
   so a :hover-only effect would never actually be seen. No hard border;
   the "frame" is the warm light pooling under the card instead, like it
   sits near the coals. Each card flickers on its own timer so the two
   never move in sync, reading as alive rather than mechanically repeating. */
@keyframes flameFloatWarm {
    0%   { transform: translateY(0);     box-shadow: 0 10px 26px rgba(0,0,0,0.35), 0 0 16px rgba(181, 48, 26, 0.35), 0 0 3px rgba(210, 121, 61, 0.4); }
    22%  { transform: translateY(-9px);  box-shadow: 0 18px 34px rgba(0,0,0,0.4), 0 0 36px rgba(181, 48, 26, 0.65), 0 0 10px rgba(210, 121, 61, 0.65); }
    45%  { transform: translateY(-3px);  box-shadow: 0 13px 28px rgba(0,0,0,0.36), 0 0 22px rgba(181, 48, 26, 0.45), 0 0 5px rgba(210, 121, 61, 0.5); }
    70%  { transform: translateY(-11px); box-shadow: 0 20px 38px rgba(0,0,0,0.42), 0 0 40px rgba(181, 48, 26, 0.7), 0 0 12px rgba(210, 121, 61, 0.7); }
    100% { transform: translateY(0);     box-shadow: 0 10px 26px rgba(0,0,0,0.35), 0 0 16px rgba(181, 48, 26, 0.35), 0 0 3px rgba(210, 121, 61, 0.4); }
}

@keyframes flameFloatCool {
    0%   { transform: translateY(0);     box-shadow: 0 10px 26px rgba(0,0,0,0.35), 0 0 16px rgba(56, 142, 60, 0.3), 0 0 3px rgba(210, 121, 61, 0.4); }
    22%  { transform: translateY(-10px); box-shadow: 0 18px 34px rgba(0,0,0,0.4), 0 0 34px rgba(56, 142, 60, 0.55), 0 0 10px rgba(210, 121, 61, 0.6); }
    45%  { transform: translateY(-4px);  box-shadow: 0 13px 28px rgba(0,0,0,0.36), 0 0 22px rgba(56, 142, 60, 0.4), 0 0 5px rgba(210, 121, 61, 0.5); }
    70%  { transform: translateY(-9px);  box-shadow: 0 20px 38px rgba(0,0,0,0.42), 0 0 38px rgba(56, 142, 60, 0.6), 0 0 12px rgba(210, 121, 61, 0.65); }
    100% { transform: translateY(0);     box-shadow: 0 10px 26px rgba(0,0,0,0.35), 0 0 16px rgba(56, 142, 60, 0.3), 0 0 3px rgba(210, 121, 61, 0.4); }
}

.btn-photo-main {
    animation: flameFloatWarm 3.6s ease-in-out infinite;
}

.btn-photo-veg {
    animation: flameFloatCool 3.9s ease-in-out infinite 0.6s;
}

.photo-btn-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.photo-btn-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(0.6) contrast(1.1);
    transition: transform 0.6s ease;
}

.hero-photo-btn:hover .photo-btn-bg img {
    transform: scale(1.12);
    filter: brightness(0.7) contrast(1.15);
}

/* Lighter through the middle so the food photo actually reads as a photo,
   darker only where the text sits — the old version washed the whole
   image out with near-black from top to bottom. */
.photo-btn-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(15, 14, 12, 0.08) 0%, rgba(15, 14, 12, 0.18) 40%, rgba(15, 14, 12, 0.92) 100%);
    transition: var(--transition);
}

.hero-photo-btn:hover {
    animation-play-state: paused;
    transform: translateY(-8px) scale(1.03);
    box-shadow: var(--shadow-glow), 0 22px 46px rgba(0, 0, 0, 0.5);
}

.hero-photo-btn:hover .photo-btn-overlay {
    background: linear-gradient(180deg, rgba(156, 59, 29, 0.18) 0%, rgba(15, 14, 12, 0.2) 40%, rgba(15, 14, 12, 0.94) 100%);
}

.photo-btn-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    color: white;
}

/* --------------------------------------------------------------------------
   Ambient motion inside the two entry cards.
   This runs continuously rather than on :hover — the menu lives on an iPad,
   where there is no hover state to trigger anything.
   -------------------------------------------------------------------------- */

/* 1. Slow Ken Burns drift on the card photo. Applied to the wrapper, not the
      <img>, so the existing hover scale on the image still composes on top.
      The two cards use different paths and durations so they never sync up. */
.btn-photo-main .photo-btn-bg {
    animation: kenBurnsWarm 19s ease-in-out infinite alternate;
}

.btn-photo-veg .photo-btn-bg {
    animation: kenBurnsCool 24s ease-in-out infinite alternate;
}

@keyframes kenBurnsWarm {
    from { transform: scale(1.06) translate3d(-1.5%, 1.2%, 0); }
    to   { transform: scale(1.17) translate3d(1.5%, -1.5%, 0); }
}

@keyframes kenBurnsCool {
    from { transform: scale(1.15) translate3d(1.6%, -1%, 0); }
    to   { transform: scale(1.05) translate3d(-1.4%, 1.6%, 0); }
}

/* 2. A light sheen that sweeps across the photo every few seconds. Sits above
      the overlay (z2) but below the text (z3) so it never washes out the label. */
.hero-photo-btn::after {
    content: "";
    position: absolute;
    top: -50%;
    bottom: -50%;
    left: -60%;
    width: 42%;
    z-index: 2;
    pointer-events: none;
    transform: skewX(-18deg);
    background: linear-gradient(100deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.08) 42%,
        rgba(255, 238, 210, 0.26) 50%,
        rgba(255, 255, 255, 0.08) 58%,
        rgba(255, 255, 255, 0) 100%);
    animation: cardSheen 7s ease-in-out infinite;
}

/* Offset so the two cards shine in turn instead of together */
.btn-photo-veg::after {
    animation-delay: 3.5s;
}

@keyframes cardSheen {
    0%, 58%  { left: -60%; opacity: 0; }
    62%      { opacity: 1; }
    96%      { left: 118%; opacity: 1; }
    100%     { left: 118%; opacity: 0; }
}

.btn-text {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.btn-title {
    font-size: clamp(1.15rem, 2.8vw, 1.5rem);
    font-weight: 900;
    letter-spacing: 1.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

.btn-sub {
    font-size: clamp(0.76rem, 1.7vw, 0.86rem);
    opacity: 0.95;
    font-weight: 500;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

/* "Portal" screen transition - see animateCategoryReveal() in app.js. An
   expanding circle centered on the tapped button reveals the menu screen
   underneath while the hero screen fades away. */
.menu-screen.reveal-transitioning {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    margin-top: 0;
    z-index: 2500;
}

.hero-screen.reveal-fading {
    position: relative;
    z-index: 2400;
    transition: opacity 0.5s ease;
}

/* SCREEN 2: Digital Menu Browser Screen */
.menu-screen {
    padding: calc(var(--header-h) + 1.5rem) var(--gutter) clamp(2rem, 5vw, 4rem) var(--gutter);
    padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
    padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
    max-width: 1900px;
    margin: 0 auto;
}

.menu-container {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    gap: clamp(1.2rem, 2.5vw, 2.5rem);
}

/* Sidebar */
.category-sidebar {
    background: var(--bg-surface);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    border: 1px solid var(--border-dark);
    box-shadow: var(--shadow-card);
    height: fit-content;
    position: sticky;
    top: calc(var(--header-h) + 1rem);
    min-width: 0;
}

.sidebar-header {
    margin-bottom: 1rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px dashed var(--border-dark);
}

.back-home-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-dark);
    color: var(--text-light);
    padding: 0.5rem 1rem;
    min-height: 42px;
    border-radius: var(--radius-full);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    width: 100%;
    justify-content: center;
}

.back-home-link:hover {
    background: var(--primary-gold);
    color: white;
    border-color: var(--primary-gold);
}

.sidebar-title {
    font-size: 1.1rem;
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--primary-gold-bright);
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--border-dark);
}

.category-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cat-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 1rem;
    min-height: 46px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    text-align: left;
}

html[dir="rtl"] .cat-btn {
    text-align: right;
}

.cat-btn i {
    font-size: 1.1rem;
    width: 24px;
    text-align: center;
}

.cat-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-light);
}

.cat-btn.active {
    background: linear-gradient(135deg, var(--primary-gold-bright), var(--primary-gold));
    color: white;
    box-shadow: 0 4px 14px var(--primary-gold-glow);
}

/* Sidebar Veg Card */
.sidebar-veg-card {
    margin-top: 2rem;
    background: rgba(46, 125, 50, 0.15);
    border: 1px solid rgba(46, 125, 50, 0.4);
    border-radius: var(--radius-sm);
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.veg-card-icon {
    color: var(--accent-veg);
    font-size: 1.4rem;
}

.veg-card-text {
    flex: 1;
    min-width: 0;
}

.veg-card-text h4 {
    font-size: 0.85rem;
    color: #A5D6A7;
}

.veg-card-text p {
    font-size: 0.72rem;
    color: #C8E6C9;
}

/* Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 44px;
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #444;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3);
    transition: .4s;
    border-radius: 24px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: var(--accent-veg-bright);
}

input:checked + .slider:before {
    transform: translateX(20px);
}

html[dir="rtl"] input:checked + .slider:before {
    transform: translateX(-20px);
}

/* Menu Content & Cards */
.menu-content {
    min-width: 0;
}

.menu-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: clamp(1.2rem, 3vw, 2rem);
    flex-wrap: wrap;
    gap: 1rem;
}

.menu-heading {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    min-width: 0;
}

.menu-heading h2 {
    font-size: clamp(1.35rem, 3.5vw, 2rem);
    color: var(--text-light);
    font-weight: 800;
}

.items-count-badge {
    background: rgba(156, 59, 29, 0.18);
    color: var(--primary-gold-bright);
    padding: 0.25rem 0.9rem;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid var(--primary-gold);
}

.search-box {
    position: relative;
    flex: 1 1 260px;
    min-width: 0;
    max-width: 380px;
}

.search-icon {
    position: absolute;
    left: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

html[dir="rtl"] .search-icon {
    left: auto;
    right: 1.2rem;
}

.search-box input {
    width: 100%;
    padding: 0.8rem 1rem 0.8rem 2.8rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-dark);
    background: var(--bg-surface);
    color: white;
    font-size: 0.9rem;
    outline: none;
    transition: var(--transition);
}

html[dir="rtl"] .search-box input {
    padding: 0.8rem 2.8rem 0.8rem 1rem;
}

.search-box input:focus {
    border-color: var(--primary-gold-bright);
    box-shadow: 0 0 0 3px var(--primary-gold-glow);
}

/* Food Cards Grid (View Only) */
.food-grid {
    display: grid;
    /* min() keeps the track from overflowing viewports narrower than the min */
    grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
    gap: clamp(1rem, 2vw, 1.8rem);
}

.food-card {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-dark);
    box-shadow: var(--shadow-card);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.food-card:hover {
    transform: translateY(-6px);
    border-color: var(--primary-gold-bright);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 0 0 20px var(--primary-gold-glow);
}

.food-card-img-wrap {
    position: relative;
    height: clamp(160px, 22vw, 195px);
    overflow: hidden;
}

.food-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.food-card:hover .food-card-img-wrap img {
    transform: scale(1.08);
}

.card-badges {
    position: absolute;
    top: 0.8rem;
    left: 0.8rem;
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    z-index: 2;
}

html[dir="rtl"] .card-badges {
    left: auto;
    right: 0.8rem;
}

.badge-tag {
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-full);
    color: white;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.badge-tag.veg { background: var(--accent-veg); }
.badge-tag.chef { background: var(--primary-gold); }
.badge-tag.spicy { background: var(--accent-ember); }
.badge-tag.grill { background: #333; }

.food-card-content {
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.food-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 0.4rem;
}

.food-card-desc {
    font-size: 0.84rem;
    color: var(--text-muted);
    margin-bottom: 1.2rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.food-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding-top: 0.8rem;
    border-top: 1px dashed var(--border-dark);
}

.card-price {
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--primary-gold-bright);
    white-space: nowrap;
}

.view-details-btn {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

.food-card:hover .view-details-btn {
    color: var(--primary-gold-bright);
}

/* Modals */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(0.75rem, 3vw, 1.5rem);
    opacity: 0;
    pointer-events: none;
    transition: var(--transition);
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-card {
    background: var(--bg-surface);
    width: 100%;
    max-width: 560px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border-dark);
    transform: translateY(20px);
    transition: var(--transition);
    max-height: 90vh;
    max-height: 90dvh;
    display: flex;
    flex-direction: column;
}

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

/* Cart item photo preview - a lighter-weight lightbox than the full dish
   modal (no price/description/add-to-cart, just the photo itself, bigger). */
.photo-preview-card {
    position: relative;
    max-width: min(92vw, 640px);
    max-height: 88vh;
    transform: translateY(20px) scale(0.96);
    transition: var(--transition);
}

.modal-overlay.active .photo-preview-card {
    transform: translateY(0) scale(1);
}

#photo-preview-img {
    display: block;
    width: 100%;
    max-height: 88vh;
    object-fit: contain;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: 1px solid var(--border-dark);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    font-size: 1.1rem;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

html[dir="rtl"] .modal-close {
    right: auto;
    left: 1rem;
}

.modal-image-container {
    height: clamp(220px, 42vh, 380px);
    flex-shrink: 0;
    position: relative;
    background: #0F0E0C;
    overflow: hidden;
}

.modal-badges {
    position: absolute;
    top: 0.9rem;
    left: 0.9rem;
    z-index: 2;
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

html[dir="rtl"] .modal-badges {
    left: auto;
    right: 0.9rem;
}

.modal-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: zoom-in;
}

.modal-body {
    padding: clamp(1.1rem, 3vw, 1.5rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.modal-title {
    font-size: clamp(1.25rem, 3.5vw, 1.5rem);
    font-weight: 800;
    margin-bottom: 0.4rem;
}

.modal-prep-time {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
    background: rgba(74, 42, 24, 0.08);
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-full);
    margin-bottom: 0.8rem;
}

.modal-desc {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 1.2rem;
}

.modal-ingredients {
    background: rgba(255, 255, 255, 0.04);
    padding: 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-dark);
}

.modal-ingredients h4 {
    font-size: 0.9rem;
    color: var(--primary-gold-bright);
    margin-bottom: 0.3rem;
}

.modal-ingredients p {
    font-size: 0.88rem;
    color: var(--text-muted);
}

/* Modal Variant Size Pills */
.modal-variants-wrap {
    background: rgba(156, 59, 29, 0.08);
    border: 1px solid rgba(156, 59, 29, 0.25);
    border-radius: var(--radius-sm);
    padding: 0.9rem 1.1rem;
    margin-bottom: 1.2rem;
}

.modal-variants-wrap h4 {
    font-size: 0.88rem;
    color: var(--primary-gold-bright);
    margin-bottom: 0.6rem;
    font-weight: 700;
}

.modal-variants-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.variant-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border-dark);
    color: var(--text-light);
    padding: 0.45rem 0.9rem;
    border-radius: var(--radius-full);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    box-shadow: 0 2px 6px rgba(74, 42, 24, 0.1);
    transition: var(--transition);
}

.variant-btn:hover, .variant-btn.active {
    background: var(--primary-gold);
    color: white;
    border-color: var(--primary-gold-bright);
    box-shadow: 0 4px 12px var(--primary-gold-glow);
}

.variant-btn .v-price {
    font-weight: 800;
    color: var(--primary-gold-bright);
}

.variant-btn:hover .v-price, .variant-btn.active .v-price {
    color: #FFF;
}

/* Card Size Pill Tag */
.card-variant-badge {
    font-size: 0.72rem;
    color: var(--primary-gold-bright);
    background: rgba(156, 59, 29, 0.15);
    border: 1px solid rgba(156, 59, 29, 0.3);
    padding: 0.15rem 0.6rem;
    border-radius: var(--radius-full);
    font-weight: 600;
    margin-top: 0.4rem;
    display: inline-block;
}

.cart-footer {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-dark);
}

.modal-price-qty-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.modal-qty-stepper {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-full);
    padding: 0.3rem 0.5rem;
}

.modal-qty-stepper button {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(156, 59, 29, 0.15);
    color: var(--primary-gold);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.modal-qty-stepper button:hover {
    background: var(--primary-gold);
    color: #fff;
}

.modal-qty-stepper span {
    min-width: 1.4rem;
    text-align: center;
    font-weight: 800;
    color: var(--text-light);
}

.modal-action-row {
    display: flex;
    gap: 0.8rem;
}

.modal-action-row .close-modal-btn.secondary {
    background: transparent;
    border: 1px solid var(--border-dark);
    color: var(--text-muted);
}

.modal-action-row .close-modal-btn.secondary:hover {
    border-color: var(--primary-gold);
    color: var(--primary-gold);
}

.add-to-cart-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--primary-gold);
    color: #fff;
    border: none;
    padding: 0.6rem 1.4rem;
    min-height: 44px;
    border-radius: var(--radius-full);
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.add-to-cart-btn:hover {
    background: var(--primary-gold-bright);
}

.add-to-cart-btn:disabled {
    background: var(--border-dark);
    color: var(--text-muted);
    cursor: not-allowed;
}

.modal-qty-stepper button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.price-tag {
    font-size: 1.3rem;
    font-weight: 900;
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--primary-gold-bright), var(--primary-gold));
    padding: 0.5rem 1.1rem;
    border-radius: var(--radius-full);
    box-shadow: 0 6px 16px rgba(156, 59, 29, 0.4);
    display: inline-block;
}

.close-modal-btn {
    background: var(--primary-gold);
    color: white;
    border: none;
    padding: 0.6rem 1.8rem;
    min-height: 44px;
    border-radius: var(--radius-full);
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.close-modal-btn:hover {
    background: var(--primary-gold-bright);
}

.close-modal-btn:disabled {
    background: var(--border-dark);
    color: var(--text-muted);
    cursor: not-allowed;
}

/* Footer */
.main-footer {
    background: #0B0A09;
    color: var(--text-light);
    padding: clamp(2rem, 5vw, 3rem) var(--gutter) 1.5rem var(--gutter);
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
    border-top: 2px solid var(--primary-gold);
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1.5fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    margin-bottom: 2rem;
}

.footer-logo-wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.footer-logo-img {
    height: 48px;
    border-radius: var(--radius-sm);
}

.footer-title {
    display: flex;
    flex-direction: column;
    font-family: var(--font-ar);
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--primary-gold-bright);
    line-height: 1;
}

.footer-title small {
    font-family: var(--font-en);
    font-size: 0.7rem;
    color: var(--text-light);
    letter-spacing: 2px;
}

.footer-col h4 {
    color: var(--primary-gold-bright);
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.footer-col p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.footer-bottom {
    text-align: center;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
}

/* ==========================================================================
   Responsive Layers
   ========================================================================== */

/* Small laptops / large tablets in landscape */
@media (max-width: 1200px) {
    .menu-container {
        grid-template-columns: 250px minmax(0, 1fr);
    }

    .food-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
    }

    .category-sidebar {
        padding: 1.2rem;
    }
}

/* Tablet / iPad portrait — sidebar collapses into a scrollable category bar */
@media (max-width: 992px) {
    .menu-container {
        grid-template-columns: minmax(0, 1fr);
    }

    .category-sidebar {
        position: static;
        padding: 1rem;
    }

    /* Redundant here — the header already shows a Home button */
    .sidebar-header {
        display: none;
    }

    .sidebar-title {
        font-size: 1rem;
        margin-bottom: 0.9rem;
        padding-bottom: 0.6rem;
    }

    .category-list {
        flex-direction: row;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        padding-bottom: 0.7rem;
        scrollbar-width: thin;
        scrollbar-color: var(--primary-gold) transparent;
    }

    .category-list::-webkit-scrollbar {
        height: 4px;
    }

    .category-list::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.06);
        border-radius: var(--radius-full);
    }

    .category-list::-webkit-scrollbar-thumb {
        background: var(--primary-gold);
        border-radius: var(--radius-full);
    }

    .category-list li {
        flex: 0 0 auto;
        scroll-snap-align: center;
    }

    .cat-btn {
        width: auto;
        white-space: nowrap;
        gap: 0.6rem;
        padding: 0.65rem 1.05rem;
        border: 1px solid var(--border-dark);
        background: rgba(255, 255, 255, 0.04);
        border-radius: var(--radius-full);
    }

    .cat-btn i {
        width: auto;
    }

    .cat-btn.active {
        border-color: transparent;
    }

    .sidebar-veg-card {
        margin-top: 1rem;
    }

    /* 230px keeps 3 dishes per row on iPad portrait (820px) */
    .food-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
    }

    .footer-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* Large phones / small tablets */
@media (max-width: 768px) {
    .search-box {
        flex: 1 1 100%;
        max-width: none;
    }

    /* 16px keeps iOS from zooming the page when the field is focused */
    .search-box input {
        font-size: 16px;
    }

    .food-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
    }

    .food-card-content {
        padding: 1rem;
    }
}

/* Phones */
@media (max-width: 650px) {
    .hero-primary-btns {
        grid-template-columns: 1fr;
        max-width: 440px;
    }

    /* Stack the two hero buttons, laid out as compact rows */
    .photo-btn-content {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        text-align: left;
    }

    html[dir="rtl"] .photo-btn-content {
        text-align: right;
    }

    .btn-text {
        flex: 1;
    }

    /* Home button collapses to its icon */
    .home-nav-btn span {
        display: none;
    }

    .home-nav-btn {
        padding: 0.45rem 0.8rem;
    }

    .logo-flex {
        gap: 0.6rem;
    }

    .footer-container {
        margin-bottom: 1.5rem;
    }
}

/* Small phones — food cards switch to a horizontal list row */
@media (max-width: 560px) {
    .food-grid {
        grid-template-columns: 1fr;
        gap: 0.9rem;
    }

    .food-card {
        flex-direction: row;
        min-height: 118px;
    }

    .food-card-img-wrap {
        flex: 0 0 118px;
        height: auto;
    }

    /* Absolute so the image fills the row height set by the text column */
    .food-card-img-wrap img {
        position: absolute;
        inset: 0;
    }

    .food-card-content {
        padding: 0.85rem 1rem;
    }

    .food-card-title {
        font-size: 1rem;
    }

    .food-card-desc {
        font-size: 0.78rem;
        margin-bottom: 0.7rem;
    }

    .food-card-footer {
        padding-top: 0.6rem;
    }

    .card-price {
        font-size: 1.05rem;
    }

    .card-badges {
        top: 0.4rem;
        left: 0.4rem;
    }

    html[dir="rtl"] .card-badges {
        left: auto;
        right: 0.4rem;
    }

    .badge-tag {
        font-size: 0.6rem;
        padding: 0.12rem 0.45rem;
    }

    .modal-price-qty-row {
        justify-content: center;
    }

    .close-modal-btn {
        flex: 1;
    }
}

/* Very small phones */
@media (max-width: 380px) {
    .lang-btn {
        padding: 0.45rem 0.7rem;
        font-size: 0.78rem;
    }

    .food-card-img-wrap {
        flex-basis: 96px;
    }

    .view-details-btn span {
        display: none;
    }
}

/* Short viewports (phone landscape) — compress the landing screen so both
   entry buttons stay above the fold. */
@media (max-height: 720px) and (orientation: landscape) {
    .hero-screen {
        padding-top: calc(var(--header-h) + 0.75rem);
        padding-bottom: 1rem;
    }


    .hero-title {
        margin-bottom: 0.4rem;
    }

    .title-main {
        font-size: clamp(1.7rem, 6vh, 2.8rem);
    }

    .title-ar {
        font-size: clamp(1.05rem, 3.6vh, 1.7rem);
    }

    .hero-subtitle {
        font-size: 0.85rem;
        margin-bottom: 0.9rem;
    }

    .hero-primary-btns {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.7rem;
        max-width: 500px;
    }

    .hero-photo-btn {
        padding: 0.8rem 0.9rem;
        min-height: 0;
    }

    .photo-btn-content {
        flex-direction: row;
        align-items: center;
        gap: 0.8rem;
        text-align: left;
    }

    html[dir="rtl"] .photo-btn-content {
        text-align: right;
    }

    .btn-title {
        font-size: 1rem;
    }

    .btn-sub {
        font-size: 0.72rem;
    }
}

/* Touch devices — :hover sticks after a tap, so swap it for press feedback */
@media (hover: none) {
    /* No :hover reset for .hero-photo-btn here on purpose — the continuous
       float/glow animation should keep running through a tap's sticky-hover
       state instead of being reset by it. */

    .hero-photo-btn:hover .photo-btn-bg img {
        transform: none;
        filter: brightness(0.6) contrast(1.1);
    }

    .hero-photo-btn:hover .photo-btn-overlay {
        background: linear-gradient(180deg, rgba(15, 14, 12, 0.08) 0%, rgba(15, 14, 12, 0.18) 40%, rgba(15, 14, 12, 0.92) 100%);
    }

    .food-card:hover {
        transform: none;
        border-color: var(--border-dark);
        box-shadow: var(--shadow-card);
    }

    .food-card:hover .food-card-img-wrap img {
        transform: none;
    }

    .food-card:hover .view-details-btn {
        color: var(--text-muted);
    }

    .hero-photo-btn:active {
        animation-play-state: paused;
        transform: scale(0.98);
    }

    .food-card:active {
        transform: scale(0.985);
        border-color: var(--primary-gold-bright);
    }

    .cat-btn:active,
    .home-nav-btn:active,
    .back-home-link:active,
    .close-modal-btn:active {
        opacity: 0.75;
    }
}

/* Respect the OS "reduce motion" setting */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .hero-bg-img {
        animation: none;
        transform: none;
    }

    .flame-glow-effect {
        opacity: 0.8;
        animation-duration: 9s;
    }

    .btn-photo-main .photo-btn-bg,
    .btn-photo-veg .photo-btn-bg {
        animation-duration: 45s;
    }

    .hero-photo-btn::after {
        animation-duration: 15s;
    }

    .hero-photo-btn {
        animation: none;
    }

    .cat-tile-btn.active,
    .cat-tile-btn.active::before {
        animation: none;
    }
}

/* ==========================================================================
   iPad Kiosk Digital Menu Styling (Matching Bab El Bahr Reference Photo)
   ========================================================================== */

/* ==========================================================================
   Clean Kiosk Header & Fixed 100vh iPad Layout (Matching Screenshots 2, 3, 4)
   ========================================================================== */

/* Main Header Navigation Bar */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    /* padding intentionally not redeclared here - the base .main-header rule
       already sets it with env(safe-area-inset-*) built in for notched
       phones; repeating a plain shorthand here would silently wipe that. */
    background: #F9E3CC !important;
    border-bottom: 1px solid rgba(74, 42, 24, 0.15) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.header-container-clean {
    max-width: 1900px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 0.6rem;
    column-gap: 1rem;
}

.brand-logo-clean {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    cursor: pointer;
}

.brand-logo-img {
    height: 46px;
    width: auto;
}

.brand-title-wrap {
    display: flex;
    flex-direction: column;
}

.arabic-logo {
    font-family: var(--font-ar);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--primary-gold-bright);
    line-height: 1.1;
}

.english-logo {
    font-family: var(--font-en);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--text-muted);
}

/* Language Switcher Pill (Matching Screenshot 4) */
.lang-switch-pill {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-full);
    padding: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.lang-switch-pill .lang-btn {
    background: transparent;
    border: none;
    padding: 0.45rem 1.2rem;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
}

.lang-switch-pill .lang-btn.active {
    background: var(--primary-gold);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(156, 59, 29, 0.3);
}

/* Hide Black Footer Entirely (Matching Request & Screenshot 3) */
.main-footer {
    display: none !important;
}

/* --- Fixed 100vh iPad Kiosk Viewport (No Page Scroll) --- */
html, body {
    height: 100%;
    overflow: hidden;
}

.menu-screen {
    height: calc(100vh - var(--header-h));
    margin-top: var(--header-h);
    overflow: hidden;
    background: linear-gradient(rgba(250, 234, 220, 0.82), rgba(250, 234, 220, 0.88)), url('images/restaurant-front.jpg') center/cover no-repeat !important;
    padding-top: 1rem;
    padding-bottom: 1rem;
    /* Longhand (not a padding: shorthand) so this doesn't reset the
       safe-area-aware left/right padding on notched phones in landscape. */
    padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
    padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

.menu-container {
    height: 100%;
    max-width: 1900px;
    margin: 0 auto;
    display: flex;
    gap: 1.5rem;
}

/* --- Category Sidebar (BIG Full Photo Cards matching Screenshot 2) --- */
.category-sidebar {
    position: relative;
    /* Cancels out an older `top: calc(...)` rule written for this selector's
       previous `position: sticky` — without this, switching to `relative`
       (needed so the blur-bg layer has something to anchor to) would still
       inherit that offset and visibly push the whole sidebar down. */
    top: 0;
    width: 270px;
    flex-shrink: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.category-tiles-grid {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    overflow-y: auto;
    padding-right: 0.5rem;
    -webkit-overflow-scrolling: touch;
    transform: translateZ(0);
    will-change: scroll-position;
}

.cat-tile-btn {
    background: #FFFFFF;
    border: 3px solid transparent;
    border-radius: 22px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 170px;
    width: 100%;
    transition: var(--transition);
    padding: 0;
    text-align: center;
    box-shadow: 0 8px 20px rgba(74, 42, 24, 0.15);
    flex-shrink: 0;
    contain: content;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.cat-tile-btn.active {
    border-color: #9C3B1D;
    transform: scale(1.02);
    animation: catTileEmberGlow 1.8s ease-in-out infinite;
}

/* Flickering warm light dancing across the active tile's photo, like it's
   lit by the grill itself - sits above the image but under the darkening
   gradient/title so the category name stays fully legible. */
.cat-tile-btn.active::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(ellipse at 50% 110%, rgba(255, 140, 40, 0.55) 0%, rgba(255, 90, 20, 0.22) 40%, transparent 75%);
    mix-blend-mode: overlay;
    animation: catTileFireLight 1.4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes catTileEmberGlow {
    0%   { box-shadow: 0 0 14px rgba(181, 48, 26, 0.5), 0 0 3px rgba(255, 176, 59, 0.5), 0 10px 28px rgba(0,0,0,0.25); border-color: #9C3B1D; }
    22%  { box-shadow: 0 0 30px rgba(181, 48, 26, 0.8), 0 0 12px rgba(255, 176, 59, 0.9), 0 10px 28px rgba(0,0,0,0.3); border-color: #E0521F; }
    45%  { box-shadow: 0 0 18px rgba(210, 121, 61, 0.55), 0 0 5px rgba(255, 200, 100, 0.7), 0 10px 28px rgba(0,0,0,0.25); border-color: #C7371A; }
    68%  { box-shadow: 0 0 34px rgba(181, 48, 26, 0.85), 0 0 14px rgba(255, 176, 59, 0.95), 0 10px 28px rgba(0,0,0,0.3); border-color: #9C3B1D; }
    85%  { box-shadow: 0 0 20px rgba(210, 121, 61, 0.6), 0 0 6px rgba(255, 200, 100, 0.75), 0 10px 28px rgba(0,0,0,0.25); border-color: #E0521F; }
    100% { box-shadow: 0 0 14px rgba(181, 48, 26, 0.5), 0 0 3px rgba(255, 176, 59, 0.5), 0 10px 28px rgba(0,0,0,0.25); border-color: #9C3B1D; }
}

@keyframes catTileFireLight {
    0%   { opacity: 0.6; transform: scale(1) translateY(0); }
    25%  { opacity: 0.9; transform: scale(1.05) translateY(-2px); }
    50%  { opacity: 0.5; transform: scale(0.98) translateY(1px); }
    75%  { opacity: 0.85; transform: scale(1.03) translateY(-1px); }
    100% { opacity: 0.6; transform: scale(1) translateY(0); }
}

.cat-tile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.cat-tile-btn:hover .cat-tile-img {
    transform: scale(1.08);
}

.cat-tile-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 15%, rgba(0,0,0,0.8) 100%);
}

.cat-tile-title {
    position: absolute;
    bottom: 14px;
    left: 8px;
    right: 8px;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
    z-index: 3;
}

/* Now lives inline in the title bar rather than stacked above the tiles,
   so it's a compact chip instead of a full-width block. */
.sidebar-veg-card {
    position: relative;
    z-index: 1;
    margin-top: 0;
    background: #FFFFFF;
    border: 1px solid rgba(74, 42, 24, 0.15);
    border-radius: var(--radius-full);
    box-shadow: 0 4px 12px rgba(74, 42, 24, 0.08);
    padding: 0.5rem 0.9rem;
    flex-shrink: 0;
}

.sidebar-veg-card .veg-card-text h4 {
    white-space: nowrap;
}

.veg-card-text h4 {
    color: #2E7D32;
    font-weight: 700;
    font-size: 0.9rem;
}

/* --- Right column: title panel stacked above the dishes panel --- */
.menu-main-column {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Part 2: category name + item count on one side, the Vegetarian toggle
   on the other — both above the blurred backdrop layer. */
.category-title-panel {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    background: #FDF3E7;
    border-radius: 20px;
    padding: 1rem 1.5rem;
    border: 1px solid rgba(74, 42, 24, 0.15);
    box-shadow: 0 8px 20px rgba(74, 42, 24, 0.08);
    overflow: hidden;
}

.title-panel-heading {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.category-title-panel h2 {
    font-size: 1.55rem;
    font-weight: 800;
    color: #2B160D;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.92);
    padding: 0.5rem 1.1rem;
    border-radius: var(--radius-full);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    white-space: nowrap;
}

/* The count badge and the Vegetarian toggle chip both sit on the same
   blurred backdrop, so they need the same solid, always-legible treatment
   regardless of what's underneath — not just their normal tinted look. */
.category-title-panel .items-count-badge {
    background: #FFFFFF;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.category-title-panel .sidebar-veg-card {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

/* Part 3: "The Big Card Containing All Dishes" — its background is a soft,
   blurred version of the category's own photo (see .category-blur-bg
   below), refreshed by app.js every time the category changes. */
.menu-content-box {
    position: relative;
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #FDF3E7;
    border-radius: 24px;
    padding: 1.5rem;
    border: 1px solid rgba(74, 42, 24, 0.15);
    box-shadow: 0 10px 30px rgba(74, 42, 24, 0.08);
    overflow: hidden;
}

/* Shared by all three panels (sidebar, title, dishes) — same soft blurred
   category-photo treatment everywhere, kept in sync by app.js. */
.category-blur-bg {
    position: absolute;
    inset: -30px;
    background: var(--bg-surface);
    z-index: 0;
}

/* Appears while dragging past the top/bottom edge of the dish grid (see
   initContinuousCategoryScroll in app.js) — its opacity tracks the drag
   distance in real time, then fades out the instant the category changes. */
.scroll-nav-arrow {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) scale(0.7);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--primary-gold);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: 0 6px 18px rgba(156, 59, 29, 0.5);
    opacity: 0;
    pointer-events: none;
    z-index: 4;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.scroll-nav-arrow.bottom {
    bottom: 14px;
}

.scroll-nav-arrow.top {
    top: 14px;
}

/* Kiosk Food Cards Grid: Enforces Big Unsquished Photos & Smooth Inside Scrolling */
.food-grid-kiosk {
    position: relative;
    z-index: 1;
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 100%));
    gap: 1.5rem;
    overflow-y: auto !important;
    padding-right: 0.6rem;
    align-content: start;
    -webkit-overflow-scrolling: touch;
    transform: translateZ(0);
    will-change: scroll-position;
}

@media (min-width: 900px) {
    .food-grid-kiosk {
        grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    }
}

/* Editorial-style card: the photo does almost all the talking (no heavy
   colored border), price and prep time float directly on the photo as
   chips, and the text strip underneath is just the title — left-aligned
   and quiet, not centered/boxed like a form. */
.kiosk-food-card {
    background: #FFFFFF;
    border-radius: 22px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 330px;
    flex-shrink: 0;
    box-shadow: 0 10px 28px rgba(74, 42, 24, 0.14);
    border: 1px solid rgba(74, 42, 24, 0.08);
    contain: content;
    transform: translateZ(0);
    backface-visibility: hidden;
    transition: var(--transition);
}

.kiosk-food-card:hover,
.kiosk-food-card:focus-visible {
    border-color: rgba(156, 59, 29, 0.4);
    box-shadow: 0 22px 40px rgba(74, 42, 24, 0.22);
    outline: none;
    transform: translateY(-6px);
}

.kiosk-food-card:active {
    transform: translateY(-2px);
}

.kiosk-card-img-wrap {
    height: 264px;
    width: 100%;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.kiosk-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    backface-visibility: hidden;
    transition: transform 0.5s ease;
}

.kiosk-food-card:hover .kiosk-card-img-wrap img {
    transform: scale(1.06);
}

/* Use the restaurant logo as a clean intentional placeholder when no dish photo exists. */
.kiosk-card-img-wrap img[src="images/logo.png"],
#modal-img[src="images/logo.png"] {
    object-fit: contain;
    padding: 1.25rem;
    background: #FDF3E7;
}

/* Both badges live inside .kiosk-card-img-wrap, floating directly on the
   photo — same containing block, same overflow:hidden clip as the image
   itself, so they never spill onto the text strip below. */
/* Solid tag instead of subtle text-on-white — the price is the thing a
   customer scans for first, so it should read instantly, not blend in. */
.kiosk-card-price {
    position: absolute;
    left: 0.7rem;
    bottom: 0.7rem;
    z-index: 2;
    font-size: 0.98rem;
    font-weight: 900;
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--primary-gold-bright), var(--primary-gold));
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-full);
    box-shadow: 0 6px 16px rgba(156, 59, 29, 0.55);
}

.kiosk-card-time {
    position: absolute;
    right: 0.7rem;
    top: 0.7rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    background: rgba(15, 14, 12, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 0.3rem 0.65rem;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.kiosk-card-body {
    flex: 1;
    min-height: 0;
    padding: 0.9rem 1.1rem;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    text-align: left;
}

html[dir="rtl"] .kiosk-card-body {
    text-align: right;
}

.kiosk-card-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #2B160D;
    margin: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================================================
   Staff Admin Panel (login, toolbar, edit/delete controls, edit forms)
   ========================================================================== */

.header-right-controls {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.staff-access-btn {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--border-dark);
    background: rgba(255, 255, 255, 0.5);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.95rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: var(--transition);
}

.staff-access-btn:hover {
    color: var(--primary-gold);
    border-color: var(--primary-gold);
}

/* Cart button — visible to every customer, not just staff */
.cart-btn {
    position: relative;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--border-dark);
    background: rgba(255, 255, 255, 0.5);
    color: var(--text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: var(--transition);
}

.cart-btn:hover {
    color: var(--primary-gold);
    border-color: var(--primary-gold);
}

.cart-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 19px;
    height: 19px;
    padding: 0 4px;
    border-radius: var(--radius-full);
    background: var(--accent-ember);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

html[dir="rtl"] .cart-badge {
    right: auto;
    left: -4px;
}

/* --------------------------------------------------------------------------
   "Fly to cart" feedback when a dish is added - see flyToCart()/bumpCartIcon()
   in app.js. A small clone of the dish photo arcs from the modal to the cart
   icon and the icon pulses on arrival, so adding a dish always visibly lands
   somewhere instead of the popup just closing.
   -------------------------------------------------------------------------- */
.fly-to-cart-ghost {
    position: fixed;
    z-index: 5000;
    pointer-events: none;
    object-fit: cover;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    will-change: transform, opacity, border-radius;
}

@keyframes cartBump {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.35); }
    60%  { transform: scale(0.9); }
    100% { transform: scale(1); }
}

.cart-btn.cart-bump {
    animation: cartBump 0.45s ease;
}

/* Staff controls now live inside the header row itself (wraps onto a second
   line on narrow screens instead of overlaying a separate fixed bar). */
.admin-header-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Self-contained light pills (own semi-opaque background, not relying on
   what's behind them) rather than colors tuned for one specific backdrop -
   staff can be logged in while looking at either the hero screen (dark
   video) or the menu screen (light blurred photo), and this same markup
   has to read clearly against both. */
.admin-header-controls .admin-badge {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 800;
    font-size: 0.8rem;
    color: var(--text-light);
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--border-dark);
    padding: 0.35rem 0.7rem;
    border-radius: var(--radius-full);
    margin-inline-end: 0.2rem;
    white-space: nowrap;
}

.admin-header-controls button {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--border-dark);
    color: var(--text-light);
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: var(--transition);
    white-space: nowrap;
}

.admin-header-controls button:hover {
    background: var(--primary-gold);
    color: #fff;
    border-color: var(--primary-gold);
}

.admin-header-controls .admin-logout-btn {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(181, 48, 26, 0.45);
    color: var(--accent-ember);
}

.admin-header-controls .admin-logout-btn:hover {
    background: var(--accent-ember);
    color: #fff;
    border-color: var(--accent-ember);
}

/* Per-card edit/delete controls (kiosk food cards, staff mode only) */
/* Top-left: top-right is taken by the prep-time chip, bottom-left by price. */
.admin-card-controls {
    position: absolute;
    top: 0.7rem;
    left: 0.7rem;
    z-index: 3;
    display: flex;
    gap: 0.4rem;
}

.admin-card-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
    transition: var(--transition);
}

.admin-card-btn.edit {
    background: var(--primary-gold);
}

.admin-card-btn.visibility {
    background: var(--text-light);
}

.admin-card-btn.delete {
    background: var(--accent-ember);
}

.admin-card-btn:hover {
    transform: scale(1.1);
}

/* Dish marked unavailable - dimmed so it visually reads as "off" to staff
   scanning the grid, but tapping it still opens the modal normally (staff
   may want to check details or flip it back on from there too). */
.kiosk-food-card.is-hidden-dish {
    opacity: 0.5;
}

.kiosk-food-card.is-hidden-dish .kiosk-card-img-wrap img {
    filter: grayscale(0.6);
}

.kiosk-card-hidden-badge {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    text-align: center;
    padding: 0.5rem;
    font-size: 0.78rem;
    font-weight: 800;
    color: #fff;
    background: rgba(15, 14, 12, 0.55);
    pointer-events: none;
}

/* Login / edit forms shared styling */
.admin-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.admin-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
    min-width: 0;
}

.admin-field span:first-child {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
}

.admin-field input[type="text"],
.admin-field input[type="password"],
.admin-field input[type="number"],
.admin-field select,
.admin-field textarea {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-dark);
    background: #fff;
    color: var(--text-light);
    font-size: 0.92rem;
    font-family: inherit;
    outline: none;
    transition: var(--transition);
}

.admin-field input:focus,
.admin-field select:focus,
.admin-field textarea:focus {
    border-color: var(--primary-gold);
    box-shadow: 0 0 0 3px var(--primary-gold-glow);
}

.admin-field-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.admin-checkbox-line {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.4rem;
}

.admin-tags-row {
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
    padding: 0.7rem 0;
    border-top: 1px dashed var(--border-dark);
    border-bottom: 1px dashed var(--border-dark);
}

.admin-submit-btn {
    width: 100%;
}

.login-error {
    color: var(--accent-ember);
    font-size: 0.85rem;
    font-weight: 600;
}

.admin-img-preview-wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.2rem;
}

.admin-img-preview-wrap img {
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-dark);
    background: var(--bg-surface);
}

.admin-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--primary-gold);
    color: #fff;
    padding: 0.55rem 1rem;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.admin-upload-btn:hover {
    background: var(--primary-gold-bright);
}

.admin-upload-col {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1;
    min-width: 0;
}

.admin-upload-btn.uploading {
    opacity: 0.7;
    pointer-events: none;
}

.upload-progress-wrap {
    width: 100%;
    max-width: 220px;
    height: 8px;
    background: rgba(156, 59, 29, 0.15);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.upload-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--primary-gold);
    border-radius: var(--radius-full);
    transition: width 0.15s ease;
}

.admin-variants-wrap {
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-sm);
    padding: 0.8rem;
}

.admin-variants-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.admin-variants-header button {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(156, 59, 29, 0.15);
    border: 1px solid var(--primary-gold);
    color: var(--primary-gold);
    padding: 0.35rem 0.8rem;
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.variant-edit-row {
    display: grid;
    grid-template-columns: 1fr 1fr 110px 34px;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    align-items: center;
}

.variant-edit-row input {
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-dark);
    font-size: 0.85rem;
}

.variant-remove-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(181, 48, 26, 0.15);
    color: var(--accent-ember);
    cursor: pointer;
}

.dish-edit-card {
    max-width: 640px;
}

/* ==========================================================================
   Cart
   ========================================================================== */

.cart-card {
    max-width: 540px;
}

.cart-items-list {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-bottom: 1rem;
    max-height: 50vh;
    overflow-y: auto;
}

.cart-item-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px dashed var(--border-dark);
}

.cart-item-img {
    width: 84px;
    height: 84px;
    border-radius: var(--radius-md);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-dark);
    cursor: zoom-in;
}

.cart-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.cart-item-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-light);
}

.cart-item-name em {
    font-style: normal;
    color: var(--text-muted);
    font-weight: 500;
}

.cart-item-qty {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-full);
    padding: 0.2rem 0.4rem;
    flex-shrink: 0;
}

.cart-item-qty button {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(156, 59, 29, 0.15);
    color: var(--primary-gold);
    cursor: pointer;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-item-qty button:hover {
    background: var(--primary-gold);
    color: #fff;
}

.cart-item-qty span {
    min-width: 1.1rem;
    text-align: center;
    font-weight: 800;
    font-size: 0.85rem;
}

.cart-item-remove {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(181, 48, 26, 0.1);
    color: var(--accent-ember);
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-item-remove:hover {
    background: var(--accent-ember);
    color: #fff;
}

.cart-empty-state {
    text-align: center;
    color: var(--text-muted);
    padding: 2rem 0.5rem;
    font-size: 0.9rem;
}

.cart-clear-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: transparent;
    border: 1px solid var(--accent-ember);
    color: var(--accent-ember);
    padding: 0.7rem 1rem;
    margin-top: 0.9rem;
    border-radius: var(--radius-full);
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.cart-clear-btn:hover {
    background: var(--accent-ember);
    color: #fff;
}

.admin-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: #2B160D;
    color: #fff;
    padding: 0.8rem 1.5rem;
    border-radius: var(--radius-full);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    z-index: 3000;
    font-size: 0.9rem;
    font-weight: 600;
    animation: toastIn 0.25s ease;
}

.admin-toast.error {
    background: var(--accent-ember);
}

@keyframes toastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@media (max-width: 650px) {
    .header-right-controls,
    .admin-header-controls {
        justify-content: center;
        width: 100%;
    }

    .admin-header-controls .admin-badge {
        width: 100%;
        justify-content: center;
        margin-inline-end: 0;
    }

    .variant-edit-row {
        grid-template-columns: 1fr 1fr;
    }
}

/* ==========================================================================
   Full Responsiveness Across All Devices (iPads, Tablets, iPhones & Androids)
   ========================================================================== */

/* Tablets / Medium Screens (max-width: 1024px) */
@media (max-width: 1024px) {
    .menu-container {
        gap: 1rem;
    }

    .category-sidebar {
        width: 230px;
    }

    .cat-tile-btn {
        height: 145px;
    }

    .cat-tile-title {
        font-size: 0.95rem;
    }

    .food-grid-kiosk {
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        gap: 1.2rem;
    }

    .kiosk-food-card {
        height: 300px;
    }

    .kiosk-card-img-wrap {
        height: 236px;
    }
}

/* Tablets in Portrait / Mobile Screens (max-width: 820px) */
@media (max-width: 820px) {
    html, body {
        overflow-y: auto !important;
    }

    .menu-screen {
        height: auto !important;
        min-height: calc(100vh - var(--header-h));
        overflow: visible !important;
        padding: 0.8rem 0.6rem;
    }

    .menu-container {
        flex-direction: column;
        height: auto;
    }

    .category-sidebar {
        width: 100%;
        height: auto;
    }

    .menu-main-column {
        height: auto;
        gap: 0.8rem;
    }

    .category-title-panel {
        padding: 0.8rem 1.2rem;
    }

    .category-title-panel h2 {
        font-size: 1.2rem;
    }

    /* Convert category list into a smooth horizontal scrolling strip on mobile */
    .category-tiles-grid {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        padding-bottom: 0.6rem;
        gap: 0.8rem;
    }

    .cat-tile-btn {
        min-width: 140px;
        max-width: 150px;
        height: 105px;
        border-radius: 16px;
    }

    .cat-tile-title {
        font-size: 0.82rem;
        bottom: 8px;
    }

    .menu-content-box {
        height: auto;
        padding: 1rem;
        border-radius: 20px;
    }

    .food-grid-kiosk {
        overflow: visible;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .kiosk-food-card {
        height: 270px;
    }

    .kiosk-card-img-wrap {
        height: 212px;
    }
}

/* Small iPhones / Mobile Screens (max-width: 480px) */
@media (max-width: 480px) {
    .header-container-clean {
        padding: 0 0.4rem;
    }

    .brand-logo-img {
        height: 38px;
    }

    .arabic-logo {
        font-size: 1.15rem;
    }

    .english-logo {
        font-size: 0.65rem;
    }

    .lang-switch-pill .lang-btn {
        padding: 0.35rem 0.8rem;
        font-size: 0.82rem;
    }

    .cat-tile-btn {
        min-width: 125px;
        max-width: 135px;
        height: 95px;
    }

    .cat-tile-title {
        font-size: 0.78rem;
    }

    .food-grid-kiosk {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.8rem;
    }

    .kiosk-food-card {
        height: 258px;
        border-radius: 16px;
    }

    .kiosk-card-img-wrap {
        height: 200px;
    }

    .kiosk-card-body {
        padding: 0.6rem 0.7rem;
    }

    .kiosk-card-title {
        font-size: 0.82rem;
    }

    .kiosk-card-price {
        font-size: 0.78rem;
        padding: 0.25rem 0.6rem;
    }

    .kiosk-card-time {
        font-size: 0.65rem;
        padding: 0.2rem 0.5rem;
    }
}