/* ==========================================================================
   Zakaas Bites - High-Contrast Premium Light Mode CSS Stylesheet
   Crafted for visual excellence, deep contrast, and crystal-clear readability.
   ========================================================================== */

html.light,
html[data-theme="light"] {
    color-scheme: light;
}

/* 1. Page Base & Body */
html.light,
html.light body {
    background-color: #f8fafc !important;
    color: #0f172a !important;
}

/* 2. Top Header & Navbars */
html.light header,
html.light [class*="bg-\[\#090d16\]"],
html.light [class*="bg-\[\#0b0f17\]"] {
    background-color: rgba(255, 255, 255, 0.98) !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05) !important;
}

/* 3. Sidebar (Admin Portal) */
html.light aside,
html.light [class*="bg-\[\#0d131f\]"] {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}

html.light aside .border-b,
html.light aside .border-t,
html.light aside .border-r,
html.light aside [class*="border-slate-800"] {
    border-color: #e2e8f0 !important;
}

html.light aside nav a.text-slate-300 {
    color: #334155 !important;
    font-weight: 600;
}

html.light aside nav a.text-slate-300:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

html.light aside .text-slate-400 {
    color: #64748b !important;
    font-weight: 700;
}

html.light aside [class*="bg-slate-900"] {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

/* 4. Primary Outer Cards (Food Items, Orders, Stats, Categories) */
html.light [class*="bg-slate-900"],
html.light [class*="bg-\[\#0f172a\]"],
html.light [class*="bg-\[\#0d131f\]"],
html.light [class*="bg-\[\#0e1422\]"],
html.light .rounded-3xl.card-hover-glow,
html.light .rounded-3xl.group {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 15px -1px rgba(15, 23, 42, 0.05), 0 2px 6px -2px rgba(15, 23, 42, 0.03) !important;
    color: #0f172a !important;
}

/* 5. Nested Inner Blocks (Customer Info, Order Items Breakdown, Sub-boxes in Admin) */
html.light [class*="bg-slate-950"]:not(.cart-badge-counter):not([x-show*="totalCartItems"]),
html.light [class*="bg-slate-800"] {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #1e293b !important;
}

/* Customer Information Block inside Order Card */
html.light [class*="bg-slate-950\/70"],
html.light [class*="bg-slate-950\/50"],
html.light .bg-slate-950\/70,
html.light .bg-slate-950\/50 {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
}

/* Customer Name in Order Card */
html.light [class*="bg-slate-950"] .text-white,
html.light [class*="bg-slate-950"] span.text-white {
    color: #0f172a !important;
    font-weight: 800 !important;
}

/* Customer Phone Link */
html.light [class*="bg-slate-950"] a[href^="tel:"],
html.light a[href^="tel:"] {
    color: #d97706 !important;
    font-weight: 800 !important;
}

/* Customer Address & Table Information */
html.light [class*="bg-slate-950"] .text-slate-300,
html.light [class*="bg-slate-950"] .text-slate-400 {
    color: #334155 !important;
    font-weight: 500 !important;
}

/* Order Item Breakdown Header */
html.light [class*="bg-slate-950"] .text-slate-400.font-semibold {
    color: #475569 !important;
    font-weight: 700 !important;
}

/* Order Item Quantity Badges e.g. '1x', '2x' */
html.light .w-4.h-4.bg-slate-800,
html.light span.w-4.h-4 {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
    font-weight: 800 !important;
}

/* Order Item Subtotal Prices */
html.light [class*="text-slate-400 font-mono"],
html.light .font-mono {
    color: #475569 !important;
    font-weight: 700 !important;
}

/* 6. Typography & Text Contrast */
html.light h1,
html.light h2,
html.light h3,
html.light h4,
html.light .font-heading,
html.light .text-white,
html.light .text-slate-100,
html.light .text-slate-200 {
    color: #0f172a !important;
    text-shadow: none !important;
}

/* Remove dark-mode blur shadows and drop-shadows on typography in Light Mode */
html.light h1,
html.light h1 span,
html.light h2,
html.light h2 span,
html.light h3,
html.light h3 span,
html.light h4,
html.light .font-heading,
html.light span[class*="drop-shadow"],
html.light p[class*="drop-shadow"],
html.light a[class*="drop-shadow"],
html.light [class*="drop-shadow-"] {
    text-shadow: none !important;
    filter: none !important;
    box-shadow: none !important;
}

html.light .text-slate-300 {
    color: #334155 !important;
}

html.light p,
html.light .text-slate-400 {
    color: #64748b !important;
}

html.light .text-slate-500,
html.light .text-slate-600 {
    color: #64748b !important;
}

/* High contrast Amber text on Light Background */
html.light .text-brand-400,
html.light .text-amber-400,
html.light .text-yellow-400 {
    color: #d97706 !important;
    /* rich amber-600 */
}

html.light .text-brand-300,
html.light .text-amber-300 {
    color: #b45309 !important;
    /* amber-700 */
}

/* Group hover colors on card titles */
html.light .group:hover h3,
html.light .group:hover [class*="group-hover:text-amber"],
html.light .group:hover [class*="group-hover:text-brand"] {
    color: #d97706 !important;
}

/* 7. Special Direct Delivery Zone Cards (Hero Console Card & Zone 1 Ordering Guide Card) */
html.light .direct-delivery-card,
html.light .bg-gradient-to-br.from-amber-500\/15.via-slate-900,
html.light [class*="from-amber-500\/15"][class*="via-slate-900"],
html.light [class*="from-amber-500\/15"][class*="to-slate-950"],
html.light [class*="from-amber-500\/15"][class*="to-slate-900"] {
    background-image: linear-gradient(135deg, #fffbeb 0%, #fef3c7 40%, #ffffff 100%) !important;
    background-color: #fffbeb !important;
    border: 2px solid #f59e0b !important;
    box-shadow: 0 10px 25px -5px rgba(245, 158, 11, 0.18), 0 4px 6px -2px rgba(0, 0, 0, 0.04) !important;
    color: #0f172a !important;
}

html.light .direct-delivery-card h3,
html.light [class*="from-amber-500\/15"][class*="via-slate-900"] h3,
html.light [class*="from-amber-500\/15"][class*="to-slate-950"] h3,
html.light [class*="from-amber-500\/15"][class*="to-slate-900"] h3 {
    color: #0f172a !important;
    font-weight: 900 !important;
}

html.light .direct-delivery-card p,
html.light [class*="from-amber-500\/15"][class*="via-slate-900"] p,
html.light [class*="from-amber-500\/15"][class*="to-slate-950"] p,
html.light [class*="from-amber-500\/15"][class*="to-slate-900"] p {
    color: #334155 !important;
    font-weight: 500 !important;
}

html.light .direct-delivery-card strong,
html.light [class*="from-amber-500\/15"][class*="via-slate-900"] strong,
html.light [class*="from-amber-500\/15"][class*="to-slate-950"] strong,
html.light [class*="from-amber-500\/15"][class*="to-slate-900"] strong {
    color: #b45309 !important;
    font-weight: 800 !important;
}

html.light .direct-delivery-card ul,
html.light .direct-delivery-card li,
html.light .direct-delivery-card li span,
html.light [class*="from-amber-500\/15"][class*="via-slate-900"] ul,
html.light [class*="from-amber-500\/15"][class*="via-slate-900"] li,
html.light [class*="from-amber-500\/15"][class*="via-slate-900"] li span,
html.light [class*="from-amber-500\/15"][class*="to-slate-950"] ul,
html.light [class*="from-amber-500\/15"][class*="to-slate-950"] li,
html.light [class*="from-amber-500\/15"][class*="to-slate-950"] li span,
html.light [class*="from-amber-500\/15"][class*="to-slate-900"] ul,
html.light [class*="from-amber-500\/15"][class*="to-slate-900"] li,
html.light [class*="from-amber-500\/15"][class*="to-slate-900"] li span {
    color: #1e293b !important;
    font-weight: 600 !important;
}

html.light .direct-delivery-card li i,
html.light [class*="from-amber-500\/15"][class*="via-slate-900"] li i,
html.light [class*="from-amber-500\/15"][class*="to-slate-950"] li i,
html.light [class*="from-amber-500\/15"][class*="to-slate-900"] li i {
    color: #16a34a !important;
}

html.light .direct-delivery-card .bg-emerald-500\/20,
html.light [class*="from-amber-500\/15"][class*="via-slate-900"] .bg-emerald-500\/20,
html.light [class*="from-amber-500\/15"][class*="to-slate-950"] .bg-emerald-500\/20,
html.light [class*="from-amber-500\/15"][class*="to-slate-900"] .bg-emerald-500\/20 {
    background-color: #ecfdf5 !important;
    color: #047857 !important;
    border: 1px solid #a7f3d0 !important;
    font-weight: 800 !important;
}

html.light .direct-delivery-card .border-t,
html.light [class*="from-amber-500\/15"] .border-t {
    border-color: #fde68a !important;
}

/* 8. Combos Cards & Other Dark Gradients on Home Page */
html.light .bg-gradient-to-b.from-slate-900,
html.light [class*="from-slate-900"][class*="to-\[\#101726\]"],
html.light [class*="from-slate-900"] {
    background-image: none !important;
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}

/* 9. Sections on Home Page (How It Works, Bestsellers) */
html.light #how-it-works,
html.light [class*="bg-\[\#0f172a\]\/70"] {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

html.light #bestsellers,
html.light [class*="bg-\[\#0c121d\]"] {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}

html.light #how-it-works [class*="bg-slate-900\/60"] {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03) !important;
}

html.light #how-it-works [class*="bg-amber-500\/10"].w-12.h-12 {
    background-color: #fef3c7 !important;
    color: #b45309 !important;
    border: 1px solid #fde68a !important;
}

/* Zone 2 Delivery Radius Policy Card on Home Page */
html.light [class*="bg-slate-900\/90"] a[href*="menu"].bg-slate-800 {
    background-color: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #1e293b !important;
}

html.light [class*="bg-slate-900\/90"] a[href*="menu"].bg-slate-800:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
}

