/* ── Google Fonts ─────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ── FoodRadar Design Tokens ─────────────────── */
:root {
  /* Primary orange — search button, CTAs, badges */
  --sb-primary:       #E67E22;
  --sb-primary-dk:    #C0621A;
  --sb-primary-lt:    #FDF3E7;
  /* Text laid over an orange fill — white on #E67E22 is 2.85:1 and fails AA. */
  --sb-on-primary:    #1A2B3C;

  /* Navy — navbar text, footer, logo, structural surfaces */
  --sb-navy:          #1E3A5F;
  --sb-navy-mid:      #2B5797;
  --sb-navy-lt:       #4A90D9;
  --sb-navy-pale:     #EEF4FB;

  /* Photo scrim. .72/.55 (the first draft) left white 17.6px subtitle text at 4.13:1
     worst-case against the hero photo, under the 4.5:1 AA floor for normal text;
     .78/.62 measures 4.88:1 worst-case. See scripts/optimize_images.py for the crops. */
  --sb-scrim: linear-gradient(rgba(30,58,95,.78), rgba(30,58,95,.62));

  /* Backgrounds — warm off-white page ground; cards and sections stay white */
  --sb-bg:            #FAF7F2;
  --sb-bg-soft:       #F7F9FC;

  /* Text */
  --sb-text:          #1A2B3C;
  --sb-text-mid:      #3D5A80;
  --sb-text-muted:    #6B7280;

  /* Borders & shadows */
  --sb-border:        #E2E8F0;
  --sb-shadow-sm:     0 1px 3px rgba(30,58,95,0.08);
  --sb-shadow-md:     0 4px 16px rgba(30,58,95,0.10);
  --sb-radius:        12px;
  --sb-radius-sm:     8px;
  --sb-radius-pill:   999px;

  /* Status colours — semantic only. Green is reserved for "open now". */
  --sb-open:          #1B7A46;
  --sb-open-bg:       #E6F4EC;

  /* Tabler primary override (used by dashboard & admin layouts) */
  --tblr-primary:     #E67E22;
  --tblr-primary-rgb: 230, 126, 34;

  /* Legacy aliases for auth pages & chat widget */
  --sb-dark:          #1E3A5F;
  --sb-light:         #F7F9FC;
}

/* ── Base typography ──────────────────────────── */
body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--sb-text);
  background-color: var(--sb-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  color: var(--sb-text);
}

main {
  color: var(--sb-text);
  background-color: var(--sb-bg);
}

a { color: var(--sb-navy); }
a:hover { color: var(--sb-navy-mid); }


/* ══════════════════════════════════════════════════
   NAVBAR — white with navy accents
   ══════════════════════════════════════════════════ */
.sb-navbar {
  background-color: #FFFFFF !important;
  border-bottom: 1px solid var(--sb-border);
  padding: 0.75rem 0;
  box-shadow: var(--sb-shadow-sm);
}

.sb-navbar .navbar-brand {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--sb-navy) !important;
  letter-spacing: -0.5px;
}

/* Wordmark: "Food" inherits whatever colour surrounds it, "Radar" takes the accent.
   The default is the navy-ground case — auth navbar, footer, and the dashboard and
   admin sidebars — where --sb-primary measures 4.0:1. */
.sb-wordmark span {
  color: var(--sb-primary);
}

/* The one exception: over the white navbar --sb-primary is 2.87:1, under the 3:1 floor
   even for 24px/800 large text. --sb-primary-dk is 4.2:1 and still unmistakably the
   brand orange. */
.sb-navbar .sb-wordmark span {
  color: var(--sb-primary-dk) !important;
}

/* The radar mark ships as its own file rather than a CSS background so it prints and
   survives a forced-colours mode; it is decorative, and the wordmark carries the name. */
.sb-brand-mark {
  flex: 0 0 auto;
  display: block;
}

