/*
======================================================
  ملف index.css (النسخة المنظّفة والموحدة)
======================================================
*/

/* 1. المتغيرات الأساسية (الافتراضي هو الوضع الفاتح) */
:root {
    --bg: #f3f4f6;
    --bg-card: #ffffff;
    --bg-soft: #f9fafb;
    --primary: #f97316;
    --primary-dark: #ea580c;
    --primary-alpha: rgba(249, 115, 22, 0.15);
    /* Default alpha */
    --accent: #22c55e;
    --border: #e5e7eb;
    --text-main: #0f172a;
    --text-muted: #6b7280;
    --radius: 18px;
    --shadow: 0 12px 30px rgba(0, 0, 0, 0.04);
    --shadow-soft: 0 16px 36px rgba(15, 23, 42, 0.05);
    /* --shadow-pop: 0 0 0 4px rgba(249, 115, 22, 0.15);  Replaced with variable */
    --shadow-pop: 0 0 0 4px var(--primary-alpha);
    /* We need an alpha version or just use primary */
}

/* 2. الإعدادات العامة والتنسيقات الأساسية */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    overflow-x: hidden;
    width: 100%;
    touch-action: manipulation;
    /* Disables double-tap to zoom natively */
    -webkit-text-size-adjust: 100%;
    /* Prevents font scaling in landscape */
}

body {
    font-family: 'Tajawal', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: radial-gradient(circle at top, #eef2ff 0, #f9fafb 55%, #e5e7eb 100%);
    color: var(--text-main);
    line-height: 1.7;
    transition: background 0.25s ease, color 0.25s ease;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    outline: none;
    background: transparent;
    padding: 0;
}

.page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 14px 40px;
}

/* 🌙 Dark Theme Override */
body.dark-theme {
    --bg: #020617;
    --bg-card: #0b1220;
    --bg-soft: #111827;
    --border: #1f2937;
    --text-main: #e5e7eb;
    --text-muted: #9ca3af;
    --shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
    --shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.2);

    background: radial-gradient(circle at top, #111827 0, #020617 55%, #000000 100%);
    color: var(--text-main);
}

body.dark-theme .hero-title {
    color: #f9fafb;
}

/* 3. الهيدر وشريط التنقل */
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-main);
}

.brand-logo {
    width: 48px;
    height: 48px;
    display: grid;
    place-content: center;
    border-radius: 999px;
    font-weight: 700;
    font-size: 20px;
    color: white;
    background: linear-gradient(135deg, var(--primary) 0%, #ffc04b 100%);
    box-shadow: 0 0 0 2px var(--primary), 0 4px 12px rgba(0, 0, 0, 0.2);
}

.brand-title {
    font-size: 16px;
    font-weight: 700;
}

.brand-sub {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
}

.topbar-actions {
    display: flex;
    gap: 12px;
}

.theme-toggle {
    width: 44px;
    height: 44px;
    display: grid;
    place-content: center;
    border-radius: 999px;
    font-size: 20px;
    color: var(--text-main);
    transition: background-color 0.2s;
    background-color: var(--bg-soft);
    box-shadow: var(--shadow-soft);
}

body.dark-theme .theme-toggle {
    background-color: var(--bg-card);
}

/* ملخص السلة في الهيدر */
.cart-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    background-color: var(--bg-card);
    box-shadow: var(--shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cart-summary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
}

.cart-icon {
    font-size: 18px;
    position: relative;
    top: -2px;
}

.cart-text-main {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
}

.cart-text-sub {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
}

.cart-badge {
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--primary-alpha);
    border: 1px solid var(--primary);
    color: var(--primary);
}

/* 4. قسم الهيرو */
.hero {
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    align-items: center;
    /* Center content vertically */
    gap: 20px;
    padding: 24px 20px;
    border-radius: 24px;
    box-shadow: var(--shadow-soft);
    color: var(--text-main);
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;

    background: radial-gradient(circle at top left, var(--primary-alpha), transparent 55%),
        radial-gradient(circle at bottom right, var(--bg-soft), var(--bg-soft));
    border: 1px solid rgba(148, 163, 184, 0.45);
}

/* Center text column vertically */
.hero>div:first-child {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

body.dark-theme .hero {
    background: radial-gradient(circle at top left, var(--primary-alpha), transparent 55%),
        radial-gradient(circle at bottom right, var(--bg), var(--bg));
    border-color: rgba(30, 64, 175, 0.7);
}

.hero-title {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 6px;
    color: var(--text-main);
}

.hero-sub {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.badge {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    background-color: var(--bg-soft);
    color: var(--text-main);
    border: 1px solid var(--border);
}

.badge.hot {
    background: var(--primary-alpha);
    border-color: var(--primary);
    color: var(--primary-dark);
}

body.dark-theme .badge.hot {
    background: rgba(249, 115, 22, 0.22);
    color: #ffedd5;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.btn-primary,
.btn-ghost {
    border-radius: 999px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    box-shadow: 0 4px 16px var(--primary-alpha);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px var(--primary-alpha);
}

.btn-ghost {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-main);
    padding: 9px 16px;
}

.hero-media {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: radial-gradient(circle at top left, var(--primary), var(--primary-dark));
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 10px;
    min-height: 200px;
    height: 100%;
    /* Ensure it fills the grid cell on desktop */
}

.hero-img {
    width: 92%;
    height: 85%;
    /* Slightly increased */
    min-height: 220px;
    /* Fallback height */
    border-radius: 18px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.7);
    border: 2px solid rgba(248, 250, 252, 0.15);
}

.hero-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--bg-card);
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border);
    color: var(--text-main);
}

/* 5. الفلاتر وقائمة المنتجات */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-top: 14px;
    margin-bottom: 10px;
}

.section-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-main);
}

.section-sub {
    font-size: 12px;
    color: var(--text-muted);
}

.filters {
    margin-top: 16px;
    margin-bottom: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-btn {
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    transition: all 0.2s ease;
}

.filter-btn.active {
    background: var(--primary-alpha);
    color: var(--primary-dark);
    border-color: var(--primary);
}

body.dark-theme .filter-btn.active {
    background: var(--primary-alpha);
    color: #fed7aa;
    border-color: var(--primary);
}

.filter-btn:hover {
    border-color: var(--primary);
    background: var(--primary-alpha);
    color: var(--primary-dark);
}

/* شبكة المنتجات (توحيد الأسماء) */
.products-grid,
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 16px;
}

/* 6. بطاقة المنتج (توحيد الأسماء) */
.card,
.menu-item-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 14px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    gap: 7px;
    position: relative;
    overflow: hidden;
    transition: all 0.18s ease;

    /* Performance Optimization */
    contain: layout paint;
    will-change: transform;

    /* Entry Animation */
    animation: fadeIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card:hover,
.menu-item-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 46px rgba(0, 0, 0, 0.14);
    border-color: rgba(148, 163, 184, 0.55);
}

.card-tag {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--primary-alpha);
    color: var(--primary-dark);
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11px;
    border: 1px solid var(--primary);
    backdrop-filter: blur(6px);
}

.card-img {
    width: 100%;
    height: 165px;
    background-size: cover;
    background-position: center;
    border-radius: 14px;
    margin-bottom: 10px;
    /* Ensure image doesn't overlap button visual */
    display: block;
}