/* 10. Website Footer (User Side) */
html.light footer,
html.light [class*="bg-\[\#070a10\]"] {
    background-color: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    color: #334155 !important;
}

html.light footer .font-heading,
html.light footer h4,
html.light footer span.text-white,
html.light footer strong.text-white {
    color: #0f172a !important;
}

html.light footer p,
html.light footer li,
html.light footer a,
html.light footer button {
    color: #475569 !important;
}

html.light footer a:hover,
html.light footer button:hover {
    color: #d97706 !important;
}

html.light footer [class*="border-slate-900"],
html.light footer .border-t {
    border-color: #e2e8f0 !important;
}

html.light footer [class*="text-slate-600"] {
    color: #64748b !important;
}

/* Mobile Sticky Bottom Bar */
html.light [class*="bg-\[\#0d131f\]\/95"] {
    background-color: rgba(255, 255, 255, 0.98) !important;
    border-top: 1px solid #e2e8f0 !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08) !important;
}

/* 11. Special Callout & Alert Boxes */
html.light [class*="bg-amber-500\/10"]:not([class*="blur"]),
html.light [class*="bg-amber-500\/15"]:not([class*="blur"]),
html.light [class*="bg-amber-500\/20"]:not([class*="blur"]) {
    background-color: #fef3c7 !important;
    border-color: #fde68a !important;
    color: #92400e !important;
    font-weight: 600 !important;
}