.sb-tagline {
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.sb-navbar .nav-link {
  color: var(--sb-text) !important;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.5rem 0.85rem !important;
  border-radius: var(--sb-radius-sm);
  transition: background 0.15s, color 0.15s;
}

.sb-navbar .nav-link:hover {
  color: var(--sb-navy) !important;
  background-color: var(--sb-navy-pale);
}

.sb-navbar .navbar-toggler {
  color: var(--sb-navy) !important;
  border-color: var(--sb-border) !important;
}

/* Sign In button — outlined navy */
.btn-signin {
  border: 1.5px solid var(--sb-navy);
  color: var(--sb-navy);
  background: transparent;
  border-radius: var(--sb-radius-pill);
  padding: 0.4rem 1.1rem;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.15s;
}

.btn-signin:hover {
  background: var(--sb-navy);
  color: white;
}

/* Register button — solid orange */
.btn-register {
  background: var(--sb-primary);
  color: var(--sb-on-primary);
  border: none;
  border-radius: var(--sb-radius-pill);
  padding: 0.4rem 1.2rem;
  font-weight: 600;
  font-size: 0.9rem;
  transition: background 0.15s;
}

.btn-register:hover {
  background: var(--sb-primary-dk);
  color: var(--sb-on-primary);
}

/* Dashboard / Admin buttons in navbar (logged in) */
.sb-navbar .btn-outline-light {
  border-color: var(--sb-navy) !important;
  color: var(--sb-navy) !important;
  border-radius: var(--sb-radius-pill);
  font-size: 0.85rem;
  font-weight: 600;
}
.sb-navbar .btn-outline-light:hover {
  background: var(--sb-navy) !important;
  color: white !important;
}

.sb-navbar .dropdown-menu { min-width: 160px; }


/* ══════════════════════════════════════════════════
   HERO — warm off-white
   ══════════════════════════════════════════════════ */
/* Photo hero. The scrim is the first background layer so it always sits over the
   image. background-color paints the navy before the photo arrives, so the white text
   is never briefly white-on-white. The decorative blobs are gone: they were tuned for
   the old pale panel and only muddied a photograph. */
.sb-hero {
  background-color: var(--sb-navy);
  background-image: var(--sb-scrim), url("../images/hero/hero-market-1200.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 5rem 0 4rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Second declaration: browsers that understand image-set take the WebP, the rest keep
   the JPEG above. No @supports needed — an unparsed declaration is simply dropped. */
.sb-hero {
  background-image: var(--sb-scrim), image-set(
    url("../images/hero/hero-market-1200.webp") type("image/webp"),
    url("../images/hero/hero-market-1200.jpg") type("image/jpeg"));
}

@media (max-width: 800px) {
  .sb-hero { background-image: var(--sb-scrim), url("../images/hero/hero-market-800.jpg"); }
  .sb-hero {
    background-image: var(--sb-scrim), image-set(
      url("../images/hero/hero-market-800.webp") type("image/webp"),
      url("../images/hero/hero-market-800.jpg") type("image/jpeg"));
  }
}

@media (min-width: 1401px) {
  .sb-hero { background-image: var(--sb-scrim), url("../images/hero/hero-market-1920.jpg"); }
  .sb-hero {
    background-image: var(--sb-scrim), image-set(
      url("../images/hero/hero-market-1920.webp") type("image/webp"),
      url("../images/hero/hero-market-1920.jpg") type("image/jpeg"));
  }
}

.sb-hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -1px;
}

.sb-hero p.lead {
  font-size: 1.1rem;
  color: #fff;
  font-weight: 400;
}

/* Hero search bar — unified pill */
.hero-search-form {
  max-width: 640px;
  margin: 2rem auto 0;
}

.hero-search-bar {
  display: flex;
  align-items: center;
  background: white;
  border-radius: var(--sb-radius-pill);
  /* Deeper than --sb-shadow-md: that was tuned for a pale panel and vanished on the photo. */
  box-shadow: 0 10px 30px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.18);
  padding: 0.35rem 0.4rem 0.35rem 1.1rem;
  gap: 0;
}

.hero-search-icon {
  color: var(--sb-text-muted);
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-right: 0.5rem;
}

.hero-search-bar input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 0.95rem;
  color: var(--sb-text);
  flex: 1;
  min-width: 0;
  padding: 0.45rem 0;
}

