/* ════════════════════════════════════════════════════════════════════
   premium.css — v2.0.0 Premium Mobile UX Pass
   ────────────────────────────────────────────────────────────────────
   Single isolated stylesheet layered on top of main.css + fixes.css +
   discover.css. Scoped to the new components introduced in v2.0 —
   doesn't override existing classes unless explicitly noted. Desktop
   variants are gated under [data-viewport="desktop"].
   Loads LAST so cascade wins.
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   1. Refined Search/Pesquisa screen — list-style, reference-accurate
   ──────────────────────────────────────────────────────────────────── */

/* Light-on-cream backdrop that lets the white search bar pop */
.ds-search-wrap {
  padding: 8px 14px 6px;
  background: var(--bg);
}

/* Refined input: light-gray rounded pill with thin icon */
.ds-search {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  height: 44px;
  padding: 0 12px;
  box-shadow: none;
}
[data-theme="light"] .ds-search {
  background: #efeeeb;
  border-color: #efeeeb;
}
.ds-search:focus-within {
  background: #fff;
  border-color: rgba(0,0,0,0.14);
  box-shadow: 0 0 0 3px rgba(26,92,58,0.06);
}
[data-theme="dark"] .ds-search:focus-within {
  background: var(--surface-2);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.10);
}
.ds-search-icon {
  font-size: 1.05rem;
  color: var(--text-muted);
}
.ds-input {
  font-size: 0.95rem;
  font-weight: 500;
}
.ds-input::placeholder { color: var(--text-muted); opacity: 0.85; }

.ds-clear {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,0.18);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.ds-clear i { font-size: 0.7rem; }
[data-theme="dark"] .ds-clear { background: rgba(255,255,255,0.22); color: var(--bg); }

/* Reference-style scope pills row: capsule shape, dark active, light inactive */
.ds-chip-rail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 2px 8px;
  margin-bottom: 0;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border-subtle);
}
.ds-chip-rail::-webkit-scrollbar { display: none; }

.ds-chip {
  appearance: none;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--surface);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
[data-theme="light"] .ds-chip {
  background: #fff;
  border-color: rgba(0,0,0,0.10);
}
.ds-chip:active { transform: scale(0.97); }
.ds-chip i { font-size: 0.95rem; }

.ds-chip.is-active {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
[data-theme="dark"] .ds-chip.is-active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

.ds-chip-more {
  background: var(--surface);
  font-weight: 600;
}
.ds-chip-more.is-active {
  background: var(--primary);
  color: var(--bg);
  border-color: var(--primary);
}

/* Context row: smaller, less prominent — count text only */
.ds-context-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 2px 6px;
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 500;
}
.ds-ctx-count { font-weight: 600; color: var(--text-sub); }
.ds-ctx-applied { color: var(--text-muted); }

/* Results LIST instead of grid (mobile only; desktop keeps grid) */
.ds-results {
  display: block;
  padding: 0 0 calc(var(--nav-height, 64px) + var(--safe-bottom, 0px) + 24px);
}
.ds-results > .ds-card + .ds-card {
  border-top: 1px solid var(--border-subtle);
}

/* Reference-style horizontal list row */
.ds-card {
  display: grid;
  grid-template-columns: 96px 1fr 52px;
  gap: 12px;
  padding: 14px 16px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  position: relative;
  transition: background 0.12s ease;
}
.ds-card:hover { box-shadow: none; background: rgba(0,0,0,0.02); }
.ds-card:active { transform: none; background: var(--surface); }

.ds-card-media {
  width: 96px; height: 96px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
  flex-shrink: 0;
  position: relative;
}
.ds-card-media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.ds-card:hover .ds-card-media img { transform: none; }

/* Hide the gradient + iFood pill from media in list view (less visual noise) */
.ds-card-grad { display: none; }
.ds-card-media .ds-ifood-pill { display: none; }

/* The save heart moves out of the media and to the right column */
.ds-card-media .ds-save { display: none; }

/* Status badge becomes tiny dot in the body instead of overlay */
.ds-card-media .ds-status {
  display: none;
}

.ds-card-body {
  padding: 2px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.ds-card-name {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
  margin: 0 0 3px;
  -webkit-line-clamp: 1;
}
.ds-card-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 3px;
  gap: 4px;
}
.ds-meta-cat { color: var(--text-muted); font-weight: 400; }
.ds-meta-sep { display: none; }
.ds-meta-neigh { color: var(--text-muted); }
.ds-meta-neigh i { font-size: 0.8rem; opacity: 0.85; }