/* In Light Mode: Remove the shadow, blur filter, and opacity that caused the white haze */
html.light [class*="rounded-full"][class*="blur-3xl"],
html.light [class*="rounded-full"][class*="blur-2xl"],
html.light [class*="rounded-full"][class*="blur-xl"],
html.light [class*="blur-3xl"],
html.light [class*="blur-2xl"],
html.light [class*="blur-xl"],
html.light .direct-delivery-card [class*="blur"] {
    filter: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Elevate card content (excluding absolute background decorations) and hero grid */
html.light .direct-delivery-card>div:not([class*="absolute"]),
html.light section .grid {
    position: relative !important;
    z-index: 2 !important;
}

html.light .direct-delivery-card>div[class*="absolute"] {
    position: absolute !important;
}

/* Dietary Badges: Veg, Jain, Spicy */
html.light .veg-symbol {
    border-color: #16a34a !important;
}

html.light .veg-symbol::after {
    background-color: #16a34a !important;
}

html.light [class*="bg-rose-500\/10"],
html.light [class*="bg-rose-500\/15"],
html.light [class*="bg-rose-500\/20"] {
    background-color: #ffe4e6 !important;
    border-color: #fecdd3 !important;
    color: #e11d48 !important;
    font-weight: 700 !important;
}

/* 12. Category Navigation Bar (in Menu) */
html.light [class*="bg-\[\#0e1422\]"] {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
}

html.light [class*="bg-\[\#0e1422\]"] button {
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
    font-weight: 700 !important;
}

html.light [class*="bg-\[\#0e1422\]"] button:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
}

