@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&display=swap');

/* =========================================
   Menu UI — Modern App Design (v2)
   Mobile-first, app-like experience
   Same selectors, new design
========================================= */

:root{
  /* Core palette (unchanged) */
  --latte: #d9cfbf;
  --cream: #f6f0e8;
  --sand:  #cbb79f;
  --caramel:#b9885a;
  --espresso:#2a1f19;
  --mocha: #3a2b23;

  /* Accent tints */
  --kcal-soft: #c9a06c;
  --featured-soft: #d1b56d;

  /* Base neutrals */
  --white: #ffffff;
  --black: #000000;

  /* Page background */
  --page-bg-top: #efe7db;
  --page-bg-bottom: #e7dccb;

  /* Surfaces — opaque (no blur dependency) */
  --surface-panel: rgba(246,240,232,.92);
  --surface-panel-strong: rgba(246,240,232,.97);
  --surface-panel-solid: rgba(246,240,232,.98);
  --surface-sheet: rgba(246,240,232,.99);
  --surface-card: rgba(255,255,255,.62);
  --surface-card-soft: rgba(255,255,255,.55);
  --surface-card-strong: rgba(255,255,255,.68);
  --surface-card-more: rgba(255,255,255,.72);
  --surface-card-most: rgba(255,255,255,.80);
  --surface-card-lite: rgba(255,255,255,.48);

  /* Glass — opaque (no blur) */
  --glass-dark: rgba(0,0,0,.28);
  --glass-dark-hover: rgba(0,0,0,.36);
  --glass-dark-soft: rgba(0,0,0,.20);
  --glass-dark-soft-hover: rgba(0,0,0,.28);

  /* Borders */
  --border-soft: rgba(42,31,25,.08);
  --border: rgba(42,31,25,.10);
  --border-strong: rgba(42,31,25,.13);
  --border-faint: rgba(42,31,25,.06);
  --border-top: rgba(42,31,25,.10);
  --border-dashed: rgba(42,31,25,.15);
  --border-dashed-2: rgba(42,31,25,.13);
  --border-dashed-3: rgba(42,31,25,.18);
  --border-alpha: rgba(42,31,25,.22);

  --border-white: rgba(255,255,255,.16);
  --border-white-hover: rgba(255,255,255,.26);

  /* Text */
  --text: var(--espresso);
  --text-muted: rgba(42,31,25,.65);
  --text-muted-2: rgba(42,31,25,.55);
  --text-muted-3: rgba(42,31,25,.50);
  --text-strong: rgba(42,31,25,.88);
  --text-stronger: rgba(42,31,25,.92);
  --text-on-dark: #fff;

  /* Shadows – softer, more layered */
  --shadow: 0 4px 20px rgba(0,0,0,.06), 0 1px 4px rgba(0,0,0,.04);
  --shadow-soft: 0 2px 12px rgba(0,0,0,.05);
  --shadow-card: 0 2px 10px rgba(0,0,0,.04), 0 0 1px rgba(0,0,0,.06);
  --shadow-card-hover: 0 8px 28px rgba(0,0,0,.08), 0 0 1px rgba(0,0,0,.06);
  --shadow-menu: 0 12px 44px rgba(0,0,0,.14);
  --shadow-sheet: 0 -4px 40px rgba(0,0,0,.12), 0 0 1px rgba(0,0,0,.08);

  /* Badges */
  --badge-bg: rgba(246,240,232,.92);
  --badge-border: rgba(42,31,25,.10);
  --badge-icon-bg: rgba(0,0,0,.03);
  --badge-kcal-bg: rgba(201,160,108,.14);
  --badge-featured-bg: rgba(209,181,109,.14);

  /* Focus */
  --focus-ring: rgba(185,136,90,.40);

  /* Veils */
  --header-bg-opacity: .30;
  --header-veil-spot: rgba(185,136,90,.22);
  --header-veil-top: rgba(246,240,232,.90);
  --header-veil-bottom: rgba(239,231,219,.96);

  --hero-veil-spot: rgba(185,136,90,.25);
  --hero-veil-a: rgba(246,240,232,.90);
  --hero-veil-b: rgba(246,240,232,.50);
  --hero-veil-c: rgba(246,240,232,.20);

  /* Overlays — slightly more opaque (no blur fallback) */
  --overlay-dark: rgba(0,0,0,.55);
  --overlay-dark-2: rgba(0,0,0,.55);
  --overlay-brown: rgba(42,31,25,.55);

  /* Status */
  --status-open: #34d399;
  --status-closed: #fb7185;
  --status-ring: rgba(255,255,255,.12);

  /* Scrollbars */
  --scroll-thumb: rgba(42,31,25,.14);
  --scroll-track: rgba(42,31,25,.05);
  --scroll-accent: rgba(185,136,90,.35);
  --scroll-accent-hover: rgba(185,136,90,.55);

  /* Layout */
  --radius: 20px;
  --radius-sm: 14px;
  --radius-xs: 10px;
  --stickyOffset: 140px;

  /* Spacing */
  --gap: 12px;
  --gap-sm: 8px;
  --gap-lg: 16px;

  /* Transitions */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.175, .885, .32, 1.275);
}

/* ========== RESET ========== */
*{ box-sizing:border-box; font-family:"Cairo", sans-serif; }
html{
  min-height:100%;
  background: var(--page-bg-top);
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}
body{
  margin:0;
  background:transparent;
  color:var(--text);
  overscroll-behavior-y: contain;
}
a{ color:inherit; text-decoration:none; }

:focus-visible{
  outline:2px solid var(--focus-ring);
  outline-offset:2px;
}

.container{
  max-width:960px;
  margin:0 auto;
  padding:0 var(--gap);
}

/* ========== iOS BUTTON FIX ========== */
button{
  -webkit-appearance:none;
  appearance:none;
  font: inherit;
  color: inherit;
  line-height: inherit;
}

/* ========================================
   HEADER — Compact, app-like top bar
======================================== */
.header{
  position:relative;
  min-height:130px;
  overflow: visible;
  z-index: 30;
}
.header__bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  filter:saturate(1.08) brightness(1.02);
  opacity:var(--header-bg-opacity);
}
.header__veil{
  position:absolute; inset:0;
  background:
    radial-gradient(700px 200px at 70% 0%, var(--header-veil-spot), transparent 60%),
    linear-gradient(180deg, var(--header-veil-top), var(--header-veil-bottom));
}
.header__inner{
  position:relative;
  max-width:960px;
  margin:0 auto;
  padding:16px var(--gap) 14px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--gap);
  overflow: visible;
}
.header__inner--simple{ align-items:center; }

/* Brand */
.brand{ display:flex; gap:10px; align-items:center; min-width:0; }
.brand__logoWrap{ display:flex; align-items:center; flex-shrink:0; }
.brand__logoImg{
  height:40px;
  width:auto;
  max-width:160px;
  object-fit:contain;
  display:block;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.20));
}
.brand__logoFallback{
  width:40px; height:40px;
  border-radius:var(--radius-sm);
  display:grid; place-items:center;
  font-weight:900;
  border:1px solid var(--border-white);
  background: var(--glass-dark);
  color:var(--text-on-dark);

}

.brand__text{ min-width:0; display:flex; flex-direction:column; gap:1px; }
.brand__name{
  font-weight:700;
  font-size:15px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.brand__meta{
  font-size:11px;
  font-weight:500;
  opacity:.75;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Header actions */
.headerActions{
  display:flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
  overflow: visible;
  position: relative;
  z-index: 40;
}

.iconBtn{
  width:36px;
  height:36px;
  border-radius:999px;
  display:grid;
  place-items:center;
  border:1px solid var(--border-white);
  background: var(--glass-dark-soft);
  color:var(--text-on-dark);

  transition: transform .15s var(--ease), background .2s var(--ease);
  cursor: pointer;
}
.iconBtn:hover{
  transform: scale(1.06);
  background: var(--glass-dark-soft-hover);
  border-color: var(--border-white-hover);
}
.iconBtn:active{ transform: scale(.96); }
.iconBtn i{ opacity:.92; }

/* Mobile header */
@media (max-width:520px){
  .header{ min-height: 110px; }
  .brand__logoImg{ height:34px; max-width:140px; }
  .brand__logoFallback{ width:34px; height:34px; border-radius:12px; }
  .brand__name{ font-size:13px; }
}
@media (max-width:380px){
  .brand__text{ display:none; }
}

/* ========================================
   PAGE
======================================== */
.page{
  padding-bottom:100px;
  min-height: 100vh;
}

/* ========================================
   HERO OFFERS — Cleaner, readable, autoplay-ready
======================================== */
.heroOffers{
  margin: 10px var(--gap) 0;
  position: relative;
  z-index: 1;
}

.heroOffers__wrap{
  position: relative;
  border-radius: calc(var(--radius) + 4px);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow);
  min-height: 165px;
  background: rgba(255,255,255,.35);
}

/* subtle highlight border */
.heroOffers__wrap::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  border-radius: inherit;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.06);
}

/* slide base */
.heroOffers__slide{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;

  /* "swipe" feel */
  transform: translateX(14px) scale(1.015);
  transition:
    opacity .55s var(--ease),
    transform .75s var(--ease);
  will-change: opacity, transform;
}

.heroOffers__slide.is-active{
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* improved veil for readability */
.heroOffers__veil{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 280px at 85% 0%, rgba(185,136,90,.22), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.18), transparent 55%);
}

/* content layout */
.heroOffers__content{
  position: relative;
  padding: 18px;
  max-width: 720px;
}

/* text readability */
.heroOffers__title{
  font-weight: 900;
  font-size: 18px;
  line-height: 1.35;
  color: rgba(22,15,10,.92);
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
}

.heroOffers__sub{
  margin-top: 6px;
  color: rgba(42,31,25,.72);
  font-weight: 800;
  font-size: 12.75px;
  line-height: 1.45;
}