.ds-card-stats {
  margin-top: 4px;
  gap: 12px;
  font-size: 0.74rem;
  align-items: center;
}
.ds-card-stats .ds-stat { gap: 4px; }
.ds-card-stats .ds-stat i { font-size: 0.85rem; }
.ds-stat-rating { color: var(--text-muted); font-weight: 600; }
.ds-stat-rating i { color: var(--accent); }
.ds-stat-recs { color: var(--text-muted); }
.ds-stat-recs i { color: var(--primary); }
.ds-stat-price { color: var(--text-muted); margin-left: 0; font-weight: 600; }

/* Status dot inline in body */
.ds-card-body .ds-status-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
}
.ds-card-body .ds-status-inline.is-open { color: #117a39; }
.ds-card-body .ds-status-inline.is-closing-soon { color: #b56b00; }
.ds-card-body .ds-status-inline.is-closed { color: var(--text-muted); }

/* Right column: bookmark in a circle (matches reference) */
.ds-card-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.ds-card-bookmark {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.16s ease;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.ds-card-bookmark:active { transform: scale(0.92); }
.ds-card-bookmark i { font-size: 1.05rem; }
.ds-card-bookmark.is-saved {
  border-color: var(--primary);
  color: var(--primary);
}
.ds-card-bookmark.is-saved i:before { content: '\e3a4'; /* phosphor bookmark-simple-fill */ }

/* Reference compatibility: keep grid layout for desktop wide screens */
@media (min-width: 900px) {
  body[data-app="mobile"] .ds-results { padding: 14px 24px 80px; }
  body[data-app="mobile"] .ds-card { padding: 14px 8px; }
}


/* ════════════════════════════════════════════════════════════════════
   2. Bottom Navigation (Home / Events / Coleções / Search / Profile)
   ────────────────────────────────────────────────────────────────────
   v2.7.5 — Coleções button inserted between Events and Search. Visible
   count is now 5; .nav-btn { flex: 1 } reflows the layout automatically.
   The Coleções button can be hidden by SiteSettings.show_collections
   (handled inline in index.html), in which case the nav reflows back
   to 4 visible buttons.
   ──────────────────────────────────────────────────────────────────── */

.bottom-nav { z-index: 200; }

/* Hide the old discover button when premium events is active.
   index.html still ships #nav-discover for back-compat with deep links,
   but the visual nav becomes 4 buttons. */
body[data-app="mobile"] .bottom-nav #nav-discover {
  display: none;
}
body[data-app="mobile"] .bottom-nav #nav-community {
  display: none;
}

/* Slightly more refined icons + text in the visible nav */
.bottom-nav .nav-btn {
  gap: 4px;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}
.bottom-nav .nav-btn i { font-size: 1.4rem; }
.bottom-nav .nav-btn.active i {
  transform: scale(1.05);
  transition: transform 0.18s var(--spring, ease);
}


/* ════════════════════════════════════════════════════════════════════
   3. Events Screen (replaces Community emphasis on chefs/posts)
   ──────────────────────────────────────────────────────────────────── */

/* Hide chef / posts tabs in the legacy community shell on mobile */
body[data-app="mobile"] .comm-tab[onclick*="'posts'"],
body[data-app="mobile"] .comm-tab[onclick*="'chefs'"] {
  display: none;
}

/* Dedicated Events screen.
   v2.0.1 — uses the SAME internal-scroll pattern as #screen-discover:
   fixed-height container + overflow:hidden, with the chip-rail header
   pinned at the top of the contained area and a single inner scroll
   region (.evp-body). This:
     • prevents content from scrolling under the fixed topbar
     • prevents the sticky header from "sticking" behind the topbar
       (the bubble/spacing artifact users were seeing)
     • gives .evp-body { flex:1 } an actual sized parent to flex into
       (fixes the blank-page bug on iOS Safari where the flex chain
       collapsed to height 0). */
#screen-events {
  display: none;
  position: relative;
  flex-direction: column;
  /* Take exactly the viewport, NOT min-height: 100dvh which would let
     the screen grow with content and revert to body-level scroll. */
  height: 100dvh;
  height: 100svh;
  overflow: hidden;
  padding-top: calc(56px + var(--safe-top));
  padding-bottom: calc(var(--nav-height) + var(--safe-bottom));
  background: var(--bg);
}
#screen-events.active { display: flex; }

