@import url('https://fonts.googleapis.com/css2?family=Fragment+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --primary: #222222;
  --primary-dark: #111111;
  --accent-yellow: #ffd34e;
  --bg-cream: #FCFAF8;
  --dark: #1f2430;
  --gray: #3a3a3a;
  --light-gray: #f3f4f6;
  --border: #e5e7eb;
  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;
  --white: #ffffff;
  --radius: 10px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Manrope","Manrope Placeholder", Roboto, "Fragment Mono", Arial, sans-serif;
  background: var(--accent-yellow);
  color: var(--dark);
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }

.navbar{
    padding:14px 28px;
    background:var(--accent-yellow);
    border-bottom:1px solid rgba(0,0,0,0.08);
    position:sticky;
    top:0;
    z-index:1500;
}
.navbar .brand { font-weight: 800; font-size: 1.3rem; color: var(--primary); display: flex; align-items: center; gap: 6px; }
.navbar nav { display: flex; align-items: center; gap: 18px; }
.navbar nav a { font-weight: 500; color: var(--gray); font-size: 0.95rem; }
.navbar nav a:hover, .navbar nav a.active { color: var(--primary); }
.navbar .badge-count {
  background: var(--primary); color: white; border-radius: 50%;
  font-size: 0.7rem; padding: 1px 6px; margin-left: 4px;
}

.navbar .container_top{
    max-width:1320px;
    width:100%;
    margin:0 auto;

    display:flex;
    justify-content:space-between;
    align-items:center;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 20px 60px 20px;
}
.container.narrow { max-width: 480px; }
.container.narrow.center-vertically {
  min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
}

/* Extra bottom clearance only where the fixed bottom-nav bar is present
   (customer pages), so the last bit of page content — like a map's
   attribution caption — never ends up rendered underneath it. */
body.has-bottom-nav .container { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }

.card {
 
  padding: 22px;
  margin-bottom: 18px;
}
.grid { display: grid; gap: 18px; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

@media (max-width: 640px) {
  /* cols-2's 100px minmax is fine for small stat boxes, but several
     cols-2 sections hold much richer content (charts, multi-stat cards)
     that genuinely needs full width — at phone widths auto-fit was still
     cramming 2 columns into ~175px each, squashing charts illegible.
     Stacking to one full-width card per row fixes it without touching
     the desktop/tablet layout above this breakpoint. */
  .grid.cols-2 { grid-template-columns: 1fr; }
}

h1 { font-size: 1.6rem; margin: 0 0 6px; }
h2 { font-size: 1.25rem; margin: 0 0 10px; }
h3 { font-size: 1.05rem; margin: 0 0 8px; }
p.subtitle { color: var(--gray); margin-top: 0; }

.btn {
  display: inline-block;
  padding: 15px 18px;
  border-radius: 8px;
  border: none;
  background: var(--primary);
  color: white;
  font-weight: 600;
  cursor: pointer;
  font-size: 0.92rem;
}
.btn:hover { background: var(--primary-dark); }
.btn.secondary { background: var(--light-gray); color: var(--dark); }
.btn.secondary:hover { background: #e9e9e9; }
.btn.danger { background: var(--danger); }
.btn.success { background: var(--success); }
.btn.small { padding: 12px 12px; font-size: 1rem; }
.btn.outline { background: transparent; border: 1px solid var(--primary); color: var(--primary); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 11px 18px; border-radius: 8px;
  border: 1px solid var(--border); background: #fff; color: var(--dark);
  font-weight: 600; font-size: 0.92rem; cursor: pointer;
  -webkit-appearance: none; touch-action: manipulation;
  transition: transform .1s ease, background .15s ease, box-shadow .15s ease;
}
.btn-google:hover { background: var(--light-gray); }
.btn-google:active { transform: scale(0.98); }
.btn-google svg { flex-shrink: 0; }

.save-heart-btn {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border);
  background: #fff; color: #c7c7c7; font-size: 1.15rem; padding: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; touch-action: manipulation;
  transition: transform .15s ease, color .15s ease, background .15s ease, border-color .15s ease;
}
.save-heart-btn:active { transform: scale(0.88); }
.save-heart-btn.saved { color: #ea4335; border-color: #fecaca; background: #fef2f2; }

form.inline { display: inline; }

input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
  margin-bottom: 9px;
  background: var(--bg-cream);
  border: 1px solid rgba(23, 24, 20, .17);
}
/* Checkboxes/radios inherit the block above (which is meant for text-style
   fields) unless overridden — without this they render as full-width,
   padded, rounded-rectangle blobs instead of a normal small checkbox.
   Resets them to native sizing; accent-color tints the checkmark to match
   the app's theme instead of the browser default blue. */
input[type="checkbox"], input[type="radio"] {
  width: 16px;
  height: 16px;
  padding: 0;
  border-radius: 4px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--primary);
  /* A later rule (input, select, textarea { appearance: none }, added for
     iOS zoom-prevention) strips native rendering off every field including
     checkboxes, which silently kills the checkmark with nothing to
     replace it. Attribute selectors outrank plain element selectors, so
     this explicitly wins that fight regardless of source order. */
  -webkit-appearance: auto;
  appearance: auto;
}
input[type="radio"] { border-radius: 50%; }
label { font-weight: 600; font-size: 0.8rem; display: block; margin-bottom: 2px; color: var(--dark); }

/* Show/hide password toggle (login, registration). Positioned relative to
   .password-input-wrap specifically, not the outer .kaon-field — that
   wrapper may or may not have a <label> above the input, and centering
   the button against .kaon-field's full height would put it in the wrong
   place once a label is added (it'd center against label+input combined,
   not just the input itself). */
.password-input-wrap { position: relative; }
.password-input-wrap input { padding-right: 42px; }
.password-input-wrap .toggle-password {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  background: none; border: none; padding: 4px; cursor: pointer;
  color: var(--gray); display: flex; align-items: center;
}

/* File uploads — style the native "Choose File" button to match the
   app's dark .btn look everywhere (::file-selector-button is the
   standard pseudo-element, supported in all current browsers; the
   old WebKit-only ::-webkit-file-upload-button is kept alongside it
   for older Safari/Chrome). Applies globally, so every upload field
   (rider ID, vendor logo, menu photos, admin branding, etc.) matches
   without needing per-page overrides. */
input[type="file"] {
  padding: 6px;
  cursor: pointer;
}
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
  background: var(--primary);
  color: var(--white);
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  margin-right: 12px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover {
  background: var(--primary-dark);
}

