/* ===========================================================
   LiveRadio prototype — Musmentor-inspired
   Palette: cream/beige bg, white cards w/ thin black borders,
            pale-yellow + orange accents, deep black text.
   =========================================================== */

:root {
  --bg-outer: #E4DDCF;    /* outer cream margin */
  --bg: #FFFFFF;          /* inner page-frame (white) */
  --card: #FFFFFF;        /* white cards */
  --card-alt: #E4DDCF;    /* cream-tinted cards (matches outer) */
  --ink: #1A1A1A;
  --ink-soft: #5C5C5C;
  --line: #1A1A1A;
  --yellow: #F0F58A;
  --yellow-soft: #F7FBA8;
  --orange: #FF5722;
  --orange-soft: #FF7A4D;
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --shadow: 0 1px 0 rgba(0,0,0,.04);
  --maxw: 1240px;
  --pad: 24px;
  --font: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --display: 'Inter Tight', 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-outer);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Equal cream margin on ALL 4 sides — design best practice */
  padding: clamp(20px, 2.6vw, 40px);
}

/* Inner white frame — rounded on ALL corners */
.page-frame {
  background: var(--bg);
  border-radius: 28px;
  /* overflow-x:clip prevents horizontal overflow without breaking sticky
     positioning (unlike overflow:hidden which disables sticky entirely). */
  overflow-x: clip;
  min-height: calc(100vh - 80px);
  position: relative;
  max-width: 100%;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

/* ============ HEADER PILL NAV ============ */
.site-header {
  padding: 18px var(--pad) 14px;
  display: flex;
  justify-content: center;
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-radius: 28px 28px 0 0;     /* round top corners — match page-frame */
}
.nav-pill {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card-alt);    /* CREAM, matches outer body bg */
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 8px 12px 8px 16px;
  width: 100%;
  max-width: var(--maxw);
}
.icon-btn {
  background: transparent;
}
.logo {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--display);
  font-weight: 800; font-size: 18px;
  letter-spacing: -.02em;
}
.logo-mark { display: inline-flex; }
.nav-divider {
  flex: 1;
  border-top: 1.5px solid var(--line);
  height: 0;
  margin: 0 6px;
}
.primary-nav {
  display: flex; gap: 26px;
  font-weight: 500; font-size: 14px;
}
.primary-nav a {
  color: var(--ink);
  white-space: nowrap;
  transition: opacity .15s;
}
.primary-nav a:hover { opacity: .55; }
.icon-btn {
  width: 38px; height: 38px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink);
  background: transparent;
}
.btn-ghost {
  font-weight: 600; font-size: 14px;
  padding: 8px 14px;
}
.btn-primary {
  background: var(--yellow);
  border: 1.5px solid var(--line);
  font-weight: 700; font-size: 14px;
  padding: 9px 22px;
  border-radius: 999px;
  transition: transform .15s, background .15s;
}
.btn-primary:hover { background: var(--yellow-soft); transform: translateY(-1px); }
.mobile-menu-btn {
  display: none;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  width: 44px; height: 44px;
  font-size: 20px;
}

/* ============ LAYOUT ============ */
.container { max-width: var(--maxw); margin: 0 auto; padding: 28px var(--pad); }

/* ============ HERO (simple flex/grid, no row-spans) ============
   Structure:
     .hero
       .hero-main      → featured card + headline (responsive 1 or 2 columns)
       .hero-stats     → 2 stat cards (responsive auto-fit)
   ================================================================ */

.hero {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: 100%;
}

.hero-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;     /* never stretch */
}
.hero-main > * { min-width: 0; max-width: 100%; }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  align-items: start;
}
.hero-stats > * { min-width: 0; }

.hero-text { padding: 8px 0; }

@media (min-width: 720px) {
  .hero-main {
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  }
  .hero-text { padding: 8px 4px 8px 18px; }
}

@media (min-width: 1100px) {
  /* Two-column hero, with stats neatly under in their own row. */
  .hero-main {
    grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  }
}

/* Generic card */
.card {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow);
}

/* Featured card */
.card-featured {
  display: flex; flex-direction: column; gap: 14px;
}
.card-tag {
  font-size: 12px; font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.featured-cover {
  display: block;                 /* required: works whether <div> or <a> */
  position: relative;
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 1 / 0.95;
  background: var(--card-alt);
  text-decoration: none;
}
.featured-cover img {
  display: block;
  width: 100%; height: 100%; object-fit: cover;
}
.featured-badge {
  position: absolute; top: 12px; left: 12px;
  background: var(--orange);
  color: #fff;
  font-size: 11px; font-weight: 800;
  letter-spacing: .08em;
  padding: 4px 10px;
  border-radius: 999px;
}
.featured-name {
  font-family: var(--display);
  font-size: 28px; font-weight: 900;
  letter-spacing: -.035em;
  margin: 4px 0 0;
  line-height: 1;
}
.featured-meta { color: var(--ink-soft); margin: 0; font-size: 14px; }
.featured-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.stat-pill {
  background: var(--card-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px; font-weight: 600;
}

.btn-play-large {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--ink);
  color: #fff;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 12px 16px 12px 18px;
  font-weight: 700; font-size: 15px;
  margin-top: auto;
  transition: transform .15s;
}
.btn-play-large:hover { transform: translateY(-1px); }
.btn-play-large .play-arrow { font-size: 12px; }
.btn-play-large .watch-pill {
  margin-left: auto;
  background: var(--card);
  color: var(--ink);
  width: 32px; height: 32px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px;
}

/* Hero text */
.hero-text { display: flex; flex-direction: column; }
.rating-pill {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--line);
  background: var(--card-alt);    /* CREAM, like reference */
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px; font-weight: 600;
  align-self: flex-start;
}
.diamonds { color: var(--orange); letter-spacing: 2px; }

.display {
  font-family: var(--display);
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 0.96;
  letter-spacing: -0.045em;
  font-weight: 900;
  margin: 18px 0 18px;
  font-feature-settings: 'ss01', 'cv11';
  /* Defensive: never let a single huge word push the column wider than 1fr. */
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  max-width: 100%;
}
.title-marks {
  display: inline-flex;
  gap: 4px;
  margin-left: 8px;
  vertical-align: middle;
  flex-wrap: wrap;
}
.title-marks i {
  display: inline-block;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
}
.title-marks .m-orange { background: var(--orange); }
.title-marks .m-yellow { background: var(--yellow); margin-left: -10px; }

.lead {
  color: var(--ink);
  font-size: 16px; max-width: 560px;
  margin: 0 0 22px;
}

.cta-group { display: inline-flex; align-items: center; }
.btn-cta-dark {
  background: var(--ink); color: #fff;
  border: 1.5px solid var(--line);
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  display: inline-flex; align-items: center; gap: 12px;
  position: relative; z-index: 2;
}
.btn-cta-dark .arrow { font-weight: 400; }
.btn-cta-light {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-left: none;
  padding: 14px 22px;
  border-radius: 0 999px 999px 0;
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 10px;
  margin-left: -16px;
  padding-left: 28px;
}
.btn-cta-light .play-tri {
  background: var(--card-alt);
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px;
}