/* code pill */
.heroOffers__code{
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;

  border: 1px dashed var(--border-dashed-3);
  background: rgba(185,136,90,.14);
  color: var(--text);
  border-radius: 999px;
  padding: 9px 14px;

  font-weight: 900;
  font-size: 12px;
  cursor: pointer;

  transition: transform .15s var(--ease), background .15s var(--ease);
}
.heroOffers__code:hover{ background: rgba(185,136,90,.18); }
.heroOffers__code:active{ transform: scale(.98); background: rgba(185,136,90,.25); }
.heroOffers__code span{ opacity:.95; }

/* nav buttons */
.heroOffers__nav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: 999px;

  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);

  cursor:pointer;
  font-weight: 900;
  font-size: 16px;
  display: grid;
  place-items: center;

  box-shadow: 0 10px 26px rgba(0,0,0,.12);
  transition: transform .15s var(--ease), opacity .15s var(--ease), background .15s var(--ease);
  opacity: .85;
}
.heroOffers__nav:hover{ opacity: 1; background: rgba(255,255,255,.9); }
.heroOffers__nav:active{ transform: translateY(-50%) scale(.92); }
.heroOffers__nav--prev{ inset-inline-start: 10px; }
.heroOffers__nav--next{ inset-inline-end: 10px; }

/* dots */
/* ========================================
   HERO OFFERS — Modern Pill Design
======================================== */

.heroOffers__dots {
  position: absolute;
  bottom: 16px; /* زيادة بسيطة للمساحة */
  inset-inline-start: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 3;
}

.heroOffers__dot {
  width: 8px;
  height: 8px;
  border-radius: 10px; /* استخدام قيمة كبيرة للتحول لشكل pill */
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  border: none;
  padding: 0;
  
  /* حركة انسيابية احترافية */
  transition: 
    width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    background 0.3s ease,
    opacity 0.3s ease;
}

/* تأثير عند المرور بالماوس */
.heroOffers__dot:hover {
  background: rgba(255, 255, 255, 0.7);
  transform: scale(1.1);
}

/* النقطة النشطة - تصبح أعرض */
.heroOffers__dot.is-active {
  width: 24px; /* النقطة تطول هنا */
  background: #fff;
  opacity: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* ظل خفيف للعمق */
}

/* تحسينات الموبايل */
@media (max-width: 480px) {
  .heroOffers__dots {
    bottom: 12px;
    gap: 6px;
  }
  .heroOffers__dot.is-active {
    width: 18px; /* تقليل الطول قليلاً في الموبايل */
  }
}

/* دعم تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  .heroOffers__dot {
    transition: none !important;
  }
}

/* ========================================
   TOOLBAR — Sticky, frosted glass
======================================== */
.toolbar{
  margin: 10px var(--gap) 0;
  border:1px solid var(--border-soft);
  background: var(--surface-panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,.35) inset;
  padding:10px;
  position: sticky;
  top:8px;
  z-index:20;
  transition: box-shadow .2s var(--ease);
}
.toolbar__row{
  display:flex;
  gap:var(--gap-sm);
  align-items:center;
}

/* Search */
.searchbox{
  flex:1;
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.60);
  border-radius:var(--radius-sm);
  padding:10px 12px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.searchbox:focus-within{
  border-color: rgba(185,136,90,.30);
  box-shadow: 0 0 0 3px rgba(185,136,90,.08);
}
.searchbox__icon{ font-weight:900; opacity:.55; font-size:15px; }
.searchbox__input{
  width:100%;
  border:0;
  outline:none;
  background:transparent;
  font-weight:700;
  font-size:13px;
  color: var(--text);
}
.searchbox__input::placeholder{ color: rgba(42,31,25,.40); font-weight:600; }
.searchbox__clear{
  border:0;
  background: rgba(42,31,25,.07);
  width:26px; height:26px;
  border-radius:var(--radius-xs);
  cursor:pointer;
  font-weight:900;
  display:grid;
  place-items:center;
  transition: background .15s var(--ease);
}
.searchbox__clear:active{ background: rgba(42,31,25,.14); }

/* Quick actions */
.quickActions{ display:flex; gap:var(--gap-sm); flex-wrap:wrap; }

/* Buttons */
.btn{
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:10px 14px;
  font-weight:800;
  font-size:12px;
  cursor:pointer;
  transition: transform .12s var(--ease), box-shadow .12s var(--ease), background .12s var(--ease);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  user-select:none;
  gap:6px;
}
.btn:active{ transform: scale(.97); }
.btn--cream{ background: var(--surface-card-more); }
.btn--espresso{ background: var(--espresso); color: var(--cream); border-color: rgba(42,31,25,.30); }
.btn--latte{ background: rgba(185,136,90,.14); }
.btn--ghost{ background: rgba(255,255,255,.50); }

/* ========================================
   TABS — Horizontal pill-style tabs
======================================== */
.tabsBar{
  margin-top:10px;
  padding:4px;
  border-radius:var(--radius-sm);
  background: rgba(42,31,25,.05);
  border:1px solid var(--border-faint);
  position:relative;
  overflow:hidden;
}
.tabsBar.noFade::before,
.tabsBar.noFade::after{ display:none; }
.tabsBar::before,
.tabsBar::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:28px;
  pointer-events:none;
  z-index:2;
}
.tabsBar::before{
  right:0;
  background: linear-gradient(270deg, rgba(239,231,219,.95) 0%, transparent 100%);
}
.tabsBar::after{
  left:0;
  background: linear-gradient(90deg, rgba(239,231,219,.95) 0%, transparent 100%);
}

.tabs{
  display:flex;
  gap:4px;
  overflow-x:auto;
  scrollbar-width:none;
  position:relative;
  z-index:1;
  scroll-snap-type: x mandatory;
}
.tabs::-webkit-scrollbar{ display:none; }

.tab{
  flex:0 0 auto;
  padding:8px 16px;
  border-radius:var(--radius-xs);
  border:1px solid transparent;
  background:transparent;
  color: rgba(42,31,25,.55);
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
  transition: all .2s var(--ease);
  white-space:nowrap;
  scroll-snap-align: start;
}
.tab:active{ transform: scale(.96); }
.tab.is-active{
  background: var(--white);
  color: var(--espresso);
  border:1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  font-weight:800;
}

.tabIndicator{
  position:absolute;
  bottom:4px;
  height:2px;
  border-radius:999px;
  width:50px;
  transform: translateX(0);
  transition: transform .25s var(--ease), width .25s var(--ease);
  z-index:1;
}

/* ========================================
   SECTIONS & GRID
======================================== */
.content{
  margin: 10px var(--gap) 0;
}
.section{
  margin-top:var(--gap-lg);
  scroll-margin-top: var(--stickyOffset);
}
.section__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--gap);
  padding:0 2px 10px;
}
.section__title{
  margin:0;
  font-weight:900;
  font-size:16px;
  letter-spacing:-.2px;
}
.section__desc{
  margin-top:4px;
  color: var(--text-muted);
  font-weight:600;
  font-size:12px;
}
.section__count{
  border:1px solid var(--border);
  background: rgba(255,255,255,.60);
  border-radius:999px;
  padding:6px 10px;
  font-weight:800;
  font-size:11px;
  color: var(--text-muted);
}

/* ========================================
   VIEW TOGGLE — pill switch (grid / list)
======================================== */
.viewToggle{
  display:flex;
  align-items:center;
  gap:0;
  background: rgba(42,31,25,.06);
  border:1px solid var(--border);
  border-radius:999px;
  padding:3px;
  position:relative;
  flex-shrink:0;
  height:38px;
}
.viewToggle__slider{
  position:absolute;
  top:3px;
  height:calc(100% - 6px);
  width:calc(50% - 3px);
  border-radius:999px;
  background: var(--espresso);
  transition: transform .25s var(--ease);
  z-index:0;
  pointer-events:none;
}
/* Slider position: default = first btn (list) */
[dir="rtl"] .viewToggle__slider,
.viewToggle__slider{
  inset-inline-start:3px;
  transform: translateX(0);
}
.viewToggle.is-grid .viewToggle__slider{
  transform: translateX(-100%);
}
[dir="ltr"] .viewToggle.is-grid .viewToggle__slider{
  transform: translateX(100%);
}