.add-btn-overlay {
    position: absolute;
    bottom: 18px;
    /* 10px margin-bottom of img + 8px padding inside */
    left: 8px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 2;
}

.add-btn-overlay:active {
    transform: scale(0.9);
    background: var(--primary);
    color: white;
}

/* Dark Mode Support */
body.dark-theme .add-btn-overlay {
    background: rgba(30, 41, 59, 0.85);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--primary);
}

body.dark-theme .add-btn-overlay:active {
    background: var(--primary);
    color: white;
}

.card-title {
    font-size: 15px;
    font-weight: 700;
}

.card-price {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-dark);
    white-space: nowrap;
}

.card-desc {
    font-size: 12px;
    color: var(--text-muted);
    min-height: 32px;
    line-height: 1.5;
}

.btn-config {
    width: 100%;
    padding: 10px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 14px 32px rgba(249, 115, 22, 0.35);
    transition: all 0.18s ease;
}


/* 7. المودال (نافذة الخيارات) وتنسيقات الـ Chip */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at top, rgba(15, 23, 42, 0.88), rgba(15, 23, 42, 0.96));
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 40;
    padding: 16px;
    backdrop-filter: blur(8px);
}

.modal-backdrop.open {
    display: flex;
}

.modal {
    width: 100%;
    max-width: 430px;
    background: var(--bg-card);
    border-radius: 22px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
    padding: 16px;
    position: relative;
    max-height: 80vh;
    /* ارتفاع موحد */
    overflow-y: auto;
    overflow-x: hidden;
    /* Prevent horizontal scroll */
    /* تفعيل سكرول للمودال نفسه */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modal-close {
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.5);
    background: var(--bg-soft);
    color: var(--text-main);
    width: 28px;
    height: 28px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.modal-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
}

/* جسم المودال - لا يحتاج سكرول داخلي */
.modal-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 6px 0 10px;
    max-height: none;
    overflow-y: visible;
}

/* صورة المنتج داخل المودال */
.modal-product-image {
    width: auto;
    height: 180px;
    margin: -16px -16px 12px -16px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 22px 22px 0 0;
    flex-shrink: 0;
}

/* عناوين الأقسام والنصوص الثانوية */
.modal-section-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 3px;
}

.modal-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

/* صف خيارات النوع / الحجم */
.options-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Chip واحدة (خيار الحجم/النوع) */
.chip-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 11px;
    min-width: 120px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-soft);
    cursor: pointer;
    font-size: 11px;
    transition: all 0.18s ease;
}

.chip-option input {
    display: none;
}

.chip-option span:first-of-type {
    font-size: 12px;
    font-weight: 600;
}

.chip-option span:last-of-type {
    font-size: 10px;
    opacity: 0.9;
}

.chip-option.active {
    border-color: var(--primary);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fefce8;
    box-shadow: 0 10px 22px rgba(249, 115, 22, 0.55);
    transform: translateY(-1px);
}

/* قائمة الإضافات */
.extras-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.extra-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 14px;
    background: var(--bg-soft);
    border: 1px solid rgba(148, 163, 184, 0.45);
    font-size: 12px;
}

.extra-item input {
    flex-shrink: 0;
    accent-color: var(--accent);
}

/* صف الكمية */
.qty-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.qty-row input[type="number"] {
    width: 80px;
    padding: 6px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-soft);
    color: var(--text-main);
    text-align: center;
    font-size: 13px;
}

/* فوتر المودال والأزرار */
.modal-footer {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.btn-secondary {
    flex: 1;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-soft);
    color: var(--text-main);
    font-size: 13px;
    font-weight: 500;
    padding: 9px 0;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.btn-secondary:hover {
    background: var(--bg-card);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.btn-add-cart {
    flex: 2;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 16px;
    /* حجم موحد */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 6px 18px var(--primary-alpha);
    transition: 0.3s ease;
    border-radius: 999px !important;
    /* Force Oval */
}

.btn-add-cart:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px var(--primary-alpha);
}

.btn-add-cart-label {
    white-space: nowrap;
}

.inline-price {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    font-size: 14px;
    /* Increased size */
    font-weight: 700;
    /* Bolder */
    direction: ltr;
    unicode-bidi: bidi-override;
    white-space: nowrap;
}


/* 8. سلة الطلبات (Cart Modal) - تنسيق موحد لحل مشكلة التمرير */
.cart-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at top, rgba(15, 23, 42, 0.88), rgba(15, 23, 42, 0.96));
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 40;
    padding: 16px;
    backdrop-filter: blur(8px);
}

.cart-drawer-backdrop.open {
    display: flex;
}

.cart-drawer {
    position: relative;
    width: 100%;
    max-width: 430px;
    max-height: 90vh;
    background: var(--bg-card);
    border-radius: 22px;
    border: 1px solid var(--border);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
    padding: 16px 16px 14px;

    /* 🛑 قواعد Flexbox الأساسية لتقسيم المساحة 🛑 */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cart-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    flex-shrink: 0;
    /* ثابت */
}

.cart-drawer-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
}

/* 🛑 العنصر القابل للتمدد والتمرير (حل المشكلة) 🛑 */
#cartItemsContainer {
    flex: 1;
    /* يأخذ كل المساحة المتبقية */
    min-height: 0;
    /* يسمح بالتمرير عندما تمتلئ المساحة */
    overflow-y: auto;

    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 6px;
}

.cart-empty {
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
    padding: 14px 8px;
    background: var(--bg-soft);
    border-radius: 12px;
}

.cart-item {
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-soft);
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* نموذج بيانات العميل (الفوتر) */
.checkout-form {
    padding-top: 10px;
    padding-bottom: 12px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
    /* ثابت */
}

/* قسم الإجمالي والأزرار */
.cart-total-row {
    margin-top: 6px;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--bg-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    /* ثابت */
}

.cart-footer-note {
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.6;
    flex-shrink: 0;
    /* ثابت */
}

.cart-footer-actions {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    flex-shrink: 0;
    /* ثابت */
}

/* ... (بقية قواعد تنسيق النموذج والأزرار) ... */

/* قواعد Scrollbar Minimal */
.modal::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
#cartItemsContainer::-webkit-scrollbar {
    width: 4px;
}

.modal::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track,
#cartItemsContainer::-webkit-scrollbar-track {
    background: transparent;
}

.modal::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
#cartItemsContainer::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 10px;
}

/* 9. Media Queries */
@media (max-width: 840px) {
    .hero {
        grid-template-columns: 1fr;
    }

    .hero-media {
        order: -1;
    }
}