/* Stat cards */
.card-stat { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.card-stat.alt { background: var(--card-alt); }   /* CREAM variant */
.card.cream { background: var(--card-alt); }      /* utility for cream cards */
.stat-row { display: flex; align-items: center; gap: 10px; }
.diamond-orange {
  width: 12px; height: 12px;
  background: var(--orange);
  transform: rotate(45deg);
  display: inline-block;
}
.stat-divider { flex: 1; height: 0; border-top: 1.5px solid var(--line); }
.genre-tag {
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 12px; font-weight: 600;
  background: var(--card);
}
.stat-big {
  font-family: var(--display);
  font-size: 56px; line-height: 1;
  font-weight: 900;
  letter-spacing: -.045em;
}
.stat-big .plus { color: var(--orange); }
.stat-label { color: var(--ink-soft); font-size: 14px; margin: 0; }

/* ============ AD SLOT ============ */
.ad-slot {
  margin: 36px auto;
  background: repeating-linear-gradient(
    45deg, var(--card), var(--card) 10px,
    var(--card-alt) 10px, var(--card-alt) 20px);
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-soft); font-size: 13px; font-weight: 600;
}
.ad-leaderboard { max-width: 728px; height: 90px; }
.ad-rectangle { max-width: 300px; height: 250px; }

/* ============ CONTENT BLOCKS ============ */
.content-block { margin: 44px 0; }
.block-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 18px;
}
.block-head h2 {
  font-family: var(--display);
  font-size: 28px; font-weight: 900; letter-spacing: -.035em;
  margin: 0;
}
.block-head h2 .flag { font-size: 24px; }
.see-all {
  font-weight: 600; font-size: 14px;
  border-bottom: 1.5px solid var(--line);
  padding-bottom: 1px;
}
.see-all:hover { color: var(--orange); border-color: var(--orange); }

/* ============ STATION GRID ============ */
.station-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.station-card {
  position: relative;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px;
  transition: transform .15s, box-shadow .15s;
  cursor: pointer;
}
.station-card:hover {
  transform: translateY(-2px);
  box-shadow: 4px 4px 0 var(--ink);
}
.station-card h3:hover { color: var(--orange); }
.station-card .sc-cover, .station-card h3, .station-card .sc-meta {
  pointer-events: none; /* clicks bubble to card */
}
.sc-rank {
  position: absolute; top: 12px; left: 12px;
  background: var(--yellow);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11px; font-weight: 800;
  z-index: 2;
}
.sc-cover {
  display: block;                 /* required: works whether <div> or <a> */
  position: relative;
  width: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  margin-bottom: 12px;
  background: var(--card-alt);
  text-decoration: none;
}
.sc-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.new-badge {
  position: absolute; top: 8px; right: 8px;
  background: var(--orange); color: #fff;
  font-size: 10px; font-weight: 800;
  letter-spacing: .08em;
  padding: 2px 8px;
  border-radius: 999px;
}
.station-card h3 {
  font-family: var(--display);
  font-size: 15px; font-weight: 700;
  margin: 0 0 2px;
  letter-spacing: -.01em;
}
.sc-meta {
  color: var(--ink-soft);
  font-size: 12px;
  margin: 0 0 12px;
}
.sc-actions { display: flex; gap: 8px; align-items: center; }
.play-btn {
  width: 38px; height: 38px;
  background: var(--ink); color: #fff;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.play-btn:hover { background: var(--orange); }
.play-btn.playing { background: var(--orange); }
.fav-btn {
  width: 38px; height: 38px;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: 16px;
}
.fav-btn.active { background: var(--yellow); }

/* ============ COUNTRY GRID ============ */
.country-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.country-chip {
  display: flex; align-items: center; gap: 10px;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 600; font-size: 14px;
  transition: transform .15s, background .15s;
}
.country-chip:hover { transform: translateY(-2px); background: var(--card-alt); }
.cc-flag { font-size: 18px; }
.cc-name { flex: 1; }
.cc-count {
  color: var(--ink-soft);
  font-size: 12px;
}

/* ============ GENRE CHIPS ============ */
.genre-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.genre-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 600; font-size: 14px;
  transition: background .15s;
}
.genre-chip span {
  background: var(--card-alt);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11px;
  color: var(--ink-soft);
}
.genre-chip:hover, .genre-chip.active {
  background: var(--yellow);
}

/* ============ FOOTER ============ */
.site-footer {
  border-top: 1.5px solid var(--line);
  margin-top: 36px;
  padding: 32px 0 88px;          /* extra bottom for floating player clearance */
  background: var(--card);
  border-radius: 0 0 28px 28px;  /* round bottom corners — match page-frame */
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 32px;
  margin-bottom: 30px;
}
.footer-grid h4 {
  font-family: var(--display);
  font-size: 14px; font-weight: 700;
  margin: 0 0 12px;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.footer-grid a {
  display: block; padding: 4px 0;
  font-size: 14px; color: var(--ink-soft);
}
.footer-grid a:hover { color: var(--ink); }
.foot-tag { color: var(--ink-soft); font-size: 14px; margin: 8px 0 0; }
.copy {
  color: var(--ink-soft);
  font-size: 13px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  margin: 0;
}

/* ============ STICKY PLAYER (modern, navbar-width, centered) ============ */
.player-bar {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100vw - clamp(32px, 9vw, 160px));
  max-width: var(--maxw);   /* matches navbar max-width (1240px) */
  background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
  color: #fff;
  border: 1.5px solid var(--line);
  border-radius: 999px;     /* pill, like navbar */
  padding: 8px 14px 8px 8px;
  display: flex; align-items: center; gap: 14px;
  justify-content: center;  /* center content as a block */
  z-index: 60;
  box-shadow: 0 12px 40px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.player-bar[hidden] { display: none; }

/* Cover with subtle pulse glow when playing */
.pb-cover, .playerlogo {
  position: relative;
  width: 52px; height: 52px;
  border-radius: 12px;
  overflow: hidden;
  background: #2a2a2a;
  flex-shrink: 0;
}
.pb-cover img, .playerlogo img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 12px;
}
.player-bar.is-playing .playerlogo::after,
.player-bar.is-playing .pb-cover::after {
  content: '';
  position: absolute; inset: -2px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--orange), var(--yellow));
  z-index: -1;
  animation: glow 2s ease-in-out infinite;
  opacity: .6;
}
@keyframes glow {
  0%, 100% { opacity: .4; transform: scale(1); }
  50% { opacity: .7; transform: scale(1.05); }
}

