/* ══════════════════════════════════════════════════════════════════════
   Ruppell design system v2 — loaded AFTER styles.css so it wins.

   Why this file exists: styles.css grew in layers ("UPGRADE PACK", hero v1/v2/v3)
   and ended up with 27 font sizes, 9 corner radii and 74 one-off colors. This layer
   sets ONE scale for each and restyles the main surfaces with it. Later clean-up:
   fold this into styles.css and delete the dead rules.

   Rules this file follows (from Apple's Human Interface Guidelines, adapted for web):
   - Type:   system font for reading (SF Pro on Apple devices), brand font for display only.
   - Scale:  34 / 28 / 22 / 20 / 17 / 15 / 13 / 12 — nothing else.
   - Radii:  10 controls · 16 cards · 22 sheets · pill for chips.
   - Space:  multiples of 4.
   - Color:  one tint (Ruppell orange). Everything else is neutral "label" grey.
   - Touch:  every tappable thing is at least 44 × 44.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --tint: #ff5722;
  --tint-press: #e64a19;
  --tint-text: #b3380a;               /* orange for small text: 4.8:1 or better on white, grey and tinted fills */
  --tint-fill: #c2410c;               /* solid buttons with white text: 5.2:1 (plain #ff5722 is only 3.2:1) */
  --tint-fill-press: #a8350b;
  --accent: #c2410c;                  /* old name used across styles.css, same rule as --tint-fill */
  --accent-2: #b45309;                /* old amber: was #f59e0b (1.9:1 as text); this passes 4.5:1 */
  --tint-soft: rgba(255, 87, 34, 0.12);

  --bg: #f2f2f7;                      /* grouped background */
  --bg-elev: #ffffff;                 /* cards, sheets */
  --bg-elev-2: #f2f2f7;
  --fill: rgba(118, 118, 128, 0.12);  /* chips, fields */
  --separator: rgba(60, 60, 67, 0.18);
  --border: var(--separator);
  --text: #1c1c1e;                    /* label */
  --text-dim: #636366;                /* secondary label: 6:1 on white, 5.4:1 on the grey page */
  --text-3: rgba(60, 60, 67, 0.45);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --t-large: 2.125rem;  /* 34 */
  --t-1: 1.75rem;       /* 28 */
  --t-2: 1.375rem;      /* 22 */
  --t-3: 1.25rem;       /* 20 */
  --t-body: 1.0625rem;  /* 17 */
  --t-sub: 0.9375rem;   /* 15 */
  --t-foot: 0.8125rem;  /* 13 */
  --t-cap: 0.75rem;     /* 12 */

  --r-control: 10px;
  --r-card: 16px;
  --r-sheet: 22px;
  --radius: var(--r-card);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --bg-elev: #1c1c1e;
    --bg-elev-2: #2c2c2e;
    --fill: rgba(118, 118, 128, 0.24);
    --separator: rgba(84, 84, 88, 0.6);
    --text: #ffffff;
    --text-dim: rgba(235, 235, 245, 0.66);
    --text-3: rgba(235, 235, 245, 0.35);
    --tint-text: #ff8a5c;
    --shadow: none;
  }
}

