/* --- 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-fee { display: block; margin-top: 2px; font-size: .82em; opacity: .75; }
        .os-total b { color: var(--turath-gold); }
        .sf-svc-notice { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: #FFF1CC; border: 1.5px solid #C77800; border-inline-start: 6px solid #C77800; color: #1F1400; font-weight: 700; font-size: 1.02em; line-height: 1.65; text-align: start; }
        body.lang-ar .sf-svc-notice { font-family: var(--font-ar); }
        .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; }
/* The promotion ribbon: IN FLOW at the head of the menu, like the node
   banner. Pinned to a fixed spot it sat on a taller header (Arido's logo +
   city line) and stayed there while the menu scrolled under it; on one line
   with an ellipsis it cut its own text (Ali, 2026-10-11). Now it scrolls with
   the menu and wraps: the offer in bold, then its name and end date. */
.sf-promo-banner { display: flex; align-items: center; gap: 10px; margin: 10px 12px 2px; padding: 9px 14px;
  border-radius: 14px; font-size: .86rem; line-height: 1.4;
  background: rgba(var(--ink-rgb), 0.9); color: var(--dark-bg); box-shadow: 0 3px 12px rgba(0,0,0,.16); }
.sf-promo-banner .sf-promo-icon { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: #c0392b; color: #fff; font-weight: 800; font-size: .8rem; display: inline-flex; align-items: center; justify-content: center; }
.sf-promo-banner .sf-promo-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; overflow-wrap: anywhere; }
.sf-promo-banner .sf-promo-sub { font-size: .86em; opacity: .82; }
.sf-promo-banner .sf-chip { flex: 0 0 auto; box-shadow: none; }
/* a twin under a cart line: the free one of "buy 1, get 1" (services.BogoIsTwin) */
.order-item-twin { font-size: .78rem; font-weight: 700; color: #2f7d4f; margin-top: 2px; }
body.lang-ar .sf-promo-banner { font-family: var(--font-ar); }
.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); }
/* A button that cannot add («السعر عند الطلب», «غير متوفر») shows no plus. */
.dish-modal-addbtn:disabled svg { display: none; }
/* The glow at the centre is see-through; on a phone (no backdrop blur) the
   menu behind showed through the dish sheet. A solid ground under it. */
.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-name .sf-item-inc { display: block; margin-top: 2px; font-size: .82em; }
.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)}

/* =====================================================================
   PHONE RESILIENCE (2026-09-30, Ali: cart/preferences flashing, the whole
   page blurred, add button and dish cards disappearing on a Galaxy S23 Ultra;
   one column on small phones).

   Cause: every sheet, modal and panel is a full-screen position:fixed layer
   carrying backdrop-filter: blur() that stays LIVE at opacity 0 — nine of
   them at once on a phone — and every card image asks the compositor for a
   permanent filter/transform layer (will-change). Android compositors drop
   tiles, promote hidden blurred layers and flash when that budget is blown.

   Rule on phones: a closed layer leaves rendering entirely (visibility
   hidden, no transition to wait for), no full-screen backdrop blur at all
   (solid scrims instead), no will-change, and the dish grid is two columns
   whatever the width. Desktop keeps its fades; nothing here touches ≥769px.
   ===================================================================== */
@media (max-width: 768px) {
  .orders-overlay, .dish-modal, .info-panel, .card-title-overlay,
  .ingredients-container, .sf-optflanks3d, .sf-optbar, .sf-promo-banner {
    transition: none !important;
    visibility: hidden;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    will-change: auto !important;
  }
  .orders-overlay.active, .dish-modal.active, .info-panel.visible,
  .card-title-overlay.visible, .ingredients-container.visible,
  .sf-optflanks3d.visible, .sf-optbar.visible,
  .sf-promo-banner:not(.hidden):not([style*="display: none"]) {
    visibility: visible;
  }
  /* A solid scrim does what the blur was for, reliably. */
  .orders-overlay { background: rgba(20, 10, 8, 0.72); }
  .orders-panel, .dish-modal-card { transition: transform .25s ease; }
  /* No permanent compositor layers for the carousel cards and their photos. */
  .card, .card img, .card-title-overlay, .info-panel, .bar-fill,
  .grid-card, .grid-card img {
    will-change: auto !important;
    backface-visibility: visible !important;
  }
  .card img { transition: opacity .3s ease !important; }
  /* Two columns on every phone, including 320px-wide ones. */
  .grid-items {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 12px !important;
  }
  .grid-card { min-width: 0; }
}
/* The address bar moves; 100vh does not. Size the views by the dynamic
   viewport where the browser has it, so the bottom of the grid is never
   under the toolbar and the option bar sits on the real bottom edge. */