.pb-info { min-width: 150px; max-width: 220px; }
.pb-name {
  font-weight: 700; font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pb-meta {
  font-size: 12px; opacity: .65;
  display: flex; align-items: center; gap: 6px;
}
.live-dot {
  display: none;
  width: 7px; height: 7px;
  background: var(--orange);
  border-radius: 50%;
  animation: livePulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
.player-bar.is-playing .live-dot { display: inline-block; }
@keyframes livePulse {
  0%, 100% { opacity: .4; transform: scale(0.8); box-shadow: 0 0 0 0 rgba(255,87,34,.7); }
  50% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 6px rgba(255,87,34,0); }
}

/* Buttons */
.pb-btn {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: #fff;
  width: 40px; height: 40px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
  position: relative;
  transition: background .15s, transform .15s;
}
.pb-btn:hover { background: rgba(255,255,255,.12); }
.pb-btn:active { transform: scale(0.95); }

.pb-play {
  background: var(--yellow);
  color: var(--ink);
  border: none;
  width: 48px; height: 48px;
  border-radius: 14px;
  font-size: 16px;
  box-shadow: 0 4px 14px rgba(240,245,138,.3);
}
.pb-play:hover { background: var(--yellow-soft); transform: translateY(-1px); }
.pb-play.is-loading {
  background: var(--card-alt);
  color: var(--ink);
}
.pb-play.is-playing {
  background: var(--orange);
  color: #fff;
  box-shadow: 0 4px 14px rgba(255,87,34,.4);
}

/* Loading spinner */
.pb-play .spinner {
  width: 18px; height: 18px;
  border: 2.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Modern visualizer (Web Audio analyser-driven, with CSS fallback) */
.pb-progress { flex: 0 0 200px; min-width: 80px; max-width: 200px; }
.pb-bars {
  display: flex;
  gap: 3px;
  align-items: center;
  justify-content: center;
  height: 32px;
  --vbar-color: rgba(255,255,255,.25);
}
.pb-bars i {
  display: block;
  width: 3px;
  background: var(--vbar-color);
  border-radius: 999px;
  height: 6px;
  transition: height .12s cubic-bezier(.34,1.56,.64,1), background .3s;
  transform-origin: center;
}
.player-bar.is-loading .pb-bars i {
  background: rgba(255,255,255,.4);
  animation: barLoading 1.2s ease-in-out infinite;
}
.player-bar.is-loading .pb-bars i:nth-child(1) { animation-delay: 0s; }
.player-bar.is-loading .pb-bars i:nth-child(2) { animation-delay: .1s; }
.player-bar.is-loading .pb-bars i:nth-child(3) { animation-delay: .2s; }
.player-bar.is-loading .pb-bars i:nth-child(4) { animation-delay: .3s; }
.player-bar.is-loading .pb-bars i:nth-child(5) { animation-delay: .4s; }
.player-bar.is-loading .pb-bars i:nth-child(6) { animation-delay: .5s; }
.player-bar.is-loading .pb-bars i:nth-child(7) { animation-delay: .4s; }
.player-bar.is-loading .pb-bars i:nth-child(8) { animation-delay: .3s; }
.player-bar.is-loading .pb-bars i:nth-child(9) { animation-delay: .2s; }
.player-bar.is-loading .pb-bars i:nth-child(10) { animation-delay: .1s; }
.player-bar.is-loading .pb-bars i:nth-child(11) { animation-delay: 0s; }
.player-bar.is-loading .pb-bars i:nth-child(12) { animation-delay: .15s; }
@keyframes barLoading {
  0%, 100% { height: 4px; opacity: .4; }
  50% { height: 24px; opacity: 1; }
}
.player-bar.is-playing .pb-bars {
  --vbar-color: linear-gradient(180deg, var(--orange) 0%, var(--yellow) 100%);
}
.player-bar.is-playing .pb-bars i {
  background: var(--yellow);
  background: linear-gradient(180deg, var(--orange) 0%, var(--yellow) 100%);
}

/* Volume — cross-browser styled range input.
   Firefox renders <input type=range> very differently from WebKit, so we
   reset and explicitly style the track + thumb for both engines to keep
   the slider visually contained inside the player bar. */
.pb-volume {
  display: flex; align-items: center; gap: 8px;
  width: 140px;
  flex-shrink: 0;
}
.pb-volume input[type=range] {
  flex: 1;
  width: 100%;
  height: 14px;            /* total interactive height */
  background: transparent; /* track painted by pseudo-elements */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}
/* WebKit / Blink (Chrome, Safari, Edge) */
.pb-volume input[type=range]::-webkit-slider-runnable-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  border: 0;
}
.pb-volume input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--yellow);
  border: 1.5px solid var(--ink);
  margin-top: -4px;        /* centre the thumb on the 4px track */
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
  cursor: pointer;
}
/* Firefox */
.pb-volume input[type=range]::-moz-range-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  border: 0;
}
.pb-volume input[type=range]::-moz-range-progress {
  height: 4px;
  background: var(--yellow);
  border-radius: 999px;
}
.pb-volume input[type=range]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--yellow);
  border: 1.5px solid var(--ink);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
  cursor: pointer;
}
.pb-volume input[type=range]:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
  border-radius: 999px;
}

/* Timer badge */
.timer-label {
  position: absolute; top: -6px; right: -8px;
  background: var(--orange);
  color: #fff;
  font-size: 10px; font-weight: 800;
  padding: 2px 6px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  font-variant-numeric: tabular-nums;
}

.pb-fav.active { background: rgba(240,245,138,.18); color: var(--yellow); border-color: rgba(240,245,138,.3); }
.pb-timer.is-active { color: var(--orange); }

/* Sleep timer popover (position set dynamically by JS) */
.timer-pop {
  position: fixed;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px;
  display: flex; flex-direction: column; gap: 6px;
  z-index: 70;
  width: 200px;
  box-shadow: 4px 4px 0 var(--ink);
  /* left + bottom set by app.js based on the timer button */
}
.timer-pop[hidden] { display: none; }
.tp-head {
  font-family: var(--display);
  font-weight: 800; font-size: 14px;
  margin-bottom: 4px;
}
.timer-pop button {
  text-align: left;
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 600; font-size: 14px;
  color: var(--ink);
}
.timer-pop button:hover { background: var(--card-alt); }
.timer-pop .tp-cancel {
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding-top: 12px;
  margin-top: 4px;
  color: var(--orange);
}

/* ============ RESPONSIVE ============ */
/* ============ TABLET / SMALL DESKTOP (<=900px) ============ */
@media (max-width: 900px) {
  body { padding: clamp(12px, 1.8vw, 24px); }
  .container { padding: 20px 16px; }
  .page-frame { border-radius: 22px; }
  .site-header { padding: 14px 14px 10px; border-radius: 22px 22px 0 0; }
}

