:root {
            --green:     #2d5a3d;
            --green-dark:#1e3d2b;
            --green-mid: #3a6b4a;
            --sand:      #e8d9c0;
            --sand-light:#f2ead8;
            --sand-mid:  #d4c3a5;
            --cream:     #f7f0e4;
            --brown:     #6b3d2e;
            --brown-dark:#452a22;
            --brown-mid: #8a5540;
            --orange:    #c97d3a;
            --text:      #2a1a10;

            /* ── Dynamic Viewport Units (DVU) ── */
            /* dvh = dynamic viewport height — shrinks/grows with browser chrome on mobile */
            --vh: 1dvh;
            --vw: 1dvw;
            --min-vw: 1vmin;

            /* ── Fluid spacing scale (utopia-style) ── */
            /* base: 320px → 1440px viewport */
            --space-3xs: clamp(0.25rem, 0.23rem + 0.11vw, 0.31rem);
            --space-2xs: clamp(0.5rem,  0.46rem + 0.22vw, 0.63rem);
            --space-xs:  clamp(0.75rem, 0.69rem + 0.33vw, 0.94rem);
            --space-s:   clamp(1rem,    0.91rem + 0.43vw, 1.25rem);
            --space-m:   clamp(1.5rem,  1.37rem + 0.65vw, 1.88rem);
            --space-l:   clamp(2rem,    1.83rem + 0.87vw, 2.5rem);
            --space-xl:  clamp(3rem,    2.74rem + 1.3vw,  3.75rem);
            --space-2xl: clamp(4rem,    3.65rem + 1.74vw, 5rem);

            /* ── Fluid font scale ── */
            --text-xs:   clamp(0.69rem,  0.66rem + 0.15vw, 0.8rem);
            --text-sm:   clamp(0.8rem,   0.76rem + 0.2vw,  0.94rem);
            --text-base: clamp(0.9rem,   0.87rem + 0.17vw, 1rem);
            --text-md:   clamp(1rem,     0.93rem + 0.33vw, 1.2rem);
            --text-lg:   clamp(1.2rem,   1.07rem + 0.65vw, 1.6rem);
            --text-xl:   clamp(1.4rem,   1.2rem  + 1vw,    2rem);
            --text-2xl:  clamp(1.8rem,   1.5rem  + 1.5vw,  2.8rem);
            --text-3xl:  clamp(2.2rem,   1.8rem  + 2vw,    3.8rem);

            /* ── Safe area insets (notch / home indicator) ── */
            --safe-top:    env(safe-area-inset-top,    0px);
            --safe-right:  env(safe-area-inset-right,  0px);
            --safe-bottom: env(safe-area-inset-bottom, 0px);
            --safe-left:   env(safe-area-inset-left,   0px);

            /* ── Touch target minimum ── */
            --touch-min: 44px;

            /* ── Container breakpoints ── */
            --bp-xs: 320px;
            --bp-sm: 480px;
            --bp-md: 768px;
            --bp-lg: 1024px;
            --bp-xl: 1280px;
        }

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        /* ── Modern scroll & text rendering ── */
        html {
            scroll-behavior: smooth;
            /* Prevent text-size inflation on mobile landscape */
            -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;
            /* Improve font rendering */
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        body {
            font-family: 'Cairo', sans-serif;
            background-color: var(--green-dark);
            color: var(--text);
            /* dvh: respects browser chrome on mobile — no content cut off */
            min-height: 100dvh;
            overflow-x: hidden;
            /* Safe area support for notched devices */
            padding-left:  var(--safe-left);
            padding-right: var(--safe-right);
            /* Improve touch scrolling on iOS */
            -webkit-overflow-scrolling: touch;
        }

        /* Ensure all images, videos, svgs are fluid */
        img, video, svg, picture {
            max-width: 100%;
            height: auto;
            display: block;
        }

        /* Prevent long words from breaking layout */
        p, h1, h2, h3, h4, h5, h6, li, span, div {
            overflow-wrap: break-word;
            word-break: break-word;
        }

        /* Better button defaults */
        button {
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
        }

        /* Better link defaults */
        a { -webkit-tap-highlight-color: transparent; }

        /* ========== CANAANITE SYMBOLS SVG PATTERNS ========== */
        .canaan-bg {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }

        /* ========== HEADER ========== */
        /* container query context for header children */
        header {
            display: flex;
            background: var(--green);
            position: relative;
            text-align: center;
            padding-inline: clamp(12px, 4vw, 32px);
            padding-block: 0;
            overflow: hidden;
            z-index: 10;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            /* Enable safe area on iPhone notch for top */
            padding-top: max(0px, var(--safe-top));
            /* Container query context */
            container-type: inline-size;
            container-name: header-container;
        }

        /* Canaanite symbols row at top */
        .symbols-strip {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: clamp(6px, 2vw, 18px);
            padding: clamp(8px, 2vw, 14px) 0;
            flex-wrap: nowrap;
            overflow: hidden;
        }

        .sym {
            color: var(--sand);
            opacity: 0.45;
            font-size: clamp(1rem, 3.5vw, 1.6rem);
            line-height: 1;
            flex-shrink: 0;
        }

        /* The arch / لوح */
        .arch-wrapper {
            position: relative;
            display: inline-block;
            width: clamp(200px, 80vw, 460px);
            margin: 0 auto clamp(12px, 3vw, 24px);
        }

        .arch-shape {
            background: var(--sand-light);
            border-radius: 50% 50% 6px 6px / 55% 55% 6px 6px;
            padding: clamp(20px, 5vw, 48px) clamp(20px, 6vw, 60px) clamp(16px, 4vw, 36px);
            position: relative;
            box-shadow:
                inset 0 -6px 20px rgba(0,0,0,0.08),
                0 12px 40px rgba(0,0,0,0.35);
        }

        /* Subtle Canaanite watermark inside arch */
        .arch-shape::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Ccircle cx='60' cy='60' r='44' fill='none' stroke='%23b09070' stroke-width='1.2' opacity='0.15'/%3E%3Ccircle cx='60' cy='60' r='30' fill='none' stroke='%23b09070' stroke-width='0.8' opacity='0.1'/%3E%3Cpath d='M60 16 L60 104 M16 60 L104 60' stroke='%23b09070' stroke-width='0.8' opacity='0.1'/%3E%3Cpath d='M28 28 L92 92 M92 28 L28 92' stroke='%23b09070' stroke-width='0.8' opacity='0.08'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 70%;
            pointer-events: none;
        }

        /* LOGO TEXT — custom Canaanite-style using Reem Kufi with letter-spacing */
        .logo-text {
            font-family: 'Reem Kufi', sans-serif;
            font-size: clamp(2.6rem, 8vw, 4rem);
            font-weight: 700;
            color: var(--brown-dark);
            letter-spacing: 0.05em;
            line-height: 1;
            position: relative;
            display: block;
            text-shadow: 2px 3px 0px rgba(100,60,30,0.15);
        }

        .logo-sub {
            font-family: 'Reem Kufi', sans-serif;
            font-size: clamp(0.85rem, 2.8vw, 1.15rem);
            color: var(--brown-mid);
            letter-spacing: 0.18em;
            margin-top: 5px;
            display: block;
        }

        /* Table tag */
        .table-tag {
            display: inline-block;
            background: var(--orange);
            color: white;
            padding: 4px 16px;
            border-radius: 20px;
            font-size: 0.88rem;
            font-weight: 700;
            margin-top: 10px;
           margin-bottom: 15px;
        }

        /* Bottom border of header */
        .header-border {
            height: 7px;
            background: linear-gradient(90deg, var(--brown), var(--orange), var(--brown));
        }

        /* ========== MAIN CONTAINER ========== */
        main {
            position: relative;
            z-index: 5;
            max-width: 1100px;
            margin-inline: auto;
            padding-block: var(--space-m) var(--space-2xl);
            padding-inline: clamp(10px, 3vw, 24px);
            /* Safe area for landscape phones */
            padding-left:  max(10px, calc(clamp(10px, 3vw, 24px) + var(--safe-left)));
            padding-right: max(10px, calc(clamp(10px, 3vw, 24px) + var(--safe-right)));
            /* Container for children to use @container queries */
            container-type: inline-size;
            container-name: main-layout;
        }

        /* ========== CATEGORY SECTION - ARCH DESIGN ========== */
        .category-section {
            margin-bottom: clamp(24px, 5vw, 44px);
            position: relative;
        }

        /* The arch top for each category */
        .category-arch {
            background: var(--sand-light);
            border-radius: 50% 50% 0 0 / 40% 40% 0 0;
            text-align: center;
            padding: clamp(14px, 3vw, 28px) 20px clamp(8px, 2vw, 14px);
            border: 2px solid var(--sand-mid);
            border-bottom: none;
            position: relative;
            overflow: hidden;
        }

        .category-arch::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Ccircle cx='40' cy='40' r='28' fill='none' stroke='%23b09870' stroke-width='0.7' opacity='0.18'/%3E%3Cpath d='M40 12 L40 68 M12 40 L68 40' stroke='%23b09870' stroke-width='0.5' opacity='0.13'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 60%;
            pointer-events: none;
        }

        /* Canaanite mini symbols flanking category title */
        .category-arch::after {
            content: '𐤀 𐤁 𐤂';
            position: absolute;
            top: 6px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.65rem;
            color: var(--brown-mid);
            opacity: 0.25;
            letter-spacing: 6px;
            white-space: nowrap;
        }

        .category-title {
            font-family: 'Reem Kufi', sans-serif;
            font-size: var(--text-lg);
            color: var(--brown-dark);
            font-weight: 700;
            position: relative;
            z-index: 1;
        }

        /* ========== MENU GRID — Container Queries ========== */
        /* Wraps in a container so grid reacts to its OWN width, not viewport */
        .category-body {
            background: var(--sand-light);
            border: 2px solid var(--sand-mid);
            border-top: none;
            border-radius: 0 0 16px 16px;
            padding: clamp(10px, 2.5vw, 20px);
            /* container for menu-grid */
            container-type: inline-size;
            container-name: category-body;
        }

        .menu-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--space-xs);
        }

        /* @container: grid responds to .category-body width — NOT viewport width */
        @container category-body (min-width: 360px) {
            .menu-grid { grid-template-columns: 1fr 1fr; }
        }
        @container category-body (min-width: 700px) {
            .menu-grid { grid-template-columns: 1fr 1fr 1fr; }
        }

        /* ========== MENU ITEM ========== */
        .menu-item {
            background: white;
            border-radius: 14px;
            padding: var(--space-xs) var(--space-s);
            border-inline-end: 4px solid var(--orange); /* logical property: RTL-aware */
            box-shadow: 0 2px 8px rgba(70,40,20,0.06);
            cursor: pointer;
            transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
            position: relative;
            min-height: var(--touch-min);
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        /* Only hover on pointer devices — not touch */
        @media (hover: hover) and (pointer: fine) {
            .menu-item:hover {
                transform: translateY(-3px);
                box-shadow: 0 8px 20px rgba(70,40,20,0.12);
                border-inline-end-color: var(--green);
            }
        }

        /* Active state for touch */
        .menu-item:active {
            transform: scale(0.98);
        }

        .menu-item.in-cart {
            border-inline-end-color: var(--green);
            background: #f0faf2;
        }

        .item-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 8px;
            flex-wrap: nowrap;
        }

        .item-name {
            font-weight: 700;
            font-size: var(--text-base);
            color: var(--brown-dark);
            flex: 1;
            min-width: 0;
            line-height: 1.3;
        }

        /* Price + button row */
        .price-add-row {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
        }

        .item-price {
            font-weight: 700;
            font-size: var(--text-base);
            color: var(--green);
            background: var(--sand);
            padding: 2px 8px;
            border-radius: 20px;
            white-space: nowrap;
        }

        /* + button — smaller circle, bigger + icon */
        .add-btn {
            width:  26px;
            height: 26px;
            border-radius: 50%;
            background: var(--green);
            color: white;
            border: none;
            font-size: 1.35rem;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            transition: background 0.18s, transform 0.1s;
            flex-shrink: 0;
            touch-action: manipulation;
            /* expand tap area without growing visual circle */
            padding: 0;
            position: relative;
        }
        /* invisible larger tap target overlay */
        .add-btn::before {
            content: '';
            position: absolute;
            inset: -10px;
        }

        .add-btn:active { transform: scale(0.88); }
        @media (hover: hover) and (pointer: fine) {
            .add-btn:hover  { background: var(--orange); }
        }

        .item-desc {
            font-size: var(--text-xs);
            color: #777;
            margin-top: 5px;
            line-height: 1.45;
        }

        /* ========== FLOATING ACTIONS ========== */
        .floating-action {
            position: fixed;
            /* Use dvh-aware bottom with safe area for iPhone home bar */
            bottom: max(14px, calc(14px + var(--safe-bottom)));
            left: 50%;
            transform: translateX(-50%);
            /* svw = small viewport width — stable even when scrollbars appear */
            width: min(94svw, 94%);
            max-width: 520px;
            z-index: 1000;
            transition: transform 0.45s cubic-bezier(0.4,0,0.2,1), opacity 0.4s ease, visibility 0.4s;
        }

        .floating-action.hidden-footer {
            opacity: 0;
            visibility: hidden;
            transform: translate(-50%, 90px) scale(0.85);
            pointer-events: none;
        }

        /* fluid width with cqi (container query inline units) */
        @media (min-width: 768px)  { .floating-action { width: min(60%, 60vw); } }
        @media (min-width: 1024px) { .floating-action { width: min(40%, 40vw); } }

        .floating-buttons {
            display: flex;
            gap: var(--space-2xs);
            align-items: center;
            justify-content: center;
        }

        .btn-cart {
            position: relative;
            background: linear-gradient(135deg, var(--orange), var(--brown));
            color: white;
            border: 2px solid rgba(255,255,255,0.3);
            border-radius: 50px;
            padding: clamp(10px, 2.5dvh, 14px) clamp(14px, 3vw, 20px);
            font-size: var(--text-sm);
            cursor: pointer;
            box-shadow: 0 8px 20px rgba(180,100,50,0.4);
            font-family: 'Cairo', sans-serif;
            font-weight: 700;
            transition: transform 0.15s;
            white-space: nowrap;
            min-height: var(--touch-min);
            touch-action: manipulation;
        }

        .btn-cart:active { transform: scale(0.95); }

        .cart-badge {
            position: absolute;
            top: -7px;
            inset-inline-start: -7px; /* RTL-aware */
            background: #e53e3e;
            color: white;
            border-radius: 50%;
            width: 22px;
            height: 22px;
            font-size: 0.72rem;
            font-weight: 700;
            display: none;
            align-items: center;
            justify-content: center;
        }

        .btn-waiter {
            background: linear-gradient(135deg, #555, #333);
            color: white;
            border: 2px solid rgba(255,255,255,0.2);
            border-radius: 50px;
            padding: clamp(10px, 2.5dvh, 14px) clamp(12px, 2.5vw, 18px);
            font-weight: 700;
            font-size: var(--text-sm);
            box-shadow: 0 8px 20px rgba(0,0,0,0.25);
            cursor: pointer;
            transition: transform 0.15s;
            font-family: 'Cairo', sans-serif;
            white-space: nowrap;
            min-height: var(--touch-min);
            touch-action: manipulation;
        }

        .btn-waiter.ringing { animation: ring 0.5s ease; }

        @keyframes ring {
            0%,100%{ transform:rotate(0) }
            20%{ transform:rotate(-8deg) }
            40%{ transform:rotate(8deg) }
            60%{ transform:rotate(-6deg) }
            80%{ transform:rotate(6deg) }
        }

        .btn-order {
            background: linear-gradient(135deg, #25D366, #128C7E);
            color: white;
            border: 2px solid rgba(255,255,255,0.2);
            border-radius: 50px;
            padding: 10px 14px;
            font-weight: 700;
            font-size: clamp(0.82rem, 2.8vw, 1rem);
            box-shadow: 0 8px 20px rgba(18,140,126,0.35);
            cursor: pointer;
            font-family: 'Cairo', sans-serif;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 5px;
            white-space: nowrap;
        }

        /* ========== OVERLAYS ========== */
        .overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.65);
            z-index: 9998;
            align-items: center;
            justify-content: center;
            padding: 15px;
        }
        .overlay.active { display: flex; }

        /* Admin */
        #login-panel {
            background: white;
            border-radius: 20px;
            padding: 30px 24px;
            width: 88%;
            max-width: 360px;
            text-align: center;
            font-family: 'Cairo', sans-serif;
        }
        #login-panel h3 { font-family:'Reem Kufi',sans-serif; color:var(--green); margin-bottom:15px; font-size: 1.3rem; }
        #admin-pass {
            width: 100%; padding: 12px; border: 2px solid var(--sand);
            border-radius: 10px; font-size: 1rem; font-family:'Cairo',sans-serif;
            box-sizing: border-box; text-align: center; margin-bottom: 12px; direction:ltr;
        }
        #admin-pass:focus { outline:none; border-color:var(--green); }
        .btn-login { width:100%; padding:12px; background:var(--green); color:white; border:none; border-radius:10px; font-family:'Cairo',sans-serif; font-size:1rem; font-weight:700; cursor:pointer; }
        #login-error { color:#b91c1c; font-size:0.85rem; margin-top:8px; display:none; }

        #admin-panel {
            display: none;
            background: #fff;
            border-radius: 20px;
            padding: var(--space-m) var(--space-s);
            width: min(93%, 93svw);
            max-width: 620px;
            /* dvh: works with mobile browser chrome */
            max-height: 88dvh;
            overflow-y: auto;
            font-family: 'Cairo', sans-serif;
            direction: rtl;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
        }
        #admin-panel h2 { font-family:'Reem Kufi',sans-serif; color:var(--green); text-align:center; margin:0 0 18px; }
        .stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px; }
        @media(min-width:480px){ .stats-grid{ grid-template-columns:repeat(3,1fr); } }
        .stat-card { background:var(--sand); border-radius:12px; padding:12px 8px; text-align:center; border-top:4px solid var(--green); }
        .stat-num { font-size:1.9rem; font-weight:700; color:var(--green); line-height:1; }
        .stat-label { font-size:0.78rem; color:var(--brown); margin-top:3px; }
        .section-title { font-weight:700; color:var(--brown-dark); margin:16px 0 8px; border-bottom:2px solid var(--sand); padding-bottom:4px; }
        .hours-bar { display:flex; align-items:flex-end; gap:3px; height:70px; margin-bottom:12px; }
        .hour-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; }
        .hour-bar-fill { width:100%; background:var(--green); border-radius:3px 3px 0 0; min-height:2px; }
        .hour-label { font-size:0.55rem; color:#999; }
        .waiter-log { list-style:none; padding:0; margin:0; max-height:140px; overflow-y:auto; }
        .waiter-log li { display:flex; justify-content:space-between; padding:5px 10px; border-radius:7px; font-size:0.82rem; margin-bottom:3px; background:#f9f5f0; }
        .waiter-log li:nth-child(odd){ background:var(--sand); }
        .admin-actions { display:flex; gap:10px; margin-top:18px; }
        .btn-admin { flex:1; padding:10px; border:none; border-radius:10px; font-family:'Cairo',sans-serif; font-size:0.9rem; cursor:pointer; font-weight:700; }
        .btn-close-admin { background:var(--green); color:white; }
        .btn-clear { background:#fee2e2; color:#b91c1c; }

        /* ── Dashboard Tabs ── */
        .dash-tabs {
            display: flex;
            gap: 8px;
            margin-bottom: 16px;
            background: var(--sand);
            border-radius: 12px;
            padding: 5px;
        }
        .dash-tab {
            flex: 1;
            padding: 9px 8px;
            border: none;
            border-radius: 9px;
            font-family: 'Cairo', sans-serif;
            font-size: 0.88rem;
            font-weight: 700;
            cursor: pointer;
            background: transparent;
            color: var(--brown);
            transition: all 0.2s;
        }
        .dash-tab.active {
            background: var(--green);
            color: white;
            box-shadow: 0 2px 8px rgba(45,90,61,0.3);
        }

        /* ── Orders Filter Bar ── */
        .orders-filter-bar {
            display: flex;
            gap: 8px;
            margin-bottom: 12px;
            flex-wrap: wrap;
        }
        .orders-filter-bar select {
            flex: 1;
            min-width: 110px;
            padding: 8px 10px;
            border: 2px solid var(--sand-mid);
            border-radius: 10px;
            font-family: 'Cairo', sans-serif;
            font-size: 0.85rem;
            background: white;
            color: var(--brown-dark);
            cursor: pointer;
        }
        .orders-refresh-btn {
            padding: 8px 14px;
            background: var(--green);
            color: white;
            border: none;
            border-radius: 10px;
            font-family: 'Cairo', sans-serif;
            font-size: 0.85rem;
            font-weight: 700;
            cursor: pointer;
            white-space: nowrap;
        }

        /* ── Order Cards ── */
        .orders-loading { text-align:center; padding:30px; color:#999; font-size:0.95rem; }
        .order-card {
            background: #fafaf8;
            border: 1.5px solid var(--sand-mid);
            border-radius: 14px;
            padding: 14px;
            margin-bottom: 10px;
            position: relative;
        }
        .order-card-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 8px;
            gap: 8px;
        }
        .order-card-name {
            font-weight: 700;
            color: var(--brown-dark);
            font-size: 0.95rem;
        }
        .order-card-phone {
            font-size: 0.82rem;
            color: #888;
            margin-top: 2px;
            direction: ltr;
            text-align: right;
        }
        .order-card-meta {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            margin-bottom: 8px;
        }
        .order-tag {
            font-size: 0.75rem;
            padding: 3px 10px;
            border-radius: 20px;
            font-weight: 600;
        }
        .tag-type-dine   { background:#e8f5e9; color:#2d5a3d; }
        .tag-type-take   { background:#fff3e0; color:#c97d3a; }
        .tag-status-new  { background:#e3f2fd; color:#1565c0; }
        .tag-status-done { background:#e8f5e9; color:#2e7d32; }
        .tag-status-canc { background:#fce4ec; color:#b71c1c; }
        .tag-table       { background:var(--sand); color:var(--brown-dark); }
        .order-items-list {
            font-size: 0.82rem;
            color: #555;
            margin-bottom: 8px;
            line-height: 1.7;
            border-top: 1px solid var(--sand);
            padding-top: 8px;
        }
        .order-card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
        }
        .order-total {
            font-family: 'Reem Kufi', sans-serif;
            font-size: 1rem;
            color: var(--green);
            font-weight: 700;
        }
        .order-time {
            font-size: 0.75rem;
            color: #aaa;
        }
        .order-notes {
            font-size: 0.8rem;
            color: var(--brown-mid);
            background: #fff8f0;
            border-radius: 8px;
            padding: 5px 10px;
            margin-top: 6px;
        }
        .order-status-select {
            padding: 4px 10px;
            border: 1.5px solid var(--sand-mid);
            border-radius: 8px;
            font-family: 'Cairo', sans-serif;
            font-size: 0.8rem;
            background: white;
            cursor: pointer;
        }
        .no-orders { text-align:center; padding:30px; color:#bbb; font-size:0.95rem; }

        /* Cart Modal */
        #cart-modal {
            background: white;
            border-radius: 24px;
            padding: var(--space-m) var(--space-s) var(--space-m);
            width: min(95%, 95svw);
            max-width: 480px;
            /* dvh: modal doesn't get clipped by browser chrome on mobile */
            max-height: 90dvh;
            overflow-y: auto;
            font-family: 'Cairo', sans-serif;
            direction: rtl;
            /* Smooth scrolling inside modal on iOS */
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
        }
        #cart-modal h2 { font-family:'Reem Kufi',sans-serif; color:var(--green); text-align:center; margin:0 0 18px; font-size:1.5rem; }
        .cart-items-list { margin-bottom:16px; }
        .cart-item-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--sand); }
        .cart-item-row:last-child { border-bottom:none; }
        .cart-item-name { flex:1; font-weight:600; font-size:0.95rem; color:var(--brown-dark); }
        .cart-qty-controls { display:flex; align-items:center; gap:6px; }
        .qty-btn { width:28px; height:28px; border-radius:50%; border:2px solid var(--green); background:white; color:var(--green); font-size:1rem; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.15s; }
        .qty-btn:hover { background:var(--green); color:white; }
        .cart-qty { font-weight:700; min-width:20px; text-align:center; }
        .cart-item-subtotal { font-weight:700; color:var(--green); font-size:0.95rem; min-width:55px; text-align:left; }
        .cart-remove { background:none; border:none; color:#e53e3e; font-size:1rem; cursor:pointer; padding:2px; }
        .cart-total-row { display:flex; justify-content:space-between; align-items:center; background:var(--sand); border-radius:12px; padding:12px 15px; margin-bottom:16px; }
        .cart-total-label { font-family:'Reem Kufi',sans-serif; font-size:1.1rem; color:var(--brown-dark); }
        .cart-total-amount { font-family:'Reem Kufi',sans-serif; font-size:1.3rem; font-weight:700; color:var(--green); }
        .order-type-section { margin-bottom:14px; }
        .order-type-label { font-weight:700; color:var(--brown-dark); margin-bottom:8px; font-size:0.95rem; }
        .order-type-btns { display:flex; gap:10px; }
        .type-btn { flex:1; padding:10px; border:2px solid var(--sand); border-radius:12px; background:white; font-family:'Cairo',sans-serif; font-size:0.95rem; font-weight:600; cursor:pointer; color:var(--brown-dark); transition:all 0.2s; text-align:center; }
        .type-btn.selected { border-color:var(--green); background:var(--green); color:white; }
        .customer-form { margin-bottom:14px; }
        .form-group { margin-bottom:10px; }
        .form-group label { display:block; font-weight:600; font-size:0.88rem; color:var(--brown-dark); margin-bottom:5px; }
        .form-group input, .form-group textarea { width:100%; padding:10px 12px; border:2px solid #e5e0da; border-radius:10px; font-family:'Cairo',sans-serif; font-size:0.95rem; color:var(--brown-dark); background:#fafaf8; transition:border-color 0.2s; direction:rtl; }
        .form-group input:focus, .form-group textarea:focus { outline:none; border-color:var(--green); }
        .form-group textarea { resize:vertical; min-height:70px; }
        .cart-action-btns { display:flex; gap:10px; }
        .btn-send-order { flex:1; padding:14px; background:linear-gradient(135deg,#25D366,#128C7E); color:white; border:none; border-radius:14px; font-family:'Cairo',sans-serif; font-size:1rem; font-weight:700; cursor:pointer; transition:opacity 0.2s; }
        .btn-send-order:hover { opacity:0.92; }
        .btn-close-cart { padding:14px 18px; background:#f3ede6; color:var(--brown-dark); border:none; border-radius:14px; font-family:'Cairo',sans-serif; font-size:0.95rem; font-weight:600; cursor:pointer; }
        .empty-cart { text-align:center; padding:30px 0; color:#999; font-size:1rem; }
        .empty-cart-icon { font-size:3rem; margin-bottom:10px; }

        /* ========== FOOTER ========== */
        #site-footer {
            background: var(--green);
            color: var(--sand);
            padding-block: var(--space-xl) var(--space-l);
            padding-inline: var(--space-m);
            /* Extra bottom padding for iPhone home indicator */
            padding-bottom: max(var(--space-l), calc(var(--space-l) + var(--safe-bottom)));
            text-align: center;
            border-top: 6px solid var(--orange);
            cursor: pointer;
            user-select: none;
            position: relative;
            overflow: hidden;
        }

        #site-footer::before {
            content: '𐤀 𐤁 𐤂 𐤃 𐤄 𐤅 𐤆 𐤇 𐤈 𐤉 𐤊 𐤋';
            position: absolute;
            top: 8px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.9rem;
            letter-spacing: 10px;
            color: var(--sand);
            opacity: 0.12;
            white-space: nowrap;
        }

        .footer-logo {
            font-family: 'Reem Kufi', sans-serif;
            font-size: 1.7rem;
            color: var(--sand);
            margin-bottom: 18px;
        }

        .footer-info {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            margin-bottom: 18px;
        }

        .footer-info a {
            color: var(--sand);
            text-decoration: none;
            font-size: var(--text-base);
            display: flex;
            align-items: center;
            gap: 6px;
            transition: color 0.2s;
            /* minimum touch target */
            min-height: var(--touch-min);
        }

        .footer-info a:hover { color: var(--orange); }

        @media (min-width: 600px) {
            .footer-info { flex-direction: row; justify-content: center; gap: 24px; flex-wrap: wrap; }
        }

        .footer-divider { border: none; border-top: 1px solid rgba(235,220,202,0.2); margin: 14px 0; }

        .footer-social {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin-bottom: 16px;
            flex-wrap: wrap;
        }

        .social-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            border-radius: 25px;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.9rem;
            font-family: 'Cairo', sans-serif;
            transition: transform 0.2s, opacity 0.2s;
        }

        .social-btn:hover { transform: translateY(-2px); opacity: 0.9; }
        .btn-instagram { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: white; }
        .btn-maps { background: #4285F4; color: white; }

        .footer-dev { font-size: 0.75rem; color: rgba(235,220,202,0.5); margin-top: 6px; }

        /* SVG icons */
        .icon-svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }

        /* ========== RESPONSIVE TWEAKS ========== */
        /* Very small screens: 320px phones */
        @media (max-width: 380px) {
            .floating-buttons { gap: var(--space-3xs); }
            .btn-cart, .btn-waiter { padding: 9px 10px; font-size: var(--text-xs); }
        }

        /* Landscape mobile: tighten header */
        @media (max-height: 500px) and (orientation: landscape) {
            .arch-wrapper { width: clamp(140px, 40vw, 260px); margin-bottom: 8px; }
            .arch-shape   { padding: 12px 20px 10px; }
            .logo-text    { font-size: clamp(1.4rem, 6vw, 2.2rem); }
            .symbols-strip { padding: 4px 0; }
        }

        /* Large screens: comfortable reading widths */
        @media (min-width: 1280px) {
            main { padding-inline: var(--space-xl); }
        }

        /* Flash animation for add-to-cart */
        @keyframes flashGreen {
            0%   { background-color: #d1fae5; }
            100% { background-color: white; }
        }
        .menu-item.flash { animation: flashGreen 0.4s ease; }

        /* ========== ADD BTN: checkmark animation ========== */
        .add-btn.added {
            background: var(--green);
            pointer-events: none;
        }
        .add-btn.added::after {
            content: '';
        }

        @keyframes checkPop {
            0%   { transform: scale(0.5) rotate(-10deg); opacity: 0; }
            60%  { transform: scale(1.2) rotate(5deg);  opacity: 1; }
            100% { transform: scale(1) rotate(0deg);    opacity: 1; }
        }

        /* ========== TOAST NOTIFICATION ========== */
        #add-toast {
            position: fixed;
            bottom: max(90px, calc(90px + var(--safe-bottom)));
            left: 50%;
            transform: translateX(-50%) translateY(20px);
            background: var(--green);
            color: white;
            font-family: 'Cairo', sans-serif;
            font-weight: 700;
            font-size: var(--text-sm);
            padding: 10px 22px 10px 16px;
            border-radius: 40px;
            box-shadow: 0 6px 24px rgba(0,0,0,0.25);
            display: flex;
            align-items: center;
            gap: 8px;
            white-space: nowrap;
            z-index: 9999;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
            direction: rtl;
        }

        #add-toast.show {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }

        .toast-icon {
            width: 22px;
            height: 22px;
            background: rgba(255,255,255,0.22);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.85rem;
            flex-shrink: 0;
        }