/* #events-content is the flex parent that .evp-shell flexes into.
   Without this, .evp-shell { flex: 1 } has nothing to size against. */
#events-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* v2.7.5 — Dedicated Collections screen.
   The shell, header, chip-rail, body, cards, and empty-state all reuse
   the .evp-* classes that Events uses (collections.js mounts the same
   markup), so we only need to size and show the screen container itself.
   Same internal-scroll pattern as #screen-events: fixed viewport height,
   overflow:hidden, padding for topbar + nav, single inner scroll region. */
#screen-collections {
  display: none;
  position: relative;
  flex-direction: column;
  height: 100dvh;
  height: 100svh;
  overflow: hidden;
  padding-top: calc(56px + var(--safe-top));
  padding-bottom: calc(var(--nav-height) + var(--safe-bottom));
  background: var(--bg);
}
#screen-collections.active { display: flex; }
#collections-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.evp-shell { display: flex; flex-direction: column; min-height: 0; flex: 1; }

/* Header is now a non-sticky flex item at the top of the CONTAINED
   scroll area. Because the screen has overflow:hidden + padding-top,
   the header naturally sits below the topbar — no more "bubble" of
   cream poking through behind the topbar. */
.evp-header {
  position: relative;       /* was sticky → fixed the bubble */
  z-index: 5;
  flex-shrink: 0;
  background: var(--bg);
  padding: 12px 16px 4px;
  border-bottom: 1px solid var(--border-subtle);
}
.evp-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.evp-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.evp-subtitle {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.evp-chip-rail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 10px;
  scrollbar-width: none;
}
.evp-chip-rail::-webkit-scrollbar { display: none; }

.evp-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--surface);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
[data-theme="light"] .evp-chip { background: #fff; border-color: rgba(0,0,0,0.10); }
.evp-chip:active { transform: scale(0.97); }
.evp-chip.is-active {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
[data-theme="dark"] .evp-chip.is-active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

.evp-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px 0;
  /* v2.0.7 — Android scroll reliability. The sister scroll surfaces
     (.ds-results-wrap, #home-content, #profile-content) already set
     these; .evp-body was missed when v2.0.1 introduced the single-
     scroller pattern. Symptoms users reported on Android: scroll
     "freezing" / lagging.
       • -webkit-overflow-scrolling: touch — iOS momentum (harmless
         on Android, kept for parity with the other scrollers).
       • overscroll-behavior-y: contain — block scroll chaining to
         the body, which on Android can swallow the gesture if the
         body itself has overflow: hidden somewhere up the chain.
       • touch-action: pan-y — explicit declaration so Android Chrome
         commits the gesture to vertical pan immediately, instead of
         hesitating to disambiguate from a card-tap.
       • overflow-anchor: none — disable Chrome's scroll-anchoring,
         which can fight the user when image cards finish loading
         and shift the layout. */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  overflow-anchor: none;
}

/* Premium event card */
.evp-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 2px 14px rgba(0,0,0,0.06);
  /* v2.0.7 — pan-y here means Android Chrome treats vertical drag
     on a card as scroll from frame one, instead of waiting to see
     if the user is tapping. Combined with the .evp-body settings,
     this eliminates the "freeze" / lag perception on Android. */
  touch-action: pan-y;
  /* v2.0.7 — user requested HALF of v2.0.5's 66px. 33px keeps a clear
     swipe-friendly gap between cards while letting more cards fit on
     screen at once (which also helps perceived scroll responsiveness
     on Android — more "events per swipe" reads as snappier). */
  margin-bottom: 33px;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.evp-card:hover { box-shadow: 0 6px 22px rgba(0,0,0,0.10); }
.evp-card:active { transform: scale(0.99); }

.evp-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-2);
}
.evp-card-media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.5s ease;
}
.evp-card:hover .evp-card-media img { transform: scale(1.03); }

.evp-card-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.65) 100%);
  pointer-events: none;
}