.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 0.9rem; }
.alert.error { background: #fee2e2; color: #991b1b; }
.alert.success { background: #dcfce7; color: #166534; }
.alert.info { background: #dbeafe; color: #1e40af; }

.badge {
  display: inline-block; padding: 3px 4px; border-radius: 20px;
  font-size: 0.75rem; font-weight: 700; text-transform: capitalize;
}
.badge.awaiting_payment { background: #f3e8ff; color: #6b21a8; }
.badge.pending, .badge.offline { background: #fef3c7; color: #92400e; }
.badge.accepted, .badge.available { background: #dbeafe; color: #1e40af; }
.badge.preparing { background: #fde68a; color: #92400e; }
.badge.ready_for_pickup { background: #e0e7ff; color: #3730a3; }
.badge.picked_up, .badge.busy { background: #fed7aa; color: #9a3412; }
.badge.delivered, .badge.approved, .badge.active, .badge.paid { background: #dcfce7; color: #166534; }
.badge.cancelled, .badge.rejected, .badge.suspended, .badge.failed { background: #fee2e2; color: #991b1b; }
.badge.unpaid, .badge.processing { background: #fef3c7; color: #92400e; }

table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { text-align: left; padding: 10px 3px; border-bottom: 0px solid var(--border); }
th { color: var(--gray); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; }

.stat-box { text-align: center; padding: 18px; }
.stat-box .num { font-size: 1.7rem; font-weight: 800; color: var(--primary); }
.stat-box .label { color: var(--gray); font-size: 0.82rem; margin-top: 4px; }

.food-card {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; background: white;
}
.food-card .price { color: var(--primary); font-weight: 700; margin: 6px 0; }
.food-card-img {
  width: 100%; height: 140px; object-fit: cover; border-radius: 8px; margin-bottom: 12px; display: block;
  background: var(--light-gray);
}
.food-card-img-placeholder {
  width: 100%; height: 140px; border-radius: 8px; margin-bottom: 12px;
  background: var(--light-gray); display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem; color: #c7c7c7;
}
.image-preview {
  width: 100%; max-width: 220px; height: 140px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--border); margin-bottom: 10px; display: block;
}

/* =======================================================================
   Menu item row — circular thumbnail, name/price/description, Add to
   cart on the right. Compact list layout instead of the big image-card
   grid, better for scanning a long menu quickly.
   ======================================================================= */
.menu-item-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 4px; border-bottom: 1px solid var(--border);
}
.menu-item-row:last-child { border-bottom: none; }
.menu-item-thumb {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  background: var(--light-gray); border: 1px solid var(--border);
}
.menu-item-thumb-placeholder {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  background: var(--light-gray); display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; color: #c7c7c7; border: 1px solid var(--border);
}
.cart-item-thumb {
  width: 42px; height: 42px; border-radius: 8px; object-fit: cover; flex-shrink: 0;
  background: var(--light-gray); border: 1px solid var(--border);
}
.cart-item-thumb-placeholder {
  width: 42px; height: 42px; border-radius: 8px; flex-shrink: 0;
  background: var(--light-gray); display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: #c7c7c7; border: 1px solid var(--border);
}
.cart-remove-btn {
  width: 28px; height: 28px; padding: 0; line-height: 1; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem; font-weight: 600;
}
/* Cart items as stacked flex rows instead of a <table> — a table forces
   a rigid column grid that either overflows narrow screens or has to
   fight every column back down with width hacks. A flex row just wraps
   and shrinks naturally, so it can never force horizontal scroll. */
.cart-items { display: flex; flex-direction: column; gap: 14px; }
.cart-item-row { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.cart-item-main { flex: 1; min-width: 0; } /* min-width:0 is what lets the
   name below actually truncate instead of forcing the row wider */
.cart-item-name-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0;
}
.cart-item-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  font-weight: 600; font-size: 0.95rem;
}
.cart-item-meta {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.85rem; color: var(--gray); margin-top: 2px;
}
.cart-item-total { font-weight: 600; color: var(--text, #222); }
.menu-item-info { flex: 1; min-width: 0; }
.menu-item-info h3 { margin: 0 0 2px; font-size: 0.98rem; }
.menu-item-info .menu-item-desc {
  font-size: 0.8rem; color: var(--gray); margin: 0 0 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.menu-item-info .price { color: var(--primary); font-weight: 700; font-size: 0.92rem; margin: 0; }
.menu-item-action { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.qty-stepper { display: flex; align-items: center; gap: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.qty-stepper button {
  width: 30px; height: 30px; border: none; background: var(--light-gray); color: var(--dark);
  font-size: 1.1rem; font-weight: 700; line-height: 1; cursor: pointer; touch-action: manipulation;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.qty-stepper button:active { background: var(--border); }
.qty-stepper .qty-input {
  width: 36px; text-align: center; padding: 6px 2px; margin: 0; font-size: 0.9rem;
  border: none; border-left: 1px solid var(--border); border-right: 1px solid var(--border);
  border-radius: 0; -moz-appearance: textfield;
}
.qty-stepper .qty-input::-webkit-outer-spin-button,
.qty-stepper .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.menu-item-action .btn { white-space: nowrap; padding: 8px 14px; font-size: 0.85rem; }

/* =======================================================================
   Vendor menu grid — replaces the old list-row layout. Two columns,
   photo-forward cards with a heart (per-item favorite, saved_menu_items)
   and a single-tap add-to-cart button, matching the reference layout.
   ======================================================================= */
.menu-tabs { display: flex; gap: 8px; margin: 18px 0 14px; }
.menu-tab {
  padding: 9px 18px; border-radius: 999px; border: none;
  background: var(--light-gray); color: var(--dark);
  font-size: 0.88rem; font-weight: 600;
}
.menu-tab.active { background: var(--dark); color: #fff; }
.menu-section-header h3 { margin: 0; }
.menu-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-top: 14px;
}
.menu-grid-card {
  background: var(--white); border-radius: 14px; overflow: hidden;
  border: 1px solid var(--border); box-shadow: 0 1px 3px rgba(16,24,40,0.04);
}
.menu-grid-img-wrap { position: relative; }
.menu-grid-img, .menu-grid-img-placeholder {
  width: 100%; height: 110px; object-fit: cover; display: block;
  background: var(--light-gray);
}
.menu-grid-img-placeholder {
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: #c7c7c7;
}
.menu-grid-time-badge {
  position: absolute; top: 8px; left: 8px;
  background: rgba(255,255,255,0.92); color: var(--dark);
  font-size: 0.7rem; font-weight: 700;
  padding: 4px 8px; border-radius: 999px;
  display: flex; align-items: center; gap: 4px;
}
.menu-grid-heart-form { position: absolute; top: 8px; right: 8px; margin: 0; }
.menu-grid-heart-btn {
  width: 28px; height: 28px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.92); color: var(--gray);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; padding: 0;
}
.menu-grid-heart-btn.saved { color: var(--danger); }
.menu-grid-body { padding: 10px; }
.menu-grid-body h4 {
  margin: 0 0 8px; font-size: 0.88rem; font-weight: 700; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.menu-grid-bottom-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.menu-grid-price { color: var(--primary); font-weight: 700; font-size: 0.92rem; }
.menu-grid-add-btn {
  width: 30px; height: 30px; border-radius: 50%; border: none;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; padding: 0; flex-shrink: 0;
}
.menu-grid-add-btn:active { transform: scale(0.92); }
.menu-grid-add-btn.in-cart { background: #16a34a; }
.menu-grid-rating { margin: 0 0 6px; }
.menu-grid-rating .star-rating-display { font-size: 0.72rem; }
.menu-grid-rating .star-rating-count { font-size: 0.7rem; }

/* =======================================================================
   Quick-view modal — opened from a grid card's +/checkmark button (see
   the script at the bottom of vendor_menu.ejs). Not a separate page;
   populated client-side from the clicked card's data-* attributes.
   ======================================================================= */
.menu-quick-view-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(0,0,0,0.55);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.menu-quick-view-backdrop.open { display: flex; }
.menu-quick-view {
  position: relative;
  width: 100%; max-width: 420px;
  max-height: calc(100vh - 40px); overflow-y: auto;
  background: #fff;
  border-radius: 20px;
  animation: menu-quick-view-pop-in 0.18s ease-out;
}
@keyframes menu-quick-view-pop-in {
  from { transform: scale(0.96); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.menu-quick-view-close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: rgba(0,0,0,0.5); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.menu-quick-view-heart-form { position: absolute; top: 12px; right: 54px; z-index: 2; margin: 0; }
.menu-quick-view-heart-form .menu-grid-heart-btn {
  width: 34px; height: 34px; background: rgba(255,255,255,0.95);
}
.menu-quick-view-img-wrap { width: 100%; height: 220px; }
.menu-quick-view-img-wrap img,
.menu-quick-view-img-wrap .menu-grid-img-placeholder {
  width: 100%; height: 100%; object-fit: cover; display: block; font-size: 2rem;
}
.menu-quick-view-body { padding: 18px 20px 24px; }
.menu-quick-view-price-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.menu-quick-view-price { color: var(--primary); font-weight: 800; font-size: 1.3rem; }
.menu-quick-view-time {
  display: flex; align-items: center; gap: 4px;
  font-size: 0.78rem; font-weight: 600; color: var(--gray);
  background: var(--light-gray); padding: 4px 10px; border-radius: 999px;
}
.menu-quick-view-body h3 { margin: 0 0 6px; font-size: 1.15rem; }
.menu-quick-view-rating { margin: 0 0 10px; }
.menu-quick-view-desc { color: var(--gray); font-size: 0.9rem; line-height: 1.5; margin: 0 0 20px; }
.menu-quick-view-add-pill {
  display: flex; align-items: stretch;
  background: var(--primary); border-radius: 999px; overflow: hidden;
}
.menu-quick-view-add-label {
  flex: 1; border: none; background: transparent; color: #fff;
  font-size: 1rem; font-weight: 700; padding: 14px 0 14px 24px; text-align: left;
}
.menu-quick-view-stepper {
  display: flex; align-items: center; gap: 12px;
  padding: 0 18px; border-left: 1px solid rgba(255,255,255,0.3);
}
.menu-quick-view-stepper button {
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid #fff;
  background: transparent; color: #fff; font-size: 0.95rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1;
}
.menu-quick-view-stepper span { color: #fff; font-weight: 700; min-width: 14px; text-align: center; }

/* =======================================================================
   Customer home promo popup — admin-managed (Admin > Home Banners >
   "Also show as a popup"), shown once per browser session via the script
   at the bottom of dashboard.ejs.
   ======================================================================= */
.promo-popup-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 3500;
  background: rgba(0,0,0,0.6);
  align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.promo-popup-backdrop.open { display: flex; opacity: 1; }
.promo-popup {
  position: relative;
  width: 100%; max-width: 380px;
  background: #fff; border-radius: 20px; overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}
.promo-popup-close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.9); color: var(--dark);
  display: flex; align-items: center; justify-content: center; font-size: 0.95rem;
}
.promo-popup-img-wrap { position: relative; }
.promo-popup-img-wrap img:first-child { width: 100%; height: 180px; object-fit: cover; display: block; }
.promo-popup-logo {
  position: absolute; bottom: -22px; left: 20px;
  width: 60px; height: 60px; border-radius: 12px;
  background: #fff; object-fit: fill; padding: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.promo-popup-body { padding: 34px 24px 24px; text-align: center; }
.promo-popup-body h3 { margin: 0 0 8px; font-size: 1.3rem; font-weight: 800; }
.promo-popup-body p { margin: 0 0 20px; color: var(--gray); font-size: 0.95rem; line-height: 1.45; }
.promo-popup-cta {
  display: block; width: 100%;
  background: #e0263f; color: #fff;
  font-weight: 700; font-size: 1rem;
  padding: 14px 0; border-radius: 999px;
}
.menu-quick-view-review-section {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border);
}
.menu-quick-view-review-section .star-picker { margin-bottom: 4px; }

.image-logo {
  width: 100%; max-width: 150px; height: 150px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--border); margin-bottom: 10px; display: block;
}


.role-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.role-pick a {
  border: 2px solid var(--primary); border-radius: 10px; padding: 16px; text-align: center; font-weight: 700;
}
.role-pick a.active { border-color: var(--primary); color: var(--primary); background: #fff4ef; }

.role-pick.landing a {
  padding: 14px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.role-pick.landing a i { font-size: 1.6rem; color: var(--primary); }
.role-pick.landing a span.role-desc { font-weight: 400; font-size: 0.76rem; color: var(--gray); }
.role-pick.landing a:active { transform: scale(0.97); }
.role-switch-tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.role-switch-tabs a {
  flex: 1; text-align: center; padding: 8px; border-radius: 8px; font-size: 0.82rem; font-weight: 600;
  border: 1px solid var(--border); color: var(--gray);
}
.role-switch-tabs a.active { border-color: var(--primary); color: var(--primary); background: #fff4ef; }

.timeline { list-style: none; padding: 0; margin: 20px 0; }
.timeline li { padding: 8px 0 8px 28px; position: relative; color: var(--gray); }
.timeline li::before {
  content: ''; position: absolute; left: 6px; top: 14px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--border);
}
.timeline li.done { color: var(--dark); font-weight: 600; }
.timeline li.done::before { background: var(--success); }
.timeline li.current::before { background: var(--primary); box-shadow: 0 0 0 4px #ff5a1f33; }

.empty-state { text-align: center; padding: 50px 20px; color: var(--gray); }

.hero {
  text-align: center; padding: 70px 20px; background: linear-gradient(135deg, #fff4ef, #fef8f2);
}
.hero h1 { font-size: 2.4rem; }
.hero .btn { margin: 6px; }

footer.notice {
  text-align: center; color: var(--gray); font-size: 0.8rem; padding: 20px;
}

.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.text-gray { color: var(--gray);margin: 3px;}
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* ---------- Navigation ---------- */

.container_top{
    max-width:1100px;
    margin:auto;
}

.minimal-topbar {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}
.minimal-topbar .brand { line-height: 0; }

.nav-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.menu-toggle{
    display:none;
}

.navbar nav{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:18px;
}
/* Mobile */

@media (max-width:768px){

    .container_top{
        display:block !important;
		
    }
	

    .nav-header{
        display:flex;
        justify-content:space-between;
        align-items:center;
        width:100%;
    }

    .brand{
        flex:0 0 auto;
    }

    .menu-toggle{
        display:block;
        margin-left:auto;
        background:none;
        border:none;
        font-size:34px;
        cursor:pointer;
    }

    .navbar nav{
        display: none;
        flex-direction: column;
        align-items: flex-start;
        width:100%;
        margin-right:0;
        gap:0;
        padding-top: 8px;
    }

    .navbar nav.show{
        display:flex;
    }

    .navbar nav a,
    .navbar nav span,
    .navbar nav form{
        width:100%;
        padding:10px 0;
        text-align:left;
        border-bottom: 1px solid rgba(0,0,0,0.08);
    }

    .navbar nav .btn{
        width:100%;
    }
	
	.food-card .price {
	  font-size: 20px;
   }
}

.hero-ui{

    background:var(--accent-yellow);
    min-height:100vh;

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;

    padding:40px 25px;
}

.hero-image{

    margin-bottom:-5px;
	text-align:center;
}

.hero-image img{

    width:320px;
    max-width:100%;
}

.hero-content{

    max-width:420px;
    text-align:left;
}

.hero-content h1{

    font-size:3rem;
    line-height:1.1;
    font-weight:800;
    color:#222222;
    margin-bottom:20px;
}

.hero-content p{

    color:#222222;
    font-size:1rem;
    line-height:1.7;
    margin-bottom:35px;
}

.start-btn{

    display:block;

    width:100%;

    text-align:center;

   background: #222222;

    color:#fff;

    padding:18px;

    border-radius:50px;

    text-decoration:none;

    font-size:18px;

    font-weight:700;

    transition:.3s;
}

.start-btn:hover{

    background:#000000;
}

.features{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:25px;

    padding:70px 8%;
}

.feature-card{

    background:#fff;

    border-radius:20px;

    padding:30px;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

    transition:.3s;
}

.feature-card:hover{

    transform:translateY(-6px);
}

.feature-card h3{

    margin-bottom:15px;
}

.login-area{

    text-align:center;

    margin-bottom:80px;
	margin-top: 18px;
	color:#222222;
}

.login-btn{

    color:#222222;

    text-decoration:none;

    font-weight:700;
}

/* =======================================================================
   Welcome / "Get Started" intro animation (role teaser before Register)
   ======================================================================= */
.welcome-ui .welcome-tagline { color: #222222; font-size: 0.95rem; margin: -8px 0 28px; text-align: center; }

.role-cycle {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  margin-bottom: 28px; min-height: 150px; justify-content: center;
}
.role-cycle-icon {
  width: 84px; height: 84px; border-radius: 50%; background: #222222;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.1rem; color: var(--accent-yellow);
  opacity: 0; transform: scale(0.85); transition: opacity .3s ease, transform .3s ease;
}
.role-cycle-icon.show { opacity: 1; transform: scale(1); }
.role-cycle-label {
  text-align: center; opacity: 0; transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
}
.role-cycle-label.show { opacity: 1; transform: translateY(0); }
.role-cycle-label strong { display: block; font-size: 1.2rem; color: #222222; }
.role-cycle-label span { display: block; font-size: 0.85rem; color: #222222; opacity: 0.75; margin-top: 2px; }

.progress-dots { display: flex; gap: 8px; justify-content: center; margin-bottom: 22px; }
.progress-dots span {
  width: 8px; height: 8px; border-radius: 50%; background: rgba(34,34,34,0.25);
  transition: background .3s ease, transform .3s ease;
}
.progress-dots span.active { background: #222222; transform: scale(1.25); }

.skip-link {
  display: block; text-align: center; color: #222222; opacity: 0.7;
  font-size: 0.85rem; font-weight: 600; text-decoration: underline;
}
.skip-link:hover { opacity: 1; }

[class^="hero-image"] img {
  width: 320px;
  max-width: 100%;
}

.hero-image-register{
    text-align: center;
}

@media(max-width:768px){

.hero-content h1{

    font-size:2.2rem;
	text-align:center;
}

.hero-content p{

   text-align: center;
}


.hero-image img{

    width:200px;
}

.hero-image-welcome img{

    width:200px;
	margin-bottom:20px;
}

.hero-image-register img{

    width:200px;
}

.hero-image-register{

     text-align: center;
}

}

.bottom-nav{

    position:fixed;

    left:0;
    right:0;
    bottom:0;

    height:72px;

    background:var(--accent-yellow);

    display:flex;

    justify-content:space-around;

    align-items:center;

    border-top:1px solid rgba(0,0,0,0.08);

    z-index:1500;

    box-shadow:0 -5px 18px rgba(0,0,0,.08);

    /* Forces its own GPU-composited layer — without this, iOS/Android
       browsers can visually lag, flicker, or momentarily let a fixed
       element scroll along with the page during fast/momentum scrolling. */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.bottom-nav a{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:5px;

    color:#3a3a3a;

    text-decoration:none;

    font-size:12px;

    position:relative;
}

.bottom-nav .nav-icon-wrap { position: relative; display: inline-flex; }
.bottom-nav .badge-count {
  position: absolute; top: -6px; right: -10px;
  background: var(--danger); color: #fff; border-radius: 50%;
  font-size: 0.62rem; font-weight: 700; line-height: 1;
  min-width: 16px; height: 16px; padding: 2px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--accent-yellow);
}

.bottom-nav i{

    font-size:14px;
}

.bottom-nav a.active{

    color: var(--primary);
}

.bottom-nav a.active i{

    transform:scale(1.1);
}

/* =======================================================================
   Mobile / app-shell polish (Android + iOS PWA-friendly)
   ======================================================================= */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
* { -webkit-tap-highlight-color: transparent; }

/* iOS zooms the page in if a focused input's font-size is under 16px —
   force 16px on all form fields regardless of the base rem size. */
input, select, textarea {
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent-yellow);
  box-shadow: 0 0 0 3px rgba(255, 211, 78, 0.3);
  background: var(--white);
}
select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 36px;
}

.btn { -webkit-appearance: none; user-select: none; touch-action: manipulation; transition: transform .1s ease, background .15s ease, opacity .15s ease; }
.btn:active { transform: scale(0.96); }

.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
}

.food-card { transition: transform .15s ease, box-shadow .15s ease; box-shadow: 0 1px 3px rgba(16,24,40,0.04); }
.food-card:active { transform: scale(0.98); }

.bottom-nav { padding-bottom: env(safe-area-inset-bottom); height: calc(72px + env(safe-area-inset-bottom)); }
.navbar { padding-top: calc(14px + env(safe-area-inset-top)); }

/* =======================================================================
   Toast notifications (top of screen, stacked)
   ======================================================================= */
.toast-container {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top));
  left: 0; right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 4000;
  pointer-events: none;
  padding: 0 16px;
}
.toast {
  background: var(--dark);
  color: #fff;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity .25s ease, transform .25s ease;
  max-width: 92vw;
  text-align: center;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.success { background: var(--success); }
.toast.error { background: var(--danger); }

/* =======================================================================
   Confirm / info modal (centered dialog on all screen sizes)
   ======================================================================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 18, 25, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  padding: 20px;
}
.modal-overlay.show { opacity: 1; pointer-events: auto; }
.modal-box {
  background: #fff;
  width: 100%;
  max-width: 380px;
  border-radius: 18px;
  padding: 26px 22px calc(22px + env(safe-area-inset-bottom));
  transform: translateY(10px) scale(.97);
  transition: transform .25s cubic-bezier(.32,.72,0,1);
  box-shadow: 0 12px 40px rgba(0,0,0,0.22);
}
.modal-overlay.show .modal-box { transform: translateY(0) scale(1); }
.modal-icon {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; margin-bottom: 14px;
}
.modal-icon.success { background: #dcfce7; color: var(--success); }
.modal-icon.question { background: #fee2e2; color: var(--danger); }
.modal-title { font-size: 1.08rem; font-weight: 800; margin: 0 0 6px; }
.modal-text { color: var(--gray); font-size: 0.9rem; margin: 0 0 22px; line-height: 1.5; }
.modal-actions { display: flex; gap: 10px; }
.modal-actions .btn { flex: 1; width: auto; text-align: center; }

/* =======================================================================
   Google Maps / Leaflet shared bits
   ======================================================================= */
.map-box { height: 260px; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); margin: 14px 0; background: var(--light-gray); }
.map-box.tall { height: 420px; }
.map-fallback-note {
  display: flex; align-items: center; gap: 8px;
  background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa;
  padding: 10px 12px; border-radius: 10px; font-size: 0.8rem; margin-bottom: 10px;
}
.mapkit-emoji-icon { font-size: 22px; text-align: center; line-height: 26px; }
.mapkit-pin {
  width: 26px; height: 34px;
  background: var(--primary);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 2px 4px rgba(0,0,0,.35);
  position: relative;
}
.mapkit-pin::after {
  content: ''; position: absolute; top: 6px; left: 6px;
  width: 10px; height: 10px; background: #fff; border-radius: 50%;
}
.mapkit-pin.red { background: #ea4335; }

/* =======================================================================
   Vendor / rider dashboard banner (unchanged simple version — the
   customer home page uses .hero-carousel below instead)
   ======================================================================= */
.dashboard-banner {
  position: relative;
  height: 150px;
  overflow: hidden;
  margin-bottom: 18px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
  margin-left: -20px;
  margin-right: -20px;
  width: calc(100% + 40px);
}
.dashboard-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dashboard-banner .banner-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 60%, rgba(0,0,0,0) 100%);
  display: flex; flex-direction: column; justify-content: center; padding: 0 20px;
}
.dashboard-banner .banner-scrim strong { color: #fff; font-size: 1.15rem; font-weight: 800; }
.dashboard-banner .banner-scrim span { color: rgba(255,255,255,0.9); font-size: 0.85rem; margin-top: 2px; }

/* =======================================================================
   Dashboard hero banner — fade-crossfade image carousel driven by
   per-category vendor photos, with a search bar floating on top of it.
   ======================================================================= */
.hero-wrap {
  position: relative;
  overflow: hidden;
  margin-top: -20px; /* cancel .container's top padding so the image starts flush under the navbar */
  margin-bottom: 18px;
  margin-left: -20px;
  margin-right: -20px;
  width: calc(100% + 40px);
}
/* Fallback so the search bar has something to sit on if no hero slides exist yet.
   Tall enough to fit the floating bell + search bar + promo overlay stack
   without .hero-wrap's overflow:hidden clipping any of them. */
.hero-wrap:not(:has(.hero-carousel)) {
  min-height: 200px;
  background: var(--light-gray);
}
.dashboard-search-wrap {
  position: absolute;
  top: calc(72px + env(safe-area-inset-top)); /* clears the location bar above it */
  left: 20px;
  right: 20px;
  z-index: 20;
}
.dashboard-search-wrap form {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 6px 4px 16px;
  box-shadow: 0 4px 16px rgba(16,24,40,0.14);
}
.dashboard-search-wrap input[type="text"] {
  border: none;
  margin: 0;
  padding: 8px 0;
  flex: 1;
  font-size: 0.95rem;
}
.dashboard-search-wrap input[type="text"]:focus { outline: none; box-shadow: none; }
.dashboard-search-wrap i.fa-magnifying-glass { color: var(--gray); font-size: 0.9rem; }
.dashboard-search-wrap button.search-submit-btn {
  border-radius: 999px;
  width: 38px; height: 38px;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.hero-carousel {
  position: relative;
  z-index: 1;
  height: 220px;
  overflow: hidden;
  border-radius: 0;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
}
.hero-carousel a.hero-slide {
  position: absolute; inset: 0;
  display: block;
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
}
.hero-carousel a.hero-slide.active { opacity: 1; pointer-events: auto; }
.hero-carousel .hero-slide-fg { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-carousel .hero-slide-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.05) 55%, rgba(0,0,0,0) 100%);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 18px 20px;
}
.hero-carousel .hero-slide-scrim strong { color: #fff; font-size: 1.3rem; font-weight: 800; display: block; }
.hero-carousel .hero-slide-scrim span { color: rgba(255,255,255,0.9); font-size: 0.85rem; }
.hero-carousel-dots {
  position: absolute;
  bottom: 16px; left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  display: flex; gap: 6px;
}
.hero-carousel-dots span {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.5);
  transition: background .2s ease, transform .2s ease;
}
.hero-carousel-dots span.active { background: #fff; transform: scale(1.2); }

/* Floating bell over the hero image on the customer home screen, replacing
   the standard yellow topbar + logo (see partials/header.ejs's isCustomerHome
   branch) — white icon so it's visible against the photo. */
.hero-floating-topbar {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top));
  right: 20px;
  z-index: 25;
}
.hero-floating-topbar a {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(0,0,0,0.35);
  color: #fff;
  font-size: 1.05rem;
}

/* Detected-area label above the search box (reverse-geocoded from browser
   location — see the script at the bottom of dashboard.ejs). Sits between
   the floating bell and the search bar; hides itself via JS if location
   access is denied or geocoding fails, rather than showing stale/empty text. */
.hero-location-bar {
  position: absolute;
  top: calc(38px + env(safe-area-inset-top)); /* enough gap so it doesn't crowd the bell above it */
  left: 20px;
  right: 76px; /* stay clear of the bell's column on the right */
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Per-slide promo variant of .hero-slide-scrim (see the "kind === 'promo'"
   branch in dashboard.ejs) — tagline anchored lower-left (compact, so it
   doesn't compete with the full-bleed image), logo as a small boxed badge
   anchored lower-right. Markup order is tagline then logo (see
   dashboard.ejs) so space-between naturally puts them on opposite sides.
   Selectors are chained with .hero-carousel (matching the base
   .hero-carousel .hero-slide-scrim rule's specificity) rather than just
   .hero-slide-scrim-promo alone — a single-class selector was silently
   losing to the two-class base rule regardless of file order, which is
   why this wasn't actually taking effect before. */
.hero-carousel .hero-slide-scrim-promo {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}
.hero-carousel .hero-slide-scrim-promo strong {
  color: #fff; font-size: 1.15rem; font-weight: 800; line-height: 1.3;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
  max-width: 300px;
}
.hero-slide-promo-left {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
/* Purely visual — the whole slide is already one <a>, so this isn't a
   separate link (nesting an <a> inside another <a> is invalid HTML and
   behaves unpredictably); it just gives the tagline a clear call-to-action
   below it. */
.hero-slide-order-btn {
  background: #e0263f; color: #fff;
  font-size: 0.75rem; font-weight: 700;
  padding: 6px 16px; border-radius: 999px;
}
.hero-slide-promo-logo {
  width: 64px; height: 64px; border-radius: 12px;
  object-fit: fill;
  flex-shrink: 0;
}

/* Yellow rounded section wrapping the category row, per the reference
   redesign — visually groups it as its own "block" rather than floating
   directly on the page background. */
.category-section-box {
  background: var(--accent-yellow);
  border-radius: 18px;
  padding: 8px 0px 2px;
  margin-bottom: 18px;
}
.category-section-box .category-row-header h3 { color: var(--dark); }
.category-section-box .category-circle { border-color: rgba(0,0,0,0.15); background: rgba(255,255,255,0.5); }
.category-section-box .category-circle-item.active .category-circle { border-color: var(--primary); }

/* =======================================================================
   Vendor offers carousel — self-authored by vendors, admin-approved
   (see vendor_profiles.offer_text/offer_enabled), capped at 10 cards.
   ======================================================================= */
.offers-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr);
  gap: 16px; overflow-x: auto;
  scrollbar-width: none;
}
.offers-row::-webkit-scrollbar { display: none; }
.offer-card {
  position: relative;
  height: 120px;
  border-radius: 14px; overflow: hidden;
  display: block;
  background: var(--light-gray);
  /* No fixed/min width here on purpose — .offers-row's grid column
     (minmax(170px,1fr)) controls sizing: cards stretch to fill the row
     edge-to-edge when there are only a couple of offers (matching the
     restaurant grid below instead of stopping short of its right edge),
     and hold at 170px with normal horizontal scroll once there are
     enough offers to overflow the row. */
}
.offer-card img.offer-card-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill;
}
.offer-card .offer-card-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(70deg, rgba(0,0,0,0.1) 60%, rgba(0,0,0,1) 100%);
  display: flex; flex-direction: column; justify-content: flex-start; padding: 10px;
}
.offer-card .offer-card-logo {
  position: absolute; top: 1px; right: 1px;
  width: 50px; height: 50px; border-radius: 14px;
  object-fit: fill; padding: 3px;
}
.offer-card .offer-card-text {
  color: #fff; font-weight: 800; font-size: 0.85rem; line-height: 1.25;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
  max-width: 75%; /* leave clear space so the text never runs under the
                      logo badge, which now floats independently in the
                      opposite corner rather than sharing the flex flow */
  position: absolute;
  bottom: 30px;
}
.offer-card .offer-card-free-delivery {
  position: absolute;
  bottom: 1px; left: 1px;
  background: #111; color: #fff;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2px;
  padding: 4px 9px; border-radius: 5px;
}

/* =======================================================================
   Restaurant filter row — sort dropdown, ratings toggle, list/grid switch.
   Purely client-side (see the script at the bottom of dashboard.ejs).
   ======================================================================= */
.restaurant-filter-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
}
.filter-chips-scroll {
  display: flex; align-items: center; gap: 8px;
  overflow-x: auto; scrollbar-width: none;
  flex: 1; min-width: 0;
}
.filter-chips-scroll::-webkit-scrollbar { display: none; }
.filter-chip {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 2px;
  padding: 8px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--white);
  font-size: 0.82rem; font-weight: 600; color: var(--dark);
  cursor: pointer;
  margin-bottom: 0px !important;
}
.filter-chip.active { background: var(--dark); color: #fff; border-color: var(--dark); }
.filter-chip select {
  border: none; background: transparent; margin: 0; padding: 0;
  font-size: 0.82rem; font-weight: 600; color: inherit;
  /* Android reserves extra width for the native dropdown caret by
     default — the chip already has its own sort icon as the visual
     affordance, so the native arrow is pure wasted space that was
     pushing this chip wider than expected and squeezing "Ratings 4.0+"
     off the edge of its scroll area. */
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
}
.view-toggle { display: flex; gap: 2px; flex-shrink: 0; }
.view-toggle button {
  width: 34px; height: 34px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--white); color: var(--gray);
  display: flex; align-items: center; justify-content: center;
}
.view-toggle button.active { background: var(--dark); color: #fff; border-color: var(--dark); }

/* List view for the restaurant grid — toggled via .list-view on #vendor-grid */
.restaurant-grid.list-view { grid-template-columns: 1fr; }
.restaurant-grid.list-view .restaurant-card { display: flex; }
.restaurant-grid.list-view .restaurant-card-img-wrap { width: 110px; flex-shrink: 0; }
.restaurant-grid.list-view .restaurant-card-img,
.restaurant-grid.list-view .restaurant-card-img-placeholder { height: 100%; }
.restaurant-grid.list-view .restaurant-card-body { flex: 1; }

/* Small vendor logo badge overlaid on each restaurant card's image —
/* Small vendor logo badge overlaid on each restaurant card's image —
   top-left corner, square (not round), no border/shadow ring. Kept at a
   small *positive* top offset rather than straddling the edge with a
   negative one: .restaurant-card has overflow:hidden for its rounded
   corners, so anything poking above the image's top edge would get
   silently clipped and disappear. */
.restaurant-card-logo-badge {
  position: absolute; top: 8px; left: 8px;
  width: 58px; height: 58px; border-radius: 14px;
  object-fit: fill; padding: 5px;
}

/* =======================================================================
   Category row — circular thumbnail nav (replaces the old <select>)
   ======================================================================= */
.category-row-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.category-row-header h3 { margin: 0; font-size: 1.05rem; }
.category-row-header a { font-size: 0.85rem; font-weight: 600; color: var(--gray); margin-left: auto; }
.category-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(70px, 1fr);
  gap: 1px; overflow-x: auto; padding: 0px 0px 8px 2px;
  scrollbar-width: none;
}
.category-row::-webkit-scrollbar { display: none; }
.category-circle-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center;
  /* No fixed/min width here on purpose — same reasoning as .offer-card
     above: .category-row's grid column controls sizing, so a handful of
     categories stretch to fill the row instead of stopping short of the
     restaurant grid's right edge below it. The 64px circle itself stays
     centered within whatever width its column ends up with. */
}
.category-circle {
  width: 64px; height: 64px; border-radius: 30%; object-fit: cover;
  border: 1px solid var(--border); background: var(--light-gray);
}
.category-circle-placeholder {
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; color: #c7c7c7;
}
.category-circle-item.active .category-circle { border: 2px solid var(--primary); }
.category-circle-label { font-size: 0.78rem; font-weight: 600; color: var(--dark); line-height: 1.2; }
.category-circle-count { font-size: 0.68rem; color: var(--gray); }

.category-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 20px 12px;
}

/* =======================================================================
   Restaurant grid cards — menu photo on top, details below (2-column)
   ======================================================================= */
.restaurant-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.restaurant-card {
  display: block; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--border); background: var(--white);
  box-shadow: 0 1px 3px rgba(16,24,40,0.04);
  transition: transform .15s ease, box-shadow .15s ease;
}
.restaurant-card:active { transform: scale(0.98); }
.restaurant-card-img-wrap { position: relative; }
.restaurant-card-img {
  width: 100%; height: 120px; object-fit: cover; display: block; background: var(--light-gray);
}
.restaurant-card-img-placeholder {
  width: 100%; height: 120px; display: flex; align-items: center; justify-content: center;
  background: var(--light-gray); font-size: 1.8rem; color: #c7c7c7;
}
.restaurant-card-distance-pill {
  position: absolute; bottom: 8px; left: 8px;
  background: rgba(0,0,0,0.65); color: #fff;
  font-size: 0.68rem; font-weight: 600; padding: 3px 8px; border-radius: 999px;
}
/* "Outside delivery area" is much longer than "2.3 km away", and list
   view's thumbnail is only 110px wide (see .restaurant-grid.list-view
   .restaurant-card-img-wrap below) — a fully-rounded pill sized for a
   short distance reading wraps that phrase into two cramped, overlapping
   lines. This modifier (added alongside the pill class when out of
   range — see the dashboard's own script) drops to a smaller, less
   rounded shape and caps width to the thumbnail so it wraps cleanly
   at worst, instead of visually breaking. */
.restaurant-card-distance-pill.out-of-range {
  right: 8px; max-width: calc(100% - 16px);
  font-size: 0.6rem; line-height: 1.25; padding: 3px 6px; border-radius: 6px;
  white-space: normal; text-align: center;
}
.restaurant-card-closed-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
}
.restaurant-card-closed-overlay span {
  color: #fff; font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.03em; text-transform: uppercase;
  border: 1.5px solid rgba(255,255,255,0.75); border-radius: 999px;
  padding: 5px 14px;
}
.restaurant-card-body { padding: 10px 12px 14px; }
.restaurant-card-body h3 { margin: 0 0 3px; font-size: 0.92rem; line-height: 1.25; }
.restaurant-card-body p { margin: 0; font-size: 0.76rem; color: var(--gray); line-height: 1.35; }
.restaurant-card-body .restaurant-card-cuisine { font-weight: 600; color: var(--primary); margin-top: 2px; }

.map-attribution {
  font-size: 0.68rem; color: var(--gray); text-align: right;
  margin: 4px 2px 0; line-height: 1.2;
}
.map-attribution a { color: var(--gray); text-decoration: underline; }

/* =======================================================================
   Operating hours: days-of-week toggle buttons
   ======================================================================= */
.days-toggle { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.days-toggle button {
  border: 1.5px solid var(--border); background: #fff; color: var(--gray);
  font-weight: 700; font-size: 0.75rem; padding: 10px 0; width: 46px;
  border-radius: 10px; cursor: pointer; transition: .15s; touch-action: manipulation;
}
.days-toggle button.active { border-color: var(--primary); background: var(--primary); color: #fff; }

.prep-time-row { display: flex; gap: 10px; align-items: flex-end; }
.prep-time-row > div:first-child { flex: 1; }
.prep-time-row > div:last-child { width: 130px; }

.onboard-progress { display:flex; align-items:center; gap:6px; margin-bottom:22px; }
.onboard-progress .step { flex:1; height:5px; border-radius:4px; background:var(--border); }
.onboard-progress .step.done { background: var(--primary); }

.section-label {
  font-weight: 800; font-size: 0.78rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--gray); margin: 22px 0 10px;
}
.section-label:first-child { margin-top: 0; }

/* =======================================================================
   Star ratings — read-only display + interactive picker
   ======================================================================= */
.star-rating-display {
  position: relative; display: inline-block; line-height: 1; vertical-align: middle;
}
.star-rating-display .stars-row { display: block; white-space: nowrap; letter-spacing: 1px; }
.star-rating-display .stars-bg { color: #e5e7eb; }
.star-rating-display .stars-fg { color: #f59e0b; position: absolute; top: 0; left: 0; overflow: hidden; }
.star-rating-count { font-size: 0.8rem; margin-left: 6px; vertical-align: middle; }

.star-picker { display: flex; gap: 4px; margin-bottom: 6px; }
.star-picker .star-btn {
  background: none; border: none; font-size: 2.1rem; line-height: 1; color: #e5e7eb;
  cursor: pointer; padding: 0; width: auto; touch-action: manipulation;
  transition: transform .1s ease, color .15s ease;
}
.star-picker .star-btn:active { transform: scale(0.9); }
.star-picker .star-btn.active { color: #f59e0b; }
.star-picker-hint { font-size: 0.78rem; color: var(--gray); margin: 0 0 14px; min-height: 1.1em; }

.review-item { border-bottom: 1px solid var(--border); padding: 14px 0; }
.review-item:last-child { border-bottom: none; }
.review-item .review-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 4px; }
.review-item .review-name { font-weight: 700; font-size: 0.9rem; }
.review-item .review-date { font-size: 0.75rem; color: var(--gray); }
.review-item .review-comment { font-size: 0.88rem; margin: 6px 0 0; color: var(--dark); }

/* =======================================================================
   Account hub — chevron list (Profile, Saved Shops, Orders, Terms, etc.)
   ======================================================================= */
.account-list { margin-bottom: 18px; display: flex; flex-direction: column; gap: 10px; }
.account-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; font-weight: 600; font-size: 0.95rem; color: var(--dark);
  touch-action: manipulation;
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
  transition: transform .1s ease;
}
.account-row:active { transform: scale(0.98); background: var(--light-gray); }
.account-row .row-left { display: flex; align-items: center; gap: 12px; }
.account-row .row-icon {
  width: 34px; height: 34px; border-radius: 9px; background: var(--light-gray);
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem; flex-shrink: 0;
}
.account-row .row-chevron { color: #c7c7c7; font-size: 1.1rem; }
.account-row .row-badge { background: var(--light-gray); color: var(--gray); font-size: 0.75rem; font-weight: 700; padding: 2px 9px; border-radius: 20px; margin-right: 8px; }
.account-header { display: flex; align-items: center; gap: 14px; padding: 6px 4px 20px; }
.avatar-circle {
  width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 800; flex-shrink: 0;
}
.account-header .avatar-circle { width: 56px; height: 56px; font-size: 1.3rem; }

/* Simple prose layout for Terms & Conditions / Privacy Policy */
.legal-content h2 { margin-top: 26px; font-size: 1.05rem; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p, .legal-content li { color: var(--dark); font-size: 0.92rem; line-height: 1.7; }
.legal-content ul { padding-left: 20px; }

/* Order detail meta lines (distance / ETA / prep time) */
.order-meta { margin-top: -6px; margin-bottom: 4px; }
.order-meta-line { font-size: 0.85rem; margin: 2px 0; display: flex; align-items: center; gap: 5px; }
.order-meta-icon {
  color: var(--primary);
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* Assigned rider card (order detail / live tracking) */
.rider-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--light-gray);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 14px;
}
.rider-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-yellow); color: var(--primary);
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
}
.rider-info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.rider-label { font-size: 0.72rem; color: var(--gray); text-transform: uppercase; letter-spacing: 0.4px; }
.rider-name { font-weight: 700; font-size: 0.98rem; color: var(--dark); }
.rider-phone { font-size: 0.82rem; color: var(--gray); }
.rider-call-btn {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: var(--primary); color: var(--white);
  display: flex; align-items: center; justify-content: center; font-size: 0.95rem;
  transition: background 0.15s ease;
}
.rider-call-btn:hover { background: var(--primary-dark); }

/* =======================================================================
   Support chat (customer/vendor/rider <-> admin) and admin messages inbox
   ======================================================================= */
.chat-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 55vh;
  overflow-y: auto;
  padding: 4px 2px 12px;
  margin-bottom: 10px;
}
.chat-empty-state {
  text-align: center;
  color: var(--gray);
  padding: 40px 20px;
}
.chat-empty-state i { font-size: 1.8rem; margin-bottom: 10px; display: block; color: #d8d8d8; }
.chat-bubble-row { display: flex; }
.chat-bubble-row.mine { justify-content: flex-end; }
.chat-bubble-row.theirs { justify-content: flex-start; }
.chat-bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 0.9rem;
  line-height: 1.4;
}
.chat-bubble-row.mine .chat-bubble {
  background: var(--primary);
  color: var(--white);
  border-bottom-right-radius: 4px;
}
.chat-bubble-row.theirs .chat-bubble {
  background: var(--light-gray);
  color: var(--dark);
  border-bottom-left-radius: 4px;
}
.chat-bubble p { margin: 0; white-space: pre-wrap; word-break: break-word; }
.chat-bubble-sender {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--primary);
  margin-bottom: 3px;
}
.chat-bubble-time {
  display: block;
  font-size: 0.66rem;
  margin-top: 4px;
  opacity: 0.65;
}
.chat-input-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 6px 6px 6px 16px;
  box-shadow: 0 2px 8px rgba(16,24,40,0.06);
}
.chat-input-form textarea {
  flex: 1;
  margin: 0;
  padding: 9px 0;
  border: none;
  border-radius: 0;
  background: transparent;
  resize: none;
  font-family: inherit;
}
.chat-input-form textarea:focus { outline: none; box-shadow: none; }
.chat-input-form button {
  width: 44px; height: 44px; border-radius: 50%;
  padding: 0; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}

/* Admin inbox list */
.support-inbox-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 10px;
  background: var(--white);
  transition: border-color 0.15s ease;
}
.support-inbox-row:hover { border-color: var(--primary); }
.support-inbox-row.unread { border-color: var(--primary); background: #fff9ec; }
.support-inbox-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent-yellow); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.9rem;
}
.support-inbox-body { flex: 1; min-width: 0; }
.support-inbox-body .name-row { display: flex; align-items: center; gap: 8px; }
.support-inbox-body .name-row strong { font-size: 0.95rem; }
.support-inbox-body .role-pill {
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; background: var(--light-gray); color: var(--gray);
}
.support-inbox-body p {
  margin: 3px 0 0; font-size: 0.82rem; color: var(--gray);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.support-inbox-meta { text-align: right; flex-shrink: 0; }
.support-inbox-meta .time { font-size: 0.72rem; color: var(--gray); display: block; margin-bottom: 4px; }

/* Simple read-only label/value table for admin detail pages */
.detail-table { width: 100%; border-collapse: collapse; margin-bottom: 4px; }
.detail-table tr { border-bottom: 1px solid var(--border); }
.detail-table tr:last-child { border-bottom: none; }
.detail-table th {
  text-align: left; font-weight: 600; font-size: 0.82rem; color: var(--gray);
  padding: 9px 12px 9px 0; width: 38%; vertical-align: top; white-space: nowrap;
}
.detail-table td { padding: 9px 0; font-size: 0.92rem; color: var(--dark); word-break: break-word; }

/* Clickable name links inside admin tables (vendors, riders) — looks like
   plain text but signals interactivity on hover instead of a boxy button. */
.table-link { color: var(--dark); font-weight: 600; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 2px; }
.table-link:hover { color: var(--primary); text-decoration-color: var(--primary); }

/* =======================================================================
   Admin: vertical left sidebar nav (replaces the old horizontal top nav)
   ======================================================================= */
.admin-shell { display: flex; min-height: 100vh; align-items: stretch; }
.admin-sidebar {
  width: 230px;
  flex-shrink: 0;
  background: var(--accent-yellow);
  padding: 20px 14px;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
}
.admin-sidebar-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.admin-sidebar-brand img { height: 46px; display: block; }
.admin-mobile-toggle { display: none; background: none; border: none; font-size: 30px; cursor: pointer; }
.admin-sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.admin-sidebar-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  color: var(--dark); font-weight: 600; font-size: 0.9rem;
  position: relative;
}
.admin-sidebar-nav a i { width: 18px; text-align: center; flex-shrink: 0; }
.admin-sidebar-nav a:hover { background: rgba(255,255,255,0.5); }
.admin-sidebar-nav a.active { background: var(--white); color: var(--primary); }
.admin-sidebar-nav a .badge-count {
  margin-left: auto;
  background: var(--primary); color: #fff; border-radius: 999px;
  font-size: 0.68rem; font-weight: 700; padding: 2px 7px; min-width: 16px; text-align: center;
}
.admin-sidebar-divider { height: 1px; background: rgba(0,0,0,0.1); margin: 10px 4px; }
.admin-sidebar-greeting { padding: 8px 12px; font-size: 0.82rem; color: var(--dark); opacity: 0.75; }
.admin-main { flex: 1; min-width: 0; background: var(--accent-yellow); }

@media (max-width: 900px) {
  .admin-shell { flex-direction: column; }
  .admin-sidebar { width: 100%; height: auto; position: relative; padding: 14px 16px; }
  .admin-mobile-toggle { display: block; }
  .admin-sidebar-nav {
    display: none;
    flex-direction: column;
    padding-top: 8px;
  }
  .admin-sidebar-nav.show { display: flex; }
  .admin-sidebar-nav a { border-bottom: 1px solid rgba(0,0,0,0.08); border-radius: 0; padding: 12px; }
  .admin-sidebar-nav a.active { border-radius: 6px; }

  /* Every data table (admin orders/users/vendors/riders/withdrawals/etc,
     vendor wallet, rider earnings, customer order history) gets wrapped
     in a .table-scroll div at render time (see views/partials/footer.ejs)
     since tables sit in inconsistent markup contexts across ~20 view
     files — some inside a .card, some directly in .container. At narrow
     widths the browser was squeezing every column down to fit, shrinking
     text to the point of being unreadable. This lets the table scroll
     horizontally at a legible column width instead. */
  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-scroll table { min-width: 640px; }
}

/* Analytics dashboard: growth badges + top-cuisine bar chart rows */
.stat-change { display: inline-block; margin-top: 6px; font-size: 0.78rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.stat-change.up { color: #166534; background: #dcfce7; }
.stat-change.down { color: #991b1b; background: #fee2e2; }
.stat-change.flat { color: var(--gray); background: var(--light-gray); }
.stat-change.neutral { color: #1e40af; background: #dbeafe; }

.bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.bar-row:last-child { margin-bottom: 0; }
.bar-label { width: 100px; flex-shrink: 0; font-size: 0.85rem; font-weight: 600; color: var(--dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { flex: 1; height: 10px; background: var(--light-gray); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--accent-yellow-dark, #F4A100); border-radius: 999px; }
.bar-value { width: 34px; flex-shrink: 0; text-align: right; font-size: 0.82rem; font-weight: 700; color: var(--gray); }

/* =======================================================================
   Customer, vendor, and rider pages render at a fixed phone width even on
   a wide desktop browser, so every section stays visually consistent —
   grids/carousels and both nav bars all match instead of stretching wide
   while fixed-width carousel content stays small. Scoped to
   body.mobile-shell, set in partials/custom.ejs (customer pages) and
   partials/header.ejs (vendor/rider branch only) — admin's sidebar layout
   never gets this class and keeps the wider desktop layout on purpose.
   To revert: delete this block and remove "mobile-shell" from both partials.
   ======================================================================= */
body.mobile-shell .container { max-width: 480px; }
body.mobile-shell .minimal-topbar { max-width: 480px; }
body.mobile-shell .bottom-nav {
  left: 50%;
  right: auto;
  width: 100%;
  max-width: 480px;
  transform: translateX(-50%) translateZ(0);
  -webkit-transform: translateX(-50%) translateZ(0);
}