.viewToggle__btn{
  position:relative;
  z-index:1;
  width:32px;
  height:32px;
  border-radius:999px;
  display:grid;
  place-items:center;
  border:none;
  background:transparent;
  color: var(--espresso);
  cursor:pointer;
  transition: color .2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.viewToggle__btn.is-active{
  color:#fff;
}
.viewToggle__btn:not(.is-active):active{
  transform: scale(.92);
}
.viewToggle__btn svg{
  display:block;
  pointer-events:none;
}

/* ========================================
   VIEW MODES — Grid vs List overrides
======================================== */

/* === LIST VIEW — compact horizontal row === */
.content.view-list .grid{
  grid-template-columns: 1fr;
  gap: 10px;
}
.content.view-list .card{
  display:grid;
  grid-template-columns: 100px 1fr;
  align-items:stretch;
  min-height:100px;
}
.content.view-list .card__media{
  height:auto;
  min-height:100px;
  border-radius:0;
}
.content.view-list .card__media img{
  height:100%;
  border-radius:0;
}
.content.view-list .card__placeholder{
  font-size:11px;
}
.content.view-list .card__body{
  padding:10px 14px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.content.view-list .card__name{
  font-size:13.5px;
  -webkit-line-clamp:2;
}
.content.view-list .card__price{
  font-size:13px;
}
.content.view-list .card__desc{
  -webkit-line-clamp:1;
  margin-top:4px;
  font-size:11px;
}
.content.view-list .card__cta{
  margin-top:6px;
  padding-top:6px;
}
.content.view-list .badges{
  margin-top:3px;
}

/* === GRID VIEW — full-width showcase cards === */
.content.view-grid .grid{
  grid-template-columns: 1fr;
  gap: 14px;
}
.content.view-grid .card{
  display:block;
  border-radius: var(--radius-lg, 16px);
  overflow:hidden;
}
.content.view-grid .card__media{
  height: 180px;
  min-height:auto;
  border-radius:0;
  position:relative;
}
.content.view-grid .card__media img{
  height:100%;
  width:100%;
  object-fit:cover;
  border-radius:0;
}
.content.view-grid .card__placeholder{
  font-size:13px;
}
.content.view-grid .card__body{
  padding: 14px 16px;
  display:block;
}
.content.view-grid .card__name{
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
  -webkit-line-clamp:2;
}
.content.view-grid .card__price{
  font-size: 15px;
}
.content.view-grid .card__desc{
  -webkit-line-clamp:2;
  margin-top:6px;
  font-size: 12px;
  line-height:1.7;
}
.content.view-grid .card__cta{
  margin-top:10px;
  padding-top:10px;
}
.content.view-grid .card__top{
  gap:10px;
}
.content.view-grid .badges{
  margin-top:6px;
}

/* === Responsive adjustments === */
@media (min-width:520px){
  .content.view-grid .card__media{
    height: 210px;
  }
  .content.view-list .card{
    grid-template-columns: 110px 1fr;
    min-height: 110px;
  }
  .content.view-list .card__media{
    min-height:110px;
  }
}

@media (min-width:760px){
  .content.view-grid .card__media{
    height: 240px;
  }
  .content.view-grid .card__body{
    padding: 16px 20px;
  }
  .content.view-grid .card__name{
    font-size: 16px;
  }
  .content.view-list .card{
    grid-template-columns: 130px 1fr;
    min-height:120px;
  }
}

@media (max-width:380px){
  .content.view-grid .card__media{
    height: 155px;
  }
  .content.view-grid .card__body{
    padding: 12px 14px;
  }
  .content.view-grid .card__name{
    font-size: 14px;
  }
  .content.view-list .card{
    grid-template-columns: 85px 1fr;
    min-height:85px;
  }
  .content.view-list .card__media{
    min-height:85px;
  }
  .content.view-list .card__name{
    font-size:12.5px;
  }
}

/* Grid — 1 column on mobile (list), 2 on tablet+ */
.grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:var(--gap);
}

/* ========================================
   CURRENCY
======================================== */
.cur{ display:inline-flex; align-items:center; gap:5px; vertical-align:middle; }
.cur__svg{ width:14px; height:14px; display:block; fill:currentColor; opacity:.85; }

/* ========================================
   CARDS — Clean, minimal, app-like
======================================== */
.card{
  border:1px solid var(--border-soft);
  background: rgba(255,255,255,.65);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow-card);
  cursor:pointer;
  padding:0;
  text-align:right;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.card:active{
  transform: scale(.98);
}

.card__media{
  height:130px;
  background: rgba(42,31,25,.03);
  position:relative;
  overflow:hidden;
}
.card__media img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition: transform .3s var(--ease);
}
.card:active .card__media img{ transform: scale(1.04); }
.card__placeholder{
  height:100%;
  display:grid;
  place-items:center;
  font-weight:800;
  color: rgba(42,31,25,.30);
  font-size:12px;
}

/* Badges */
.badges{ display:flex; gap:5px; margin-top:4px; flex-wrap:wrap; }
.badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  height:20px;
  padding:0 7px;
  border-radius:999px;
  background: var(--badge-bg);
  border:1px solid var(--badge-border);
}
.badge__value{ font-size:10.5px; font-weight:800; }
.badge__label{ font-size:10px; font-weight:800; white-space:nowrap; }
.badge--kcal i,
.badge--kcal .badge__value{ color: var(--kcal-soft); }
.badge--featured i,
.badge--featured .badge__label{ color: var(--featured-soft); }

.badge i{
  width:15px;
  height:15px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:9px;
  background: var(--badge-icon-bg);
  opacity:.90;
}
.badge--kcal i{ background: var(--badge-kcal-bg); }
.badge--featured i{ background: var(--badge-featured-bg); }

@media (max-width:360px){
  .badge--featured .badge__label{ display:none; }
}