/* ============ MOBILE (<=720px) ============ */
@media (max-width: 720px) {
  /* Header: collapse to logo + country switcher + hamburger only. */
  .primary-nav,
  .nav-divider,
  .nav-pill > .btn-ghost,
  .nav-pill > .btn-primary,
  .nav-pill > .icon-btn { display: none !important; }

  .mobile-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .nav-pill {
    padding: 6px 6px 6px 12px;
    gap: 8px;
    flex-wrap: nowrap;
  }
  .nav-pill .logo {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }
  .nav-pill .logo-text {
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Country switcher: compact in pill, full-width when open */
  .lang-trigger {
    padding: 6px 10px;
    font-size: 12px;
  }
  .lang-trigger .lang-label {
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Hero stacking */
  body { padding: clamp(10px, 1.4vw, 20px); }
  .container { padding: 16px 14px; }
  .hero { gap: 14px; }
  .hero-main { gap: 14px; }
  .hero-text { order: -1; padding: 4px 0; }
  .hero-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .display { font-size: clamp(30px, 8.5vw, 48px); }
  .lead { font-size: 14px; }

  /* CTAs stack tight */
  .cta-group { width: 100%; }
  .btn-cta-dark, .btn-cta-light {
    flex: 1;
    padding: 12px 18px;
    font-size: 14px;
  }
  .btn-cta-dark { gap: 8px; }

  /* Featured card image */
  .featured-cover { aspect-ratio: 1 / 1; }
  .featured-name { font-size: 22px; }
  .card { padding: 16px; border-radius: 22px; }

  /* Stat cards */
  .card-stat { padding: 16px; }
  .stat-big { font-size: clamp(36px, 10vw, 56px); }
  .stat-label { font-size: 12px; }

  /* Page-frame fits mobile screen */
  .page-frame { border-radius: 20px; }
  .site-header { padding: 12px 12px 8px; border-radius: 20px 20px 0 0; }

  .footer-grid { grid-template-columns: 1fr 1fr; }

  /* Compact player */
  .player-bar { padding: 6px 10px 6px 6px; gap: 8px; }
  .pb-info { min-width: 0; flex: 1; overflow: hidden; }
  .pb-name, .pb-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pb-progress, .pb-volume, .pb-fav { display: none; }
  .pb-cover { width: 40px; height: 40px; }
  .pb-play { width: 40px; height: 40px; }

  /* Breadcrumbs compact */
  .breadcrumb { font-size: 12px; }

  /* Station single hero */
  .station-hero { grid-template-columns: 1fr; gap: 16px; }
  .station-hero-cover { max-width: 280px; margin: 0 auto; }
  .station-name { font-size: clamp(28px, 8vw, 44px); }

  /* Station card grid */
  .station-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .station-card h3 { font-size: 14px; }
  .station-card .sc-meta { font-size: 12px; }
}

/* ============ STATION PAGE: mobile action row ============ */
/* At <=720px the .station-actions row goes from one line (Listen
   Live + 3 small buttons) to a stacked layout: Listen Live full
   width on its own row, the auxiliary buttons wrapping below. */
@media (max-width: 720px) {
  .station-actions {
    flex-wrap: wrap;
    gap: 10px;
    row-gap: 10px;
  }
  .station-actions .btn-play-large {
    flex: 1 0 100%;
    justify-content: space-between;
    padding: 12px 14px 12px 18px;
    font-size: 15px;
    white-space: nowrap;          /* prevent "Listen" / "Live" wrap */
  }
  .station-actions .btn-play-large .play-arrow { flex-shrink: 0; }
  .station-actions .btn-play-large .watch-pill {
    margin-left: auto;
    flex-shrink: 0;
  }
  .station-actions .btn-circle {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
  }
  .station-actions .flag-btn {
    flex: 0 1 auto;
    padding: 9px 14px;
    white-space: nowrap;          /* "Report offline" on one line */
    font-size: 13px;
  }
}

/* ============ SMALL MOBILE (<=360px) ============ */
/* Only hide the logo wordmark on truly small phones (iPhone SE
   width 320px, old Galaxy 360px). Standard modern phones at
   375-414px still show "Radio Nations" in the header. */
@media (max-width: 360px) {
  .nav-pill .logo-text { display: none; }
}

/* ============ STILL-small phone tweaks (<=420px) ============ */
@media (max-width: 420px) {
  .lang-trigger .lang-label { max-width: 64px; }
  .station-grid { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* ============ NEW PAGE PATTERNS ============ */

/* Page heading (used on country/genre/favorites/about/etc.) */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  margin: 12px 0 22px;
}
.page-head h1 {
  font-family: var(--display);
  font-size: clamp(36px, 4.8vw, 60px);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1;
  margin: 0 0 8px;
  font-feature-settings: 'ss01', 'cv11';
}
.page-head .lead-sm {
  color: var(--ink-soft);
  font-size: 16px;
  margin: 0;
}
.breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--ink-soft);
  margin-bottom: 10px;
}
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb .sep { opacity: .4; }
.breadcrumb .current { color: var(--ink); font-weight: 600; }

/* ===== Single Station Hero (v1) ===== */
.station-hero {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  margin-bottom: 18px;
}
.station-hero-cover {
  width: 220px; height: 220px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--card-alt);
}
.station-hero-cover img { width: 100%; height: 100%; object-fit: cover; }
.station-eyebrow { color: var(--ink-soft); font-size: 13px; margin: 4px 0 8px; }
.station-name {
  font-family: var(--display);
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1;
  margin: 0 0 14px;
  font-feature-settings: 'ss01', 'cv11';
}
.meta-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 18px;
}
.meta-pill {
  background: var(--card-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px; font-weight: 600;
}
.meta-pill.live {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}
.station-actions { display: flex; align-items: center; gap: 10px; }
.btn-circle {
  width: 44px; height: 44px;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 50%;
  font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, transform .15s;
}
.btn-circle:hover { background: var(--card-alt); transform: translateY(-1px); }
.btn-circle.active { background: var(--yellow); }

/* ===== Content card (about / schedule / info / FAQ) ===== */
.section-block {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  margin-bottom: 18px;
}
.section-block h2 {
  font-family: var(--display);
  font-size: 22px; font-weight: 900;
  letter-spacing: -0.035em;
  margin: 0 0 14px;
}
.section-block p {
  color: var(--ink); margin: 0 0 12px; line-height: 1.65;
}
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.info-cell {
  background: var(--card-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.info-cell-label {
  font-size: 11px; color: var(--ink-soft);
  letter-spacing: .04em; text-transform: uppercase;
  font-weight: 600;
}
.info-cell-value {
  font-weight: 700; font-size: 14px; margin-top: 2px;
}

/* ===== Schedule list ===== */
.schedule-list { display: flex; flex-direction: column; gap: 0; }
.schedule-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.schedule-row:last-child { border-bottom: none; }
.schedule-time {
  font-family: var(--display);
  font-weight: 800;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
  font-size: 18px;
}
.schedule-show-name { font-weight: 700; font-size: 15px; margin-bottom: 2px; }
.schedule-show-desc { color: var(--ink-soft); font-size: 13px; }

/* ===== FAQ ===== */
.faq-list { }
.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
}
.faq-item:last-child { border-bottom: none; }
.faq-q {
  font-weight: 700; font-size: 15px;
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer; user-select: none; gap: 16px;
}
.faq-q::after {
  content: '+';
  font-family: var(--display);
  font-size: 22px; font-weight: 900;
  color: var(--orange);
  transition: transform .15s;
}
.faq-item.open .faq-q::after { content: '−'; }
.faq-a { color: var(--ink-soft); margin-top: 10px; line-height: 1.65; display: none; font-size: 14px; }
.faq-item.open .faq-a { display: block; }

/* ===== Pagination ===== */
.pagination {
  display: flex; justify-content: center; gap: 6px; margin: 28px 0;
}
.pagination a, .pagination span {
  min-width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--card);
  border: 1.5px solid var(--line);
  font-size: 14px; font-weight: 600;
  padding: 0 6px;
}
.pagination a:hover { background: var(--card-alt); }
.pagination .current {
  background: var(--ink); color: #fff; border-color: var(--ink);
}
.pagination .ellipsis { background: transparent; border: none; color: var(--ink-soft); }

/* ===== Auth (login/register) ===== */
.auth-wrap {
  min-height: calc(100vh - 200px);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 0;
}
.auth-card {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px;
  width: 100%; max-width: 460px;
}
.auth-card h1 {
  font-family: var(--display);
  font-size: 36px; font-weight: 900;
  letter-spacing: -0.045em;
  margin: 0 0 6px;
  text-align: center;
  font-feature-settings: 'ss01', 'cv11';
}
.auth-sub {
  color: var(--ink-soft);
  text-align: center;
  margin: 0 0 26px;
  font-size: 14px;
}
.form-group { margin-bottom: 14px; }
.form-group label {
  display: block;
  font-size: 13px; font-weight: 600;
  margin-bottom: 6px;
}
.form-group input,
.form-group textarea {
  width: 100%;
  background: var(--card-alt);
  border: 1.5px solid var(--card-alt);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  outline: none;
  transition: border-color .15s, background .15s;
  color: var(--ink);
}
.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--ink);
  background: var(--card);
}
.form-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; margin: 4px 0 14px;
}
.form-row a { color: var(--ink); border-bottom: 1.5px solid var(--line); padding-bottom: 1px; }
.form-row a:hover { border-color: var(--ink); }
.btn-submit-full {
  width: 100%;
  background: var(--ink);
  color: #fff;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 14px;
  font-weight: 700;
  font-size: 15px;
  transition: transform .15s;
}
.btn-submit-full:hover { transform: translateY(-1px); }
.divider {
  text-align: center;
  color: var(--ink-soft);
  font-size: 12px;
  margin: 20px 0;
  position: relative;
}
.divider::before, .divider::after {
  content: '';
  position: absolute; top: 50%; width: 38%; height: 1px;
  background: var(--line);
}
.divider::before { left: 0; }
.divider::after { right: 0; }
.btn-google {
  width: 100%;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 12px;
  font-weight: 600;
  font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.btn-google:hover { background: var(--card-alt); }
.auth-foot {
  text-align: center;
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
}
.auth-foot a {
  color: var(--ink);
  border-bottom: 1.5px solid var(--ink);
  font-weight: 600;
  padding-bottom: 1px;
}

/* ===== Prose pages (about/contact/privacy/terms) ===== */
.prose {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px 44px;
  max-width: 820px;
  margin: 0 auto;
}
.prose h1 {
  font-family: var(--display);
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1;
  margin: 0 0 6px;
  font-feature-settings: 'ss01', 'cv11';
}
.prose .meta { color: var(--ink-soft); font-size: 13px; margin: 0 0 22px; }
.prose h2 {
  font-family: var(--display);
  font-size: 22px; font-weight: 900; letter-spacing: -0.03em;
  margin: 30px 0 10px;
}
.prose h3 { font-size: 16px; font-weight: 700; margin: 20px 0 8px; }
.prose p, .prose li {
  color: var(--ink); line-height: 1.7; font-size: 15px;
}
.prose ul, .prose ol { padding-left: 22px; }
.prose a { color: var(--orange); border-bottom: 1px solid var(--orange); }
.prose strong { font-weight: 700; }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 14px 0 28px;
}
.contact-cell {
  background: var(--card-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
}
.contact-cell h3 { margin: 0 0 4px; font-size: 14px; font-weight: 700; }
.contact-cell p { margin: 0; color: var(--ink-soft); font-size: 13px; }

/* ===== Empty state (Favorites) ===== */
.empty-state {
  background: var(--card);
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-lg);
  padding: 60px 24px;
  text-align: center;
  color: var(--ink-soft);
}
.empty-icon { font-size: 48px; margin-bottom: 12px; }
.empty-state h3 {
  font-family: var(--display);
  font-size: 22px; font-weight: 900;
  color: var(--ink);
  margin: 0 0 6px;
  letter-spacing: -0.03em;
}
.empty-state p { margin: 0 0 18px; font-size: 14px; }

