/* ============================================================
   FoodApp — Customer app theme (dark, mobile-first)
   Loaded only on the customer-facing pages (via header.php),
   so the admin/restaurant/rider dashboards are unaffected.
   ============================================================ */
:root{
  --c-bg:#0d0e10;
  --c-surface:#1b1c1f;
  --c-surface-2:#26272b;
  --c-line:#2d2e33;
  --c-text:#f3f4f6;
  --c-muted:#9aa0a6;
  --c-gold:#f5c518;
  --c-gold-2:#e0af13;
  --c-red:#e23744;
}

/* Light theme — most components use var() so the palette swap cascades;
   only the few hardcoded-dark surfaces need explicit overrides below. */
:root[data-theme="light"]{
  --c-bg:#f4f5f7;
  --c-surface:#ffffff;
  --c-surface-2:#eceef1;
  --c-line:#e3e6ea;
  --c-text:#191b1e;
  --c-muted:#69707a;
}
[data-theme="light"] .app-topbar{ background:rgba(255,255,255,.92); }
[data-theme="light"] .bottom-nav{ background:rgba(255,255,255,.97); }
[data-theme="light"] .icon-btn:hover{ background:#e3e6ea; color:var(--c-gold-2); }
[data-theme="light"] .rest-card-img{ box-shadow:inset 0 -60px 60px -30px rgba(0,0,0,.55); }
[data-theme="light"] .customer-app .alert-success{ background:#d1e7dd; color:#0f5132; border-color:#badbcc; }
[data-theme="light"] .customer-app .alert-danger{ background:#f8d7da; color:#842029; border-color:#f5c2c7; }
[data-theme="light"] .customer-app .alert-info{ background:#cff4fc; color:#055160; border-color:#b6effb; }

body.customer-app{
  background:var(--c-bg);
  color:var(--c-text);
  padding-bottom:84px;               /* clear the fixed bottom nav */
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
}
.customer-app a{ color:var(--c-text); text-decoration:none; }
.customer-app .text-muted{ color:var(--c-muted)!important; }
.customer-app hr{ border-color:var(--c-line); opacity:1; }

/* ---- Top app bar ---- */
.app-topbar{
  position:sticky; top:0; z-index:1030;
  background:rgba(13,14,16,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--c-line);
}
.app-topbar-inner{
  max-width:960px; margin:auto;
  display:flex; align-items:center; gap:12px;
  padding:12px 16px;
}
.app-topbar .loc{
  flex:1 1 auto; min-width:0;
  display:flex; align-items:center; gap:8px; color:var(--c-text);
}
.app-topbar .loc i.bi-geo-alt-fill{ color:var(--c-gold); font-size:1.15rem; }
.app-topbar .loc .loc-text{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; font-size:.95rem;
}
.app-topbar-actions{ display:flex; align-items:center; gap:6px; }
.icon-btn{
  width:40px; height:40px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--c-surface-2); color:var(--c-text); font-size:1.15rem; position:relative;
}
.icon-btn:hover{ background:#303136; color:var(--c-gold); }
.badge-dot{
  position:absolute; top:-4px; right:-4px; min-width:18px; height:18px;
  padding:0 5px; border-radius:9px; background:var(--c-red); color:#fff;
  font-size:.68rem; line-height:18px; text-align:center; font-weight:700;
}

/* ---- Page shell ---- */
.app-main{ max-width:960px; margin:auto; padding:16px; }

/* ---- Search ---- */
.app-search{ display:flex; gap:10px; align-items:stretch; margin-bottom:16px; }
.app-search .field{
  flex:1 1 auto; display:flex; align-items:center; gap:8px;
  background:var(--c-surface-2); border:1px solid var(--c-line);
  border-radius:14px; padding:10px 14px; color:var(--c-muted);
}
.app-search .field input{
  border:0; background:transparent; color:var(--c-text); width:100%; outline:none; font-size:.95rem;
}
.app-search .field input::placeholder{ color:var(--c-muted); }
.app-search .filter-btn{
  width:48px; border-radius:14px; border:1px solid var(--c-gold);
  background:transparent; color:var(--c-gold); display:inline-flex; align-items:center; justify-content:center; font-size:1.1rem;
}

/* ---- Category tiles ---- */
.cat-tiles{ display:flex; gap:12px; overflow-x:auto; padding-bottom:4px; margin-bottom:18px; }
.cat-tile{
  flex:0 0 auto; width:88px; text-align:center;
  background:var(--c-surface); border:1px solid var(--c-line);
  border-radius:16px; padding:14px 8px; color:var(--c-text);
}
.cat-tile .emoji{ font-size:1.7rem; line-height:1; display:block; margin-bottom:6px; }
.cat-tile .label{ font-size:.72rem; color:var(--c-muted); display:block;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cat-tile:hover{ border-color:var(--c-gold); }

/* ---- Chips (filters) ---- */
.chips{ display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; margin-bottom:18px; }
.chip{
  flex:0 0 auto; padding:8px 16px; border-radius:999px;
  background:var(--c-surface-2); color:var(--c-muted);
  border:1px solid transparent; font-size:.85rem; font-weight:600; white-space:nowrap;
}
.chip:hover{ color:var(--c-text); }
.chip.active{ color:var(--c-gold); border-color:var(--c-gold); background:transparent; }

/* ---- Promo banner ---- */
.promo{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,#f6c945,#f0b71e);
  border-radius:22px; padding:22px 20px; margin-bottom:22px; color:#191400;
}
.promo h3{ font-weight:800; font-size:1.35rem; line-height:1.15; margin:0 0 4px; }
.promo h3 .accent{ color:var(--c-red); }
.promo p{ margin:0; font-weight:600; opacity:.85; font-size:.9rem; }
.promo .order-now{
  position:absolute; right:18px; bottom:18px;
  background:var(--c-red); color:#fff; width:74px; height:74px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-weight:800; font-size:.8rem; box-shadow:0 6px 18px rgba(226,55,68,.45);
}

/* ---- Section header ---- */
.section-head{ display:flex; align-items:center; justify-content:space-between; margin:22px 0 12px; }
.section-head h2{ font-size:1.15rem; font-weight:800; margin:0; }
.section-head a{ color:var(--c-gold); font-size:.85rem; font-weight:600; }

/* ---- Horizontal scroller ---- */
.h-scroll{ display:flex; gap:14px; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x proximity; }
.h-scroll::-webkit-scrollbar,.cat-tiles::-webkit-scrollbar,.chips::-webkit-scrollbar{ height:5px; }
.h-scroll::-webkit-scrollbar-thumb{ background:var(--c-line); border-radius:4px; }
.h-scroll > *{ flex:0 0 auto; scroll-snap-align:start; }

/* ---- Restaurant card ---- */
.rest-card{ display:block; width:230px; color:var(--c-text); }
.rest-card.full{ width:100%; }
.rest-card-img{
  position:relative; height:150px; border-radius:18px;
  background-size:cover; background-position:center; background-color:var(--c-surface-2);
  box-shadow:inset 0 -60px 60px -30px rgba(0,0,0,.85);
}
.rest-card .rest-badge{
  position:absolute; top:10px; left:10px; background:var(--c-gold); color:#000;
  font-size:.68rem; font-weight:800; padding:3px 8px; border-radius:8px;
}
.rest-card .free-badge{
  position:absolute; top:10px; left:10px; background:#000c; color:var(--c-gold);
  font-size:.68rem; font-weight:800; padding:3px 8px; border-radius:8px; border:1px solid var(--c-gold);
}
.rest-card .rest-name-ov{
  position:absolute; left:12px; bottom:10px; right:12px;
  font-weight:800; font-size:1rem; text-shadow:0 1px 4px rgba(0,0,0,.8);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rest-meta{ display:flex; gap:14px; margin-top:8px; color:var(--c-muted); font-size:.8rem; font-weight:600; }
.rest-meta i{ color:var(--c-gold); }

/* Card grid (listing) */
.rest-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media (min-width:640px){ .rest-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:900px){ .rest-grid{ grid-template-columns:repeat(4,1fr); } }

/* ---- Food / product card ---- */
.food-card{ width:170px; background:var(--c-surface); border:1px solid var(--c-line); border-radius:18px; overflow:hidden; }
.food-card.full{ width:100%; }
.food-img{
  position:relative; height:120px; background-size:cover; background-position:center; background-color:var(--c-surface-2);
}
.food-img .add-btn{
  position:absolute; right:8px; bottom:8px; width:34px; height:34px; border-radius:50%;
  border:0; background:var(--c-gold); color:#000; font-size:1rem; display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 10px rgba(0,0,0,.4);
}
.food-img .info-btn{
  position:absolute; right:8px; top:8px; width:28px; height:28px; border-radius:50%;
  border:0; background:#000a; color:#fff; display:flex; align-items:center; justify-content:center;
}
.food-body{ padding:10px 12px; }
.food-name{ font-weight:700; font-size:.9rem; line-height:1.2; }
.food-sub{ color:var(--c-muted); font-size:.75rem; margin:2px 0 6px; }
.food-price{ display:inline-block; background:var(--c-gold); color:#000; font-weight:800; font-size:.82rem; padding:3px 10px; border-radius:8px; }

/* Product row (restaurant menu, list layout) */
.prod-list{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:640px){ .prod-list{ grid-template-columns:1fr 1fr; } }
.prod-row{ display:flex; gap:12px; background:var(--c-surface); border:1px solid var(--c-line); border-radius:16px; padding:10px; }
.prod-row .thumb{ width:88px; height:88px; border-radius:12px; background-size:cover; background-position:center; background-color:var(--c-surface-2); flex:0 0 auto; position:relative; }
.prod-row .thumb .add-btn{ position:absolute; right:-8px; bottom:-8px; width:32px; height:32px; border-radius:50%; border:0; background:var(--c-gold); color:#000; display:flex; align-items:center; justify-content:center; box-shadow:0 3px 10px rgba(0,0,0,.5); }
.prod-row .info{ min-width:0; flex:1 1 auto; }
.prod-row .info .name{ font-weight:700; }
.prod-row .info .desc{ color:var(--c-muted); font-size:.8rem; margin:2px 0; }
.prod-row .info .price{ font-weight:800; color:var(--c-gold); }

/* ---- Restaurant hero ---- */
.rest-hero{ position:relative; height:220px; border-radius:0 0 24px 24px; overflow:hidden; margin:-16px -16px 0; }
.rest-hero .bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.rest-hero .ov{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(13,14,16,.9)); }
.rest-hero .title{ position:absolute; left:0; right:0; bottom:16px; text-align:center; }
.rest-hero .title h1{ font-weight:800; font-size:1.6rem; margin:0; }
.rest-hero .title .pin{ display:inline-flex; gap:6px; align-items:center; background:#0009; border:1px solid var(--c-line); color:#fff; padding:4px 12px; border-radius:999px; font-size:.8rem; margin-top:6px; }
.rest-stats{ display:flex; align-items:center; justify-content:space-around; background:var(--c-surface); border:1px solid var(--c-line); border-radius:16px; padding:14px 8px; margin:16px 0; text-align:center; }
.rest-stats .cell{ flex:1; }
.rest-stats .cell + .cell{ border-left:1px solid var(--c-line); }
.rest-stats .big{ font-weight:800; }
.rest-stats .sub{ color:var(--c-muted); font-size:.72rem; }
.rest-stats i{ color:var(--c-gold); }

/* ---- Bottom nav ---- */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:1040;
  display:flex; background:rgba(15,16,18,.97); backdrop-filter:blur(10px);
  border-top:1px solid var(--c-line); padding:6px 4px calc(6px + env(safe-area-inset-bottom,0));
}
.bottom-nav a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  color:var(--c-muted); font-size:.68rem; font-weight:600; padding:6px 0; position:relative;
}
.bottom-nav a i{ font-size:1.25rem; }
.bottom-nav a.active{ color:var(--c-gold); }
.bottom-nav .nav-badge{
  position:absolute; top:2px; left:calc(50% + 8px); min-width:16px; height:16px;
  background:var(--c-red); color:#fff; border-radius:8px; font-size:.62rem; line-height:16px;
  text-align:center; padding:0 4px; font-weight:700;
}

/* ============================================================
   Dark overrides for shared components used by the remaining
   customer pages (cart, checkout, order, profile, favourites…)
   ============================================================ */
.customer-app .card{ background:var(--c-surface); border:1px solid var(--c-line); color:var(--c-text); border-radius:16px; }
.customer-app .card .text-muted{ color:var(--c-muted)!important; }
.customer-app .section-title{ color:var(--c-text); border-left:4px solid var(--c-gold); }
.customer-app .form-control,
.customer-app .form-select{
  background:var(--c-surface-2); border:1px solid var(--c-line); color:var(--c-text);
}
.customer-app .form-control::placeholder{ color:var(--c-muted); }
.customer-app .form-control:focus,
.customer-app .form-select:focus{ background:var(--c-surface-2); color:var(--c-text); border-color:var(--c-gold); box-shadow:0 0 0 .2rem rgba(245,197,24,.15); }
.customer-app .input-group-text{ background:var(--c-surface-2); border-color:var(--c-line); color:var(--c-muted); }
.customer-app .btn-gold{ background:var(--c-gold); border-color:var(--c-gold); color:#000; font-weight:700; }
.customer-app .btn-gold:hover{ background:var(--c-gold-2); border-color:var(--c-gold-2); color:#000; }
.customer-app .btn-outline-gold{ border:1px solid var(--c-gold); color:var(--c-gold); background:transparent; }
.customer-app .btn-success{ background:#1f9d55; border-color:#1f9d55; }
.customer-app .dropdown-menu{ background:var(--c-surface); border:1px solid var(--c-line); }
.customer-app .dropdown-item{ color:var(--c-text); }
.customer-app .dropdown-item:hover{ background:var(--c-surface-2); color:var(--c-gold); }
.customer-app .dropdown-item-text{ color:var(--c-text); }
.customer-app .modal-content{ background:var(--c-surface); color:var(--c-text); border:1px solid var(--c-line); }
.customer-app .badge-gold{ background:var(--c-gold); color:#000; }
.customer-app .table{ color:var(--c-text); }
.customer-app .alert-success{ background:#123524; color:#a7e8c4; border-color:#1f5a3a; }
.customer-app .alert-danger{ background:#3a1418; color:#f5b8be; border-color:#6b2129; }
.customer-app .alert-info{ background:#0f2c3a; color:#a8dcf0; border-color:#1d5570; }
.customer-app .map-box{ height:280px; border:1px solid var(--c-line); }
.customer-app .rating{ color:var(--c-gold); }

/* Cart line item cards spacing tidy */
.customer-app #cartItems .card img{ background:var(--c-surface-2); }

@media (max-width:575.98px){
  .app-main{ padding:14px 12px; }
  .rest-hero{ margin:-14px -12px 0; }
  .promo h3{ font-size:1.2rem; }
}