.evp-card-date {
  position: absolute;
  top: 12px; left: 12px;
  background: rgba(255,255,255,0.96);
  border-radius: 10px;
  padding: 6px 10px;
  text-align: center;
  min-width: 50px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  color: var(--primary);
}
.evp-card-date .d-day {
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
}
.evp-card-date .d-mon {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
  margin-top: 2px;
}

.evp-card-availability {
  position: absolute;
  top: 12px; right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.evp-card-availability i { font-size: 0.85rem; }
.evp-card-availability.is-unlimited { color: var(--primary); }
.evp-card-availability.is-available { color: #117a39; }
.evp-card-availability.is-filling   { color: #1a5c3a; }
.evp-card-availability.is-almost    { color: #b56b00; }
.evp-card-availability.is-last      { color: #c84300; background: rgba(255,239,228,0.97); }
.evp-card-availability.is-soldout   { color: #b5292d; background: rgba(248,222,222,0.97); }
.evp-card-availability.is-past      { color: var(--text-muted); background: rgba(232,228,222,0.97); }

.evp-card-body {
  padding: 14px 16px 16px;
  position: relative;
}
.evp-card-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 6px;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.evp-card-venue {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-sub);
  margin-bottom: 8px;
}
.evp-card-venue i { color: var(--primary); font-size: 0.9rem; }

.evp-card-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.76rem;
  color: var(--text-muted);
  align-items: center;
}
.evp-card-meta-row .m {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.evp-card-meta-row i { font-size: 0.9rem; opacity: 0.9; }

/* v2.7.2 — interest count pill on the events screen card meta row.
   Same gold tint as the home card variant in css/fixes.css. Sits
   inline with the other .m spans (clock, ticket, users). */
.evp-card-meta-row .evp-card-interest {
  background: rgba(201, 168, 76, 0.12);
  color: var(--primary, #1A5C3A);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}
.evp-card-meta-row .evp-card-interest i { opacity: 1; }
.evp-card-meta-row .evp-card-interest .ec-interest-n {
  font-variant-numeric: tabular-nums;
}

.evp-card-actions {
  position: absolute;
  bottom: 14px; right: 14px;
  display: flex;
  gap: 8px;
}
.evp-card-action {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.16s ease;
  -webkit-tap-highlight-color: transparent;
}
.evp-card-action:active { transform: scale(0.92); }
.evp-card-action img { width: 16px; height: 16px; }
.evp-card-action i { font-size: 0.95rem; }

/* iFood pill on event card — bottom-right of media */
.evp-card-ifood {
  position: absolute;
  bottom: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 4px;
  border-radius: 999px;
  background: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  color: #e53139;
  box-shadow: 0 1px 4px rgba(0,0,0,0.20);
}
.evp-card-ifood img { width: 18px; height: 18px; border-radius: 50%; }

/* Past-event styling: dim image */
.evp-card.is-past .evp-card-media img { filter: grayscale(0.45) brightness(0.92); }

/* Empty / skeleton states */
.evp-empty {
  text-align: center;
  padding: 60px 24px;
  color: var(--text-muted);
}
.evp-empty-icon {
  font-size: 2.2rem;
  margin-bottom: 12px;
  opacity: 0.6;
}
.evp-empty-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.evp-empty-sub {
  font-size: 0.88rem;
  margin-bottom: 18px;
}
.evp-empty-cta {
  background: var(--primary);
  color: var(--bg);
  border: 0;
  padding: 10px 22px;
  border-radius: 24px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}

.evp-skeleton {
  background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%);
  background-size: 200% 100%;
  animation: evp-shimmer 1.4s ease-in-out infinite;
  border-radius: 18px;
  height: 260px;
  margin-bottom: 16px;
}
@keyframes evp-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}


/* ════════════════════════════════════════════════════════════════════
   4. Hours sheet — premium weekly schedule modal
   ──────────────────────────────────────────────────────────────────── */

.hours-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1500;
  opacity: 0;
  transition: opacity 0.26s ease;
  pointer-events: none;
}
.hours-sheet-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* v2.0.2 — defensive guard. Mirrors the "render-nothing-when-closed"
   protocol of every other sheet (restaurant-sheet, event-modal, etc.):
   if the sheet doesn't have .is-open AND aria-hidden is still set,
   suppress visibility outright. This is a belt-and-braces over the
   inline display:none in HTML + the display-toggling JS — guarantees
   that even if a third party clears the inline style mid-render, the
   cream rounded-top sheet cannot bleed into the viewport. */
.hours-sheet[aria-hidden="true"],
.hours-sheet-backdrop[aria-hidden="true"] {
  visibility: hidden;
  pointer-events: none;
}

.hours-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) translateY(100%);
  width: 100%;
  max-width: 480px;
  background: var(--bg);
  border-radius: 24px 24px 0 0;
  z-index: 1501;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.25);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  max-height: 88vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.hours-sheet.is-open {
  transform: translateX(-50%) translateY(0);
}
.hours-sheet-handle {
  width: 40px; height: 4px;
  border-radius: 2px;
  background: var(--border-subtle);
  margin: 12px auto 0;
  flex-shrink: 0;
}
.hours-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 6px;
  border-bottom: 1px solid var(--border-subtle);
}
.hours-sheet-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  flex: 1;
  text-align: center;
  padding-right: 24px;
}
.hours-sheet-close {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.hours-sheet-close:active { background: var(--surface); }
.hours-sheet-close i { font-size: 1.2rem; }

.hours-sheet-body {
  padding: 16px 4px 8px;
}

.hours-sheet-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: start;
  gap: 16px;
  padding: 14px 20px;
  font-size: 1rem;
}
.hours-sheet-row + .hours-sheet-row {
  border-top: 0;
}
.hours-sheet-row.is-today {
  background: rgba(26,92,58,0.05);
}
[data-theme="dark"] .hours-sheet-row.is-today {
  background: rgba(201,168,76,0.07);
}
.hours-sheet-day {
  font-weight: 500;
  color: var(--text);
  font-size: 1.02rem;
  letter-spacing: -0.005em;
}
.hours-sheet-row.is-today .hours-sheet-day {
  font-weight: 700;
  color: var(--primary);
}
.hours-sheet-time {
  color: var(--text);
  font-size: 1.02rem;
  font-weight: 500;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hours-sheet-time .ts-closed { color: var(--text-muted); }
.hours-sheet-time .ts-24h    { color: #117a39; font-weight: 600; }
.hours-sheet-row.is-today .hours-sheet-time { font-weight: 600; }

.hours-sheet-foot {
  padding: 14px 20px 22px;
  color: var(--text-muted);
  font-size: 0.82rem;
  text-align: left;
  border-top: 1px solid var(--border-subtle);
  margin-top: 6px;
}

/* "Horários" button on the restaurant detail action row */
.rd-action-btn.rd-action-hours {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  color: var(--text);
}
.rd-action-btn.rd-action-hours i { font-size: 1.4rem; color: var(--primary); }
[data-theme="dark"] .rd-action-btn.rd-action-hours i { color: var(--accent); }

/* Compact current-day status line on the restaurant detail page.
   Sits between the rating and action buttons. Tap to open the sheet. */
.rd-today-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  margin: 14px 0 8px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
  transition: background 0.15s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.rd-today-line:active { transform: scale(0.99); background: var(--surface-2); }
.rd-today-line i { font-size: 1rem; flex-shrink: 0; }
.rd-today-line .rd-today-text { flex: 1; }
.rd-today-line .rd-today-cta {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 0.01em;
}
[data-theme="dark"] .rd-today-line .rd-today-cta { color: var(--accent); }
.rd-today-line .rd-today-arrow { font-size: 0.75rem; color: var(--text-muted); }
.rd-today-line.is-open i:first-child    { color: #117a39; }
.rd-today-line.is-closing-soon i:first-child { color: #b56b00; }
.rd-today-line.is-closed i:first-child  { color: var(--text-muted); }

/* v2.0.0 — the legacy inline weekly schedule panel is now hidden by
   default since the brief asks for the schedule to live behind the
   Hours button. We keep the markup in restaurant.js for back-compat
   but suppress visually; users tap "Horários" / "Ver horários" instead. */
.rd-hours-mount,
.rd-hours-panel,
.rd-hours-panel-legacy {
  display: none !important;
}
/* Also hide the section title that introduced it */
.rd-section-title:has(+ .rd-hours-mount),
.rd-section-title:has(+ .rd-hours-panel),
.rd-section-title:has(+ .rd-hours-panel-legacy) {
  display: none;
}


/* ════════════════════════════════════════════════════════════════════
   5. Image view tracking — eye-icon pill on hero images
   ──────────────────────────────────────────────────────────────────── */

.iv-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.iv-badge i { font-size: 0.85rem; opacity: 0.95; }
.iv-badge.is-hidden { opacity: 0; }

/* When badge is inside a horizontal carousel slide, anchor to slide */
.rd-slide .iv-badge { bottom: 14px; left: 14px; }

/* Make sure it doesn't fight existing pills */
.evp-card-media .iv-badge { bottom: 12px; left: 12px; }
.evp-card-media .evp-card-ifood ~ .iv-badge { left: auto; right: 12px; }


/* ════════════════════════════════════════════════════════════════════
   6. Shell stabilization — z-index + safe-area fixes
   ──────────────────────────────────────────────────────────────────── */

/* Guarantee that fixed search header is above scrolling content
   (covers a stale-cache scenario where #ds-search-wrap was non-sticky) */
body.discover-active .ds-search-wrap {
  position: sticky;
  top: 0;
  z-index: 6;
}

/* Make the screens scroll independently and respect safe areas */
body[data-app="mobile"] .screen {
  padding-top: calc(56px + var(--safe-top));
}

/* Discover screen now houses the search list; lock layout so content
   never slides under the search/filter region */
#screen-discover.active {
  display: flex;
  flex-direction: column;
}
#discover-feed { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.ds-shell { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.ds-results-wrap {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* v2.0.1 — apply the same internal-scroll pattern to Home and Profile
   on mobile. The screen becomes a fixed-viewport flex container; the
   inner content div (#home-content / #profile-content) becomes the
   single scroll surface. This is the fix for:
     • content sliding under the fixed topbar on scroll
     • the "white element / bubble" artifact where a sticky child header
       was sticking to body top=0 (behind the topbar) instead of the
       contained scroll area's top
     • the blank-page bug on iOS Safari where flex chains in event/home
       content collapsed because no ancestor had a defined height

   We do NOT touch the rendering logic in home.js / profile.js —
   #home-content and #profile-content stay as the same DOM nodes the
   modules write into. They just become scroll containers now. */
@media (max-width: 1023px) {
  body[data-app="mobile"] #screen-home,
  body[data-app="mobile"] #screen-profile {
    height: 100dvh;
    height: 100svh;
    min-height: 0;
    overflow: hidden;
    padding-bottom: calc(var(--nav-height) + var(--safe-bottom));
  }
  body[data-app="mobile"] #screen-home.active,
  body[data-app="mobile"] #screen-profile.active {
    display: flex;
    flex-direction: column;
  }
  body[data-app="mobile"] #home-content,
  body[data-app="mobile"] #profile-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }
}


/* ════════════════════════════════════════════════════════════════════
   7. Desktop overrides — keep grid layout for wide viewports
   ──────────────────────────────────────────────────────────────────── */

@media (min-width: 900px) {
  /* Restore grid layout for desktop search results */
  [data-viewport="desktop"] .ds-results {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    padding: 20px 24px 80px;
  }
  [data-viewport="desktop"] .ds-results > .ds-card + .ds-card {
    border-top: 0;
  }
  [data-viewport="desktop"] .ds-card {
    display: block;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    padding: 0;
    border: 1px solid rgba(0,0,0,0.04);
  }
  [data-viewport="desktop"] .ds-card-media {
    width: 100%;
    height: 170px;
    border-radius: 16px 16px 0 0;
  }
  [data-viewport="desktop"] .ds-card-media .ds-status,
  [data-viewport="desktop"] .ds-card-media .ds-save {
    display: inline-flex;
  }
  [data-viewport="desktop"] .ds-card-grad { display: block; }
  [data-viewport="desktop"] .ds-card-body { padding: 12px 14px 14px; }
  [data-viewport="desktop"] .ds-card-right { display: none; }

  /* Events page: 2-column grid on desktop */
  [data-viewport="desktop"] .evp-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    padding: 18px 24px 60px;
  }
  [data-viewport="desktop"] .evp-card { margin-bottom: 0; }
}

@media (min-width: 1200px) {
  [data-viewport="desktop"] .ds-results { grid-template-columns: 1fr 1fr 1fr 1fr; }
  [data-viewport="desktop"] .evp-body { grid-template-columns: 1fr 1fr 1fr; }
}


/* ════════════════════════════════════════════════════════════════════
   v2.0.5 — Home banner edge-to-edge on mobile.
   Removes the persistent "white bubble at the top of home" by making
   the topbar transparent on home and dropping the screen padding-top
   so the hero banner reaches y=0. Buttons remain functional and a
   subtle gradient scrim keeps their icons readable over any banner.

   Scoped strictly to mobile (max-width:1023px) AND body.home-active —
   so the moment the user navigates anywhere else (Eventos, Pesquisa,
   Profile), the normal opaque topbar comes right back. Desktop is
   unaffected.
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  /* Drop the 56px+safe gap that pushes content down on home — the
     banner now sits at the very top of the viewport. The other
     screens (events, profile) keep their padding-top because their
     own headers (.evp-header etc.) live in that space. */
  body[data-app="mobile"].home-active #screen-home {
    padding-top: 0 !important;
  }

  /* Topbar becomes a floating layer over the banner instead of an
     opaque cream band. Keep the same z-index, lose the background. */
  body[data-app="mobile"].home-active .topbar {
    background: transparent !important;
    border-bottom: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Reading scrim — soft top-down dark gradient confined to topbar
     height. Ensures avatar/city/GPS/plus icons stay readable over
     any banner photo. Positioned absolute inside the topbar so it
     scrolls with it (well, doesn't — topbar is fixed). */
  body[data-app="mobile"].home-active .topbar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
                                rgba(0,0,0,0.28) 0%,
                                rgba(0,0,0,0)    100%);
    pointer-events: none;
    z-index: -1;
  }

  /* Force topbar text + icon colors to white for contrast against
     the banner image below. */
  body[data-app="mobile"].home-active .topbar-city,
  body[data-app="mobile"].home-active .topbar-city i,
  body[data-app="mobile"].home-active .topbar-nav-btn,
  body[data-app="mobile"].home-active .topbar-plus-btn,
  body[data-app="mobile"].home-active .topbar-nav-btn i,
  body[data-app="mobile"].home-active .topbar-plus-btn i {
    color: #fff !important;
  }
  /* Slight white shadow on the city text helps over light banners */
  body[data-app="mobile"].home-active .topbar-city {
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  }
}