html, body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.47;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: normal;
}
:focus-visible { outline: 3px solid var(--tint); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.i { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.25em; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Navigation bar ──────────────────────────────────────────────────── */
.site-header {
  background: color-mix(in srgb, var(--bg-elev) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid var(--separator);
}
.header-inner { min-height: 52px; padding-top: 4px; padding-bottom: 4px; }
.brand {
  flex-direction: row; gap: 8px; align-items: center;
  font: 800 var(--t-3)/1 var(--font-display); letter-spacing: -0.01em;
  min-height: 44px;
}
.brand-logo-img { width: 30px; height: auto; margin: 0; }
.nav { gap: 2px; }
.nav-link {
  font: 500 var(--t-sub)/1 var(--font); color: var(--text-dim);
  min-height: 44px; padding: 0 12px; border-radius: var(--r-control);
  display: inline-flex; align-items: center; gap: 6px;
}
.nav-link.active { color: var(--text); background: var(--fill); }
.nav-link .badge { background: var(--tint); color: #fff; font-size: 11px; min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px; line-height: 18px; }
.nav-link .badge[hidden] { display: none; }
.nav-cta { color: var(--tint-text); font-weight: 600; }
.nav-cta:hover { background: var(--tint-soft); color: var(--tint-text); }

/* ── Hero: one full-bleed photo, headline bottom-left. No card-in-card, no orbs. ── */
.hero { max-width: none; padding: 0; margin: 0; }
.hero-orb, .hero-eyebrow { display: none !important; }
.hero-band {
  min-height: min(78vh, 720px);
  align-items: flex-end;
  padding: 0 20px 36px;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.72) 100%),
    url("https://images.unsplash.com/photo-1503220317375-aaad61436b1b?w=1800&q=80&auto=format&fit=crop") center 35% / cover no-repeat;
}
.hero-band-inner { max-width: 1120px; }
.hero-inner, .hero-band .hero-inner {
  background: none; border-radius: 0; padding: 0; margin: 0; max-width: 640px; overflow: visible;
}
.hero-band .hero-slogan, .hero-slogan {
  font: 800 clamp(2.5rem, 7vw, 4.5rem)/1.02 var(--font-display);
  letter-spacing: -0.035em; text-transform: none; color: #fff; opacity: 1;
  text-shadow: none; margin: 0 0 12px;
}
.hero-sub, .hero-inner p.hero-sub {
  font: 400 var(--t-body)/1.45 var(--font); color: rgba(255,255,255,0.88);
  text-shadow: none; max-width: 30em; margin: 0 0 20px;
}
.hero-band .search-row { max-width: 560px; gap: 8px; margin-bottom: 0; flex-wrap: nowrap; }
.search-field { position: relative; flex: 1 1 auto; display: flex; align-items: center; }
.search-field .i { position: absolute; left: 14px; color: rgba(255,255,255,0.7); pointer-events: none; }
.hero-band .search-row input[type="text"] {
  height: 48px; padding: 0 16px 0 42px; border-radius: 12px; border: 0;
  background: rgba(255,255,255,0.18); color: #fff; font: 400 var(--t-body)/1 var(--font);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
}
.hero-band .search-row input[type="text"]::placeholder { color: rgba(255,255,255,0.72); }
.hero-band .search-date-input {
  flex: 0 0 auto; width: 148px; height: 48px; padding: 0 12px; border-radius: 12px; border: 0;
  background: rgba(255,255,255,0.18); color: #fff; font: 400 var(--t-sub)/1 var(--font);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color-scheme: dark;
}
.hero-cta { display: none; }  /* the search field is the call to action; two ghost buttons were noise */
@media (max-width: 639px) {
  .hero-band { min-height: 72vh; padding: 0 16px 24px; }
  .hero-band .search-row { flex-wrap: wrap; }
  .hero-band .search-date-input { width: 100%; }
}

/* ── Section headers ─────────────────────────────────────────────────── */
.section-title, .browse-title, .trending-section h2 {
  font: 700 var(--t-2)/1.2 var(--font-display); letter-spacing: -0.02em;
  text-align: left; margin: 0 0 4px; color: var(--text);
}
.section-subtitle { font: 400 var(--t-sub)/1.4 var(--font); color: var(--text-dim); text-align: left; margin: 0 0 16px; }

/* ── Categories: a horizontal rail, like the App Store's category chips ── */
.category-tiles { padding: 28px 0 8px; background: none; }
.category-tiles-inner { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.category-grid {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 20px 8px; margin: 0 -20px; scrollbar-width: none; grid-template-columns: none;
}
.category-grid::-webkit-scrollbar { display: none; }
.category-tile {
  flex: 0 0 auto; scroll-snap-align: start; width: 84px; min-height: 96px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; cursor: pointer;
}
.category-tile:hover { transform: none; box-shadow: none; }
.category-tile-icon {
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg-elev); color: var(--text); box-shadow: inset 0 0 0 0.5px var(--separator);
  font-size: 0; transition: transform 0.2s var(--ease), background 0.2s;
}
.category-tile-icon .i { width: 28px; height: 28px; }
.category-tile:active .category-tile-icon { transform: scale(0.94); }
.category-tile.active .category-tile-icon, .category-tile:hover .category-tile-icon { background: var(--tint); color: #fff; }
.category-tile-name { font: 500 var(--t-foot)/1.2 var(--font); color: var(--text); text-align: center; letter-spacing: 0; }

/* ── How it works: three quiet rows ─────────────────────────────────── */
.how-it-works { background: none; padding: 24px 0; }
.how-it-works-inner { max-width: 1120px; margin: 0 auto; padding: 0 20px; background: none; box-shadow: none; }
.how-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.how-step { text-align: left; padding: 16px; background: var(--bg-elev); border-radius: var(--r-card); }
.how-step-num {
  width: 28px; height: 28px; margin: 0 0 10px; border-radius: 50%;
  background: var(--tint-soft); color: var(--tint-text); box-shadow: none;
  font: 700 var(--t-sub)/28px var(--font); text-align: center;
}
.how-step h3 { font: 600 var(--t-body)/1.3 var(--font); margin: 0 0 4px; }
.how-step p { font: 400 var(--t-sub)/1.45 var(--font); color: var(--text-dim); margin: 0; }
@media (max-width: 639px) { .how-steps { grid-template-columns: 1fr; } }

/* ── Filters ────────────────────────────────────────────────────────── */
.browse-body { max-width: 1120px; margin: 0 auto; padding: 24px 20px; }
.filters { gap: 8px; margin: 12px 0 20px; }
.chip {
  min-height: 36px; padding: 0 14px; border-radius: 999px; border: 0;
  background: var(--fill); color: var(--text); font: 500 var(--t-sub)/36px var(--font);
}
.chip.active { background: var(--text); color: var(--bg-elev); }
.select {
  min-height: 36px; border-radius: 999px; border: 0; background-color: var(--fill);
  color: var(--text); font: 500 var(--t-sub)/1 var(--font); padding: 0 32px 0 14px;
}
.results-meta { font: 400 var(--t-foot)/1.3 var(--font); color: var(--text-dim); }

/* ── Activity cards ─────────────────────────────────────────────────── */
.grid { gap: 20px; }
.card {
  border: 0; border-radius: var(--r-card); background: var(--bg-elev);
  box-shadow: var(--shadow); overflow: hidden; transition: transform 0.25s var(--ease);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.card:active { transform: scale(0.985); }
.card-media { aspect-ratio: 4 / 3; height: auto; background: var(--fill); }
.card-media::after { display: none; }
.card-media .fav-btn, .modal-fav {
  width: 36px; height: 36px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: rgba(0,0,0,0.32); color: #fff; font-size: 0;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.card-media .fav-btn::before { content: ""; position: absolute; inset: -4px; } /* 44pt hit area */
.fav-btn .i { width: 20px; height: 20px; }
.fav-btn.active { color: #ff453a; }
.card-diff {
  font: 600 var(--t-cap)/1 var(--font); letter-spacing: 0; text-transform: none;
  padding: 6px 10px; border-radius: 999px; background: rgba(0,0,0,0.42); color: #fff; border: 0;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.discount-ribbon { font: 700 var(--t-cap)/1 var(--font); border-radius: 999px; padding: 6px 10px; background: var(--tint); }
.card-body { padding: 12px 14px 14px; gap: 2px; }
.card-title { font: 600 var(--t-body)/1.3 var(--font); letter-spacing: -0.01em; margin: 0; }
.card-meta, .card-location {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
  font: 400 var(--t-sub)/1.35 var(--font); color: var(--text-dim); margin: 2px 0 0;
}
.card-meta span { display: inline-flex; align-items: center; gap: 4px; }
.card-meta .i { width: 15px; height: 15px; }
.card-operator { display: flex; align-items: center; gap: 8px; margin-top: 8px; font: 400 var(--t-foot)/1.3 var(--font); color: var(--text-dim); }
.card-operator strong { color: var(--text); font-weight: 600; }
.card-tagline { font: 400 var(--t-sub)/1.4 var(--font); color: var(--text-dim); margin: 6px 0 0; }
.card-bestfor, .bestfor-tag, .nyc-tag, .badge-groups { display: none; }  /* three competing tag styles removed; filters do this job */
.card-footer { margin-top: 12px; align-items: baseline; }
.card-rating { display: inline-flex; align-items: center; gap: 3px; font: 600 var(--t-foot)/1 var(--font); color: var(--text); }
.card-rating .i { width: 14px; height: 14px; color: var(--text); }
.card-price { font: 700 var(--t-body)/1 var(--font); color: var(--text); }
.card-price small { font: 400 var(--t-foot)/1 var(--font); color: var(--text-dim); }

/* ── Trending rail ──────────────────────────────────────────────────── */
.trending-card { border-radius: var(--r-card); }
.trending-rank { font: 700 var(--t-cap)/1 var(--font); border-radius: 999px; }

/* ── Detail sheet ───────────────────────────────────────────────────── */
.modal { border-radius: var(--r-sheet); border: 0; }
.modal-close, .modal-share-btn {
  width: 36px; height: 36px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: rgba(0,0,0,0.4); color: #fff; font-size: 0;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.modal-close .i, .modal-share-btn .i { width: 18px; height: 18px; }
.modal-body h2 { font: 700 var(--t-1)/1.15 var(--font-display); letter-spacing: -0.02em; }
.operator-block { margin: 12px 0 4px; padding: 12px 0; border-top: 0.5px solid var(--separator); border-bottom: 0.5px solid var(--separator); }
.operator-row { display: flex; align-items: center; gap: 6px; font: 400 var(--t-sub)/1.3 var(--font); color: var(--text-dim); margin: 0; }
.operator-row strong { color: var(--text); font-weight: 600; }
.verified-badge { display: inline-flex; align-items: center; gap: 3px; color: #0a84ff; font: 600 var(--t-foot)/1 var(--font); background: none; padding: 0; }
.modal-meta { gap: 8px; }
.meta-pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px;
  border: 0; border-radius: 999px; background: var(--fill); color: var(--text);
  font: 500 var(--t-foot)/1 var(--font);
}
.meta-pill .i { width: 15px; height: 15px; color: var(--text-dim); }
.meta-pill.instant { background: var(--fill); color: var(--text); }
.op-cancellation-note { display: flex; gap: 8px; font: 400 var(--t-foot)/1.4 var(--font); color: var(--text-dim); }
@media (max-width: 639px) {
  .modal { border-radius: var(--r-sheet) var(--r-sheet) 0 0; }
}

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn-primary, .cookie-accept, .newsletter-form button {
  min-height: 44px; border-radius: 12px; border: 0; background: var(--tint); color: #fff;
  font: 600 var(--t-body)/1 var(--font); padding: 0 20px; box-shadow: none;
}
.btn-primary:hover { background: var(--tint-press); transform: none; box-shadow: none; }
.btn-primary:disabled { opacity: 0.4; }
.btn-secondary, .cookie-decline {
  min-height: 44px; border-radius: 12px; border: 0; background: var(--fill); color: var(--text);
  font: 600 var(--t-body)/1 var(--font); padding: 0 20px; cursor: pointer;
}

/* ── Add to Home Screen (replaces fake "App Store — Coming Soon" buttons) ── */
.homescreen-tip { max-width: 1120px; margin: 24px auto; padding: 0 20px; }
.homescreen-tip-inner {
  display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: var(--r-card); background: var(--bg-elev);
}
.homescreen-tip img { width: 56px; height: 56px; border-radius: 13px; box-shadow: inset 0 0 0 0.5px var(--separator); background: #fff; padding: 8px; }
.homescreen-tip h2 { font: 600 var(--t-body)/1.3 var(--font); margin: 0 0 2px; }
.homescreen-tip p { font: 400 var(--t-sub)/1.4 var(--font); color: var(--text-dim); margin: 0; }
.homescreen-tip .i { width: 17px; height: 17px; color: #0a84ff; vertical-align: -3px; }

/* ── Newsletter + footer ────────────────────────────────────────────── */
.newsletter { max-width: 1080px; border-radius: var(--r-card); background: var(--bg-elev); border: 0; }
.newsletter-text h2 { font: 600 var(--t-3)/1.25 var(--font); }
.newsletter-form input { min-height: 44px; border-radius: 12px; border: 0; background: var(--fill); font: 400 var(--t-body)/1 var(--font); }
.site-footer { background: var(--bg); border-top: 0.5px solid var(--separator); }
.footer-slogan { font: 600 var(--t-foot)/1.3 var(--font); letter-spacing: 0; text-transform: none; color: var(--text-dim); }
.footer-social a { border: 0; padding: 0; background: none; color: var(--text-dim); font: 400 var(--t-foot)/1 var(--font); }
.footer-links a { font: 400 var(--t-foot)/2 var(--font); }

/* ── Tab bar ────────────────────────────────────────────────────────── */
.bottom-nav {
  height: calc(50px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--bg-elev) 80%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-top: 0.5px solid var(--separator);
}
.bottom-nav-btn, .bottom-nav-btn.nav-link, .bottom-nav-btn.nav-link.active {
  background: none; border-radius: 0; min-height: 50px; padding: 4px 0 0; justify-content: flex-start;
  font: 500 10px/1.2 var(--font); letter-spacing: 0.01em; color: var(--text-3); gap: 2px;
}
.bottom-nav-btn.active { color: var(--tint); }
.bottom-nav-icon { font-size: 0; }
.bottom-nav-icon .i { width: 26px; height: 26px; }
@media (max-width: 639px) {
  body { padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px)); }
  .concierge-fab { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Concierge button ───────────────────────────────────────────────── */
.concierge-fab {
  width: 52px; height: 52px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: var(--tint); color: #fff; font-size: 0; box-shadow: 0 6px 20px rgba(255, 87, 34, 0.35);
}
.concierge-fab .i { width: 24px; height: 24px; }

/* ── Cookie notice: a small card, not a wall ────────────────────────── */
.cookie-banner {
  left: 12px; right: 12px; bottom: 12px; max-width: 520px; margin: 0 auto;
  border: 0; border-radius: var(--r-card); background: var(--bg-elev);
  box-shadow: 0 10px 40px rgba(0,0,0,0.18); padding: 14px 16px; gap: 12px;
  font: 400 var(--t-foot)/1.4 var(--font); color: var(--text-dim);
}
.cookie-banner p { min-width: 0; }
.cookie-link { color: var(--tint-text); text-decoration: none; font-weight: 600; }
.cookie-actions { width: 100%; }
.cookie-actions button { flex: 1; min-height: 40px; font-size: var(--t-sub); }
@media (max-width: 639px) {
  .cookie-banner { bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Operator portal cards ──────────────────────────────────────────── */
.business-card { border: 0; border-radius: var(--r-card); background: var(--bg-elev); box-shadow: var(--shadow); }
.business-icon { font-size: 0; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--fill); color: var(--text); flex: none; }
.business-icon .i { width: 22px; height: 22px; }
.business-edit-btn { min-height: 44px; border-radius: 12px; }

/* ── Fixes from the first screenshot review ─────────────────────────── */
.site-header, .bottom-nav { background: rgba(255, 255, 255, 0.92); }
@media (prefers-color-scheme: dark) {
  .site-header, .bottom-nav { background: rgba(28, 28, 30, 0.92); }
}
.hero-band { padding-left: 0; padding-right: 0; }
.hero-band-inner { padding: 0 20px; }
@media (max-width: 639px) {
  .hero-band .search-date-input { display: none; }  /* the date is picked on the activity itself; one field is enough here */
}
.how-step, .how-step h3, .how-step p { text-align: left; }
.how-step { padding: 16px; min-height: 0; }
.how-step h3 { margin-top: 0; }
body:has(#providerView:not([hidden])) .concierge-fab { display: none; }
.how-step { display: block; }
.how-step-num { display: block; }

/* ══ Accessibility (WCAG 2.1 AA) — added 2026-09-23 ═════════════════════
   Why: New York leads the US in website-accessibility lawsuits. These rules make
   every text colour readable (4.5:1), show keyboard users where they are, and keep
   tap targets big enough. Brand orange #ff5722 stays for the logo and icons. */
.btn-primary, .cookie-accept, .newsletter-form button,
.discount-ribbon, .nav-link .badge, .concierge-fab { background: var(--tint-fill); color: #fff; }
.btn-primary:hover, .cookie-accept:hover, .newsletter-form button:hover { background: var(--tint-fill-press); }
.bottom-nav-btn, .bottom-nav-btn.nav-link { color: var(--text-dim); }
.bottom-nav-btn.active, .bottom-nav-btn.nav-link.active { color: var(--tint-text); }

/* "Skip to content" link: hidden until a keyboard user presses Tab. */
.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 10000;
  background: var(--text); color: var(--bg-elev); padding: 10px 16px; border-radius: 10px;
  font: 600 var(--t-sub)/1 var(--font); text-decoration: none;
}
.skip-link:focus { top: 12px; }
#main:focus { outline: none; }

/* Footer "Cookie settings" is a button that looks like the other footer links. */
.footer-link-btn {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: 400 var(--t-foot)/2 var(--font); color: inherit; text-decoration: none;
}
.footer-link-btn:hover { text-decoration: underline; }

/* Review stars are real buttons now; strip the default button look. */
.star-pick {
  background: none; border: 0; padding: 0; min-width: 44px; min-height: 44px;
  font-size: 1.6rem; line-height: 1; cursor: pointer; color: #b45309;
}

/* Show / hide password: at least 44 × 44 to tap. */
.pw-toggle { min-width: 44px; min-height: 44px; right: 2px; display: grid; place-items: center; }
.pw-wrap input { padding-right: 60px !important; }

/* Category tile that is currently filtering the list. */
.category-tile.active .category-tile-name { color: var(--tint-text); font-weight: 600; }
.category-tile { background: none; border: 0; cursor: pointer; font: inherit; color: inherit; }

/* Icons that replaced emoji in the operator portal and community. */
.provider-feature .icon .i { width: 28px; height: 28px; color: var(--tint-text); }
.empty-glyph { margin: 0 0 8px; color: var(--text-dim); }
.empty-glyph .i { width: 36px; height: 36px; }
.provider-activity-icon .i { width: 22px; height: 22px; }
.like-btn .heart .i, .post-tag .i, .post-type-badge .i, .event-meta .i,
.post-time .i, .community-tab .i, .chip .i { width: 14px; height: 14px; vertical-align: -2px; }
.like-btn { background: none; font: inherit; }

/* Every focusable control shows the same focus ring (some old rules set outline: 0). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--tint) !important; outline-offset: 2px;
}
/* The operator terms link ran off the right edge on phones (it was set to never wrap). */
.provider-terms-banner a { white-space: normal; display: inline-block; color: var(--tint-text); text-decoration: underline; }


/* "Before you book" policy block on the activity detail sheet (2026-09-26) */
.policy-block { margin: 0 0 22px; padding: 14px 16px; background: var(--fill); border-radius: var(--r-control); }
.policy-block h4 { margin: 0 0 10px; font: 600 var(--t-sub)/1.3 var(--font); color: var(--text); }
.policy-block dl { margin: 0; display: grid; gap: 12px; }
.policy-item dt { display: flex; align-items: center; gap: 8px; font: 600 var(--t-foot)/1.3 var(--font); color: var(--text); margin: 0 0 2px; }
.policy-item dd { margin: 0; font: 400 var(--t-foot)/1.5 var(--font); color: var(--text-dim); white-space: pre-line; overflow-wrap: anywhere; }
.policy-item dd a { color: var(--tint-text); text-decoration: underline; }
.policy-note { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--border); font: 400 var(--t-cap)/1.5 var(--font); color: var(--text-dim); }

/* 2026-09-26 fixes: newsletter card centred like the tip above it; tip hidden unless shown by script; tidy footer groups */
.homescreen-tip[hidden] { display: none; }
.newsletter { width: calc(100% - 40px); max-width: 1080px; margin: 24px auto 60px; box-sizing: border-box; }
.footer-links { column-gap: 20px; row-gap: 2px; align-content: flex-start; }
/* Header CTA: an older !important rule forced the dark orange in dark mode (too low contrast); use the intended tint token. */
.nav-cta { color: var(--tint-text) !important; }


/* ── ONE PAGE WIDTH (2026-09-26) ─────────────────────────────────────────────
   Before: every page had its own width and padding (bookings 900, favorites 1180,
   community 680, inbox none, header and footer different again), so nothing lined
   up. Now the four list pages and the footer share one centred container that is
   the same width as the home page (1120px, 20px side padding). */
:root { --page-max: 1120px; --page-pad: 20px; }

.bookings-view, .inbox-view, .favorites-view, .community-view {
  max-width: var(--page-max); margin: 0 auto; padding: 40px var(--page-pad) 90px; box-sizing: border-box;
}
.community-wrap { max-width: none; margin: 0; padding: 0; }
.bookings-view h2, .inbox-view h2, .favorites-view h2, .community-header h2 { font-size: 1.8rem; margin: 0 0 4px; }

.site-footer { padding-left: 0; padding-right: 0; }
.footer-inner, .footer-copy {
  max-width: var(--page-max); margin-left: auto; margin-right: auto;
  padding-left: var(--page-pad); padding-right: var(--page-pad); box-sizing: border-box;
}

/* ── TOP ROW: logo + every button centred as ONE group with equal spacing ──────
   Text-to-text spacing is 36px everywhere: logo->Browse (24 gap + 12 padding) and
   button->button (12 + 12 + 12). The old 2px gap let the orange selected/focus box
   touch its neighbours. */
.header-inner { max-width: var(--page-max); padding-left: var(--page-pad); padding-right: var(--page-pad); }
@media (min-width: 960px) {
  .header-inner { justify-content: center; gap: 24px; }
  .nav { gap: 12px; }
}
/* Between 768 and 959px the full row would be crowded, so use the same slide-out
   menu that phones use (the base file only switches at 767px). */
@media (min-width: 768px) and (max-width: 959px) {
  .header-inner { justify-content: space-between; padding-left: 16px; padding-right: 16px; }
  .nav-hamburger { display: flex; }
  .nav {
    display: none; position: fixed; top: 0; right: 0; bottom: 0; width: min(280px, 85vw);
    background: var(--bg-elev); border-left: 1px solid var(--border);
    flex-direction: column; align-items: stretch; gap: 4px; padding: 16px; z-index: 20;
    box-shadow: -4px 0 24px rgba(0,0,0,0.12); overflow-y: auto;
  }
  .nav.open { display: flex; }
  .nav-close { display: block; }
  .nav-link { justify-content: flex-start; padding: 13px 14px; font-size: 0.98rem; border-radius: 10px; }
}
/* "Cookie settings" is a button, so it ignored the link font; make it match the other footer links. */
.footer-links button { font: 400 var(--t-foot)/2 var(--font); }
/* Community tab: use the accessible orange token (the old --accent is too dark on the dark theme). */
.community-tab.active { color: var(--tint-text); border-bottom-color: var(--tint-text); }


/* Referral rewards: Founding Partner badge + Featured tag (same quiet style as the Verified badge) */
.partner-badge { display: inline-flex; align-items: center; gap: 3px; color: var(--tint-text); font: 600 var(--t-foot)/1 var(--font); background: none; padding: 0; }
.featured-tag { display: inline-block; margin-bottom: 6px; color: var(--tint-text); font: 700 11px/1 var(--font); letter-spacing: 0.06em; text-transform: uppercase; }