@media (max-width: 520px) {
    .page {
        padding-inline: 10px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .topbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .cart-summary {
        align-self: stretch;
        justify-content: space-between;
    }

    /* --- Compact Mobile Hero (v301) --- */
    .hero {
        /* Reset grid for side-by-side */
        grid-template-columns: 1.5fr 1fr !important;
        padding: 16px !important;
        gap: 12px !important;
        min-height: auto !important;
        /* Allow it to shrink */
    }

    .hero-media {
        order: 0 !important;
        /* Keep image on one side (Right in LTR, Left in RTL) */
        height: 140px !important;
        /* Force smaller height */
        min-height: 0 !important;
    }

    .hero-title {
        font-size: 20px !important;
    }

    .hero-sub {
        font-size: 13px !important;
        margin-bottom: 8px !important;
        /* Limit text lines if needed */
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .hero-actions {
        display: none !important;
        /* Hide buttons to save space, or keep them small? User asked for compact. Let's hide 'ghost' and keep primary? Actually let's just make them compact/hidden for now to save space or stack them differently. Let's keep them but maybe hide the ghost button */
    }

    /* Showing only primary button if needed, or maybe just simplified */
    .hero-actions .btn-ghost {
        display: none !important;
    }

    .hero-tag {
        font-size: 9px !important;
        padding: 2px 6px !important;
    }

    /* --- Horizontal Categories (v302) --- */
    .filters {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        padding-bottom: 8px !important;
        gap: 8px !important;
        /* Smooth scroll */
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        /* Hide scrollbar */
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE */
    }

    .filters::-webkit-scrollbar {
        display: none;
    }

    .filter-btn {
        flex: 0 0 auto !important;
        /* Prevent shrinking */
        white-space: nowrap !important;
    }

    .filter-btn {
        flex: 0 0 auto !important;
        /* Prevent shrinking */
        white-space: nowrap !important;
    }

    /* --- List View for Products (v303) --- */
    .products-grid,
    .grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .card,
    .menu-item-card {
        flex-direction: row !important;
        /* Side by Side */
        align-items: center !important;
        padding: 10px !important;
        min-height: 110px !important;
        gap: 12px !important;
    }

    .card-img {
        width: 100px !important;
        /* Fixed width */
        height: 90px !important;
        /* Fixed height */
        margin-bottom: 0 !important;
        /* Remove bottom margin */
        border-radius: 12px !important;
        flex-shrink: 0 !important;
        order: -1 !important;
        /* Put image first (Right in RTL?? No, in RTL flex items are reversed visually if dir=rtl, but order property relies on source order. Ideally image should be at start. Let's see. If flex-direction row, and dir=rtl, item 1 is right. So 'order' isn't strictly needed if structure is Image then Text. But let's verify HTML structure. It's usually Image then Text. So in RTL, Image on Right. This is correct.) */
    }

    /* Add button overlay adjustment for list view */
    .add-btn-overlay {
        width: 30px !important;
        height: 30px !important;
        bottom: 6px !important;
        left: 6px !important;
        /* Make it relative to the image wrapper if possible, but card-img is direct child. 
           It might overlap text if not careful. 
           Let's move it to top-left of image? Or keep bottom-left of image?
           Since image is now small, maybe we don't need overlay? 
           Actually, the overlay is absolute to .card. We need to be careful.
           Ideally it should be inside a wrapper with the image. 
           But in current HTML, Card contains Img and Overlay as siblings.
           Let's Position it relative to the card but strictly over the image area.
           In RTL, Image is on Right. Overlay is Left: 8px. That puts it on text.
           We need it on Right: 8px? No, left: 8px is fine if we want it on text side? 
           Wait. Button is '+' to add.
           Let's put it on the far left of the card (outside image) as a standalone button?
           OR keep it over image?
           If image is 100px wide. And on Right (RTL).
           Then overlay should be Right: (100px - 38px)? 
           Let's try to make it a distinct action button on the far left if possible?
           But HTML structure prevents easy moving without Hacky CSS.
           
           Let's try:
           right: 70px (approx inside image, since in RTL left:auto, right:X)
           Wait, existing CSS has 'left: 8px'. In RTL this means Left side of container.
           If Image is on Right. Text is on Left. The button overlaps Text.
           We want button on Image (Right side) or Far Left (Action side).
           
           Let's try to put it on the Image (Right Side).
           Since Image is width 100px.
           We set left: auto !important; right: 70px !important; ? (relative to card width? No).
           
           Actually, simpler: simpler list view often has Add Button as a distinct element.
           Let's make .add-btn-overlay position: static (or flex order) ? 
           If absolute, it's hard.
           Let's just scale it down and put it bottom-left of the CARD (on top of text??).
           
           Let's look at standard: Image (Right), Text (Center), Add (Left).
           If we make .card flex-direction: row.
           Image is Item 1. Button is Item 2 (overlapping). Content is Item 3?
           
           Let's assume we can't easily move it.
           Let's set:
           inset-inline-start: 10px !important; (Left in RTL, Right in LTR? No. 'left' is physical.)
           
           Let's force it to be bottom-left of the IMAGE.
           In RTL, Image is on Right. So we want it Right-ish?
           
           Alternative: Hide the overlay button and rely on clicking the card or something? 
           No, that opens modal.
           
           Let's just force it to bottom-right of the whole card?
           
           Actually, let's try a safe bet:
           Make the image wrapper relative? No can't change HTML.
           
           Let's put it at `left: 10px` (Far left of card). 
           This puts it away from image (Right).
           So: Image -- Text -- Button.
           Perfect.
        */
        left: 10px !important;
        bottom: 10px !important;
        background: var(--primary) !important;
        color: white !important;
        box-shadow: none !important;
    }

    .card-title {
        font-size: 14px !important;
        margin-bottom: 4px !important;
    }

    .card-desc {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 11px !important;
        line-height: 1.4 !important;
        min-height: auto !important;
    }

    .card-price {
        font-size: 14px !important;
        margin-top: 4px !important;
    }

    .btn-config {
        display: none !important;
        /* Hide 'Customize' button in list view if present, usually not in card but check */
    }

    .card-tag {
        font-size: 9px !important;
        padding: 2px 8px !important;
        top: 6px !important;
        right: 6px !important;
        /* Keep on image */
        z-index: 5;
    }

    /* Content Wrapper inside card?
       The card likely has img, overlay, tag, title, desc... as direct children.
       If so, flex-direction: row makes them all layout horizontally.
       Img (1), Overlay (Absolute), Tag (Absolute), Title (2), Desc (3)...
       This will break layout. We need a content wrapper.
       
       Wait, let's check HTML.
       <div class="card" ...>
          <span class="card-tag">...</span>
          <div class="add-btn-overlay">...</div>
          <div class="card-img" style="..."></div>
          <h3 class="card-title">...</h3>
          <p class="card-desc">...</p>
          <div class="card-footer">...price...button...</div>
       </div>
       
       If we use flex: row.
       Direct children: Tag(abs), Overlay(abs), Img, Title, Desc, Footer.
       Img becomes col 1.
       Title becomes col 2.
       Desc becomes col 3.
       Footer becomes col 4.
       This is bad. We want Img + (Title/Desc/Footer grouped).
       
       Since we cannot change HTML structure easily (without breaking other things or script logic),
       Display: Grid is safer!
       
       .card {
          display: grid !important;
          grid-template-columns: 100px 1fr !important;
          grid-template-areas: 
            "img title"
            "img desc"
            "img footer";
          align-content: start;
       }
       
       .card-img { grid-area: img; }
       .card-title { grid-area: title; }
       .card-desc { grid-area: desc; }
       .card-footer { grid-area: footer; } -- Wait, we need to check if card-footer exists or if price/button are loose.
       
       Let's check index.js generateProductCard function? Or view HTML again?
       I'll assume standard structure.
       
       Let's use the safer Grid approach.
    */

    /* REVISED CARD CSS For List View */
    .card,
    .menu-item-card {
        display: grid !important;
        grid-template-columns: 100px 1fr !important;
        grid-template-rows: auto auto 1fr;
        /* Title, Desc, Footer */
        grid-template-areas:
            "img title"
            "img desc"
            "img footer";
        padding: 10px !important;
        gap: 0 12px !important;
        /* Row Gaphandled by margins, Col gap 12px */
        height: auto !important;
        min-height: 120px !important;
        align-items: start !important;
    }

    .card-img {
        grid-area: img;
        width: 100% !important;
        height: 100px !important;
        /* Match column/row height approx */
        margin: 0 !important;
    }

    .card-title {
        grid-area: title;
        margin-top: 4px !important;
    }

    .card-desc {
        grid-area: desc;
    }

    /* If price/button are separate */
    .card-price {
        grid-area: footer;
        /* If checks out */
        align-self: end;
        margin-bottom: 4px !important;
    }

    /* If there is a wrapper 'card-footer' use that. If loose, we might have issues. */

    /* --- Sticky Cart (v304) --- */
    .cart-summary {
        position: fixed !important;
        bottom: 16px !important;
        left: 16px !important;
        right: 16px !important;
        width: auto !important;
        /* Allow it to be centered/stretched with margins */
        z-index: 999 !important;
        background: var(--bg-card) !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
        border: 1px solid var(--border) !important;
        padding: 12px 16px !important;
        border-radius: 999px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        align-self: auto !important;
        gap: 0 !important;
    }

    /* Add padding to page to prevent sticky cart from covering content */
    .page {
        padding-bottom: 90px !important;
        /* Space for the cart */
    }

    /* Hide cart summary in header since we moved it to bottom? 
       Actually, existing HTML usually has one element. 
       If we just style the existing one fixed, it moves out of header. 
       We just need to make sure the header doesn't look empty or broken.
       Original topbar flex logic might need adjustment if cart is removed from flow.
       But since it's position: fixed, it IS removed from flow.
       The header (two columns) might collapse.
       We should check topbar styling.
       Topbar has .brand and .topbar-actions.
       If .topbar-actions (containing cart) is empty/fixed, .brand stays.
       That is fine.
    */

    /* Ensure Theme Toggle is still accessible?
       Theme toggle is usually in topbar-actions too.
       If we fix the whole .topbar-actions, theme toggle moves to bottom too??
       Let's check HTML structure.
       <div class="topbar-actions">
           <button class="theme-toggle">...</button>
           <div id="floatingCartContainer" class="cart-summary">...</div>
       </div>
       
       We represent .cart-summary to be fixed.
       The theme toggle stays in topbar.
       Perfect.
    */
}

@media (max-width: 480px) {
    .modal {
        padding: 14px 12px 12px;
    }

    .options-row {
        gap: 6px;
    }

    .chip-option {
        width: 100%;
    }

    .modal-footer {
        flex-direction: column;
    }

    .btn-secondary,
    .btn-add-cart {
        width: 100%;
    }
}

/* ============================
   إصلاح نهائي لتمدد السلة
============================ */

/* الكرت نفسه داخل السلة */
.cart-drawer {
    display: flex !important;
    flex-direction: column !important;
    max-height: 85vh !important;
    overflow: hidden !important;
}

/* المنطقة التي تحتوي على المنتجات */
#cartItemsContainer {
    flex: 1 1 auto !important;
    /* المنطقة الرئيسية */
    min-height: 0 !important;
    /* يسمح للـ scroll */
    overflow-y: auto !important;
    /* المنتجات تتحرك داخل Scroll */
    padding-bottom: 8px;
}

/* منع جميع العناصر أسفل المنتجات من تمدد السلة */
.checkout-form,
.cart-total-row,
.cart-footer-actions,
.cart-footer-wrapper {
    flex-shrink: 0 !important;
}

/* مودال السلة لا يتمدد بطول غير منطقي */
.cart-drawer>* {
    max-width: 100%;
}

/* تحسين حجم الشعار في الهيدر */
@media (min-width: 840px) {
    .brand-logo {
        width: 64px;
        height: 64px;
        font-size: 26px;
    }
}

/* في الشاشات الصغيرة نخليه أقل شوي عشان ما يزاحم الهيدر */
@media (max-width: 520px) {
    .brand-logo {
        width: 56px;
        height: 56px;
        font-size: 22px;
    }
}

/* تنظيم الهيدر في نسخة الموبايل */
@media (max-width: 520px) {
    .topbar {
        gap: 10px;
    }

    .topbar-actions {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .cart-summary {
        flex: 1;
        min-width: 0;
    }

    .theme-toggle {
        flex-shrink: 0;
    }
}

/* تحسين حجم سلة الطلبات على الدسكتوب */
@media (min-width: 840px) {
    .cart-summary {
        padding: 8px 12px;
        gap: 8px;
        border-radius: 999px;
    }

    .cart-icon {
        font-size: 16px;
        top: 0;
    }

    .cart-text-main {
        font-size: 13px;
    }

    .cart-text-sub {
        font-size: 11px;
    }

    .cart-badge {
        font-size: 10px;
        padding: 1px 6px;
    }
}

/* ترتيب الهيدر في نسخة الموبايل */
@media (max-width: 520px) {
    .topbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .topbar-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
    }

    /* خلي السلة تاخذ كل العرض المتبقي */
    #cartSummary {
        flex: 1;
    }

    .cart-summary {
        justify-content: flex-start;
        gap: 6px;
    }

    /* بلوك النص داخل السلة */
    .cart-summary>div:nth-child(2) {
        flex: 1;
        text-align: right;
    }

    .cart-badge {
        margin-inline-start: 4px;
    }

    /* زر الثيم يكون ثابت وصغير وما ينضغط */
    .theme-toggle {
        flex-shrink: 0;
    }
}