.card__body{ padding:10px 12px; }
.card__top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:8px;
}
.card__info{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.card__name{
  font-weight:800;
  font-size:13px;
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.card__price{
  font-weight:800;
  font-size:13px;
  white-space:nowrap;
  color: var(--espresso);
}
.card__price span{ font-size:10px; opacity:.65; }
.card__desc{
  margin-top:6px;
  color: var(--text-muted);
  font-weight:600;
  font-size:11.5px;
  line-height:1.7;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.card__desc--muted{ opacity:.35; }
.card__cta{
  margin-top:8px;
  font-size:10.5px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid rgba(42,31,25,.06);
  padding-top:8px;
  font-weight:800;
}
.card__cta .link{ color: var(--caramel); }
.card__cta .arrow{ opacity:.5; }

/* Mobile card: horizontal list layout */
@media (max-width:760px){
  .header__inner{ align-items:flex-start; flex-direction:column; }
  .toolbar__row{ flex-direction:row; align-items:center; }
}

@media (max-width:640px){
  .toolbar__row{ flex-direction:row; align-items:center; }
}

/* Empty + hidden */
.empty{
  border:1px dashed var(--border-dashed);
  background: rgba(255,255,255,.45);
  border-radius:var(--radius);
  padding:20px;
  font-weight:800;
  color: var(--text-muted);
  text-align:center;
  font-size:13px;
}
.is-hidden{ display:none !important; }

/* ========================================
   MODAL — Bottom Sheet (iOS-style)
======================================== */
.modal{
  position:fixed;
  inset:0;
  z-index:11000;
  display:none;
}
.modal.is-open{ display:block; }

.modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.50);
}

.modal__dialog{
  position:fixed;
  left:50%;
  bottom:0;
  width: min(680px, 100%);
  max-height: 92vh;
  max-height: 92svh;
  display:flex;
  flex-direction:column;

  border-radius: 24px 24px 0 0;
  background: var(--surface-sheet);
  border: 1px solid var(--border-soft);
  border-bottom:none;
  box-shadow: var(--shadow-sheet);
  overflow:hidden;

  transform: translate(-50%, 100%);
  animation: sheetSlideUp .28s var(--ease) forwards;
  padding-bottom: env(safe-area-inset-bottom);
}

@keyframes sheetSlideUp{
  to{ transform: translate(-50%, 0); }
}

/* Drag handle indicator */
.modal__dialog::before{
  content:"";
  display:block;
  width:36px;
  height:4px;
  border-radius:999px;
  background: rgba(42,31,25,.15);
  margin: 8px auto 0;
  flex-shrink:0;
}

.modal__head{
  padding:8px 14px 10px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  border-bottom:1px solid var(--border-faint);
}

.modal__kicker{
  color: var(--text-muted-2);
  font-weight:700;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.3px;
}
.modal__title{
  margin:2px 0 0;
  font-weight:900;
  font-size:16px;
  line-height:1.3;
}

.modal__body{
  padding:0;
  display:flex;
  flex-direction:column;
  gap:0;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling: touch;
  flex:1;
  min-height:0;
  overscroll-behavior: contain;

  /* Smooth momentum scrolling */
  scroll-behavior: smooth;

  /* Thin scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-accent) transparent;
}
.modal__body::-webkit-scrollbar{ width:4px; }
.modal__body::-webkit-scrollbar-track{ background:transparent; }
.modal__body::-webkit-scrollbar-thumb{ background:var(--scroll-accent); border-radius:999px; }

/* Image — compact, not sticky, scrolls with content */
.modal__media{
  border-radius:0;
  overflow:hidden;
  border:none;
  border-bottom:1px solid var(--border-faint);
  background: rgba(42,31,25,.03);
  height:180px;
  flex-shrink:0;
  position:relative;
}
.modal__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.modal__media img.is-hidden{ display:none; }
.modal__placeholder{
  height:100%;
  display:grid;
  place-items:center;
  font-weight:800;
  color: rgba(42,31,25,.30);
  font-size:12px;
}

/* Info section — padded, all the scrollable content */
.modal__info{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding: 14px;
}

@media (max-width:860px){
  .modal__media{ height:170px; }
}
@media (max-width:520px){
  .modal__dialog{
    width: 100%;
    border-radius: 20px 20px 0 0;
    max-height: 90svh;
  }
  .modal__head{ padding:6px 12px 8px; }
  .modal__info{ padding:12px; gap:10px; }
  .modal__media{ height:150px; }
}
@media (max-width:380px){
  .modal__media{ height:130px; }
}

/* ========================================
   OFFERS BAR
======================================== */
.offers{ margin-top:10px; }
.offers__inner{
  border:1px solid var(--border-soft);
  background: var(--surface-panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow:hidden;
  display:flex;
  align-items:stretch;
}
.offers__badge{
  background: var(--espresso);
  color: var(--cream);
  padding:12px 14px;
  font-weight:800;
  display:flex;
  align-items:center;
  gap:8px;
}
.offers__track{
  flex:1;
  display:flex;
  gap:8px;
  padding:8px;
  overflow:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.offers__track::-webkit-scrollbar{ display:none; }

.offer{
  min-width:220px;
  scroll-snap-align:start;
  border:1px solid var(--border-soft);
  background: rgba(255,255,255,.55);
  border-radius:var(--radius-sm);
  padding:12px;
  transition: transform .15s var(--ease);
}
.offer:active{ transform: scale(.98); }
.offer__title{ font-weight:900; font-size:12.5px; }
.offer__sub{ margin-top:4px; color: var(--text-muted); font-weight:700; font-size:11.5px; }
.offer__code{
  margin-top:8px;
  border:1px dashed var(--border-dashed-3);
  background: rgba(185,136,90,.10);
  color: var(--text);
  border-radius:var(--radius-xs);
  padding:8px 10px;
  font-weight:900;
  font-size:12px;
  cursor:pointer;
  width:100%;
  text-align:center;
}

/* ========================================
   HOURS PILL + MODAL
======================================== */
.hoursPill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:32px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid var(--border-white);
  background: var(--glass-dark);
  color:var(--text-on-dark);
  font-weight:600;
  font-size:11px;

  transition: transform .15s var(--ease), background .2s var(--ease);
  cursor:pointer;
}
.hoursPill:active{
  transform: scale(.96);
  background: var(--glass-dark-hover);
}
.hoursDot{
  width:8px; height:8px;
  border-radius:999px;
  box-shadow: 0 0 0 3px var(--status-ring);
}
.hoursDot.is-open{ background: var(--status-open); }
.hoursDot.is-closed{ background: var(--status-closed); }

.hoursText{
  max-width:110px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity:.90;
  font-weight:500;
}
.hoursPill i{ opacity:.85; }

@media (max-width:380px){
  .hoursText{ display:none; }
  .hoursPill{ padding:0 8px; }
}

/* Hours Modal */
.hoursModal{
  position:fixed;
  inset:0;
  display:none;
  z-index: 10000;
}
.hoursModal.is-open{ display:block; }

.hoursModal__backdrop{
  position:absolute;
  inset:0;
  background: var(--overlay-brown);

}

.hoursModal__dialog{
  position:absolute;
  left:50%;
  bottom:0;
  transform: translateX(-50%) translateY(100%);
  width: min(480px, 100%);
  max-height: 85svh;
  border-radius:22px 22px 0 0;
  overflow:hidden;
  border:1px solid var(--border-soft);
  border-bottom:none;
  background: var(--surface-panel-strong);
  box-shadow: var(--shadow-sheet);
  animation: hoursIn .25s var(--ease) forwards;
  display:flex;
  flex-direction:column;
}
@keyframes hoursIn{ to{ transform:translateX(-50%) translateY(0); } }

.hoursModal__dialog::before{
  content:"";
  display:block;
  width:36px;
  height:4px;
  border-radius:999px;
  background: rgba(42,31,25,.12);
  margin: 8px auto 0;
}

.hoursModal__head{
  padding:6px 12px 8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  border-bottom:1px solid var(--border-faint);
}
.hoursModal__kicker{
  font-size:10.5px;
  font-weight:600;
  color: var(--text-muted-3);
  text-transform:uppercase;
  letter-spacing:.3px;
}
.hoursModal__close{
  width:32px; height:32px;
  border-radius:var(--radius-xs);
  border:1px solid var(--border-faint);
  background: rgba(255,255,255,.50);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition: background .15s var(--ease);
}
.hoursModal__close:active{ background: rgba(255,255,255,.70); }

.hoursModal__body{
  padding:10px 12px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  flex:1;
  min-height:0;
  scrollbar-width:thin;
  scrollbar-color: var(--scroll-accent) var(--scroll-track);
}
.hoursModal__body::-webkit-scrollbar{ width:6px; }
.hoursModal__body::-webkit-scrollbar-track{ background: var(--scroll-track); border-radius:999px; }
.hoursModal__body::-webkit-scrollbar-thumb{ background: var(--scroll-accent); border-radius:999px; }

.hoursModal__foot{
  padding:8px 12px 10px;
  border-top:1px solid var(--border-faint);
}
.hoursNote{
  font-size:11px;
  font-weight:700;
  color: rgba(42,31,25,.55);
}

/* Weekly list */
#hoursList{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.hoursDayBlock{
  border:1px solid var(--border-faint);
  background: rgba(255,255,255,.50);
  border-radius:var(--radius-xs);
  padding:8px;
}
.hoursDayBlock.is-today{
  border-color: rgba(185,136,90,.22);
  background: rgba(185,136,90,.08);
}
.hoursDayTitle{
  font-weight:800;
  font-size:12px;
  color: var(--text);
  margin-bottom:5px;
}
.hoursLine{
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 8px;
  border-radius:var(--radius-xs);
  border:1px solid var(--border-faint);
  background: rgba(246,240,232,.70);
  font-weight:700;
  font-size:11.5px;
  color: var(--text-strong);
  line-height:1.5;
}
.hoursLine + .hoursLine{ margin-top:4px; }
.hoursLine.is-empty{ justify-content:center; opacity:.6; }
.hoursLine__label{ font-weight:800; color: var(--text-muted); white-space:nowrap; }
.hoursLine__sep{ opacity:.45; font-weight:800; }
.hoursLine__range{ font-weight:800; color: var(--text-stronger); }
.hoursLine--single{ justify-content:flex-start; }

@media (max-width:520px){
  .hoursPill{ height:30px; padding:0 9px; gap:6px; font-size:10.5px; }
  .hoursDot{ width:7px; height:7px; }
  .hoursText{ max-width:85px; }
}

/* ========================================
   CROPS — Horizontal scroll rail
======================================== */
.cropsWrap{ padding-top:4px; }
.cropsHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.cropsTitle{ margin:0; font-weight:900; font-size:16px; }
.cropsCount{
  border:1px solid var(--border);
  background: rgba(255,255,255,.55);
  border-radius:999px;
  padding:5px 10px;
  font-weight:800;
  font-size:11px;
  color: var(--text-muted);
}
.cropsDesc{ margin-top:4px; color: var(--text-muted); font-weight:600; font-size:11.5px; }

.cropsRail{
  display:flex;
  gap:var(--gap-sm);
  overflow:auto;
  padding:4px 2px 8px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.cropsRail::-webkit-scrollbar{ display:none; }

.cropMini{
  flex:0 0 auto;
  width:200px;
  scroll-snap-align:start;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius:var(--radius-sm);
  background: rgba(255,255,255,.70);
  text-align:right;
  border: 1px solid var(--border-soft);
  position: relative;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
  cursor:pointer;
}
.cropMini:active{
  transform: scale(.97);
}

.cropMini__img{
  width:38px;
  height:38px;
  border-radius:999px;
  overflow:hidden;
  border:1px solid rgba(42,31,25,.08);
  background:rgba(42,31,25,.04);
  display:grid;
  place-items:center;
  flex:0 0 auto;
}
.cropMini__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.cropMini__img .ph{ font-weight:800; font-size:11px; opacity:.6; }

.cropMini__txt{ min-width:0; flex:1; }
.cropMini__txt .a{
  display:block;
  font-weight:800;
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cropMini__txt .b{
  display:block;
  margin-top:2px;
  font-weight:600;
  font-size:10.5px;
  opacity:.60;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cropMini__chev{ font-weight:800; opacity:.45; flex:0 0 auto; }

.cropMini__star{
  position:absolute;
  top:4px;
  right:6px;
  width:20px;
  height:20px;
  border-radius:999px;
  display:grid;
  place-items:center;
  z-index:3;
  background:rgba(245,158,11,.14);
  color: rgba(146,65,14,.60);
}
.cropMini__star i{ font-size:9px; }

/* ========================================
   CROP MODAL
======================================== */
.cropModal{
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: none;
}
.cropModal.is-open{ display:block; }

.cropModal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);

}

.cropModal__dialog{
  position: fixed;
  left: 50%;
  bottom: 0;
  width: min(520px, 100%);
  max-height: 90svh;
  transform: translate(-50%, 100%);
  animation: sheetSlideUp .28s var(--ease) forwards;
}

.cropModal__card{
  border-radius: 22px 22px 0 0;
  border: 1px solid var(--border-soft);
  border-bottom:none;
  background: var(--surface-sheet);
  box-shadow: var(--shadow-sheet);
  overflow: hidden;
  display:flex;
  flex-direction:column;
  max-height: 90svh;
  padding-bottom: env(safe-area-inset-bottom);
}

.cropModal__card::before{
  content:"";
  display:block;
  width:36px;
  height:4px;
  border-radius:999px;
  background: rgba(42,31,25,.12);
  margin: 8px auto 0;
}

.cropModal__head{
  padding: 8px 14px 10px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  border-bottom: 1px solid var(--border-faint);
}
.cropModal__title{
  font-weight: 900;
  font-size: 15px;
  color: var(--espresso);
  line-height:1.3;
}
.cropModal__sub{
  margin-top: 3px;
  font-weight: 700;
  font-size: 11.5px;
  opacity: .65;
}

.cropModal__body{
  padding: 14px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Crop content */
.cm_top{ display:flex; align-items:center; gap:12px; }
.cm_flagWrap{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  overflow:hidden;
  border: 1px solid var(--border-faint);
  background: rgba(255,255,255,.55);
  display:grid;
  place-items:center;
  flex: 0 0 auto;
}
.cm_flag{ width:100%; height:100%; object-fit: cover; display:block; }
.cm_flag_empty{ font-weight: 800; color: rgba(42,31,25,.35); }

.cm_topText{ flex: 1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.cm_line{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  border: 1px solid var(--border-faint);
  background: rgba(255,255,255,.50);
  border-radius: var(--radius-xs);
  padding: 7px 10px;
}
.cm_label{ font-weight: 800; font-size: 11px; opacity: .55; white-space:nowrap; }
.cm_value{
  font-weight: 800;
  font-size: 12px;
  color: var(--espresso);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.cm_pills{
  margin-top: 10px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:8px;
}
.cm_pill{
  display:flex;
  flex-direction:column;
  gap:4px;
  border: 1px solid var(--border-faint);
  background: rgba(255,255,255,.55);
  border-radius: var(--radius-sm);
  padding: 10px;
}
.cm_pill .k{ font-weight: 800; font-size: 10.5px; opacity:.50; }
.cm_pill .v{ font-weight: 800; font-size: 12px; color: var(--espresso); }

.cm_notesBlock{
  margin-top: 10px;
  border: 1px solid var(--border-faint);
  background: rgba(255,255,255,.55);
  border-radius: var(--radius-sm);
  padding: 12px;
}
.cm_notesTitle{ font-weight: 900; font-size: 12px; color: var(--espresso); }
.cm_notes{
  margin-top: 8px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.cm_note{
  display:inline-flex;
  align-items:center;
  border: 1px solid var(--border-faint);
  background: rgba(246,240,232,.85);
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 800;
  font-size: 11.5px;
}

@media (max-width:620px){
  .cm_pills{ grid-template-columns: 1fr; }
  .cm_top{ align-items:stretch; }
  .cm_flagWrap{ width: 48px; height: 48px; border-radius:var(--radius-sm); }
}
@media (max-width:420px){
  .cropModal__dialog{ width: 100%; }
  .cropModal__head{ padding:6px 12px 8px; }
  .cropModal__body{ padding:12px; }
}

/* ========================================
   FOOTER
======================================== */
.footer{
  margin-top:0;
  border-top:1px solid rgba(42,31,25,.06);
  background: rgba(246,240,232,.50);
}
.footer__inner{
  max-width:960px;
  margin:0 auto;
  padding:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.footer__brand{
  font-weight:800;
  font-size:12px;
  color: var(--espresso);
}
.footer__sub{
  font-size:11px;
  font-weight:600;
  color: rgba(42,31,25,.45);
}

/* ========================================
   ITEM MODAL — Info blocks
======================================== */
#modal .modal__info{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Add-to-cart block inside #modal body — needs own padding since it's outside modal__info */
#modal .modal__body > .block{
  padding: 0 14px 14px;
}
@media (max-width:520px){
  #modal .modal__body > .block{
    padding: 0 12px 12px;
  }
}

#modal .meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

#modal .meta__box{
  border:1px solid var(--border-faint);
  background: rgba(255,255,255,.50);
  border-radius:var(--radius-sm);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

#modal .meta__label,
#modal .block__label{
  font-size:11px;
  font-weight:700;
  color: var(--text-muted-2);
  text-transform:uppercase;
  letter-spacing:.2px;
}

#modal .meta__value{
  font-size:16px;
  font-weight:900;
  color: var(--espresso);
}

#modal .block{
  border:1px solid var(--border-faint);
  background: rgba(255,255,255,.50);
  border-radius:var(--radius-sm);
  padding:14px;
}

#modal .block__value{
  margin-top:6px;
  font-size:13px;
  font-weight:700;
  color: rgba(42,31,25,.80);
  line-height:1.85;
}

#modal .chips2{
  margin-top:10px;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
  gap:8px;
}

#modal .chip2{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  background: rgba(246,240,232,.50);
  border:1px solid rgba(42,31,25,.05);
  font-weight:800;
  font-size:11.5px;
  color: var(--espresso);
  white-space:nowrap;
}