html.light [class*="bg-\[\#0e1422\]"] button.bg-brand-500,
html.light [class*="bg-\[\#0e1422\]"] button[class*="bg-brand-500"] {
    background-color: #f59e0b !important;
    color: #020617 !important;
    border-color: #f59e0b !important;
    font-weight: 900 !important;
}

/* Filter chips beside search in Menu */
html.light .h-11.rounded-xl.bg-slate-900:not(.bg-amber-500):not(.bg-rose-500) {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}

/* 13. GPS Delivery Radius Notice */
html.light [class*="bg-slate-900\/90"] {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
}

html.light [class*="border-emerald-500\/35"],
html.light [class*="border-emerald-500"] {
    background-color: #f0fdf4 !important;
    border-color: #86efac !important;
}

html.light [class*="border-emerald-500"] span.font-bold,
html.light [class*="border-emerald-500"] div.font-bold {
    color: #0f172a !important;
}

html.light [class*="border-emerald-500"] span.text-emerald-300,
html.light [class*="border-emerald-500"] div.text-emerald-300 {
    color: #166534 !important;
    font-weight: 600 !important;
}

html.light [class*="border-emerald-500"] button {
    background-color: #ffffff !important;
    border-color: #86efac !important;
    color: #15803d !important;
    font-weight: 800 !important;
}

/* 14. Form Inputs, Selects & Textareas */
html.light input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]),
html.light select,
html.light textarea {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
    font-weight: 500 !important;
}

html.light input::placeholder,
html.light textarea::placeholder {
    color: #94a3b8 !important;
}

html.light input:focus,
html.light select:focus,
html.light textarea:focus {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18) !important;
    outline: none !important;
}

/* 15. Badges & Chips */
html.light .bg-slate-800,
html.light [class*="bg-slate-800"] {
    background-color: #f1f5f9 !important;
    color: #334155 !important;
    border-color: #cbd5e1 !important;
    font-weight: 600 !important;
}

/* Paid & Locked Badge */
html.light [class*="bg-emerald-500\/15"] {
    background-color: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
    color: #047857 !important;
    font-weight: 700 !important;
}

/* Pending Badge */
html.light [class*="bg-amber-500\/15"] {
    background-color: #fffbeb !important;
    border-color: #fde68a !important;
    color: #b45309 !important;
    font-weight: 700 !important;
}

/* 16. Floating Bottom Cart Bar (Menu) */
html.light .fixed.bottom-3,
html.light .fixed.bottom-5 {
    background-color: #ffffff !important;
    border: 2px solid #f59e0b !important;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15), 0 0 20px rgba(245, 158, 11, 0.25) !important;
    color: #0f172a !important;
}

html.light .fixed.bottom-3 .text-slate-400,
html.light .fixed.bottom-5 .text-slate-400 {
    color: #64748b !important;
    font-weight: 700 !important;
}

html.light .fixed.bottom-3 .text-white,
html.light .fixed.bottom-5 .text-white {
    color: #0f172a !important;
    font-weight: 900 !important;
}

/* 17. Universal Borders */
html.light [class*="border-slate-800"],
html.light [class*="border-slate-700"] {
    border-color: #e2e8f0 !important;
}

/* 18. Action Buttons in Light Mode */
html.light .btn-primary-gradient,
html.light header button[class*="from-amber-500"],
html.light header button[\@click*="cartDrawerOpen"],
html.light button[\@click*="submitOrder"],
html.light div[x-show*="cartDrawerOpen"] button[class*="from-brand-500"],
html.light [class*="bg-gradient-to-r"][class*="from-amber-500"],
html.light [class*="bg-gradient-to-r"][class*="from-brand-500"] {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%) !important;
    background-color: #f59e0b !important;
    color: #020617 !important;
    font-weight: 800 !important;
    text-shadow: none !important;
    filter: none !important;
    border: 1px solid rgba(217, 119, 6, 0.45) !important;
    box-shadow: 0 4px 14px -1px rgba(217, 119, 6, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.05) !important;
}

html.light .btn-primary-gradient:hover,
html.light header button[\@click*="cartDrawerOpen"]:hover,
html.light button[\@click*="submitOrder"]:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #fcd34d 100%) !important;
    background-color: #fbbf24 !important;
    color: #000000 !important;
    text-shadow: none !important;
    border-color: #d97706 !important;
    box-shadow: 0 8px 22px -2px rgba(217, 119, 6, 0.45) !important;
}

