body,
        body.public-site-mode,
        body.client-menu-compact {
            color: var(--alraihan-ink) !important;
            background: transparent !important;
            font-family: Arial, Helvetica, sans-serif !important;
            isolation: isolate;
        }

        html {
            background: #f5f0e7;
        }

        body::before {
            content: "";
            position: fixed;
            inset: 0;
            width: 100%;
            height: 100lvh;
            z-index: 0;
            display: block !important;
            pointer-events: none;
            background-image:
                linear-gradient(180deg, rgba(247,240,231,.92) 0%, rgba(247,240,231,.86) 54%, rgba(247,240,231,.94) 100%),
                radial-gradient(ellipse at 80% 10%, #e7dbc3, #f5f0e7 65%);
            background-position: center, center;
            background-size: cover, cover;
            background-repeat: no-repeat;
            animation: none !important;
            opacity: 1 !important;
            filter: none !important;
            transform: translateZ(0);
            contain: paint;
        }

        @supports not (height: 100lvh) {
            body::before { height: 100vh; }
        }

        body.has-venue-background {
            --venue-background-render-size: auto 94lvh;
            background-color: #f5f0e7 !important;
            background-image:
                linear-gradient(180deg, rgba(247,240,231,.26), rgba(247,240,231,.42)),
                var(--venue-menu-background-image) !important;
            background-position: center, center !important;
            background-size: auto, var(--venue-background-render-size) !important;
            background-repeat: no-repeat !important;
            background-attachment: fixed, fixed !important;
        }

        body.has-venue-background.venue-home-view {
            background-image:
                linear-gradient(180deg, rgba(247,240,231,.26), rgba(247,240,231,.42)),
                var(--venue-home-background-image) !important;
        }

        body.has-venue-background .container {
            background-color: #f5f0e7 !important;
            background-image:
                linear-gradient(180deg, rgba(247,240,231,.26), rgba(247,240,231,.42)),
                var(--venue-menu-background-image) !important;
            background-position: center, center !important;
            background-size: auto, var(--venue-background-render-size) !important;
            background-repeat: no-repeat !important;
            background-attachment: fixed, fixed !important;
        }

        body.has-venue-background.venue-home-view .container {
            background-image:
                linear-gradient(180deg, rgba(247,240,231,.26), rgba(247,240,231,.42)),
                var(--venue-home-background-image) !important;
        }

        body.has-venue-background::before {
            display: none !important;
        }

        @media (orientation: portrait) {
            body.has-venue-background {
                --venue-background-render-size: auto 86lvh;
            }
        }

        @supports not (height: 100lvh) {
            body.has-venue-background {
                --venue-background-render-size: auto 94vh;
            }

            @media (orientation: portrait) {
                body.has-venue-background {
                    --venue-background-render-size: auto 86vh;
                }
            }
        }

        body::after,
        .plant-decoration { display: none !important; }

        .header,
        body.public-site-mode .header,
        body.client-menu-compact .header {
            border-top: 4px solid var(--alraihan-red) !important;
            border-bottom: 1px solid rgba(33,29,27,.12) !important;
            background: rgba(255,255,255,.82) !important;
            box-shadow: 0 12px 34px rgba(68,38,29,.12), inset 0 1px 0 rgba(255,255,255,.88) !important;
            backdrop-filter: blur(24px) saturate(1.18) !important;
            -webkit-backdrop-filter: blur(24px) saturate(1.18) !important;
        }

        .header::before {
            height: 3px !important;
            background: linear-gradient(90deg, var(--alraihan-red) 0 78%, var(--alraihan-green) 78% 100%) !important;
            opacity: 1 !important;
        }

        #public-brand-link {
            border-radius: 12px;
            gap: 10px !important;
        }

        #header-logo {
            border: 2px solid rgba(8,44,80,.22) !important;
            box-shadow: 0 5px 14px rgba(120,22,26,.16) !important;
        }

        #header-logo-fallback .logo {
            color: var(--alraihan-red) !important;
            letter-spacing: .02em !important;
        }

        #header-logo-fallback {
            width: 45px;
            height: 45px;
            align-items: center !important;
            justify-content: center !important;
            border: 2px solid rgba(8,44,80,.22);
            border-radius: 10px;
            color: #fff;
            background: linear-gradient(145deg, var(--alraihan-red), var(--alraihan-red-dark));
            box-shadow: 0 5px 14px rgba(120,22,26,.16);
        }

        #header-brand-copy {
            display: flex;
            min-width: 0;
            flex-direction: column;
            align-items: flex-start;
            gap: 3px;
        }

        #header-venue-title {
            max-width: min(46vw, 520px);
            overflow: hidden;
            color: var(--alraihan-red-dark);
            font-size: clamp(15px, 1.2vw, 20px);
            font-weight: 800;
            line-height: 1.15;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        #header-title {
            color: var(--alraihan-ink) !important;
        }

        .nav-btn,
        body.public-site-mode .nav-btn,
        .site-login-button,
        .site-logout-button,
        .site-role-link {
            border: 1px solid #ddd4cf !important;
            border-radius: 12px !important;
            color: var(--alraihan-ink) !important;
            background: var(--alraihan-surface) !important;
            box-shadow: 0 4px 12px rgba(61,35,27,.06) !important;
            font-weight: 700 !important;
        }

        #cart-button,
        .nav-btn:hover,
        .nav-btn:focus-visible,
        .nav-btn.nav-active,
        .cart-button.has-items,
        .site-primary-auth-button {
            border-color: var(--alraihan-red) !important;
            color: #ffffff !important;
            background: linear-gradient(135deg, #174b79 0%, var(--alraihan-red) 58%, var(--alraihan-red-dark) 100%) !important;
            box-shadow: 0 7px 18px rgba(183,18,24,.20) !important;
        }

        body.public-site-mode #content,
        body.client-menu-compact #content {
            isolation: isolate;
            width: min(1180px, calc(100% - 28px)) !important;
            min-height: calc(100vh - 112px) !important;
            margin: 20px auto 36px !important;
            padding: clamp(20px, 2.4vw, 34px) !important;
            border: 1px solid rgba(255,255,255,.52) !important;
            border-radius: 28px !important;
            background: linear-gradient(145deg, rgba(255,255,255,.27) 0%, rgba(255,255,255,.13) 48%, rgba(255,255,255,.08) 100%) !important;
            box-shadow:
                0 30px 90px rgba(21,12,10,.28),
                0 10px 28px rgba(21,12,10,.18),
                inset 0 1px 0 rgba(255,255,255,.82),
                inset 0 -1px 0 rgba(255,255,255,.20) !important;
            backdrop-filter: blur(10px) saturate(1.08) !important;
            -webkit-backdrop-filter: blur(10px) saturate(1.08) !important;
        }

        body.public-site-mode #content::before,
        body.client-menu-compact #content::before {
            content: "";
            position: absolute;
            z-index: -1;
            top: 17px;
            left: 50%;
            width: min(1120px, calc(100% - 28px));
            height: 9px;
            transform: translateX(-50%);
            border-radius: 999px;
            background: linear-gradient(90deg, var(--alraihan-red) 0 76%, var(--alraihan-green) 76% 100%);
            box-shadow: 0 7px 18px rgba(139,23,27,.12);
        }

        body.public-site-mode .categories,
        body.client-menu-compact .categories {
            justify-content: center !important;
            align-items: stretch !important;
        }

        .category-card,
        .item-card,
        .menu-item-card,
        .cart-line-card,
        .cart-summary-panel {
            border: 1px solid var(--alraihan-line) !important;
            border-radius: 18px !important;
            color: var(--alraihan-ink) !important;
            background: rgba(255,255,255,.94) !important;
            box-shadow: 0 14px 34px rgba(76,43,33,.10) !important;
            backdrop-filter: blur(10px) !important;
            -webkit-backdrop-filter: blur(10px) !important;
        }

        body.public-site-mode .category-card,
        body.client-menu-compact .category-card {
            position: relative !important;
            overflow: hidden !important;
            padding: 11px 11px 13px !important;
            border: 1px solid rgba(255,255,255,.84) !important;
            border-radius: 20px !important;
            background: linear-gradient(145deg, rgba(255,255,255,.93) 0%, rgba(255,255,255,.77) 100%) !important;
            box-shadow:
                0 22px 48px rgba(45,22,18,.20),
                0 8px 18px rgba(45,22,18,.10),
                inset 0 1px 0 rgba(255,255,255,.98),
                inset 0 -12px 28px rgba(8,44,80,.035) !important;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
            transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
        }

        body.public-site-mode .category-card::before,
        body.client-menu-compact .category-card::before {
            content: "" !important;
            position: absolute !important;
            z-index: 2 !important;
            inset: 0 0 auto !important;
            width: 100% !important;
            height: 5px !important;
            opacity: 1 !important;
            transform: none !important;
            background: linear-gradient(90deg, var(--alraihan-red) 0 78%, var(--alraihan-green) 78% 100%) !important;
        }

        body.public-site-mode .category-card:hover,
        body.public-site-mode .category-card:focus-visible,
        body.client-menu-compact .category-card:focus-visible,
        body.public-site-mode .category-card.focused,
        body.public-site-mode .item-card.focused,
        body.client-menu-compact .category-card.focused,
        body.client-menu-compact .item-card.focused,
        body.public-site-mode .category-card.public-hover,
        body.public-site-mode .item-card.public-hover {
            border-color: var(--alraihan-red) !important;
            outline: 3px solid rgba(255,255,255,.92) !important;
            outline-offset: 3px !important;
            box-shadow:
                0 0 0 6px rgba(8,44,80,.24),
                0 18px 38px rgba(60,25,20,.24),
                inset 0 1px 0 rgba(255,255,255,1) !important;
            transform: translateY(-3px) scale(1.012) !important;
            filter: none !important;
        }

        body.public-site-mode .category-card img,
        body.public-site-mode .category-card > .category-placeholder,
        body.public-site-mode .category-card > div[id^="cat-placeholder-"],
        body.public-site-mode .category-card > div[style*="height:200px"],
        body.client-menu-compact .category-card img,
        body.client-menu-compact .category-card > .category-placeholder,
        body.client-menu-compact .category-card > div[id^="cat-placeholder-"] {
            width: 100% !important;
            height: auto !important;
            aspect-ratio: 4 / 3 !important;
            max-height: none !important;
            margin: 0 0 10px !important;
            border: 0 !important;
            border-radius: 13px !important;
            object-fit: cover !important;
            object-position: center 42% !important;
            filter: saturate(1.08) contrast(1.02) !important;
            box-shadow: none !important;
        }

        body.public-site-mode .category-card h3,
        body.client-menu-compact .category-card h3 {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 9px !important;
            min-height: 34px !important;
            margin: 0 !important;
            padding: 6px 8px 2px !important;
            color: var(--alraihan-ink) !important;
            font-size: clamp(17px, 1.08vw, 20px) !important;
            font-weight: 800 !important;
            line-height: 1.25 !important;
            text-shadow: none !important;
        }

        body.public-site-mode .category-card h3::before,
        body.client-menu-compact .category-card h3::before {
            content: "";
            width: 9px;
            height: 9px;
            flex: 0 0 9px;
            border-radius: 50% 50% 50% 12%;
            background: var(--alraihan-green);
            transform: rotate(-35deg);
            box-shadow: 0 0 0 4px var(--alraihan-green-soft);
        }

        body.public-site-mode .menu-item-card,
        body.client-menu-compact .menu-item-card {
            overflow: hidden !important;
            border-top: 5px solid var(--alraihan-red) !important;
        }

        body.public-site-mode .menu-item-card img,
        body.client-menu-compact .menu-item-card img {
            filter: saturate(1.08) contrast(1.02) !important;
            border-color: #eee3dd !important;
            box-shadow: none !important;
        }

        .category-card h3,
        .item-info h3,
        .item-price { color: var(--alraihan-ink) !important; text-shadow: none !important; }
        .item-price { color: var(--alraihan-red-dark) !important; }
        .item-info p { color: var(--alraihan-muted) !important; }

        .btn-add,
        button.btn-add {
            border-color: var(--alraihan-red) !important;
            border-radius: 12px !important;
            color: #ffffff !important;
            background: linear-gradient(135deg, #174b79 0%, var(--alraihan-red-dark) 100%) !important;
            box-shadow: 0 8px 20px rgba(177,18,24,.18) !important;
        }

        .btn-add:hover,
        button.btn-add:hover,
        .btn-add:focus-visible,
        button.btn-add:focus-visible {
            background: var(--alraihan-green) !important;
            border-color: var(--alraihan-green) !important;
        }

        .badge.available,
        .status-ready { color: var(--alraihan-green) !important; }

        .language-switcher,
        body.public-site-mode .language-switcher {
            border-color: #ded4cf !important;
            background: #ffffff !important;
        }

        .language-flag-button {
            border-color: transparent !important;
            color: var(--alraihan-ink) !important;
            background: transparent !important;
        }

        .language-flag-button.active {
            border-color: rgba(8,44,80,.32) !important;
            color: var(--alraihan-red-dark) !important;
            background: rgba(8,44,80,.07) !important;
            box-shadow: none !important;
        }

        body.public-site-mode .public-menu-panel,
        body.client-menu-compact .public-menu-panel {
            border-color: var(--alraihan-line) !important;
            background: #ffffff !important;
            box-shadow: 0 18px 46px rgba(70,36,28,.16) !important;
        }

        #content .loading,
        #content .error,
        .alraihan-loading-state,
        .alraihan-empty-state {
            width: min(620px, 100%);
            margin: 0 auto !important;
            padding: clamp(28px, 4vw, 42px) 20px !important;
            box-sizing: border-box;
            border: 1px solid rgba(255,255,255,.80) !important;
            border-radius: 22px !important;
            color: var(--alraihan-ink) !important;
            background: linear-gradient(145deg, rgba(255,255,255,.90), rgba(255,255,255,.68)) !important;
            box-shadow:
                0 24px 54px rgba(43,19,15,.18),
                inset 0 1px 0 rgba(255,255,255,.98),
                inset 0 -1px 0 rgba(255,255,255,.30) !important;
            backdrop-filter: blur(22px) saturate(1.12) !important;
            -webkit-backdrop-filter: blur(22px) saturate(1.12) !important;
            text-align: center !important;
        }

        .alraihan-loading-icon {
            display: grid;
            place-items: center;
            width: 58px;
            height: 58px;
            margin: 0 auto 16px;
            border: 1px solid rgba(8,44,80,.20);
            border-radius: 18px;
            color: var(--alraihan-red-dark);
            background: linear-gradient(145deg, rgba(255,255,255,.95), rgba(255,236,236,.74));
            box-shadow: 0 14px 28px rgba(117,24,24,.14), inset 0 1px 0 rgba(255,255,255,1);
            font-size: 25px;
            animation: alraihanLoadingFloat 1.6s ease-in-out infinite;
        }

        @keyframes alraihanLoadingFloat {
            0%, 100% { transform: translateY(0) rotate(-2deg); }
            50% { transform: translateY(-5px) rotate(2deg); }
        }

        #content [style*="color:#D4A574"],
        #content [style*="color: #D4A574"] {
            color: var(--alraihan-red-dark) !important;
            text-shadow: none !important;
        }

        #content [style*="color:#CD853F"],
        #content [style*="color: #CD853F"] {
            color: var(--alraihan-red) !important;
            text-shadow: none !important;
        }

        #content [style*="color:#B8860B"],
        #content [style*="color: #B8860B"] {
            color: var(--alraihan-muted) !important;
            text-shadow: none !important;
        }

        #content [style*="color:#F2C58A"],
        #content [style*="color: #F2C58A"],
        #content [style*="color:#FFF8DC"],
        #content [style*="color: #FFF8DC"] {
            color: var(--alraihan-ink) !important;
            text-shadow: none !important;
        }

        #content .item-detail-hint {
            border-color: rgba(57,120,61,.22) !important;
            color: var(--alraihan-green) !important;
            background: rgba(234,243,232,.72) !important;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.88) !important;
        }

        #content .quantity-controls {
            border: 1px solid rgba(255,255,255,.82) !important;
            background: rgba(255,255,255,.60) !important;
            box-shadow: 0 8px 18px rgba(47,20,16,.08), inset 0 1px 0 rgba(255,255,255,.96) !important;
            backdrop-filter: blur(12px) !important;
            -webkit-backdrop-filter: blur(12px) !important;
        }

        #content .quantity-minus,
        #content .quantity-plus {
            width: 34px !important;
            height: 34px !important;
            border-radius: 50% !important;
            box-shadow: 0 8px 16px rgba(62,25,20,.14), inset 0 1px 0 rgba(255,255,255,.44) !important;
        }

        #content .quantity-minus {
            border: 1px solid rgba(8,44,80,.22) !important;
            color: var(--alraihan-red-dark) !important;
            background: rgba(255,255,255,.86) !important;
        }

        #content .quantity-plus {
            border: 1px solid var(--alraihan-green) !important;
            color: #ffffff !important;
            background: linear-gradient(145deg, #a17d3c, var(--alraihan-green)) !important;
        }

        #content button[id^="send-item-btn"],
        #content #checkout-btn {
            min-height: 46px !important;
            border: 1px solid rgba(8,44,80,.72) !important;
            border-radius: 13px !important;
            color: #ffffff !important;
            background: linear-gradient(145deg, #174b79, var(--alraihan-red) 58%, var(--alraihan-red-dark)) !important;
            box-shadow: 0 14px 26px rgba(173,19,25,.20), inset 0 1px 0 rgba(255,255,255,.36) !important;
        }

        #content button[id^="send-item-btn"]:disabled,
        #content #checkout-btn:disabled {
            border-color: rgba(116,102,97,.18) !important;
            color: rgba(70,61,57,.48) !important;
            background: rgba(255,255,255,.58) !important;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.76) !important;
            opacity: 1 !important;
        }

        .cart-line-card,
        .cart-summary-panel {
            border: 1px solid rgba(255,255,255,.82) !important;
            border-radius: 19px !important;
            color: var(--alraihan-ink) !important;
            background: linear-gradient(145deg, rgba(255,255,255,.90), rgba(255,255,255,.70)) !important;
            box-shadow: 0 20px 44px rgba(42,19,15,.15), inset 0 1px 0 rgba(255,255,255,.98) !important;
            backdrop-filter: blur(18px) saturate(1.10) !important;
            -webkit-backdrop-filter: blur(18px) saturate(1.10) !important;
        }

        .cart-line-image {
            border: 1px solid rgba(8,44,80,.16) !important;
            filter: saturate(1.08) contrast(1.02) !important;
            box-shadow: 0 10px 22px rgba(50,21,17,.12) !important;
        }

        .cart-summary-panel input,
        .cart-summary-panel textarea,
        .cart-summary-panel select,
        .cart-line-card input,
        .cart-line-card textarea,
        .customer-order-card input {
            border: 1px solid rgba(8,44,80,.14) !important;
            color: var(--alraihan-ink) !important;
            background: rgba(255,255,255,.90) !important;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.94) !important;
        }

        .cart-line-card .cart-item-modifiers {
            border-color: rgba(8,44,80,.12) !important;
            background: rgba(255,255,255,.64) !important;
        }

        .cart-line-card .cart-item-modifiers div,
        .cart-line-card .cart-item-modifiers span,
        .cart-line-card .cart-item-modifiers strong,
        .cart-line-card .cart-item-modifiers label {
            color: #514a47 !important;
        }

        /* The cart was inherited with dark brown restaurant panels.  Keep the
           store checkout on one high-contrast light glass surface. */
        #content [style*="background:rgba(44,24,16"],
        #content [style*="background: rgba(44,24,16"],
        #content [style*="background: rgba(44, 24, 16"],
        #content [style*="background:rgba(18,12,8"],
        #content [style*="background: rgba(18,12,8"],
        #content [style*="background: rgba(18, 12, 8"],
        #content [style*="background:rgba(0,0,0,0.16)"],
        #content [style*="background:rgba(0,0,0,0.18)"],
        #content [style*="background:rgba(0,0,0,0.22)"],
        #content [style*="background: rgba(0, 0, 0"],
        #content [style*="background:rgba(212,165,116"],
        #content [style*="background: rgba(212, 165, 116"],
        #content [style*="background:linear-gradient(135deg, #3D2817"],
        #content [style*="background:linear-gradient(135deg,#3D2817"] {
            border-color: rgba(8,44,80,.14) !important;
            color: var(--alraihan-ink) !important;
            background: rgba(255,255,255,.72) !important;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.94), 0 8px 20px rgba(64,28,23,.06) !important;
        }

        #content button[style*="color:#ffb4b4"],
        #content button[style*="color: #ffb4b4"] {
            border-color: rgba(168,15,22,.34) !important;
            color: var(--alraihan-red-dark) !important;
            background: rgba(255,255,255,.84) !important;
        }

        #content input::placeholder,
        #content textarea::placeholder {
            color: #655d59 !important;
            opacity: 1 !important;
        }

        #content button:disabled {
            color: #4f4946 !important;
            opacity: 1 !important;
        }

        .cart-summary-panel,
        .cart-summary-panel *,
        .cart-line-card,
        .cart-line-card * {
            text-shadow: none !important;
        }

        #fixed-back-bar button[onclick="goBack()"] {
            border: 1px solid rgba(8,44,80,.24) !important;
            color: var(--alraihan-red-dark) !important;
            background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(255,244,243,.78)) !important;
            box-shadow: 0 12px 24px rgba(56,22,18,.14), inset 0 1px 0 rgba(255,255,255,1) !important;
        }

        .customer-orders-view {
            width: min(760px, 100%);
            margin: 0 auto;
            padding: clamp(16px, 2.3vw, 26px);
            box-sizing: border-box;
            border: 1px solid rgba(255,255,255,.74);
            border-radius: 24px;
            color: var(--alraihan-ink);
            background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,255,255,.68));
            box-shadow:
                0 24px 54px rgba(39,18,15,.20),
                inset 0 1px 0 rgba(255,255,255,.98),
                inset 0 -1px 0 rgba(255,255,255,.34);
            backdrop-filter: blur(22px) saturate(1.12);
            -webkit-backdrop-filter: blur(22px) saturate(1.12);
        }

        .customer-orders-view h2,
        .customer-orders-view h3,
        .customer-orders-view [style*="color:#FFF8DC"] {
            color: var(--alraihan-ink) !important;
            text-shadow: none !important;
        }

        .customer-orders-view [style*="color:#D4A574"] {
            color: var(--alraihan-red-dark) !important;
        }

        .customer-orders-view [style*="color:#B8860B"] {
            color: var(--alraihan-muted) !important;
        }

        .customer-orders-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            margin-bottom: 18px;
        }

        .customer-orders-refresh {
            min-height: 42px;
            padding: 9px 14px !important;
            border: 1px solid rgba(8,44,80,.22) !important;
            border-radius: 13px !important;
            color: var(--alraihan-red-dark) !important;
            background: rgba(255,255,255,.70) !important;
            box-shadow: 0 8px 18px rgba(104,31,27,.10), inset 0 1px 0 rgba(255,255,255,.92) !important;
        }

        .customer-orders-empty {
            padding: 18px !important;
            border: 1px solid rgba(255,255,255,.86) !important;
            border-radius: 16px !important;
            color: var(--alraihan-muted) !important;
            background: rgba(255,255,255,.58) !important;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.90), 0 10px 24px rgba(50,22,17,.08) !important;
            text-align: center !important;
        }

        .customer-order-card {
            border: 1px solid rgba(255,255,255,.86) !important;
            border-inline-start: 5px solid var(--alraihan-red) !important;
            border-radius: 18px !important;
            color: var(--alraihan-ink) !important;
            background: linear-gradient(145deg, rgba(255,255,255,.90), rgba(255,255,255,.70)) !important;
            box-shadow: 0 18px 38px rgba(48,21,17,.13), inset 0 1px 0 rgba(255,255,255,.96) !important;
            backdrop-filter: blur(16px) !important;
            -webkit-backdrop-filter: blur(16px) !important;
        }

        .customer-order-card [style*="background:rgba(212,165,116,0.08)"],
        .customer-order-card [style*="background:rgba(0,0,0,0.18)"],
        .customer-order-card [style*="background:rgba(0,0,0,0.22)"] {
            background: rgba(255,255,255,.60) !important;
            border-color: rgba(8,44,80,.12) !important;
        }

        body.client-menu-compact #fixed-back-bar {
            background: rgba(255,255,255,.97) !important;
            border-top: 3px solid var(--alraihan-red) !important;
            box-shadow: 0 -10px 28px rgba(67,34,25,.12) !important;
        }

        @media (min-width: 721px) {
            body.public-site-mode .categories {
                grid-template-columns: repeat(auto-fit, minmax(270px, 350px)) !important;
            }

            body.public-site-mode .categories > .category-card {
                width: 100% !important;
                max-width: 350px !important;
            }
        }

        @media (max-width: 720px) {
            .header,
            body.public-site-mode .header,
            body.client-menu-compact .header {
                background: rgba(255,255,255,.96) !important;
                box-shadow: 0 6px 18px rgba(68,38,29,.13) !important;
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
            }

            body.public-site-mode #content,
            body.client-menu-compact #content {
                width: calc(100% - 16px) !important;
                min-height: calc(100vh - 118px) !important;
                margin: 12px auto 26px !important;
                padding: 18px 8px 26px !important;
                border-radius: 22px !important;
                background: rgba(255,255,255,.22) !important;
                box-shadow: 0 16px 38px rgba(21,12,10,.22), inset 0 1px 0 rgba(255,255,255,.70) !important;
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
            }

            .customer-orders-view {
                padding: 15px 12px;
                border-radius: 19px;
            }

            .customer-orders-header {
                align-items: flex-start;
                flex-wrap: wrap;
            }

            body.public-site-mode #content::before,
            body.client-menu-compact #content::before {
                top: 15px;
                width: calc(100% - 24px);
                height: 7px;
            }

            body.public-site-mode .categories,
            body.client-menu-compact .categories {
                width: min(100%, 440px) !important;
                grid-template-columns: minmax(0, 1fr) !important;
                padding-inline: 12px !important;
            }

            body.public-site-mode .category-card,
            body.client-menu-compact .category-card {
                width: 100% !important;
                max-width: 416px !important;
                margin-inline: auto !important;
                box-shadow: 0 10px 24px rgba(45,22,18,.16) !important;
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
                transform: none;
                content-visibility: auto;
                contain: layout paint style;
                contain-intrinsic-size: 360px 420px;
            }

            body.public-site-mode .item-card,
            body.client-menu-compact .item-card {
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
                content-visibility: auto;
                contain: layout paint style;
                contain-intrinsic-size: 360px 480px;
            }

            body.public-site-mode .category-card img,
            body.client-menu-compact .category-card img,
            body.public-site-mode .item-card img,
            body.client-menu-compact .item-card img {
                filter: none !important;
            }

            #fixed-back-bar {
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
            }
        }

        @media (max-width: 640px) {
            body.public-site-mode .header > div,
            body.client-menu-compact .header > div {
                grid-template-columns: 52px minmax(0, 1fr) !important;
                column-gap: 12px !important;
            }

            body.public-site-mode #public-brand-link,
            body.client-menu-compact #public-brand-link {
                width: 52px !important;
                min-width: 52px !important;
                max-width: 52px !important;
                gap: 0 !important;
                overflow: visible !important;
                isolation: isolate;
            }

            body.public-site-mode #header-logo,
            body.client-menu-compact #header-logo,
            body.public-site-mode #header-logo-fallback,
            body.client-menu-compact #header-logo-fallback {
                width: 45px !important;
                height: 45px !important;
                max-width: 45px !important;
                max-height: 45px !important;
                box-sizing: border-box !important;
            }

            body.public-site-mode #header-brand-copy,
            body.client-menu-compact #header-brand-copy {
                display: none !important;
            }

            body.public-site-mode #public-nav-actions,
            body.client-menu-compact #public-nav-actions {
                grid-template-columns: minmax(104px, 150px) 58px !important;
                justify-content: start !important;
                align-items: stretch !important;
                gap: 8px !important;
                min-width: 0 !important;
                position: relative !important;
                z-index: 2;
            }

            body.public-site-mode #cart-button,
            body.client-menu-compact #cart-button {
                grid-column: 1 !important;
                width: 100% !important;
                max-width: 150px !important;
            }

            body.public-site-mode #public-menu-toggle,
            body.client-menu-compact #public-menu-toggle {
                grid-column: 2 !important;
                width: 58px !important;
                min-width: 58px !important;
                max-width: 58px !important;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            body.public-site-mode .category-card,
            body.client-menu-compact .category-card {
                transition: none !important;
            }

            .alraihan-loading-icon {
                animation: none !important;
            }
        }

        body.has-venue-background #content,
        body.has-venue-background #item-ratings-block {
            border-color: transparent !important;
            background: transparent !important;
            box-shadow: none !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }

        :focus-visible { outline: 3px solid #ffd54a !important; outline-offset: 2px !important; }

        .kiosk-toolbar,
        .kiosk-payment-layer {
            display: none;
        }
        body.kiosk-mode {
            --kiosk-accent: #ef3340;
            min-height: 100dvh;
            font-family: Arial, Helvetica, sans-serif;
        }
        body.kiosk-mode .kiosk-toolbar {
            position: fixed;
            inset: 0 0 auto;
            z-index: 2200;
            min-height: 70px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            padding: 10px clamp(12px, 2.5vw, 30px);
            background: rgba(15, 23, 42, .98);
            border-bottom: 1px solid rgba(255,255,255,.16);
            box-shadow: 0 10px 30px rgba(0,0,0,.26);
            color: #fff;
        }
        .kiosk-toolbar-copy {
            min-width: 0;
            display: grid;
            gap: 3px;
        }
        .kiosk-toolbar-copy strong {
            font-size: clamp(18px, 2.2vw, 28px);
            overflow-wrap: anywhere;
        }
        .kiosk-toolbar-copy span {
            color: #cbd5e1;
            font-size: clamp(12px, 1.25vw, 15px);
        }
        .kiosk-toolbar-actions {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }
        .kiosk-toolbar-action {
            position: relative;
            min-height: 46px;
            padding: 10px 18px;
            border-radius: 13px;
            border: 1px solid rgba(255,255,255,.24);
            background: rgba(255,255,255,.08);
            color: #fff;
            font: 700 15px/1.2 Arial, Helvetica, sans-serif;
            text-decoration: none;
            cursor: pointer;
        }
        .kiosk-cart-badge {
            display: none;
            min-width: 22px;
            height: 22px;
            padding: 0 6px;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            color: #111827;
            background: #facc15;
            font-size: 12px;
            font-weight: 700;
            line-height: 22px;
        }
        #kiosk-cart-action.has-items {
            border-color: rgba(250,204,21,.7);
            box-shadow: 0 0 0 2px rgba(250,204,21,.12);
        }
        .kiosk-toolbar-action.primary {
            color: #fff;
            border-color: rgba(239,51,64,.65);
            background: linear-gradient(135deg, #ef3340, #c81e2b);
        }
        body.kiosk-mode .desktop-window-controls,
        body.kiosk-mode .desktop-minimized-bar,
        body.kiosk-mode #public-menu-toggle,
        body.kiosk-mode #public-menu-panel,
        body.kiosk-mode #orders-button,
        body.kiosk-mode #site-primary-auth-button {
            display: none !important;
        }
        body.kiosk-mode.public-authenticated #kiosk-login-action {
            display: none !important;
        }
        body.kiosk-mode .header {
            top: 70px !important;
        }
        body.kiosk-mode .container {
            width: min(1180px, 100%);
            max-width: 1180px;
            min-height: 100dvh;
        }
        body.kiosk-mode #content {
            padding-top: 174px !important;
        }
        body.kiosk-mode .cart-summary-panel {
            font-size: 1.08rem;
        }
        .kiosk-order-name-field {
            display: grid;
            gap: 7px;
            margin-bottom: 12px;
            padding: 14px;
            border-radius: 14px;
            border: 2px solid rgba(239,51,64,.55);
            background: rgba(255,255,255,.08);
            color: #fff8dc;
        }
        .kiosk-order-name-field > span {
            font-size: 16px;
            font-weight: 700;
        }
        .kiosk-order-name-field input {
            min-height: 54px;
            width: 100%;
            border: 2px solid rgba(255,255,255,.42);
            border-radius: 11px;
            background: #fff;
            color: #111827;
            padding: 10px 13px;
            font: 700 20px/1.2 Arial, Helvetica, sans-serif;
        }
        .kiosk-order-name-field small {
            color: #f8d3d6;
            line-height: 1.4;
        }
        body.kiosk-mode .kiosk-payment-layer:not([hidden]) {
            position: fixed;
            inset: 0;
            z-index: 5000;
            display: grid;
            place-items: center;
            padding: 24px;
            background: rgba(2, 6, 23, .92);
        }
        .kiosk-payment-card {
            width: min(560px, 100%);
            max-height: calc(100dvh - 48px);
            overflow: auto;
            padding: clamp(20px, 4vw, 36px);
            border-radius: 26px;
            border: 1px solid rgba(255,255,255,.2);
            background: linear-gradient(160deg, #1f2937, #0f172a);
            box-shadow: 0 30px 90px rgba(0,0,0,.55);
            color: #fff;
            text-align: center;
            font-family: Arial, Helvetica, sans-serif;
        }
        .kiosk-payment-card h2 {
            margin: 0 0 10px;
            font-size: clamp(26px, 5vw, 38px);
        }
        .kiosk-payment-card p {
            color: #cbd5e1;
            font-size: 17px;
            line-height: 1.45;
        }
        .kiosk-payment-amount {
            margin: 18px 0;
            color: #86efac;
            font-size: clamp(34px, 8vw, 58px);
            font-weight: 700;
        }
        .kiosk-payment-progress {
            height: 16px;
            overflow: hidden;
            border-radius: 999px;
            background: rgba(255,255,255,.12);
        }
        .kiosk-payment-progress > span {
            display: block;
            width: 0;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, #22c55e, #86efac);
            transition: width .25s ease;
        }
        .kiosk-payment-qr {
            display: block;
            width: min(300px, 76vw);
            height: auto;
            margin: 18px auto;
            padding: 12px;
            border-radius: 20px;
            background: #fff;
        }
        .kiosk-payment-actions {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
            margin-top: 22px;
        }
        .kiosk-payment-actions button {
            min-height: 54px;
            border: 1px solid rgba(255,255,255,.24);
            border-radius: 13px;
            background: rgba(255,255,255,.09);
            color: #fff;
            font: 700 16px/1.2 Arial, Helvetica, sans-serif;
            cursor: pointer;
        }
        @media (max-width: 700px) {
            body.kiosk-mode .kiosk-toolbar {
                align-items: flex-start;
            }
            .kiosk-toolbar-copy span {
                display: none;
            }
            .kiosk-toolbar-action {
                min-height: 42px;
                padding: 9px 11px;
                font-size: 13px;
            }
            .kiosk-payment-actions {
                grid-template-columns: 1fr;
            }
        }