/* ════════════════════════════════════════════════════════════════════
   v2.0.6 — Events page edge-to-edge (matches v2.0.5 home pattern).
   The previous double-band visual on Eventos was:
     ┌─────────────────────┐
     │ topbar (cream)      │  ← y=0..76, opaque, border-bottom
     ├─────────────────────┤
     │ evp-header (cream)  │  ← y=76..~150, title + chips
     └─────────────────────┘
   With two adjacent cream surfaces separated by a border line, it
   read as a "double cream band" at the top of the page.

   Strategy: mirror the home-active edge-to-edge approach with TWO
   intentional differences:
   (1) NO white icon override — on home the topbar floats over the
       banner IMAGE (varied/dark), so white icons + scrim are needed.
       On events the area behind the transparent topbar is the
       evp-header cream BG (a light surface), so dark icons remain
       readable.
   (2) NO darkening scrim — would muddy the otherwise clean cream
       surface.

   Result: the evp-header expands upward to occupy the topbar area too,
   so what used to be [topbar cream] + [border] + [evp-header cream]
   becomes ONE continuous cream surface with the topbar icons floating
   in it. The title pushes down via evp-header padding-top so it sits
   BELOW the topbar level (no collision with the avatar/GPS/+ icons).

   Strictly scoped to mobile + .events-active. The moment the user
   navigates to home, Pesquisa, or Profile, the default opaque topbar
   returns. Desktop completely unaffected.
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  /* Remove the 56px+safe-top gap that used to push the .evp-header
     below the topbar. The .evp-header itself will compensate by
     padding its own top so the title sits below the topbar level. */
  body[data-app="mobile"].events-active #screen-events {
    padding-top: 0 !important;
  }

  /* Topbar transparent + no border-bottom + no backdrop-filter.
     Same mechanics as home-active — but icon colors and scrim are
     intentionally OMITTED (see the strategy comment above). */
  body[data-app="mobile"].events-active .topbar {
    background: transparent !important;
    border-bottom: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* .evp-header expands upward to cover the topbar area. Title moves
     to where it would have been originally (below the topbar level)
     via a calculated top-padding: topbar height (56px) + iOS safe
     area + the existing 12px breathing room. */
  body[data-app="mobile"].events-active .evp-header {
    padding-top: calc(56px + var(--safe-top, 0px) + 12px) !important;
  }
}


