/* --- 1. TURATH PALETTE & CORE --- */
        :root {
            --turath-teal: #124d61;
            --turath-gold: #d8a752;
            --turath-light: #fbcc77;
            --dark-bg: #0a0b0f;
            --text-grey: #b0b0b0;
            --cream: #0a0b0f;
            --ink: #ffffff;
            --ink-rgb: 255,255,255;
            --primary-rgb: 18,77,97;
            --secondary-rgb: 216,167,82;
            --accent-rgb: 251,204,119;
            --bg-rgb: 10,11,15;
            /* --glow-rgb: the light behind a dish or a section. Defaults to the
               brand primary, which is what every card used before; a card whose
               picture has a colour of its own overrides it inline. */
            --glow-rgb: var(--primary-rgb);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

        @keyframes subtle-float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-3px); }
        }

        @keyframes glow-pulse {
            0%, 100% {
                filter: drop-shadow(0 15px 30px rgba(0,0,0,0.6));
            }
            50% {
                filter: drop-shadow(0 20px 35px rgba(0,0,0,0.7));
            }
        }

        body {
            background-color: var(--dark-bg);
            color: white;
            font-family: var(--font-en);
            overflow: hidden;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        body.lang-ar { font-family: var(--font-ar); direction: rtl; }

        /* --- 2. GLOBAL BACKGROUND & HEADER --- */
        .bg-backdrop {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: radial-gradient(circle at center, var(--turath-teal) 0%, #000 100%);
            z-index: -1; opacity: 0.5;
            transition: background 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }

        header {
            position: absolute; top: 0; left: 0; width: 100%; height: 110px;
            padding: 15px 25px; z-index: 50; display: flex; align-items: center;
            justify-content: space-between; background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
            overflow: visible;
        }

        .brand-logos {
            display: flex;
            align-items: center;
            gap: 15px;
            flex: 1;
        }

        .brand-center {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            flex: 1;
            justify-content: center;
            margin-top: 15px;
        }

        .header-controls {
            display: flex;
            gap: 10px;
            flex: 1;
            justify-content: flex-end;
        }

        .turath-name {
            font-size: 2.2rem;
            font-weight: 900;
            letter-spacing: 4px;
            background: linear-gradient(135deg, var(--turath-teal) 0%, var(--turath-gold) 50%, var(--turath-light) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            display: block;
            text-align: center;
            position: relative;
            transition: all 0.3s ease;
            filter: drop-shadow(0 2px 8px rgba(var(--secondary-rgb), 0.4));
            line-height: 1;
            padding-top: 5px;
        }

        .turath-name:hover {
            filter: drop-shadow(0 4px 12px rgba(var(--secondary-rgb), 0.6));
            transform: scale(1.05);
        }

        body.lang-ar .turath-name {
            font-family: var(--font-ar);
            letter-spacing: 1px;
        }

        .branch-name {
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--turath-light);
            letter-spacing: 2px;
            text-transform: uppercase;
            opacity: 0.9;
            text-align: center;
            line-height: 1;
            margin-top: 4px;
        }

        body.lang-ar .branch-name {
            font-family: var(--font-ar);
            letter-spacing: 1px;
        }
        .btn-glass {
            background: rgba(255,255,255,0.08); backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.15); padding: 6px 14px;
            border-radius: 20px; cursor: pointer; font-weight: bold;
            font-size: 0.8rem; color: white; transition: 0.3s;
        }
        .btn-glass:hover { border-color: var(--turath-gold); color: var(--turath-gold); }
        .hidden { display: none !important; }

        /* Alatrakchy company logo */
        .company-logo-link {
            display: inline-flex;
            align-items: center;
            padding: 5px 9px;
            background: rgba(255,255,255,0.1);
            border-radius: 8px;
            transition: background 0.3s;
        }
        .company-logo-link:hover { background: rgba(255,255,255,0.15); }
        #companyLogo {
            height: 30px;
            width: auto;
            filter: brightness(0) invert(1);
            display: block;
        }

        /* Header icon buttons (cart + language) */
        .hdr-icon-btn {
            position: relative;
            width: 40px;
            height: 40px;
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.15);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            color: #fff;
            cursor: pointer;
            transition: all 0.3s ease;
            padding: 0;
        }
        .hdr-icon-btn svg { width: 21px; height: 21px; }
        .hdr-icon-btn:hover { border-color: var(--turath-gold); color: var(--turath-gold); transform: translateY(-1px); }
        .hdr-icon-btn:active { transform: scale(0.92); }

        /* Smaller badge for the header cart */
        .cart-btn .orders-badge {
            top: -4px;
            right: -4px;
            width: 18px;
            height: 18px;
            font-size: 0.6rem;
            border-width: 2px;
        }
        body.lang-ar .cart-btn .orders-badge { right: auto; left: -4px; }

        @keyframes hdr-cart-pulse {
            0% { transform: scale(1); }
            35% { transform: scale(1.25); }
            100% { transform: scale(1); }
        }
        .hdr-icon-btn.pulse { animation: hdr-cart-pulse 0.5s ease-out; }

        /* Floating back arrow (3D dish navigation) */
        .sr-only {
            position: absolute;
            width: 1px; height: 1px;
            padding: 0; margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }
        .back-fab {
            position: fixed;
            top: 122px;
            inset-inline-start: 16px;
            z-index: 60;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(10, 11, 15, 0.55);
            border: 1px solid rgba(255, 255, 255, 0.18);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            color: #fff;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
        }
        .back-fab svg { width: 22px; height: 22px; }
        .back-fab:hover { border-color: var(--turath-gold); color: var(--turath-gold); }
        .back-fab:active { transform: scale(0.92); }
        body.lang-ar .back-fab svg { transform: scaleX(-1); }
        @media (max-width: 768px) { .back-fab { top: 112px; } }

        /* Turath logo — faint fixed background watermark */
        .turath-watermark {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: min(72vw, 460px);
            height: auto;
            opacity: 0.06;
            z-index: -1;
            pointer-events: none;
            -webkit-mask-image: radial-gradient(circle, #000 42%, transparent 70%);
            mask-image: radial-gradient(circle, #000 42%, transparent 70%);
        }

        /* --- 3. UNIFIED STACK VIEW --- */
        .view-section {
            position: absolute; top: 110px; left: 0; width: 100%; height: calc(100vh - 110px);
            padding: 0; overflow: hidden; /* No scrolling for this view */
        }
        
        .carousel-container {
            width: 100%; height: 100%;
            margin-top: 0;
            perspective: 1200px;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer;
            transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* --- 4. CARDS (APPLIED TO BOTH CATS AND DISHES) --- */
        .card {
            position: absolute; top: 35%; left: 50%;
            width: auto; height: auto;
            max-width: 260px;
            background: none;
            border: none;
            outline: none;
            box-shadow: none;
            overflow: visible;
            transform-origin: center center;
            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
            will-change: transform, opacity;
            cursor: pointer;
            display: inline-block;
            line-height: 0;
        }

        /* CATEGORY SPECIFIC STYLES (Simple background for now) */
        .card.is-category {
            background: none;
        }

        .card img {
            width: auto; height: auto;
            max-width: 260px;
            max-height: 400px;
            object-fit: contain;
            display: block;
            filter: none;
            opacity: 0.3;
            transition: filter 0.3s ease, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
            border: none;
            outline: none;
            background: none;
            will-change: filter, transform, opacity;
            backface-visibility: hidden;
            transform: translateZ(0);
        }

        /* Image loading state */
        .card img[data-loading="true"] {
            opacity: 0;
        }

        .card img[data-loaded="true"] {
            opacity: 0.3;
            transition: opacity 0.3s ease;
        }

        /* Category Name Overlay - Bottom of Screen */
        .card-title-overlay {
            position: fixed;
            bottom: 10vh;
            left: 0;
            right: 0;
            padding: 20px;
            background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, rgba(var(--primary-rgb), 0.3) 100%);
            backdrop-filter: blur(20px) saturate(150%);
            -webkit-backdrop-filter: blur(20px) saturate(150%);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            border-bottom: none;
            box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.3);
            text-align: center;
            color: white;
            z-index: 20;
            opacity: 0;
            transform: translate3d(0, 20px, 0);
            transition: opacity 0.3s ease, transform 0.3s ease;
            pointer-events: none;
            will-change: opacity, transform;
        }

        .card-title-overlay.visible {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }

        .card-title-overlay .category-name {
            font-size: 1.4rem;
            font-weight: 700;
            margin-bottom: 10px;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
        }

        .card-title-overlay .category-desc {
            font-size: 0.9rem;
            font-weight: 400;
            line-height: 1.5;
            color: #d0d0d0;
            opacity: 0.95;
            max-width: 600px;
            margin: 0 auto;
            text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
        }

        /* Active State */
        .card.active img {
            filter: none;
            opacity: 1;
            transform: scale(1.05) translateZ(0);
        }

        /* Out of stock styling */
        .card.out-of-stock img {
            filter: grayscale(70%);
            opacity: 0.5;
        }
        .card.out-of-stock.active img {
            filter: grayscale(50%);
            opacity: 0.7;
            transform: scale(1.05) translateZ(0);
        }
        .out-of-stock-badge {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(-15deg);
            background: rgba(220, 53, 69, 0.9);
            color: white;
            padding: 8px 20px;
            border-radius: 8px;
            font-size: 0.9rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            z-index: 10;
            white-space: nowrap;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
            border: 2px solid rgba(255, 255, 255, 0.3);
        }
        body.lang-ar .out-of-stock-badge {
            font-family: var(--font-ar);
        }

        /* Hover effect removed - no hover animation for cards */

        /* --- 5. INFO PANEL (Only visible for Dishes) --- */
        .info-panel {
            position: fixed;
            top: 105px;
            bottom: auto;
            left: 10px;
            right: 10px;
            width: calc(100% - 20px);
            padding: 12px 15px;
            background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(var(--primary-rgb), 0.4) 100%);
            backdrop-filter: blur(20px) saturate(150%);
            -webkit-backdrop-filter: blur(20px) saturate(150%);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 15px;
            display: flex; flex-direction: column; justify-content: flex-start;
            z-index: 20;
            opacity: 0;
            transform: translate3d(0, 20px, 0);
            transition: opacity 0.3s ease, transform 0.3s ease;
            max-height: 35vh;
            overflow-y: auto;
            will-change: opacity, transform;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
        }
        .info-panel.visible { opacity: 1; transform: translate3d(0, 0, 0); }
        body.lang-ar .info-panel { text-align: right; }

        /* Info Text Styles (same as before) */
        .dish-category { font-size: 0.8rem; font-weight: 600; color: var(--turath-light); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 15px; opacity: 0.95; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
        .dish-name { font-size: 1.2rem; font-weight: 900; text-transform: uppercase; line-height: 1.1; margin-bottom: 3px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); }
        .dish-price { font-size: 1rem; color: var(--turath-gold); font-weight: 700; margin-bottom: 4px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
        .dish-desc { font-size: 0.75rem; color: #d0d0d0; margin-bottom: 8px; line-height: 1.2; max-height: 2.4em; overflow: hidden; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); }

        /* Stats Grid (same as before) */
        .stats-grid { display: flex; gap: 8px; margin-top: 3px; }
        .stat-item { flex: 1; }
        .stat-label { font-size: 0.65rem; text-transform: uppercase; color: white; margin-bottom: 3px; display: block; font-weight: 600; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }
        .bar-track { width: 100%; height: 3px; background: rgba(255,255,255,0.15); border-radius: 2px; }
        .bar-fill {
            height: 100%;
            background: var(--turath-gold);
            width: 0%;
            transition: width 0.5s ease;
            will-change: width;
        }

        /* Loading Indicator */
        .loading-spinner {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50px;
            height: 50px;
            border: 3px solid rgba(var(--secondary-rgb), 0.2);
            border-top: 3px solid var(--turath-gold);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            z-index: 200;
        }

        @keyframes spin {
            0% { transform: translate(-50%, -50%) rotate(0deg); }
            100% { transform: translate(-50%, -50%) rotate(360deg); }
        }

        /* --- DISH DETAIL VIEW (floating dish + scrollable list + fixed CTA) --- */
        .ingredients-container {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            top: 56%;
            z-index: 998;
            display: flex;
            flex-direction: column;
            max-width: 620px;
            margin: 0 auto;
            opacity: 0;
            transform: translateY(24px);
            transition: opacity 0.5s ease, transform 0.5s ease;
            pointer-events: none;
        }

        .ingredients-container.visible {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        /* Ingredients list — scrollable, merged softly into the background */
        .dish-contents-list {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            list-style: none;
            margin: 0;
            padding: 26px 30px 12px;
            background: linear-gradient(to bottom, rgba(10,11,15,0) 0%, rgba(10,11,15,0.45) 24%, rgba(10,11,15,0.72) 100%);
            border: none;
            border-radius: 0;
            box-shadow: none;
            -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 8%);
            position: relative;
        }
        .dish-contents-list::-webkit-scrollbar { width: 5px; }
        .dish-contents-list::-webkit-scrollbar-thumb { background: rgba(var(--secondary-rgb), 0.45); border-radius: 4px; }

        .contents-item {
            color: rgba(255, 255, 255, 0.95);
            font-size: 1.05rem;
            font-weight: 500;
            margin-bottom: 16px;
            opacity: 0;
            transform: translateX(30px);
            transition: all 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
            padding-left: 0;
            letter-spacing: 0.3px;
            line-height: 1.6;
            position: relative;
            padding-left: 25px;
        }

        body.lang-ar .contents-item {
            transform: translateX(-30px);
            padding-left: 0;
            padding-right: 25px;
            font-family: var(--font-ar);
        }

        .contents-item:last-child {
            margin-bottom: 0;
        }

        .ingredients-container.visible .contents-item {
            opacity: 1;
            transform: translateX(0);
        }

        /* Stagger animation for list items */
        .ingredients-container.visible .contents-item:nth-child(1) { transition-delay: 0.05s; }
        .ingredients-container.visible .contents-item:nth-child(2) { transition-delay: 0.1s; }
        .ingredients-container.visible .contents-item:nth-child(3) { transition-delay: 0.15s; }
        .ingredients-container.visible .contents-item:nth-child(4) { transition-delay: 0.2s; }
        .ingredients-container.visible .contents-item:nth-child(5) { transition-delay: 0.25s; }
        .ingredients-container.visible .contents-item:nth-child(6) { transition-delay: 0.3s; }
        .ingredients-container.visible .contents-item:nth-child(7) { transition-delay: 0.35s; }
        .ingredients-container.visible .contents-item:nth-child(8) { transition-delay: 0.4s; }

        .contents-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 6px;
            height: 6px;
            background: var(--turath-gold);
            border-radius: 50%;
            box-shadow: 0 0 8px rgba(var(--secondary-rgb), 0.6);
        }

        body.lang-ar .contents-item::before {
            left: auto;
            right: 0;
        }

        /* Add-to-Order bar — fixed at the bottom of the detail view */
        .add-to-order-btn {
            flex: 0 0 auto;
            margin: 8px 24px 24px;
            padding: 15px 20px;
            border-radius: 16px;
            background: linear-gradient(135deg, var(--turath-gold) 0%, #c9984d 100%);
            color: #fff;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            cursor: pointer;
            font-size: 1rem;
            font-weight: 700;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 8px 24px rgba(var(--secondary-rgb), 0.4);
        }
        body.lang-ar .add-to-order-btn { font-family: var(--font-ar); }

        .add-to-order-btn svg {
            width: 20px;
            height: 20px;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
        }

        .add-to-order-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 30px rgba(var(--secondary-rgb), 0.55);
            background: linear-gradient(135deg, #e0b562 0%, var(--turath-gold) 100%);
        }

        .add-to-order-btn:active {
            transform: translateY(0);
        }

        body.lang-ar .contents-item::before {
            margin-right: 0;
            margin-left: 10px;
        }

        /* Dish detail view — hide the other cards, float the active dish up */
        body.dish-detail-active .card:not(.detail-active) {
            opacity: 0 !important;
            transition: opacity 0.4s ease;
        }

        body.dish-detail-active .card.detail-active {
            transform: translate(-50%, -50%) translateY(var(--lift, -9vh)) scale(var(--dscale, 1.12)) !important;
            transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
            z-index: 997 !important;
        }

        body.dish-detail-active .card.detail-active img {
            animation: dish-img-float 4.5s ease-in-out infinite;
        }
        @keyframes dish-img-float {
            0%, 100% { transform: scale(1.05) translateY(0) translateZ(0); }
            50%      { transform: scale(1.05) translateY(-10px) translateZ(0); }
        }

        /* Desktop Adjustments */
        @media (min-width: 769px) {
            .card { max-width: 350px; top: 35%; }
            .card img { max-width: 350px; max-height: 500px; }
            .info-panel {
                position: absolute;
                top: auto;
                width: 450px;
                height: auto;
                max-height: none;
                bottom: 8%;
                right: 10%;
                left: auto;
                background: linear-gradient(135deg, rgba(0,0,0,0.35) 0%, rgba(var(--primary-rgb), 0.3) 100%);
                border-radius: 20px;
                padding: 25px;
                border: 1px solid rgba(255, 255, 255, 0.15);
                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
            }
            body.lang-ar .info-panel { left: 10%; right: auto; }
            .dish-category { font-size: 1rem; margin-bottom: 8px; }
            .dish-name { font-size: 1.8rem; }
            .dish-price { font-size: 1.4rem; }
            .dish-desc { font-size: 0.95rem; }
            .turath-name { font-size: 2.8rem; letter-spacing: 5px; margin-top: 10px; }

            /* Category overlay on desktop */
            .card-title-overlay {
                bottom: 8%;
                border-radius: 20px 20px 0 0;
                margin: 0 20px;
                left: 0;
                right: 0;
                width: calc(100% - 40px);
                padding: 30px;
            }
            .card-title-overlay .category-name {
                font-size: 1.8rem;
            }
            .card-title-overlay .category-desc {
                font-size: 1.1rem;
                max-width: 800px;
            }

            /* Detail view — desktop */
            .ingredients-container {
                max-width: 560px;
                top: 52%;
            }
            body.dish-detail-active .card.detail-active {
                --lift: -12vh;
                --dscale: 1.35;
            }
            /* keep the dish info panel clear of the centered list on desktop */
            body.dish-detail-active .info-panel { opacity: 0; pointer-events: none; }
            .contents-item {
                font-size: 1.1rem;
            }
        }

        /* Mobile Adjustments */
        @media (max-width: 768px) {
            .turath-name { font-size: 1.4rem; letter-spacing: 2px; }
            .branch-name { font-size: 0.6rem; letter-spacing: 1px; margin-top: 2px; }
            header { height: 100px; padding: 10px 15px; }
            .view-section { top: 100px; height: calc(100vh - 100px); }
            .brand-logos { gap: 8px; }
            .brand-logos img { height: 30px !important; }

            /* Leave room at the leading-top corner for the floating back arrow */
            .info-panel { padding-inline-start: 60px; }

            /* Move cards down on mobile to make space */
            .card {
                top: 50%;
            }

            /* Category overlay adjustments for mobile - move to top */
            .card-title-overlay {
                top: 100px;
                bottom: auto;
                border-radius: 20px 20px 20px 20px;
                border-top: none;
                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                margin: 0 10px;
                left: 0;
                right: 0;
                width: calc(100% - 20px);
                background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(var(--primary-rgb), 0.3) 100%);
                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
                max-height: 30vh;
                overflow-y: auto;
            }
            .card-title-overlay .category-desc {
                font-size: 0.85rem;
                line-height: 1.4;
            }

            /* Detail view — mobile */
            .ingredients-container {
                top: 57%;
                max-width: 100%;
            }

            .dish-contents-list {
                padding: 22px 22px 10px;
            }

            .contents-item {
                font-size: 0.98rem;
                margin-bottom: 13px;
            }

            .add-to-order-btn {
                margin: 8px 18px 20px;
                padding: 14px 18px;
                font-size: 0.98rem;
            }

            body.dish-detail-active .card.detail-active {
                --lift: -7vh;
                --dscale: 1.12;
            }
        }

        /* Reduced motion for accessibility and performance */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }

        /* --- FOOTER --- */
        footer {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            padding: 8px 20px;
            background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 100%);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            text-align: center;
            z-index: 100;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }

        footer p {
            margin: 0;
            font-size: 0.7rem;
            color: rgba(255, 255, 255, 0.6);
            font-weight: 500;
            letter-spacing: 0.5px;
        }

        body.lang-ar footer p {
            font-family: var(--font-ar);
        }

        @media (max-width: 768px) {
            footer {
                padding: 6px 15px;
            }
            footer p {
                font-size: 0.65rem;
            }
        }

        /* --- CONTENT PROTECTION (TEMPORARILY DISABLED on request) ---
           Re-enable to block text selection and image drag/save.
        * {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-touch-callout: none;
        }

        img {
            pointer-events: none;
            -webkit-user-drag: none;
            -khtml-user-drag: none;
            -moz-user-drag: none;
            -o-user-drag: none;
        }
        */

        /* ===== ELEGANT ORDERS LIST FEATURE ===== */

        /* Floating Action Button - Orders Icon */
        .orders-fab {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 70px;
            height: 70px;
            background: linear-gradient(135deg, var(--turath-gold), #d4a574);
            border-radius: 50%;
            box-shadow: 0 8px 25px rgba(var(--secondary-rgb), 0.6), 0 0 0 0 rgba(var(--secondary-rgb), 0.4);
            cursor: pointer;
            z-index: 9999;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            border: 3px solid rgba(255, 255, 255, 0.3);
        }

        .orders-fab:hover {
            transform: scale(1.1) translateY(-5px);
            box-shadow: 0 12px 35px rgba(var(--secondary-rgb), 0.8), 0 0 0 0 rgba(var(--secondary-rgb), 0);
        }

        .orders-fab:active {
            transform: scale(0.95);
        }

        /* Shopping bag icon */
        .orders-icon {
            width: 35px;
            height: 35px;
            position: relative;
            transition: transform 0.3s ease;
        }

        .orders-icon svg {
            width: 100%;
            height: 100%;
            stroke: white;
            stroke-width: 2.5;
            fill: none;
        }

        .orders-fab:hover .orders-icon {
            transform: scale(1.1);
        }

        /* Pulse animation */
        @keyframes pulse-orders {
            0% {
                box-shadow: 0 8px 25px rgba(var(--secondary-rgb), 0.6), 0 0 0 0 rgba(var(--secondary-rgb), 0.7);
            }
            70% {
                box-shadow: 0 8px 25px rgba(var(--secondary-rgb), 0.6), 0 0 0 20px rgba(var(--secondary-rgb), 0);
            }
            100% {
                box-shadow: 0 8px 25px rgba(var(--secondary-rgb), 0.6), 0 0 0 0 rgba(var(--secondary-rgb), 0);
            }
        }

        .orders-fab.pulse {
            animation: pulse-orders 1s ease-out;
        }

        /* Item counter badge */
        .orders-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background: linear-gradient(135deg, #e74c3c, #c0392b);
            color: white;
            border-radius: 50%;
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            font-weight: bold;
            border: 3px solid white;
            opacity: 0;
            transform: scale(0);
            transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            box-shadow: 0 4px 12px rgba(231, 76, 60, 0.5);
        }

        .orders-badge.show {
            opacity: 1;
            transform: scale(1);
        }

        /* Elegant Orders Overlay */
        .orders-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(10px);
            z-index: 10000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.4s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .orders-overlay.active {
            opacity: 1;
            pointer-events: all;
        }

        /* Orders Panel */
        .orders-panel {
            background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.95) 0%, rgba(0, 0, 0, 0.95) 100%);
            border-radius: 30px;
            width: 100%;
            max-width: 600px;
            max-height: 90vh;
            box-shadow: 0 25px 80px rgba(0, 0, 0, 0.8), 0 0 100px rgba(var(--secondary-rgb), 0.3);
            border: 2px solid rgba(var(--secondary-rgb), 0.3);
            display: flex;
            flex-direction: column;
            transform: scale(0.9) translateY(50px);
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .orders-overlay.active .orders-panel {
            transform: scale(1) translateY(0);
        }

        /* Orders Header */
        .orders-header {
            background: linear-gradient(135deg, var(--turath-gold), #d4a574);
            border-radius: 30px 30px 0 0;
            padding: 25px 30px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 3px solid rgba(255, 255, 255, 0.2);
        }

        .orders-title {
            display: flex;
            align-items: center;
            gap: 15px;
            color: white;
        }

        .orders-title-icon {
            width: 32px;
            height: 32px;
        }

        .orders-title-icon svg {
            width: 100%;
            height: 100%;
            stroke: white;
            fill: none;
            stroke-width: 2;
        }

        .orders-title-text {
            font-size: 1.5rem;
            font-weight: 700;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }

        .orders-close {
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.2);
            border: 2px solid white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 1.5rem;
            color: white;
            transition: all 0.3s ease;
            font-weight: bold;
        }

        .orders-close:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: rotate(90deg);
        }

        .orders-close:active {
            transform: rotate(90deg) scale(0.9);
        }

        /* Orders Content Area */
        .orders-content {
            flex: 1;
            overflow-y: auto;
            padding: 25px;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .orders-content::-webkit-scrollbar {
            width: 8px;
        }

        .orders-content::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
        }

        .orders-content::-webkit-scrollbar-thumb {
            background: var(--turath-gold);
            border-radius: 10px;
        }

        /* Order Item Card */
        .order-item {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 15px;
            display: flex;
            gap: 15px;
            border: 2px solid rgba(var(--secondary-rgb), 0.2);
            transition: all 0.3s ease;
            animation: slideInOrder 0.4s ease-out;
        }

        .order-item:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(var(--secondary-rgb), 0.4);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
        }

        @keyframes slideInOrder {
            from {
                opacity: 0;
                transform: translateX(-30px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .order-item-image {
            width: 100px;
            height: 100px;
            border-radius: 15px;
            object-fit: cover;
            border: 3px solid rgba(var(--secondary-rgb), 0.3);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
            flex-shrink: 0;
        }

        .order-item-details {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .order-item-name {
            font-size: 1.1rem;
            font-weight: 700;
            color: white;
            margin-bottom: 5px;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        }

        .order-item-price {
            font-size: 0.95rem;
            color: var(--turath-gold);
            font-weight: 600;
        }

        .order-item-controls {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-top: 10px;
        }

        .order-item-qty-control {
            display: flex;
            align-items: center;
            gap: 10px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 25px;
            padding: 5px 10px;
            border: 1px solid rgba(var(--secondary-rgb), 0.3);
        }

        .order-item-qty-btn {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--turath-gold), #d4a574);
            border: none;
            color: white;
            font-size: 1.2rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .order-item-qty-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 4px 12px rgba(var(--secondary-rgb), 0.5);
        }

        .order-item-qty-btn:active {
            transform: scale(0.95);
        }

        .order-item-qty {
            font-size: 1rem;
            font-weight: 700;
            color: white;
            min-width: 25px;
            text-align: center;
        }

        .order-item-remove {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: linear-gradient(135deg, #e74c3c, #c0392b);
            border: 2px solid white;
            color: white;
            font-size: 1.2rem;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-left: auto;
        }

        .order-item-remove:hover {
            transform: scale(1.1) rotate(90deg);
            box-shadow: 0 4px 12px rgba(231, 76, 60, 0.6);
        }

        .order-item-remove:active {
            transform: scale(0.9) rotate(90deg);
        }

        /* Empty State */
        .orders-empty {
            text-align: center;
            padding: 60px 20px;
            color: rgba(255, 255, 255, 0.5);
        }

        .orders-empty-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
            opacity: 0.3;
        }

        .orders-empty-icon svg {
            width: 100%;
            height: 100%;
            stroke: white;
            fill: none;
            stroke-width: 1.5;
        }

        .orders-empty-text {
            font-size: 1.2rem;
            font-weight: 600;
        }

        /* Orders Footer */
        .orders-footer {
            background: rgba(0, 0, 0, 0.5);
            border-radius: 0 0 30px 30px;
            padding: 20px 30px;
            border-top: 2px solid rgba(var(--secondary-rgb), 0.3);
            display: none;
        }

        .orders-footer.show {
            display: block;
        }

        .orders-total {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 2px solid rgba(var(--secondary-rgb), 0.2);
        }

        .orders-total-label {
            font-size: 1.2rem;
            font-weight: 700;
            color: white;
        }

        .orders-total-amount {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--turath-gold);
            text-shadow: 0 2px 8px rgba(var(--secondary-rgb), 0.5);
        }

        .orders-btn-clear {
            width: 100%;
            padding: 14px 20px;
            border-radius: 15px;
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid rgba(231, 76, 60, 0.5);
            background: linear-gradient(135deg, rgba(231, 76, 60, 0.2), rgba(192, 57, 43, 0.2));
            color: white;
        }

        .orders-btn-clear:hover {
            background: linear-gradient(135deg, rgba(231, 76, 60, 0.3), rgba(192, 57, 43, 0.3));
            border-color: rgba(231, 76, 60, 0.8);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(231, 76, 60, 0.3);
        }

        .orders-btn-clear:active {
            transform: translateY(0);
        }

        /* Mobile Adjustments for Orders */
        @media (max-width: 768px) {
            .orders-panel {
                max-width: 100%;
                border-radius: 20px;
            }

            .orders-header {
                padding: 20px;
                border-radius: 20px 20px 0 0;
            }

            .orders-title-text {
                font-size: 1.2rem;
            }

            .orders-content {
                padding: 15px;
            }

            .order-item {
                padding: 12px;
            }

            .order-item-image {
                width: 80px;
                height: 80px;
            }

            .order-item-name {
                font-size: 1rem;
            }

            .orders-footer {
                padding: 15px 20px;
                border-radius: 0 0 20px 20px;
            }
        }

        /* Floating animation */
        @keyframes subtle-float {
            0%, 100% {
                transform: translateX(-50%) translateY(0);
            }
            50% {
                transform: translateX(-50%) translateY(-10px);
            }
        }

        /* Maintenance Overlay */
        .maintenance-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, var(--dark-bg) 0%, #1a2332 50%, var(--dark-bg) 100%);
            z-index: 10000;
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            text-align: center;
        }

        .maintenance-overlay.show {
            display: flex;
        }

        .maintenance-icon {
            font-size: 5rem;
            margin-bottom: 30px;
            animation: pulse-glow 2s ease-in-out infinite;
        }

        @keyframes pulse-glow {
            0%, 100% {
                opacity: 0.8;
                transform: scale(1);
            }
            50% {
                opacity: 1;
                transform: scale(1.1);
            }
        }

        .maintenance-title {
            font-family: var(--font-ar);
            font-size: 2.5rem;
            font-weight: 900;
            background: linear-gradient(135deg, var(--turath-teal) 0%, var(--turath-gold) 50%, var(--turath-light) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 20px;
            line-height: 1.3;
        }

        .maintenance-message {
            font-size: 1.2rem;
            color: var(--text-grey);
            max-width: 400px;
            line-height: 1.6;
            margin-bottom: 30px;
        }

        .maintenance-brand {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-top: 40px;
            opacity: 0.7;
        }

        .maintenance-brand img {
            height: 50px;
        }

        .maintenance-brand-name {
            font-family: var(--font-ar);
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--turath-gold);
        }

        /* ============================================================
           VIEW TOGGLE (2D / 3D segmented control)
           ============================================================ */
        .view-toggle {
            display: flex;
            align-items: center;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 22px;
            padding: 3px;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            gap: 2px;
        }

        .vt-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            border: none;
            background: transparent;
            color: rgba(255, 255, 255, 0.65);
            border-radius: 18px;
            padding: 6px 12px;
            cursor: pointer;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.5px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            white-space: nowrap;
        }

        .vt-btn svg {
            width: 15px;
            height: 15px;
            stroke: currentColor;
            fill: none;
            stroke-width: 2;
        }

        .vt-btn:hover { color: var(--turath-light); }

        .vt-btn.active {
            background: linear-gradient(135deg, var(--turath-gold) 0%, #c9984d 100%);
            color: #fff;
            box-shadow: 0 2px 10px rgba(var(--secondary-rgb), 0.4);
        }

        body.lang-ar .vt-btn { font-family: var(--font-ar); }

        @media (max-width: 768px) {
            .vt-btn .vt-label { display: none; }
            .vt-btn { padding: 6px 9px; }
        }

        /* ============================================================
           2D GRID VIEW
           ============================================================ */
        .grid-view {
            position: absolute;
            top: 110px;
            left: 0;
            width: 100%;
            height: calc(100vh - 110px);
            overflow-y: auto;
            overflow-x: hidden;
            display: none;
            flex-direction: column;
            -webkit-overflow-scrolling: touch;
            padding-bottom: 120px;
        }

        body.grid-mode .grid-view { display: flex; }
        body.grid-mode #viewStack { display: none; }

        .grid-view::-webkit-scrollbar { width: 8px; }
        .grid-view::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); }
        .grid-view::-webkit-scrollbar-thumb { background: var(--turath-gold); border-radius: 10px; }

        /* Category pills bar (sticky) */
        .grid-cats {
            position: sticky;
            top: 0;
            z-index: 30;
            display: flex;
            flex-shrink: 0;
            align-items: center;
            gap: 10px;
            padding: 16px 18px;
            overflow-x: auto;
            overflow-y: visible;
            white-space: nowrap;
            margin-bottom: 14px;
            background: linear-gradient(to bottom, rgba(10,11,15,0.92) 0%, rgba(10,11,15,0.75) 100%);
            backdrop-filter: blur(16px) saturate(150%);
            -webkit-backdrop-filter: blur(16px) saturate(150%);
            border-bottom: 1px solid rgba(var(--secondary-rgb), 0.15);
            scrollbar-width: none;
        }
        .grid-cats::-webkit-scrollbar { display: none; }

        .grid-cat-pill {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 13px 22px;
            border-radius: 30px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.12);
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        body.lang-ar .grid-cat-pill { font-family: var(--font-ar); }

        .grid-cat-pill:hover {
            border-color: rgba(var(--secondary-rgb), 0.5);
            color: #fff;
        }

        .grid-cat-pill.active {
            background: linear-gradient(135deg, var(--turath-teal) 0%, #0d3a49 100%);
            border-color: var(--turath-gold);
            color: var(--turath-light);
            box-shadow: 0 4px 18px rgba(var(--primary-rgb), 0.6), 0 0 0 1px rgba(var(--secondary-rgb),0.3) inset;
        }

        /* Category heading inside the scroll body */
        .grid-section-head {
            text-align: center;
            padding: 26px 20px 6px;
        }
        .grid-section-title {
            font-size: 1.6rem;
            font-weight: 900;
            background: linear-gradient(135deg, var(--turath-gold) 0%, var(--turath-light) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            line-height: 1.3;
        }
        body.lang-ar .grid-section-title { font-family: var(--font-ar); }
        .grid-section-desc {
            font-size: 0.85rem;
            color: var(--text-grey);
            max-width: 600px;
            margin: 8px auto 0;
            line-height: 1.5;
        }

        /* The grid itself */
        .grid-items {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 16px;
            padding: 18px;
            max-width: 1280px;
            margin: 0 auto;
            width: 100%;
        }

        @media (min-width: 769px) {
            .grid-items {
                grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
                gap: 24px;
                padding: 24px;
            }
        }

        /* Dish card */
        .grid-card {
            position: relative;
            background: linear-gradient(160deg, rgba(var(--primary-rgb), 0.22) 0%, rgba(0, 0, 0, 0.35) 100%);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 22px;
            padding: 14px 14px 16px;
            display: flex;
            flex-direction: column;
            cursor: pointer;
            overflow: hidden;
            transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s ease, box-shadow 0.3s ease;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
            opacity: 0;
            transform: translateY(24px);
            animation: gridCardIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }

        @keyframes gridCardIn {
            to { opacity: 1; transform: translateY(0); }
        }

        .grid-card:hover {
            transform: translateY(-6px);
            border-color: rgba(var(--secondary-rgb), 0.45);
            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 40px rgba(var(--secondary-rgb), 0.12);
        }
        .grid-card:active { transform: translateY(-2px) scale(0.99); }

        /* Image stage with teal glow */
        .grid-card-img {
            position: relative;
            width: 100%;
            aspect-ratio: 1 / 1;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 12px;
        }
        .grid-card-img::before {
            transition: background 0.45s ease;
            content: '';
            position: absolute;
            inset: 8%;
            background: radial-gradient(circle at center, rgba(var(--glow-rgb), 0.5) 0%, rgba(var(--glow-rgb), 0.16) 45%, transparent 72%);
            border-radius: 50%;
            z-index: 0;
        }
        .grid-card-img img {
            position: relative;
            z-index: 1;
            max-width: 92%;
            max-height: 92%;
            width: auto;
            height: auto;
            object-fit: contain;
            filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.55));
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .grid-card:hover .grid-card-img img { transform: scale(1.08); }

        .grid-card-name {
            font-size: 0.98rem;
            font-weight: 700;
            color: #fff;
            line-height: 1.25;
            margin-bottom: 5px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        body.lang-ar .grid-card-name { font-family: var(--font-ar); }

        .grid-card-desc {
            font-size: 0.74rem;
            color: var(--text-grey);
            line-height: 1.4;
            margin-bottom: 10px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            min-height: 2em;
        }

        .grid-card-foot {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: auto;
            gap: 8px;
        }
        body.lang-ar .grid-card-foot { flex-direction: row-reverse; }

        .grid-card-price {
            font-size: 0.95rem;
            font-weight: 800;
            color: var(--turath-gold);
            text-shadow: 0 2px 8px rgba(var(--secondary-rgb), 0.25);
        }
        body.lang-ar .grid-card-price { font-family: var(--font-ar); }

        .grid-card-add {
            flex-shrink: 0;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            border: none;
            background: linear-gradient(135deg, var(--turath-gold) 0%, #c9984d 100%);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.25s ease;
            box-shadow: 0 4px 14px rgba(var(--secondary-rgb), 0.4);
        }
        .grid-card-add svg { width: 20px; height: 20px; stroke: #fff; stroke-width: 2.5; fill: none; }
        .grid-card-add:hover { transform: scale(1.12); box-shadow: 0 6px 20px rgba(var(--secondary-rgb), 0.6); }
        .grid-card-add:active { transform: scale(0.92); }

        /* Out of stock card */
        .grid-card.out-of-stock { cursor: default; }
        .grid-card.out-of-stock .grid-card-img img { filter: grayscale(80%) drop-shadow(0 8px 16px rgba(0,0,0,0.5)); opacity: 0.55; }
        .grid-card.out-of-stock .grid-card-add { background: rgba(255,255,255,0.12); box-shadow: none; cursor: not-allowed; }
        .grid-card-stock-badge {
            position: absolute;
            top: 14px;
            inset-inline-start: 14px;
            background: rgba(220, 53, 69, 0.92);
            color: #fff;
            font-size: 0.62rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 4px 10px;
            border-radius: 20px;
            z-index: 3;
            box-shadow: 0 3px 10px rgba(0,0,0,0.4);
        }
        body.lang-ar .grid-card-stock-badge { font-family: var(--font-ar); }

        .grid-card-spicy {
            position: absolute;
            top: 14px;
            inset-inline-end: 14px;
            font-size: 0.95rem;
            z-index: 3;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
        }

        .grid-empty {
            text-align: center;
            padding: 80px 20px;
            color: rgba(255,255,255,0.45);
            font-size: 1.1rem;
        }
        body.lang-ar .grid-empty { font-family: var(--font-ar); }

        /* ============================================================
           DISH DETAIL MODAL (2D)
           ============================================================ */
        /* 2D dish detail — same treatment as the 3D detail screen:
           header stays visible, dish floats over the teal background,
           ingredients scroll beneath, Add-to-Order bar fixed at the bottom. */
        .dish-modal {
            position: fixed;
            top: 110px;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 49;
            background: radial-gradient(circle at center, rgba(var(--glow-rgb), 0.55) 0%, var(--dark-bg) 72%, #000 100%);
            display: flex;
            flex-direction: column;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.4s ease;
        }
        .dish-modal.active { opacity: 1; pointer-events: auto; }

        .dish-modal-card {
            position: relative;
            width: 100%;
            max-width: 600px;
            height: 100%;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            background: none;
            border: none;
            border-radius: 0;
            box-shadow: none;
            transform: translateY(22px);
            transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .dish-modal.active .dish-modal-card { transform: translateY(0); }

        .dish-modal-close {
            position: absolute;
            top: 12px;
            inset-inline-start: 12px;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: rgba(10, 11, 15, 0.55);
            border: 1px solid rgba(255, 255, 255, 0.18);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            color: #fff;
            cursor: pointer;
            z-index: 5;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .dish-modal-close svg { width: 22px; height: 22px; }
        .dish-modal-close:hover { border-color: var(--turath-gold); color: var(--turath-gold); }
        body.lang-ar .dish-modal-close svg { transform: scaleX(-1); }

        .dish-modal-imgwrap {
            position: relative;
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 28px 24px 6px;
            min-height: 190px;
        }
        .dish-modal-imgwrap::before {
            content: '';
            position: absolute;
            inset: 12%;
            background: radial-gradient(circle at center, rgba(var(--glow-rgb), 0.6) 0%, rgba(var(--glow-rgb), 0.2) 48%, transparent 74%);
            border-radius: 50%;
        }
        .dish-modal-imgwrap img {
            position: relative;
            max-width: 100%;
            max-height: 290px;
            object-fit: contain;
            filter: drop-shadow(0 18px 34px rgba(0,0,0,0.6));
            animation: dish-float 4s ease-in-out infinite;
        }

        /* Dedicated float for the modal dish image (no translateX, so it stays centered) */
        @keyframes dish-float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        .dish-modal-body {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            padding: 6px 28px 14px;
            display: flex;
            flex-direction: column;
            -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
        }
        .dish-modal-body::-webkit-scrollbar { width: 5px; }
        .dish-modal-body::-webkit-scrollbar-thumb { background: rgba(var(--secondary-rgb), 0.45); border-radius: 4px; }
        body.lang-ar .dish-modal-body { text-align: right; }

        .dish-modal-cat {
            font-size: 0.78rem;
            font-weight: 600;
            color: var(--turath-light);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
            opacity: 0.9;
        }
        .dish-modal-name {
            font-size: 1.6rem;
            font-weight: 900;
            color: #fff;
            line-height: 1.2;
            margin-bottom: 10px;
            text-shadow: 0 2px 12px rgba(0,0,0,0.5);
        }
        body.lang-ar .dish-modal-name { font-family: var(--font-ar); }
        .dish-modal-price {
            font-size: 1.35rem;
            font-weight: 800;
            color: var(--turath-gold);
            margin-bottom: 16px;
            text-shadow: 0 2px 10px rgba(var(--secondary-rgb), 0.3);
        }
        body.lang-ar .dish-modal-price { font-family: var(--font-ar); }
        .dish-modal-desc {
            font-size: 0.92rem;
            color: #d4d4d4;
            line-height: 1.6;
            margin-bottom: 18px;
        }
        body.lang-ar .dish-modal-desc { font-family: var(--font-ar); }

        .dish-modal-ing-title {
            font-size: 0.8rem;
            font-weight: 700;
            color: var(--turath-light);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 12px;
            padding-bottom: 8px;
            border-bottom: 1px solid rgba(var(--secondary-rgb), 0.25);
        }
        body.lang-ar .dish-modal-ing-title { font-family: var(--font-ar); }

        .dish-modal-ing {
            list-style: none;
            margin: 0 0 22px;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .dish-modal-ing li {
            position: relative;
            padding-inline-start: 22px;
            font-size: 0.9rem;
            color: rgba(255,255,255,0.9);
            line-height: 1.4;
        }
        body.lang-ar .dish-modal-ing li { font-family: var(--font-ar); }
        .dish-modal-ing li::before {
            content: '';
            position: absolute;
            inset-inline-start: 0;
            top: 0.5em;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--turath-gold);
            box-shadow: 0 0 8px rgba(var(--secondary-rgb), 0.6);
        }

        .dish-modal-addbtn {
            flex: 0 0 auto;
            margin: 8px 24px 22px;
            padding: 15px 20px;
            border: none;
            border-radius: 16px;
            background: linear-gradient(135deg, var(--turath-gold) 0%, #c9984d 100%);
            color: #fff;
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            transition: all 0.3s ease;
            box-shadow: 0 8px 24px rgba(var(--secondary-rgb), 0.4);
        }
        body.lang-ar .dish-modal-addbtn { font-family: var(--font-ar); }
        .dish-modal-addbtn svg { width: 20px; height: 20px; stroke: #fff; stroke-width: 2.5; fill: none; }
        .dish-modal-addbtn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(var(--secondary-rgb), 0.55); }
        .dish-modal-addbtn:active { transform: translateY(0); }
        .dish-modal-addbtn:disabled {
            background: rgba(255,255,255,0.12);
            color: rgba(255,255,255,0.5);
            cursor: not-allowed;
            box-shadow: none;
            transform: none;
        }

        @media (max-width: 768px) {
            .grid-view { top: 100px; height: calc(100vh - 100px); }
            .grid-section-title { font-size: 1.3rem; }
            .dish-modal { top: 100px; }
            .dish-modal-name { font-size: 1.3rem; }
            .dish-modal-price { font-size: 1.15rem; }
        }

        /* ===== CHECKOUT / ORDER STATUS ===== */
        .orders-btn-checkout {
            width: 100%;
            padding: 14px 20px;
            border: none;
            border-radius: 15px;
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            color: #fff;
            background: linear-gradient(135deg, var(--turath-gold) 0%, #c9984d 100%);
            box-shadow: 0 8px 22px rgba(var(--secondary-rgb),0.4);
            transition: all 0.3s ease;
            margin-bottom: 10px;
        }
        body.lang-ar .orders-btn-checkout { font-family: var(--font-ar); }
        .orders-btn-checkout:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(var(--secondary-rgb),0.55); }
        .orders-btn-checkout:active { transform: translateY(0); }
        .orders-btn-checkout:disabled { opacity: 0.6; cursor: default; transform: none; }

        .co-types { display: flex; gap: 12px; margin-bottom: 18px; }
        .co-type {
            flex: 1; padding: 14px; border-radius: 14px; cursor: pointer;
            background: rgba(255,255,255,0.05); border: 2px solid rgba(255,255,255,0.12);
            color: #fff; font-size: 1rem; font-weight: 700; transition: all 0.25s ease;
        }
        body.lang-ar .co-type { font-family: var(--font-ar); }
        .co-type.active { border-color: var(--turath-gold); background: linear-gradient(135deg, rgba(var(--secondary-rgb),0.25), rgba(var(--primary-rgb),0.3)); color: var(--turath-light); }

        .co-label { display: block; margin: 12px 0 6px; font-size: 0.85rem; color: var(--turath-light); font-weight: 600; }
        body.lang-ar .co-label { font-family: var(--font-ar); }
        .co-input {
            width: 100%; padding: 12px 14px; border-radius: 12px;
            background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15);
            color: #fff; font-size: 1rem; outline: none; transition: border-color 0.2s ease;
            font-family: inherit;
        }
        .co-input:focus { border-color: var(--turath-gold); }
        body.lang-ar .co-input { font-family: var(--font-ar); text-align: right; }
        .co-error { color: #ff6b6b; font-size: 0.85rem; margin-top: 12px; min-height: 1em; }
        body.lang-ar .co-error { font-family: var(--font-ar); }

        .os-number { font-size: 1.1rem; color: #fff; margin-bottom: 14px; }
        .os-badge {
            display: inline-block; padding: 10px 22px; border-radius: 30px; font-weight: 700;
            font-size: 1rem; background: rgba(var(--secondary-rgb),0.2); color: var(--turath-light);
            border: 1px solid rgba(var(--secondary-rgb),0.4);
        }
        body.lang-ar .os-badge, body.lang-ar .os-number, body.lang-ar .os-total, body.lang-ar .os-note { font-family: var(--font-ar); }
        .os-badge.os-open, .os-badge.os-in_progress, .os-badge.os-ready { background: rgba(46,204,113,0.2); color: #2ecc71; border-color: rgba(46,204,113,0.4); }
        .os-badge.os-canceled { background: rgba(231,76,60,0.2); color: #e74c3c; border-color: rgba(231,76,60,0.4); }
        .os-badge.os-closed { background: rgba(255,255,255,0.12); color: #fff; }
        .os-total { margin-top: 16px; color: #d0d0d0; }
        .os-total b { color: var(--turath-gold); }
        .os-note { margin-top: 10px; font-size: 0.8rem; color: #999; }
        /* رنّة التأكيد — the one thing a pending order asks of the customer */
        .os-confirm { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(var(--turath-gold-rgb, 201,162,77), 0.14); border: 1px solid rgba(var(--turath-gold-rgb, 201,162,77), 0.45); }
        .os-confirm-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 6px; }
        .os-confirm-call { display: inline-block; margin: 4px 0; padding: 10px 18px; border-radius: 999px; background: var(--turath-gold); color: #1a1a1a; font-weight: 700; font-size: 1.05rem; text-decoration: none; direction: ltr; }
        .os-confirm-hint { font-size: 0.8rem; color: #c8c8c8; margin-top: 6px; line-height: 1.5; }
        .os-confirm-until { font-size: 0.78rem; color: #999; margin-top: 4px; }
        .os-reason { margin-top: 8px; font-size: 0.85rem; color: #e74c3c; }
        body.lang-ar .os-confirm, body.lang-ar .os-reason { font-family: var(--font-ar); }

        /* The floating "طلباتي" chip was removed on 2026-09-09: orders moved
           into the profile sheet, and a pill hovering over the menu cards was
           covering prices. The green dot on the profile button replaces it. */

        .os-card {
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(var(--secondary-rgb),0.2);
            border-radius: 16px;
            padding: 18px;
            margin-bottom: 14px;
            text-align: center;
        }
        .ot-dismiss {
            margin-top: 12px;
            padding: 8px 18px;
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,0.2);
            background: rgba(255,255,255,0.06);
            color: #ccc; cursor: pointer; font-size: 0.85rem;
        }
        body.lang-ar .ot-dismiss { font-family: var(--font-ar); }

        .os-back-menu {
            display: block; width: 100%; margin: 18px 0 4px; padding: 13px 16px;
            border-radius: 12px;
            border: 1px solid rgba(var(--ink-rgb),0.2);
            background: transparent;
            color: inherit; cursor: pointer; font-size: 0.9rem; font-weight: 600;
            text-align: center;
        }
        .os-back-menu:hover { background: rgba(var(--ink-rgb),0.07); }
        body.lang-ar .os-back-menu { font-family: var(--font-ar); }

        .os-divider {
            text-align: center;
            color: #999;
            font-size: 0.8rem;
            margin: 18px 0 12px;
            position: relative;
        }
        body.lang-ar .os-divider { font-family: var(--font-ar); }
        .os-divider::before, .os-divider::after {
            content: '';
            position: absolute;
            top: 50%;
            width: 28%;
            height: 1px;
            background: rgba(255,255,255,0.12);
        }
        .os-divider::before { left: 0; }
        .os-divider::after { right: 0; }

/* ===== Maestro storefront additions (theme-neutral, driven by CSS variables) ===== */
:root { --font-ar: 'Tajawal', sans-serif; --font-en: 'Segoe UI', system-ui, sans-serif; }
.sf-logo { height: 40px; width: auto; max-width: 120px; object-fit: contain; }
/* Subcategory chips WRAP into rows (like the POS strip). The old one-row
   scroller hid every chip past the fold behind a scrollbar that is
   display:none by design — four of ten visible on a phone and no hint the
   rest were there. No height cap either: the grid view scrolls the page and
   the 3D info card scrolls itself, so every chip is reached by a scroll the
   guest can actually see. */
.sf-subcats { display: none; flex-wrap: wrap; gap: 8px; padding: 6px 14px; }
.sf-subcats.visible { display: flex; }
#stackSubcats { position: static; width: 100%; justify-content: flex-start; padding: 10px 0 0; margin: 0; }
.info-content > #stackSubcats.visible { display: flex; }
.sf-subcats-grid { position: relative; z-index: 1; flex-shrink: 0; margin: -6px 0 4px; padding: 4px 18px 10px; }
.sf-subcat { flex: 0 0 auto; border-radius: 999px; padding: 6px 14px; font-size: 0.82rem; font-weight: 600; cursor: pointer;
  background: rgba(var(--ink-rgb), 0.08); color: var(--ink); border: 1px solid rgba(var(--ink-rgb), 0.18); backdrop-filter: blur(8px); transition: .2s; }
.sf-subcat.active { background: var(--turath-gold); color: var(--dark-bg); border-color: var(--turath-gold); }
body.lang-ar .sf-subcat { font-family: var(--font-ar); }
.sf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.co-coupon-row { display: flex; gap: 8px; align-items: stretch; }
.co-coupon-row .co-input { flex: 1 1 auto; min-width: 0; text-transform: uppercase; }
.co-coupon-btn { flex: 0 0 auto; padding: 0 16px; border-radius: 10px; font-weight: 700; font-size: 0.85rem; cursor: pointer;
  background: var(--turath-gold); color: var(--dark-bg); border: none; }
.co-coupon-btn:disabled { opacity: 0.6; cursor: default; }
body.lang-ar .co-coupon-btn { font-family: var(--font-ar); }
/* The hall menu's invitation to the shop: the install card's shape, with a
   link where its install button goes. */
.sf-shopad .sf-install-btn { display: inline-flex; align-items: center; text-decoration: none; }
.sf-chip-freedel { background: rgba(5,150,105,0.16); color: #047857; border: 1px solid rgba(5,150,105,0.35); }
.sf-free-delivery { color: #059669; font-weight: 700; }
.co-coupon-ok { color: #059669; }
.co-coupon-bad { color: #DC2626; }
.sf-chips-card { position: absolute; top: 10px; inset-inline-start: 10px; z-index: 3; }
.sf-chips-grid { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 3; }
.sf-chips-panel { margin: 2px 0 8px; }
.sf-chip { font-size: 0.7rem; font-weight: 700; letter-spacing: .02em; padding: 3px 9px; border-radius: 999px; line-height: 1.3; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.sf-chip-stock { background: #b7791f; color: #fff; }
.sf-chip-deal { background: #c0392b; color: #fff; }
.sf-chip-featured { background: var(--turath-gold); color: var(--dark-bg); }
.sf-chip-new { background: #2f7d4f; color: #fff; }
.sf-chip-channel { background: #4a5568; color: #fff; }
.sf-chip-emenu { background: #6b3fa0; color: #fff; }
/* branch-wide promotion ribbon — a pill pinned under the header logos */
.sf-promo-banner { position: fixed; top: 72px; left: 50%; transform: translateX(-50%); z-index: 52; max-width: min(94vw, 640px);
  display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: .82rem; line-height: 1.3;
  background: rgba(var(--ink-rgb), 0.9); color: var(--dark-bg); box-shadow: 0 4px 16px rgba(0,0,0,.28); backdrop-filter: blur(8px); }
.sf-promo-banner .sf-promo-icon { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: #c0392b; color: #fff; font-weight: 800; font-size: .75rem; display: inline-flex; align-items: center; justify-content: center; }
.sf-promo-banner .sf-promo-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-promo-banner .sf-chip { flex: 0 0 auto; box-shadow: none; }
body.lang-ar .sf-promo-banner { font-family: var(--font-ar); }
@media (max-width: 768px) { .sf-promo-banner { top: 66px; font-size: .78rem; } }
.sf-discount-line { color: #2f7d4f; font-weight: 700; }
body.lang-ar .sf-chip { font-family: var(--font-ar); }
.sf-orig { opacity: .6; font-weight: 500; font-size: .85em; margin-inline-end: 6px; }
.sf-orig:empty { display: none; }
.contents-desc { opacity: .85; font-style: italic; }
.contents-empty { opacity: .6; }
/* browse-only: nothing that orders is shown */
body.no-ordering .cart-btn, body.no-ordering .add-to-order-btn, body.no-ordering .grid-card-add,
body.no-ordering .dish-modal-addbtn, body.no-ordering #ordersFab { display: none !important; }
/* the light sheet's modal haze has a transparent centre; give it a floor so the grid never shows through */
body.theme-light .dish-modal { background-color: var(--dark-bg); }
/* brand pattern as a faint canvas, when the kit has one */
body { background-image: var(--sf-pattern, none); background-size: 420px; background-blend-mode: soft-light; }
@media (prefers-reduced-motion: reduce) { .card, .grid-card { transition: none !important; animation: none !important; } }

/* ===== ordering: modifier picker, feedback sheet, toast ===== */
.sf-modgroup { margin: 6px 0 14px; }
.sf-modgroup-title { font-weight: 700; margin-bottom: 6px; }
.sf-modgroup-rule { font-size: .78rem; opacity: .7; font-weight: 500; }
.sf-mod { display: flex; align-items: center; gap: 10px; padding: 9px 6px; border-bottom: 1px solid rgba(var(--ink-rgb), .1); cursor: pointer; }
.sf-mod input { accent-color: var(--turath-gold); width: 18px; height: 18px; }
.sf-mod-delta { margin-inline-start: auto; font-size: .85rem; opacity: .8; }
.sf-optlist { display: flex; flex-direction: column; gap: 9px; margin: 6px 0 2px; }
.sf-optgrp-title { font-size: .78rem; font-weight: 700; opacity: .78; }
.sf-optgrp-req { font-weight: 500; opacity: .7; }
.sf-optchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.sf-optchip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(var(--ink-rgb), .22); background: rgba(var(--ink-rgb), .05); color: rgba(var(--ink-rgb), .9); font: inherit; font-size: .78rem; font-weight: 600; line-height: 1.2; cursor: default; }
button.sf-optchip { cursor: pointer; }
button.sf-optchip:hover, button.sf-optchip:active { border-color: var(--turath-gold); background: rgba(var(--secondary-rgb), .14); }
button.sf-optchip:focus-visible { outline: 2px solid var(--turath-gold); outline-offset: 2px; }
.sf-optchip img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: none; }
.sf-optchip-price { opacity: .75; font-weight: 500; }
body.lang-ar .sf-optchip, body.lang-ar .sf-optgrp-title { font-family: var(--font-ar); }
.sf-stars { display: flex; gap: 6px; justify-content: center; margin: 6px 0 12px; }
.sf-star { background: none; border: none; font-size: 1.9rem; line-height: 1; color: rgba(var(--ink-rgb), .3); cursor: pointer; }
.sf-star.on { color: var(--turath-gold); }
.sf-photos { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.sf-photo { position: relative; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(var(--ink-rgb), .2); }
.sf-photo img { width: 100%; height: 100%; object-fit: cover; }
.sf-photo button { position: absolute; top: 2px; inset-inline-end: 2px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; }
.order-item-mods { font-size: .78rem; opacity: .75; margin: 2px 0 4px; }
.sf-toast { position: fixed; bottom: 88px; left: 50%; transform: translate(-50%, 20px); background: rgba(20,20,20,.92); color: #fff; padding: 10px 16px; border-radius: 999px; font-size: .9rem; opacity: 0; pointer-events: none; transition: .25s; z-index: 200; }
.sf-toast.show { opacity: 1; transform: translate(-50%, 0); }
body.lang-ar .sf-toast, body.lang-ar .sf-mod, body.lang-ar .sf-modgroup-title { font-family: var(--font-ar); }

/* ===== order lifecycle card ===== */
.sf-ordertype { font-size: .72rem; font-weight: 600; opacity: .75; margin-inline-start: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(var(--ink-rgb), .1); }
.sf-steps { display: flex; align-items: flex-start; justify-content: space-between; gap: 2px; margin: 12px 0 10px; position: relative; }
.sf-steps::before { content: ''; position: absolute; top: 9px; left: 8%; right: 8%; height: 2px; background: rgba(var(--ink-rgb), .18); }
.sf-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; min-width: 0; }
.sf-step-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--dark-bg); border: 2px solid rgba(var(--ink-rgb), .3); box-sizing: border-box; z-index: 1; transition: .3s; }
.sf-step.done .sf-step-dot { background: var(--turath-gold); border-color: var(--turath-gold); }
.sf-step.on .sf-step-dot { background: var(--turath-gold); border-color: var(--turath-gold); box-shadow: 0 0 0 5px rgba(var(--secondary-rgb), .25); animation: sf-pulse 1.6s ease-in-out infinite; }
@keyframes sf-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(var(--secondary-rgb), .2); } 50% { box-shadow: 0 0 0 8px rgba(var(--secondary-rgb), .05); } }
.sf-step-label { font-size: .68rem; line-height: 1.2; text-align: center; opacity: .55; }
.sf-step.on .sf-step-label { opacity: 1; font-weight: 700; color: var(--turath-gold); }
.sf-step.done .sf-step-label { opacity: .85; }
.sf-steps-cancelled { justify-content: center; opacity: .8; font-weight: 600; }
.sf-items-head { font-size: .78rem; opacity: .75; margin: 8px 0 4px; }
.sf-items { list-style: none; padding: 0; margin: 0 0 10px; }
.sf-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px dashed rgba(var(--ink-rgb), .12); font-size: .88rem; }
.sf-item-qty { opacity: .7; min-width: 26px; }
.sf-item-name { flex: 1; min-width: 0; } .sf-item-name small { opacity: .65; }
.sf-item-state { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(var(--ink-rgb), .1); white-space: nowrap; }
.sf-item-preparing .sf-item-state { background: rgba(var(--secondary-rgb), .25); color: var(--turath-gold); }
.sf-item-ready .sf-item-state, .sf-item-served .sf-item-state { background: rgba(47,125,79,.25); color: #7cc79a; }
.sf-item-canceled .sf-item-state, .sf-item-cancelled .sf-item-state { background: rgba(192,57,43,.2); color: #e58a7d; text-decoration: line-through; }
body.lang-ar .sf-step-label, body.lang-ar .sf-item { font-family: var(--font-ar); }
@media (prefers-reduced-motion: reduce) { .sf-step.on .sf-step-dot { animation: none; } }

/* ===== install banner ===== */
.sf-install { position: fixed; left: 12px; right: 12px; bottom: 14px; z-index: 150; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px;
  background: rgba(var(--bg-rgb), .96); color: var(--ink); border: 1px solid rgba(var(--ink-rgb), .15); box-shadow: 0 10px 30px rgba(0,0,0,.35); backdrop-filter: blur(12px); }
.sf-install img { width: 44px; height: 44px; border-radius: 11px; flex: 0 0 auto; }
.sf-install-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sf-install-text b { font-size: .95rem; } .sf-install-text span { font-size: .76rem; opacity: .75; }
.sf-install-btn { flex: 0 0 auto; border: none; border-radius: 999px; padding: 9px 16px; font-weight: 700; background: var(--turath-gold); color: var(--dark-bg); cursor: pointer; }
.sf-install-x { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(var(--ink-rgb), .1); color: var(--ink); font-size: 1.1rem; cursor: pointer; }
body.lang-ar .sf-install { font-family: var(--font-ar); }

/* ---- closed sheet (channel hours) ---- */
.sf-closed-sheet { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: none; align-items: flex-end; justify-content: center; z-index: 210; padding: 12px; }
.sf-closed-sheet.active { display: flex; }
.sf-closed-card { width: 100%; max-width: 440px; background: rgb(var(--bg-rgb)); color: var(--ink); border-radius: 22px; padding: 22px 20px 16px; text-align: center; box-shadow: 0 -8px 40px rgba(0,0,0,.35); animation: sfSheetUp .28s ease-out; }
@keyframes sfSheetUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.sf-closed-icon { font-size: 2.3rem; margin-bottom: 4px; line-height: 1; }
.sf-closed-card h3 { margin: 6px 0 8px; font-size: 1.15rem; font-weight: 700; }
.sf-closed-body p { margin: 0 0 12px; opacity: .8; font-size: .92rem; line-height: 1.55; }
.sf-closed-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; background: rgba(var(--ink-rgb), .08); margin-bottom: 6px; font-size: .92rem; }
.sf-closed-row b { font-variant-numeric: tabular-nums; }
.sf-closed-btn { margin-top: 10px; width: 100%; padding: 12px; border: none; border-radius: 999px; background: var(--turath-gold); color: var(--dark-bg); font-weight: 700; font-size: .95rem; cursor: pointer; }
body.sf-closed .grid-card-add, body.sf-closed #dmAddBtn, body.sf-closed #modAddBtn { opacity: .45; filter: grayscale(.6); }
body.lang-ar .sf-closed-card { font-family: var(--font-ar); }
@media (prefers-reduced-motion: reduce) { .sf-closed-card { animation: none; } }

/* ---- light-theme parity ---- */
#companyLogo.raster { filter: none; object-fit: contain; border-radius: 50%; }
.card-no-img { width: 100%; height: 100%; }

/* Hall tablets: the switch-over notice to the node-served LAN menu (see renderLanNotice). */
.sf-lan-notice { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 60; width: min(94vw, 640px); display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--dark-bg, #1b1b1b); color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.35); font-size: .9rem; }
.sf-lan-notice .sf-lan-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sf-lan-notice .sf-lan-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.sf-lan-notice .sf-lan-link { display: inline-block; padding: 8px 12px; border-radius: 999px; background: var(--turath-gold, #d4a53a); color: var(--dark-bg, #1b1b1b); font-weight: 700; text-decoration: none; direction: ltr; unicode-bidi: isolate; }
.sf-lan-notice .sf-lan-close { flex: 0 0 auto; border: none; background: transparent; color: #fff; font-size: 1rem; cursor: pointer; padding: 2px 6px; }
body.lang-ar .sf-lan-notice { font-family: var(--font-ar); }

/* ===== option photos: a modifier's own picture flanking the dish photo (2D modal + 3D detail) ===== */
.sf-optflank { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 auto; width: 64px; max-height: 300px; overflow-y: auto; scrollbar-width: none; padding: 4px 0; }
.sf-optflank::-webkit-scrollbar { display: none; }
.sf-optflank:empty { display: none; }
.sf-opt { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 64px; border: none; background: none; padding: 0; margin: 0; cursor: default; color: rgba(var(--ink-rgb), .88); font: inherit; font-size: .62rem; font-weight: 600; line-height: 1.15; text-align: center; -webkit-tap-highlight-color: transparent; }
button.sf-opt { cursor: pointer; }
.sf-optflank .sf-opt img { position: static; width: 52px; height: 52px; max-width: none; max-height: none; border-radius: 50%; object-fit: cover; background: rgba(var(--bg-rgb), .6); border: 2px solid rgba(var(--secondary-rgb), .55); box-shadow: 0 6px 16px rgba(0, 0, 0, .25); filter: none; animation: none; transition: transform .25s ease, border-color .25s ease; }
button.sf-opt:hover img, button.sf-opt:active img { transform: scale(1.08); border-color: var(--turath-gold); }
button.sf-opt:focus-visible img { outline: 2px solid var(--turath-gold); outline-offset: 2px; }
.sf-opt-name { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.lang-ar .sf-opt { font-family: var(--font-ar); }
/* 2D modal: the columns sit inside the centred image wrap, the dish photo shrinks between them */
.dish-modal-imgwrap { gap: 6px; }
#dmImg { flex: 0 1 auto; min-width: 0; }
/* 3D detail: a fixed layer measured onto the lifted card (top/height/--card-l/--card-r set by JS) */
.sf-optflanks3d { position: fixed; left: 0; right: 0; top: 30%; height: 40vh; z-index: 997; pointer-events: none; opacity: 0; transition: opacity .4s ease .5s; --card-l: 50vw; --card-r: 50vw; }
.sf-optflanks3d.visible { opacity: 1; }
.sf-optflanks3d .sf-optflank { position: absolute; top: 50%; transform: translateY(-50%); pointer-events: auto; max-height: 100%; }
.sf-optflanks3d .sf-optflank-l { left: max(6px, calc(var(--card-l) - 72px)); }
.sf-optflanks3d .sf-optflank-r { right: max(6px, calc(var(--card-r) - 72px)); }
/* the picker rows carry the same thumbnail so the strip and the form read as one thing */
.sf-mod-thumb { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 1px solid rgba(var(--secondary-rgb), .45); }
@media (max-width: 768px) {
  .sf-optflank { width: 56px; }
  .sf-opt { width: 56px; font-size: .58rem; }
  .sf-optflank .sf-opt img { width: 46px; height: 46px; }
  .sf-opt-name { max-width: 56px; }
  .sf-optflanks3d .sf-optflank-l { left: max(4px, calc(var(--card-l) - 62px)); }
  .sf-optflanks3d .sf-optflank-r { right: max(4px, calc(var(--card-r) - 62px)); }
}

        /* ── SEARCH ── in flow above the categories, so it can cover nothing */
        .sf-search {
            position: relative; display: flex; align-items: center;
            margin: 10px 12px 2px;
        }
        .sf-search-icon {
            position: absolute; inset-inline-start: 13px; width: 16px; height: 16px;
            opacity: .45; pointer-events: none; color: var(--ink);
        }
        .sf-search-input {
            width: 100%; padding: 11px 40px; border-radius: 999px;
            border: 1px solid rgba(var(--ink-rgb), 0.18);
            background: rgba(var(--ink-rgb), 0.05); color: var(--ink);
            font-size: .88rem; font-family: inherit;
            -webkit-appearance: none; appearance: none;
        }
        .sf-search-input::-webkit-search-cancel-button { display: none; }
        .sf-search-input:focus { outline: none; border-color: var(--turath-gold); background: rgba(var(--ink-rgb), 0.03); }
        .sf-search-clear {
            position: absolute; inset-inline-end: 8px;
            width: 26px; height: 26px; border-radius: 50%; border: none; cursor: pointer;
            background: rgba(var(--ink-rgb), 0.12); color: var(--ink);
            font-size: 1.05rem; line-height: 1; display: flex; align-items: center; justify-content: center;
        }
        body.lang-ar .sf-search-input { font-family: var(--font-ar); }
        /* while searching, the subcategory chips are a filter for a category
           the customer is no longer looking at */
        body.sf-searching .sf-subcats-grid { display: none; }

        .grid-card-unpriced { background: rgba(var(--ink-rgb),0.55) !important; }

        /* ── ORDERING PAUSED: the branch node is unreachable ────────────────
           Not "closed" — the kitchen is there and the hours are fine, but an
           order accepted now would sit in the cloud and never print. In flow,
           so it can never cover a control. */
        .sf-node-banner {
            margin: 10px 12px 2px; padding: 12px 14px 13px;
            border-radius: 12px; text-align: center;
            background: rgba(185,28,28,0.08);
            border: 1px solid rgba(185,28,28,0.32);
            color: var(--ink);
        }
        .sf-nb-title { font-weight: 800; font-size: .92rem; color: #b91c1c; margin-bottom: 4px; }
        .sf-nb-text  { font-size: .78rem; line-height: 1.55; color: rgba(var(--ink-rgb),0.75); }
        .sf-nb-call {
            display: inline-flex; align-items: center; gap: 6px; margin-top: 9px;
            padding: 8px 18px; border-radius: 999px; text-decoration: none;
            background: #b91c1c; color: #fff; font-weight: 800; font-size: .9rem;
            direction: ltr;
        }
        body.lang-ar .sf-node-banner { font-family: var(--font-ar); }
        /* the add buttons go with it — nothing to add to */
        body.sf-node-offline .grid-card-add,
        body.sf-node-offline .dish-modal-addbtn { display: none !important; }

        /* ── delivery fee we do not know yet ── */
        .sf-fee-estimated { color: rgba(var(--ink-rgb), 0.78) !important; }
        .sf-fee-note { display: block; font-size: .68rem; opacity: .75; margin-top: 2px; }
        .sf-total-note {
            margin-top: 6px; font-size: .7rem; line-height: 1.5;
            color: rgba(var(--ink-rgb), 0.6);
        }
        body.lang-ar .sf-total-note, body.lang-ar .sf-fee-note { font-family: var(--font-ar); }

        /* ── SIGNAGE (Ali, 2026-09-09; two corrections the same day) ───────
           Cut 1 was position:fixed in the top corner — it covered the cart and
           the 2D/3D toggle outright and customers could not finish an order.
           Cut 2 was an in-flow plate above the menu: safe, but it spent a whole
           row on one line of text and pushed every card down.
           This is cut 3: a small tag hanging in the header's own free space
           beside the logo. In flow, so it can never sit on a control; and no
           vertical space of its own, because the hours live in a popover that
           only exists while it is open. */
        .sf-sign-mount {
            position: relative; display: flex; align-items: flex-start;
            flex: 0 1 auto; min-width: 0; align-self: flex-start;
            /* the tag is rotated, so its painted corner reaches ~1.5px past its
               layout box — this keeps that corner off the brand in both scripts */
            margin-inline-end: 4px;
        }
        .sf-sign-mount:empty { display: none; }
        .sf-sign {
            position: relative; margin-top: 12px;
            display: inline-flex; align-items: center; gap: 6px;
            max-width: 128px; padding: 5px 9px 6px;
            border-radius: 9px;
            transform: rotate(-2.2deg);
            transform-origin: 50% -12px;
            background: linear-gradient(155deg, rgba(255,255,255,0.12), rgba(0,0,0,0.05)), var(--cream);
            border: 1px solid rgba(var(--ink-rgb), 0.26);
            box-shadow: 0 1px 0 rgba(255,255,255,0.45) inset,
                        0 8px 16px -12px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.10);
            color: var(--ink); font: inherit; cursor: pointer;
            animation: sf-sign-settle 2.2s cubic-bezier(.2,.8,.3,1) 1 both;
        }
        .sf-sign:active { transform: rotate(-2.2deg) scale(0.96); }
        /* two cords up to the header's top edge */
        .sf-sign::before, .sf-sign::after {
            content: ''; position: absolute; top: -12px; width: 1px; height: 12px;
            background: linear-gradient(rgba(var(--ink-rgb),0.10), rgba(var(--ink-rgb),0.45));
        }
        .sf-sign::before { inset-inline-start: 24%; transform: rotate(7deg); transform-origin: bottom; }
        .sf-sign::after  { inset-inline-end: 24%;  transform: rotate(-7deg); transform-origin: bottom; }
        .sf-sign-dot {
            width: 7px; height: 7px; border-radius: 50%; flex: none;
            background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,0.18);
        }
        .sf-sign.is-shut .sf-sign-dot { background: #b91c1c; box-shadow: 0 0 0 3px rgba(185,28,28,0.18); }
        .sf-sign-title {
            font-weight: 800; font-size: 0.7rem; line-height: 1.15; color: var(--ink);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .sf-sign-caret { width: 9px; height: 9px; flex: none; opacity: 0.5; transition: transform 0.2s ease; }
        .sf-sign.is-open-list .sf-sign-caret { transform: rotate(180deg); }
        /* The hours drop below the tag on the logo side, where nothing is
           tappable. It exists only while open — there is no invisible layer
           over the page at rest. */
        .sf-sign-pop {
            /* Anchored to the OUTER edge (the header's start), so it always
               opens inward and can never run off the screen in either
               direction — verified at 320px in both languages. */
            display: none; position: absolute; top: calc(100% + 8px); inset-inline-start: 0;
            z-index: 60; width: max-content; max-width: min(78vw, 280px);
            flex-direction: column; gap: 5px; padding: 10px 13px 11px;
            border-radius: 12px; text-align: start;
            background: var(--cream);
            border: 1px solid rgba(var(--ink-rgb), 0.22);
            box-shadow: 0 18px 34px -18px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.10);
            animation: sf-sign-drop 0.18s ease-out both;
        }
        .sf-sign-mount.is-open .sf-sign-pop { display: flex; }
        @keyframes sf-sign-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
        .sf-sign-rows { display: flex; flex-direction: column; gap: 5px; }
        .sf-sign-row {
            display: flex; align-items: center; justify-content: space-between;
            gap: 14px; font-size: 0.74rem; color: rgba(var(--ink-rgb), 0.82);
        }
        .sf-sign-row b { font-weight: 700; font-variant-numeric: tabular-nums; direction: ltr; }
        .sf-sign-row.is-shut { color: rgba(var(--ink-rgb), 0.45); }
        .sf-sign-row .sf-sign-pip {
            width: 6px; height: 6px; border-radius: 50%; flex: none;
            margin-inline-end: 6px; display: inline-block; background: #16a34a;
        }
        .sf-sign-row.is-shut .sf-sign-pip { background: rgba(var(--ink-rgb),0.28); }
        .sf-sign-hint {
            font-size: 0.68rem; color: rgba(var(--ink-rgb), 0.55); line-height: 1.35;
            border-top: 1px solid rgba(var(--ink-rgb), 0.12); padding-top: 7px; margin-top: 2px;
        }
        body.lang-ar .sf-sign, body.lang-ar .sf-sign-pop { font-family: var(--font-ar); }
        @keyframes sf-sign-settle {
            0%   { transform: rotate(-6deg); }
            40%  { transform: rotate(2deg); }
            70%  { transform: rotate(-3deg); }
            100% { transform: rotate(-2.2deg); }
        }
        @media (prefers-reduced-motion: reduce) {
            .sf-sign { animation: none; }
            .sf-sign-pop { animation: none; }
        }
        @media (max-width: 768px) {
            /* 112px is the width of the longest state, "الصالة فقط" — the tag
               must never ellipsis away the one word that tells a guest which
               door is still open. */
            .sf-sign { max-width: 112px; padding: 4px 8px 5px; gap: 5px; }
            .sf-sign-title { font-size: 0.66rem; }
        }
        /* Below ~360px the brand needs every pixel: the tag keeps the light
           and the caret, and the word moves into the popover. */
        @media (max-width: 359px) {
            .sf-sign-title { display: none; }
        }

        /* ── PROFILE SHEET (Ali, 2026-09-09) ───────────────────────────────
           The header shed language, menu style, orders and feedback into here.
           Reuses the orders overlay shell so there is one sheet language on
           this page, not two. */
        .sf-profile-overlay .orders-content { padding-bottom: 20px; }
        /* One rail of three, sliding pill behind the active one. The tabs are
           peers, so they are equal width and read as a single control. */
        .pf-tabs {
            display: flex; gap: 3px; margin-bottom: 16px; padding: 3px;
            border-radius: 12px; background: rgba(var(--ink-rgb), 0.06);
            border: 1px solid rgba(var(--ink-rgb), 0.12);
        }
        .pf-tab {
            flex: 1 1 0; min-width: 0; padding: 9px 6px; border-radius: 9px; cursor: pointer;
            display: inline-flex; align-items: center; justify-content: center; gap: 5px;
            border: none; background: transparent; color: rgba(var(--ink-rgb), 0.68);
            font-size: .8rem; font-weight: 700; font-family: inherit;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            transition: background .18s ease, color .18s ease;
        }
        .pf-tab.active { background: var(--turath-gold); color: #1a1a1a; box-shadow: 0 2px 6px -2px rgba(0,0,0,.35); }
        .pf-tab-label { overflow: hidden; text-overflow: ellipsis; }
        .pf-tab-count {
            flex: none; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
            display: inline-flex; align-items: center; justify-content: center;
            font-size: .62rem; font-weight: 800; font-variant-numeric: tabular-nums;
            background: var(--turath-gold); color: #1a1a1a;
        }
        .pf-tab.active .pf-tab-count { background: rgba(0,0,0,0.22); color: #1a1a1a; }
        .pf-pane { animation: pf-pane-in .18s ease-out both; }
        @keyframes pf-pane-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
        @media (prefers-reduced-motion: reduce) { .pf-pane { animation: none; } }
        .pf-orders { margin-bottom: 6px; }
        .pf-group-label {
            font-weight: 800; font-size: .74rem; letter-spacing: .06em;
            text-transform: uppercase; color: rgba(var(--ink-rgb), 0.5); margin-bottom: 8px;
        }
        /* The rule between "on its way" and "already happened" — a customer
           should never have to read a date to tell those apart. */
        .pf-divider {
            display: flex; align-items: center; gap: 10px; margin: 18px 0 12px;
            font-weight: 800; font-size: .74rem; letter-spacing: .06em;
            text-transform: uppercase; color: rgba(var(--ink-rgb), 0.5);
        }
        .pf-divider::before, .pf-divider::after {
            content: ''; height: 1px; flex: 1; background: rgba(var(--ink-rgb), 0.14);
        }
        .pf-more {
            width: 100%; margin-top: 6px; padding: 10px; cursor: pointer;
            border: 1px dashed rgba(var(--ink-rgb), 0.24); border-radius: 10px;
            background: transparent; color: rgba(var(--ink-rgb), 0.75);
            font-size: .82rem; font-weight: 700; font-family: inherit;
        }
        .pf-more:hover { border-color: var(--turath-gold); color: var(--ink); }
        .pf-empty { text-align: center; padding: 34px 18px 26px; }
        .pf-empty-title { font-weight: 800; font-size: .95rem; color: var(--ink); margin-bottom: 6px; }
        .pf-empty-hint { font-size: .8rem; line-height: 1.6; color: rgba(var(--ink-rgb), 0.58); }
        .pf-retry {
            margin-inline-start: 8px; padding: 5px 11px; border-radius: 8px; cursor: pointer;
            border: 1px solid rgba(var(--ink-rgb), 0.2); background: transparent;
            color: var(--ink); font-size: .76rem; font-weight: 700; font-family: inherit;
        }
        /* ── one piece of feedback, and the reply under it ── */
        .pf-fb {
            border: 1px solid rgba(var(--ink-rgb), 0.14); border-radius: 12px;
            padding: 12px 13px; margin-bottom: 10px;
            background: rgba(var(--ink-rgb), 0.03);
        }
        .pf-fb-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
        .pf-fb-kind {
            padding: 3px 9px; border-radius: 999px; font-size: .68rem; font-weight: 800;
            background: rgba(185,28,28,0.12); color: #b91c1c;
        }
        .pf-fb-kind.is-suggestion { background: rgba(22,163,74,0.12); color: #15803d; }
        .pf-fb-stars { font-size: .74rem; color: var(--turath-gold); letter-spacing: 1px; }
        .pf-fb-status {
            margin-inline-start: auto; padding: 3px 9px; border-radius: 999px;
            font-size: .68rem; font-weight: 700;
            background: rgba(var(--ink-rgb), 0.08); color: rgba(var(--ink-rgb), 0.7);
        }
        .pf-fb-status.is-resolved { background: rgba(22,163,74,0.14); color: #15803d; }
        .pf-fb-status.is-in_review { background: rgba(217,119,6,0.14); color: #b45309; }
        .pf-fb-when { font-size: .68rem; color: rgba(var(--ink-rgb), 0.45); margin-top: 6px; }
        .pf-fb-msg { font-size: .85rem; line-height: 1.6; color: var(--ink); margin-top: 6px; white-space: pre-wrap; }
        .pf-fb-reply {
            margin-top: 10px; padding: 10px 12px; border-radius: 10px;
            border-inline-start: 3px solid var(--turath-gold);
            background: rgba(var(--ink-rgb), 0.05);
        }
        .pf-fb-reply.is-new { border-inline-start-color: #16a34a; background: rgba(22,163,74,0.08); }
        .pf-fb-reply-who { font-size: .7rem; font-weight: 800; color: rgba(var(--ink-rgb), 0.62); margin-bottom: 4px; }
        .pf-fb-reply-text { font-size: .84rem; line-height: 1.6; color: var(--ink); white-space: pre-wrap; }
        .pf-fb-wait { margin-top: 9px; font-size: .74rem; color: rgba(var(--ink-rgb), 0.48); font-style: italic; }
        .pf-section {
            border-top: 1px solid rgba(var(--ink-rgb), 0.12);
            padding-top: 14px; margin-top: 14px;
        }
        /* The first section in a pane already has the tab bar above it. */
        .pf-pane > .pf-section:first-child { border-top: none; padding-top: 0; margin-top: 0; }
        .pf-label { font-weight: 800; font-size: .9rem; margin-bottom: 4px; color: var(--ink); }
        .pf-hint { font-size: .74rem; color: rgba(var(--ink-rgb), 0.55); margin-bottom: 10px; line-height: 1.5; }
        .pf-row {
            display: flex; align-items: center; justify-content: space-between;
            gap: 12px; padding: 7px 0;
        }
        .pf-row-name { font-size: .86rem; color: rgba(var(--ink-rgb), 0.85); }
        .pf-seg {
            display: flex; gap: 2px; padding: 3px; border-radius: 999px;
            background: rgba(var(--ink-rgb), 0.07);
            border: 1px solid rgba(var(--ink-rgb), 0.14);
        }
        .pf-seg-btn {
            min-width: 46px; padding: 7px 12px; border: none; border-radius: 999px;
            background: transparent; color: rgba(var(--ink-rgb), 0.7);
            font-size: .8rem; font-weight: 700; cursor: pointer; font-family: inherit;
        }
        .pf-seg-btn.active { background: var(--turath-gold); color: #1a1a1a; }
        .pf-input {
            width: 100%; margin-bottom: 8px; padding: 11px 13px; border-radius: 10px;
            border: 1px solid rgba(var(--ink-rgb), 0.20);
            background: rgba(var(--ink-rgb), 0.04); color: var(--ink);
            font-size: .88rem; font-family: inherit;
        }
        .pf-input:focus { outline: none; border-color: var(--turath-gold); }
        .pf-save {
            width: 100%; padding: 11px; border: none; border-radius: 10px; cursor: pointer;
            background: var(--turath-gold); color: #1a1a1a; font-weight: 800;
            font-size: .88rem; font-family: inherit;
        }
        .pf-saved { margin-top: 8px; font-size: .8rem; color: #2f7d4f; font-weight: 700; }
        .pf-link {
            width: 100%; margin-top: 16px; padding: 11px; cursor: pointer;
            border: 1px solid rgba(var(--ink-rgb), 0.16); border-radius: 10px;
            background: transparent; color: var(--ink);
            font-size: .86rem; font-weight: 600; font-family: inherit;
        }
        body.lang-ar .sf-profile-overlay { font-family: var(--font-ar); }

        /* Header rhythm: four elements now, so they can breathe and every tap
           target clears 44px. The brand can no longer collide on a narrow
           phone because it is the only flexible item. */
        .header-controls { gap: 10px; flex: 0 0 auto; }
        /* The logo and the hanging sign travel together on the logo side, and
           neither may grow: the brand is the only flexible item, so a long
           restaurant name shortens instead of colliding with a control. */
        .brand-logos { gap: 10px; flex: 0 1 auto; min-width: 0; }
        .hdr-icon-btn { width: 44px; height: 44px; }
        .brand-center { flex: 1 1 auto; min-width: 0; padding: 0 8px; }
        .brand-center .turath-name,
        .brand-center .branch-name { display: block; text-align: center;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .profile-btn { position: relative; }
        .profile-dot {
            position: absolute; top: 7px; inset-inline-end: 7px;
            width: 9px; height: 9px; border-radius: 50%;
            background: #16a34a; border: 2px solid var(--cream);
        }

/* ── THE OPTION CHOOSER ─────────────────────────────────────────────────────
   A dish whose options carry photos opens into them: the choices become the
   3D carousel, swiped like the menu. Tapping the focused one LOCKS it — the
   card takes a ring, and this bar underneath names it and goes live. */
.sf-optbar {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%) translateY(140%);
  z-index: 60; display: flex; align-items: center; gap: 14px;
  padding: 10px 12px 10px 18px; border-radius: 999px;
  background: rgba(var(--bg-rgb), .96); border: 1px solid rgba(var(--ink-rgb), .14);
  box-shadow: 0 10px 34px rgba(0,0,0,.22); backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none; transition: transform .32s cubic-bezier(.2,.8,.2,1), opacity .24s;
  width: min(94vw, 460px);
}
.sf-optbar.visible { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; }
.sf-optbar-info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.sf-optbar-name {
  font-weight: 800; font-size: .95rem; color: rgba(var(--ink-rgb), .92);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sf-optbar.locked .sf-optbar-name { color: var(--turath-gold); }
.sf-optbar-dish { font-size: .72rem; font-weight: 600; color: rgba(var(--ink-rgb), .55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-optbar-price { flex: none; font-size: .85rem; font-weight: 800; color: rgba(var(--ink-rgb), .72); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-optbar-add {
  flex: none; font: inherit; font-weight: 800; font-size: .88rem; color: #fff;
  background: var(--turath-gold); border: 0; border-radius: 999px; padding: 11px 20px;
  cursor: pointer; transition: opacity .2s, transform .15s;
}
.sf-optbar-add:disabled { opacity: .38; cursor: default; }
.sf-optbar-add:not(:disabled):active { transform: scale(.96); }

/* The locked card: ringed and lifted a touch, so the choice is unmistakable
   while the others stay swipeable beside it. */
.card.opt-locked { outline: 3px solid var(--turath-gold); outline-offset: 3px; border-radius: 18px; }
.card.opt-locked::after {
  content: "✓"; position: absolute; top: 8px; inset-inline-end: 8px; z-index: 3;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--turath-gold); color: #fff; font-size: .85rem; font-weight: 900;
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
}

/* A showcased dish: shown, searchable, and plainly not for sale here. It must
   read as an invitation, never as an error — «unavailable» on the best photo in
   the menu manufactures doubt instead of desire. */
.grid-card-dinein {
  /* It sits IN the card's foot, on its OWN line under the price. It was
     absolutely positioned at the bottom of the card, which laid a solid gold
     lozenge straight across the price (Ali, 2026-09-14); sharing the price's
     line instead only traded that for a clipped label and a wrapped price —
     two columns on a phone are not wide enough for both. The price keeps its
     line and stays the loudest thing in the card, and the invitation reads in
     full underneath, tinted rather than filled. */
  flex: 1 1 100%; margin-top: 6px;
  padding: 5px 10px; border-radius: 999px; text-align: center;
  font-size: .64rem; font-weight: 800; line-height: 1.25;
  color: var(--turath-gold);
  background: rgba(var(--secondary-rgb), .14);
  border: 1px solid rgba(var(--secondary-rgb), .34);
}
.grid-card-foot { flex-wrap: wrap; }
.grid-card-price { flex: 1 1 auto; min-width: 0; }
body.lang-ar .grid-card-dinein, body.lang-ar .sf-showcase-note { font-family: var(--font-ar); }

/* The same invitation in the two detail views. It takes the Add button's slot
   exactly — same flex behaviour, same margins, same radius — so the panel is
   laid out identically whether the dish can be bought or only admired. Left in
   normal flow it landed under the fold, behind the footer. */
.sf-showcase-note {
  flex: 0 0 auto;
  margin: 8px 24px 22px;
  padding: 15px 20px; border-radius: 16px; text-align: center;
  font-size: .95rem; font-weight: 700; line-height: 1.4;
  color: var(--turath-gold);
  background: rgba(var(--secondary-rgb), .12);
  border: 1px solid rgba(var(--secondary-rgb), .34);
}
@media (max-width: 480px) { .sf-showcase-note { margin: 8px 18px 20px; padding: 14px 18px; font-size: .9rem; } }
.sf-optbar-note {
  flex: 1 1 100%; order: 9; margin-top: 2px; text-align: center;
  font-size: .78rem; font-weight: 700; color: var(--turath-gold);
}
.sf-optbar:has(.sf-optbar-note:not([style*="none"])) { flex-wrap: wrap; }

/* ── the area picker: the address stops being prose ─────────────────────── */
.sf-areapick { position: relative; }
.sf-arealist {
    max-height: 230px; overflow-y: auto; margin: 2px 0 8px;
    border: 1px solid var(--sf-line, rgba(128,128,128,.28)); border-radius: 12px;
    background: var(--sf-card, #1b1b1b); box-shadow: 0 8px 24px rgba(0,0,0,.14);
}
.sf-areaopt {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; padding: 10px 12px; border: 0; background: transparent;
    color: inherit; font: inherit; text-align: start; cursor: pointer;
}
.sf-areaopt + .sf-areaopt { border-top: 1px solid var(--sf-line, rgba(128,128,128,.18)); }
.sf-areaopt:hover, .sf-areaopt:focus-visible { background: rgba(128,128,128,.12); }
.sf-areafee { font-variant-numeric: tabular-nums; opacity: .85; white-space: nowrap; }
.sf-areamiss { padding: 12px; font-size: .88rem; opacity: .8; }

/* address cards: manage the door from where it is used */
.sf-addr-acts { display:flex; gap:8px; margin-top:8px; }
.sf-addr-act {
    border:1px solid var(--sf-line, rgba(128,128,128,.32)); background:transparent;
    color:inherit; font:inherit; font-size:.82rem; padding:4px 12px;
    border-radius:999px; cursor:pointer; opacity:.85;
}
.sf-addr-act:hover { opacity:1; background:rgba(128,128,128,.12); }
.sf-addr-del { color:#d9534f; border-color:rgba(217,83,79,.45); }
.sf-areamiss-note { opacity:.9; }


/* ── Accounts: the sheet sits on the same solid card as checkout ───────── */
.acct-panel{max-width:460px}
.acct-content{gap:10px}
.acct-hint{font-size:.9rem;line-height:1.5;color:rgba(var(--ink-rgb),.82);margin:0 0 4px}
.acct-content .pf-input{width:100%;box-sizing:border-box;margin:4px 0;padding:14px 16px;font-size:1.05rem;border:1.5px solid rgba(var(--ink-rgb),.35);border-radius:14px;background:rgba(255,255,255,.08);color:var(--ink);outline:none}
.acct-content .pf-input::placeholder{color:rgba(var(--ink-rgb),.45)}
.acct-content .pf-input:focus{border-color:var(--turath-gold);box-shadow:0 0 0 3px rgba(var(--secondary-rgb),.25)}
.acct-phone,.acct-pin{letter-spacing:.06em;font-variant-numeric:tabular-nums}
.acct-pin{letter-spacing:.35em}
.acct-boxes{display:flex;gap:12px;justify-content:center;margin:10px 0 4px}
.acct-box{width:56px;height:64px;border-radius:14px;border:2px solid rgba(var(--ink-rgb),.4);background:rgba(255,255,255,.08);font-size:28px;font-weight:800;text-align:center;font-variant-numeric:tabular-nums;color:var(--ink);outline:none;caret-color:var(--turath-gold);transition:border-color .15s,box-shadow .15s}
.acct-box:focus{border-color:var(--turath-gold);box-shadow:0 0 0 3px rgba(var(--secondary-rgb),.28)}
.acct-resend{text-align:center;min-height:24px;margin:2px 0 4px}
.acct-muted{color:rgba(var(--ink-rgb),.72);font-size:.9rem;font-variant-numeric:tabular-nums}
.acct-links{display:flex;flex-wrap:wrap;gap:4px 18px;justify-content:center;margin-top:2px}
.acct-links .pf-link,.acct-resend .pf-link{width:auto;margin:0;padding:8px 6px;border:0;background:transparent;color:var(--ink);font-weight:700;font-size:.92rem;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(var(--ink-rgb),.35)}
.acct-links .pf-link:hover,.acct-resend .pf-link:hover{text-decoration-color:var(--ink)}
.acct-panel .acct-error{color:#ff8a80;font-weight:600;margin-top:0}
.acct-panel .orders-btn-checkout{margin-top:6px}
/* the account card in the profile */
.acct-card{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:rgba(var(--ink-rgb),.06)}
.acct-avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;background:var(--turath-gold);color:#fff5e6;flex:0 0 44px}
.acct-who{min-width:0;flex:1}
.acct-name{font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.acct-phone{font-variant-numeric:tabular-nums;color:rgba(var(--ink-rgb),.8);font-size:13.5px}
.acct-state{font-size:12px;margin-top:2px}
.acct-state.ok{color:#7ddc9a;font-weight:700}
.acct-state.stale{color:rgba(var(--ink-rgb),.72)}
.acct-actions{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:8px}
.acct-actions .pf-link{width:auto;margin:0;padding:6px 0;border:0;background:transparent;color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.acct-danger{color:#ff8a80 !important}
.acct-cta{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.acct-cta .ot-dismiss{display:block;margin:0 auto}
.acct-co{margin:0 0 10px}
.acct-co-who{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;border-radius:12px;background:rgba(var(--secondary-rgb),.16);border:1px solid rgba(var(--secondary-rgb),.35)}
.acct-co-name{font-weight:700;color:var(--ink)}
.acct-co-phone{font-variant-numeric:tabular-nums;color:rgba(var(--ink-rgb),.85)}
.acct-co-tag{font-size:11.5px;padding:2px 8px;border-radius:999px;background:var(--turath-gold);color:#fff5e6}
@media (prefers-reduced-motion:reduce){.acct-box{transition:none}}

.acct-secondary{width:100%;padding:13px 16px;border-radius:14px;border:2px solid var(--ink);background:transparent;color:var(--ink);font-weight:800;font-size:1rem;font-family:inherit;cursor:pointer}
.acct-secondary:hover{background:rgba(var(--ink-rgb),.06)}
.acct-num{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink)}
body.lang-ar .acct-secondary{font-family:var(--font-ar)}