:root{
  --teal:#0bb3b0; --orange:#ff6a3d;
  --ink:#0b1418; --muted:#4b6670;
  --bg:#f7fbfb; --card:#ffffff; --stroke:#e5eef0;
  --shadow:0 10px 30px rgba(11,20,24,.06);
  --radius:16px;
    --danger:#cf3b2c;           /* icon color */
  --danger-hover:#a8281c;
  --danger-bg:#fff1ee;        /* button bg */
  --danger-bg-hover:#ffe6e0;
  --danger-border:#ffd5cc;    /* button border */
  
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:
    radial-gradient(1100px 700px at 75% 15%, rgba(255,106,61,.06), transparent 60%),
    radial-gradient(1100px 900px at 10% 0%, rgba(11,179,176,.08), transparent 70%),
    var(--bg);
  min-height:100dvh;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) calc(72px + env(safe-area-inset-bottom)) env(safe-area-inset-left);
}

/* Top bar (polished) */
.appbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: max(8px, env(safe-area-inset-top)) 14px 8px 14px;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--stroke);
  box-shadow:0 6px 18px rgba(11,20,24,.06);
}
.brand{ display:flex; align-items:center; gap:10px; min-width:0 }
.brand img{
  width:44px; height:44px; border-radius:10px; object-fit:contain;
  background:#fff; border:1px solid var(--stroke);
}
.brand span{ font-weight:900; letter-spacing:.3px; font-size:16px; white-space:nowrap; }