/* ----------------------------------------
   تخفيف الظلال لجميع العناصر في الموقع
----------------------------------------- */

* {
    --soft-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.10) !important;
    --deep-shadow: 0 6px 18px rgba(0, 0, 0, 0.12) !important;
}

/* البطاقات */
.card,
.product-card,
.hero-box,
.category-chip,
.cart-summary,
.theme-toggle,
.modal-content,
.cart-drawer,
.cart-item,
.btn-primary,
.btn-outline,
.checkout-form input,
.checkout-form textarea {
    box-shadow: var(--soft-shadow) !important;
}

/* عناصر تحتاج ظل متوسط */
.product-card:hover,
.btn-primary:hover,
.cart-summary:hover,
.modal-product-image {
    box-shadow: var(--card-shadow) !important;
}

/* أعمق ظل للمودالات فقط */
.modal-backdrop.open .modal-content,
.cart-drawer-backdrop.open .cart-drawer {
    box-shadow: var(--deep-shadow) !important;
}

/* تحسين وضوح الفلاتر في الوضع الفاتح */
:root.light {
    --chip-text: #1e293b;
    /* نص داكن واضح */
    --chip-bg: #f1f5f9;
    /* رمادي فاتح */
    --chip-border: #cbd5e1;
    /* حد خفيف */
    --chip-active-bg: #fde68a;
    /* لون مميز للفئة المختارة */
    --chip-active-text: #b45309;
    /* نص أصفر غامق */
}

.category-chip {
    color: var(--chip-text) !important;
    background: var(--chip-bg) !important;
    border: 1px solid var(--chip-border) !important;
}