/* ════════════════════════════════════════════════════════════════════
   v2.0.7 — Pesquisa edge-to-edge + tighter Events header + drop +-btn.

   1) Mirror the v2.0.6 events-active rules for body.discover-active so
      the Pesquisa page also has no cream "band" at the top.
   2) Hide the redundant ".evp-title-row" (the "Eventos" + subtitle
      block) on events-active — the bottom-nav already labels the
      screen, and removing this row reclaims ~60px of vertical space
      so the first card sits notably higher.
   3) Hide the topbar's `+` (Create) button per user request — keep
      the GPS button. CSS-only hide so the markup + handler stay in
      place; trivial to re-enable later.

   All rules scoped to mobile MQ + relevant body class. Desktop and
   other screens unaffected.
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {

  /* ── 1. Pesquisa edge-to-edge (mirror events-active) ─────────────── */
  /* Default opaque cream topbar is gone — same transparent treatment
     as events. No reading scrim and no white-icon override because
     behind the transparent topbar is the .ds-search-wrap cream bg
     (light surface → dark default icons stay readable). */
  body[data-app="mobile"].discover-active .topbar {
    background: transparent !important;
    border-bottom: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Kill the .screen-inherited padding-top so the search wrap reaches
     y=0. The wrap itself compensates with its own padding-top below. */
  body[data-app="mobile"].discover-active #screen-discover {
    padding-top: 0 !important;
  }
  /* .ds-search-wrap expands upward to cover the topbar area. Search
     input pushes down below the topbar level via the same calc()
     used on .evp-header in v2.0.6 — slightly tighter (+6px instead
     of +12px) to make the cards visible higher on screen. */
  body[data-app="mobile"].discover-active .ds-search-wrap {
    padding-top: calc(56px + var(--safe-top, 0px) + 6px) !important;
  }

  /* ── 2. Hide the redundant "Eventos" title-row on events-active ──── */
  /* The header is now just the chip rail, freeing ~60px of vertical
     space. Bottom nav already labels the page. */
  body[data-app="mobile"].events-active .evp-title-row {
    display: none !important;
  }
  /* Tighten the compensation padding while we're here: title-row is
     gone, so we just need to clear the topbar height + a small gap. */
  body[data-app="mobile"].events-active .evp-header {
    padding-top: calc(56px + var(--safe-top, 0px) + 8px) !important;
    padding-bottom: 8px !important;
  }
}