.hero-search-bar input::placeholder { color: var(--sb-text-muted); }

.hero-search-divider {
  width: 1px;
  height: 24px;
  background: var(--sb-border);
  flex-shrink: 0;
  margin: 0 0.6rem;
}

.hero-search-bar select {
  border: none;
  background: transparent;
  outline: none;
  font-size: 0.9rem;
  color: var(--sb-text-mid);
  cursor: pointer;
  padding: 0.45rem 0;
  max-width: 150px;
  -webkit-appearance: none;
  appearance: none;
}

.hero-search-btn {
  background: var(--sb-primary);
  color: var(--sb-on-primary);
  border: none;
  border-radius: var(--sb-radius-pill);
  padding: 0.55rem 1.4rem;
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}

.hero-search-btn:hover { background: var(--sb-primary-dk); }

@media (max-width: 576px) {
  .hero-search-bar {
    flex-wrap: wrap;
    border-radius: var(--sb-radius);
    padding: 0.75rem;
    gap: 0.5rem;
  }
  /* flex-basis, not width: the base rule sets `flex: 1` whose 0% basis wins over
     width:100%, so the input stayed on the select's row at ~150px instead of wrapping. */
  /* Row 1 is the pin + input, row 2 the cuisine select, row 3 the button. Forcing the
     select onto its own line is what makes the input full width; the base rule's
     `flex: 1` has a 0% basis that beats width:100%, which is why the input used to sit
     squeezed to ~150px beside the select at 390px. */
  .hero-search-bar input { flex: 1 1 auto; width: auto; }
  .hero-search-divider { display: none; }
  .hero-search-bar select { flex: 1 0 100%; max-width: 100%; }
  .hero-search-btn { width: 100%; padding: 0.65rem; }
}

/* Open Now button */
.btn-open-now {
  background: var(--sb-open-bg);
  color: var(--sb-open);
  border: 1.5px solid var(--sb-open);
  border-radius: var(--sb-radius-pill);
  padding: 0.35rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  transition: all 0.15s;
}

.btn-open-now:hover {
  background: var(--sb-open);
  color: white;
}

/* City quick-link pills */
.sb-city-pill {
  display: inline-block;
  background: white;
  border: 1.5px solid var(--sb-border);
  color: var(--sb-text);
  border-radius: var(--sb-radius-pill);
  padding: 0.3rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s;
  cursor: pointer;
}

.sb-city-pill:hover {
  background: var(--sb-navy);
  border-color: var(--sb-navy);
  color: white;
}


/* ══════════════════════════════════════════════════
   FOOD TRUCK CARDS
   ══════════════════════════════════════════════════ */
.sb-card {
  background: white;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius);
  overflow: hidden;
  box-shadow: var(--sb-shadow-sm);
  transition: box-shadow 0.2s, transform 0.2s;
  text-decoration: none;
  color: inherit;
  display: block;
}

.sb-card:hover {
  box-shadow: var(--sb-shadow-md);
  transform: translateY(-2px);
  color: inherit;
}

.sb-card .card-img-top {
  height: 180px;
  object-fit: cover;
  background: var(--sb-bg-soft);
}

.sb-card .card-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--sb-text);
  margin-bottom: 0.15rem;
}

.sb-card .card-locality {
  font-size: 0.82rem;
  color: var(--sb-text-muted);
}

/* Truck detail page hero */
.detail-hero {
  background: var(--sb-navy);
}

.detail-hero-title {
  color: white !important;
}

/* Legacy .truck-card alias */
.truck-card {
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius);
  overflow: hidden;
  box-shadow: var(--sb-shadow-sm);
  transition: box-shadow 0.2s, transform 0.2s;
}
.truck-card:hover {
  box-shadow: var(--sb-shadow-md);
  transform: translateY(-2px);
}
.truck-card .card-img-top {
  height: 180px;
  object-fit: cover;
  background: var(--sb-bg-soft);
}