/* ===== Filter bar (country/genre pages) ===== */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 20px;
}

/* ===== Responsive tweaks for new pages ===== */
@media (max-width: 720px) {
  .station-hero { grid-template-columns: 1fr; padding: 20px; }
  .station-hero-cover { width: 100%; height: 240px; }
  .auth-card { padding: 28px 22px; }
  .prose { padding: 26px 22px; }
  .contact-grid { grid-template-columns: 1fr; }
  .schedule-row { grid-template-columns: 70px 1fr; gap: 10px; }
  .page-head h1 { font-size: clamp(32px, 9vw, 48px); }
}

/* ============ SHARE POPOVER ============ */
.share-pop {
  position: fixed;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  padding: 8px;
  width: 240px;
  z-index: 200;
  box-shadow: 0 12px 36px rgba(0,0,0,.18);
  animation: spIn .15s ease-out;
}
@keyframes spIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.sp-head {
  font-family: var(--display);
  font-size: 13px; font-weight: 800;
  letter-spacing: -.02em;
  padding: 8px 12px 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.sp-link {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px; font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  background: transparent;
  border: none;
  width: 100%;
  cursor: pointer;
  transition: background .12s;
  font-family: inherit;
}
.sp-link:hover { background: var(--card-alt); }
.sp-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  color: var(--ink);
}
.sp-copy {
  border-top: 1px solid var(--line);
  margin-top: 4px;
  padding-top: 12px;
  border-radius: 0;
  text-align: left;
}
.sp-copy:hover { background: var(--card-alt); }
.sp-copy-label { color: var(--orange); font-weight: 600; }