#modal .chip2__in{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

#modal .chip2__icon,
#modal .chip2 img{
  width:22px;
  height:22px;
  object-fit:contain;
  flex-shrink:0;
  border-radius:4px;
}

#modal .chips2.is-empty::before{
  content:"لا توجد حساسية محددة";
  font-weight:700;
  font-size:11.5px;
  opacity:.50;
  grid-column: 1 / -1;
}

@media (max-width:520px){
  #modal .meta{ grid-template-columns:1fr; }
  #modal .meta__box,
  #modal .block{ padding:12px; border-radius:var(--radius-xs); }
  #modal .meta__value{ font-size:14px; }
  #modal .block__value{ font-size:12.5px; }
  #modal .chips2{ grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap:6px; }
  #modal .chip2{ padding:8px 10px; font-size:11px; }
  #modal .chip2__icon, #modal .chip2 img{ width:18px; height:18px; }
}

/* ========================================
   EXTRAS (Item Modal)
======================================== */
.extrasBlock{ margin-top: 8px; }
.extras{ display:flex; flex-direction:column; gap:10px; }
.extraGroup{
  border: 1px solid rgba(42,31,25,.06);
  background: rgba(255,255,255,.55);
  border-radius: var(--radius);
  overflow:hidden;
}
.extraGroup__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding: 10px 14px;
  background: rgba(246,240,232,.40);
  border-bottom: 1px solid rgba(42,31,25,.04);
}
.extraGroup__title{
  font-weight: 900;
  font-size: 12.5px;
  color: var(--espresso);
  display:flex;
  align-items:center;
  gap:6px;
}
.extraGroup__req{
  display:inline-flex;
  align-items:center;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(185,136,90,.15);
  color: var(--caramel);
  letter-spacing: .2px;
}
.extraGroup--error{
  animation: shakeGroup .4s ease;
  box-shadow: 0 0 0 2px rgba(220,80,60,.45);
  border-radius: 14px;
}
@keyframes shakeGroup{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-5px)}
  40%{transform:translateX(5px)}
  60%{transform:translateX(-3px)}
  80%{transform:translateX(3px)}
}

/* Payment method selector */
.payMethods{
  display:flex;
  gap:10px;
}
.payMethod{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 12px;
  border-radius:var(--radius);
  border:2px solid rgba(42,31,25,.10);
  background:rgba(246,240,232,.30);
  font-weight:800;
  font-size:13px;
  color:var(--espresso);
  cursor:pointer;
  transition:all .15s ease;
}
.payMethod i{ font-size:16px; opacity:.55; }
.payMethod.is-active{
  border-color:var(--caramel);
  background:rgba(185,136,90,.12);
}
.payMethod.is-active i{ opacity:1; color:var(--caramel); }
.payMethod:not(.is-active):hover{
  border-color:rgba(42,31,25,.18);
  background:rgba(246,240,232,.50);
}

/* Moyasar form */
#moyasarForm{ min-height:180px; }
#moyasarForm .moyasar-form{ direction:ltr; }
.extraGroup__opts{
  display:flex;
  flex-direction:column;
}
.extraOpt{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 12px 14px;
  font-weight: 700;
  font-size: 13px;
  color: var(--espresso);
  cursor:pointer;
  transition: background .15s var(--ease);
  border:none;
  background:transparent;
  text-align:right;
  width:100%;
  border-bottom: 1px solid rgba(42,31,25,.035);
  -webkit-tap-highlight-color: transparent;
  position:relative;
  line-height:1.3;
}
.extraOpt:last-child{ border-bottom:none; }
.extraOpt:active{ background: rgba(42,31,25,.02); }

/* Soft radio dot */
.extraOpt::before{
  content:'';
  width:20px;
  height:20px;
  border-radius:50%;
  border:2px solid rgba(42,31,25,.12);
  background:#fff;
  flex-shrink:0;
  transition: all .25s var(--ease);
  order:-1;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.04);
}
.extraOpt.is-active::before{
  border-color: var(--caramel);
  background: var(--caramel);
  box-shadow: inset 0 0 0 3px #fff, 0 1px 4px rgba(185,136,90,.25);
}

.extraOpt.is-active{
  background: rgba(185,136,90,.04);
}

.extraOpt__t{
  flex:1;
  text-align:right;
}

.extraOpt__p{
  font-weight: 800;
  font-size: 11.5px;
  color: var(--caramel);
  white-space:nowrap;
  flex-shrink:0;
}

.extrasHint{
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(42,31,25,.35);
  text-align:center;
}

@media (max-width:520px){
  .extraGroup__head{ padding:9px 12px; }
  .extraOpt{ padding:11px 12px; font-size:12.5px; gap:10px; }
  .extraOpt::before{ width:18px; height:18px; }
  .extraOpt.is-active::before{ box-shadow: inset 0 0 0 2.5px #fff, 0 1px 4px rgba(185,136,90,.25); }
}

/* Cart extras */
.cartRow__extras{
  margin-top: 4px;
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}
.chipTiny{
  display:inline-flex;
  align-items:center;
  border: 1px solid var(--border-faint);
  background: rgba(246,240,232,.85);
  border-radius: 999px;
  padding: 4px 8px;
  font-weight: 800;
  font-size: 10.5px;
}

/* Allergens chip general */
.chip2{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:800;
  background: linear-gradient(135deg, rgba(185,136,90,.10), rgba(185,136,90,.05));
  border:1px solid var(--border-faint);
}
.chip2 span{ pointer-events:none; }

/* ========================================
   CART / CHECKOUT / TRACKING
======================================== */
.qtyBtn{
  width:40px;height:40px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:rgba(255,255,255,.85);
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:800;cursor:pointer;
  transition: all .12s var(--ease);
}
.qtyBtn:active{transform: scale(.94)}
.qtyBtn--sm{width:36px;height:36px;border-radius:var(--radius-xs)}

.qtyVal{
  min-width:50px;height:40px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border-faint);
  background:rgba(255,255,255,.65);
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:14px;
}
.qtyVal--sm{min-width:44px;height:36px;border-radius:var(--radius-xs)}

.noteInput,.textInput{
  width:100%;margin-top:8px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:rgba(255,255,255,.75);
  padding:11px 14px;
  font-weight:600;font-size:13px;
  outline:none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.noteInput:focus,.textInput:focus{
  border-color:rgba(185,136,90,.35);
  box-shadow:0 0 0 3px rgba(185,136,90,.08);
}

.btnFull{
  width:100%;margin-top:12px;
  display:flex;flex-direction:column;gap:2px;
  align-items:center;justify-content:center;
  padding:14px 16px;
  border-radius:var(--radius);
  transition: transform .12s var(--ease);
}
.btnFull:active{ transform: scale(.98); }
.btnFull__txt{font-weight:900;font-size:14px}
.btnFull__sub{font-size:11px;opacity:.80;font-weight:700;transition:opacity .2s var(--ease),transform .2s var(--ease)}
.btnFull__sub.addAnim--out{opacity:0;transform:translateY(6px)}
.btnFull__sub.addAnim--in{animation:addBounceIn .35s var(--ease-spring) forwards}
@keyframes addBounceIn{0%{opacity:0;transform:translateY(-6px)}60%{opacity:1;transform:translateY(2px)}100%{opacity:1;transform:translateY(0)}}
.btnFull.is-added{animation:addPulse .3s var(--ease)}
@keyframes addPulse{0%{transform:scale(1)}50%{transform:scale(1.03)}100%{transform:scale(1)}}
.btnFull--link{text-decoration:none}
.modal__body--onecol{
  display:flex !important;
  flex-direction:column !important;
  padding:14px !important;
  gap:10px !important;
}

/* Floating Cart — pill at bottom */
.cartFab{
  position:fixed;left:50%;bottom:20px;
  transform:translateX(-50%) translateY(0);
  z-index:9999;
  display:flex;align-items:center;gap:10px;
  padding:8px 10px 8px 8px;
  border-radius:999px;
  border:1px solid var(--border-soft);
  background:rgba(255,255,255,.96);
  box-shadow: 0 4px 24px rgba(0,0,0,.10), 0 0 1px rgba(0,0,0,.08), 0 0 0 1px rgba(255,255,255,.4) inset;
  cursor:pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), opacity .2s var(--ease);
  animation: fabSlideIn .3s var(--ease-spring) forwards;
}
@keyframes fabSlideIn{
  from{ transform:translateX(-50%) translateY(20px); opacity:0; }
  to{ transform:translateX(-50%) translateY(0); opacity:1; }
}
.cartFab:active{
  transform:translateX(-50%) scale(.97);
}
.cartFab__icon{
  width:40px;height:40px;
  border-radius:999px;
  background:var(--espresso);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;
}
.cartFab__txt{display:flex;align-items:center;gap:6px;font-weight:800;font-size:13px}
.cartFab__count{min-width:20px;text-align:center}
.cartFab__sep{opacity:.35}
.cartFab__total{opacity:.80;font-weight:800}
@media (max-width:520px){
  .cartFab{width:calc(100% - 24px);justify-content:center}
}

