/* Store colour themes. The customer picks one from the palette button (themes.js sets <html data-theme="...">).
   Without data-theme nothing here applies, so the store looks exactly as it did before.
   Only colours are touched: layout, sizes and behaviour stay as they are. */

/* ── the palettes ── */
html[data-theme="luxe"]     { --t-bg:#17110f; --t-card:#241a17; --t-card2:#2d211d; --t-line:#3d2e28; --ink:#f6ece0; --muted:#b9a89c; --green:#ff8a94; --green2:#ffa3ab; --mint:#ed1736; --gold:#5aa9ff; --t-a:#d6192d; --t-b:#8f0e19; --t-glow:rgba(237,23,54,.22); --t-hero:#2a1013; --t-foot-a:#3c070d; --t-foot-b:#7d0d18; --t-warn-bg:#3a2a14; --t-warn-ink:#ffd8a0; --t-warn-line:#6b4a1a; }
html[data-theme="midnight"] { --t-bg:#0d1424; --t-card:#151e33; --t-card2:#1c2744; --t-line:#26324d; --ink:#eef2fb; --muted:#9fb0cf; --green:#f5c768; --green2:#ffd98a; --mint:#f0b429; --gold:#f0b429; --t-a:#d99a12; --t-b:#9a6a05; --t-glow:rgba(240,180,41,.18); --t-hero:#121c36; --t-foot-a:#0a0f1c; --t-foot-b:#1a2748; --t-warn-bg:#33280f; --t-warn-ink:#f1d58a; --t-warn-line:#6a5416; }
html[data-theme="violet"]   { --t-bg:#140f22; --t-card:#1e1733; --t-card2:#271f44; --t-line:#33295a; --ink:#f1ecfb; --muted:#aa9fcb; --green:#c9b0ff; --green2:#dccbff; --mint:#8b5cf6; --gold:#f0abfc; --t-a:#8b5cf6; --t-b:#5b21b6; --t-glow:rgba(139,92,246,.25); --t-hero:#1d1438; --t-foot-a:#150a30; --t-foot-b:#3b1a82; --t-warn-bg:#33280f; --t-warn-ink:#f1d58a; --t-warn-line:#6a5416; }
html[data-theme="forest"]   { --t-bg:#f3f0e4; --t-card:#fffdf6; --t-card2:#f6f2e3; --t-line:#dcd6c0; --ink:#1f2a20; --muted:#66705f; --green:#1f5a3a; --green2:#2f7a52; --mint:#2f8f5b; --gold:#c8962e; --t-a:#2f8f5b; --t-b:#1b5e3b; --t-glow:rgba(47,143,91,.16); --t-hero:#e4efdc; --t-foot-a:#10321f; --t-foot-b:#1f5a3a; }
html[data-theme="sunset"]   { --t-bg:#fff6ec; --t-card:#ffffff; --t-card2:#fff0e0; --t-line:#f1d9c0; --ink:#3a2212; --muted:#8a6c55; --green:#c2410c; --green2:#ea580c; --mint:#f97316; --gold:#b45309; --t-a:#f97316; --t-b:#c2410c; --t-glow:rgba(249,115,22,.18); --t-hero:#ffe6cc; --t-foot-a:#5a1f06; --t-foot-b:#b04109; }
html[data-theme="rose"]     { --t-bg:#fff1f4; --t-card:#ffffff; --t-card2:#ffe4ea; --t-line:#f6cdd8; --ink:#3a1a24; --muted:#8b6672; --green:#be185d; --green2:#db2777; --mint:#ec4899; --gold:#9d174d; --t-a:#ec4899; --t-b:#be185d; --t-glow:rgba(236,72,153,.16); --t-hero:#ffdbe5; --t-foot-a:#5a0d2c; --t-foot-b:#a3154f; }
html[data-theme="ocean"]    { --t-bg:#eef6fb; --t-card:#ffffff; --t-card2:#e2f0f8; --t-line:#c9deec; --ink:#10283a; --muted:#587286; --green:#0b5d8a; --green2:#0f78b3; --mint:#0ea5e9; --gold:#b45309; --t-a:#0ea5e9; --t-b:#075985; --t-glow:rgba(14,165,233,.16); --t-hero:#d5ebf7; --t-foot-a:#06324a; --t-foot-b:#0b5d8a; }

/* ── how every palette is applied ── */
html[data-theme] body, html[data-theme] section, html[data-theme] .menu-section { background:var(--t-bg); color:var(--ink); }
html[data-theme] .nav { background:color-mix(in srgb, var(--t-bg) 92%, transparent); border-bottom:1px solid var(--t-line); border-top:5px solid var(--mint); box-shadow:0 7px 24px rgba(0,0,0,.12); }
html[data-theme] .nav a, html[data-theme] .brand b { color:var(--ink); }
html[data-theme] .search { background:var(--t-card2); }
html[data-theme] .search input { color:var(--ink); }
html[data-theme] ::placeholder { color:var(--muted); opacity:.75; }
html[data-theme] .hero { background:radial-gradient(circle at 80% 18%, var(--t-glow), transparent 32%), linear-gradient(135deg, var(--t-bg) 0%, var(--t-hero) 100%); }
html[data-theme] .hero h1, html[data-theme] h2 { color:var(--ink); }
html[data-theme] .eyebrow, html[data-theme] .floating-card { background:var(--t-card); color:var(--green); box-shadow:0 8px 30px rgba(0,0,0,.12); }
html[data-theme] .quick-facts { background:var(--t-card); border-top:4px solid var(--mint); }
html[data-theme] .quick-facts * { border-color:var(--t-line); }
html[data-theme] .offers { background:linear-gradient(180deg, var(--t-bg), var(--t-card2)); }
html[data-theme] .offers-grid article, html[data-theme] .menu-card, html[data-theme] .mo-card, html[data-theme] .sr-card, html[data-theme] .upsell-card, html[data-theme] .track-map-box { background:var(--t-card); border:1px solid var(--t-line); color:var(--ink); }
html[data-theme] .offer-featured { background:linear-gradient(135deg, var(--t-b), var(--t-a)) !important; border-color:transparent; }
html[data-theme] .menu-card:hover { border-color:var(--mint); box-shadow:0 16px 35px rgba(0,0,0,.16); }
html[data-theme] .menu-card h3 { color:var(--ink); }
html[data-theme] .menu-card p { color:var(--muted); }
html[data-theme] .item-symbol { background:var(--t-card2); }
html[data-theme] .price, html[data-theme] .item-modal-price { color:var(--green); }
html[data-theme] .categories button { background:var(--t-card); border-color:var(--t-line); color:var(--muted); }
html[data-theme] .cart-button, html[data-theme] .add, html[data-theme] .primary, html[data-theme] .categories button.active, html[data-theme] .offer-order { background:linear-gradient(135deg, var(--t-a), var(--t-b)); color:#fff; }
html[data-theme] .brand-mark { background:linear-gradient(145deg, var(--t-a), var(--t-b)); }
html[data-theme] .sun { background:linear-gradient(145deg, var(--t-a), var(--t-b)); }
html[data-theme] .more-button, html[data-theme] .secondary, html[data-theme] .loyalty-redeem button, html[data-theme] .note-btn { background:transparent; color:var(--green); border-color:var(--mint); }
html[data-theme] .loyalty-promo { background:linear-gradient(135deg, var(--t-b), var(--t-a)); color:#fff; }
html[data-theme] .loyalty-promo-btn { background:#fff; color:var(--t-b); }
html[data-theme] .loyalty-box, html[data-theme] .loyalty-earn-hint, html[data-theme] .loyalty, html[data-theme] .loyalty-modal-balance { background:var(--t-card2); color:var(--green); }

/* cart, modals, forms */
html[data-theme] .cart-drawer, html[data-theme] .modal-card, html[data-theme] .qty-numpad-card, html[data-theme] .success-modal > div, html[data-theme] .branch-chooser { background:var(--t-card); color:var(--ink); border-color:var(--t-line); }
html[data-theme] .cart-row { border-bottom-color:var(--t-line); }
html[data-theme] .cart-row small, html[data-theme] .modal-card small { color:var(--muted); }
html[data-theme] .modal-card h2, html[data-theme] .modal-card h3, html[data-theme] .cart-drawer h2, html[data-theme] .cart-drawer h3, html[data-theme] .success-modal h2 { color:var(--ink); }
html[data-theme] input, html[data-theme] select, html[data-theme] textarea { background:var(--t-card2); color:var(--ink); border-color:var(--t-line); }
html[data-theme] input:focus, html[data-theme] select:focus, html[data-theme] textarea:focus { border-color:var(--mint); }
html[data-theme] .qty-numpad-grid button, html[data-theme] .track-driver-icon { background:var(--t-card2); color:var(--ink); border-color:var(--t-line); }
html[data-theme] footer { background:linear-gradient(135deg, var(--t-foot-a), var(--t-foot-b)); border-top:6px solid var(--mint); }

/* the warm notices only need a dark base on the dark palettes */
html[data-theme="luxe"] .active-order-banner.pending, html[data-theme="luxe"] .checkout-warn, html[data-theme="luxe"] .sched-note, html[data-theme="luxe"] .map-quote.bad, html[data-theme="luxe"] .mo-badge, html[data-theme="luxe"] .success-notice, html[data-theme="luxe"] .rate-nudge, html[data-theme="luxe"] .track-rate,
html[data-theme="midnight"] .active-order-banner.pending, html[data-theme="midnight"] .checkout-warn, html[data-theme="midnight"] .sched-note, html[data-theme="midnight"] .map-quote.bad, html[data-theme="midnight"] .mo-badge, html[data-theme="midnight"] .success-notice, html[data-theme="midnight"] .rate-nudge, html[data-theme="midnight"] .track-rate,
html[data-theme="violet"] .active-order-banner.pending, html[data-theme="violet"] .checkout-warn, html[data-theme="violet"] .sched-note, html[data-theme="violet"] .map-quote.bad, html[data-theme="violet"] .mo-badge, html[data-theme="violet"] .success-notice, html[data-theme="violet"] .rate-nudge, html[data-theme="violet"] .track-rate
  { background:var(--t-warn-bg); color:var(--t-warn-ink); border-color:var(--t-warn-line); }
html[data-theme="luxe"] .success-modal .success-notice b, html[data-theme="luxe"] .success-modal .success-notice span,
html[data-theme="midnight"] .success-modal .success-notice b, html[data-theme="midnight"] .success-modal .success-notice span,
html[data-theme="violet"] .success-modal .success-notice b, html[data-theme="violet"] .success-modal .success-notice span { color:var(--t-warn-ink); }

/* chat widget follows the palette */
html[data-theme] .chat-fab { background:linear-gradient(135deg, var(--t-a), var(--t-b)); }

/* ── the picker ── */
.theme-fab { position:fixed; left:22px; bottom:96px; z-index:44; width:48px; height:48px; border-radius:50%; border:2px solid rgba(255,255,255,.85); background:linear-gradient(135deg,#ed1736,#f0b429 55%,#0ea5e9); color:#fff; font-size:22px; cursor:pointer; box-shadow:0 10px 26px rgba(0,0,0,.28); display:grid; place-items:center; transition:transform .2s; }
.theme-fab:hover { transform:scale(1.07) rotate(8deg); }
.theme-panel { position:fixed; left:18px; bottom:156px; z-index:70; width:min(340px, calc(100vw - 36px)); max-height:min(70vh, 560px); overflow:auto; background:#fff; color:#17231f; border-radius:20px; padding:16px; box-shadow:0 24px 60px rgba(0,0,0,.35); direction:rtl; font-family:Tajawal, Arial, sans-serif; }
.theme-panel.hidden { display:none; }
.theme-panel h3 { margin:2px 4px 12px; font-size:17px; color:#17231f; }
.theme-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.theme-opt { border:2px solid #e6e6e6; border-radius:16px; background:#fafafa; padding:10px; cursor:pointer; text-align:center; font:inherit; font-weight:800; font-size:13px; color:#17231f; }
.theme-opt .sw { height:46px; border-radius:11px; margin-bottom:8px; display:flex; overflow:hidden; border:1px solid rgba(0,0,0,.08); }
.theme-opt .sw i { flex:1; }
.theme-opt.on { border-color:#17231f; box-shadow:0 0 0 3px rgba(23,35,31,.12); }
.theme-opt.on::after { content:" ✓"; }

/* header links and the little pills */
html[data-theme] .nav nav a, html[data-theme] .nav button, html[data-theme] .lang-btn { background:var(--t-card2); color:var(--ink); border-color:var(--t-line); }
html[data-theme] .nav nav a:hover { background:var(--t-card); }