.category-chip.active {
    background: var(--chip-active-bg) !important;
    color: var(--chip-active-text) !important;
    border-color: var(--chip-active-text) !important;
}

/* تحسين وضوح نص الفلاتر في الوضع الفاتح والغامق */

/* الوضع الفاتح (الافتراضي) */
.filter-btn {
    background: #f9fafb !important;
    border-color: #e5e7eb !important;
    color: #4b5563 !important;
    /* نص أغمق وواضح */
}

.filter-btn.active {
    background: var(--primary-alpha) !important;
    color: var(--primary-dark) !important;
    border-color: var(--primary) !important;
    font-weight: 600;
}

/* ضبط نسخة الوضع الغامق حتى تظل واضحة */
body.dark-theme .filter-btn {
    background: rgba(15, 23, 42, 0.95) !important;
    border-color: #1f2937 !important;
    color: #e5e7eb !important;
}

body.dark-theme .filter-btn.active {
    background: var(--primary-alpha) !important;
    color: var(--primary-dark) !important;
    /* Fallback color if needed, or use a lighter var */
    border-color: var(--primary) !important;
}

/* ===========================
   FOOTER – LIGHT DESIGN
=========================== */

.site-footer {
    background: #f5f7fb;
    border-top: 1px solid rgba(148, 163, 184, 0.35);
    margin-top: 56px;
    padding: 24px 16px 18px;
    font-size: 13px;
    color: #111827;
    direction: rtl;
}

.footer-main {
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.footer-qr {
    text-align: center;
}

.footer-qr img {
    width: 130px;
    height: 130px;
    border-radius: 16px;
    border: 1px solid #d4d7e2;
    background: #ffffff;
    padding: 6px;
    object-fit: cover;
}

.footer-qr-text {
    margin-top: 6px;
    font-size: 12px;
    color: #6b7280;
}

.footer-info {
    flex: 1;
    min-width: 220px;
    text-align: right;
}

.footer-info h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
}

.footer-line {
    margin: 2px 0;
}

.footer-muted {
    color: #6b7280;
    font-size: 13px;
}

.footer-phone {
    font-weight: 600;
    color: #111827;
    text-decoration: none;
}

.footer-phone:hover {
    text-decoration: underline;
}

/* أيقونات السوشال */
/* أيقونات السوشال بالفوتر – دوائر فاتحة */
.footer-social-icon {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    /* لون الأيقونة (currentColor في الـ SVG) */
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease,
        transform 0.16s ease, box-shadow 0.16s ease;
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.06);
}

.footer-social-icon svg {
    width: 18px;
    height: 18px;
}

/* هوفر ناعم */
.footer-social-icon:hover {
    background: var(--primary);
    /* Dynamic Primary */
    border-color: var(--primary);
    color: #ffffff;
    /* Icon becomes white */
    transform: translateY(-1px);
    box-shadow: 0 6px 18px var(--primary-alpha);
}


.footer-bottom {
    max-width: 1120px;
    margin: 18px auto 0;
    text-align: center;
    color: #6b7280;
    line-height: 1.7;
}

.footer-brand {
    font-weight: 700;
    color: #f97316;
}

/* موبايل */
@media (max-width: 768px) {
    .footer-main {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-info {
        text-align: center;
    }

    .footer-social {
        justify-content: center;
    }
}

/* ===========================
   FOOTER – DARK MODE SUPPORT
=========================== */

body.dark-theme .site-footer {
    background: #0f172a;
    /* أزرق غامق رايق */
    border-top-color: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
}

body.dark-theme .footer-info h3 {
    color: #f1f5f9;
}

body.dark-theme .footer-muted {
    color: #94a3b8;
}

body.dark-theme .footer-phone {
    color: #f1f5f9;
}

body.dark-theme .footer-qr img {
    background: #1e293b;
    border-color: #334155;
}

body.dark-theme .footer-social-icon {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
}

body.dark-theme .footer-social-icon:hover {
    background: #334155;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

body.dark-theme .footer-bottom {
    color: #94a3b8;
}

body.dark-theme .footer-brand {
    color: var(--primary);
    /* نفس اللون عندك */
}

.cart-drawer {
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    overflow: hidden;
    /* يمنع الانفجار */
}

#cartItemsContainer {
    flex: 1 1 auto;
    min-height: 0;
    /* أهم سطر */
    overflow-y: auto;
    /* Scroll داخلي */
}

.checkout-form,
.cart-total-row,
.cart-footer-actions {
    flex-shrink: 0;
    /* ما يكبس المنتجات */
}

/* Toast Notification */
#toast-notification {
    visibility: hidden;
    min-width: 250px;
    background-color: var(--bg-card);
    color: var(--text-main);
    text-align: center;
    border-radius: 50px;
    padding: 16px;
    position: fixed;
    z-index: 10000;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--primary);
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.3s, bottom 0.3s;
}

#toast-notification.show {
    visibility: visible;
    opacity: 1;
    bottom: 50px;
}


/* Search Bar */
.search-container {
    margin-bottom: 16px;
}

#productSearch {
    width: 100%;
    padding: 12px 16px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background-color: var(--bg-card);
    color: var(--text-main);
    font-size: 14px;
    transition: box-shadow 0.2s, border-color 0.2s;
    outline: none;
}

#productSearch:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-alpha);
}


/* Lazy Loading Image Update */
img.card-img {
    width: 100%;
    height: 200px;
    /* Default height, check original CSS if different */
    object-fit: cover;
    display: block;
    background: none;
    /* Remove background props if inherited */
}


/* Compact Toast Update */
#toast-notification {
    min-width: auto !important;
    padding: 8px 20px !important;
    font-size: 14px !important;
    border-radius: 30px !important;
    bottom: 20px !important;
    white-space: nowrap;
}

#toast-notification.show {
    bottom: 40px !important;
}


/* Cart Modal Specifics */
#cartModal {
    max-width: 600px;
    /* Slightly wider for form */
}

/* Hide old drawer styles if they interfere (optional, but good practice) */
.cart-drawer {
    display: none !important;
}


/* --- Cart Modal Content Styling --- */

/* Cart Items List */
.cart-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
    max-height: 300px;
    /* Scrollable area for items */
    overflow-y: auto;
    padding-right: 4px;
    /* Space for scrollbar */
}

/* Custom Scrollbar for Cart Items */
.cart-items::-webkit-scrollbar {
    width: 6px;
}

.cart-items::-webkit-scrollbar-track {
    background: var(--bg-soft);
    border-radius: 10px;
}

.cart-items::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 10px;
}

.cart-item {
    background-color: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform 0.2s;
}

.cart-item:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
}

.cart-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 15px;
    color: var(--text-main);
}

.cart-item-price {
    color: var(--primary);
}

.cart-item-meta {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

.cart-item-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.cart-item-qty {
    font-size: 12px;
    font-weight: 600;
    background: var(--bg-card);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid var(--border);
}

.remove-btn {
    color: #ef4444;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(239, 68, 68, 0.1);
    transition: background 0.2s;
}

.remove-btn:hover {
    background: rgba(239, 68, 68, 0.2);
}

/* Checkout Form Styling */
.checkout-form h4 {
    color: var(--text-main);
    border-bottom: 2px solid var(--primary);
    display: inline-block;
    padding-bottom: 4px;
    margin-bottom: 16px;
}

.form-group {
    margin-bottom: 14px;
}

.form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-main);
}

