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

        :root {
            --primary-red: #E53935;
            --primary-orange: #FF7043;
            --accent-yellow: #FFB300;
            --background-cream: #FFF8E1;
            --text-dark: #2E2E2E;
            --text-gray: #666;
            --green: #2E7D32;
            --card-bg: #FFFFFF;
            --border-light: #E0E0E0;
            --shadow: 0 8px 32px rgba(0,0,0,0.1);
            --radius: 15px;
            --font-main: 'Inter', system-ui, sans-serif;
            --font-arabic: 'Cairo', 'Inter', system-ui, sans-serif;
        }

        [dir="rtl"] {
            font-family: var(--font-arabic);
        }

        body {
            font-family: var(--font-main);
            background: linear-gradient(135deg, var(--background-cream) 0%, #FFFDE7 100%);
            color: var(--text-dark);
            min-height: 100vh;
            padding-top: 80px;
            transition: all 0.3s ease;
        }

        /* RTL Support */
        [dir="rtl"] .sticky-cart {
            direction: rtl;
        }

        [dir="rtl"] .sticky-cart-left {
            order: 2;
        }

        [dir="rtl"] .sticky-cart-right {
            order: 1;
        }

        [dir="rtl"] .dish-card {
            flex-direction: row-reverse;
        }

        [dir="rtl"] .cart-drawer {
            right: auto;
            left: -100%;
        }

        [dir="rtl"] .cart-drawer.active {
            left: 0;
            right: auto;
        }

        [dir="rtl"] .banner-image {
            right: auto;
            left: 2rem;
        }

        /* Sticky Cart Bar */
        .sticky-cart {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: linear-gradient(135deg, var(--primary-red) 0%, #D32F2F 100%);
            color: white;
            padding: 1rem;
            z-index: 9999;
            box-shadow: 0 2px 8px rgba(229, 57, 53, 0.3);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .sticky-cart-left {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .logo-mini {
            width: 40px;
            height: 40px;
            background: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: var(--primary-red);
            font-size: 1rem;
        }

        .brand-mini h1 {
            font-size: 1.2rem;
            font-weight: 700;
        }

        .sticky-cart-right {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .language-toggle {
            background: rgba(255,255,255,0.2);
            border: 2px solid rgba(255,255,255,0.3);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
            font-size: 0.9rem;
        }

        .language-toggle:hover {
            background: rgba(255,255,255,0.3);
            transform: translateY(-1px);
        }

        .cart-btn {
            background: var(--accent-yellow);
            color: var(--text-dark);
            border: none;
            padding: 0.75rem 1.5rem;
            border-radius: 25px;
            cursor: pointer;
            font-weight: 700;
            font-size: 1rem;
            position: relative;
            transition: all 0.3s ease;
        }

        .cart-btn:hover {
            background: #FFA000;
            transform: translateY(-1px);
        }

        .cart-count {
            position: absolute;
            top: -8px;
            right: -8px;
            background: var(--primary-red);
            color: white;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            font-weight: bold;
        }

        [dir="rtl"] .cart-count {
            right: auto;
            left: -8px;
        }

        /* Header */
        .header {
            background: linear-gradient(135deg, var(--primary-red) 0%, #D32F2F 100%);
            color: white;
            padding: 2rem 1rem;
            box-shadow: 0 4px 12px rgba(229, 57, 53, 0.3);
        }

        .header-content {
            max-width: 1200px;
            margin: 0 auto;
            text-align: center;
        }

        .main-logo {
            width: 80px;
            height: 80px;
            background: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            color: var(--primary-red);
            font-weight: bold;
            margin: 0 auto 1rem;
        }

        .header-content h1 {
            font-size: 2.5rem;
            margin-bottom: 0.5rem;
            font-weight: 700;
        }

        [dir="rtl"] .header-content h1 {
            font-family: var(--font-arabic);
        }

        .header-content p {
            font-size: 1.2rem;
            opacity: 0.95;
            font-weight: 500;
        }

        [dir="rtl"] .header-content p {
            font-family: var(--font-arabic);
        }

        .social-icons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            margin-top: 1.5rem;
        }

        .social-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            color: white;
            font-size: 1.5rem;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }

        .social-icon.facebook { background: #1877F2; }
        .social-icon.instagram { background: linear-gradient(45deg, #E4405F, #FCAF45); }
        .social-icon.tiktok { background: #000000; }
        .social-icon.snapchat { background: #FFFC00; color: black; }
        .social-icon.youtube { background: #FF0000; }
        .social-icon.pinterest { background: #BD081C; }

        .social-icon:hover {
            transform: translateY(-3px) scale(1.1);
            box-shadow: 0 6px 20px rgba(0,0,0,0.3);
        }

        /* Shop from Egypt Button */
        .shop-egypt-btn {
            background: linear-gradient(135deg, var(--green) 0%, #388E3C 100%);
            color: white;
            text-align: center;
            padding: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(46, 125, 50, 0.3);
            margin-bottom: 2rem;
            text-decoration: none;
            display: block;
        }

        .shop-egypt-btn:hover {
            background: linear-gradient(135deg, #388E3C 0%, #43A047 100%);
            transform: translateY(-1px);
        }

        .shop-egypt-btn .status-badge {
            background: var(--accent-yellow);
            color: var(--text-dark);
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: bold;
            margin-left: 1rem;
        }

        [dir="rtl"] .shop-egypt-btn .status-badge {
            margin-left: 0;
            margin-right: 1rem;
        }

        /* Banner */
        .banner {
            max-width: 800px;
            margin: 0 auto 2rem;
            background: linear-gradient(135deg, var(--primary-red) 0%, #FF5722 100%);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 8px 32px rgba(229, 57, 53, 0.3);
            position: relative;
            min-height: 180px;
            display: flex;
            align-items: center;
            padding: 2rem;
            margin: 0 1rem 2rem;
        }

        .banner-content {
            flex: 1;
            color: white;
            z-index: 2;
        }

        .banner-content h2 {
            font-size: 2rem;
            margin-bottom: 1rem;
            font-weight: 800;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        [dir="rtl"] .banner-content h2 {
            font-family: var(--font-arabic);
        }

        .banner-content p {
            font-size: 1.1rem;
            opacity: 0.95;
            font-weight: 500;
        }

        [dir="rtl"] .banner-content p {
            font-family: var(--font-arabic);
        }

        .banner-image {
            position: absolute;
            top: 50%;
            right: 2rem;
            transform: translateY(-50%);
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 6px 20px rgba(0,0,0,0.2);
            overflow: hidden;
        }

        .banner-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Controls */
        .controls {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1rem;
        }

        .categories {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 1rem;
            justify-content: center;
        }

        .category-btn {
            background: white;
            border: 2px solid var(--border-light);
            padding: 0.75rem 1.25rem;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--text-dark);
        }

        [dir="rtl"] .category-btn {
            font-family: var(--font-arabic);
        }

        .category-btn:hover {
            border-color: var(--primary-red);
            background: rgba(229, 57, 53, 0.1);
            transform: translateY(-2px);
        }

        .category-btn.active {
            background: var(--primary-red);
            color: white;
            border-color: var(--primary-red);
        }

        .day-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 1rem;
            justify-content: center;
        }

        .day-btn {
            background: white;
            border: 2px solid var(--border-light);
            padding: 0.5rem 1rem;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 500;
            font-size: 0.9rem;
        }

        [dir="rtl"] .day-btn {
            font-family: var(--font-arabic);
        }

        .day-btn:hover {
            border-color: var(--accent-yellow);
            background: rgba(255, 179, 0, 0.1);
        }

        .day-btn.active {
            background: var(--accent-yellow);
            color: var(--text-dark);
            border-color: var(--accent-yellow);
        }

        .search-container {
            margin-bottom: 2rem;
            display: flex;
            justify-content: center;
        }

        .search-box {
            width: 100%;
            max-width: 350px;
            padding: 0.75rem 1rem;
            border: 2px solid var(--border-light);
            border-radius: 20px;
            font-size: 1rem;
            outline: none;
            transition: all 0.3s ease;
        }

        [dir="rtl"] .search-box {
            font-family: var(--font-arabic);
        }

        .search-box:focus {
            border-color: var(--primary-red);
            box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.1);
        }

        /* Menu Grid */
        .menu-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1rem 2rem;
        }

        .menu-grid {
            display: grid;
            gap: 1.5rem;
            grid-template-columns: 1fr;
        }

        .dish-card {
            background: white;
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: all 0.3s ease;
            display: flex;
            align-items: stretch;
            min-height: 150px;
        }

        .dish-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }

        .dish-image {
            width: 200px;
            min-width: 200px;
            position: relative;
            background: #f5f5f5;
        }

        .dish-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .deal-badge {
            position: absolute;
            top: 10px;
            left: 10px;
            background: var(--primary-red);
            color: white;
            padding: 0.25rem 0.75rem;
            border-radius: 15px;
            font-size: 0.8rem;
            font-weight: bold;
        }

        [dir="rtl"] .deal-badge {
            left: auto;
            right: 10px;
        }

        .orders-count {
            position: absolute;
            top: 10px;
            right: 10px;
            background: rgba(0,0,0,0.7);
            color: white;
            padding: 0.25rem 0.5rem;
            border-radius: 10px;
            font-size: 0.7rem;
        }

        [dir="rtl"] .orders-count {
            right: auto;
            left: 10px;
        }

        .dish-content {
            flex: 1;
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .dish-info {
            margin-bottom: 1rem;
        }

        .dish-title {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            color: var(--text-dark);
        }

        [dir="rtl"] .dish-title {
            font-family: var(--font-arabic);
        }

        .dish-title-ar {
            font-size: 1rem;
            color: var(--text-gray);
            margin-bottom: 0.5rem;
            font-family: var(--font-arabic);
        }

        .availability {
            font-size: 0.9rem;
            color: var(--green);
            margin-bottom: 0.5rem;
        }

        [dir="rtl"] .availability {
            font-family: var(--font-arabic);
        }

        .comes-with {
            font-size: 0.9rem;
            color: var(--text-gray);
            margin-bottom: 1rem;
            font-style: italic;
        }

        [dir="rtl"] .comes-with {
            font-family: var(--font-arabic);
            font-style: normal;
        }

        .not-available {
            color: var(--primary-red);
            font-weight: 600;
            margin-bottom: 1rem;
        }

        [dir="rtl"] .not-available {
            font-family: var(--font-arabic);
        }

        .dish-controls {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            align-items: end;
        }

        .size-weight-section {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .size-select, .weight-display {
            padding: 0.75rem;
            border: 2px solid var(--border-light);
            border-radius: 10px;
            font-size: 0.9rem;
        }

        [dir="rtl"] .size-select, [dir="rtl"] .weight-display {
            font-family: var(--font-arabic);
        }

        .qty-add-section {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            align-items: stretch;
        }

        .qty-controls {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
        }

        .qty-btn {
            width: 40px;
            height: 40px;
            border: 2px solid var(--primary-red);
            background: white;
            color: var(--primary-red);
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 1.2rem;
            transition: all 0.3s ease;
        }

        .qty-btn:hover {
            background: var(--primary-red);
            color: white;
        }

        .qty-display {
            font-size: 1.2rem;
            font-weight: bold;
            min-width: 30px;
            text-align: center;
        }

        .add-btn {
            background: linear-gradient(135deg, var(--primary-red) 0%, #D32F2F 100%);
            color: white;
            border: none;
            padding: 0.75rem 1.5rem;
            border-radius: 25px;
            cursor: pointer;
            font-weight: 700;
            font-size: 1rem;
            transition: all 0.3s ease;
        }

        [dir="rtl"] .add-btn {
            font-family: var(--font-arabic);
        }

        .add-btn:hover {
            background: linear-gradient(135deg, #D32F2F 0%, #C62828 100%);
            transform: translateY(-2px);
        }

        .add-btn:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
        }

        /* Cart Overlay */
        .cart-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 10000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .cart-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .cart-drawer {
            position: fixed;
            top: 0;
            right: -100%;
            width: 90%;
            max-width: 500px;
            height: 100%;
            background: white;
            z-index: 10001;
            transition: right 0.3s ease;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
        }

        .cart-drawer.active {
            right: 0;
        }

        .cart-header {
            background: linear-gradient(135deg, var(--primary-red) 0%, #D32F2F 100%);
            color: white;
            padding: 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .cart-header h3 {
            font-size: 1.5rem;
            font-weight: 700;
        }

        [dir="rtl"] .cart-header h3 {
            font-family: var(--font-arabic);
        }

        .cart-close {
            background: none;
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
            padding: 0.5rem;
        }

        .cart-content {
            flex: 1;
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .cart-items {
            flex: 1;
        }

        .cart-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem;
            border: 1px solid var(--border-light);
            border-radius: 10px;
            margin-bottom: 1rem;
        }

        .cart-item-info {
            flex: 1;
        }

        .cart-item-name {
            font-weight: 600;
            margin-bottom: 0.25rem;
        }

        [dir="rtl"] .cart-item-name {
            font-family: var(--font-arabic);
        }

        .cart-item-size {
            font-size: 0.9rem;
            color: var(--text-gray);
        }

        .cart-item-controls {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .tip-section {
            background: #F5F5F5;
            padding: 1.5rem;
            border-radius: var(--radius);
        }

        .tip-section h4 {
            margin-bottom: 1rem;
            font-size: 1.1rem;
            color: var(--text-dark);
        }

        [dir="rtl"] .tip-section h4 {
            font-family: var(--font-arabic);
        }

        .tip-section h4::after {
            content: " *";
            color: var(--primary-red);
            font-weight: bold;
        }

        .tip-buttons {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0.5rem;
            margin-bottom: 1rem;
        }

        .tip-btn {
            background: white;
            border: 2px solid var(--border-light);
            padding: 0.75rem;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
            font-weight: 600;
        }

        [dir="rtl"] .tip-btn {
            font-family: var(--font-arabic);
        }

        .tip-btn:hover {
            border-color: var(--accent-yellow);
            background: rgba(255, 179, 0, 0.1);
        }

        .tip-btn.active {
            background: var(--accent-yellow);
            border-color: var(--accent-yellow);
            color: var(--text-dark);
        }

        .custom-tip-input {
            width: 100%;
            padding: 0.75rem;
            border: 2px solid var(--border-light);
            border-radius: 10px;
            margin-top: 0.5rem;
            font-size: 1rem;
            outline: none;
        }

        [dir="rtl"] .custom-tip-input {
            font-family: var(--font-arabic);
        }

        .custom-tip-input:focus {
            border-color: var(--accent-yellow);
        }

        .promo-section, .delivery-info {
            background: #F5F5F5;
            padding: 1.5rem;
            border-radius: var(--radius);
        }

        .promo-section h4, .delivery-info h4 {
            margin-bottom: 1rem;
            color: var(--text-dark);
        }

        [dir="rtl"] .promo-section h4, [dir="rtl"] .delivery-info h4 {
            font-family: var(--font-arabic);
        }

        .promo-input-group {
            display: flex;
            gap: 0.5rem;
        }

        .promo-input {
            flex: 1;
            padding: 0.75rem;
            border: 2px solid var(--border-light);
            border-radius: 10px;
        }

        [dir="rtl"] .promo-input {
            font-family: var(--font-arabic);
        }

        .promo-apply {
            background: var(--green);
            color: white;
            border: none;
            padding: 0.75rem 1.5rem;
            border-radius: 10px;
            cursor: pointer;
            font-weight: 600;
        }

        [dir="rtl"] .promo-apply {
            font-family: var(--font-arabic);
        }

        .form-group {
            margin-bottom: 1rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 600;
            color: var(--text-dark);
        }

        [dir="rtl"] .form-group label {
            font-family: var(--font-arabic);
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 0.75rem;
            border: 2px solid var(--border-light);
            border-radius: 10px;
            font-size: 1rem;
            outline: none;
            transition: border-color 0.3s ease;
        }

        [dir="rtl"] .form-group input,
        [dir="rtl"] .form-group select,
        [dir="rtl"] .form-group textarea {
            font-family: var(--font-arabic);
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            border-color: var(--primary-red);
        }

        .totals {
            background: #F5F5F5;
            padding: 1.5rem;
            border-radius: var(--radius);
            border: 2px solid var(--border-light);
        }

        .totals-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.75rem;
            font-size: 1rem;
        }

        [dir="rtl"] .totals-row {
            font-family: var(--font-arabic);
        }

        .totals-row.total {
            font-weight: bold;
            font-size: 1.2rem;
            border-top: 2px solid var(--border-light);
            padding-top: 0.75rem;
            color: var(--primary-red);
        }

        .cart-actions {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .pay-btn, .whatsapp-btn {
            background: linear-gradient(135deg, var(--primary-red) 0%, #D32F2F 100%);
            color: white;
            border: none;
            padding: 1rem 2rem;
            border-radius: 25px;
            cursor: pointer;
            font-weight: 700;
            font-size: 1.1rem;
            transition: all 0.3s ease;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        [dir="rtl"] .pay-btn, [dir="rtl"] .whatsapp-btn {
            font-family: var(--font-arabic);
        }

        .whatsapp-btn {
            background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
        }

        .pay-btn:hover, .whatsapp-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.3);
        }

        .pay-btn:disabled, .whatsapp-btn:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
        }

        .pay-btn.loading {
            pointer-events: none;
        }

        .loading-spinner {
            width: 20px;
            height: 20px;
            border: 2px solid transparent;
            border-top: 2px solid currentColor;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .paid-mode {
            background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%);
            text-align: center;
            padding: 2rem;
            border-radius: var(--radius);
            color: white;
        }

        .paid-mode h3 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }

        [dir="rtl"] .paid-mode h3 {
            font-family: var(--font-arabic);
        }

        .paid-mode p {
            margin-bottom: 1.5rem;
            font-size: 1.1rem;
        }

        [dir="rtl"] .paid-mode p {
            font-family: var(--font-arabic);
        }

        /* Instructions Modal */
        .instructions-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.8);
            z-index: 15000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .instructions-modal.active {
            opacity: 1;
            visibility: visible;
        }

        .instructions-content {
            background: white;
            border-radius: 20px;
            padding: 2rem;
            max-width: 500px;
            margin: 1rem;
            text-align: center;
        }

        .instructions-content h3 {
            color: var(--primary-red);
            margin-bottom: 1.5rem;
            font-size: 1.5rem;
        }

        [dir="rtl"] .instructions-content h3 {
            font-family: var(--font-arabic);
        }

        .instructions-steps {
            text-align: left;
            margin-bottom: 2rem;
        }

        [dir="rtl"] .instructions-steps {
            text-align: right;
        }

        .instructions-step {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            margin-bottom: 1rem;
            padding: 1rem;
            background: #F5F5F5;
            border-radius: 10px;
        }

        [dir="rtl"] .instructions-step {
            flex-direction: row-reverse;
            font-family: var(--font-arabic);
        }

        .step-number {
            background: var(--primary-red);
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            flex-shrink: 0;
        }

        .instructions-close {
            background: var(--primary-red);
            color: white;
            border: none;
            padding: 1rem 2rem;
            border-radius: 25px;
            cursor: pointer;
            font-weight: 700;
        }

        [dir="rtl"] .instructions-close {
            font-family: var(--font-arabic);
        }

        /* Error and Success Messages */
        .error-message, .success-message {
            padding: 1rem;
            border-radius: 10px;
            margin-bottom: 1rem;
            text-align: center;
            font-weight: 600;
        }

        .error-message {
            background: #ffebee;
            color: #c62828;
            border: 2px solid var(--primary-red);
        }

        .success-message {
            background: #e8f5e8;
            color: #2e7d32;
            border: 2px solid #4CAF50;
        }

        [dir="rtl"] .error-message, [dir="rtl"] .success-message {
            font-family: var(--font-arabic);
        }

        /* Loading state */
        .loading {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 200px;
            font-size: 1.2rem;
            color: var(--text-gray);
        }

        [dir="rtl"] .loading {
            font-family: var(--font-arabic);
        }

        /* Empty state */
        .empty-state {
            text-align: center;
            padding: 3rem 1rem;
            color: var(--text-gray);
        }

        .empty-state h3 {
            margin-bottom: 1rem;
            color: var(--primary-red);
        }

        [dir="rtl"] .empty-state {
            font-family: var(--font-arabic);
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .sticky-cart {
                padding: 0.75rem;
            }

            .sticky-cart-left .brand-mini h1 {
                font-size: 1rem;
            }

            .header-content h1 {
                font-size: 2rem;
            }

            .header-content p {
                font-size: 1rem;
            }

            .social-icons {
                flex-wrap: wrap;
            }

            .dish-card {
                flex-direction: column;
            }

            [dir="rtl"] .dish-card {
                flex-direction: column;
            }

            .dish-image {
                width: 100%;
                height: 200px;
            }

            .dish-controls {
                grid-template-columns: 1fr;
                gap: 1rem;
            }

            .banner-content h2 {
                font-size: 1.5rem;
            }

            .banner-content p {
                font-size: 1rem;
            }

            .banner-image {
                width: 80px;
                height: 80px;
            }

            .categories {
                justify-content: flex-start;
                overflow-x: auto;
                padding-bottom: 0.5rem;
            }

            .day-filters {
                justify-content: flex-start;
                overflow-x: auto;
                padding-bottom: 0.5rem;
            }

            .tip-buttons {
                grid-template-columns: 1fr;
            }

            .promo-input-group {
                flex-direction: column;
                gap: 1rem;
            }
        }

/* Externalized from index.html */
.social-icon { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; line-height:0; color:#111; }
.social-icon svg { width:20px; height:20px; display:block; }

/* ==== appended compact cart helpers (non-destructive) ==== */

/* === Maha Kitchen (patched) === */
:root{--mk-red:#d63a2c;--mk-green:#2d7a32;--mk-gold:#ffb400;--mk-cream:#fbf6e6;}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--mk-cream);color:#222;margin:0}
.header{background:var(--mk-red);color:#fff;padding:18px 16px;position:sticky;top:0;z-index:50}
.brand{display:flex;align-items:center;gap:10px}
.badge{width:36px;height:36px;border-radius:999px;background:#fff2;display:grid;place-items:center;font-weight:700}
.cart-btn{margin-left:auto;background:var(--mk-gold);border:0;border-radius:10px;padding:8px 14px;font-weight:600;cursor:pointer}
.hero{background:linear-gradient(180deg,var(--mk-red),#c53023);color:#fff;text-align:center;padding:40px 12px 28px;border-bottom:6px solid var(--mk-green)}
.hero h1{margin:6px 0 10px}
.social-row{display:flex;justify-content:center;gap:10px;margin:14px 0}
.social-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;background:#ffffff1a;backdrop-filter:blur(6px);text-decoration:none}
.social-icon:hover{background:#ffffff33}
.social-icon svg{width:18px;height:18px;display:block}
.banner{max-width:920px;margin:20px auto;background:linear-gradient(135deg,#ff8057,#ff3d3d);color:#fff;border-radius:16px;padding:20px;box-shadow:0 10px 24px #0001;display:flex;align-items:center;justify-content:space-between}
.filters{display:flex;flex-wrap:wrap;gap:8px;max-width:980px;margin:16px auto}
.filter-chip{border:1px solid #ddd;border-radius:999px;padding:6px 10px;background:#fff}
.menu{max-width:980px;margin:12px auto;padding:6px}
.card{display:grid;grid-template-columns:180px 1fr;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 4px 18px #0001;margin:16px 0}
.card img{width:100%;height:140px;object-fit:cover}
.card h3{margin:6px 0 4px}
.card .actions{display:flex;align-items:center;gap:10px;margin-top:10px}
.qty{display:flex;align-items:center;gap:10px}
.qty button{width:28px;height:28px;border-radius:999px;border:0;background:#eee}
.add-btn{background:var(--mk-red);color:#fff;border:0;border-radius:999px;padding:10px 18px}
.cart-panel{position:fixed;top:0;right:0;width:360px;max-width:100vw;height:100%;background:#fff;box-shadow:-24px 0 50px #0003;transform:translateX(100%);transition:transform .25s ease;z-index:100}
.cart-panel.open{transform:translateX(0)}
.cart-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #eee;background:#fafafa}
.cart-body{padding:12px 16px;overflow:auto;height:calc(100% - 160px)}
.cart-footer{position:absolute;bottom:0;left:0;right:0;border-top:1px solid #eee;padding:12px 16px;background:#fff}
.input, .select, textarea{width:100%;padding:10px;border:1px solid #ddd;border-radius:10px;background:#fff}
.totals{border-top:1px dashed #ddd;margin-top:10px;padding-top:8px}
.totals-row{display:flex;justify-content:space-between;margin:4px 0}
.pay-btn{width:100%;padding:14px;border:0;border-radius:12px;background:var(--mk-red);color:#fff;font-weight:700;margin-top:8px}
.whatsapp-btn{width:100%;padding:14px;border:0;border-radius:12px;background:#25d366;color:#fff;font-weight:700;margin-top:8px}
.loading-spinner{width:16px;height:16px;border:2px solid #fff;border-top-color:transparent;border-radius:50%;display:inline-block;margin-right:8px;animation:spin 1s linear infinite;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}