html.light .btn-primary-gradient span:not(.cart-badge-counter):not([x-show*="totalCartItems"]),
html.light .btn-primary-gradient i,
html.light .btn-primary-gradient svg,
html.light header button[\@click*="cartDrawerOpen"] span:not(.cart-badge-counter):not([x-show*="totalCartItems"]),
html.light header button[\@click*="cartDrawerOpen"] i,
html.light button[\@click*="submitOrder"] span,
html.light button[\@click*="submitOrder"] i {
    color: #020617 !important;
    text-shadow: none !important;
    filter: none !important;
}

html.light .btn-primary-gradient:hover span:not(.cart-badge-counter):not([x-show*="totalCartItems"]),
html.light .btn-primary-gradient:hover i,
html.light .btn-primary-gradient:hover svg,
html.light header button[\@click*="cartDrawerOpen"]:hover span:not(.cart-badge-counter):not([x-show*="totalCartItems"]),
html.light header button[\@click*="cartDrawerOpen"]:hover i,
html.light button[\@click*="submitOrder"]:hover span,
html.light button[\@click*="submitOrder"]:hover i {
    color: #000000 !important;
    text-shadow: none !important;
}

/* Dedicated Cart Counter Badge Styling (Prevents white background from bg-slate-950 override) */
.cart-badge-counter,
html.light .cart-badge-counter,
html.dark .cart-badge-counter,
html.light header button span[x-show*="totalCartItems"],
html.dark header button span[x-show*="totalCartItems"] {
    background-color: #020617 !important;
    color: #fbbf24 !important;
    font-weight: 900 !important;
    border: 1px solid rgba(251, 191, 36, 0.5) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}


html.light .btn-add-action {
    background-color: #ffffff !important;
    color: #b45309 !important;
    border: 1.5px solid #f59e0b !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    font-weight: 800 !important;
    text-shadow: none !important;
    filter: none !important;
}

html.light .btn-add-action:hover {
    background-color: #f59e0b !important;
    color: #000000 !important;
    border-color: #f59e0b !important;
    text-shadow: none !important;
}

/* Details and auxiliary buttons in admin */
html.light a[href*="admin/orders/"] button,
html.light a[href*="admin/orders/"].bg-slate-800,
html.light [class*="bg-slate-800"].hover\:bg-slate-700 {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
    font-weight: 700 !important;
}

html.light [class*="bg-slate-800"].hover\:bg-slate-700:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
}

/* ==========================================================================
   19. MODALS, DRAWERS & BACKDROPS - ABSOLUTE CLARITY & HIGH CONSTRAST
   CRITICAL: Backdrops MUST ALWAYS remain dark translucent frosted overlays
   so the underlying page is visible and dimmed, exactly like dark mode!
   ========================================================================== */

/* Dark frosted backdrop for all modals and sliding drawers in Light Mode */
html.light .cart-drawer-backdrop,
html.light .modal-backdrop,
html.light .qr-modal-backdrop,
html.light .fixed.inset-0.bg-black\/80,
html.light .fixed.inset-0.bg-black\/85,
html.light .fixed.inset-0.bg-black\/75,
html.light .fixed.inset-0.bg-black\/70,
html.light .fixed.inset-0[class*="bg-black"],
html.light [class*="bg-black\/70"],
html.light [class*="bg-black\/75"],
html.light [class*="bg-black\/80"],
html.light [class*="bg-black\/85"],
html.light div.fixed.inset-0.backdrop-blur-sm,
html.light div.fixed.inset-0.backdrop-blur-md,
html.light div.fixed.inset-0.backdrop-blur-lg,
html.light div[x-show*="cartDrawerOpen"]>div.fixed.inset-0,
html.light div[x-show*="Drawer"]>div.fixed.inset-0,
html.light div[x-show*="drawer"]>div.fixed.inset-0,
html.light div[x-show*="Modal"]>div.fixed.inset-0,
html.light div[x-show*="modal"]>div.fixed.inset-0,
html.light div[x-show="qrModal"] {
    background-color: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    box-shadow: none !important;
    border: none !important;
}