.form-input {
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background-color: var(--bg-card);
    color: var(--text-main);
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
    outline: none;
}

textarea.form-input {
    resize: vertical;
    min-height: 60px;
}

/* Order Type Toggle (Segmented Control) */
.order-type-toggle {
    display: flex;
    background-color: var(--bg-soft);
    padding: 4px;
    border-radius: 12px;
    border: 1px solid var(--border);
}

.type-option {
    flex: 1;
    text-align: center;
    padding: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px;
    color: var(--text-muted);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.type-option input {
    display: none;
}

.type-option.active {
    background-color: var(--bg-card);
    color: var(--primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Total Row */
.cart-total-row {
    background: linear-gradient(to right, var(--bg-soft), var(--bg-card));
    border: 1px solid var(--border);
}

.cart-total-label {
    font-weight: 700;
    color: var(--text-main);
}

.cart-total-value {
    font-weight: 800;
    font-size: 18px;
    color: var(--primary-dark);
}

/* Empty State */
.cart-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 15px;
    background: var(--bg-soft);
    border-radius: 12px;
    border: 1px dashed var(--border);
}


/* Premium Send Button */
#sendWhatsAppBtn {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    /* WhatsApp Colors */
    color: white;
    font-size: 16px;
    font-weight: 700;
    padding: 14px 24px;
    border-radius: 12px;
    border: none;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    cursor: pointer;
}

#sendWhatsAppBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.6);
    filter: brightness(1.05);
}

#sendWhatsAppBtn:active {
    transform: translateY(0);
}

#sendWhatsAppBtn:disabled {
    background: var(--text-muted);
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.7;
}

/* Continue Shopping Button (Secondary) */
#continueShoppingBtn {
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border);
    transition: all 0.2s;
}

#continueShoppingBtn:hover {
    background: var(--bg-soft);
    color: var(--text-main);
}


/* Refined Cart Dimensions */
#cartModal {
    max-width: 450px !important;
    /* Reduced from 600px */
    width: 95%;
    /* Responsive width */
}

#sendWhatsAppBtn {
    padding: 10px 20px !important;
    /* Reduced padding */
    font-size: 15px !important;
    /* Slightly smaller font */
    border-radius: 10px !important;
}

.cart-items {
    max-height: 250px !important;
    /* Slightly reduced height */
}


/* Fix Cart Modal Footer Layout */
.modal-footer {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

#sendWhatsAppBtn {
    width: auto !important;
    flex: 2 !important;
    /* Take up more space but share with other button */
    margin: 0 !important;
}

#continueShoppingBtn {
    flex: 1 !important;
    white-space: nowrap;
    text-align: center;
}

/* Ensure modal doesn't overflow screen on small devices */
#cartModal {
    max-height: 85vh !important;
    display: flex !important;
    flex-direction: column !important;
}

.cart-items {
    flex: 1 !important;
    /* Allow items to grow/shrink */
    overflow-y: auto !important;
    min-height: 100px !important;
}


/* Cart Quantity Controls */
.qty-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 2px;
}

.qty-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-soft);
    border-radius: 6px;
    font-weight: 700;
    color: var(--text-main);
    cursor: pointer;
    transition: background 0.2s;
}

.qty-btn:hover {
    background: var(--border);
}

.qty-val {
    font-size: 13px;
    font-weight: 600;
    min-width: 16px;
    text-align: center;
}


/* Cart Item Image */
.cart-item-thumb {
    background-color: var(--bg-soft);
}


/* Product Notes in Modal */
#productNotes {
    margin-bottom: 10px;
    font-size: 13px;
}


/* Sticky Bottom Cart for Mobile */
@media (max-width: 768px) {
    #cartSummary {
        position: fixed;
        bottom: 20px;
        left: 20px;
        right: 20px;
        z-index: 9999;
        background: var(--primary);
        color: #fff;
        border-radius: 12px;
        padding: 12px 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        animation: slideUp 0.3s ease-out;
    }

    /* Hide the original topbar cart if needed, or just restyle it */
    /* Actually, #cartSummary IS the element. Moving it via CSS is enough. */
    /* But we need to ensure it doesn't look like a topbar item anymore. */

    .topbar-actions #cartSummary {
        /* Override topbar specific styles if any */
        margin-left: 0;
    }

    /* Adjust inner text colors for the dark background */
    #cartSummary .cart-text-main {
        color: #fff;
        font-size: 15px;
        font-weight: 700;
    }

    #cartSummary .cart-text-sub {
        color: rgba(255, 255, 255, 0.9);
        font-size: 13px;
    }

    #cartSummary .cart-icon {
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
    }

    #cartSummary .cart-badge {
        background: #fff;
        color: var(--primary);
    }

    /* Add padding to bottom of page so content isn't hidden behind cart */
    body {
        padding-bottom: 100px;
    }

    @keyframes slideUp {
        from {
            transform: translateY(100%);
            opacity: 0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
}


/* Premium Sticky Bottom Cart for Mobile */
@media (max-width: 768px) {
    #cartSummary {
        position: fixed;
        bottom: 16px;
        left: 16px;
        right: 16px;
        z-index: 9999;

        /* Premium Gradient Background */
        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark, #d97706) 100%);

        color: #fff;
        border-radius: 16px;
        padding: 12px 20px;

        /* Stronger Shadow */
        box-shadow: 0 8px 24px rgba(245, 158, 11, 0.4);

        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;

        /* Glass border effect */
        border: 1px solid rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);

        transition: transform 0.2s, box-shadow 0.2s;
    }

    #cartSummary:active {
        transform: scale(0.98);
    }

    /* Hide the default cart icon container to simplify */
    #cartSummary .cart-icon {
        display: none;
    }

    /* Re-layout the text */
    #cartSummary>div {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        justify-content: space-between;
    }

    /* Main Text "سلة الطلبات" -> Hide or Change */
    #cartSummary .cart-text-main {
        display: none;
        /* Hide "سلة الطلبات" label */
    }

    /* Sub Text (Count - Total) -> Style as Price */
    #cartSummary .cart-text-sub {
        color: #fff;
        font-size: 16px;
        font-weight: 800;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* Custom "View Cart" Label injected via CSS or just rely on the badge? */
    /* Let's use the badge as the "View Cart" button look */

    #cartSummary .cart-badge {
        background: #fff;
        color: var(--primary);
        font-weight: 700;
        padding: 6px 14px;
        border-radius: 20px;
        font-size: 13px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        gap: 4px;
    }

    /* Add an arrow to the badge via pseudo-element */
    #cartSummary .cart-badge::after {
        content: '←';
        /* RTL arrow */
        font-size: 14px;
        margin-right: 4px;
    }

    /* Ensure body padding */
    body {
        padding-bottom: 90px;
    }
}


/* Oval Sticky Bottom Cart for Mobile */
@media (max-width: 768px) {
    #cartSummary {
        /* Make it pill-shaped */
        border-radius: 50px !important;

        /* Adjust padding for the curve */
        padding: 10px 24px !important;

        /* Ensure it floats nicely */
        bottom: 20px;
        left: 20px;
        right: 20px;

        /* Enhance the glass/gradient look */
        background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.95) 0%, rgba(var(--primary-dark-rgb), 0.95) 100%);
        /* Fallback if vars aren't rgb */
        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark, #d97706) 100%);

        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
        border: 1px solid rgba(255, 255, 255, 0.3);
    }

    /* Adjust the badge inside */
    #cartSummary .cart-badge {
        border-radius: 30px !important;
        padding: 6px 16px !important;
        background: rgba(255, 255, 255, 0.9) !important;
        color: var(--primary) !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    /* Adjust text spacing */
    #cartSummary .cart-text-sub {
        font-size: 16px;
        font-weight: 800;
        letter-spacing: 0.5px;
    }
}


