/* ══════════════════════════════════════════════════
   FIXES.CSS — Android compat, consistent modals,
   chef cards, create modal, event detail, instagram
   ══════════════════════════════════════════════════ */

/* ══ Android Chrome: remove backdrop-filter fallback ──
   backdrop-filter can cause blank headers on Android WebView */
@supports not (backdrop-filter: blur(1px)) {
  .topbar { background: var(--bg) !important; }
  .bottom-nav { background: var(--bg) !important; }
}

/* ══════════════════════════════════════════════════════
   MOBILE SHELL — iOS + Android consistent fixed layout
   All positioning matches what iOS renders natively.
══════════════════════════════════════════════════════ */

/* ── Topbar: fixed at top, GPU-composited ── */
.topbar {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 56px !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 14px !important;
  /* Solid background — reliable on ALL platforms */
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  /* GPU promote — eliminates Android scroll flicker */
  -webkit-transform: translate3d(0,0,0) !important;
  transform: translate3d(0,0,0) !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  will-change: auto !important;
}
/* Frosted glass only where reliably supported (iOS Safari, modern Chrome) */
@supports (backdrop-filter: blur(12px)) and (not (-webkit-touch-callout: none)) {
  /* This targets desktop Chrome/Edge — safe to blur */
}
@media (min-width: 768px) {
  /* Desktop: allow frosted glass — no risk of blank header */
  .topbar {
    background: rgba(var(--bg, #F5F0E8), 0.92) !important;
  }
}

/* ── Bottom nav: fixed at bottom, safe-area aware ── */
.bottom-nav {
  position: fixed !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: stretch !important;
  background: var(--bg) !important;
  border-top: 1px solid var(--border-subtle) !important;
  /* Safe area: works on iOS notch + Android gesture bar */
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
  /* GPU layer — same as topbar */
  -webkit-transform: translate3d(0,0,0) !important;
  transform: translate3d(0,0,0) !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  will-change: auto !important;
}

/* ── Screens: fill the space between topbar and bottom nav ── */
.screen {
  /* Mobile: position:fixed top:56px already clears the topbar — NO padding-top needed */
  /* Prevent Android pull-to-refresh from fighting the app */
  overscroll-behavior: none !important;
  -webkit-overflow-scrolling: touch;
}
.screen-home {
  /* No extra padding — #home-content handles its own scroll */
}

/* ── Topbar avatar ── */
.topbar-avatar {
  width: 34px !important; height: 34px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}

/* ── Nav buttons: iOS-quality tap feedback on Android ── */
.nav-btn {
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
.nav-btn:active {
  opacity: 0.6 !important;
}

/* ── Remove Android blue tap flash from ALL interactive elements ── */
button, a, [onclick], [role="button"] {
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}

/* ══ Topbar avatar ── */
.topbar-avatar {
  width: 34px !important; height: 34px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  /* Consistent tap target across platforms */
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}

/* ══ Nav buttons: consistent cross-platform tap feedback ── */
.nav-btn {
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
.nav-btn:active {
  opacity: 0.6 !important;
}

/* ══ All interactive elements: remove Android blue highlight ── */
button, a, [onclick], [role="button"] {
  -webkit-tap-highlight-color: transparent !important;
  touch-action: manipulation !important;
}

/* ══ UNIVERSAL MODAL CLOSE BUTTON ══
   Consistent X on ALL overlays - 44×44px touch target */
.modal-close-btn {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: var(--surface-2, rgba(0,0,0,0.08)) !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 1rem !important;
  color: var(--text, #1a1714) !important;
  z-index: 10 !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: background 0.15s !important;
  flex-shrink: 0 !important;
}
.modal-close-btn:active { background: var(--border, rgba(0,0,0,0.15)) !important; }
.modal-close-btn i { pointer-events: none; }

/* Map overlay close button override */
.map-modal-close {
  position: relative !important;
  top: auto !important;
  right: auto !important;
}

/* ══ R-SHEET shared styles ══ */
.r-sheet {
  position: fixed !important;
  bottom: 0 !important;
  left: 50% !important;
  /* DEFAULT = hidden below viewport. JS adds .open or sets inline transform for animation */
  transform: translateX(-50%) translateY(100%) !important;
  width: 100% !important;
  max-width: 430px !important;
  z-index: 500 !important;
  border-radius: 20px 20px 0 0 !important;
  background: var(--bg, #f4f0e8) !important;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.25) !important;
  /* Prevent any inherited green backgrounds */
  color: var(--text, #1a1714) !important;
  /* GPU-accelerate to avoid iOS repaint flash */
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  will-change: transform !important;
}
/* When the CSS class .open is used (restaurant-sheet) */
.r-sheet.open {
  transform: translateX(-50%) translateY(0) !important;
  transition: transform 0.32s cubic-bezier(0.25,0.46,0.45,0.94) !important;
}
.r-sheet-inner {
  position: relative !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  max-height: 85vh !important;
  background: var(--bg, #f4f0e8) !important;
}
.r-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.5) !important;
  z-index: 499 !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* ══ CREATE MODAL ══ */
.create-modal-inner {
  padding-top: 8px;
}
.create-modal-title {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 20px;
  padding-top: 4px;
  color: var(--text);
}
.create-option-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.create-option-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s;
  border-radius: 0;
}
.create-option-btn:active { background: var(--surface-2); }
.create-option-btn:last-child { border-bottom: none; }
.create-option-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(26,92,58,0.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  color: var(--primary, #1A5C3A);
  flex-shrink: 0;
}
.create-option-icon.rec { background: rgba(201,168,76,0.12); color: var(--accent, #C9A84C); }
.create-option-icon.coll { background: rgba(88,86,214,0.1); color: #5856D6; }
.create-option-body { flex: 1; }
.create-option-name { font-size: 0.95rem; font-weight: 600; color: var(--text); }
.create-option-desc { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }
.create-option-arrow { font-size: 0.9rem; color: var(--text-muted); flex-shrink: 0; }

/* ══ CHEF CARDS with photos ══ */
.comm-chef-card {
  display: flex;
  gap: 14px;
  padding: 16px;
  border-bottom: 1px solid var(--border-subtle);
  align-items: flex-start;
}
.comm-chef-photo {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--accent, #C9A84C);
}
.comm-chef-photo-placeholder {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary,#1A5C3A), var(--accent,#C9A84C));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 1.1rem; font-weight: 700; color: #fff;
  flex-shrink: 0;
  border: 2px solid var(--accent, #C9A84C);
}

/* ══ EVENT DETAIL MODAL ══ */
.event-sheet .r-sheet-inner {
  max-height: 90vh !important;
  padding-bottom: 40px !important;
}
.event-detail-hero {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 0;
  display: block;
}
.event-detail-body {
  padding: 20px 20px 0;
}
.event-detail-date-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.event-detail-badge {
  background: var(--primary, #1A5C3A);
  color: #fff;
  border-radius: 10px;
  padding: 6px 14px;
  text-align: center;
  flex-shrink: 0;
}
.event-detail-badge .edb-day { font-size: 1.4rem; font-weight: 700; line-height: 1; }
.event-detail-badge .edb-mon { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; }
.event-detail-info-row {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.event-detail-info-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.82rem; color: var(--text-sub);
}
.event-detail-title {
  font-family: var(--font-display,'Cormorant Garamond',serif);
  font-size: 1.5rem; font-weight: 700;
  line-height: 1.2; margin-bottom: 8px;
  color: var(--text);
}
.event-detail-rest {
  font-size: 0.85rem; color: var(--primary, #1A5C3A);
  font-weight: 600; margin-bottom: 12px;
}
.event-detail-desc {
  font-size: 0.88rem; color: var(--text-sub);
  line-height: 1.65; margin-bottom: 20px;
}
.event-detail-spots {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,69,58,0.1);
  color: #FF453A;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.78rem; font-weight: 700;
  margin-bottom: 20px;
}
.event-detail-spots.ok { background: rgba(26,92,58,0.1); color: var(--primary,#1A5C3A); }
.event-detail-reserve-btn {
  width: 100%;
  padding: 16px;
  background: var(--primary, #1A5C3A);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.02em;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s;
}
.event-detail-reserve-btn:active { opacity: 0.8; }
.event-detail-share-btn {
  width: 100%; margin-top: 10px;
  padding: 14px;
  background: transparent;
  border: 1px solid var(--border, rgba(26,92,58,0.2));
  border-radius: 14px;
  font-size: 0.88rem; font-weight: 600;
  color: var(--text-sub);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ══ INSTAGRAM SHARE MODAL ══ */
.insta-header {
  padding: 4px 20px 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.insta-header-title {
  font-size: 1rem; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
.insta-header-title i { color: #E1306C; font-size: 1.2rem; }
.insta-search-bar {
  margin: 12px 20px 0;
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2); border-radius: 10px;
  padding: 10px 14px;
}
.insta-search-bar input {
  border: none; background: transparent;
  font-size: 0.9rem; color: var(--text); flex: 1;
  outline: none;
}
.insta-friends-section { padding: 12px 20px 0; }
.insta-section-label { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 12px; }
.insta-friend-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.insta-friend-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.insta-friend-info { flex: 1; }
.insta-friend-name { font-size: 0.9rem; font-weight: 600; color: var(--text); }
.insta-friend-handle { font-size: 0.75rem; color: var(--text-muted); }
.insta-send-btn {
  background: #E1306C; color: #fff;
  border: none; border-radius: 8px;
  padding: 8px 16px; font-size: 0.78rem; font-weight: 700;
  cursor: pointer; transition: opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.insta-send-btn.sent { background: var(--surface-3); color: var(--text-muted); }
.insta-send-btn:active { opacity: 0.75; }
.insta-story-btn {
  margin: 16px 20px;
  width: calc(100% - 40px);
  padding: 14px;
  background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 0.9rem; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  -webkit-tap-highlight-color: transparent;
}

/* ══ COMMUNITY EVENTS ══ */
.comm-event-card {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.comm-event-card:active { opacity: 0.85; }

/* ══ SHEET HANDLE ══ */
.sheet-handle {
  width: 36px; height: 4px;
  background: var(--border, rgba(0,0,0,0.12));
  border-radius: 2px;
  margin: 10px auto 4px;
}

/* ══ iOS INPUT FIX (prevents zoom on focus) ══ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
  font-size: 16px !important; /* prevents iOS zoom */
}

/* ══ ANDROID FONT RENDERING ══ */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ══ FOLLOW BUTTON LOADING STATE ══ */
.comm-follow-btn.loading { opacity: 0.6; pointer-events: none; }
.comm-follow-btn.following {
  background: var(--surface-2);
  color: var(--text-sub);
  border: 1px solid var(--border-subtle);
}

/* ══ TOPBAR AVATAR with photo ══ */
.topbar-avatar {
  overflow: hidden;
  padding: 0;
}

/* ══ DESKTOP improvements ══ */
@media (min-width: 768px) {
  /* Undo mobile-only fixed positioning for topbar */
  .topbar {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    padding: 0 24px !important;
    grid-column: 1 / -1;
    z-index: 100 !important;
  }

  /* Undo mobile-only fixed positioning for bottom-nav — becomes left sidebar */
  .bottom-nav {
    position: sticky !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    top: 56px !important;
    width: 240px !important;
    height: calc(100vh - 56px) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 16px 8px !important;
    padding-bottom: 16px !important;
    border-top: none !important;
    border-right: 1px solid var(--border-subtle) !important;
    transform: none !important;
    z-index: 50 !important;
    overflow-y: auto;
    align-self: start;
  }

  /* Undo mobile screen padding for fixed topbar */
  html {
    height: auto !important;
    overflow: auto !important;
    position: static !important;
  }
  .screen {
    padding-top: 0 !important;
    /* Override all the mobile position:fixed screen rules */
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    /* Grid placement */
    grid-column: 2;
    grid-row: 2;
    /* Padding for readability */
    padding-bottom: 48px !important;
  }
  .screen.active {
    display: block !important;
  }
  /* Discover is a full-height scroller — keep it contained */
  #screen-discover {
    position: static !important;
    top: auto !important;
    height: calc(100vh - 56px) !important;
    min-height: calc(100vh - 56px) !important;
    overflow: hidden !important;
    display: none;
  }
  #screen-discover.active {
    display: flex !important;
    flex-direction: column !important;
  }
  .screen-home {
    padding-top: 0 !important;
  }
  /* Home content doesn't need fixed height on desktop */
  #home-content {
    height: auto !important;
    overflow-y: visible !important;
  }
  .home-scroll {
    height: auto !important;
    overflow-y: visible !important;
  }
  /* Body and app shell must allow scrolling on desktop */
  body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: static !important;
    height: auto !important;
  }
  #app {
    display: grid !important;
    grid-template-columns: 240px 1fr !important;
    grid-template-rows: auto 1fr !important;
    min-height: 100vh !important;
    overflow: visible !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    box-shadow: 0 0 0 1px var(--border-subtle) !important;
  }

  /* Nav buttons: horizontal sidebar items */
  .nav-btn {
    flex: none !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 11px 14px !important;
    border-radius: 10px !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    width: 100% !important;
  }
  .nav-btn i {
    font-size: 1.2rem !important;
    width: 20px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
  }
  .nav-btn span {
    font-size: 0.88rem !important;
    display: block !important;
  }
  .nav-btn.active {
    background: var(--surface) !important;
    color: var(--primary) !important;
  }
  .nav-btn:hover:not(.active) {
    background: rgba(0,0,0,0.04) !important;
    color: var(--text) !important;
  }
  /* Brand header above nav sidebar */
  .bottom-nav::before {
    content: 'Capital da Boa Mesa';
    display: block;
    font-family: var(--font-display, 'Cormorant Garamond', serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    padding: 4px 14px 16px;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 8px;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
  }

  /* Restaurant detail sheet becomes a centered modal dialog */
  .r-sheet {
    bottom: auto !important;
    top: 50% !important;
    /* Hidden: off-screen below + centered horizontally */
    transform: translateX(-50%) translateY(calc(-50% + 60vh)) !important;
    border-radius: 20px !important;
    max-width: 560px !important;
    max-height: 88vh !important;
    box-shadow: 0 24px 80px rgba(0,0,0,0.35) !important;
  }
  .r-sheet.open {
    transform: translateX(-50%) translateY(-50%) !important;
    transition: transform 0.32s cubic-bezier(0.25,0.46,0.45,0.94) !important;
  }
  .r-sheet-inner { max-height: 88vh !important; }

}

/* ══ Phosphor icons fallback ══ */
.ph::before { display: inline-block; }

/* ══════════════════════════════════════════════════
   DESKTOP EXPERIENCE POLISH (768px+)
   Additional layout refinements for web app quality
══════════════════════════════════════════════════ */
@media (min-width: 768px) {

  /* Topbar: proper grid layout — avatar | title center | actions */
  .topbar {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 16px !important;
  }
  .topbar-city {
    justify-self: center;
    font-size: 1rem;
    /* Remove absolute centering — grid handles it */
    position: static !important;
    transform: none !important;
    left: auto !important;
  }
  .topbar-actions {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* Home content: constrain width for readability */
  #home-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 16px;
  }

  /* Brand strip on desktop: slightly more spacious */
  .home-brand-strip {
    padding: 12px 24px 12px 20px;
    border-radius: 0;
  }
  .home-brand-logo { width: 36px; height: 36px; }
  .home-brand-main { font-size: 1.4rem; }

  /* Hero banner: taller on desktop */
  .home-banner { height: 300px !important; }

  /* Horizontal scroll sections become proper grids */
  .h-scroll {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding-bottom: 8px !important;
    /* show scrollbar on desktop for affordance */
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }
  .h-scroll::-webkit-scrollbar { height: 4px; }
  .h-scroll::-webkit-scrollbar-track { background: transparent; }
  .h-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

  /* Search screen: nice centered layout */
  .search-top {
    max-width: 760px;
    margin: 0 auto;
    padding: 20px 20px 0;
  }
  #search-results {
    max-width: 760px;
    margin: 0 auto;
  }

  /* Community screen: constrain width */
  #community-feed {
    max-width: 720px;
    margin: 0 auto;
  }

  /* Profile screen: center card */
  #screen-profile .scroll-content {
    max-width: 640px;
    margin: 0 auto;
  }

  /* Discover feed: contained column height */
  #screen-discover {
    height: calc(100vh - 56px) !important;
    min-height: calc(100vh - 56px) !important;
    overflow: hidden !important;
    position: static !important;
  }

  /* Backdrop covers full viewport */
  .r-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 499 !important;
  }

  /* Improve card hover states on desktop */
  .restaurant-card:hover,
  .must-eat-card:hover,
  .area-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  /* Better scrollbar for main content */
  body::-webkit-scrollbar { width: 6px; }
  body::-webkit-scrollbar-track { background: transparent; }
  body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
  body::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
}

/* ══ ERROR MESSAGE for admin login ══ */
#admin-login-error {
  display: none;
  background: rgba(255,69,58,0.1);
  color: #FF453A;
  border: 1px solid rgba(255,69,58,0.25);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.82rem;
  font-weight: 500;
  margin-top: 10px;
  text-align: center;
}

/* ══════════════════════════════════════════════════
   CROSS-PLATFORM SCROLL & OVERFLOW HARDENING
   Prevents Android horizontal ghost-scroll and
   ensures #home-content fills its container correctly.
══════════════════════════════════════════════════ */

/* Every screen: never allow horizontal overflow */
.screen {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* Home content: match parent height exactly so it scrolls internally */
#home-content {
  min-height: 100% !important;
  overflow-x: hidden !important;
  /* Explicit padding-bottom so last card isn't cut off */
  padding-bottom: 24px !important;
}

/* Search, community, profile: a little bottom breathing room */
#screen-search,
#screen-community,
#screen-profile {
  padding-bottom: 16px !important;
}

/* Prevent any child from causing horizontal page overflow on Android */
#home-content > *,
#community-content > *,
#profile-content > *,
#search-results > * {
  max-width: 100%;
  overflow-x: hidden;
}

/* ── Toast: desktop adjusts to center viewport, not nav ── */
@media (min-width: 768px) {
  .toast {
    bottom: 32px !important;
  }
}

/* ═══════════════════════════════════════════════
   v1.1 Feature additions — sticky search, multi-restaurant
   events, unlimited spots, feed-mode events, restaurant
   "diferenciais", heart icon, collection feed badge.
   ═══════════════════════════════════════════════ */

/* ── Sticky home search bar (v1.9.3 root-cause fix) ───────────────
   The home content container is the scroll context (#home-content
   in main.css ~3385: height:100%; overflow-y:auto). The bar sticks
   to the top of that scroller.

   PRIOR BUG: this rule used `margin: 0 -16px` to "break out of section
   padding" — but #home-content has NO horizontal padding, so the
   negative margins pushed the bar 16px past each viewport edge.
   `overflow-x: hidden` on the screen clipped it but the backdrop-filter
   blur showed through as a translucent strip when content scrolled
   underneath. That was the "ghost overlay" / "transparent artifact
   below the search bar" reported on iOS Safari + Android Chrome.

   FIX: keep the bar's natural width (it already has its own
   margin: 14px 16px from main.css). Drop the backdrop-filter to
   eliminate the see-through strip — solid background reads cleaner
   and is faster on low-end Android. Sticky still pins to top:0 of
   the scroll container with a single hairline divider underneath. */
#home-content .home-search-bar.home-search-sticky {
  position: sticky;
  top: 0;
  z-index: 12;
  /* Use the same horizontal margin as main.css default; no negative
     margin tricks. The bar sits naturally inside the screen gutter. */
  background: var(--bg);
  /* Hairline only when actually stuck — avoids a double-line look
     when the bar sits flush at scroll origin. Using outline (which
     does not affect layout) instead of border to prevent a 1px jump
     when the divider would normally render. */
  box-shadow: 0 1px 0 var(--border-subtle);
  /* No backdrop-filter — was producing a translucent strip that bled
     content above through the bar on iOS Safari. */
}

/* Heart icon: keep the Wishlist save buttons looking like hearts even
   if a stale ph-bookmark glyph slips through during animation. */
.hrc-save.saved i.ph-fill,
.search-save.saved i.ph-fill,
.popular-save i.ph-fill.ph-heart,
.rd-save-hero.saved i.ph-fill {
  color: #e11d48;
}

/* ── Multi-restaurant event card badge (home + others) (#3) ─ */
.ec-multi-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.02em;
  backdrop-filter: blur(4px);
}
.ec-multi-badge i { font-size: 0.78rem; }

/* Unlimited spots — badge styling (#4) */
.ec-spots.unlimited,
.comm-event-spots.unlimited,
.event-detail-spots.unlimited {
  color: var(--primary, #1A5C3A) !important;
  font-weight: 700;
}
.event-detail-spots.unlimited {
  background: rgba(26, 92, 58, 0.08);
  border: 1px solid rgba(26, 92, 58, 0.18);
}

/* ── Restaurant detail "Diferenciais" (#8 c) ─────── */
.rd-diferenciais {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px 14px;
}
.rd-diferencial-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(26, 92, 58, 0.06);
  border: 1px solid rgba(26, 92, 58, 0.12);
  border-radius: 10px;
  font-size: 0.82rem;
  color: var(--text);
  line-height: 1.3;
}
.rd-diferencial-item i {
  font-size: 1rem;
  color: var(--primary, #1A5C3A);
  flex-shrink: 0;
}

/* ── Community Events tab: list/feed toggle (#5) ── */
.comm-events-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 8px;
  flex-wrap: wrap;
}
.comm-events-tg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1px solid var(--border-subtle);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.comm-events-tg:hover { color: var(--text); }
.comm-events-tg.active {
  background: var(--primary, #1A5C3A);
  color: #fff;
  border-color: var(--primary, #1A5C3A);
}
.comm-events-tg i { font-size: 0.95rem; }
.comm-events-hint {
  font-size: 0.7rem;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

/* ── Event feed-mode card (echoes Discover styling) (#5) ── */
.comm-event-feedcard {
  position: relative;
  margin: 12px 14px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s;
}
.comm-event-feedcard:active { transform: scale(0.985); }
.cefc-media {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
}
.cefc-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cefc-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}
.cefc-date {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--text);
  border-radius: 10px;
  padding: 6px 10px;
  text-align: center;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.cefc-day { font-size: 1.25rem; }
.cefc-mon { font-size: 0.68rem; color: var(--text-muted); margin-top: 2px; letter-spacing: 0.05em; }
.cefc-body { padding: 14px 16px 16px; }
.cefc-title {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: 8px;
}
.cefc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.cefc-meta span { display: inline-flex; align-items: center; gap: 4px; }
.cefc-meta span.unlimited { color: var(--primary, #1A5C3A); font-weight: 700; }
.cefc-rests-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin: 6px 0 6px;
}
.cefc-rests {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.cefc-rest-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  background: rgba(26, 92, 58, 0.08);
  border-radius: 20px;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--text);
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cefc-rest-chip img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.cefc-rest-chip.cefc-rest-more {
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.06);
  font-weight: 700;
  color: var(--text-muted);
}
.cefc-rest-single {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(26, 92, 58, 0.08);
  color: var(--primary, #1A5C3A);
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 10px;
}
.cefc-desc {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin: 0;
}

/* ── Event detail multi-restaurant block (#3) ───── */
.event-detail-rests-title {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin: 4px 0 12px;
}
.event-detail-rests-list { margin-bottom: 20px; }

/* ── Collection card: feed-mode badge (#7) ──────── */
.cc-feed-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--primary, #1A5C3A);
  border-radius: 14px;
  padding: 4px 9px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(4px);
}
.cc-feed-badge i { font-size: 0.78rem; }
.collection-card.collection-card-feed .cc-img-wrap {
  /* slightly stronger ring to differentiate */
  outline: 2px solid rgba(201, 168, 76, 0.55);
  outline-offset: -2px;
  border-radius: var(--radius-md, 12px);
}

/* ═══════════════════════════════════════════════════════════
   v1.2 — Restaurant detail social deep-links + soft tags
   ─────────────────────────────────────────────────────────── */
.rd-action-whatsapp,
.rd-action-instagram {
  text-decoration: none;
}
.rd-action-whatsapp { color: #25D366 !important; }
.rd-action-whatsapp i { color: #25D366; }
.rd-action-instagram {
  background: linear-gradient(135deg, rgba(225,48,108,0.08), rgba(245,133,41,0.08));
  color: #C13584 !important;
}
.rd-action-instagram i { color: #C13584; }

.rd-short-desc {
  font-size: 0.92rem;
  color: var(--text-muted, #6b6b6b);
  line-height: 1.45;
  margin: 4px 0 12px;
  font-style: italic;
}

.rd-category-more {
  display: inline-block;
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-muted, #6b6b6b);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 0.7rem;
  font-weight: 700;
  margin-left: 4px;
  cursor: help;
}

.rd-tags-soft .rd-tag-soft {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text, #222);
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-weight: 500;
}

.rd-badge.featured {
  background: rgba(201, 168, 76, 0.18);
  color: #7a5c00;
  font-weight: 700;
}
.rd-badge.featured i { font-size: 0.85em; margin-right: 2px; }

.rd-photo-placeholder {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 280px;
  background: linear-gradient(135deg, rgba(26,92,58,0.06), rgba(201,168,76,0.06));
  color: rgba(0, 0, 0, 0.25);
  font-size: 4rem;
}

/* ═══════════════════════════════════════════════════════════
   v1.2 — Admin restaurant photo manager grid
   ─────────────────────────────────────────────────────────── */
.r-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.r-photo-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border, #e5e5e5);
  background: var(--bg, #f5f5f5);
  cursor: grab;
  transition: transform 0.12s, box-shadow 0.12s;
}
.r-photo-tile.dragging { opacity: 0.5; cursor: grabbing; }
.r-photo-tile.drag-over { box-shadow: 0 0 0 2px var(--green, #1A5C3A); }
.r-photo-tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.r-photo-cover-badge {
  position: absolute; top: 6px; left: 6px;
  background: var(--green, #1A5C3A);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.r-photo-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: #fff;
  font-size: 0.7rem;
  padding: 14px 8px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.r-photo-tile-actions {
  position: absolute; top: 4px; right: 4px;
  display: flex; gap: 2px;
  opacity: 0; transition: opacity 0.15s;
}
.r-photo-tile:hover .r-photo-tile-actions { opacity: 1; }
.r-photo-btn {
  width: 26px; height: 26px;
  border: none; border-radius: 6px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text, #222);
  cursor: pointer;
  font-size: 0.78rem;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.r-photo-btn:hover { background: #fff; }
.r-photo-btn.danger { color: #c0392b; }

/* ═══════════════════════════════════════════════════════════
   v1.2 — Admin maintenance / danger zone
   ─────────────────────────────────────────────────────────── */
.maintenance-card {
  border: 1px solid rgba(192, 57, 43, 0.25) !important;
  background: linear-gradient(180deg, rgba(192,57,43,0.02), transparent) !important;
}
.bulk-delete-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--border, #e5e5e5);
}
.bulk-delete-row:first-of-type { border-top: none; }
.bulk-delete-row code {
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', Menlo, Consolas, monospace;
  font-size: 0.78rem;
}
.btn.btn-danger {
  border-color: rgba(192, 57, 43, 0.4) !important;
  color: #c0392b !important;
  background: rgba(192, 57, 43, 0.06);
}
.btn.btn-danger:hover {
  background: rgba(192, 57, 43, 0.12);
  border-color: rgba(192, 57, 43, 0.6) !important;
}
.btn.btn-primary.btn-danger {
  background: #c0392b !important;
  color: #fff !important;
  border-color: #c0392b !important;
}
.btn.btn-primary.btn-danger:hover {
  background: #a83227 !important;
  border-color: #a83227 !important;
}

/* ═══════════════════════════════════════════════
   v1.3 — Icon pack, iFood action, search alignment,
          admin section toggles
   ═══════════════════════════════════════════════ */

/* v1.6 — Action row chips now uniformly icon-only (no text labels).
   ─────────────────────────────────────────────────────────────────
   - Brand-color icons (WhatsApp, Instagram, iFood, Share) come in as
     <img src="/assets/icons/social/...svg"> — full-color, transparent
     SVG bg, can't inherit currentColor.
   - Theme-adapting icons (Evaluation outline, optional Heart outline)
     are INLINED as <svg>...</svg> with stroke="currentColor", so they
     auto-adapt to light/dark via the parent button's `color`. */
.rd-action-btn.rd-action-icon {
  /* Square chip — sized by padding so it tracks the height of the
     surrounding action buttons across font-scale changes. */
  flex: 0 0 auto;
  width: 48px;
  min-width: 48px;
  padding: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Reset any text-color tinting from earlier rules and give a sane
     default `color` so the inlined currentColor SVGs (eval / heart)
     pick up the theme text color. */
  color: var(--text) !important;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  cursor: pointer;
  /* Smooth subtle press feedback */
  transition: background 0.15s, transform 0.15s;
}
.rd-action-btn.rd-action-icon:active {
  background: var(--surface-2, var(--bg-2));
  transform: scale(0.97);
}

/* The icon image / inlined svg — fixed visual size, sharp at retina. */
.rd-action-btn.rd-action-icon .rd-action-img,
.rd-action-btn.rd-action-icon .rd-action-svg {
  width: 28px;
  height: 28px;
  display: block;
  flex-shrink: 0;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  pointer-events: none;
}

/* Keep all chips on a neutral surface — the icon carries the brand
   color, the chip is just a touch-target backplate. Override any
   legacy color rules from older versions. */
.rd-action-btn.rd-action-icon.rd-action-whatsapp,
.rd-action-btn.rd-action-icon.rd-action-instagram,
.rd-action-btn.rd-action-icon.rd-action-ifood,
.rd-action-btn.rd-action-icon.rd-action-share,
.rd-action-btn.rd-action-icon.rd-action-eval {
  background: var(--surface);
  border-color: var(--border-subtle);
}

/* ── Home search bar: tighten alignment with the topbar (v1.9.3).
   The topbar is fixed (56px + safe-top). #home-content is the
   scrollable region and the sticky search bar sits at top:0 of that
   scroller. We give it consistent breathing room above and below so
   it visually clicks under the topbar without a thick gap, and so
   that when it pins, the divider hairline reads as one clean line
   (not stacked with the topbar's own bottom border). */
#home-content .home-search-bar.home-search-sticky {
  /* Keep main.css default horizontal margin (14px 16px 8px). Just
     normalize vertical rhythm here. */
  margin-top: 8px;
  margin-bottom: 12px;
  padding-top: 11px;
  padding-bottom: 11px;
}
@supports (padding-top: env(safe-area-inset-top)) {
  /* On notched iOS the topbar already accounts for the safe area, so the
     home search bar (which lives below) doesn't need extra top padding —
     just keep its 8px breathing room. */
  #home-content .home-search-bar.home-search-sticky { margin-top: 8px; }
}

/* ── Admin: section visibility toggles ── */
.admin-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  margin-bottom: 8px;
}
.admin-toggle-row + .admin-toggle-row { margin-top: 0; }
.admin-toggle-row .atr-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
}
.admin-toggle-row .atr-desc {
  font-size: 0.74rem;
  color: var(--muted);
  margin-top: 2px;
}
.admin-toggle-switch {
  position: relative;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
  display: inline-block;
}
.admin-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.admin-toggle-switch .slider {
  position: absolute;
  inset: 0;
  background: #ccc;
  border-radius: 24px;
  transition: background 0.2s;
}
.admin-toggle-switch .slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.admin-toggle-switch input:checked + .slider {
  background: #1A5C3A; /* primary */
}
.admin-toggle-switch input:checked + .slider::before {
  transform: translateX(18px);
}

/* ═══════════════════════════════════════════════════════════
   v1.7.5 — Chef Detail + Chef Collection Detail modals
   Mirrors event-detail visual language so they feel native to the app.
   ─────────────────────────────────────────────────────────── */

/* ── Chef Detail Modal ── */
.chef-detail-header {
  display: flex; align-items: center; gap: 14px;
  padding: 24px 20px 16px;
  background: linear-gradient(180deg, rgba(0,0,0,0.04), transparent);
}
.chef-detail-avatar-wrap {
  width: 78px; height: 78px;
  border-radius: 50%; flex-shrink: 0;
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  position: relative;
}
.chef-detail-avatar-img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.chef-detail-avatar-fallback {
  width: 100%; height: 100%;
  align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.65rem; color: #fff;
  letter-spacing: 0.02em;
}
.chef-detail-titles { flex: 1; min-width: 0; }
.chef-detail-name {
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 700; line-height: 1.15;
  color: var(--text); margin-bottom: 2px;
}
.chef-detail-role {
  font-size: 0.82rem; color: var(--text-muted);
  margin-bottom: 4px;
}
.chef-detail-city {
  font-size: 0.74rem; color: var(--text-muted);
  display: flex; align-items: center; gap: 4px;
}

.chef-detail-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; padding: 0 20px 20px;
}
.chef-detail-stat {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 8px;
  text-align: center;
}
.chef-detail-stat .cds-num {
  font-family: var(--font-display);
  font-size: 1.4rem; font-weight: 700; color: var(--primary);
  line-height: 1;
}
.chef-detail-stat .cds-lbl {
  font-size: 0.66rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-top: 4px;
}

.chef-detail-bio {
  padding: 0 20px 16px;
  font-size: 0.88rem; line-height: 1.55;
  color: var(--text);
}

.chef-detail-section-title {
  padding: 12px 20px 8px;
  font-size: 0.7rem; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}

.chef-detail-rest-card {
  display: flex; align-items: center; gap: 12px;
  margin: 0 20px 12px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.chef-detail-rest-card:active { background: var(--bg); transform: scale(0.98); }
.chef-detail-rest-img {
  width: 56px; height: 56px; border-radius: 8px;
  object-fit: cover; flex-shrink: 0;
}
.chef-detail-rest-info { flex: 1; min-width: 0; }
.chef-detail-rest-name {
  font-weight: 600; font-size: 0.92rem;
  color: var(--text); margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chef-detail-rest-meta {
  font-size: 0.74rem; color: var(--text-muted);
}

.chef-detail-collections {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px; padding: 0 20px 16px;
}
.chef-detail-coll-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.1s;
}
.chef-detail-coll-card:active { transform: scale(0.98); }
.chef-detail-coll-img {
  width: 100%; height: 90px; object-fit: cover; display: block;
}
.chef-detail-coll-title {
  padding: 8px 10px 2px;
  font-size: 0.78rem; font-weight: 600;
  color: var(--text); line-height: 1.25;
}
.chef-detail-coll-count {
  padding: 0 10px 8px;
  font-size: 0.68rem; color: var(--text-muted);
}

.chef-detail-follow-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 16px 20px 8px;
  padding: 12px 16px;
  background: var(--primary); color: var(--accent-light);
  border: none; border-radius: var(--radius-full);
  font-size: 0.88rem; font-weight: 700;
  cursor: pointer; width: calc(100% - 40px);
  transition: opacity 0.15s, transform 0.1s;
}
.chef-detail-follow-btn:active { transform: scale(0.98); opacity: 0.9; }

/* ── Chef Collection Detail Modal ── */
.coll-detail-hero-wrap {
  position: relative;
  width: 100%; height: 220px;
  overflow: hidden;
}
.coll-detail-hero {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.coll-detail-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.8) 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 20px;
  pointer-events: none; /* don't intercept the close button above */
}
.coll-detail-title {
  font-family: var(--font-display);
  font-size: 1.8rem; font-weight: 700; color: #fff;
  line-height: 1.1; margin-bottom: 6px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.coll-detail-count {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.82rem; color: rgba(255,255,255,0.9);
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.coll-detail-chef-strip {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 20px 0;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.coll-detail-chef-strip:active { background: var(--bg); transform: scale(0.98); }
.coll-detail-chef-strip .cdcs-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700; font-size: 0.95rem; color: #fff;
  flex-shrink: 0;
}
.coll-detail-chef-strip .cdcs-info { flex: 1; min-width: 0; }
.coll-detail-chef-strip .cdcs-label {
  font-size: 0.66rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 1px;
}
.coll-detail-chef-strip .cdcs-name {
  font-weight: 700; font-size: 0.92rem; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.coll-detail-chef-strip .cdcs-role {
  font-size: 0.74rem; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.coll-detail-description {
  padding: 14px 20px 4px;
  font-size: 0.88rem; line-height: 1.55;
  color: var(--text);
}

.coll-detail-section-title {
  padding: 16px 20px 8px;
  font-size: 0.7rem; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}

.coll-detail-list {
  display: flex; flex-direction: column;
  gap: 8px; padding: 0 20px 8px;
}
.coll-detail-rest-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.coll-detail-rest-row:active { background: var(--bg); transform: scale(0.99); }
.coll-detail-rest-row .cdrr-img {
  width: 60px; height: 60px; border-radius: 8px;
  object-fit: cover; flex-shrink: 0;
}
.coll-detail-rest-row .cdrr-body { flex: 1; min-width: 0; }
.coll-detail-rest-row .cdrr-name {
  font-weight: 600; font-size: 0.92rem;
  color: var(--text); margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.coll-detail-rest-row .cdrr-meta {
  font-size: 0.74rem; color: var(--text-muted);
}
.coll-detail-empty {
  padding: 20px; text-align: center;
  color: var(--text-muted); font-size: 0.85rem;
}

/* Make data-action cards keyboard-focusable with a visible ring */
[data-action]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 12px;
}
/* Cursor cue for clickable cards */
[data-action] { cursor: pointer; }
/* v1.7.5.1 — visible tap feedback so users see their tap registered */
[data-action] { -webkit-tap-highlight-color: rgba(26, 92, 58, 0.18); }
.event-card[data-action]:active,
.collection-card[data-action]:active,
.chef-follow-card[data-action]:active {
  transform: scale(0.985);
  transition: transform 0.08s ease;
}


/* ════════════════════════════════════════════════════════════
   v1.9.5 — Weekday chips + elegant hours panel
   ════════════════════════════════════════════════════════════ */

/* ── Weekday chips (Search screen) ────────────────────────────
   A second row of chips under the filter-chips. 7 short labels
   (Dom..Sáb), today subtly highlighted, active state in primary.
   Compact and tap-friendly: 36px min height.                    */
.day-chips {
  display: flex;
  gap: 6px;
  padding: 8px 0 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.day-chips::-webkit-scrollbar { display: none; }
.day-chip {
  flex: 1 1 0;
  min-width: 40px;
  min-height: 36px;
  padding: 7px 4px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--bg);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
  -webkit-tap-highlight-color: transparent;
}
.day-chip.today {
  /* Today: subtle accent ring on the chip border, no fill */
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border-subtle));
  color: var(--primary);
}
.day-chip.active {
  background: var(--primary);
  color: var(--bg);
  border-color: var(--primary);
}
.day-chip:active { transform: scale(0.97); }

/* ── Elegant hours panel (mobile-tuned overrides) ─────────────
   The base styles live in css/desktop.css (.rd-hours-panel). On
   mobile they render but felt utilitarian. These rules tighten
   the head row, give "HOJE" an editorial feel, and make the
   weekly grid breathe like a magazine schedule list.            */
.rd-hours-panel {
  border-radius: 14px;
  /* On dark theme the surface tint can be too close to bg —
     bump it slightly with a hairline border. */
  border-color: color-mix(in srgb, var(--text) 10%, var(--border-subtle));
}
.rd-hours-panel-head {
  /* Use baseline so the dot lines up with the cap-height of the label */
  align-items: baseline;
}
.rd-hours-panel-status {
  font-size: 1rem;
  letter-spacing: -0.01em;
}
.rd-hours-state-label {
  font-weight: 600;
}
.rd-hours-panel-today-label {
  /* Editorial: italic Cormorant for the "HOJE" eyebrow */
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 0.84rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
  font-weight: 500;
}
.rd-hours-panel-today-val {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.rd-hours-panel-grid {
  /* Tabular nums for clean column alignment of the times */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: 0.88rem;
}
.rd-hours-panel-grid .hours-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
}
.rd-hours-panel-grid .hours-day {
  font-weight: 500;
  letter-spacing: -0.005em;
}
.rd-hours-panel-grid .hours-time {
  text-align: right;
  color: var(--text);
}
/* "Aberto 24 h" pill — quieter, brand-neutral colors */
.rd-hours-panel-grid .hours-24h {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  padding: 2px 9px;
}
.rd-hours-panel-grid .hours-closed-day {
  font-style: italic;
  color: var(--text-muted);
}

/* TODAY row: cleaner editorial highlight — left rule + bold instead of
   the soft green gradient. Reads "this is the line that matters". */
.rd-hours-panel-grid .hours-row.today {
  background: transparent;
  border-radius: 0;
  margin: 0;
  padding: 7px 0 7px 12px;
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
}
.rd-hours-panel-grid .hours-row.today::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: var(--primary);
}
.rd-hours-panel-grid .hours-row.today .hours-day,
.rd-hours-panel-grid .hours-row.today .hours-time {
  color: var(--text);
  font-weight: 700;
}
.rd-hours-panel-grid .hours-row.today .hours-24h {
  /* Inherit the same pill styling but slightly stronger */
  background: color-mix(in srgb, var(--primary) 16%, transparent);
}

/* Mobile compact rhythm — keep the head readable when stacked */
@media (max-width: 600px) {
  .rd-hours-panel { padding: 14px 16px; }
  .rd-hours-panel-head { gap: 8px; padding-bottom: 10px; margin-bottom: 10px; }
}


/* ════════════════════════════════════════════════════════════
   v1.9.6 — Home spacing rebalance after search bar removal
   ════════════════════════════════════════════════════════════
   The sticky home search bar took the slot directly after the
   brand strip and provided ~70px of vertical rhythm. With it
   gone, the brand strip butted right up against the first
   restaurant carousel, looking cramped. This adds a small
   intentional gap above the first content section so the
   landing reads as deliberate, not deflated.                 */
#home-content > .home-brand-strip {
  /* Brand strip already has 12-14px padding; add a touch more
     bottom margin so the next section starts on its own beat. */
  margin-bottom: 6px;
}
#home-content > .home-section:first-of-type,
#home-content #nearby-section {
  /* First content section after brand: a hair more breathing room
     so the page doesn't feel like content begins mid-stride. */
  padding-top: 4px;
}

/* ════════════════════════════════════════════════════════════════════
   v1.9.7 — PREMIUM MOBILE UX LAYER
   ════════════════════════════════════════════════════════════════════
   Single additive layer covering:
     1. Premium Hours panel (collapsible week, status badges)
     2. Premium event cards (status pill, capacity bar, iFood pill)
     3. Premium EventDetail (near-page layout, capacity track, iFood block)
     4. Mobile launch cleanup (no duplicate-feeling hero)
     5. Bottom-nav: "Pesquisar" stays the right affordance on Discover
   All rules namespaced under v1.9.7 classes so nothing else is affected.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. Premium Hours panel ──────────────────────────────────────── */
.rd-hours-mount {
  margin-bottom: 16px;
}
.hours-panel {
  background: var(--surface, #f7f3eb);
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
  border-radius: 14px;
  padding: 14px 14px 12px;
  position: relative;
  overflow: hidden;
}
.hours-panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.hours-panel-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.01em;
}
.hours-panel-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.04);
}
.hours-panel.is-open    .hours-panel-state-label { color: #117a39; }
.hours-panel.is-open    .hours-panel-dot         { background: #1ea35a; box-shadow: 0 0 0 3px rgba(30,163,90,0.18); }
.hours-panel.is-closing .hours-panel-state-label { color: #b56b00; }
.hours-panel.is-closing .hours-panel-dot         { background: #e5910a; box-shadow: 0 0 0 3px rgba(229,145,10,0.18); }
.hours-panel.is-closed  .hours-panel-state-label { color: #b5292d; }
.hours-panel.is-closed  .hours-panel-dot         { background: #d83a3f; box-shadow: 0 0 0 3px rgba(216,58,63,0.18); }

.hours-panel-today {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-muted, #6b6357);
  max-width: 60%;
  text-align: right;
}
.hours-panel-today-key {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.7rem;
  color: var(--text-muted, #6b6357);
}
.hours-panel-today-val {
  color: var(--text, #1a1714);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hours-panel-toggle {
  appearance: none;
  background: transparent;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  margin: 0;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary, #1A5C3A);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hours-panel-toggle-icon {
  transition: transform 0.22s ease;
  font-size: 0.9rem;
}
.hours-panel[data-collapsed="0"] .hours-panel-toggle-icon {
  transform: rotate(180deg);
}
.hours-panel-week {
  display: grid;
  gap: 4px;
  /* Default: visible. JS sets data-collapsed="1" to hide. */
  overflow: hidden;
  max-height: 600px;
  transition: max-height 0.28s ease, opacity 0.22s ease, margin-top 0.22s ease;
  margin-top: 6px;
  opacity: 1;
}
.hours-panel[data-collapsed="1"] .hours-panel-week {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  pointer-events: none;
}
.hours-panel-week .hours-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  font-size: 0.84rem;
  border-bottom: 1px dashed rgba(0,0,0,0.05);
}
.hours-panel-week .hours-row:last-child { border-bottom: 0; }
.hours-panel-week .hours-row.today {
  background: rgba(26,92,58,0.06);
  border-radius: 8px;
  padding: 6px 8px;
  margin: 0 -8px;
}
.hours-panel-week .hours-day {
  color: var(--text-muted, #6b6357);
  font-weight: 600;
}
.hours-panel-week .hours-row.today .hours-day {
  color: var(--primary, #1A5C3A);
}
.hours-panel-week .hours-time {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text, #1a1714);
  font-weight: 500;
}
.hours-panel-week .hours-closed-day {
  color: #b5292d;
  font-weight: 600;
}
.hours-panel-week .hours-24h {
  color: #117a39;
  font-weight: 700;
}

/* Standalone status badge (use anywhere in a card) */
.hours-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  background: rgba(0,0,0,0.05);
  color: var(--text, #1a1714);
}
.hours-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.hours-badge.is-open    { background: rgba(30,163,90,0.14);  color: #117a39; }
.hours-badge.is-closing { background: rgba(229,145,10,0.16); color: #b56b00; }
.hours-badge.is-closed  { background: rgba(216,58,63,0.14);  color: #b5292d; }

/* ── 2. Premium Event Cards (home carousel) ──────────────────────── */
.event-card-v2 {
  width: 260px;
  background: var(--surface, #f7f3eb);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 1px 0 rgba(0,0,0,0.02);
  cursor: pointer;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  flex-shrink: 0;
}
.event-card-v2:active {
  transform: scale(0.985);
}
.event-card-v2 .ec-img-wrap {
  height: 150px;
  position: relative;
  overflow: hidden;
}
.event-card-v2 .ec-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.event-card-v2:hover .ec-img { transform: scale(1.04); }
.event-card-v2 .ec-img-grad {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.0) 35%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}
.event-card-v2 .ec-date-badge {
  position: absolute; top: 12px; left: 12px;
  background: rgba(255,255,255,0.96);
  color: var(--text, #1a1714);
  border-radius: 10px;
  padding: 6px 10px;
  text-align: center;
  min-width: 44px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.event-card-v2 .ec-day { font-size: 1.1rem; font-weight: 800; line-height: 1; color: var(--primary, #1A5C3A); }
.event-card-v2 .ec-month {
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted, #6b6357);
  margin-top: 2px;
}
.event-card-v2 .ec-status-pill {
  position: absolute; bottom: 10px; left: 12px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: rgba(255,255,255,0.96);
  color: var(--text, #1a1714);
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
.event-card-v2 .ec-status-pill i { font-size: 0.9rem; }
.event-card-v2 .ec-status-available  { color: #117a39; }
.event-card-v2 .ec-status-unlimited  { color: #117a39; }
.event-card-v2 .ec-status-filling    { color: #1A5C3A; }
.event-card-v2 .ec-status-almost     { color: #b56b00; }
.event-card-v2 .ec-status-last       { color: #c74416; background: #fff; }
.event-card-v2 .ec-status-soldout    { color: #b5292d; background: rgba(216,58,63,0.10); }

.event-card-v2 .ec-ifood-pill {
  /* v1.9.7.1 — the iFood icon is now the official red-circle brand
     mark. Drop the white wrapper background; just give it a tight
     drop shadow so it reads on dark image backgrounds. */
  position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border-radius: 50%;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35));
}
.event-card-v2 .ec-ifood-pill img {
  width: 30px; height: 30px;   /* fill the slot — it's already round */
  border-radius: 50%;
  display: block;
}

.event-card-v2 .ec-info { padding: 12px 14px 14px; }
.event-card-v2 .ec-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text, #1a1714);
  line-height: 1.22;
  margin-bottom: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.event-card-v2 .ec-rest {
  font-size: 0.74rem;
  color: var(--text-muted, #6b6357);
  display: flex; align-items: center; gap: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.event-card-v2 .ec-meta {
  display: flex;
  gap: 12px;
  margin-top: 7px;
  font-size: 0.74rem;
  color: var(--text-muted, #6b6357);
}
.event-card-v2 .ec-meta span {
  display: inline-flex; align-items: center; gap: 4px;
}

/* v2.7.2 — "Tenho interesse" count pill on event cards.
   Sits inside .ec-meta with the time / price spans. The count gets
   hydrated by EventInterest.hydrateCards() after first paint, so the
   visible state goes dash → real number with no layout shift. */
.event-card-v2 .ec-interest {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(201, 168, 76, 0.10);
  color: var(--primary-dark, #1A5C3A);
  font-weight: 600;
  font-size: 0.72rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
}
.event-card-v2 .ec-interest i { font-size: 0.78rem; }
.event-card-v2 .ec-interest-n { font-variant-numeric: tabular-nums; }

.event-card-v2 .ec-cap {
  margin-top: 10px;
  height: 4px;
  background: rgba(0,0,0,0.06);
  border-radius: 4px;
  overflow: hidden;
}
.event-card-v2 .ec-cap-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
  background: linear-gradient(90deg, #1ea35a 0%, #2dbf6c 100%);
}
.event-card-v2 .ec-cap-fill-filling  { background: linear-gradient(90deg, #2196f3 0%, #1A5C3A 100%); }
.event-card-v2 .ec-cap-fill-almost   { background: linear-gradient(90deg, #e5910a 0%, #b56b00 100%); }
.event-card-v2 .ec-cap-fill-last     { background: linear-gradient(90deg, #c74416 0%, #b5292d 100%); }
.event-card-v2 .ec-cap-fill-soldout  { background: #b5292d; }

/* ── 3. Premium EventDetail (page-like slide-up) ─────────────────── */
body.event-detail-open #event-modal.r-sheet {
  /* v2.0.5 — was 96vh which left only ~4vh of backdrop visible at top
     (effectively unreachable). 88vh leaves ~12vh of dimmed backdrop
     above the modal — clearly tappable to dismiss, matching the
     restaurant detail's 85vh feel. Same proportions as RestaurantDetail
     so the two surfaces feel like siblings, not cousins. */
  max-height: 88vh !important;
}
body.event-detail-open #event-modal .r-sheet-inner {
  max-height: 88vh !important;
  /* extra bottom padding so CTA stack clears the home indicator */
  padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)) !important;
}
/* v2.0.5 — visible drag handle at top of the event modal. Gives the
   user a clear "swipe-down or tap-here" affordance, matching the
   pattern used by hours-sheet. Positioned absolute so it doesn't
   push content. */
body.event-detail-open #event-modal.r-sheet::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 4px;
  border-radius: 2px;
  background: rgba(0,0,0,0.18);
  z-index: 10;
  pointer-events: none;
}
.event-detail-hero-wrap {
  position: relative;
  overflow: hidden;
}
.event-detail-hero {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}
.event-detail-hero-grad {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}
.event-detail-status {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,0.97);
  color: var(--text, #1a1714);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
}
.event-detail-status i { font-size: 0.95rem; }
.event-detail-status.ev-avail-available  { color: #117a39; }
.event-detail-status.ev-avail-unlimited  { color: #117a39; }
.event-detail-status.ev-avail-filling    { color: #1A5C3A; }
.event-detail-status.ev-avail-almost     { color: #b56b00; }
.event-detail-status.ev-avail-last       { color: #c74416; }
.event-detail-status.ev-avail-soldout    { color: #b5292d; background: rgba(216,58,63,0.12); }

.event-detail-body {
  padding: 20px 18px 8px;
}
.event-detail-date-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}
.event-detail-badge {
  flex-shrink: 0;
  background: var(--primary, #1A5C3A);
  color: #fff;
  border-radius: 12px;
  padding: 8px 10px 6px;
  text-align: center;
  min-width: 56px;
  box-shadow: 0 4px 12px rgba(26,92,58,0.25);
}
.event-detail-badge .edb-day {
  font-size: 1.5rem; font-weight: 800; line-height: 1;
}
.event-detail-badge .edb-mon {
  font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.1em; margin-top: 4px;
  color: var(--accent, #C9A84C);
}
.event-detail-titles { flex: 1; min-width: 0; }
.event-detail-title {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--text, #1a1714);
  margin-bottom: 4px;
}
.event-detail-rest {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-muted, #6b6357);
  font-size: 0.82rem;
}

.event-detail-info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.event-detail-info-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px;
  background: var(--surface, #f7f3eb);
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--text, #1a1714);
}
.event-detail-info-item i {
  color: var(--primary, #1A5C3A);
  font-size: 0.9rem;
}

.event-detail-capacity {
  background: var(--surface, #f7f3eb);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.event-detail-capacity-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.ed-cap-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text, #1a1714);
}
.ed-cap-state {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.ed-cap-state.ev-avail-available { color: #117a39; }
.ed-cap-state.ev-avail-unlimited { color: #117a39; }
.ed-cap-state.ev-avail-filling   { color: #1A5C3A; }
.ed-cap-state.ev-avail-almost    { color: #b56b00; }
.ed-cap-state.ev-avail-last      { color: #c74416; }
.ed-cap-state.ev-avail-soldout   { color: #b5292d; }
.event-detail-capacity-track {
  height: 6px;
  background: rgba(0,0,0,0.06);
  border-radius: 4px;
  overflow: hidden;
}
.event-detail-capacity-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #1ea35a, #2dbf6c);
  transition: width 0.6s ease;
}
.event-detail-capacity-fill.ev-avail-filling { background: linear-gradient(90deg, #2196f3, #1A5C3A); }
.event-detail-capacity-fill.ev-avail-almost  { background: linear-gradient(90deg, #e5910a, #b56b00); }
.event-detail-capacity-fill.ev-avail-last    { background: linear-gradient(90deg, #c74416, #b5292d); }
.event-detail-capacity-fill.ev-avail-soldout { background: #b5292d; }

.event-detail-ifood {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid rgba(229,49,57,0.18);
  border-radius: 14px;
  margin-bottom: 16px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.event-detail-ifood:active {
  transform: scale(0.99);
  box-shadow: 0 2px 8px rgba(229,49,57,0.18);
}
.event-detail-ifood-icon {
  width: 36px; height: 36px;
  flex-shrink: 0;
}
.event-detail-ifood-body { flex: 1; min-width: 0; }
.event-detail-ifood-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #e53139;
}
.event-detail-ifood-sub {
  font-size: 0.74rem;
  color: var(--text-muted, #6b6357);
  margin-top: 2px;
}
.event-detail-ifood-arrow {
  color: #e53139;
  font-size: 1rem;
}

.event-detail-desc {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text, #1a1714);
  margin: 0 0 18px;
}

.event-detail-chef {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface, #f7f3eb);
  border-radius: 14px;
  margin-bottom: 18px;
}
.event-detail-chef-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent, #C9A84C);
  flex-shrink: 0;
}
.event-detail-chef-info { flex: 1; min-width: 0; }
.event-detail-chef-name {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text, #1a1714);
}
.event-detail-chef-role {
  font-size: 0.74rem;
  color: var(--text-muted, #6b6357);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.event-detail-chef-follow {
  appearance: none;
  background: var(--primary, #1A5C3A);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}
.event-detail-chef-follow:active { transform: scale(0.97); }

.event-detail-rests-title {
  font-family: var(--font-display, serif);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 12px 0 10px;
  color: var(--text, #1a1714);
}
.event-detail-rests-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.event-detail-rest-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--surface, #f7f3eb);
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.event-detail-rest-row-solo { margin-bottom: 18px; }
.event-detail-rest-row:active { background: rgba(0,0,0,0.04); }
.event-detail-rest-row .edr-img {
  width: 52px; height: 52px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}
.event-detail-rest-row .edr-body { flex: 1; min-width: 0; }
.event-detail-rest-row .edr-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text, #1a1714);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.event-detail-rest-row .edr-meta {
  font-size: 0.74rem;
  color: var(--text-muted, #6b6357);
  margin-top: 1px;
}
.event-detail-rest-row .edr-state {
  font-size: 0.72rem;
  margin-top: 3px;
  font-weight: 600;
}
.event-detail-rest-row .edr-state.is-open   { color: #117a39; }
.event-detail-rest-row .edr-state.is-closed { color: #b5292d; }
.event-detail-rest-row .edr-arrow {
  color: var(--text-muted, #6b6357);
  font-size: 0.95rem;
  flex-shrink: 0;
}

.event-detail-cta-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.event-detail-reserve-btn,
.event-detail-save-btn,
.event-detail-share-btn,
.event-detail-interest-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 0.92rem;
  font-weight: 700;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, opacity 0.15s ease, background 0.15s ease;
}
.event-detail-reserve-btn {
  background: var(--primary, #1A5C3A);
  color: #fff;
  box-shadow: 0 4px 14px rgba(26,92,58,0.25);
}
.event-detail-reserve-btn:active { transform: scale(0.98); }
.event-detail-reserve-btn.is-disabled {
  background: rgba(0,0,0,0.18);
  color: #fff;
  box-shadow: none;
  cursor: not-allowed;
}
.event-detail-save-btn {
  background: var(--surface, #f7f3eb);
  color: var(--text, #1a1714);
}
.event-detail-save-btn.saved {
  background: rgba(201,168,76,0.18);
  color: var(--primary, #1A5C3A);
}
.event-detail-share-btn {
  background: transparent;
  color: var(--primary, #1A5C3A);
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.10));
}

/* v2.7.2 — "Tenho interesse" button on the event detail modal.
   Neutral cream surface by default, gold-tinted when toggled on, with
   a trailing count pill so the user always sees how many people are
   interested. The state flip is handled by EventInterest.toggle() in
   js/event-interests-client.js; the aria-pressed attribute is the
   source of truth for the .is-interested styling here. */
.event-detail-interest-btn {
  background: var(--surface, #f7f3eb);
  color: var(--text, #1a1714);
  position: relative;
}
.event-detail-interest-btn.is-interested,
.event-detail-interest-btn[aria-pressed="true"] {
  background: rgba(201,168,76,0.22);
  color: var(--primary, #1A5C3A);
  box-shadow: 0 0 0 1px rgba(201,168,76,0.45) inset;
}
.event-detail-interest-btn .event-interest-count {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
  color: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.event-detail-interest-btn.is-interested .event-interest-count,
.event-detail-interest-btn[aria-pressed="true"] .event-interest-count {
  background: rgba(26,92,58,0.12);
}

/* v2.7.2 — Notícias home section cards.
   v2.7.22 — flipped from horizontal 220px scroll to a vertical
   full-width stack. Each card spans the home-section width;
   title and summary show their FULL text (no line clamp);
   the card itself is non-interactive (it's an <article>, not a
   <button> as in v2.7.18). The only interactive element is the
   optional "Leia mais ↗" link rendered when the row has a
   link_url — surfaced as .news-card-link below.

   The container (#news-scroll) gets a runtime class swap from
   .h-scroll to .news-stack so the rest of the home layout stays
   unchanged; the loading state still uses .h-scroll's horizontal
   padding so there's no visual jump on first paint.
*/

/* Vertical stack container — drops the flex-row + scrollbar of
   .h-scroll and stacks children with a comfortable gap. Same 16px
   gutter as the rest of the home so cards align with section
   titles and other rails. */
.news-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 16px 4px;
}

.news-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--surface, #fff);
  border: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
  border-radius: 16px;
  overflow: hidden;
  color: inherit;
  /* No transform on hover — the card is passive in v2.7.22.
     Keep the subtle shadow that signals "this is a discrete card,
     not background text". */
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  /* Padding/margin/text-align retained from the v2.7.18 button
     reset for paranoia — old cached CSS that still sees a
     <button class="news-card"> won't pick up weird browser
     defaults. The current renderer ships <article> so these are
     no-ops in the happy path. */
  padding: 0;
  margin: 0;
  text-align: left;
  font: inherit;
}
.news-card-img-wrap {
  position: relative;
  width: 100%;
  /* Hero image with a magazine-friendly 16:9 ratio. Crops cleanly
     across the wide range of editorial cover images the source
     APIs surface. */
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, rgba(26,92,58,0.10), rgba(201,168,76,0.10));
  overflow: hidden;
}
.news-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.news-card-img-placeholder,
.news-card-img-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 2.4rem;
  color: var(--primary, #1A5C3A);
  opacity: 0.45;
}
.news-card-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.news-card-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.72rem;
  color: var(--text-muted, #6b6357);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.news-card-source {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.news-card-title {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 1.32rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text, #1a1714);
  margin: 0;
  /* v2.7.22 — no -webkit-line-clamp. Show the full title. The
     operator wants "fit all the news text to be visible". */
}
.news-card-summary {
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--text-muted, #6b6357);
  margin: 0;
  /* v2.7.22 — no -webkit-line-clamp. Full summary visible. */
}
.news-card-link {
  margin-top: 4px;
  align-self: flex-start;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary, #1A5C3A);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 0;
  /* Generous tap target for mobile without making the link feel
     like a floating button. */
  min-height: 32px;
}
.news-card-link:hover { text-decoration: underline; }
.news-card-link:focus-visible {
  outline: 2px solid var(--primary, #1A5C3A);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ─────────────────────────────────────────────────────────────────────
   v2.7.30 — Notícias HORIZONTAL CAROUSEL (mobile-first)
   ─────────────────────────────────────────────────────────────────────
   Reverts the v2.7.22 vertical-stack to an elegant horizontal rail
   per the v2.7.30 brief ("Notícias must scroll horizontally on mobile,
   elegant card carousel, CSS scroll snap").

   Container = #news-scroll with classes .h-scroll AND .news-rail.
   - .h-scroll already provides the row layout + hidden scrollbar.
   - .news-rail adds scroll-snap, gutters, and the v2.7.30 card sizing.

   Each .news-card inside a .news-rail is sized to ~85vw on mobile
   (peek of next card on the right) and 280px on desktop. The card's
   internal layout (image / body / title / summary / link) is the
   same as the v2.7.22 stack — only the container changes, so the
   typography and image treatment stay consistent across the rest
   of the section.

   When the renderer leaves the container in its loading state
   (.news-loading present), the rail rules are inert — the loading
   placeholder is a single flex child and the snap behavior simply
   doesn't apply. No visual jump on first paint.
*/
.news-rail {
  /* horizontal scroll with snap */
  display: flex;
  flex-direction: row;
  gap: 12px;
  padding: 4px 16px 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 16px;
  /* iOS momentum + hide scrollbar (consistent with other .h-scroll
     rails in the home page). */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.news-rail::-webkit-scrollbar { display: none; }

.news-rail .news-card {
  /* Card width: ~85vw on mobile so the next card peeks; capped at
     320px so the card doesn't get oversized on tablets/small
     desktops. The .news-rail's own desktop rule below tightens
     this to a fixed 280px for the larger viewport. */
  flex: 0 0 min(85vw, 320px);
  scroll-snap-align: start;
  /* Reset the v2.7.22 full-width stack card to a fixed-size
     carousel card. The internal layout (img/body) is unchanged. */
  width: auto;
  display: flex;
  flex-direction: column;
}
/* The card itself may be rendered as an <a> when link_url is set
   (v2.7.30 makes the whole card clickable). Reset anchor styling
   so the card visually looks identical regardless of element. */
.news-rail a.news-card {
  text-decoration: none;
  color: inherit;
}
.news-rail a.news-card:hover {
  /* Subtle lift on hover — feels intentional, doesn't compete with
     the scroll-snap motion. */
  transform: translateY(-1px);
  transition: transform 160ms ease, box-shadow 160ms ease;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}
.news-rail a.news-card:focus-visible {
  outline: 2px solid var(--primary, #1A5C3A);
  outline-offset: 3px;
  border-radius: 16px;
}

/* Desktop polish — slightly smaller fixed-width cards (no need for
   85vw on a 1200px+ canvas). Above 768px we also snap to nearest
   instead of mandatory, so reading-mode scroll stays comfortable. */
@media (min-width: 768px) {
  .news-rail {
    gap: 16px;
    padding: 4px 16px 16px;
    scroll-snap-type: x proximity;
  }
  .news-rail .news-card {
    flex-basis: 300px;
  }
}

/* Reduced-motion users — disable the snap so the rail behaves as a
   plain horizontal scroll. The snap-points themselves are an
   accessibility-friendly default but some users prefer pure linear
   scrolling, and the OS preference is the right signal. */
@media (prefers-reduced-motion: reduce) {
  .news-rail { scroll-snap-type: none; }
  .news-rail a.news-card:hover { transform: none; }
}

/* ── 4. Mobile launch cleanup ────────────────────────────────────── */
/* Splash crossfade gets a longer easing so the brand strip
   behind it doesn't appear to "pop in" — the splash dims out
   smoothly, revealing the home in a single beat. */
#splash {
  transition: opacity 0.45s ease;
}
/* The wordmark "Capital da Boa Mesa" appears on the splash AND on the
   brand strip — a slight delay on the brand strip's first-paint fade
   keeps them from visually clashing at the moment of handoff. */
.home-brand-strip {
  animation: bm-brand-rise 0.45s ease 0.05s both;
}
@keyframes bm-brand-rise {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ── 5. Discover screen scaffolding (host) ───────────────────────── */
/* The new Discover module mounts its shell into #discover-feed.
   The screen sizing rules live in css/discover.css; this layer
   exists to make sure the legacy display:none rule on #screen-discover
   doesn't fight the body.discover-active toggle on modern viewports.

   Specifically, css/discover.css line 7 sets `#screen-discover { display:none }`
   and unhides via `body.discover-active`. That still works; we just
   make sure the inner flex chain doesn't collapse the search bar. */
#screen-discover.active {
  display: flex !important;
  flex-direction: column;
}

/* ── 6. Bottom-nav: Pesquisar stays active when Discover is open via search alias ── */
/* No CSS needed — handled in app.js via the navHighlight bookkeeping.
   Documentation marker only. */

/* ════════════════════════════════════════════════════════════════════
   v2.7.3 — AllCollections grid + NewsDetail reader + CommunityHub
   ────────────────────────────────────────────────────────────────────
   All-collections modal: elegant card grid, two columns on mobile,
   three on wider phones / desktop. Reuses the brand palette and
   the .r-sheet/backdrop animation chrome from existing modals.
   ════════════════════════════════════════════════════════════════════ */

.all-coll-header {
  padding: 8px 18px 14px;
}
.all-coll-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent, #C9A84C);
  font-weight: 700;
  margin-bottom: 4px;
}
.all-coll-title {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text, #1a1714);
}
.all-coll-sub {
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--text-muted, #6b6357);
}
.all-coll-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 4px 14px 12px;
}
@media (min-width: 520px) {
  .all-coll-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 820px) {
  .all-coll-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.all-coll-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--surface, #fff);
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06));
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  color: inherit;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.all-coll-card:hover, .all-coll-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
  outline: none;
}
.all-coll-card-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, rgba(26, 92, 58, 0.10), rgba(201, 168, 76, 0.10));
  overflow: hidden;
}
.all-coll-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.all-coll-card-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  padding: 3px 7px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}
.all-coll-card-body {
  padding: 10px 11px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.all-coll-card-title {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 600;
  color: var(--text, #1a1714);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.all-coll-card-desc {
  font-size: 0.74rem;
  color: var(--text-muted, #6b6357);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.all-coll-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  font-size: 0.68rem;
  color: var(--text-muted, #6b6357);
}
.all-coll-card-count, .all-coll-card-chef {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.all-coll-card-chef {
  color: var(--primary, #1A5C3A);
  font-weight: 600;
}
.all-coll-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 38px 24px;
  color: var(--text-muted, #6b6357);
  font-size: 0.88rem;
  text-align: center;
}
.all-coll-empty i { font-size: 2.4rem; opacity: 0.4; }

/* ── News Detail modal ───────────────────────────────────────────── */
.news-detail-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 64px 24px;
  color: var(--text-muted, #6b6357);
  font-size: 0.9rem;
}
.news-detail-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, rgba(26, 92, 58, 0.10), rgba(201, 168, 76, 0.10));
  overflow: hidden;
}
.news-detail-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.news-detail-hero-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.4rem;
  color: var(--primary, #1A5C3A);
  opacity: 0.5;
}
.news-detail-body-wrap {
  padding: 18px 20px 0;
}
.news-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--text-muted, #6b6357);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.news-detail-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.news-detail-category {
  background: rgba(26, 92, 58, 0.10);
  color: var(--primary, #1A5C3A);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
}
.news-detail-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent, #C9A84C);
  font-weight: 700;
  margin-bottom: 6px;
}
.news-detail-title {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--text, #1a1714);
  margin: 0 0 12px;
}
.news-detail-summary {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text, #1a1714);
  font-weight: 500;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
}
.news-detail-body p {
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--text, #1a1714);
  margin: 0 0 14px;
}
.news-detail-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 10px 16px;
  background: var(--primary, #1A5C3A);
  color: #fff;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.18s ease;
}
.news-detail-link:hover { opacity: 0.9; }

/* ── Community Hub modal ─────────────────────────────────────────── */
.comm-hub-header {
  padding: 8px 20px 14px;
}
.comm-hub-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent, #C9A84C);
  font-weight: 700;
  margin-bottom: 4px;
}
.comm-hub-title {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text, #1a1714);
}
.comm-hub-sub {
  margin-top: 6px;
  font-size: 0.86rem;
  color: var(--text-muted, #6b6357);
  line-height: 1.4;
}
.comm-hub-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 16px;
}
.comm-hub-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  background: var(--surface, #fff);
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.07));
  border-radius: 14px;
  padding: 12px 14px;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.comm-hub-card:hover, .comm-hub-card:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
  outline: none;
}
.comm-hub-card-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.35rem;
}
.comm-hub-card-body {
  flex: 1 1 auto;
  min-width: 0;
}
.comm-hub-card-title {
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--text, #1a1714);
}
.comm-hub-card-desc {
  font-size: 0.78rem;
  color: var(--text-muted, #6b6357);
  margin-top: 2px;
}
.comm-hub-card-arrow {
  color: var(--text-muted, #6b6357);
  font-size: 1rem;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════
   v2.7.4 — Collections display-style variants
   ────────────────────────────────────────────────────────────────────
   The admin can flip a collection's `display_style` between:
     • card    → polished card grid (default — existing behaviour)
     • feed    → immersive editorial feed with large hero photos
     • compact → small browse-friendly list rows
   These rules style:
     1. The collection card on the home rail (.collection-card variants)
     2. The detail modal opened from that card (.coll-detail-style-*)
     3. The "Todas as Coleções" all-grid (.all-coll-card-* variants)
   The card markup is shared across styles — only the modifier class
   changes — so existing CSS for .collection-card / .all-coll-card
   stays in force and these rules layer on top.
   ════════════════════════════════════════════════════════════════════ */

/* — 1. Home rail card variants — */
.collection-card.collection-card-compact {
  /* Tighter card for "compact" collections so the home rail can hint
     at the lighter content the user is about to see when they tap in. */
  min-height: 0;
}
.collection-card.collection-card-compact .cc-img-wrap {
  height: 130px;
}
.collection-card.collection-card-compact .cc-bottom {
  padding: 8px 12px;
}
.cc-feed-badge.cc-compact-badge {
  /* Match the existing .cc-feed-badge pill but neutral colour so it
     reads as a different mode rather than the "premium" feed style. */
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
}

/* — 2. Detail modal — three layouts on top of .coll-detail-hero-wrap — */
.coll-detail-hero-wrap.coll-detail-style-feed .coll-detail-hero,
.coll-detail-hero-wrap.coll-detail-style-card .coll-detail-hero,
.coll-detail-hero-wrap.coll-detail-style-compact .coll-detail-hero {
  /* All three share the hero photo. Future tweaks can specialise here. */
}

/* — 2a. Card grid inside the modal — */
.coll-detail-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px 16px 20px;
}
@media (max-width: 380px) {
  .coll-detail-cards {
    grid-template-columns: 1fr;
  }
}
.coll-detail-card {
  background: var(--bg, #fff);
  border: 1px solid var(--border, #e8e3da);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  display: flex;
  flex-direction: column;
}
.coll-detail-card:hover,
.coll-detail-card:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
  outline: none;
}
.cdrc-img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
  background: #f1ebe1;
}
.cdrc-body {
  padding: 10px 12px 12px;
  flex: 1;
  min-width: 0;
}
.cdrc-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text, #2a2520);
  line-height: 1.25;
}
.cdrc-meta {
  font-size: 0.78rem;
  color: var(--text-muted, #8a8278);
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* — 2b. Feed layout inside the modal — */
.coll-detail-feed {
  padding: 14px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.coll-feed-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: transparent;
  border-bottom: 1px solid var(--border, #ece6dc);
  padding-bottom: 24px;
  cursor: pointer;
}
.coll-feed-item:last-child {
  border-bottom: none;
}
.coll-feed-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 16px;
  background: #f1ebe1;
  display: block;
}
.coll-feed-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.coll-feed-eyebrow {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green, #1A5C3A);
  font-weight: 600;
}
.coll-feed-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
  color: var(--text, #2a2520);
  line-height: 1.15;
}
.coll-feed-desc {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-muted, #5a544c);
  margin: 4px 0 8px;
}
.coll-feed-cta {
  align-self: flex-start;
  background: none;
  border: 1px solid var(--green, #1A5C3A);
  color: var(--green, #1A5C3A);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.18s ease, color 0.18s ease;
}
.coll-feed-cta:hover,
.coll-feed-cta:focus-visible {
  background: var(--green, #1A5C3A);
  color: #fff;
  outline: none;
}

/* — 3. All-collections grid card variants — */
/* card is the default. .all-coll-card-card just keeps existing styles
   active; .all-coll-card-feed accents the badge; .all-coll-card-compact
   reduces the cover height to show more cards per scroll. */
.all-coll-card.all-coll-card-feed .all-coll-card-img-wrap {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.all-coll-card.all-coll-card-compact .all-coll-card-img-wrap img {
  height: 110px;
}
.all-coll-card.all-coll-card-compact .all-coll-card-body {
  padding: 10px 12px 12px;
}
.all-coll-card.all-coll-card-compact .all-coll-card-desc {
  display: none;
}