/* ── 3. Hide the + button in the topbar (all viewports) ────────────── */
/* User: "remove the + button at top for now and only keep the gps
   location button." CSS-only hide preserves markup + onclick for
   easy re-enable. */
.topbar-plus-btn {
  display: none !important;
}


/* ════════════════════════════════════════════════════════════════════
   v2.0.2 — Explicit scoping for search/filter UI.
   Defense in depth: even if some refactor inadvertently leaves a
   #screen-discover or #screen-events visible, these search-specific
   surfaces must NEVER render outside their parent screen.
   ──────────────────────────────────────────────────────────────────── */
#screen-home .ds-search-wrap,
#screen-home .ds-chip-rail,
#screen-home .evp-header,
#screen-home .evp-chip-rail,
#screen-profile .ds-search-wrap,
#screen-profile .ds-chip-rail,
#screen-profile .evp-header,
#screen-profile .evp-chip-rail,
#restaurant-sheet .ds-search-wrap,
#restaurant-sheet .ds-chip-rail,
#restaurant-sheet .evp-header,
#restaurant-sheet .evp-chip-rail {
  /* Hard rule: search UI can never appear inside the home, profile,
     or restaurant-detail surfaces, even by accident. */
  display: none !important;
}


/* ════════════════════════════════════════════════════════════════════
   8. Misc polish — splash, route transitions
   ──────────────────────────────────────────────────────────────────── */

.screen, #screen-events {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* Soft transition between routes */
.screen.active, #screen-events.active {
  animation: bm-screen-in 0.22s ease both;
}
@keyframes bm-screen-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .screen.active, #screen-events.active { animation: none; }
  .hours-sheet { transition: none; }
  .evp-card-media img { transition: none; }
}