/* Three badge families, deliberately distinct so a card scans in one pass:
   status = green pill with a dot, type = outline pill, cuisine = neutral grey fill. */

/* Status — "open now" and nothing else. The dot carries the meaning without
   relying on colour alone (WCAG 1.4.1). */
.badge-open {
  background: var(--sb-open-bg) !important;
  color: var(--sb-open) !important;
  border: 1px solid currentColor;
  border-radius: var(--sb-radius-pill);
  padding: 0.2rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-block;
  white-space: nowrap;
}

.badge-open::before {
  content: "";
  display: inline-block;
  width: .5em;
  height: .5em;
  border-radius: 50%;
  background: currentColor;
  margin-right: .35em;
}

/* Vendor type — outline pill, with the type glyph as a CSS mask so it takes the pill's
   own colour. An <img> could not: currentColor inside an SVG loaded that way resolves
   against the SVG document, so the glyph would always paint black. */
.badge-type-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  margin-right: 0.3em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.badge-type-icon--food-truck {
  -webkit-mask-image: url("../images/placeholders/icon-food-truck.svg");
  mask-image: url("../images/placeholders/icon-food-truck.svg");
}
.badge-type-icon--food-trailer {
  -webkit-mask-image: url("../images/placeholders/icon-food-trailer.svg");
  mask-image: url("../images/placeholders/icon-food-trailer.svg");
}
.badge-type-icon--food-stand {
  -webkit-mask-image: url("../images/placeholders/icon-food-stand.svg");
  mask-image: url("../images/placeholders/icon-food-stand.svg");
}
.badge-type-icon--pop-up {
  -webkit-mask-image: url("../images/placeholders/icon-pop-up.svg");
  mask-image: url("../images/placeholders/icon-pop-up.svg");
}
.badge-type-icon--market-stall {
  -webkit-mask-image: url("../images/placeholders/icon-market-stall.svg");
  mask-image: url("../images/placeholders/icon-market-stall.svg");
}

.badge-type {
  background: #fff;
  color: var(--sb-text-mid);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-pill);
  padding: 0.2rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 500;
  display: inline-block;
  white-space: nowrap;
}

/* Cuisine — neutral fill, so it never competes with the status pill */
.badge-cuisine {
  background: #F1F5F9 !important;
  color: #334155 !important;
  border-radius: var(--sb-radius-pill);
  padding: 0.2rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 500;
  display: inline-block;
  white-space: nowrap;
}


/* ══════════════════════════════════════════════════
   HOMEPAGE SECTIONS
   ══════════════════════════════════════════════════ */
/* Featured Trucks section */
.sb-section {
  padding: 4rem 0;
  background: white;
  color: var(--sb-text);
}

.sb-section-title,
.section-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--sb-text);
  margin-bottom: 0.4rem;
}

.sb-section-sub {
  color: var(--sb-text-muted);
  font-size: 0.95rem;
  margin-bottom: 2rem;
}

/* Browse by Cuisine — light navy-tinted background */
.sb-cuisine-section {
  background: var(--sb-navy-pale);
  padding: 4rem 0;
  color: var(--sb-text);
}

.sb-cuisine-tile {
  background: white;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius);
  padding: 1.25rem 0.75rem;
  text-align: center;
  text-decoration: none;
  color: var(--sb-text);
  font-weight: 600;
  font-size: 0.875rem;
  transition: all 0.15s;
  display: block;
  box-shadow: var(--sb-shadow-sm);
}

.sb-cuisine-tile:hover {
  background: var(--sb-navy);
  color: white;
  border-color: var(--sb-navy);
  transform: translateY(-2px);
  box-shadow: var(--sb-shadow-md);
}

/* Legacy .cuisine-tile alias */
.cuisine-tile {
  text-align: center;
  padding: 1.25rem .75rem;
  border-radius: var(--sb-radius);
  background: #fff;
  border: 1px solid var(--sb-border);
  box-shadow: var(--sb-shadow-sm);
  transition: all 0.15s;
}
.cuisine-tile:hover { transform: translateY(-2px); box-shadow: var(--sb-shadow-md); }
.cuisine-tile i { font-size: 1.75rem; color: var(--sb-primary); margin-bottom: .5rem; display: block; }

