/* Variables (single source) */
:root{
  --bg: #F4E9DB;
  --card: #ffffff;
  --text: #2B2B2B;
  --muted: #6B7280;
  --accent: #C78A2F;
  --accent-hover: #B57C2A;
  --accent-text: #ffffff;
  --decor: #8FC93A;
  --danger: #D9534F;
  --radius: 16px;
  --shadow-sm: 0 4px 12px rgba(0,0,0,0.06);
  --shadow-md: 0 10px 24px rgba(0,0,0,0.10);
}
*{ box-sizing: border-box; }
body{ margin:0; font-family:'Cairo', system-ui, sans-serif; background: var(--bg); color:var(--text); }
a{ color:inherit; text-decoration:none; }
header{
  position:sticky; top:0; z-index:20; backdrop-filter: blur(10px);
  background: rgba(17,24,39,0.7); border-bottom:1px solid rgba(255,255,255,0.06);
}
.container{ max-width:1050px; margin:0 auto; padding:16px; }
.topbar{ display:flex; align-items:center; gap:12px; justify-content:space-between; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.15rem; }
.brand-badge{ width:36px; height:36px; display:grid; place-items:center; border-radius:12px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); box-shadow:0 8px 24px rgba(124,58,237,0.4); }
.brand span{ opacity:.9 }
.cart-btn{ position:relative; background:transparent; border:1px solid rgba(255,255,255,0.15); color:var(--text); padding:8px 12px; border-radius:10px; cursor:pointer; display:flex; align-items:center; gap:8px; }
.cart-count{ position:absolute; inset-inline-start:-8px; top:-8px; background:var(--danger); color:#fff; font-size:.75rem; padding:2px 6px; border-radius:999px; }

/* filters */
.filters{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.search{ flex:1; min-width:180px; }
.search input{ width:100%; padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.12); background:#0b1226; color:#fff; outline:none; }
.chips{ display:flex; gap:8px; overflow:auto; scrollbar-width:none; }
.chip{ border:1px solid rgba(255,255,255,0.12); color:#fff; background:#0b1226; padding:8px 12px; border-radius:999px; cursor:pointer; white-space:nowrap; }
.chip.active{ background:linear-gradient(135deg,var(--brand),var(--brand-2)); border-color:transparent; }

/* products */
.grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; margin:18px 0 80px; }
@media(min-width:640px){ .grid{ grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px; } }
@media(min-width:920px){ .grid{ grid-template-columns: repeat(4, minmax(0,1fr)); gap:16px; } }
.card{ background:rgba(17,24,39,0.9); border:1px solid rgba(255,255,255,0.06); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; }
.thumb{ aspect-ratio: 1 / 1; background:#0b1226; position:relative; }
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.p-body{ padding:10px; display:flex; flex-direction:column; gap:6px; }
.p-title{ font-weight:700; font-size:.98rem; }
.p-desc{ color:var(--muted); font-size:.85rem; line-height:1.5; min-height: 2.4em; }
.p-footer{ display:flex; align-items:center; justify-content:space-between; margin-top:6px; }
.price{ font-weight:700; color:var(--text); }
.add-btn{ background:var(--accent); color:var(--accent-text); border:none; border-radius:10px; padding:8px 10px; font-weight:700; cursor:pointer; }

/* cart drawer */
.drawer{ position:fixed; inset-inline-end:0; top:0; height:100dvh; width:min(420px,100%); background:var(--card); border-inline-start:1px solid rgba(0,0,0,0.08); transform:translateX(100%); transition: transform .35s ease; will-change: transform; backface-visibility: hidden; z-index:40; display:flex; flex-direction:column; }
.drawer.open{ transform:translateX(0); }
.drawer-header{ padding:16px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(255,255,255,0.08); }
.drawer-body{ flex:1; overflow:auto; padding:12px 16px; display:flex; flex-direction:column; gap:10px; }
.cart-item{ display:grid; grid-template-columns: 1fr auto; gap:8px; padding:10px; border:1px solid rgba(255,255,255,0.08); border-radius:12px; background:rgba(0,0,0,0.15); }
.ci-title{ font-weight:700; }
.ci-meta{ font-size:.9rem; color:var(--muted); }
.qty{ display:flex; align-items:center; gap:6px; }
.qty button{ width:28px; height:28px; border-radius:8px; border:1px solid rgba(255,255,255,0.12); background:#0f172a; color:#fff; cursor:pointer; }
.remove{ color:var(--danger); background:transparent; border:none; cursor:pointer; }
.sum{ margin-top:8px; padding:10px; border:1px solid rgba(255,255,255,0.08); border-radius:12px; background:rgba(0,0,0,0.15); display:grid; gap:6px; }
.sum-row{ display:flex; justify-content:space-between; }
.note, .customer{ width:100%; padding:10px 12px; border-radius:10px; border:1px solid rgba(0,0,0,0.12); background:#fff; color:var(--text); }
.drawer-footer{ padding:12px 16px; border-top:1px solid rgba(255,255,255,0.08); display:grid; gap:10px; }
.checkout{ background:linear-gradient(135deg,var(--ok),#22d3ee); color:#001; border:none; border-radius:12px; padding:12px; font-weight:800; cursor:pointer; }
.empty{ text-align:center; color:var(--muted); padding:20px 6px; }

/* Base tweaks */
body { font-family: 'Noto Sans Arabic', Arial, sans-serif; }

/* عناوين الأقسام الرئيسية */
.main-heading {
  background-color: #2c3e50; /* أزرق داكن */
  color: white;
  padding: 15px;
  text-align: center;
}

/* عناوين الجداول الداخلية */
.table-header {
  background-color: #3498db; /* أزرق فاتح */
  color: white;
  padding: 10px;
  text-align: center;
}

/* تصميم الجدول */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background-color: white; /* خلفية الجدول بيضاء */
}

.data-table th, .data-table td {
  border: 1px solid #bdc3c7; /* حدود الجدول رمادية */
  padding: 8px;
  text-align: center;
}

/* لون للتأكيد على أسعار أو عروض */
.highlight {
  color: #e74c3c; /* أحمر للتمييز */
  font-weight: bold;
}

/* Data-theme overrides (applied when set on body or root) */
[data-theme="vibrant"]{ --bg:#FFF7EE; --accent:#0FA3A3; --accent-hover:#0C8F8F; --text:#4A2E13; --decor:#FF8A00; }
[data-theme="dark-gold"]{ --bg:#0B1220; --card:#F4E9DB; --text:#2B2B2B; --muted:#6B6B6B; --accent:#C78A2F; --accent-hover:#B57C2A; --accent-text:#ffffff; --decor:#8FC93A; }

/* Body already set to light in custom theme */

/* Header uses variables now; remove hard-coded colors */
.cart-btn{ border:1px solid #e0e0e0; color:#2c3e50; background:#ffffff; }
.cart-count{ background:#e74c3c; }

/* Filters and inputs */
.search input{ background:#ffffff; color:#2c3e50; border:1px solid #bdc3c7; }
.chip{ background:#ffffff; color:#2c3e50; border:1px solid #bdc3c7; }
.chip.active{ background:#3498db; color:#fff; border-color:#3498db; }

/* Cards */
.card{ background:var(--card); border:1px solid #e6e8eb; }
.thumb{ background:#f0f2f5; }
.p-title{ color:#2c3e50; }
.p-desc{ color:#6b7280; }
.price{ color:#2c3e50; }
.add-btn{ background:var(--accent); color:var(--accent-text); }
.add-btn:hover{ background:var(--accent-hover); color:var(--accent-text); }

/* Drawer */
.drawer{ background:var(--card); border-inline-start:1px solid #e6e8eb; }
.drawer-header{ border-bottom:1px solid #e6e8eb; color:#2c3e50; }
.drawer-footer{ border-top:1px solid #e6e8eb; }
.qty button{ background:#ffffff; border:1px solid #bdc3c7; color:#2c3e50; }
.remove{ color:#e74c3c; }
.sum{ background:#fff; border:1px solid #e6e8eb; }
.note, .customer{ background:#ffffff; color:#2c3e50; border:1px solid #bdc3c7; }

/* === Modern UI Enhancements === */
:root{
  --radius: 16px;
  --shadow-sm: 0 4px 12px rgba(0,0,0,0.06);
  --shadow-md: 0 10px 24px rgba(0,0,0,0.10);
  --shadow-lg: 0 18px 36px rgba(0,0,0,0.12);
}

header{ position: sticky; top: 0; backdrop-filter: blur(10px); box-shadow: 0 6px 16px rgba(11,18,32,0.12); background: var(--card); color: var(--text); }

.container{ max-width:1200px; padding:20px; }

/* Hero */
.hero{
  border-radius: var(--radius);
  padding: 22px 20px;
  background: linear-gradient(135deg, #ffffff, #f7fbff);
  border:1px solid #e6e8eb;
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 6px;
}
.hero h1{ margin:0; font-size: clamp(1.2rem, 2.2vw, 1.8rem); color:#2c3e50; }
.hero p{ margin:0; color:#6b7280; font-size:.98rem; }

/* Grid improvements */
.grid{ gap:18px; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media(min-width:640px){ .grid{ grid-template-columns: repeat(3, minmax(0,1fr)); gap:20px; } }
@media(min-width:1024px){ .grid{ grid-template-columns: repeat(4, minmax(0,1fr)); gap:22px; } }

/* Card polish */
.card{ border-radius: var(--radius); overflow:hidden; transition: transform .2s ease, box-shadow .2s ease; box-shadow: var(--shadow-sm); }
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.thumb{ overflow:hidden; border-bottom:1px solid #eef1f4; }
.thumb img{ transition: transform .35s ease; }
.card:hover .thumb img{ transform: scale(1.04); }

/* Chips */
.chips{ gap:10px; padding-bottom:4px; }
.chip{ transition: background .2s ease, color .2s ease, border-color .2s ease; }
.chip:hover{ border-color:#9fb9c9; }

/* Inputs */
.search input{ height:44px; border-radius:12px; transition: border-color .2s ease, box-shadow .2s ease; }
.search input:focus{ border-color:#3498db; box-shadow: 0 0 0 4px rgba(52,152,219,0.15); }

/* Select (size chooser) */
.size-select{
  appearance: none;
  -webkit-appearance: none;
  background: #fff url('data:image/svg+xml;utf8,<svg fill="%232c3e50" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 10px center/16px;
  border:1px solid #bdc3c7;
  color:#2c3e50;
  padding:10px 36px 10px 12px;
  border-radius:10px;
  min-width: 130px;
}

/* Buttons */
.add-btn{
  height:40px;
  padding:10px 14px;
  border-radius:10px;
  box-shadow: 0 6px 16px rgba(52,152,219,.25);
  transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
.add-btn:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
.add-btn:active{ transform: translateY(0); box-shadow: var(--shadow-sm); }

/* Cart rows */
.cart-item{ border:1px solid #eef1f4; box-shadow: var(--shadow-sm); }
.sum{ box-shadow: var(--shadow-sm); }

/* Removed instant-hide to allow animation */

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }

/* Splash overlay */
#splash{ position: fixed; inset: 0; background: var(--bg); display:none; place-items:center; z-index:100; }
#splash.show{ display:grid; }
#splash .splash-content{ display:grid; place-items:center; gap:12px; cursor:pointer; text-align:center; }
#splash img{ width: clamp(240px, 50vw, 1600px); max-height: 88vh; height: auto; object-fit: contain; animation: pulse-glow 1.4s ease-in-out infinite; }
#splash .splash-tip{ color: var(--text); font-weight:700; opacity:.85; }
@media (max-width:700px){
  #splash img{ width: 200px; max-height: 40vh; }
}

/* === Final Visual Tweaks (Pure white and lighter cards with motion) === */
body{
  background-color:#ffffff !important; /* أبيض ناصع */
}
.card{
  background:#ffffff !important;
  border:1px solid #f1f5f9 !important; /* حدود أخف */
  box-shadow: 0 8px 18px rgba(0,0,0,0.06) !important; /* ظل خفيف */
  transition: transform .25s ease, box-shadow .25s ease !important;
}
.card:hover{
  transform: translateY(-6px) scale(1.01) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,0.10) !important;
}
.thumb img{ transition: transform .4s ease !important; }
.card:hover .thumb img{ transform: scale(1.06) !important; }

/* === Drawer: Instant Hide (no slide) === */
.drawer{
  transform: none !important;
  transition: none !important;
  display: none !important;
  pointer-events: none;
  visibility: hidden;
}
.drawer.open{
  display: flex !important;
  pointer-events: auto;
  visibility: visible;
}

/* أزرار أخف مع حركة */
.add-btn{
  background:#3498db !important;
  box-shadow: 0 8px 18px rgba(52,152,219,.28) !important;
  transition: transform .2s ease, box-shadow .25s ease !important;
}
.add-btn:hover{ transform: translateY(-3px) !important; box-shadow: 0 14px 30px rgba(52,152,219,.35) !important; }

/* شرائح أخف */
.chip{ border-color:#e5e7eb !important; }
.chip:hover{ background:#f8fafc !important; }

/* Logo sizing overrides */
#logo.brand-badge{ width:72px; height:72px; border-radius:16px; }
#logo.brand-badge img{ width:100%; height:100%; object-fit:contain; display:block; }
@media (max-width:420px){
  #logo.brand-badge{ width:60px; height:60px; border-radius:14px; }
}

/* Apply variables to UI */
body{ background: var(--bg); color: var(--text); }
.brand span{ color: var(--text); }
.cart-btn{ color: var(--text); border:1px solid #e0e0e0; background:#fff; }
.cart-count{ background: var(--danger); }
.chip.active{ background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.p-title{ color: var(--text); }
.p-desc{ color: var(--muted); }
.badge{ position:absolute; inset-inline-end:10px; top:10px; background: var(--decor); color:#ffffff; font-weight:700; font-size:.75rem; padding:4px 8px; border-radius:10px; box-shadow: 0 4px 10px rgba(0,0,0,.08); }
.card{ background: var(--card); }
.qty button{ color: var(--text); }
.remove{ color: var(--danger); }
.note, .customer{ color: var(--text); }

/* Make card clickable and avoid controls overlapping */
.card{ cursor:pointer; }
.card .p-footer select{ pointer-events:none; opacity:.65; }
.card .add-btn{ pointer-events:none; opacity:.7; }

/* Modal */
.modal{ position:fixed; inset:0; display:none; z-index:80; }
.modal.show{ display:block; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.5); }
.modal-dialog{ position:relative; margin:40px auto; max-width:560px; background:var(--card); color:var(--text); border-radius:16px; box-shadow: 0 20px 50px rgba(0,0,0,.35); overflow:hidden; }
.modal-close{ position:absolute; inset-inline-end:10px; top:10px; border:none; background:transparent; color:var(--text); cursor:pointer; font-size:18px; }
.modal-body{ padding:18px; display:grid; gap:14px; }
.md-title{ font-weight:800; font-size:1.2rem; }
.md-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pill-group{ display:flex; flex-wrap:wrap; gap:8px; }
.pill{ border:1px solid #e5e7eb; padding:8px 12px; border-radius:999px; background:#fff; color:#111; cursor:pointer; }
.pill.active{ background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.sauce-line{ display:none; align-items:center; gap:8px; }
.sauce-line.show{ display:flex; }
.md-actions{ display:flex; gap:10px; justify-content:flex-end; }
.md-price{ font-weight:800; }

/* WhatsApp green for checkout button */
.checkout{ background:#25D366 !important; color:#001; }
.checkout:hover{ filter: brightness(0.95); }

/* === Logo Pulse Animation === */
@keyframes pulse-glow{
  0%{ transform: scale(1); box-shadow: 0 0 0 0 rgba(199,138,47,0.35); }
  70%{ transform: scale(1.08); box-shadow: 0 0 0 12px rgba(199,138,47,0); }
  100%{ transform: scale(1); box-shadow: 0 0 0 0 rgba(199,138,47,0); }
}
#logo{
  cursor: pointer;
  animation: pulse-glow 1.4s ease-in-out infinite;
}
.no-anim{ animation: none !important; box-shadow: none !important; }
@media (prefers-reduced-motion: reduce){
  #logo{ animation: none; }
}

/* === Palette Option: Dark Gold (safe brand) === */
body.theme-dark-gold{
  --bg: #0B1220;
  --bg-grad-from: #07101a;
  --bg-grad-to: #0b1220;
  --card: #F4E9DB;
  --text: #2B2B2B;
  --muted: #6B6B6B;
  --accent: #C78A2F;
  --accent-hover: #B57C2A;
  --accent-text: #FFFFFF;
  --decor: #8FC93A;
  --danger: #D9534F;
}
body.theme-dark-gold{
  background: linear-gradient(180deg, var(--bg-grad-from), var(--bg-grad-to)) !important;
}

/* Contemporary option already covered via theme-vibrant (teal/orange) */

/* Header subtle shadow */
header{ box-shadow: 0 6px 16px rgba(11,18,32,0.12) !important; }

/* Card refinements per spec */
.card{ border-radius:12px !important; padding:18px !important; box-shadow: 0 6px 20px rgba(11,18,32,0.12) !important; }
.thumb{ aspect-ratio:1 / 1; border-radius:10px; overflow:hidden; border: 3px solid rgba(199,138,47,0.18); }
.card:hover .thumb{ border-color: rgba(199,138,47,0.28); }
.thumb img{ object-fit: cover; object-position: center 35%; filter: saturate(1.05); }

/* Badge top-right with white text */
.badge{ inset-inline-start: auto !important; inset-inline-end: 10px; top:10px; background: var(--decor) !important; color:#ffffff !important; font-size: .75rem !important; border-radius: 10px !important; }

/* Typography tweaks */
.p-title{ font-family: 'Almarai', system-ui, sans-serif !important; font-weight:700; font-size: 1.25rem; }
body{ font-family: 'Noto Sans Arabic', Arial, sans-serif !important; line-height:1.5; }
.p-desc{ color:#6B6B6B !important; font-size: .95rem; }

/* CTA button per spec */
.add-btn{ background: var(--accent) !important; color: var(--accent-text) !important; padding:10px 18px !important; border-radius:10px !important; box-shadow: 0 6px 14px rgba(199,138,47,0.25) !important; opacity:1; }
.add-btn:hover{ filter: brightness(0.95); }

/* Size pill instead of large select */
.size-select{ height:38px; border-radius:999px !important; padding-inline-end: 34px; padding-inline-start: 14px; border-color:#e5e7eb; background-color:#fff; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24"><path fill="%236b7280" d="M7 10l5 5 5-5H7z"/></svg>'); background-repeat:no-repeat; background-position: right 10px center; background-size: 16px; }

/* Accessibility focus */
*:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; border-radius:8px; }

/* Micro-interactions */
@keyframes btn-pulse{ 0%{ transform:scale(1) } 50%{ transform:scale(1.06) } 100%{ transform:scale(1) } }
.btn-pulse{ animation: btn-pulse 220ms ease-out; }
@keyframes bump{ 0%{ transform:scale(1) } 30%{ transform:scale(1.25) } 100%{ transform:scale(1) } }
.cart-count.bump{ animation: bump 380ms ease-out; }

/* Floating cart button when items exist */
.cart-fab{ position: fixed; inset-inline-end:16px; bottom:16px; z-index:60; background: var(--accent) !important; color: var(--accent-text) !important; box-shadow: 0 10px 24px rgba(0,0,0,0.18); border-color: transparent !important; }
.cart-fab:hover{ filter: brightness(0.95); }