/* Optional: if you later add subtitle or action icons */
.brand-text{ display:flex; flex-direction:column; line-height:1 }
.brand-text .title{ font-weight:900; letter-spacing:.3px; font-size:16px }
.brand-text .sub{ font-size:12px; color:var(--muted); margin-top:3px }
.app-actions{ display:flex; align-items:center; gap:8px }
.icon-btn{
  appearance:none; border:1px solid var(--stroke); background:var(--card);
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  box-shadow:var(--shadow);
}
.icon-btn svg{ width:18px; height:18px; color:#35545e }
.icon-btn:active{ transform:translateY(1px) }
@media (max-width:380px){
  .brand-text .sub{ display:none }
}

/* Header: banner OR compact */
.hero{
  position:relative; margin:12px; overflow:hidden;
  border-radius:20px; border:1px solid var(--stroke);
  background:var(--card); box-shadow:var(--shadow);
}
.hero .banner{ width:100%; height:160px; object-fit:cover; display:block }
.hero .fc-meta{
  position:absolute; left:14px; bottom:14px; right:14px;
  display:flex; align-items:center; gap:10px; color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
}
.hero .fc-logo{
  width:42px; height:42px; border-radius:10px; object-fit:cover; border:1px solid rgba(255,255,255,.6);
  background:#fff;
}
.hero .fc-name{ font-weight:800; font-size:18px }

.hero.compact{ display:flex; align-items:center; gap:12px; padding:14px }
.hero.compact .fc-meta{ position:static; color:var(--ink); text-shadow:none }
.hero.compact .fc-logo{ border:1px solid var(--stroke) }

/* Search */
.search{ margin:10px 12px; display:flex; gap:10px; align-items:center }
.field{
  flex:1; display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:14px; border:1px solid var(--stroke);
  background:var(--card); box-shadow:var(--shadow);
}
.field svg{ width:18px; height:18px; color:#5b7680 }
.field input{ flex:1; border:0; outline:0; background:transparent; color:var(--ink); font-size:14px }
.field input::placeholder{ color:var(--muted) }

/* Grid (extra bottom padding so last row clears the dock) */
.grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
  padding:0 12px calc(70px + env(safe-area-inset-bottom));
}
@media (max-width:820px){ .grid{ grid-template-columns:repeat(2, 1fr) } }
@media (max-width:420px){ .grid{ grid-template-columns:1fr 1fr } }

.card{
  border-radius:var(--radius); border:1px solid var(--stroke); background:var(--card); box-shadow:var(--shadow);
}
.card a{ color:inherit; text-decoration:none; display:block; padding:12px }

.logo{
  display:block;
  width:100%;
  height:clamp(88px, 18vw, 132px);
  object-fit:contain;
  background:#fff;
  border:1px solid var(--stroke);
  border-radius:12px;
  margin:0 0 10px;
  box-shadow:var(--shadow);
}

.name{ font-weight:700; font-size:14px; margin-top:8px; line-height:1.25 }

/* Cuisines / classifications */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px }
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; font-size:11px; font-weight:700;
  color:#064a49; background:linear-gradient(180deg,#f0fffe,#e6fbf9); border:1px solid #c7efee;
}
.chip.alt{ color:#6a2a14; background:linear-gradient(180deg,#fff1ec,#ffe4da); border:1px solid #ffd2c4 }

/* Bottom dock */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(140%) blur(8px);
  border-top:1px solid var(--stroke);
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.btn{
  appearance:none; border:1px solid var(--stroke); border-radius:14px; padding:12px 14px;
  background:#ffffff; color:var(--ink);
  display:flex; align-items:center; justify-content:center; gap:10px; font-weight:700;
  box-shadow:var(--shadow);
}
.btn svg{ width:18px; height:18px; color:#35545e }
.badge-num{
  min-width:18px; height:18px; padding:0 4px; border-radius:9px;
  background:linear-gradient(180deg,#ffe0d7,#ffd0c3); color:#5a2b1a; font-size:12px; font-weight:800;
  display:inline-grid; place-items:center;
}

/* Empty */
.empty{ text-align:center; color:var(--muted); margin:18px 0; display:none }

/* Skeleton while loading */
.skeleton{ height:96px; border-radius:var(--radius); border:1px solid var(--stroke); background:#f1f6f7; position:relative; overflow:hidden }
.shimmer{ position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); transform:translateX(-100%); animation:shimmer 1.1s infinite }
@keyframes shimmer{ to{ transform:translateX(100%) } }

/* Bottom sheet for Basket */
.sheet{ position:fixed; inset:0; z-index:60; display:none }
.sheet.open{ display:block }
.sheet-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.35); backdrop-filter:blur(1px);
  opacity:0; transition:opacity .2s ease;
}
.sheet.open .sheet-backdrop{ opacity:1 }

.sheet-panel{
  position:absolute; left:0; right:0; bottom:0;
  background:var(--card); border-top-left-radius:20px; border-top-right-radius:20px;
  border:1px solid var(--stroke); border-bottom:0; box-shadow:0 -16px 40px rgba(11,20,24,.12);
  max-height:80vh; display:flex; flex-direction:column; transform:translateY(100%);
  transition:transform .22s ease;
}
.sheet.open .sheet-panel{ transform:translateY(0) }

.sheet-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid var(--stroke);
}
.sheet-header h2{ margin:0; font-size:16px; font-weight:900 }
.icon-btn.x{ width:36px; height:36px; border-radius:10px; border:1px solid var(--stroke); background:var(--card); display:grid; place-items:center }
.icon-btn.x svg{ width:18px; height:18px; color:#35545e }

.sheet-body{ padding:10px 12px; overflow:auto; display:flex; flex-direction:column; gap:10px }

.basket-empty{
  text-align:center; color:var(--muted); padding:36px 10px;
}

.basket-group{ border:1px solid var(--stroke); border-radius:16px; padding:10px; background:#fff; box-shadow:var(--shadow) }
.basket-group h3{ margin:0 0 8px; font-size:14px; font-weight:800 }

.basket-item{
  display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center;
  padding:10px; border-radius:12px; border:1px solid var(--stroke); background:#f9fcfc;
}
.basket-thumb{ width:48px; height:48px; border-radius:10px; object-fit:cover; background:#fff; border:1px solid var(--stroke) }
.basket-info{ min-width:0 }
.basket-name{ font-weight:700; font-size:13px; margin:0 0 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.basket-price{ font-size:12px; color:#35545e }

.qty-ctrl{
  display:flex; align-items:center; gap:8px;
}
.qty-ctrl button{
  width:32px; height:32px; border-radius:10px; border:1px solid var(--stroke); background:#fff;
  display:grid; place-items:center; font-weight:800;
}
.qty-ctrl .qty{ min-width:22px; text-align:center; font-weight:800 }

.remove-btn{
  padding:0; width:20px; height:20px;
  display:grid; place-items:center;
  border-radius:10px;
  border:1px solid var(--danger-border);
  background:var(--danger-bg);
  color:var(--danger);
  box-shadow:var(--shadow);
}
.remove-btn svg{ width:20px; height:20px }
.remove-btn:hover{

}

.sheet-footer{
  border-top:1px solid var(--stroke); padding:12px; background:linear-gradient(180deg,#ffffff,#f7fbfb);
  display:grid; gap:10px;
}
.totals{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
.totals > div{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border:1px solid var(--stroke); border-radius:12px; background:#fff }
.totals span{ color:var(--muted); font-size:12px }
.totals strong{ font-size:14px }

.btn.primary{
  background:linear-gradient(180deg,#eafefc,#dff7f6); color:#061014; border:1px solid var(--stroke);
}



/* ---- Ratings & serve time strip on cards ---- */

/* Sort chips */
.sort-chips{ display:flex; gap:8px }
.chip.sort{
  cursor:pointer; user-select:none;
  background:linear-gradient(180deg,#f7fffe,#ecfbf9);
}
.chip.sort[aria-pressed="true"]{
  outline:2px solid var(--teal);
  background:linear-gradient(180deg,#e6fffd,#dbf8f4);
}

/* Tiny pill we reuse if you want inside metrics */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; border-radius:999px; font-size:11px; font-weight:800;
  color:#103a3a; background:#eefaf9; border:1px solid #c8ecea;
}
/* Vertical metrics block (two rows) */
.metrics{
  display:flex; flex-direction:column; gap:6px;
  margin-top:8px; padding:8px; border:1px solid var(--stroke);
  border-radius:12px; background:#f9fcfc;
}
.metric{
  display:flex; align-items:center; gap:8px;
  font-size:12px; font-weight:800; color:#063c3b;
  min-height:22px;
}
.metric svg{ width:14px; height:14px; flex:0 0 auto }
.metric b{ font-size:13px }
.metric small{ color:var(--muted); font-weight:700 }

/* stars */
.stars{ display:inline-flex; gap:2px; vertical-align:middle }
.stars svg{ width:14px; height:14px }
.star-fill{ color:#f59e0b }
.star-empty{ color:#cfdadb }
.lang{height:32px; padding:0 12px; border:1px solid var(--stroke); border-radius:999px; font-weight:800; background:#fff; font-size:12px; letter-spacing:.2px;}

/* --- Mobile fix for Search + Sort chips --- */
.search{
  flex-wrap: wrap;                   /* allow a second row */
  align-items: stretch;

}

.search .field{
  flex: 1 1 100%;                    /* search takes full width on mobile */
  min-width: 0;

}

.sort-chips{
  width: 100%;                       /* chips on their own line */
  margin-top: 8px;
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  overflow-x: auto;                  /* no layout break if many chips */
  -webkit-overflow-scrolling: touch;
}

.sort-chips::-webkit-scrollbar{ display:none; } /* hide scrollbar on iOS/Chrome */

.chip.sort{ flex: 0 0 auto; }        /* chips don't shrink and wrap nicely */

/* Tighter spacing + smaller text on very narrow phones */
@media (max-width: 420px){
  .field{ padding: 8px 10px; }
  .field input{ font-size: 13px; }
  .chip.sort{ font-size: 11px; padding: 6px 10px; }
}


/* Prevent chip ring from being cut off */
.sort-chips{
  padding: 2px 2px 2px;   /* space below so ring isn't clipped */
  overflow-x: auto;
  overflow-y: visible;   /* allow ring to render outside line box */
}

/* Replace outline with a box-shadow ring */
.chip.sort[aria-pressed="true"]{
  /* outline:2px solid var(--teal);  remove */
  box-shadow: 0 0 0 2px var(--teal);
}

/* Tiny safety for tight line boxes */
.chip.sort{ line-height: 1; }

.lang{height:32px; padding:0 12px; border:1px solid var(--stroke); border-radius:999px; font-weight:800; background:#fff; font-size:12px; letter-spacing:.2px;}

.lang-wrap{ position:relative }
.lang-menu{
  position:absolute; right:0; top:calc(100% + 6px);
  min-width:160px; padding:6px; border:1px solid var(--stroke);
  background:#fff; border-radius:10px; box-shadow:var(--shadow); z-index:80;
}
.lang-menu button{
  display:block; width:100%; text-align:left; padding:8px 10px; border-radius:8px;
  border:1px solid transparent; background:transparent; font-weight:800; cursor:pointer;
}
.lang-menu button:hover{ background:#f4f8f8; border-color:var(--stroke) }
.lang-menu .cur{ background:#eef8f8; border-color:var(--stroke) }

.lang-wrap{ position:relative }

/* use logical inset so it mirrors correctly */
.lang-menu{
  position:absolute;
  inset-block-start: calc(100% + 6px);   /* below the button */
  inset-inline-end: 0;                   /* align to the button edge */
  min-width:160px;
  padding:6px;
  border:1px solid var(--stroke);
  background:#fff;
  border-radius:10px;
  box-shadow:var(--shadow);
  z-index:80;
  white-space:nowrap;                    /* prevent width jump in Arabic */
  direction:ltr;                         /* keep menu content stable */
}
[dir="rtl"] .lang-menu{
  inset-inline-start: 0;                 /* mirror in RTL */
  inset-inline-end: auto;
}

.lang-menu button{
  display:block; width:100%; text-align:start;  /* works both LTR/RTL */
  padding:8px 10px; border-radius:8px;
  border:1px solid transparent; background:transparent; font-weight:800;
}
.lang-menu button:hover{ background:#f4f8f8; border-color:var(--stroke) }
.lang-menu .cur{ background:#eef8f8; border-color:var(--stroke) }