/* How It Works section */
.sb-hiw-section {
  background: white;
  padding: 4rem 0;
  color: var(--sb-text);
}

.sb-hiw-icon {
  width: 64px; height: 64px;
  background: var(--sb-navy-pale);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-size: 1.5rem;
  color: var(--sb-navy);
}

.sb-hiw-title {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--sb-text);
  margin-bottom: 0.4rem;
}

.sb-hiw-desc {
  font-size: 0.875rem;
  color: var(--sb-text-muted);
  line-height: 1.6;
}

/* Content sections — explicit colour reset */
main > section {
  color: var(--sb-text);
  background-color: white;
}


/* ══════════════════════════════════════════════════
   FOOTER — navy
   ══════════════════════════════════════════════════ */
.sb-footer {
  background: var(--sb-navy) !important;
  color: rgba(255,255,255,0.85) !important;
  padding: 3rem 0 1.5rem;
}

.sb-footer h6 {
  color: white !important;
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
}

.sb-footer h6 span { color: var(--sb-primary) !important; }

/* The wordmark wraps the whole name in a span of its own so the two halves can be
   coloured independently, and the rule above would paint both of them orange. Pin the
   wrapper back to the heading colour; the inner span keeps the accent. */
.sb-footer h6 .sb-wordmark { color: #fff !important; }

.sb-footer p {
  color: rgba(255,255,255,0.65);
  font-size: 0.875rem;
  line-height: 1.6;
}

.sb-footer a {
  color: rgba(255,255,255,0.65) !important;
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.15s;
}

.sb-footer a:hover { color: white !important; }

.sb-footer .footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 1.25rem;
  margin-top: 2rem;
  color: rgba(255,255,255,0.65);
}


/* ══════════════════════════════════════════════════
   SEARCH FILTER SIDEBAR
   ══════════════════════════════════════════════════ */
.sb-filter-panel {
  background: white;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius);
  padding: 1.25rem;
  box-shadow: var(--sb-shadow-sm);
}

.sb-filter-panel h6 {
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--sb-text-muted);
  margin-bottom: 0.75rem;
}

.sb-filter-panel .form-check-label {
  font-size: 0.875rem;
  color: var(--sb-text);
}

.sb-filter-panel .form-check-input:checked {
  background-color: var(--sb-navy);
  border-color: var(--sb-navy);
}


/* ══════════════════════════════════════════════════
   GENERAL BOOTSTRAP OVERRIDES
   ══════════════════════════════════════════════════ */
.btn-sb {
  background: var(--sb-primary);
  border: none;
  color: var(--sb-on-primary);
  font-weight: 600;
  padding: .5rem 1.25rem;
  border-radius: var(--sb-radius-pill);
  transition: background 0.15s;
}
.btn-sb:hover { background: var(--sb-primary-dk); color: var(--sb-on-primary); }

.btn-sb-outline {
  border: 2px solid var(--sb-primary);
  color: var(--sb-primary);
  background: transparent;
  font-weight: 600;
  padding: .45rem 1.2rem;
  border-radius: var(--sb-radius-pill);
}
.btn-sb-outline:hover { background: var(--sb-primary); color: var(--sb-on-primary); }

/* Override Bootstrap primary colour */
.btn-primary {
  background-color: var(--sb-primary) !important;
  border-color: var(--sb-primary) !important;
  color: var(--sb-on-primary) !important;
  border-radius: var(--sb-radius-pill);
  font-weight: 600;
}
.btn-primary:hover {
  background-color: var(--sb-primary-dk) !important;
  border-color: var(--sb-primary-dk) !important;
  color: var(--sb-on-primary) !important;
}

/* Form controls */
.form-control, .form-select {
  border-color: var(--sb-border);
  border-radius: var(--sb-radius-sm);
  color: var(--sb-text);
  font-size: 0.9rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--sb-navy);
  box-shadow: 0 0 0 3px rgba(30,58,95,0.10);
}