@supports (height: 100dvh) {
  .view-section { height: calc(100dvh - 110px); }
  .grid-view { height: calc(100dvh - 110px); }
  @media (max-width: 768px) {
    .view-section { height: calc(100dvh - 100px); }
    .grid-view { height: calc(100dvh - 100px); }
  }
}

/* ===== the bottom cart bar (2026-10-15) =====
   Visible while the basket holds anything: count, what it says, the total.
   Sits above the footer line and under every sheet and modal. */
.sf-cartbar {
  position: fixed; left: 50%; bottom: calc(46px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 140%); width: min(calc(100% - 28px), 520px);
  display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px;
  min-height: 58px; border: 0; border-radius: 18px; cursor: pointer;
  background: var(--turath-gold); color: var(--dark-bg);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(var(--ink-rgb), .08);
  font: inherit; font-weight: 700; z-index: 150; opacity: 0; pointer-events: none;
  transition: transform .35s cubic-bezier(.2,.9,.3,1.2), opacity .25s;
  -webkit-tap-highlight-color: transparent;
}
body.lang-ar .sf-cartbar { padding: 10px 10px 10px 14px; font-family: var(--font-ar); }
.sf-cartbar.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.sf-cartbar:active { transform: translate(-50%, 0) scale(.98); }
.sf-cartbar:focus-visible { outline: 3px solid var(--turath-light); outline-offset: 3px; }
.sf-cartbar-bag {
  position: relative; flex: none; width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; background: rgba(0,0,0,.14);
}
.sf-cartbar-bag svg { width: 24px; height: 24px; }
.sf-cartbar-bag b {
  position: absolute; top: -7px; inset-inline-end: -7px; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px; background: var(--dark-bg); color: var(--turath-gold);
  font-size: .78rem; line-height: 22px; text-align: center; box-shadow: 0 0 0 2px var(--turath-gold);
}
.sf-cartbar-label { flex: 1; min-width: 0; text-align: start; font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-cartbar.flash .sf-cartbar-label { animation: sfCartFlash .35s ease-out; }
@keyframes sfCartFlash { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sf-cartbar-total { flex: none; font-size: 1.02rem; font-variant-numeric: tabular-nums; padding: 6px 10px; border-radius: 10px; background: rgba(0,0,0,.14); }
@keyframes sf-cartbar-bump { 0% { transform: translate(-50%,0) scale(1); } 30% { transform: translate(-50%,0) scale(1.06); } 60% { transform: translate(-50%,0) scale(.98); } 100% { transform: translate(-50%,0) scale(1); } }
.sf-cartbar.show.bump { animation: sf-cartbar-bump .45s ease-out; }
/* While any sheet, modal or option bar is open, the bar steps aside. */
body:has(.orders-overlay.active) .sf-cartbar, body:has(.dish-modal.active) .sf-cartbar,
body:has(.sf-optbar.visible) .sf-cartbar, body.dish-detail-active .sf-cartbar { transform: translate(-50%, 140%); opacity: 0; pointer-events: none; }
/* Room for it: the last row of dishes and the toast clear the bar. */
body.has-cartbar { padding-bottom: 84px; }
body.has-cartbar .sf-toast { bottom: calc(118px + env(safe-area-inset-bottom, 0px)); }
.sf-fly {
  position: fixed; width: 64px; height: 64px; border-radius: 50%; z-index: 9998; pointer-events: none;
  background: var(--turath-gold) center / cover no-repeat; box-shadow: 0 6px 18px rgba(0,0,0,.35);
  border: 2px solid var(--turath-gold);
}
@media (prefers-reduced-motion: reduce) { .sf-cartbar, .sf-cartbar.show.bump, .sf-cartbar.flash .sf-cartbar-label { transition: none; animation: none; } }

/* ── Basket sheet: one main action ────────────────────────────────────────
   «مسح الكل» sat under «إتمام الطلب» as a second full-width button of the
   same weight — the most destructive tap on the sheet looked as inviting as
   the one we want. Now a quiet text link; and a line of two says what one
   costs. */
.orders-btn-clear, .orders-btn-clear:hover {
  width: auto; display: block; margin: 4px auto 0; padding: 8px 14px;
  border: none; background: none; box-shadow: none; transform: none;
  font-size: .9rem; font-weight: 600; opacity: .7; color: inherit;
  text-decoration: underline; text-underline-offset: 3px;
}
.orders-btn-clear:hover { opacity: 1; }
.order-item-each { display: block; font-size: .78em; font-weight: 500; opacity: .7; margin-top: 2px; }

/* ── The name stays in its slot ───────────────────────────────────────────
   .brand-center centres its children, and a centred flex child is as wide as
   its text: «Turath Restaurant» ran 90px past both edges and lay over the
   open/closed sign. Capped to the slot; fitBrandName() shrinks the type until
   the whole name fits, so the ellipsis is the last resort, not the rule. */
.brand-center .turath-name, .brand-center .branch-name { max-width: 100%; }
/* The logo and the sign keep their own width: allowed to shrink, the
   English «Open now» sign spilled 50px out of its box and under the name. */
.brand-logos { flex-shrink: 0; }
@media (max-width: 768px) {
  /* A Latin name may take two lines — «Turath / Restaurant» — and then shrink. */
  body.lang-en .brand-center .turath-name {
    letter-spacing: .5px; white-space: normal; line-height: 1.08;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: clip;
  }
}

/* ── Profile tabs fit their words ─────────────────────────────────────────
   Four equal quarters of a phone sheet cut «طلباتي» to «طلبا…» beside its
   count and lost the «آ» of «آرائي». Each tab now takes its label's width;
   the rail scrolls sideways on the narrowest phones rather than clipping. */
.pf-tabs { overflow-x: auto; scrollbar-width: none; }
.pf-tabs::-webkit-scrollbar { display: none; }
.pf-tab { flex: 1 0 auto; padding-inline: 10px; overflow: visible; }
.pf-tab-label { overflow: visible; }

/* English step names are longer than the Arabic: each takes its fifth of the
   rail and wraps inside it, instead of running into its neighbour. */
.sf-step { min-width: 0; flex: 1 1 0; }
.sf-step-label { overflow-wrap: anywhere; hyphens: auto; }
body.lang-en .sf-step-label { font-size: .62rem; }
/* The rail of the step bar ran through «أُلغي هذا الطلب». */
.sf-steps-cancelled::before { display: none; }

/* ── Basket bar, mirrored (Ali, 2026-10-15) ───────────────────────────────
   The row reads the other way round: the total where the bag was, the bag
   where the total was, and the line of words beside the bag. The count wears
   the same red as the header cart's badge, on every branch's palette. */
.sf-cartbar { flex-direction: row-reverse; padding: 10px 10px 10px 14px; }
body.lang-ar .sf-cartbar { padding: 10px 14px 10px 10px; }
.sf-cartbar-label { text-align: end; }
.sf-cartbar-bag b {
  inset-inline-end: auto; inset-inline-start: -7px;
  background: linear-gradient(135deg, #e74c3c, #c0392b); color: #fff;
  box-shadow: 0 0 0 2px #fff;
}

/* ── A BANNED DEVICE + THE TERMS (2026-10-19) ──
   The ban notice replaces the whole page (above every sheet and modal); the
   Terms link rides the footer line and the checkout. Theme tokens only, so
   the brand's colours and both modes carry through. */
.sf-terms-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; opacity: 0.9; }
.sf-terms-note { margin-top: 10px; text-align: center; font-size: 0.78rem; opacity: 0.75; }
.sf-terms-note a { color: var(--turath-gold); font-weight: 700; }
body.sf-banned { overflow: hidden; }
.sf-ban {
  position: fixed; inset: 0; z-index: 2147483000; overflow-y: auto;
  background: var(--dark-bg); color: var(--ink);
  display: flex; align-items: flex-start; justify-content: center;
  padding: max(28px, env(safe-area-inset-top)) 18px max(28px, env(safe-area-inset-bottom));
}
.sf-ban-box { width: 100%; max-width: 560px; margin: auto 0; }
.sf-ban-mark {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 16px;
  display: grid; place-items: center;
  color: var(--turath-gold); background: rgba(var(--secondary-rgb), 0.16);
}
.sf-ban-card {
  border: 1px solid rgba(var(--ink-rgb), 0.16); background: rgba(var(--ink-rgb), 0.05);
  border-radius: 18px; padding: 20px 18px; margin: 0 0 14px; line-height: 1.7;
}
.sf-ban-card[dir="rtl"] { text-align: right; font-family: var(--font-ar, inherit); }
.sf-ban-card[dir="ltr"] { text-align: left; }
.sf-ban-card h2 { margin: 0 0 6px; font-size: 1.3rem; line-height: 1.35; color: var(--ink); }
.sf-ban-card p { margin: 0 0 8px; }
.sf-ban-card a { color: var(--turath-gold); font-weight: 700; }
.sf-ban-code {
  display: inline-block; direction: ltr; user-select: all; letter-spacing: 0.08em;
  font: 700 1.05rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 4px 10px; border-radius: 10px; border: 1px dashed var(--turath-gold); color: var(--turath-gold);
}
.sf-ban-muted { opacity: 0.72; font-size: 0.9rem; }

/* ===== SHEET TOKENS (dark) — read by sheets.css, which the server appends
   after this file. Solid fallbacks first; the brand-tinted mix only where
   the browser can compute it, so an old phone gets a plain opaque sheet,
   never a transparent one. ===== */
:root {
  --sf-scrim: rgba(2, 5, 7, .68);
  --sf-surface: #10191e;
  --sf-field: #172329;
  --sf-line: rgba(255, 255, 255, .10);
  --sf-line-strong: rgba(255, 255, 255, .20);
  --sf-ink: #f3efe6;
  --sf-ink-2: rgba(243, 239, 230, .76);
  --sf-ink-3: rgba(243, 239, 230, .50);
  --sf-accent: var(--turath-gold);
  --sf-accent-text: var(--turath-light);
  --sf-accent-soft: rgba(var(--secondary-rgb), .16);
  --sf-on-accent: var(--on-secondary, #1f1608);
  --sf-danger: #ff8a7a;
  --sf-danger-soft: rgba(255, 138, 122, .18);
  --sf-success: #5fd39a;
}
@supports (color: color-mix(in srgb, red, blue)) {
  :root {
    --sf-surface: color-mix(in srgb, var(--turath-teal) 20%, #0a0d10);
    --sf-field: color-mix(in srgb, var(--turath-teal) 30%, #12171b);
  }
}

/* =====================================================================
   SHEETS — every panel that rises over the menu (basket, checkout, the
   address sheet, choices, profile, feedback, order status) — 2026-10-20.

   ONE sheet, written once. It is appended to BOTH theme sheets by the
   server (storefrontweb.New), after everything else, so it wins over the
   older per-theme panel rules without !important. Colours come only from
   the --sf-* tokens each theme file defines in its "SHEET TOKENS" block,
   and those come from the restaurant's own brand colours — a new tenant
   gets the same sheet in its own palette, with nothing to copy.

   The rules it keeps:
   • A sheet is OPAQUE. Its surface, header and footer are solid colours,
     never a translucent wash over whatever is behind it (Arido, 2026-10-20:
     the address sheet had no panel at all and the checkout bled through it).
   • Text on the brand colour uses --sf-on-accent, picked for contrast from
     the brand colour itself (applyTheme), never a fixed white.
   • On a phone a sheet is a bottom sheet: full width, rounded top, a grab
     handle, the primary action in a footer that clears the home bar.
   • A field is 48px tall with 16px text (no iOS zoom), its label right
     above it, and its own error right below it.
   ===================================================================== */

/* ── the layer behind ─────────────────────────────────────────────── */
.orders-overlay {
  background: var(--sf-scrim);
  padding: 16px;
}

/* ── the sheet ───────────────────────────────────────────────────── */
.orders-panel {
  background: var(--sf-surface);
  color: var(--sf-ink);
  border: 1px solid var(--sf-line);
  border-radius: 22px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .38);
  max-width: 560px;
  max-height: min(92vh, 900px);
  overflow: hidden;
}

.orders-header {
  position: relative;
  background: var(--sf-surface);
  border-radius: 0;
  border-bottom: 1px solid var(--sf-line);
  padding: 18px 20px 14px;
  gap: 12px;
}
.orders-title { color: var(--sf-ink); gap: 10px; min-width: 0; }
.orders-title-text {
  font-size: 1.22rem;
  font-weight: 800;
  line-height: 1.3;
  text-shadow: none;
  overflow: hidden;
  text-overflow: ellipsis;
}
.orders-title-icon { width: 26px; height: 26px; }
.orders-title-icon svg { stroke: var(--sf-accent-text); }

.orders-close {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  background: var(--sf-field);
  border: 1px solid var(--sf-line);
  color: var(--sf-ink);
  font-size: 1.45rem;
  font-weight: 400;
  line-height: 1;
}
.orders-close:hover, .orders-close:active { background: var(--sf-field); transform: none; }

.orders-content {
  background: var(--sf-surface);
  padding: 16px 20px 20px;
  gap: 12px;
  overscroll-behavior: contain;
}
/* The body SCROLLS; nothing inside it shrinks. The sheet has a max height
   now, so a column child left at flex-shrink:1 got squeezed instead — and one
   that scrolls sideways (the profile tabs) has no min-height to stop it: it
   collapsed to a 27px strip under a long order history (Arido, 2026-10-20). */
.orders-content > * { flex-shrink: 0; }
.orders-content::-webkit-scrollbar-track { background: transparent; }
.orders-content::-webkit-scrollbar-thumb { background: var(--sf-line-strong); }

.orders-footer {
  background: var(--sf-surface);
  border-radius: 0;
  border-top: 1px solid var(--sf-line);
  box-shadow: 0 -10px 24px rgba(0, 0, 0, .10);
  padding: 14px 20px 16px;
}
.orders-total {
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 0;
  border-bottom: 0;
}
.orders-total-label { color: var(--sf-ink-2); font-size: 1rem; font-weight: 700; }
.orders-total-amount {
  color: var(--sf-ink);
  font-size: 1.4rem;
  font-weight: 800;
  text-shadow: none;
  font-variant-numeric: tabular-nums;
}

/* ── buttons ─────────────────────────────────────────────────────── */
.orders-btn-checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  margin-bottom: 0;
  padding: 12px 20px;
  border-radius: 14px;
  background: var(--sf-accent);
  color: var(--sf-on-accent);
  font-size: 1.05rem;
  font-weight: 800;
  text-shadow: none;
  box-shadow: 0 6px 18px rgba(var(--secondary-rgb), .28);
}
.orders-btn-checkout:hover { transform: none; box-shadow: 0 8px 22px rgba(var(--secondary-rgb), .36); }
.orders-btn-checkout:active { transform: scale(.985); }
.orders-btn-checkout:disabled {
  opacity: 1;
  background: var(--sf-field);
  color: var(--sf-ink-3);
  border: 1px solid var(--sf-line);
  box-shadow: none;
  cursor: not-allowed;
}
.orders-footer .orders-btn-checkout + .co-error,
.orders-footer .orders-btn-checkout + .orders-btn-clear { margin-top: 10px; }

/* Secondary: same size family, outlined, never the faint grey text it was. */
.ot-dismiss {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  margin-top: 10px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1.5px solid var(--sf-line-strong);
  background: transparent;
  color: var(--sf-ink);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}
.ot-dismiss:hover { border-color: var(--sf-accent); }
/* A secondary that IS the next step (locate, add an address) wears the brand. */
.ot-dismiss.sf-btn-accent {
  border-color: var(--sf-accent);
  color: var(--sf-accent-text);
  background: var(--sf-accent-soft);
}
/* A quiet text action (cancel under a primary). */
.ot-dismiss.sf-btn-quiet {
  border-color: transparent;
  color: var(--sf-ink-2);
  min-height: 44px;
}

.orders-btn-checkout:focus-visible, .ot-dismiss:focus-visible, .orders-close:focus-visible,
.co-type:focus-visible, .co-coupon-btn:focus-visible, .pf-seg-btn:focus-visible {
  outline: 3px solid var(--sf-accent);
  outline-offset: 2px;
}

/* ── fields ──────────────────────────────────────────────────────── */
.co-label {
  margin: 18px 0 6px;
  color: var(--sf-ink-2);
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.4;
}
.orders-content > .co-label:first-child { margin-top: 2px; }

.co-input, .orders-panel .pf-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--sf-field);
  background-image: none;
  border: 1px solid var(--sf-line-strong);
  color: var(--sf-ink);
  font-size: 16px;
  line-height: 1.4;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.orders-panel .pf-input + .pf-input,
.orders-panel .pf-input + .sf-areapick,
.orders-panel .sf-areapick + .pf-input { margin-top: 10px; }
textarea.co-input { min-height: 92px; resize: vertical; }
#fbMessage { min-height: 124px; }
select.co-input { appearance: auto; }
.co-input::placeholder, .orders-panel .pf-input::placeholder { color: var(--sf-ink-3); opacity: 1; }
.co-input:focus, .orders-panel .pf-input:focus {
  outline: none;
  border-color: var(--sf-accent);
  box-shadow: 0 0 0 3px var(--sf-accent-soft);
}
.co-input.sf-invalid, .orders-panel .pf-input.sf-invalid {
  border-color: var(--sf-danger);
  box-shadow: 0 0 0 3px var(--sf-danger-soft);
}
.sf-field-error {
  margin-top: 6px;
  color: var(--sf-danger);
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.45;
}
.co-error { color: var(--sf-danger); font-weight: 700; font-size: .9rem; line-height: 1.5; }
.co-error:empty { display: none; }

/* ── one-of choices: a segmented control, the chosen one filled ───── */
.co-types {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--sf-field);
  border: 1px solid var(--sf-line);
}
.co-type {
  flex: 1;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--sf-ink-2);
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.3;
}
.co-type.active {
  background: var(--sf-accent);
  color: var(--sf-on-accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
}
/* Only one channel offered: it is a fact, not a choice. */
.co-types.single .co-type { pointer-events: none; }

.orders-panel .pf-seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--sf-field);
  border: 1px solid var(--sf-line);
}
.orders-panel .pf-seg-btn {
  flex: 1;
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--sf-ink-2);
  font-weight: 700;
}
.orders-panel .pf-seg-btn.active { background: var(--sf-accent); color: var(--sf-on-accent); }