/* Toast Notification (Consolidated & Optimized) */
#toast-notification {
    /* Positioning: Top Center */
    position: fixed !important;
    top: 20px !important;
    left: 50% !important;
    transform: translate(-50%, -150%) !important;
    /* Hidden above */
    bottom: auto !important;
    /* Changed from unset to auto */
    right: auto !important;
    z-index: 10000 !important;

    /* Size & Layout */
    width: fit-content !important;
    max-width: 80% !important;
    min-width: unset !important;
    height: fit-content !important;
    /* Force fit content */
    min-height: unset !important;
    max-height: 60px !important;
    /* Hard limit */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* Appearance: Premium Dark Glass */
    background: rgba(15, 23, 42, 0.75) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;

    /* Typography & Spacing */
    padding: 8px 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;

    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#toast-notification.show {
    transform: translate(-50%, 0) !important;
}


/* Modern Footer Redesign */
.site-footer {
    background: #1a1a1a;
    color: #e5e5e5;
    padding: 60px 20px 30px;
    margin-top: 60px;
    border-top: 4px solid var(--primary);
    font-size: 14px;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

/* Brand Section */
.footer-title {
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 16px;
}

.footer-desc {
    color: #a3a3a3;
    line-height: 1.6;
    margin-bottom: 24px;
    max-width: 300px;
}

.footer-social-modern {
    display: flex;
    gap: 12px;
}

.social-link {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s;
    font-size: 12px;
    /* Placeholder text size */
}

.social-link:hover {
    background: var(--primary);
    transform: translateY(-3px);
}

/* Info Section */
.footer-heading {
    color: #fff;
    font-size: 18px;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
}

.footer-heading::after {
    content: '';
    position: absolute;
    bottom: -8px;
    right: 0;
    width: 40px;
    height: 3px;
    background: var(--primary);
    border-radius: 2px;
}

.footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #d4d4d4;
}

.footer-list .icon {
    font-size: 18px;
    opacity: 0.8;
}

.footer-list a {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.3);
    padding-bottom: 2px;
    transition: color 0.2s;
}

.footer-list a:hover {
    color: var(--primary);
    border-color: var(--primary);
}

/* QR Section */
.footer-qr-section {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}

.qr-card {
    background: #fff;
    padding: 12px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    width: fit-content;
}

.qr-card img {
    width: 120px;
    height: 120px;
    display: block;
    margin-bottom: 8px;
}

.qr-card span {
    color: #333;
    font-weight: 700;
    font-size: 12px;
    display: block;
}

/* Bottom Bar */
.footer-bottom-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    color: #737373;
    font-size: 13px;
}

.powered-by strong {
    color: #fff;
}

/* Responsive */
@media (max-width: 768px) {
    .footer-container {
        grid-template-columns: 1fr;
        gap: 32px;
        text-align: center;
    }

    .footer-heading::after {
        right: 50%;
        transform: translateX(50%);
    }

    .footer-qr-section {
        justify-content: center;
    }

    .footer-social-modern {
        justify-content: center;
    }

    .footer-list li {
        justify-content: center;
    }

    .footer-bottom-bar {
        flex-direction: column;
        text-align: center;
    }

    /* Ensure footer doesn't hide behind sticky cart */
    .site-footer {
        padding-bottom: 100px;
    }
}


/* Light Theme Footer Update */
.site-footer {
    background: var(--bg-card) !important;
    /* Was #1a1a1a */
    color: var(--text-main) !important;
    /* Was #e5e5e5 */
    border-top: 1px solid var(--border) !important;
    /* Softer border */
}

/* Update Text Colors for Light Theme */
.footer-title {
    color: var(--text-main) !important;
}

.footer-desc {
    color: var(--text-muted) !important;
}

.footer-heading {
    color: var(--text-main) !important;
}

.footer-list li {
    color: var(--text-muted) !important;
}

.footer-list a {
    color: var(--text-main) !important;
    border-color: var(--border) !important;
}

.footer-bottom-bar {
    border-top: 1px solid var(--border) !important;
    color: var(--text-muted) !important;
}

.powered-by strong {
    color: var(--text-main) !important;
}

/* Social Icons Styling */
.social-link {
    background: var(--bg-soft) !important;
    /* Was rgba(255,255,255,0.1) */
    color: var(--text-main) !important;
}

.social-link:hover {
    background: var(--primary) !important;
    color: #fff !important;
}

/* QR Card Shadow for Light Theme */
.qr-card {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid var(--border);
}


/* Compact Footer Updates */
.site-footer {
    padding: 30px 20px 20px !important;
    /* Reduced from 60px... */
    margin-top: 40px !important;
}

.footer-container {
    gap: 20px !important;
    /* Reduced from 40px */
    margin-bottom: 20px !important;
}

/* Brand Section */
.footer-title {
    font-size: 20px !important;
    /* Reduced from 24px */
    margin-bottom: 10px !important;
}

.footer-desc {
    font-size: 13px !important;
    margin-bottom: 16px !important;
    line-height: 1.4 !important;
}

.social-link {
    width: 32px !important;
    /* Reduced from 40px */
    height: 32px !important;
}

/* Info Section */
.footer-heading {
    font-size: 16px !important;
    /* Reduced from 18px */
    margin-bottom: 12px !important;
}

.footer-list {
    gap: 10px !important;
    /* Reduced from 16px */
}

.footer-list li {
    font-size: 13px !important;
}

.footer-list .icon {
    font-size: 16px !important;
}

/* QR Section */
.qr-card {
    padding: 8px !important;
    border-radius: 12px !important;
}

.qr-card img {
    width: 80px !important;
    /* Reduced from 120px */
    height: 80px !important;
    margin-bottom: 4px !important;
}

.qr-card span {
    font-size: 11px !important;
}

/* Bottom Bar */
.footer-bottom-bar {
    padding-top: 16px !important;
    font-size: 12px !important;
}


/* Resize Footer QR Code */
.qr-card img {
    width: 110px !important;
    /* Increased from 80px */
    height: 110px !important;
}

.qr-card {
    padding: 10px !important;
    /* Slightly more padding */
}


/* Center Footer Description on Mobile */
@media (max-width: 768px) {
    .footer-desc {
        margin-left: auto !important;
        margin-right: auto !important;
        /* Ensure text alignment is also center */
        text-align: center !important;
    }
}


/* Footer Theme Toggle */
.theme-toggle-footer {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    color: var(--text-main);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.2s;
    margin-left: 10px;
    /* Spacing */
}

.theme-toggle-footer:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    transform: rotate(15deg);
}

/* Update JS logic if needed? 
   The JS likely toggles the icon text content. 
   We should check index.js to see how it updates the icon.
   Usually it checks .textContent.
*/