/* Cart list */
.cartList{display:flex;flex-direction:column;gap:8px}
.cartRow{
  display:flex;justify-content:space-between;gap:12px;
  padding:12px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border-faint);
  background:rgba(255,255,255,.60);
}
.cartRow__main{ flex:1; min-width:0; }
.cartRow__title{font-weight:800;font-size:13px;margin-bottom:3px}
.cartRow__note{font-size:11px;font-weight:700;opacity:.65;margin-bottom:3px}

/* Price breakdown per row */
.cartRow__prices{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 8px;
  margin-top:6px;
  padding-top:6px;
  border-top:1px dashed rgba(42,31,25,.06);
}
.cartRow__basePrice{
  font-size:12px;
  font-weight:700;
  color: var(--espresso);
  opacity:.70;
}
.cartRow__extrasPrice{
  font-size:11px;
  font-weight:700;
  color: var(--caramel);
}
.cartRow__unitTotal{
  font-size:13px;
  font-weight:900;
  color: var(--espresso);
  margin-inline-start:auto;
}
/* If no extras, base price is the total — make it bolder */
.cartRow__prices .cartRow__basePrice:only-child{
  font-size:13px;
  font-weight:900;
  opacity:1;
}

/* Extras chips in cart row */
.chipTiny__p{
  font-size:9.5px;
  opacity:.60;
  margin-inline-start:2px;
}

.cartRow__side{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.cartRow__qty{display:flex;align-items:center;gap:6px}
.cartRow__remove{
  width:34px;height:34px;
  border-radius:var(--radius-xs);
  border:1px solid var(--border);
  background:rgba(255,255,255,.85);
  cursor:pointer;
  display:grid;place-items:center;
  transition: all .12s var(--ease);
}
.cartRow__remove:active{transform: scale(.92)}

/* Cart summary breakdown */
.cartSummary{
  margin-top:10px;padding-top:10px;
  border-top:1px solid var(--border-faint);
  display:flex;flex-direction:column;gap:10px;
}

.cartBreakdown{
  display:flex;
  flex-direction:column;
  gap:0;
  border:1px solid rgba(42,31,25,.06);
  border-radius:var(--radius-sm);
  background:rgba(246,240,232,.30);
  overflow:hidden;
}
.cartBreakdown__row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 14px;
  font-size:12.5px;
  font-weight:700;
  color: rgba(42,31,25,.65);
  border-bottom:1px solid rgba(42,31,25,.04);
}
.cartBreakdown__row:last-of-type{
  border-bottom:none;
}
.cartBreakdown__total{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 14px;
  font-size:15px;
  font-weight:900;
  color: var(--espresso);
  background:rgba(42,31,25,.03);
  border-top:1px solid rgba(42,31,25,.06);
}

.pickupGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pickupOpt{
  display:flex;gap:8px;align-items:center;justify-content:center;
  padding:11px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:rgba(255,255,255,.70);
  font-weight:800;font-size:12px;
  cursor:pointer;
  transition: all .15s var(--ease);
}
.pickupOpt:active{ transform: scale(.97); }
.pickupOpt.is-active{
  border-color:rgba(185,136,90,.35);
  background:rgba(185,136,90,.10);
  box-shadow:0 0 0 2px rgba(185,136,90,.08);
}

.hintText{font-size:11px;font-weight:700;color:var(--text-muted-2);margin-top:6px}
.otpRow{display:flex;gap:8px;align-items:center}
.submitError{
  margin-top:8px;padding:10px 12px;
  border-radius:var(--radius-sm);
  border:1px solid rgba(225,29,72,.20);
  background:rgba(225,29,72,.05);
  font-weight:800;color:#9f1239;font-size:12px;
}

.successBox{
  display:flex;gap:12px;align-items:center;
  padding:14px;
  border-radius:var(--radius);
  border:1px solid var(--border-faint);
  background:rgba(255,255,255,.65);
}
.successBox__icon{
  width:48px;height:48px;
  border-radius:var(--radius-sm);
  background:rgba(16,185,129,.10);
  color:#065f46;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;
}
.successBox__label{font-size:11px;font-weight:700;color:var(--text-muted-2)}
.successBox__value{font-size:20px;font-weight:900;letter-spacing:.2px}

/* ========================================
   Track Modal – animated stepper
======================================== */
/* Order number pill */
.trkNum{
  text-align:center;
  margin-bottom:4px;
}
.trkNum__lbl{
  font-size:10px; font-weight:700; color:var(--text-muted-2);
  display:block; margin-bottom:2px;
}
.trkNum__val{
  font-size:20px; font-weight:900; letter-spacing:.5px;
}

/* Hero emoji card */
.trkHero{
  text-align:center;
  padding:22px 14px 18px;
  border-radius:var(--radius);
  background:linear-gradient(135deg, rgba(185,136,90,.08), rgba(246,240,232,.6));
  border:1px solid rgba(185,136,90,.12);
  margin-bottom:6px;
  transition:background .4s, border-color .4s;
}
.trkHero--ready{
  background:linear-gradient(135deg, rgba(52,168,83,.08), rgba(232,248,232,.5));
  border-color:rgba(52,168,83,.18);
}
.trkHero--done{
  background:linear-gradient(135deg, rgba(42,31,25,.04), rgba(246,240,232,.4));
  border-color:rgba(42,31,25,.10);
}
.trkHero--cancel{
  background:linear-gradient(135deg, rgba(220,60,60,.06), rgba(255,240,240,.5));
  border-color:rgba(220,60,60,.15);
}
.trkHero__emoji{
  font-size:52px;
  line-height:1;
  margin-bottom:10px;
  display:inline-block;
}
.trkBounce{
  animation: trkBounceAnim .6s cubic-bezier(.34,1.56,.64,1);
}
@keyframes trkBounceAnim{
  0%{transform:scale(.3) rotate(-8deg); opacity:.2}
  50%{transform:scale(1.15) rotate(4deg); opacity:1}
  100%{transform:scale(1) rotate(0)}
}
.trkHero__label{
  font-size:16px; font-weight:900; color:var(--espresso);
  margin-bottom:4px;
}
.trkHero__sub{
  font-size:12px; font-weight:700; color:var(--text-muted-2);
  line-height:1.5;
}

/* Progress stepper */
.trkSteps{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  position:relative;
  padding:10px 0 6px;
  margin-bottom:4px;
}
/* Connecting line behind dots */
.trkSteps::before{
  content:'';
  position:absolute;
  top:28px;
  left:10%;
  right:10%;
  height:3px;
  background:rgba(42,31,25,.08);
  border-radius:2px;
  z-index:0;
}
.trkStep{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  flex:1;
  position:relative;
  z-index:1;
}
.trkStep__icon{
  font-size:18px;
  line-height:1;
  opacity:.25;
  transition:all .3s;
  filter:grayscale(1);
}
.trkStep__dot{
  width:12px; height:12px;
  border-radius:50%;
  background:rgba(42,31,25,.10);
  border:2px solid rgba(42,31,25,.06);
  transition:all .35s cubic-bezier(.34,1.56,.64,1);
}
.trkStep__txt{
  font-size:9px;
  font-weight:800;
  color:var(--text-muted-2);
  opacity:.5;
  transition:all .3s;
  text-align:center;
}

/* Done state */
.trkStep.is-done .trkStep__icon{
  opacity:.7; filter:grayscale(0);
}
.trkStep.is-done .trkStep__dot{
  background:var(--caramel);
  border-color:var(--caramel);
  transform:scale(1);
}
.trkStep.is-done .trkStep__txt{
  opacity:.7;
}

/* Active state */
.trkStep.is-active .trkStep__icon{
  opacity:1;
  filter:grayscale(0);
  animation: stepPop .5s cubic-bezier(.34,1.56,.64,1);
}
.trkStep.is-active .trkStep__dot{
  background:var(--caramel);
  border-color:var(--espresso);
  transform:scale(1.4);
  box-shadow:0 0 0 4px rgba(185,136,90,.2);
}
.trkStep.is-active .trkStep__txt{
  opacity:1;
  color:var(--espresso);
}
@keyframes stepPop{
  0%{transform:scale(.5); opacity:0}
  60%{transform:scale(1.3)}
  100%{transform:scale(1); opacity:1}
}

/* Canceled state */
.trkStep.is-cancel .trkStep__icon{ opacity:.2; filter:grayscale(1); }
.trkStep.is-cancel .trkStep__dot{ background:rgba(220,60,60,.18); border-color:rgba(220,60,60,.12); }
.trkStep.is-cancel .trkStep__txt{ opacity:.35; text-decoration:line-through; }

/* Last update meta */
.trkMeta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:11px;
  font-weight:700;
  color:var(--text-muted-2);
  margin-bottom:6px;
}
.trkMeta i{ font-size:12px; }


/* ========================================
   ARRIVED — زر "أنا وصلت" في تتبع الطلب
======================================== */
.trkArrivedWrap{
  margin: 4px 0 12px;
}