/* Pagination */
.page-link {
  color: var(--sb-navy);
  border-radius: var(--sb-radius-sm) !important;
}
.page-item.active .page-link {
  background-color: var(--sb-navy);
  border-color: var(--sb-navy);
}

/* Form checks */
.form-check-input:checked {
  background-color: var(--sb-navy);
  border-color: var(--sb-navy);
}


/* ══════════════════════════════════════════════════
   AUTH PAGES (unchanged structure)
   ══════════════════════════════════════════════════ */
/* The auth shell has no .sb-navbar; without these the wordmark inherits Bootstrap's
   near-black .navbar-brand colour and disappears against the navy background. */
.auth-navbar .navbar-brand {
  color: #fff;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.5px;
}

.auth-page {
  background: var(--sb-navy);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.auth-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.auth-card {
  width: 100%;
  max-width: 460px;
}
.auth-card .card { border: none; box-shadow: 0 4px 24px rgba(0,0,0,.08); }
.auth-card .card-body { padding: 2rem; }
.auth-card h4 { font-weight: 700; color: var(--sb-text); }
.auth-card h4 span { color: var(--sb-primary); }


/* ══════════════════════════════════════════════════
   CHAT WIDGET
   ══════════════════════════════════════════════════ */
.sb-chat-toggle {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  z-index: 1050;
  font-size: 1.4rem;
}

/* 380 + 24 overflowed a 390px viewport and, being fixed, could not be scrolled to.
   min() keeps the drawer inside any viewport; below 576px it becomes a bottom sheet. */
.sb-chat-drawer {
  /* Not Bootstrap's .d-flex: that is !important and would override the inline display:none
     Alpine's x-show sets, leaving the drawer permanently open. A plain rule loses to the
     inline style, which is exactly what x-show needs. */
  display: flex;
  flex-direction: column;
  position: fixed;
  right: 12px;
  bottom: 84px;
  width: min(380px, calc(100vw - 24px));
  max-height: min(520px, 80vh);
  border-radius: 1rem;
  z-index: 1049;
}

@media (max-width: 576px) {
  .sb-chat-drawer {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 75vh;
    border-radius: 1rem 1rem 0 0;
  }
  /* The sheet reaches the bottom edge, so the floating toggle would sit on top of the
     message input. At this size the header × is the close affordance. */
  .sb-chat-toggle-open { display: none; }
}


/* ══════════════════════════════════════════════════
   LEGAL / CONTENT PAGES
   ══════════════════════════════════════════════════ */
.sb-legal {
  max-width: 760px;
}

.sb-legal p, .sb-legal li { line-height: 1.7; }
.sb-legal li { margin-bottom: 0.5rem; }


/* ══════════════════════════════════════════════════
   VENDOR CTA BAND
   ══════════════════════════════════════════════════ */
/* Overrides the `main > section` white reset by class specificity.

   Unlike the hero, the photo here is a real <img> rather than a CSS background: a
   background-image cannot carry loading="lazy", and this band is below the fold. The
   negative z-indexes put the photo and its scrim behind the content without needing a
   z-index on every child; `isolation` keeps that local to the section. */
.sb-vendor-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--sb-navy);
  padding: 3.5rem 0;
  text-align: center;
}

.sb-vendor-cta-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.sb-vendor-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sb-scrim);
  z-index: -1;
}

.sb-vendor-cta-title {
  color: #fff;
  font-size: 1.75rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.sb-vendor-cta-body {
  /* Full white, not 85%: the band is a photo now, not flat navy. */
  color: #fff;
  font-size: 1rem;
  max-width: 640px;
  margin: 0 auto 1.5rem;
}


/* ══════════════════════════════════════════════════
   VENDOR-TYPE PLACEHOLDER ILLUSTRATIONS
   ══════════════════════════════════════════════════ */
/* Used in place of a cover photo. object-fit keeps the drawing from stretching when the
   card slot is a different aspect ratio to the 400x260 artboard. */
.sb-placeholder-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--sb-bg);
}

/* ══════════════════════════════════════════════════
   CUISINE GLYPHS
   ══════════════════════════════════════════════════ */
