/* ---- hero with search ---- */
    .hero {
      padding:15rem 6vw 13rem;
      background:
        linear-gradient(180deg, rgba(10, 12, 10, 0.62) 0%, rgba(10, 12, 10, 0.42) 55%, rgba(10, 12, 10, 0.25) 100%),
        url('/public/images/hero.jpg')
          center / cover no-repeat;
      color: #fff;
    }
    .hero h1 {
      font-size: clamp(2.2rem, 4.2vw, 3.4rem);
      letter-spacing: -0.03em;
      margin: 0 0 1.75rem;
      max-width: 720px;
      color: #fff;
      text-shadow: 0 2px 18px rgba(0, 0, 0, 0.25);
    }
    .search-card {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.6rem;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 0.6rem;
      max-width: 760px;
      box-shadow: 0 12px 30px -20px rgba(0,0,0,0.25);
      position: relative;
    }
    .search-field {
      flex: 1 1 220px;
      display: flex;
      align-items: center;
      gap: 0.6rem;
      padding: 0.6rem 0.9rem;
    }
    .search-field .pin { font-size: 1.1rem; }
    .search-field input {
      border: none;
      outline: none;
      font-size: 0.98rem;
      width: 100%;
      font-family: inherit;
      background: transparent;
    }

    /* ---- delivery / pickup toggle ---- */
    .mode-toggle {
      display: inline-flex;
      background:var(--panel);
      border: 1px solid #ccc;
      border-radius: 999px;
      padding: 0.3rem;
      gap: 0.25rem;
      box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.4);
    }
    /* Only the homepage hero's own toggle (floating above the H1) needs
       space below it -- scoped here instead of on the base .mode-toggle,
       which the results page reuses *inside* its search bar. A
       bottom-only margin there, with no top margin to match, made
       align-items: center shift the pill visibly upward within the row
       instead of centering it against the address/search/button fields. */
    .hero .mode-toggle {
      margin-bottom: 1.5rem;
    }
    .mode-toggle button {
      border: none;
      background: none;
      padding: 0.55rem 1.3rem;
      border-radius: 999px;
      font-size: 0.9rem;
      font-weight: 700;
      color: var(--muted);
    }
    .mode-toggle button.active {
      background: #e26b31;
      color: #fff;
      box-shadow: 0 4px 12px -6px rgba(0,0,0,0.25);
    }

    /* ---- address picker dropdown ---- */
    .address-wrap { position: relative; flex: 1 1; display: flex; align-items: center; }
    .address-dropdown {
      display: none;
      position: absolute;
      top: calc(100% + 0.6rem);
      left: 0;
      width: min(420px, 90vw);
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 14px;
      box-shadow: 0 18px 40px -18px rgba(0,0,0,0.35);
      padding: 0.5rem;
      z-index: 20;
    }
    .address-dropdown.open { display: block; }
    .addr-option {
      display: flex;
      align-items: flex-start;
      gap: 0.7rem;
      width: 100%;
      text-align: left;
      background: none;
      border: none;
      padding: 0.65rem 0.6rem;
      border-radius: 9px;
      font-size: 0.92rem;
    }
    .addr-option:hover { background: var(--panel); }
    .addr-option .icon { font-size: 1.1rem; margin-top: 0.1rem; }
    .addr-option .main-line { font-weight: 600; color: var(--ink); }
    .addr-option .sub-line { color: var(--muted); font-size: 0.8rem; }
    .addr-option.locate .main-line { color: var(--accent-dark); }
    .addr-group-label {
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      color: var(--muted);
      padding: 0.6rem 0.6rem 0.3rem;
    }
    .addr-divider { border: none; border-top: 1px solid var(--line); margin: 0.3rem 0; }
    .addr-empty { padding: 0.7rem 0.6rem; color: var(--muted); font-size: 0.85rem; }

    /* ---- category chips (results.ejs only -- the homepage dropped its
       own cuisine-chips/"new near you" section) ---- */
    .chip-row {
      display: flex;
      gap: 0.7rem;
      overflow-x: auto;
      padding: 2rem 6vw 0.5rem;
      scrollbar-width: none;
    }
    .chip-row::-webkit-scrollbar { display: none; }
    .chip {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 0.55rem 1.1rem;
      font-size: 0.88rem;
      font-weight: 600;
    }
    .chip:hover { border-color: var(--ink); }

    /* ---- sections ---- */
    section { padding: 2.5rem 6vw; }
    .section-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      margin-bottom: 1.3rem;
    }
    .section-head h2 { font-size: 1.4rem; margin: 0; letter-spacing: -0.02em; }
    .section-head a { font-size: 0.88rem; font-weight: 600; color: var(--accent-dark); }

    /* Results page only: the result count sits under the heading instead
       of beside it (the default .section-head row layout, still used
       elsewhere e.g. the homepage's "see all" link). */
    .section-head-stacked { flex-direction: column; align-items: flex-start; gap: 0.3rem; }

    /* ---- "how to order" explainer (plain white band, between the hero
       and the cuisine chips/"popular near you" results) ---- */
    .how-it-works {
      background: #fafafa;
      color: var(--ink);
      padding: 3.5rem 6vw;
      text-align: center;
    }
    .how-it-works-head { max-width: 640px; margin: 0 auto 3rem; }
    .how-it-works-eyebrow {
      margin: 0 0 0.4rem;
      color: var(--muted);
      font-size: 1.1rem;
    }
    .how-it-works h2 {
      margin: 0;
      color: #e26b31;
      font-size: clamp(1.8rem, 3.6vw, 2.6rem);
      font-weight: 800;
      letter-spacing: -0.02em;
    }
    .how-it-works-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2.5rem;
      max-width: 1100px;
      margin: 0 auto;
    }
    .how-it-works-icon {
      width: 56px;
      height: 56px;
      margin: 0 auto 1.1rem;
      color: #e26b31;
    }
    .how-it-works-step h3 {
      margin: 0 0 0.6rem;
      font-size: 1.15rem;
      color: var(--ink);
    }
    .how-it-works-step p {
      margin: 0;
      color: var(--muted);
      font-size: 0.95rem;
      line-height: 1.5;
    }
    @media (max-width: 720px) {
      .how-it-works-grid { grid-template-columns: 1fr; gap: 2.25rem; }
    }

    .card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
      gap: 1.25rem;
    }
    .rcard {
      display: block;
      color: inherit;
      background: #fff;
      text-decoration: none;
      border: 1px solid var(--line);
      border-radius: 14px;
      overflow: hidden;
      transition: box-shadow 0.15s ease, transform 0.15s ease;
    }
    .rcard:hover { box-shadow: 0 14px 28px -18px rgba(0,0,0,0.3); transform: translateY(-2px); }
    .rcard .thumb {
      height: 215px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 4.2rem;
    }
    .rcard .body { padding: 0.9rem 1rem 1.1rem; }
    .rcard .name { font-weight: 700; font-size: 0.98rem; margin-bottom: 0.2rem; }
    .rcard .meta { color: var(--muted); font-size: 0.82rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }
    .rcard .badge {
      display: inline-block;
      background: #eafff3;
      color: var(--accent-dark);
      font-size: 0.72rem;
      font-weight: 700;
      padding: 0.15rem 0.45rem;
      border-radius: 5px;
      margin-bottom: 0.4rem;
    }
    /* A card for a restaurant that matches the search but is outside its
       opening hours right now (see the "currently closed" section on
       results.ejs) -- dimmed rather than hidden, so it still reads as a
       real, findable result. */
    .rcard-closed { opacity: 0.7; }
    .rcard-closed .thumb { filter: grayscale(0.5); }
    .rcard .closed-tag {
      display: inline-block;
      background: #fdecea;
      color: #c0392b;
      font-size: 0.68rem;
      font-weight: 700;
      padding: 0.1rem 0.4rem;
      border-radius: 5px;
      margin-left: 0;
      vertical-align: middle;
      white-space: nowrap;
    }
    /* Called out in the card's meta row, next to (or instead of) the
       normal delivery-fee text, when a zone's fee is exactly 0. */
    .rcard .free-delivery {
      display: inline-block;
      background: #eafff3;
      color: var(--accent-dark);
      font-weight: 700;
      padding: 0.1rem 0.4rem;
      border-radius: 5px;
      white-space: nowrap;
    }

    .thumb.t1 { background: #ffe8d6; }
    .thumb.t2 { background: #e0f7ea; }
    .thumb.t3 { background: #fde2e4; }
    .thumb.t4 { background: #e2ecff; }
    .thumb.t5 { background: #fff3d6; }
    .thumb.t6 { background: #eee3ff; }
    .thumb.t7 { background: #d9f5f0; }
    .thumb.t8 { background: #ffe0ef; }

    /* ---- restaurant hero banner (same big-photo treatment as .hero
       above, used for the "free for restaurants" pitch) ---- */
    .restaurant-hero {
      margin: 1rem 6vw 3rem;
      border-radius: 18px;
      overflow: hidden;
      min-height: 380px;
      display: flex;
      align-items: center;
      background:
        linear-gradient(90deg, rgba(10, 12, 10, 0.82) 0%, rgba(10, 12, 10, 0.55) 48%, rgba(10, 12, 10, 0.2) 100%),
        url('/public/images/owner.jpg')
          center / cover no-repeat;
      color: #fff;
      padding: 3rem 2.5rem;
    }
    .restaurant-hero-inner { max-width: 520px; }
    .restaurant-hero h2 {
      margin: 0 0 0.6rem;
      font-size: clamp(1.8rem, 3.2vw, 2.6rem);
      letter-spacing: -0.02em;
      color: #fff;
      text-shadow: 0 2px 18px rgba(0, 0, 0, 0.3);
    }
    .restaurant-hero p { margin: 0 0 1.3rem; color: #e4e4e4; font-size: 0.98rem; }
    .restaurant-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
    .restaurant-hero .btn { background: #e26b31; color: #fff; padding: 0.8rem 1.6rem; border-radius: 9px; }
    .restaurant-hero .btn:hover { background: #c95a24; }
    .restaurant-hero .btn-secondary {
      background: transparent;
      color: #fff;
      border: 1.5px solid rgba(255, 255, 255, 0.75);
    }
    .restaurant-hero .btn-secondary:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }

    /* footer moved to public/css/main.css -- it's shared by every page via
       public/layouts/layout_main.ejs now, not just the ones that happen to
       load home.css (conditions.ejs and courier/register.ejs never did,
       so their old inline <footer> markup rendered completely unstyled). */

    @media (max-width: 720px) {
      header { flex-wrap: wrap; }
      nav.top-links { display: none; }
      section { padding: 2rem 5vw; }
    }

    /* ---- real search results (chips as links, thumb photos, empty state) ---- */
    .chip { color: var(--ink); text-decoration: none; }
    .chip.active { border-color: var(--accent); background: #f3fcf6; color: var(--accent-dark); }

    .rcard .thumb img { width: 100%; height: 100%; object-fit: cover; }

    .section-head .result-count { font-size: 0.88rem; font-weight: 600; color: var(--muted); }

    .no-results {
      color: var(--muted);
      background: var(--panel);
      border-radius: 12px;
      padding: 1.5rem;
      text-align: center;
      font-size: 0.95rem;
    }

    /* ---- results page toolbar ---- */
    .results-toolbar {
      padding: 2.5rem 6vw 0.5rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    .back-link {
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--muted);
      text-decoration: none;
      align-self: flex-start;
    }
    .back-link:hover { color: var(--ink); }
    .search-card.compact {
      max-width: 900px;
      width: 100%;
      margin: 0 auto;
    }
    .search-error {
      /* Sits ABOVE the search form now (between the heading/back-link and
         the form) so the address dropdown -- which is absolutely
         positioned and can open at the same time this shows -- never
         covers it. */
      margin: 0 auto 0.6rem;
      max-width: 900px;
      color: #c0392b;
      background: #fdecea;
      border: 1px solid #f5c6c2;
      border-radius: 10px;
      padding: 0.6rem 1rem;
      font-size: 0.88rem;
      text-align: center;
    }

    @media (max-width: 720px) {
      .search-card.compact {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
      }
      .search-card.compact .mode-toggle {
        align-self: center;
        margin-bottom: 0.6rem;
      }
      .search-card.compact .search-field {
        /* the base .search-field's "flex: 1 1 220px" sets a 220px basis
           on the main axis -- fine when that axis is horizontal, but
           once the card stacks (flex-direction: column) the main axis
           is vertical, so that same 220px would inflate each field to a
           220px-tall box. Reset it back to its natural content height. */
        flex: 0 0 auto;
        width: 100%;
      }
    }

/* ---- country picker (gates the homepage until a country is chosen) ---- */
.country-hero { padding: 4rem 6vw 2.5rem; text-align: center; }
.country-hero h1 { margin: 0 auto 0.6rem; max-width: 600px; }
.country-hero-sub {
  color: #fff;
  opacity: 0.85;
  max-width: 480px;
  margin: 0 auto;
  font-size: 1rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
.country-picker { padding: 0 6vw 4rem; }
.country-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  max-width: 760px;
  margin: -2.5rem auto 0;
}
.country-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.75rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 12px 30px -20px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.country-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -18px rgba(0, 0, 0, 0.3);
  border-color: var(--ink);
}
.country-flag { font-size: 2.4rem; line-height: 1; }
.country-name { font-weight: 700; font-size: 1rem; }

/* ---- "house number required" popup (address picked has a street but no
   number — we can't dispatch a delivery without one) ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 20, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 60;
}
.modal-overlay[hidden] { display: none; }
.modal-box {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 1.75rem;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.4);
}
.modal-box h3 { margin: 0 0 0.6rem; font-size: 1.1rem; }
.housenumber-modal-text { margin: 0 0 1rem; color: var(--muted); font-size: 0.92rem; }
.housenumber-modal-input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 1rem;
  margin-bottom: 1.25rem;
}
.housenumber-modal-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.housenumber-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
}

/* ---- courier hero (bootstrap-style split hero: big bold heading, pill
   button, organic "blob"-cropped photo on a plain light background —
   reference: bootstrapbrain.com's "Art of Design" hero component) ---- */
.courier-hero {
  padding: 4rem 6vw;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 9rem;
}
.courier-hero-copy { max-width: 460px; }
.courier-hero h3 {
  margin: 0 0 0.9rem;
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.courier-hero p { margin: 0 0 1.6rem; color: var(--muted); font-size: 1rem; }
.courier-hero .btn {
  background: #e26b31;
  color: #fff;
  padding: 0.8rem 1.6rem;
  border-radius: 9px;
}
.courier-hero .btn:hover { background: #c95a24; }
.courier-hero-photo {
  width: 340px;
  height: 340px;
  flex-shrink: 0;
  /* the organic "blob" shape — an irregular border-radius instead of a
     plain circle or rounded rect */
  border-radius: 63% 37% 54% 46% / 43% 65% 35% 57%;
  overflow: hidden;
  background: var(--panel);
}
.courier-hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 720px) {
  .courier-hero { padding: 2.5rem 5vw 3rem; flex-direction: column; text-align: center; gap: 2rem; }
  .courier-hero-copy { max-width: none; }
  .courier-hero-photo { width: 240px; height: 240px; margin: 0 auto; }
  .restaurant-hero { margin: 1rem 5vw 2.5rem; min-height: 320px; padding: 2.25rem 1.5rem; text-align: center; justify-content: center; }
  .restaurant-hero-inner { max-width: none; }
  .restaurant-hero-actions { justify-content: center; }
}