/* الزر الرئيسي */
.btn--arrived{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 20px;
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  border: none;
  border-radius: var(--radius, 18px);
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(22,163,74,.30), 0 0 0 0 rgba(22,163,74,.4);
  animation: arrivedPulse 2s ease-in-out infinite;
  transition: opacity .18s, transform .14s;
  letter-spacing: .01em;
}
.btn--arrived:hover{
  opacity: .93;
  transform: translateY(-1px);
}
.btn--arrived:active{
  opacity: .82;
  transform: scale(.975);
  animation: none;
}
.btn--arrived:disabled{
  opacity: .55;
  cursor: not-allowed;
  animation: none;
}

@keyframes arrivedPulse{
  0%,100%{ box-shadow: 0 4px 20px rgba(22,163,74,.28), 0 0 0 0   rgba(22,163,74,.35); }
  50%    { box-shadow: 0 4px 24px rgba(22,163,74,.20), 0 0 0 10px rgba(22,163,74,.00); }
}

/* حالة وصول + خطأ */
.trkArrived{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  border-radius: var(--radius, 18px);
  font-weight: 800;
  font-size: 14px;
  line-height: 1.4;
}
.trkArrived__icon{
  font-size: 20px;
  flex-shrink: 0;
}
.trkArrived--done{
  background: rgba(22,163,74,.10);
  color: #15803d;
  border: 1.5px solid rgba(22,163,74,.22);
}
.trkArrived--err{
  background: rgba(220,38,38,.08);
  color: #b91c1c;
  border: 1.5px solid rgba(220,38,38,.18);
}

/* dark mode */
@media (prefers-color-scheme: dark){
  .trkArrived--done{
    background: rgba(22,163,74,.15);
    color: #346144;
    border-color: rgba(22,163,74,.25);
  }
  .trkArrived--err{
    background: rgba(220,38,38,.12);
    color: #f87171;
    border-color: rgba(220,38,38,.22);
  }
}

/* ========================================
   OTP
======================================== */
.otpCard{
  border:1px solid var(--border-faint);
  background:rgba(255,255,255,.65);
  border-radius:var(--radius);
  padding:16px;
}
.otpCard__top{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.otpCard__label{font-weight:800;font-size:13px}
.otpCard__sub{font-size:11.5px;font-weight:700;opacity:.60}

.otpInputs{display:flex;gap:8px;justify-content:center;margin:10px 0 12px}
.otpInput{
  width:50px;height:54px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:rgba(255,255,255,.85);
  text-align:center;
  font-size:20px;font-weight:900;
  outline:none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.otpInput:focus{
  box-shadow:0 0 0 3px rgba(185,136,90,.10);
  border-color:rgba(185,136,90,.40);
}
.otpActions{display:flex;align-items:center;justify-content:space-between;gap:8px}
.otpStatus{font-size:11.5px;font-weight:800;opacity:.80}
.otpTimer{margin-inline-start:6px;font-weight:800;opacity:.70}
.btn.is-disabled{opacity:.50;cursor:not-allowed}

@media (max-width:420px){
  .otpInput{width:44px;height:50px;border-radius:12px;font-size:18px}
}

/* ========================================
   LINKS MODAL
======================================== */
.linksModal{
  position:fixed;
  inset:0;
  display:none;
  z-index: 11000;
}
.linksModal.is-open{ display:block; }

.linksModal__backdrop{
  position:absolute;
  inset:0;
  background: var(--overlay-brown);

}

.linksModal__dialog{
  position:absolute;
  left:50%;
  bottom:0;
  transform: translateX(-50%) translateY(100%);
  width: min(480px, 100%);
  max-height: 80svh;
  border-radius:22px 22px 0 0;
  overflow:hidden;
  border:1px solid var(--border-soft);
  border-bottom:none;
  background: var(--surface-panel-strong);
  box-shadow: var(--shadow-sheet);
  animation: linksIn .25s var(--ease) forwards;
  display:flex;
  flex-direction:column;
}
@keyframes linksIn{ to{ transform:translateX(-50%) translateY(0); } }

.linksModal__dialog::before{
  content:"";
  display:block;
  width:36px;
  height:4px;
  border-radius:999px;
  background: rgba(42,31,25,.12);
  margin: 8px auto 0;
}

.linksModal__head{
  padding:6px 12px 8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid var(--border-faint);
}

.linksModal__kicker{
  font-size:10.5px;
  font-weight:600;
  color: var(--text-muted-3);
  text-transform:uppercase;
  letter-spacing:.3px;
}

.linksModal__close{
  width:32px; height:32px;
  border-radius:var(--radius-xs);
  border:1px solid var(--border-faint);
  background: rgba(255,255,255,.50);
  display:grid;
  place-items:center;
  cursor:pointer;
}

.linksModal__body{
  padding:10px 12px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  flex:1;
  min-height:0;
}

.linksModal__foot{
  padding:8px 12px 10px;
  border-top:1px solid var(--border-faint);
}

.sheetLink{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border-faint);
  background: rgba(255,255,255,.55);
  text-decoration:none;
  color: inherit;
  margin-bottom:8px;
  transition: background .15s var(--ease);
}
.sheetLink:active{ background: rgba(255,255,255,.75); }

.sheetLink__icon{
  width:36px; height:36px;
  border-radius:var(--radius-xs);
  border:1px solid var(--border-faint);
  background: rgba(255,255,255,.60);
  display:grid;
  place-items:center;
  flex:0 0 auto;
}
.sheetLink__txt{
  font-weight:600;
  font-size:13px;
  flex:1 1 auto;
}
.sheetLink__out{
  opacity:.45;
  flex:0 0 auto;
}

.sheetEmpty{
  padding:14px;
  border-radius:var(--radius-sm);
  border:1px dashed var(--border-dashed);
  background: rgba(255,255,255,.40);
  color: var(--text-muted-2);
  font-weight:700;
  text-align:center;
  font-size:12px;
}
.sheetHint{
  font-size:11px;
  color: var(--text-muted-2);
  font-weight:700;
  text-align:center;
}

/* ========================================
   BRANCH DROPDOWN
======================================== */
.branchDD{ position:relative; display:inline-block; }

.branchPill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:32px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid var(--border-white);
  background: var(--glass-dark);
  color:var(--text-on-dark);
  font-weight:600;
  font-size:11px;
  cursor:pointer;
  max-width: 200px;

  transition: transform .15s var(--ease), background .2s var(--ease);
}
.branchPill:active{
  transform: scale(.96);
  background: var(--glass-dark-hover);
}
.branchPill i{ opacity:.85; }
.branchPill .branchName{
  max-width: 120px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  opacity:.95;
}
.branchPill .chev{ font-size:11px; opacity:.70; }

.branchMenu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width: 240px;
  z-index: 9999;
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  background: var(--surface-panel-solid);
  box-shadow: var(--shadow-menu);
  overflow:hidden;
}
.branchMenu.hidden{ display:none; }

.branchMenu::before{
  content:"";
  position:absolute;
  top:-5px;
  right:16px;
  width:10px;
  height:10px;
  transform: rotate(45deg);
  background: var(--surface-panel-solid);
  border-left: 1px solid var(--border-soft);
  border-top: 1px solid var(--border-soft);
}

.branchItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-faint);
  color: var(--espresso);
  text-decoration:none;
  font-weight: 700;
  font-size: 12px;
  background: transparent;
  transition: background .15s var(--ease);
}
.branchItem:last-child{ border-bottom:0; }
.branchItem:active{ background: rgba(185,136,90,.10); }
.branchItem.is-active{ background: rgba(185,136,90,.12); }
.branchItem .truncate{
  max-width: 180px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media (max-width:520px){
  .branchPill{ height:30px; padding:0 9px; gap:6px; font-size:10.5px; max-width: 180px; }
  .branchPill .branchName{ max-width: 90px; }
  .branchMenu{ min-width: 210px; }
}
@media (max-width:380px){
  .branchPill .branchName{ display:none; }
}

/* Z-index stacking */
.header,
.header__inner,
.header__inner--simple,
.headerActions{
  overflow: visible !important;
}
.header{
  position: relative;
  z-index: 3000;
}
.branchDD{ position: relative; z-index: 4000; }
.branchMenu{ z-index: 5000; }
.heroOffers,
.heroOffers__wrap{
  position: relative;
  z-index: 1;
}

/* ========================================
   MOOD PICKER
======================================== */
.mood{ margin: 10px 0 8px; }
.mood__card{
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow);
  background: rgba(255,255,255,.55);

}
.mood__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding: 14px 14px 8px;
}
.mood__kicker{ font-weight: 700; font-size: 11px; opacity:.60; text-transform:uppercase; letter-spacing:.2px; }
.mood__title{ margin: 2px 0; font-size: 17px; font-weight: 900; color: var(--espresso); }
.mood__sub{ font-size: 12.5px; opacity:.70; font-weight:600; }
.mood__skip{
  appearance:none; border:0;
  background: rgba(42,31,25,.05);
  color: var(--espresso);
  font-weight: 800;
  border-radius: 999px;
  padding: 8px 12px;
  font-size:12px;
  cursor:pointer;
  transition: transform .12s var(--ease);
}
.mood__skip:active{ transform: scale(.95); }

.mood__grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
  padding: 8px 14px 12px;
}
.moodBtn{
  width:100%;
  text-align:right;
  border: 1px solid var(--border-faint);
  background: rgba(246,240,232,.65);
  border-radius: var(--radius-sm);
  padding: 12px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
  transition: all .15s var(--ease);
}
.moodBtn:active{ transform: scale(.97); }
.moodBtn__icon{
  font-size: 18px;
  width: 32px; height: 32px;
  border-radius: var(--radius-xs);
  display:flex; align-items:center; justify-content:center;
  background: rgba(185,136,90,.12);
  border: 1px solid rgba(185,136,90,.16);
  flex: 0 0 auto;
}
.moodBtn__t{ font-weight: 800; color: var(--espresso); display:block; font-size:13px; }
.moodBtn__d{ font-size: 11px; opacity:.60; display:block; margin-top:1px; font-weight:600; }

.mood__hint{ padding: 0 14px 12px; font-size: 11px; opacity:.60; font-weight:600; }