/* ── coupon ──────────────────────────────────────────────────────── */
.co-coupon-row { gap: 8px; align-items: stretch; }
.co-coupon-btn {
  min-height: 48px;
  padding: 0 18px;
  border-radius: 12px;
  background: transparent;
  border: 1.5px solid var(--sf-accent);
  color: var(--sf-accent-text);
  font-weight: 800;
}

/* ── cards, notes, rows ──────────────────────────────────────────── */
.os-card {
  background: var(--sf-field);
  border: 1px solid var(--sf-line);
  border-radius: 14px;
  color: var(--sf-ink);
}
.os-note { color: var(--sf-ink-2); font-size: .86rem; line-height: 1.55; }
.sf-free-delivery { color: var(--sf-success); font-weight: 700; }

.order-item {
  background: var(--sf-field);
  border: 1px solid var(--sf-line);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.order-item:hover { background: var(--sf-field); border-color: var(--sf-line-strong); transform: none; box-shadow: none; }

.sf-mod { min-height: 48px; padding: 8px 4px; border-bottom: 1px solid var(--sf-line); color: var(--sf-ink); }
.sf-mod input { width: 22px; height: 22px; accent-color: var(--sf-accent); flex: 0 0 auto; }
.sf-mod-delta { color: var(--sf-ink-2); opacity: 1; font-variant-numeric: tabular-nums; }
.sf-modgroup-title { color: var(--sf-ink); }
.sf-modgroup-rule { color: var(--sf-ink-2); opacity: 1; }

/* ── the address sheet ───────────────────────────────────────────── */
.sf-addr-hint { margin: 0 0 12px; color: var(--sf-ink-2); font-size: .88rem; line-height: 1.55; }
.sf-addr-map {
  height: 220px;
  margin-top: 10px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--sf-line);
}
#addrSheet .orders-footer .ot-dismiss { margin-top: 6px; }

