html, body {
            height: 100%;
            overflow: hidden;
        }
        body {
            font-family: 'Tajawal', sans-serif;
            background-color: #f8fafc;
            color: #333;
            -webkit-tap-highlight-color: transparent;
            direction: rtl;
            overscroll-behavior: none;
        }
        /* الحاوية الوسطى التي تتمرر بين الهيدر والـ bottom-nav */
        #app-scroll {
            position: fixed;
            top: var(--app-header-h, 76px);
            bottom: var(--app-nav-h, 86px);
            left: 0; right: 0;
            overflow-y: auto;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
        }
        #app-scroll.locked { overflow: hidden; touch-action: none; }
        /* الهيدر مثبّت فوق منطقة السكرول */
        .top-bar { position: fixed !important; top: 0; left: 0; right: 0; }

        .page { display: none; }
        .page.active { display: block; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        .chat-bg {
          background-color: #f0f7f1;
          background-image:
            radial-gradient(circle at 20% 10%, rgba(0,184,148,0.06) 0%, transparent 35%),
            radial-gradient(circle at 80% 85%, rgba(74,176,79,0.07) 0%, transparent 40%),
            url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%234AB04F' fill-opacity='0.05'%3E%3Cpath d='M60 60c0-15 10-25 25-25s25 10 25 25-10 25-25 25-25-10-25-25z M25 25c0-10 5-15 15-15s15 5 15 15-5 15-15 15-15-5-15-15z'/%3E%3Ccircle cx='95' cy='95' r='6'/%3E%3Ccircle cx='15' cy='90' r='4'/%3E%3C/g%3E%3C/svg%3E");
          background-size: auto, auto, 180px 180px;
        }
        
        @keyframes pulse-red {
          0% { opacity: 1; }
          50% { opacity: 0.5; }
          100% { opacity: 1; }
        }
        .animate-record { animation: pulse-red 1.5s infinite; }

        .ai-header { background: linear-gradient(135deg, #00B894 0%, #00a884 100%); padding: 12px 20px; color: #fff; font-weight: bold; }
        @keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
        .otp-box:not(:placeholder-shown) { background: #ecfdf5; border-color: #10b981; }
        .chat-messages { overflow-y: auto; padding: 15px; background: #fdfdfd; font-size: 0.9rem; scroll-behavior: smooth; direction: rtl; }
        .message { margin-bottom: 8px; width: fit-content; max-width: 85%; padding: 8px 12px; border-radius: 15px; position: relative; word-wrap: break-word; }
        .message.bot { background: #f1f5f9; color: #333; border-bottom-right-radius: 4px; margin-right: 0; }
        .message.user { background: #00B894; color: #fff; border-bottom-left-radius: 4px; margin-right: auto; }
        
        .icon-btn {
            width: 40px; height: 40px;
            display: flex; align-items: center; justify-content: center;
            border-radius: 12px;
            transition: all 0.2s;
            color: #64748b;
        }
        .icon-btn:active { transform: scale(0.95); background: #f1f5f9; }
        .icon-btn.recording { color: #ef4444; animation: pulse 1.5s infinite; }
        @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }

        /* Grid */
        .product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
        @media (min-width: 768px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }
        
        .fv-container { background: #fff; border-radius: 20px; padding: 15px; text-align: center; border: 1px solid #f1f5f9; position: relative; transition: transform 0.2s; }
        .fv-container:active { transform: scale(0.98); }
        .fv-main-img { width: 80px; height: 80px; object-fit: contain; margin: 0 auto 10px; }
        .fv-add-button { margin-top: 10px; background: #00B894; color: #fff; padding: 8px; border-radius: 12px; font-weight: bold; font-size: 0.85rem; cursor: pointer; }

        /* Modal Custom */
        #overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 2100; backdrop-filter: blur(4px); display: none; }
        .modal-custom {
            position: fixed; bottom: 0; left: 0; right: 0; background: #fff;
            border-radius: 30px 30px 0 0; z-index: 2200; padding: 20px;
            max-height: 90vh; overflow-y: auto; display: none;
            animation: slideUp 0.3s ease-out;
            box-shadow: 0 -10px 40px rgba(0,0,0,0.1);
            direction: rtl;
        }
        #order-review-modal {
            top: 0;
            max-height: 100vh;
            height: 100%;
            border-radius: 0;
        }
        @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

        /* Cart Drawer */
        #cart-drawer {
            position: fixed; top: 0; left: 0; right: auto; width: 85%; max-width: 400px; height: 100%;
            background: #fff; z-index: 2200; transform: translateX(-100%);
            transition: transform 0.3s ease-in-out; display: flex; flex-direction: column;
            direction: rtl;
        }
        #cart-drawer.open { transform: translateX(0); box-shadow: 5px 0 30px rgba(0,0,0,0.15); }

        .btn-toggle { padding: 10px; border-radius: 15px; border: 1px solid #e2e8f0; font-weight: 600; font-size: 0.9rem; flex: 1; text-align: center; cursor: pointer; transition: all 0.2s; }
        .btn-toggle.active { background: #00B894; color: #fff; border-color: #00B894; box-shadow: 0 4px 12px rgba(0, 184, 148, 0.2); }
        
        .spec-btn { padding: 8px 16px; border-radius: 12px; border: 1px solid #e2e8f0; font-size: 0.9rem; cursor: pointer; font-weight: 500; transition: all 0.2s; text-align: center; }
        .spec-btn.active { background: #e6fffa; border-color: #00B894; color: #00B894; font-weight: 700; }

        .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; display: flex; justify-content: space-around; padding: 12px 0 20px; border-top: 1px solid #f1f5f9; z-index: 1000; box-shadow: 0 -5px 20px rgba(0,0,0,0.02); }
        .nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #94a3b8; font-size: 0.75rem; font-weight: 600; background: none; border: none; }
        .nav-item.active { color: #00B894; }
        
        /* Suggestions in Chat */
        .chat-suggestion-container { display: flex; overflow-x: auto; gap: 10px; padding: 10px 0; width: 100%; }
        .chat-suggestion-card { min-width: 120px; background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 10px; text-align: center; cursor: pointer; }
        .chat-suggestion-card img { width: 50px; height: 50px; object-fit: contain; margin: 0 auto 5px; }

        /* Hide Scrollbar */
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

        /* AI Chat Popup */
        #ai-chat-popup {
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
            transform-origin: bottom right;
        }
        
        .ai-header { background: #075E54; color: #fff; }
        
        .message.user {
            background-color: #dcf8c6;
            margin-left: auto;
            border-bottom-right-radius: 0;
            color: #000;
        }
        
        .message.bot {
            background-color: #ffffff;
            margin-right: auto;
            border-bottom-left-radius: 0;
        }

        #ai-chat-popup.active {
            transform: scale(1);
            opacity: 1;
            pointer-events: auto;
        }

        /* Map Simulator */
        #map-wrapper {
            width: 100%; height: 250px; background: #e2e8f0; border-radius: 20px;
            position: relative; overflow: hidden; margin-bottom: 15px;
        }
        #map-container { width: 100%; height: 100%; }
        .map-pin {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -100%);
            color: #ef4444; font-size: 32px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
            z-index: 10; pointer-events: none;
        }

        /* Address Item */
        .address-item { border: 2px solid #f1f5f9; padding: 12px 15px; border-radius: 20px; transition: all 0.2s; display: flex; align-items: center; }
        .address-item.selected { border-color: #00B894; background: #e6fffa; }

        /* Splash Screen Styles */
        #splash-screen {
            position: fixed;
            inset: 0;
            background-color: #ffffff;
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            perspective: 1000px;
            transition: opacity 0.8s ease, visibility 0.8s ease;
        }

        .splash-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
        }

        .artistic-bg {
            position: absolute;
            width: 300px;
            height: 300px;
            z-index: -1;
        }

        .floating-icon {
            position: absolute;
            fill: none;
            stroke: #4caf50;
            stroke-width: 1.2;
            opacity: 0;
            animation: iconAppears 2s forwards ease-out;
        }

        .logo-wrap {
            position: relative;
            opacity: 0;
            transform: scale(0.8) translateY(20px);
            animation: logoEnter 1.2s forwards 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .main-text {
            font-size: 6rem;
            font-weight: 800;
            color: #121212;
            letter-spacing: -2px;
            line-height: 1;
        }

        .fatha {
            position: absolute;
            top: 15px;
            right: 8%;
            width: 30px;
            height: 7px;
            background-color: #4caf50;
            transform: rotate(-18deg);
            border-radius: 4px;
        }

        .sukoon {
            position: absolute;
            top: 12px;
            right: 46%;
            width: 18px;
            height: 18px;
            border: 4px solid #4caf50;
            border-radius: 50%;
        }

        .loader {
            margin-top: 60px;
            width: 40px;
            height: 4px;
            background: #f0f0f0;
            border-radius: 10px;
            overflow: hidden;
            opacity: 0;
            animation: fadeIn 0.5s forwards 1.5s;
        }

        .loader-bar {
            width: 40%;
            height: 100%;
            background: #4caf50;
            border-radius: 10px;
            animation: loadingMove 2s infinite ease-in-out;
        }

        @keyframes logoEnter { to { opacity: 1; transform: scale(1) translateY(0); } }
        @keyframes iconAppears { 0% { opacity: 0; transform: scale(0.5) rotate(0deg); } 50% { opacity: 0.15; } 100% { opacity: 0.1; transform: scale(1.2) rotate(15deg); } }
        @keyframes loadingMove { 0% { transform: translateX(150%); } 100% { transform: translateX(-150%); } }
        
        .i1 { top: -20px; right: -40px; width: 40px; animation-delay: 0.5s; }
        .i2 { bottom: -10px; left: -50px; width: 35px; animation-delay: 0.7s; }
        .i3 { top: 50px; left: -60px; width: 30px; animation-delay: 0.9s; }

        /* Checkout Specific Styles */
        .payment-method-card, .delivery-option-card {
            border: 2px solid #f1f5f9; padding: 12px; border-radius: 18px;
            display: flex; align-items: center; gap: 10px; cursor: pointer; transition: all 0.2s;
        }
        .payment-method-card.selected, .delivery-option-card.selected { border-color: #00B894; background: #e6fffa; }

        .tip-btn {
            border: 1px solid #e2e8f0; padding: 10px; border-radius: 14px; font-weight: bold; font-size: 0.85rem; transition: all 0.2s; background: white;
        }
        .tip-btn.selected { background: #00B894; color: #fff; border-color: #00B894; }

        /* Toggle Switch */
        .switch { position: relative; display: inline-block; width: 44px; height: 24px; }
        .switch input { opacity: 0; width: 0; height: 0; }
        .slider { position: absolute; cursor: pointer; inset: 0; background-color: #ccc; transition: .4s; border-radius: 24px; }
        .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
        input:checked + .slider { background-color: #00B894; }
        input:checked + .slider:before { transform: translateX(20px); }

        .btn-main { background: #00B894; color: #fff; width: 100%; padding: 16px; border-radius: 20px; font-weight: 800; font-size: 1.1rem; box-shadow: 0 10px 20px rgba(0, 184, 148, 0.2); }
        .btn-main:active { transform: scale(0.98); }
        
        .icon-circle {
            width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 10px;
        }
        
        #checkout-modal {
            top: 0;
            max-height: 100vh;
            height: 100%;
            border-radius: 0;
        }

        /* Tracking Ring Animation */
        .status-ring {
            position: relative; width: 56px; height: 56px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center; background: #fff;
        }
        .status-ring::before {
            content: ''; position: absolute; inset: -4px; border-radius: 50%;
            background: conic-gradient(#00B894 80%, #f1f5f9 0);
            animation: spin 2s linear infinite;
            z-index: -1;
        }
        @keyframes spin { 100% { transform: rotate(360deg); } }
        
        .status-ring.preparing::before { background: conic-gradient(#ef4444 70%, #fee2e2 0); }
        .status-ring.shipping::before { background: conic-gradient(#f59e0b 80%, #fef3c7 0); }
        .status-ring.delivered::before { background: conic-gradient(#10b981 100%, #d1fae5 0); animation: none; }

        /* Custom Scroll for best sellers */
        .horizontal-scroll { display: flex; overflow-x: auto; gap: 12px; padding: 10px 0; scrollbar-width: none; }
        .horizontal-scroll::-webkit-scrollbar { display: none; }
        
        .best-seller-card { min-width: 140px; background: #fff; border-radius: 18px; padding: 12px; border: 1px solid #edf2f7; text-align: center; }

        #order-details-modal {
            top: 0;
            max-height: 100vh;
            height: 100%;
            border-radius: 0;
            background: #f8fafc;
            padding: 0;
            z-index: 2260;
        }

        /* Chat Image Grid */
        .chat-img-grid {
            display: grid;
            gap: 2px;
            border-radius: 12px;
            overflow: hidden;
            width: 100%;
            max-width: 280px;
        }
        .chat-img-grid div { position: relative; width: 100%; height: 100%; }
        .chat-img-grid img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; display: block; }
        
        .chat-img-grid[data-count="1"] { grid-template-columns: 1fr; }
        .chat-img-grid[data-count="2"] { grid-template-columns: 1fr 1fr; aspect-ratio: 2/1; }
        .chat-img-grid[data-count="3"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 1/1; }
        .chat-img-grid[data-count="3"] div:first-child { grid-row: span 2; }
        .chat-img-grid[data-count="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 1/1; }
        .chat-img-grid[data-count="more"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 1/1; }
        
        .more-overlay::after {
            content: attr(data-more);
            position: absolute;
            inset: 0;
            background: rgba(0,0,0,0.5);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            font-weight: bold;
            pointer-events: none;
        }

        /* AI FAB New Style */
        .ai-fab-btn {
            background: linear-gradient(#F1F5F9, #F1F5F9) padding-box,
                        conic-gradient(from 0deg, #4AB04F, #00B894, #F58220, #4AB04F) border-box;
            border: 3px solid transparent;
            border-radius: 50%;
            position: relative;
            z-index: 1001;
            transition: transform 0.3s ease;
            padding: 0;
            overflow: hidden;
        }
        .ai-fab-btn:hover { transform: scale(1.1); }
        
        .ai-tooltip {
            position: fixed;
            bottom: 175px;
            right: 20px;
            background: white;
            padding: 15px;
            border-radius: 20px;
            border-bottom-right-radius: 4px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            max-width: 260px;
            font-size: 0.85rem;
            color: #333;
            z-index: 1002;
            display: none;
            border: 1px solid #e2e8f0;
            animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }
        .ai-tooltip::after {
            content: '';
            position: absolute;
            bottom: -8px;
            right: 20px;
            width: 0;
            height: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-top: 8px solid white;
        }
        @keyframes bounceIn {
            0% { opacity: 0; transform: scale(0.5) translateY(20px); }
            100% { opacity: 1; transform: scale(1) translateY(0); }
        }