.moodResults{ margin-top: 8px; }
.moodResults__actions{ display:flex; gap:8px; padding: 8px 2px 0; }
.moodResults__actions .btn{ flex: 1 1 auto; }

@media (max-width: 520px){
  .mood__grid{ grid-template-columns: 1fr; }
}

/* ========================================
   RESPONSIVE MODALS — Mobile
======================================== */
@media (max-width: 420px){

  .modal__dialog{
    width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 92svh !important;
  }

  .modal__head{
    padding: 6px 12px 8px !important;
    gap: 8px !important;
  }
  .modal__kicker{ font-size: 10px !important; }
  .modal__title{ font-size: 14px !important; line-height: 1.3 !important; }

  .modal__body{
    padding: 0 !important;
    gap: 0 !important;
  }

  .modal__media{ height: 130px !important; }

  .badge{ height: 18px !important; padding: 0 6px !important; }
  .badge__value, .badge__label{ font-size: 10px !important; }

  .qtyBtn{ width: 34px !important; height: 34px !important; border-radius: 10px !important; }
  .qtyVal{ min-width: 40px !important; height: 34px !important; border-radius: 10px !important; }

  .noteInput, .textInput{
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }

  .btnFull{
    padding: 12px 14px !important;
    border-radius: 16px !important;
    margin-top: 10px !important;
  }
  .btnFull__txt{ font-size: 13px !important; }
  .btnFull__sub{ font-size: 10.5px !important; }

  .hoursModal__dialog,
  .linksModal__dialog{
    max-height: 88svh !important;
  }
}

/* Item modal responsive */
@media (max-width:620px){
  .modal__dialog{
    width: min(520px, 100%);
    border-radius: 22px 22px 0 0;
    max-height: 92svh;
  }
  .modal__media{ height:160px; }
}

/* ========================================
   GRID2 (car info)
======================================== */
.grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

/* ========================================
   LANG TEXT
======================================== */
.langTxt{
  font-weight: 600;
}

/* ========================================
   SMOOTH REVEAL animation helper
======================================== */
.reveal{
  opacity:0;
  transform: translateY(10px);
  animation: fadeReveal .4s var(--ease) forwards;
}
@keyframes fadeReveal{
  to{ opacity:1; transform:translateY(0); }
}

/* Stagger delays for cards */
.grid .card:nth-child(1){ animation-delay: .02s; }
.grid .card:nth-child(2){ animation-delay: .06s; }
.grid .card:nth-child(3){ animation-delay: .10s; }
.grid .card:nth-child(4){ animation-delay: .14s; }
.grid .card:nth-child(5){ animation-delay: .18s; }
.grid .card:nth-child(6){ animation-delay: .22s; }

/* ========================================
   FEEDBACK — FAB + Modal Styles
======================================== */

/* Feedback FAB */
.feedbackFab{
  position:fixed;
  bottom:24px;
  left:20px;
  z-index:10000;
  width:48px;
  height:48px;
  border-radius:50%;
  border:none;
  background: var(--espresso);
  color:#fff;
  font-size:20px;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow: 0 4px 16px rgba(42,31,25,.25), 0 1px 3px rgba(0,0,0,.12);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
  -webkit-tap-highlight-color: transparent;
  animation: fabSlideIn .4s var(--ease) both;
  animation-delay: 1s;
}
[dir="rtl"] .feedbackFab{
  left:30px; right:auto;
}
[dir="ltr"] .feedbackFab{
  right:-20px; left:auto;
}
.feedbackFab:active{
  transform: scale(.92);
}

/* Steps */
.fbStep{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  padding:8px 0 4px;
  animation: fbFadeUp .35s var(--ease) both;
}

@keyframes fbFadeUp{
  from{ opacity:0; transform:translateY(12px); }
  to{ opacity:1; transform:translateY(0); }
}

/* Emoji */
.fbEmoji{
  font-size:52px;
  line-height:1;
  transition: transform .3s var(--ease);
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.08));
}

/* Label */
.fbLabel{
  font-weight:800;
  font-size:15px;
  color: var(--espresso);
  text-align:center;
}

/* Stars */
.fbStars{
  display:flex;
  gap:6px;
  direction:ltr;
}
.fbStar{
  width:46px;
  height:46px;
  border-radius:14px;
  border:2px solid rgba(42,31,25,.08);
  background: rgba(255,255,255,.70);
  color: rgba(42,31,25,.18);
  font-size:20px;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition: all .2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.fbStar:active{
  transform: scale(.90);
}
.fbStar.is-lit{
  background: #FFF8E1;
  border-color: #FFB300;
  color: #FFB300;
  box-shadow: 0 2px 10px rgba(255,179,0,.20);
}
.fbStar.is-selected{
  transform: scale(1.12);
  background: #FFB300;
  border-color: #FFB300;
  color: #fff;
  box-shadow: 0 4px 16px rgba(255,179,0,.35);
}

/* Tags */
.fbTagsLabel{
  font-weight:800;
  font-size:13px;
  color: var(--text-muted);
  text-align:center;
  width:100%;
}
.fbTags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
}
.fbTag{
  padding:8px 16px;
  border-radius:999px;
  border:1.5px solid rgba(42,31,25,.10);
  background: rgba(255,255,255,.70);
  color: var(--espresso);
  font-weight:700;
  font-size:12.5px;
  cursor:pointer;
  transition: all .2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.fbTag:active{
  transform: scale(.95);
}
.fbTag.is-active{
  background: var(--espresso);
  border-color: var(--espresso);
  color: #fff;
  box-shadow: 0 2px 8px rgba(42,31,25,.18);
}

/* Note textarea */
.fbNote{
  width:100%;
  border:1.5px solid rgba(42,31,25,.10);
  border-radius:var(--radius);
  padding:12px 14px;
  font-family: inherit;
  font-size:13px;
  font-weight:600;
  color: var(--espresso);
  background: rgba(255,255,255,.70);
  resize:vertical;
  min-height:70px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.fbNote:focus{
  outline:none;
  border-color: rgba(185,136,90,.40);
  box-shadow: 0 0 0 3px rgba(185,136,90,.10);
}
.fbNote::placeholder{
  color: rgba(42,31,25,.30);
  font-weight:600;
}

/* Phone input */
.fbPhone{
  width:100%;
  border:1.5px solid rgba(42,31,25,.10);
  border-radius:var(--radius);
  padding:12px 14px;
  font-family: inherit;
  font-size:13px;
  font-weight:700;
  color: var(--espresso);
  background: rgba(255,255,255,.70);
  text-align:center;
  letter-spacing:1px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.fbPhone:focus{
  outline:none;
  border-color: rgba(185,136,90,.40);
  box-shadow: 0 0 0 3px rgba(185,136,90,.10);
}
.fbPhone::placeholder{
  color: rgba(42,31,25,.30);
  font-weight:600;
  letter-spacing:0;
}

/* Thank you step */
.fbDone{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:16px 0;
}
.fbDone__icon{
  width:64px;
  height:64px;
  border-radius:50%;
  background: linear-gradient(135deg, #FF6B6B, #FF8E8E);
  color:#fff;
  font-size:28px;
  display:grid;
  place-items:center;
  box-shadow: 0 6px 24px rgba(255,107,107,.30);
  animation: fbPulse .6s var(--ease);
}
@keyframes fbPulse{
  0%{ transform: scale(0); opacity:0; }
  50%{ transform: scale(1.2); }
  100%{ transform: scale(1); opacity:1; }
}
.fbDone__title{
  font-weight:900;
  font-size:20px;
  color: var(--espresso);
}
.fbDone__sub{
  font-weight:600;
  font-size:13px;
  color: var(--text-muted);
  text-align:center;
}

/* Loading state */
.fbSubmitting .btnFull__txt{
  opacity:.5;
}
.fbSubmitting::after{
  content:'';
  width:16px; height:16px;
  border:2px solid rgba(255,255,255,.30);
  border-top-color:#fff;
  border-radius:50%;
  animation: spin .6s linear infinite;
  position:absolute;
  inset-inline-end:16px;
}

/* Mobile adjustments */
@media (max-width:420px){
  .fbStar{
    width:40px;
    height:40px;
    font-size:18px;
    border-radius:12px;
  }
  .fbEmoji{
    font-size:44px;
  }
  .fbTag{
    padding:7px 13px;
    font-size:11.5px;
  }
  .feedbackFab{
    bottom:20px;
    width:44px;
    height:44px;
    font-size:18px;
  }
}

/* ========================================
   CUSTOM SCROLLBAR (global)
======================================== */
::-webkit-scrollbar{ width:6px; height:6px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--scroll-thumb); border-radius:999px; }
::-webkit-scrollbar-thumb:hover{ background:var(--scroll-accent); }

/* ========================================
   PRINT (hide non-essential)
======================================== */
@media print{
  .toolbar, .cartFab, .feedbackFab, .heroOffers, .footer, .headerActions{ display:none !important; }
  .modal, .cropModal, .hoursModal, .linksModal{ display:none !important; }
}

/* ========================================
 footer 
======================================== */
.footer {
  padding: 30px 20px;
  margin-top: auto;
  text-align: center;
  border-top: 1px solid rgba(0,0,0,0.04);
}
.dark .footer { border-color: rgba(255,255,255,0.05); }

.footer__inner {
  max-width: 500px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.footer__brand {
  font-size: 14px;
  font-weight: 800;
  color: #334155;
  letter-spacing: 0.3px;
}

.footer__sub {
  font-size: 11.5px;
  font-weight: 600;
  color: #94a3b8;
}

/* ── Credit Badge ── */
.footer__credit-wrap { margin-top: 6px; }


/* التعديل هنا: التعامل مع الصورة بدلاً من SVG */
.footer__credit img {
  width: 18px; /* يمكنك زيادة أو تقليل الحجم حسب أبعاد الشعار */
  height: 18px;
  object-fit: contain; /* لمنع تمطط الصورة */
  opacity: 0.85; /* شفافية خفيفة لتندمج مع الفوتر */
  transition: opacity 0.2s;
}