/* ── phones: a bottom sheet ──────────────────────────────────────── */
@media (max-width: 640px) {
  .orders-overlay { align-items: flex-end; padding: 0; }
  .orders-panel {
    max-width: 100%;
    max-height: 92vh;
    max-height: 92dvh;
    border-radius: 22px 22px 0 0;
    border-bottom: 0;
    transform: translateY(32px);
  }
  .orders-overlay.active .orders-panel { transform: none; }
  .orders-header { padding: 22px 16px 12px 16px; }
  .orders-header::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    width: 40px;
    height: 4px;
    margin-left: -20px;
    border-radius: 2px;
    background: var(--sf-line-strong);
  }
  .orders-content { padding: 14px 16px 18px; }
  .orders-footer { padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .orders-panel, .orders-overlay { transition: none !important; }
}

/* ── a saved address at checkout: a radio card ──────────────────── */
.os-card.sf-addr-pick {
  position: relative;
  margin-bottom: 8px;
  padding: 12px 14px;
  padding-inline-start: 46px;
  text-align: start;
  cursor: pointer;
}
.os-card.sf-addr-pick::before {
  content: '';
  position: absolute;
  inset-inline-start: 14px;
  top: 14px;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid var(--sf-line-strong);
  background: var(--sf-field);
}
.os-card.sf-addr-pick.on { border-color: var(--sf-accent); background: var(--sf-accent-soft); }
.os-card.sf-addr-pick.on::before { border: 6px solid var(--sf-accent); }
.os-card.sf-addr-pick .os-note { margin-top: 4px; }

/* ── forms: spacing comes from the labels, not the column gap ───── */
#checkoutContent, #addrContent, #fbContent { gap: 0; }
#checkoutContent > .co-types:first-child { margin-bottom: 2px; }

/* Only one channel offered: say it as a chip, not a full-width button. */
.co-types.single { background: transparent; border: 0; padding: 0; justify-content: flex-start; }
.co-types.single .co-type {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--sf-accent-soft);
  color: var(--sf-accent-text);
  box-shadow: none;
}

/* The site's note on a placed order waiting for the restaurant (order_note_ar/en). */
.sf-order-note { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--sf-accent-soft); border: 1px solid var(--sf-line-strong); border-inline-start: 5px solid var(--sf-accent); color: var(--sf-ink); font-weight: 700; line-height: 1.65; text-align: start; }
body.lang-ar .sf-order-note { font-family: var(--font-ar); }