/* Positioning wrappers must never have a solid background */
html.light div[x-show*="cartDrawerOpen"]>div.fixed.inset-y-0,
html.light div[x-show*="Drawer"]>div.fixed.inset-y-0,
html.light div[x-show*="drawer"]>div.fixed.inset-y-0 {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Sliding Cart Drawer Panel (The actual drawer container) */
html.light .cart-drawer-panel,
html.light .w-screen.max-w-md,
html.light [class*="max-w-md.bg-\[\#0c121e\]"],
html.light div[x-show*="cartDrawerOpen"] .w-screen,
html.light div[x-show*="Drawer"] .w-screen,
html.light div[x-show*="drawer"] .w-screen {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
    box-shadow: -10px 0 35px -5px rgba(15, 23, 42, 0.2) !important;
}

/* Cart Drawer Header */
html.light div[x-show*="cartDrawerOpen"] .w-screen>div:first-child,
html.light div[x-show*="cartDrawerOpen"] [class*="bg-slate-900\/60"] {
    background-color: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

html.light div[x-show*="cartDrawerOpen"] h3.font-heading {
    color: #0f172a !important;
}

/* Cart Items in Drawer */
html.light div[x-show*="cartDrawerOpen"] .space-y-3\.5>div,
html.light div[x-show*="cartDrawerOpen"] [class*="rounded-2xl.bg-slate-900"] {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

/* Cart Steppers in Drawer */
html.light div[x-show*="cartDrawerOpen"] .bg-slate-800.rounded-lg {
    background-color: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
}

html.light div[x-show*="cartDrawerOpen"] .bg-slate-800.rounded-lg button,
html.light div[x-show*="cartDrawerOpen"] .bg-slate-800.rounded-lg span {
    color: #0f172a !important;
}

/* Delivery Address & Details Block in Drawer */
html.light div[x-show*="cartDrawerOpen"] .space-y-4 [class*="bg-slate-900\/90"],
html.light div[x-show*="cartDrawerOpen"] .space-y-4 [class*="bg-slate-900\/60"] {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

/* Location Check Box Inside Drawer */
html.light div[x-show*="cartDrawerOpen"] [class*="bg-slate-950\/80"] {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

/* Inputs and Selects inside Drawer */
html.light div[x-show*="cartDrawerOpen"] input,
html.light div[x-show*="cartDrawerOpen"] select,
html.light div[x-show*="cartDrawerOpen"] textarea {
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

html.light div[x-show*="cartDrawerOpen"] input:focus,
html.light div[x-show*="cartDrawerOpen"] select:focus,
html.light div[x-show*="cartDrawerOpen"] textarea:focus {
    background-color: #ffffff !important;
    border-color: #f59e0b !important;
}

/* Drawer Footer Container */
html.light div[x-show*="cartDrawerOpen"] .border-t.bg-slate-950,
html.light div[x-show*="cartDrawerOpen"] [class*="border-t"][class*="bg-slate-950"] {
    background-color: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
}

/* Standalone Modal Windows (QR Modal, Order Success Modal, Out of Radius Modal, Admin Modals) */
html.light [role="dialog"],
html.light div[x-show="qrModal"]>div,
html.light div[x-show="orderSuccessModal"]>div:not(.fixed.inset-0),
html.light div[x-show="showOutOfRadiusModal"]>div:not(.fixed.inset-0),
html.light div[x-show*="Modal"]>div:not(.fixed.inset-0),
html.light div[x-show*="modal"]>div:not(.fixed.inset-0) {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25) !important;
}

/* 20. Login Page in Light Mode */
html.light .login-card {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.12) !important;
}

html.light .login-input {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

html.light .login-input:focus {
    background-color: #ffffff !important;
    border-color: #f59e0b !important;
}

html.light .login-input::placeholder {
    color: #94a3b8 !important;
}

/* 21. Custom Scrollbar for Light Mode */
html.light ::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
}

html.light ::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 9999px;
}

html.light ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8 !important;
}

/* 22. Card Hover Glow in Light Mode */
html.light .card-hover-glow:hover {
    border-color: rgba(245, 158, 11, 0.5) !important;
    box-shadow: 0 15px 30px -8px rgba(0, 0, 0, 0.08), 0 0 15px rgba(245, 158, 11, 0.15) !important;
}

/* Fast, non-blocking theme transition for main containers only (no lag on mobile) */
html.light body,
html.light header,
html.light aside,
html.light footer {
    transition: background-color 0.15s ease, border-color 0.15s ease;
}