/* ============ COUNTRIES PAGE — country sections ============ */
.country-section { margin: 0 0 36px; }
.cs-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.cs-head h2 {
  font-family: var(--display);
  font-size: 22px; font-weight: 900;
  letter-spacing: -.025em;
  margin: 0;
  display: flex; align-items: center; gap: 10px;
}
.cs-flag { font-size: 26px; }
.cs-count {
  font-family: var(--font);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-soft);
  background: var(--card-alt);
  border-radius: 999px;
  padding: 2px 12px;
}
.station-grid-tight {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.country-mini-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  color: var(--ink);
  transition: background .15s, transform .15s;
}
.country-mini-chip:hover { background: var(--card-alt); transform: translateY(-1px); }
.country-mini-chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }

.filter-section { margin: 0 0 18px; }
.filter-label {
  font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

/* ============ TOP STATIONS PAGE ============ */
.top-grid {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
@media (min-width: 1100px) {
  .top-grid { grid-template-columns: repeat(6, 1fr); }
}

/* ============ COOKIE-RELATED UTILITIES ============ */
.link-btn {
  background: none; border: none;
  color: var(--orange);
  border-bottom: 1px solid var(--orange);
  padding: 0 1px;
  font: inherit;
  cursor: pointer;
}
.link-btn:hover { color: var(--ink); border-color: var(--ink); }
.cat-tag {
  display: inline-block;
  margin-left: 8px;
  background: var(--ok, #10B981);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  vertical-align: middle;
}
.cat-tag.tag-optional { background: var(--ink-soft, #5C5C5C); }
.prose code {
  background: var(--card-alt);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 13px;
}

/* ============ CONSENT BANNER (bottom) ============ */
.consent-banner {
  position: fixed;
  bottom: var(--banner-bottom, 24px);   /* JS pushes higher when player is active */
  left: 50%;
  transform: translate(-50%, calc(100% + 32px));
  width: calc(100vw - 32px);
  max-width: 720px;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 18px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  z-index: 1000;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  transition: transform .35s cubic-bezier(.25,.46,.45,.94), opacity .25s;
  opacity: 0;
}
.consent-banner.open { transform: translate(-50%, 0); opacity: 1; }
.consent-icon { font-size: 28px; line-height: 1; }
.consent-text strong { font-family: var(--display); font-size: 15px; font-weight: 800; letter-spacing: -.01em; display: block; margin-bottom: 2px; }
.consent-text p { margin: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.45; }
.consent-text a { color: var(--orange); border-bottom: 1px solid var(--orange); }
.consent-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-consent {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px; font-weight: 600;
  color: var(--ink);
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, transform .1s;
}
.btn-consent:hover { background: var(--card-alt); }
.btn-consent:active { transform: scale(.97); }
.btn-consent-accept {
  background: var(--ink); color: #fff; border-color: var(--ink);
}
.btn-consent-accept:hover { background: var(--orange); border-color: var(--orange); }
.btn-do-not-sell { background: var(--orange); color: #fff; border-color: var(--orange); }

@media (max-width: 720px) {
  .consent-banner {
    grid-template-columns: 1fr;
    gap: 10px;
    text-align: center;
  }
  .consent-icon { display: none; }
  .consent-actions { justify-content: center; }
}

/* ============ CONSENT MODAL ============ */
.consent-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity .2s;
}
.consent-modal.open { opacity: 1; }
.consent-modal-card {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 22px;
  padding: 24px 28px;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(.95);
  transition: transform .2s;
}
.consent-modal.open .consent-modal-card { transform: scale(1); }
.cm-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.cm-head h2 {
  font-family: var(--display);
  font-size: 22px; font-weight: 900;
  letter-spacing: -.03em;
  margin: 0;
}
.cm-close {
  background: var(--card-alt);
  border: 1px solid var(--line);
  width: 30px; height: 30px;
  border-radius: 999px;
  font-size: 18px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.cm-intro { color: var(--ink-soft); font-size: 14px; margin: 0 0 18px; }
.cm-toggle {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.cm-toggle-info strong {
  font-family: var(--display);
  font-weight: 800;
  font-size: 14px;
  display: block; margin-bottom: 2px;
}
.cm-toggle-info p { margin: 0; font-size: 12px; color: var(--ink-soft); line-height: 1.45; max-width: 320px; }

/* Switch */
.switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute; cursor: pointer;
  inset: 0;
  background: #d1c8b3;
  border-radius: 999px;
  transition: background .2s;
}
.switch .slider::before {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  left: 3px; top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 2px 4px rgba(0,0,0,.15);
}
.switch input:checked + .slider { background: var(--orange); }
.switch input:checked + .slider::before { transform: translateX(20px); }
.switch input:disabled + .slider { opacity: .55; cursor: not-allowed; }

.cm-foot { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.btn-modal-reject {
  flex: 1;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 12px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  min-width: 140px;
}
.btn-modal-save {
  flex: 1;
  background: var(--ink);
  color: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 12px;
  font-weight: 700;
  cursor: pointer;
  min-width: 140px;
}
.btn-modal-save:hover { background: var(--orange); border-color: var(--orange); }
.cm-tiny { color: var(--ink-soft); font-size: 11px; text-align: left; margin: 14px 0 0; }
.cm-tiny a { color: var(--ink-soft); border-bottom: 1px solid var(--line); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ========== REVIEWS ========== */
.reviews-block { margin: 28px 0; }
.reviews-summary {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 15px;
  color: var(--ink);
}
.reviews-summary strong { font-size: 22px; line-height: 1; }
.reviews-stars { letter-spacing: 1px; color: var(--orange); font-size: 16px; }
.reviews-of { color: var(--ink-soft); }

.review-flash {
  padding: 10px 14px;
  border-radius: 10px;
  margin: 0 0 16px;
  font-size: 14px;
  border: 1px solid;
}
.review-flash-ok   { background: #DCFCE7; border-color: #16A34A; color: #15803D; }
.review-flash-warn { background: #FEF3C7; border-color: #D97706; color: #92400E; }
.review-flash-err  { background: #FEE2E2; border-color: #DC2626; color: #B91C1C; }

.review-form {
  background: var(--cream-soft, #FAF7F0);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 20px;
}
.review-form .rating-fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 10px;
}
.review-form .rating-fieldset legend {
  font-weight: 700;
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 6px;
  padding: 0;
}
.review-hint { font-size: 12px; color: var(--ink-soft); margin: 6px 0 0; }

/* CSS-only 5-star input (no JS state needed) */
.star-input {
  display: inline-flex;
  flex-direction: row-reverse; /* reverse so :hover/:checked siblings work */
  gap: 2px;
  font-size: 28px;
  line-height: 1;
}
.star-input input { position: absolute; opacity: 0; pointer-events: none; }
.star-input label {
  cursor: pointer;
  color: #D1D5DB;
  transition: color .12s ease, transform .12s ease;
  padding: 0 1px;
}
.star-input label:hover,
.star-input label:hover ~ label,
.star-input input:checked ~ label {
  color: var(--orange, #FF5722);
}
.star-input label:hover { transform: scale(1.1); }
.star-input input:focus-visible + label {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 4px;
}

.review-list { list-style: none; margin: 0; padding: 0; }
.review-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.review-item:last-child { border-bottom: 0; }
.review-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}
.review-author { font-weight: 700; color: var(--ink); }
.review-rating { color: var(--orange, #FF5722); letter-spacing: 1px; font-size: 14px; }
.review-date { color: var(--ink-soft); font-size: 12px; margin-left: auto; }
.review-body { margin: 0; color: var(--ink); line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; }
.review-empty { color: var(--ink-soft); font-style: italic; padding: 12px 0; }

.review-pagination {
  margin: 16px 0 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.review-pagination a,
.review-pagination span,
.review-more-btn {
  padding: 8px 16px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  background: #fff;
  text-decoration: none;
}
.review-pagination a:hover,
.review-more-btn:hover { border-color: var(--ink); }
.review-pagination .current { background: var(--ink); color: #fff; border-color: var(--ink); }
.review-more { display: none; } /* hidden, JS replaces with button */
.review-more-btn[disabled] { opacity: .6; cursor: not-allowed; }

.review-loggedout {
  background: #FAF7F0;
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  color: var(--ink-soft);
  font-size: 14px;
}
.review-loggedout a { color: var(--ink); font-weight: 700; border-bottom: 1px solid var(--line); }

/* Station card rating row */
.sc-rating {
  margin: 4px 0 8px;
  font-size: 13px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 4px;
}
.sc-rating .sc-stars { color: var(--orange, #FF5722); letter-spacing: 1px; }
.sc-rating .sc-rating-num { font-weight: 700; color: var(--ink); }

/* ========== FLAG / REPORT BUTTON ========== */
.flag-btn {
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color .12s ease, border-color .12s ease;
}
.flag-btn:hover { color: #DC2626; border-color: #DC2626; }
.flag-btn svg { display: block; }

/* ========== GENERIC MODAL ========== */
.lr-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.lr-modal[hidden] { display: none; }
.lr-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}
.lr-modal-panel {
  position: relative;
  background: #fff;
  border-radius: 18px;
  padding: 24px 22px 20px;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  z-index: 1;
}
.lr-modal-panel h3 { margin: 0 0 4px; font-size: 20px; }
.lr-modal-sub { color: var(--ink-soft); font-size: 13px; margin: 0 0 14px; }
.lr-modal-x {
  position: absolute;
  top: 8px;
  right: 10px;
  background: transparent;
  border: 0;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-soft);
  width: 32px;
  height: 32px;
}
.lr-modal-x:hover { color: var(--ink); }
.lr-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 10px;
}
/* Reset the joined-pill hero shape when these buttons appear inside a modal. */
.lr-modal-actions .btn-cta-light,
.lr-modal-actions .btn-cta-dark {
  margin-left: 0;
  border-left: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 12px 22px;
  font-size: 14px;
}
.lr-modal-actions .btn-cta-dark { border-color: var(--ink); }
.lr-modal-status {
  margin: 10px 0 0;
  font-size: 13px;
  min-height: 1.2em;
}
.lr-modal-status.ok  { color: #15803D; }
.lr-modal-status.err { color: #B91C1C; }
body.lr-modal-open { overflow: hidden; }

/* ========== TURBO NAVIGATION LOADING BAR ========== */
html.lr-nav-loading::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--orange, #FF5722), transparent);
  background-size: 30% 100%;
  background-repeat: no-repeat;
  animation: lrNavLoading 1.1s ease-in-out infinite;
  z-index: 99999;
  pointer-events: none;
}
@keyframes lrNavLoading {
  0%   { background-position: -30% 0; }
  100% { background-position: 130% 0; }
}

/* ========== LANGUAGE SWITCHER (two-column, onlineradiobox-style) ========== */
.lang-switcher {
  position: relative;
  display: inline-block;
}
.lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 7px 12px 7px 11px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.lang-trigger:hover { background: var(--card-alt); }
.lang-trigger[aria-expanded="true"] { background: var(--card-alt); }
.lang-trigger .lang-globe { display: inline-flex; }
.lang-trigger .lang-chev {
  font-size: 10px;
  margin-left: 2px;
  color: var(--ink-soft);
  transition: transform .15s ease;
}
.lang-trigger[aria-expanded="true"] .lang-chev { transform: rotate(180deg); }

/* Two-column dropdown panel */
.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 6px;
  width: max-content;
  min-width: 460px;
  max-width: min(640px, calc(100vw - 32px));
  max-height: min(78vh, 720px);
  overflow-y: auto;
  z-index: 80;
  box-shadow: 4px 4px 0 var(--ink);
}
.lang-menu[hidden] { display: none; }

.lang-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 4px;
}

/* Primary block (top 6 popular countries) sits first; we keep its
   background the same as the rest so the list reads as one consistent
   grid. The "popularity" is conveyed by position (top) + alphabetical
   sort kicking in below. A thin divider separates primary from rest
   only when both sections are populated. */
.lang-primary {
  padding: 0;
  margin-bottom: 2px;
}
.lang-primary + .lang-rest {
  border-top: 1px solid var(--line);
  border-top-color: rgba(0, 0, 0, 0.08);
  padding-top: 4px;
  margin-top: 4px;
}

/* Individual item — flag + country name */
.lang-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  line-height: 1.25;
  min-width: 0;
}
.lang-item .lang-flag {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  display: inline-flex;
  width: 22px;
  justify-content: center;
}
.lang-item .lang-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lang-item:hover { background: var(--card-alt); }
.lang-item.is-active {
  background: var(--yellow);
  font-weight: 700;
}

/* "All countries" global entry shown above the grid when on a country */
.lang-item-global {
  font-weight: 600;
  padding: 8px 14px;
}
.lang-divider {
  height: 1px;
  background: var(--line);
  opacity: 0.2;
  margin: 4px 6px;
}

/* Flag in the trigger button */
.lang-trigger .lang-flag {
  font-size: 16px;
  line-height: 1;
}
.lang-trigger .lang-globe { display: none; }   /* old SVG globe no longer used */

.lang-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

@media (max-width: 640px) {
  /* On mobile the trigger sits near the right edge, so an absolutely
     positioned dropdown anchored to the trigger overflows the left side
     of the viewport. Switch to fixed positioning so the dropdown is
     viewport-relative and can span the full width safely. */
  .lang-menu {
    position: fixed;
    top: auto;
    right: 16px;
    left: 16px;
    width: auto;
    min-width: 0;
    max-width: none;
    max-height: 70vh;
    margin-top: 8px;
  }
  .lang-item { font-size: 13px; padding: 8px 10px; }
  .lang-item .lang-flag { font-size: 17px; width: 20px; }
}
@media (max-width: 420px) {
  .lang-section { grid-template-columns: 1fr; }
  .lang-menu { right: 12px; left: 12px; }
}

/* ========== LANGUAGE SUGGESTION BANNER ========== */
.lr-lang-suggest {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: #fff;
  padding: 12px 14px 12px 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  z-index: 9998;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  max-width: calc(100% - 32px);
}
.lr-lang-suggest.open {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.lr-lang-suggest-text { white-space: nowrap; }
.lr-lang-suggest-text strong { color: var(--yellow); font-weight: 700; }
.lr-lang-suggest-btn {
  background: var(--yellow);
  color: var(--ink);
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 13px;
  border: 1.5px solid var(--yellow);
}
.lr-lang-suggest-btn:hover { background: var(--yellow-soft); }
.lr-lang-suggest-x {
  background: transparent;
  border: 0;
  color: rgba(255,255,255,.7);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.lr-lang-suggest-x:hover { color: #fff; }

@media (max-width: 720px) {
  .lr-lang-suggest {
    flex-wrap: wrap;
    border-radius: 14px;
    bottom: 16px;
  }
  .lr-lang-suggest-text { white-space: normal; }
}

/* ========== WEEK SCHEDULE TABS ========== */
.week-schedule { margin-top: 8px; }

.week-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 1.5px solid var(--line);
  margin-bottom: 18px;
  padding-bottom: 0;
}
.week-tab {
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: 10px 14px;
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
  margin-bottom: -2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
  border-radius: 8px 8px 0 0;
}
.week-tab:hover {
  color: var(--ink);
  background: var(--card-alt);
}
.week-tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--orange);
  background: var(--card);
}
.week-tab-day { font-weight: 700; }
.week-tab-today {
  background: var(--orange);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 999px;
}
.week-tab-count {
  background: var(--card-alt);
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
}
.week-tab.is-active .week-tab-count {
  background: var(--ink);
  color: #fff;
}

.week-panel[hidden] { display: none; }
.week-panel { animation: lrFadeIn 0.15s ease; }
@keyframes lrFadeIn {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

.schedule-empty {
  color: var(--ink-soft);
  font-style: italic;
  padding: 24px 4px;
  text-align: center;
}

@media (max-width: 720px) {
  .week-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--pad)) 16px;
    padding: 0 var(--pad);
  }
  .week-tab {
    padding: 8px 10px;
    font-size: 12px;
  }
}

/* ========== SEARCH OVERLAY ========== */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 14vh 20px 20px;
}
.search-overlay[hidden] { display: none; }

.search-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 18, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .18s ease;
}
.search-overlay.is-open .search-overlay-backdrop { opacity: 1; }

.search-overlay-panel {
  position: relative;
  width: 100%;
  max-width: 640px;
  background: var(--card);
  border: 1.5px solid var(--ink);
  border-radius: 18px;
  box-shadow: 6px 6px 0 var(--ink);
  padding: 22px 22px 18px;
  transform: translateY(-10px) scale(.98);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}
.search-overlay.is-open .search-overlay-panel { transform: translateY(0) scale(1); opacity: 1; }

.search-overlay-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink);
}
.search-overlay-close:hover { background: var(--card-alt); }

.search-overlay-form {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  margin-top: 6px;
  background: #fff;
}
.search-overlay-form:focus-within { border-color: var(--ink); }
.search-overlay-icon { color: var(--ink-soft); flex-shrink: 0; }
.search-overlay-form input[type="search"] {
  flex: 1;
  border: 0;
  background: transparent;
  font-size: 16px;
  color: var(--ink);
  outline: none;
  min-width: 0;
}
.search-overlay-form input[type="search"]::placeholder { color: var(--ink-soft); }
.search-overlay-submit {
  background: var(--ink);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 13px;
}
.search-overlay-submit:hover { background: #000; }

.search-overlay-hint {
  margin: 12px 4px 0;
  color: var(--ink-soft);
  font-size: 12px;
}
.search-overlay-hint kbd {
  background: var(--card-alt);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (max-width: 640px) {
  .search-overlay { padding: 70px 12px 12px; }
  .search-overlay-panel { padding: 18px 16px 14px; }
  .search-overlay-submit { padding: 8px 14px; }
  .search-overlay-form input[type="search"] { font-size: 15px; }
}

/* Lock body scroll while the overlay is open */
body.search-open { overflow: hidden; }

/* ========== MOBILE DRAWER ========== */
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  justify-content: flex-end;
}
.mobile-drawer[hidden] { display: none; }

.mobile-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.mobile-drawer.is-open .mobile-drawer-backdrop { opacity: 1; }

.mobile-drawer-panel {
  position: relative;
  background: var(--card);
  width: min(360px, 88vw);
  max-width: 100vw;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 14px;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.2);
  overflow-y: auto;
}
.mobile-drawer.is-open .mobile-drawer-panel { transform: translateX(0); }

.mobile-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.mobile-drawer-head .logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 16px;
}
.mobile-drawer-close {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink);
}
.mobile-drawer-close:hover { background: var(--card-alt); }

.mobile-drawer-search {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 4px 4px 4px 14px;
  background: var(--card-alt);
}
.mobile-drawer-search input[type="search"] {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 8px 0;
  font: inherit;
  outline: none;
  min-width: 0;
}
.mobile-drawer-search button {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 0;
  background: var(--ink);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mobile-drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mobile-drawer-nav a {
  display: block;
  padding: 12px 14px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-radius: 10px;
  transition: background 0.12s ease;
}
.mobile-drawer-nav a:hover,
.mobile-drawer-nav a:focus-visible {
  background: var(--card-alt);
  outline: none;
}

.mobile-drawer-auth {
  margin-top: auto;
  display: flex;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.mobile-drawer-auth .btn-ghost,
.mobile-drawer-auth .btn-primary {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  font-size: 14px;
  text-align: center;
  border-radius: 999px;
}
.mobile-drawer-auth .btn-ghost {
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.mobile-drawer-auth .btn-primary {
  background: var(--yellow);
  border: 1.5px solid var(--line);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

/* Lock body scroll when drawer is open */
body.lr-drawer-open { overflow: hidden; }

/* Hamburger button. `display` intentionally NOT set here so the
   cascade in @media (max-width:720px) above wins — it sets
   `display: inline-flex`. Earlier `.mobile-menu-btn { display: none }`
   at line ~125 keeps the button hidden on desktop. */
.mobile-menu-btn {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink);
  padding: 0;
  flex-shrink: 0;
}
.mobile-menu-btn:hover { background: var(--card-alt); }
.mobile-menu-btn[aria-expanded="true"] { background: var(--yellow); }

/* ========== SHARE TOAST ========== */
.lr-share-toast {
  position: fixed;
  bottom: 110px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  max-width: calc(100% - 32px);
  text-align: center;
}
.lr-share-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}