/* Increase Logo Size on Mobile */
@media (max-width: 768px) {
    .brand-logo {
        width: 60px !important;
        height: 60px !important;
        font-size: 24px !important;
        /* Increase text size inside */
        border-radius: 16px !important;
    }

    /* Slightly increase title size to match */
    .brand-title {
        font-size: 18px !important;
    }
}


/* Enhanced Status Badge */
.hero-tag {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    padding: 6px 14px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    color: #1f2937 !important;
    /* Always dark text for contrast on white */
    backdrop-filter: blur(4px);
}

body.dark-theme .hero-tag {
    background: rgba(30, 41, 59, 0.95) !important;
    color: #f1f5f9 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Pulse Animation for the Dot */
@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

@keyframes pulse-red {
    0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

.hero-tag .dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50%;
    display: inline-block;
    /* Animation will be applied via JS or we can force it here if we know the color */
    /* Since color is dynamic in JS, we'll add a generic pulse class if possible, 
       but for now let's just make the dot bigger and rely on the JS inline styles for color.
    */
}


/* Glowing Status Badge */
.hero-tag {
    transition: all 0.3s ease;
    border-width: 1px !important;
    border-style: solid !important;
}

.hero-tag.open {
    border-color: #22c55e !important;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.4), 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

.hero-tag.closed {
    border-color: #ef4444 !important;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.4), 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

/* Ensure text is readable */
.hero-tag {
    font-size: 12px !important;
    /* Keep it compact */
    padding: 5px 12px !important;
}


/* Increase Hero Image Height */
.hero-media {
    min-height: 260px !important;
    /* Increased from 200px */
}

/* Ensure it looks good on mobile too */
@media (max-width: 768px) {
    .hero-media {
        min-height: 240px !important;
    }
}

/* Mobile Status Badge Fix */
@media (max-width: 768px) {
    .hero-tag {
        top: 16px !important;
        left: 16px !important;
        font-size: 10px !important;
        padding: 4px 10px !important;
    }
}


/* Redesigned Send Button */
.btn-wa-send {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
    /* Dynamic Gradient */
    border-radius: 50px !important;
    /* Oval */
    padding: 14px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 15px var(--primary-alpha) !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
    width: 100%;
}

.btn-wa-send:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--primary-alpha) !important;
}

.btn-wa-send svg {
    fill: white !important;
}


/* Locate Me Button */
.btn-locate {
    background: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}

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


/* Modern Select Dropdown */
#deliveryZoneSelect {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: left 12px center;
    /* RTL: arrow on left */
    background-size: 16px;
    padding: 10px 12px 10px 40px !important;
    /* Extra padding for arrow */
    border-radius: 8px;
    border: 1px solid var(--border);
    background-color: var(--bg-card);
    color: var(--text-main);
    font-size: 14px;
    width: 100%;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

#deliveryZoneSelect:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
    outline: none;
}

/* =========================================
   MOBILE RESPONSIVENESS FIXES
   ========================================= */
@media (max-width: 768px) {
    .hero {
        grid-template-columns: 1fr;
        /* Stack vertically */
        display: flex;
        flex-direction: column-reverse;
        /* Image on top, text below */
        padding: 16px;
        gap: 16px;
        height: auto !important;
        /* Allow auto height */
    }

    .hero-media {
        width: 100%;
        height: 200px;
        /* Fixed height for mobile image container */
        min-height: auto;
    }

    .hero-img {
        width: 100%;
        height: 100%;
        position: static;
        /* Reset absolute positioning if any */
    }

    .hero-content {
        text-align: center;
        padding-top: 10px;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-badges {
        justify-content: center;
    }

    /* Fix Status Badge on Mobile */
    .status-badge-container {
        position: relative;
        top: auto;
        right: auto;
        margin-bottom: 10px;
        display: inline-block;
    }

    /* Performance Fix: Simplify background on mobile to prevent scroll tearing */
    body {
        background: var(--bg) !important;
        background-attachment: scroll !important;
    }

    /* Disable heavy effects on mobile */
    .card-tag {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* Footer Theme Toggle */
.theme-toggle-footer {
    width: 44px;
    /* Increased touch target */
    height: 44px;
    /* Increased touch target */
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    box-shadow: var(--shadow-soft);
    transition: all 0.2s;
    z-index: 10;
    /* Ensure clickable */
}

.theme-toggle-footer:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

/* Hide floating elements when modal is open */
body.modal-open {
    overflow: hidden !important;
    height: 100vh;
}

body.modal-open .theme-toggle-footer,
body.modal-open #cartSummary {
    display: none !important;
}

/* Hide Cart Summary by default to prevent flash */
/* Hide Cart Summary by default to prevent flash */
/* =========================================
   RESPONSIVE CART DESIGN (Desktop: Header | Mobile: Floating)
   ========================================= */

/* DESKTOP: Header Button Style */
#floatingCartContainer {
    display: none;
    /* Hidden by default, JS shows it */
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    background-color: var(--bg-card);
    box-shadow: var(--shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    border: 1px solid var(--border);
    color: var(--text-main);

    /* Reset Fixed Position logic just in case */
    position: static !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    z-index: 100 !important;
}

#floatingCartContainer:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
}

/* Desktop Badge */
#floatingCartContainer .cart-count-pill {
    background: var(--primary-alpha);
    color: var(--primary);
    border: 1px solid var(--primary);
    font-weight: 700;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 99px;
    box-shadow: none;
}

#floatingCartContainer .cart-price-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

#floatingCartContainer #viewCartText {
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Hide when modal is open (Desktop) */
body.modal-open #floatingCartContainer {
    display: none !important;
}

/* FORCE MOBILE LAYOUT */
@media (max-width: 768px) {
    #floatingCartContainer {
        width: 92% !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 auto !important;
        bottom: 20px !important;
        /* display: flex !important; REMOVED to allow JS to hide it */
        flex-direction: row !important;
        /* Force row on mobile */
        justify-content: space-between !important;
        align-items: center !important;
        direction: rtl !important;
        gap: 15px !important;
        position: fixed !important;
        /* Ensure fixed position */

        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        z-index: 99999 !important;

        /* Mobile Specific Background */
        background: rgba(15, 23, 42, 0.85) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        border-radius: 100px !important;
        padding: 12px 20px !important;
        color: white !important;
    }

    /* Mobile Badge Override */
    #floatingCartContainer .cart-count-pill {
        background: var(--primary) !important;
        color: white !important;
        border: none !important;
        box-shadow: 0 2px 5px var(--primary-alpha) !important;
    }

    /* Hide when modal is open (Mobile Only) */
    body.modal-open #floatingCartContainer {
        display: none !important;
    }
}

/* Footer Contact List Styles */
.footer-contact-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 15px;
}

.footer-contact-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-soft);
    padding: 10px 15px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-main);
    transition: background 0.2s;
    border: 1px solid var(--border);
}

.footer-contact-row:hover {
    background: var(--bg-modal);
    border-color: var(--primary);
}

.footer-contact-row .contact-label {
    font-weight: 500;
    font-size: 0.95rem;
}

.footer-contact-row .contact-number {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-sub);
    font-size: 0.9rem;
}

.footer-contact-row .contact-icon {
    font-size: 1.1rem;
}


.footer-contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    color: inherit;
    font-size: 14px;
}

@media (max-width: 768px) {
    .footer-contact-item {
        justify-content: center;
    }
}