/* Original set (see wwwroot/images/cuisines). Applied as CSS masks so each glyph takes
   the tile's own colour and can invert on hover, which an <img> could not do. */
.sb-cuisine-icon {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0 auto 0.5rem;
  background-color: var(--sb-primary);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: background-color 0.15s;
}

.sb-cuisine-tile:hover .sb-cuisine-icon { background-color: #fff; }

.sb-cuisine-icon--burger {
  -webkit-mask-image: url("../images/cuisines/burger.svg");
  mask-image: url("../images/cuisines/burger.svg");
}
.sb-cuisine-icon--cake {
  -webkit-mask-image: url("../images/cuisines/cake.svg");
  mask-image: url("../images/cuisines/cake.svg");
}
.sb-cuisine-icon--cheese {
  -webkit-mask-image: url("../images/cuisines/cheese.svg");
  mask-image: url("../images/cuisines/cheese.svg");
}
.sb-cuisine-icon--coffee {
  -webkit-mask-image: url("../images/cuisines/coffee.svg");
  mask-image: url("../images/cuisines/coffee.svg");
}
.sb-cuisine-icon--corn {
  -webkit-mask-image: url("../images/cuisines/corn.svg");
  mask-image: url("../images/cuisines/corn.svg");
}
.sb-cuisine-icon--crepe {
  -webkit-mask-image: url("../images/cuisines/crepe.svg");
  mask-image: url("../images/cuisines/crepe.svg");
}
.sb-cuisine-icon--cup-straw {
  -webkit-mask-image: url("../images/cuisines/cup-straw.svg");
  mask-image: url("../images/cuisines/cup-straw.svg");
}
.sb-cuisine-icon--dumpling {
  -webkit-mask-image: url("../images/cuisines/dumpling.svg");
  mask-image: url("../images/cuisines/dumpling.svg");
}
.sb-cuisine-icon--fish {
  -webkit-mask-image: url("../images/cuisines/fish.svg");
  mask-image: url("../images/cuisines/fish.svg");
}
.sb-cuisine-icon--flame {
  -webkit-mask-image: url("../images/cuisines/flame.svg");
  mask-image: url("../images/cuisines/flame.svg");
}
.sb-cuisine-icon--leaf {
  -webkit-mask-image: url("../images/cuisines/leaf.svg");
  mask-image: url("../images/cuisines/leaf.svg");
}
.sb-cuisine-icon--noodle-bowl {
  -webkit-mask-image: url("../images/cuisines/noodle-bowl.svg");
  mask-image: url("../images/cuisines/noodle-bowl.svg");
}
.sb-cuisine-icon--pizza {
  -webkit-mask-image: url("../images/cuisines/pizza.svg");
  mask-image: url("../images/cuisines/pizza.svg");
}
.sb-cuisine-icon--plate {
  -webkit-mask-image: url("../images/cuisines/plate.svg");
  mask-image: url("../images/cuisines/plate.svg");
}
.sb-cuisine-icon--platter {
  -webkit-mask-image: url("../images/cuisines/platter.svg");
  mask-image: url("../images/cuisines/platter.svg");
}
.sb-cuisine-icon--pot {
  -webkit-mask-image: url("../images/cuisines/pot.svg");
  mask-image: url("../images/cuisines/pot.svg");
}
.sb-cuisine-icon--sandwich {
  -webkit-mask-image: url("../images/cuisines/sandwich.svg");
  mask-image: url("../images/cuisines/sandwich.svg");
}
.sb-cuisine-icon--sushi {
  -webkit-mask-image: url("../images/cuisines/sushi.svg");
  mask-image: url("../images/cuisines/sushi.svg");
}
.sb-cuisine-icon--taco {
  -webkit-mask-image: url("../images/cuisines/taco.svg");
  mask-image: url("../images/cuisines/taco.svg");
}
.sb-cuisine-icon--wrap {
  -webkit-mask-image: url("../images/cuisines/wrap.svg");
  mask-image: url("../images/cuisines/wrap.svg");
}