/* ═══════════════════════════════════════════════════════════════
   FarsiChart - Modern Persian Music Rankings
   Clean, responsive, dark-themed design
   ═══════════════════════════════════════════════════════════════ */

/* ── Reset & Base ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-primary: #0a0a0a;
  --bg-secondary: #111111;
  --bg-card: #161616;
  --bg-hover: #1c1c1c;
  --bg-input: #1a1a1a;
  --border: #222222;
  --border-light: #2a2a2a;
  --text-primary: #f0f0f0;
  --text-secondary: #a0a0a0;
  --text-muted: #666666;
  --spotify-green: #1DB954;
  --spotify-green-hover: #1ed760;
  --spotify-green-dim: rgba(29, 185, 84, 0.1);
  --rj-red: #c62828;
  --rj-red-hover: #e53935;
  --rj-red-dim: rgba(198, 40, 40, 0.1);
  --accent: var(--spotify-green);
  --rank-up: #4caf50;
  --rank-down: #f44336;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --shadow: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.4);
  --transition: 0.2s ease;
  --max-width: 1000px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Native Persian font on the Farsi locale (/fa) ──────────────────
   Redefining --font for the fa subtree swaps every `font-family: var(--font)`
   rule at once, so the whole Farsi UI uses Vazirmatn (the standard modern
   Persian web font) instead of the Latin Inter, which renders Farsi poorly. */
html[lang="fa"] {
  --font: 'Vazirmatn', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, sans-serif;
}
html[lang="fa"] input,
html[lang="fa"] button,
html[lang="fa"] select,
html[lang="fa"] textarea {
  font-family: var(--font);   /* form controls don't inherit font by default */
}
/* Keep inherently left-to-right content (URLs, latin IDs) rendering LTR on the
   RTL page so slashes/dots aren't reordered into odd positions. */
html[lang="fa"] input[type="url"],
html[lang="fa"] input[type="email"],
html[lang="fa"] .ltr {
  direction: ltr;
  text-align: right;
  unicode-bidi: plaintext;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.main-content { flex: 1; }

/* RTL support */
html[dir="rtl"] body { direction: rtl; }
html[dir="rtl"] .artist-info { flex-direction: row-reverse; }
html[dir="rtl"] .artist-avatar { margin-right: 0; margin-left: 10px; }
html[dir="rtl"] .col-artist { text-align: right; }
html[dir="rtl"] .rank-arrow { margin-left: 0; margin-right: 4px; }

a { color: var(--text-primary); text-decoration: none; }
img { display: block; max-width: 100%; }

/* ── Header ──────────────────────────────────────────────────── */
.header {
  position: relative;
  z-index: 100;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.logo-link {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.logo-img {
  width: 32px;
  height: 32px;
  border-radius: 6px;
}

.logo-text {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.nav {
  display: flex;
  gap: 4px;
}

.nav-link {
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all var(--transition);
}

.nav-link:hover, .nav-link.active {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lang-switch {
  display: flex;
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
}

.lang-btn {
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
}

.lang-btn.active {
  background: var(--accent);
  color: #fff;
}

/* Compact Newsletter trigger shown in the header on mobile (the full nav, incl.
   the desktop Newsletter button, is hidden ≤768px). Hidden on desktop. */
.header-nl-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
  flex-shrink: 0;
}
.header-nl-btn:hover, .header-nl-btn:active {
  color: var(--spotify-green);
  border-color: var(--spotify-green);
}

/* Compact Music link shown in the header on mobile (the full nav, incl. the
   desktop "Music" link, is hidden ≤768px). Hidden on desktop. Mirrors .header-nl-btn. */
.header-music-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
  flex-shrink: 0;
}
.header-music-btn:hover, .header-music-btn:active {
  color: var(--spotify-green);
  border-color: var(--spotify-green);
}

/* Compact chart switcher shown in the header on mobile (≤768px) so you can jump
   between the Top Artists and Top Songs charts — replaces the lone music icon, which
   gave no way back to the artist chart. Hidden on desktop (the text nav handles it).
   Mirrors .lang-switch. The active segment marks the chart you are on. */
.chart-switch {
  display: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}
.chart-switch-btn {
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 5px 10px;
  color: var(--text-muted);
  white-space: nowrap;
  transition: all var(--transition);
}
.chart-switch-btn.active {
  background: var(--accent);
  color: #fff;
}

/* ── Hero Section ────────────────────────────────────────────── */
.hero {
  background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
  padding: 48px 20px 32px;
  text-align: center;
}

.hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.hero-line1 {
  display: block;
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.hero-line2 {
  display: block;
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  font-weight: 500;
  color: var(--accent);
  margin-top: 4px;
}

.hero-sub {
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Last Updated Label ─────────────────────────────────────── */
.last-updated {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  opacity: 0.7;
}

/* ── Controls (Filters + Platform Toggle) ────────────────────── */
.main-content {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 24px 20px 36px;
}

.controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.category-filter {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.cat-btn {
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 50px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

.cat-btn:hover {
  border-color: var(--text-muted);
  color: var(--text-primary);
}

.cat-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.platform-toggle {
  display: flex;
  gap: 4px;
  background: var(--bg-card);
  border-radius: 12px;
  padding: 4px;
  border: 1px solid var(--border-light);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.platform-btn {
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 20px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  gap: 7px;
}

.platform-btn:hover {
  color: var(--text-secondary);
  background: rgba(255,255,255,0.04);
}

.platform-btn.spotify.active {
  background: var(--spotify-green);
  color: #fff;
  box-shadow: 0 2px 12px rgba(29,185,84,0.3);
}

.platform-btn.radiojavan.active {
  background: var(--rj-red);
  color: #fff;
  box-shadow: 0 2px 12px rgba(198,40,40,0.3);
}

.platform-btn svg { width: 14px; height: 14px; }

/* .rj-icon replaced by .rj-logo SVG */

/* ── Search ──────────────────────────────────────────────────── */
.search-container {
  margin-bottom: 16px;
}

.search-input {
  width: 100%;
  font-family: var(--font);
  font-size: 16px; /* Must be 16px+ to prevent iOS zoom on focus */
  padding: 10px 16px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  outline: none;
  transition: border-color var(--transition);
}

.search-input::placeholder { color: var(--text-muted); }
.search-input:focus { border-color: var(--accent); }

/* ── Sort Indicator ──────────────────────────────────────────── */
.sort-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  color: var(--text-secondary);
  min-height: 40px;
}

.sort-indicator .sort-label {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.sort-select {
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 28px 4px 10px;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%231DB954' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: border-color var(--transition);
}

.sort-select:focus { border-color: var(--accent); }

.sort-select option {
  background: var(--bg-card);
  color: var(--text-primary);
}

/* ── Leaderboard Table ───────────────────────────────────────── */
.table-container {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow-x: auto;
}

/* CLS fix (homepage only): the chart loads via JS, so reserve vertical space
   while it fills — otherwise the content below (submit section, footer) jumps
   down ~700px on load, which on desktop is a large Cumulative Layout Shift.
   Reserving ~70vh keeps that content below the fold during load, where shifts
   don't count. The loaded chart is far taller than 70vh, so this adds no gap in
   the steady state. Scoped to #leaderboard so the /music page is unaffected. */
#leaderboard .table-container { min-height: 70vh; }

.leaderboard-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.leaderboard-table th {
  background: var(--bg-secondary);
  padding: 12px 16px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.leaderboard-table th.sortable { cursor: pointer; }
/* No hover color change - it conflicts with the active green highlight */

/* Active sort column header highlight */
.leaderboard-table th.sort-active {
  color: var(--accent);
}

.col-rank { width: 50px; text-align: center; }
.col-artist { text-align: left; }
.col-listeners { width: 170px; text-align: center; }
.col-followers { width: 130px; text-align: center; }

.leaderboard-table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
  vertical-align: middle;
}

.leaderboard-table tr {
  transition: background var(--transition);
}

.leaderboard-table tbody tr:hover {
  background: var(--bg-hover);
}

.leaderboard-table tbody tr:last-child td {
  border-bottom: none;
}

/* Rank cell */
.cell-rank {
  text-align: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cell-rank .rank-number { display: inline; }

.rank-arrow {
  font-size: 0.5rem;
  margin-left: 2px;
  font-weight: 700;
  vertical-align: middle;
}

.rank-arrow.up { color: var(--rank-up); }
.rank-arrow.down { color: var(--rank-down); }

/* Total plays column for RJ */
.col-total { width: 130px; text-align: center; }

/* Top 3 ranks */
tr[data-rank="1"] .cell-rank .rank-number,
tr[data-rank="2"] .cell-rank .rank-number,
tr[data-rank="3"] .cell-rank .rank-number {
  color: var(--accent);
  font-weight: 800;
}

/* Artist cell */
.artist-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.artist-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-hover);
}

.artist-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.artist-name:hover { text-decoration: underline; }

.artist-category {
  display: inline-block;
  font-size: 0.55rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(255,255,255,0.06);
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 8px;
  vertical-align: middle;
  opacity: 0.7;
}

/* Listeners/followers/plays cells -- CENTER aligned */
.cell-number {
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--text-secondary);
}

/* ── Loading / Empty / Error States ──────────────────────────── */
.loading-state, .empty-state, .error-state {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-muted);
}

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 16px;
}

@keyframes spin { to { transform: rotate(360deg); } }

.hidden { display: none !important; }

.retry-btn {
  font-family: var(--font);
  margin-top: 12px;
  padding: 8px 20px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
}

/* ── Submit Artist Section ───────────────────────────────────── */
.submit-section {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  padding: 60px 20px;
}

.submit-inner {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.submit-inner h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.submit-desc {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 28px;
}

.submit-form {
  text-align: left;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-secondary);
}

.optional {
  font-weight: 400;
  color: var(--text-muted);
}

.form-input {
  width: 100%;
  font-family: var(--font);
  font-size: 0.9rem;
  padding: 10px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  outline: none;
  transition: border-color var(--transition);
  appearance: none;
}

.form-input:focus { border-color: var(--accent); }
.form-input::placeholder { color: var(--text-muted); }

select.form-input {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.form-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.submit-btn {
  width: 100%;
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 12px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition);
}

.submit-btn:hover { background: var(--spotify-green-hover); transform: translateY(-1px); }
.submit-btn:active { transform: translateY(0); }
.submit-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.form-message {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  text-align: center;
}

.form-message.success {
  background: rgba(76, 175, 80, 0.15);
  color: #4caf50;
  border: 1px solid rgba(76, 175, 80, 0.3);
}

.form-message.error {
  background: rgba(244, 67, 54, 0.15);
  color: #f44336;
  border: 1px solid rgba(244, 67, 54, 0.3);
}

/* ── Related Charts Nav (internal links) ───────────────────────── */
.related-charts {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  padding: 48px 20px;
}
.related-charts-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}
.related-charts h2 {
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 6px;
}
.related-charts-sub {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 24px;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.related-card {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.related-card:hover {
  border-color: var(--accent);
  background: var(--bg-hover);
  transform: translateY(-2px);
}
.related-card h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.related-card span {
  font-size: 0.8rem;
  color: var(--text-muted);
}
@media (max-width: 768px) {
  .related-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .related-card { padding: 12px 14px; }
  .related-card h3 { font-size: 0.85rem; }
  .related-card span { font-size: 0.72rem; }
}

/* SEO content links */
.seo-content a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.seo-content a:hover { text-decoration: underline; }

/* ── SEO Content Section ─────────────────────────────────────── */
.seo-content {
  background: var(--bg-primary);
  border-top: 1px solid var(--border);
  padding: 48px 20px;
}

.seo-inner {
  max-width: 720px;
  margin: 0 auto;
}

.seo-content h2 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.seo-content h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 20px;
  margin-bottom: 8px;
  color: var(--text-secondary);
}

.seo-content p {
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.seo-content strong {
  color: var(--text-secondary);
  font-weight: 600;
}

/* ── Footer ──────────────────────────────────────────────────── */
.footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  padding: 40px 20px;
  text-align: center;
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.footer-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
}

.footer-logo { width: 24px; height: 24px; border-radius: 4px; }
.footer-name { font-weight: 700; font-size: 0.95rem; }

.footer-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  max-width: 400px;
  margin: 0 auto 16px;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
}

.footer-links a {
  color: var(--text-muted);
  transition: color var(--transition);
}

.footer-links a:hover { color: var(--text-primary); }

.footer-copy {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.footer-maker {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 12px;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .header-inner { padding: 0 12px; }
  .nav { display: none; }
  .header-nl-btn { display: inline-flex; }
  .header-music-btn { display: inline-flex; }
  .chart-switch { display: flex; }
  .header-actions { gap: 8px; }

  .hero { padding: 32px 16px 24px; }

  .main-content { padding: 16px 12px 24px; }

  .controls {
    flex-direction: column;
    align-items: stretch;
  }

  .category-filter {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    justify-content: center;
  }

  .platform-toggle {
    justify-content: center;
    padding: 5px;
    border-radius: 14px;
  }

  .platform-btn {
    padding: 10px 22px;
    font-size: 0.85rem;
  }

  /* Mobile table */
  .table-container { overflow-x: hidden; }
  .leaderboard-table { table-layout: fixed; width: 100%; }
  .col-rank { width: 46px; } /* fits 3-digit ranks (100+) + change arrow without overflow */
  /* JS renders only 3 columns on mobile: rank, artist, selected metric */

  .leaderboard-table th,
  .leaderboard-table td { padding: 8px 6px; }

  .leaderboard-table th {
    font-size: 0.6rem;
    letter-spacing: 0.03em;
  }

  .artist-avatar { width: 28px; height: 28px; }
  .artist-name { font-size: 0.82rem; }
  .artist-category { display: none; }
  .cell-number { font-size: 0.82rem; }
  .cell-rank { font-size: 0.8rem; }
  .rank-arrow { font-size: 0.5rem; }

  .sort-indicator { font-size: 0.75rem; padding: 8px 14px; }
  .sort-select { font-size: 0.8rem; }

  .submit-section { padding: 40px 16px; }
}

@media (max-width: 480px) {
  /* On phones the header carries logo icon + Music + Newsletter + EN/FA. Drop the
     wordmark (the icon stays, brand still recognizable) so nothing overflows. */
  .logo-text { display: none; }
  .hero-sub { font-size: 0.8rem; }
  .col-listeners { width: 90px; }
  .leaderboard-table th { font-size: 0.55rem; }
  .artist-avatar { width: 26px; height: 26px; }
  .artist-name { font-size: 0.78rem; }
  .cell-number { font-size: 0.78rem; }
}

/* ── RJ Logo SVG ────────────────────────────────────────────── */
.rj-logo { width: 14px; height: 14px; }

/* ── Print ───────────────────────────────────────────────────── */
@media print {
  .header, .hero, .controls, .search-container,
  .submit-section, .footer, .ob-overlay { display: none; }
  body { background: white; color: black; }
  .table-container { border: 1px solid #ccc; }
}

/* ═══════════════════════════════════════════════════════════════
   Onboarding Modal
   ═══════════════════════════════════════════════════════════════ */

/* Overlay */
.ob-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  padding: 20px;
}

.ob-overlay.ob-visible {
  opacity: 1;
  visibility: visible;
}

/* Card - always LTR regardless of page language */
.ob-card {
  direction: ltr;
  text-align: center;
  position: relative;
  width: 100%;
  max-width: 420px;
  background: #161616;
  border: 1px solid #2a2a2a;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255,255,255,0.04);
  transform: translateY(20px) scale(0.97);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ob-overlay.ob-visible .ob-card {
  transform: translateY(0) scale(1);
}

/* Close button */
.ob-close {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 10;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgba(255,255,255,0.06);
  color: #555;
  font-size: 18px;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ob-close:hover {
  background: rgba(255,255,255,0.12);
  color: #999;
}

/* Slides container */
.ob-slides {
  position: relative;
  overflow: hidden;
}

/* Individual slide */
.ob-slide {
  display: none;
  flex-direction: column;
  animation: obFadeIn 0.35s ease forwards;
}

.ob-slide.ob-slide--active {
  display: flex;
}

@keyframes obFadeIn {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes obFadeOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-16px); }
}

.ob-slide.ob-slide--exit {
  display: flex;
  animation: obFadeOut 0.2s ease forwards;
}

/* Visual area (top 60%) */
.ob-visual {
  padding: 40px 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  background: linear-gradient(180deg, #1a1a1a 0%, #161616 100%);
  min-height: 200px;
  justify-content: center;
}

/* Text area (bottom 40%) */
.ob-text {
  padding: 20px 32px 28px;
  text-align: center;
}

.ob-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #f0f0f0;
  margin-bottom: 6px;
}

.ob-subtitle {
  font-size: 0.85rem;
  color: #888;
  margin-bottom: 14px;
  font-weight: 400;
}

.ob-body {
  font-size: 0.82rem;
  color: #999;
  line-height: 1.65;
}

/* ── Slide 1 graphics ── */

.ob-graphic-platforms {
  display: flex;
  gap: 16px;
}

.ob-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
}

.ob-badge--spotify {
  background: linear-gradient(135deg, #1DB954 0%, #17a34a 100%);
  box-shadow: 0 4px 20px rgba(29, 185, 84, 0.3);
}

.ob-badge--rj {
  background: linear-gradient(135deg, #c62828 0%, #a31d1d 100%);
  box-shadow: 0 4px 20px rgba(198, 40, 40, 0.3);
}

.ob-toggle-demo {
  display: flex;
  gap: 3px;
  background: #1e1e1e;
  border-radius: 8px;
  padding: 3px;
  border: 1px solid #2a2a2a;
}

.ob-demo-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #555;
  transition: all 0.2s;
}

.ob-demo-btn--active.ob-demo-btn--green {
  background: #1DB954;
  color: #fff;
}

.ob-demo-btn--dim {
  color: #555;
}

/* ── Slide 2 graphics ── */

.ob-dropdown-demo {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #1e1e1e;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  padding: 10px 18px;
  width: 100%;
  max-width: 300px;
}

.ob-dropdown-label {
  font-size: 0.72rem;
  color: #666;
  white-space: nowrap;
}

.ob-dropdown-select {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #1DB954;
  border: 1px solid #2a2a2a;
  border-radius: 5px;
  padding: 3px 10px;
  cursor: default;
}

.ob-dropdown-options {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: #222;
  border-radius: 6px;
  overflow: hidden;
  margin-left: auto;
  flex-shrink: 0;
}

.ob-dropdown-opt {
  padding: 4px 10px;
  font-size: 0.62rem;
  font-weight: 500;
  color: #666;
  background: #1a1a1a;
  white-space: nowrap;
}

.ob-dropdown-opt--active {
  color: #1DB954;
  background: rgba(29, 185, 84, 0.08);
}

.ob-pills-demo {
  display: flex;
  gap: 6px;
}

.ob-pill {
  padding: 5px 14px;
  border-radius: 50px;
  font-size: 0.7rem;
  font-weight: 500;
  border: 1px solid #2a2a2a;
  color: #666;
  background: transparent;
}

.ob-pill--active {
  background: #1DB954;
  border-color: #1DB954;
  color: #fff;
}

/* ── Slide 3 graphics ── */

.ob-submit-demo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 280px;
}

.ob-input-demo {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  padding: 8px 12px;
}

.ob-input-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ob-input-icon--green { background: rgba(29, 185, 84, 0.15); }
.ob-input-icon--red { background: rgba(198, 40, 40, 0.15); }

.ob-input-ph {
  font-size: 0.68rem;
  color: #444;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ob-search-demo {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 8px 14px;
  width: 100%;
  max-width: 280px;
}

.ob-search-demo span {
  font-size: 0.72rem;
  color: #444;
}

/* CTA Button */
.ob-cta {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 13px;
  background: linear-gradient(135deg, #1DB954 0%, #17a34a 100%);
  color: #fff;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 16px rgba(29, 185, 84, 0.3);
  letter-spacing: -0.01em;
}

.ob-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(29, 185, 84, 0.4);
  background: linear-gradient(135deg, #1ed760 0%, #1DB954 100%);
}

.ob-cta:active {
  transform: translateY(0);
}

.ob-lang-note {
  margin-top: 12px;
  font-size: 0.7rem;
  color: #555;
}

/* Navigation dots */
.ob-nav {
  display: flex;
  justify-content: center;
  padding: 0 32px 24px;
}

.ob-dots {
  display: flex;
  gap: 8px;
}

.ob-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: #333;
  cursor: pointer;
  padding: 0;
  transition: all 0.25s ease;
}

.ob-dot--active {
  background: #1DB954;
  width: 24px;
  border-radius: 4px;
}

.ob-dot:hover:not(.ob-dot--active) {
  background: #555;
}

/* ── Onboarding mobile responsive ── */
@media (max-width: 480px) {
  .ob-overlay { padding: 12px; }

  .ob-card {
    max-width: 100%;
    border-radius: 16px;
  }

  .ob-visual {
    padding: 28px 20px 18px;
    min-height: 160px;
  }

  .ob-text {
    padding: 16px 20px 22px;
  }

  .ob-title { font-size: 1.15rem; }
  .ob-body { font-size: 0.78rem; }

  .ob-graphic-platforms { gap: 10px; }

  .ob-badge {
    padding: 8px 14px;
    font-size: 0.75rem;
  }

  .ob-dropdown-demo {
    padding: 8px 12px;
    flex-wrap: wrap;
    gap: 6px;
  }

  .ob-nav { padding: 0 20px 20px; }
}

@media (max-width: 360px) {
  .ob-badge {
    padding: 6px 10px;
    font-size: 0.7rem;
    gap: 5px;
  }

  .ob-badge svg { width: 16px; height: 16px; }
}

/* ── Onboarding mock UI elements ─────────────────────────── */
.ob-graphic {
  padding: 32px 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: linear-gradient(180deg, #1a1a1a 0%, #161616 100%);
  min-height: 180px;
  justify-content: center;
}

.ob-graphic-label {
  font-size: 0.65rem;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}

.ob-text h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #f0f0f0;
  margin-bottom: 6px;
}

.ob-text p {
  font-size: 0.82rem;
  color: #999;
  line-height: 1.6;
}

.ob-text strong { color: #ddd; }

/* Platform showcase (Slide 1) */
.ob-platforms-showcase {
  display: flex;
  align-items: center;
  gap: 20px;
}

.ob-platform-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 28px;
  border-radius: 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
}

.ob-platform-badge--spotify {
  background: linear-gradient(135deg, #1DB954 0%, #169c46 100%);
  box-shadow: 0 6px 24px rgba(29, 185, 84, 0.35);
}

.ob-platform-badge--rj {
  background: linear-gradient(135deg, #c62828 0%, #a01e1e 100%);
  box-shadow: 0 6px 24px rgba(198, 40, 40, 0.35);
}

.ob-platform-switch {
  font-size: 1.5rem;
  color: #444;
  animation: obSwitchPulse 2s ease-in-out infinite;
}

@keyframes obSwitchPulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}

/* Screenshot frame */
.ob-screenshot-frame {
  background: #111;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
  max-width: 280px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}

.ob-screenshot-header {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  background: #1a1a1a;
  border-bottom: 1px solid #222;
}

.ob-sh-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #333;
}

.ob-sh-dot:first-child { background: #ff5f57; }
.ob-sh-dot:nth-child(2) { background: #ffbd2e; }
.ob-sh-dot:nth-child(3) { background: #28c840; }

.ob-sh-url {
  margin-left: auto;
  font-size: 0.6rem;
  color: #555;
}

.ob-screenshot-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.ob-screenshot-pointer {
  font-size: 1.2rem;
  animation: obPointerBounce 1.5s ease-in-out infinite;
}

@keyframes obPointerBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Mock toggle */
.ob-mock-toggle {
  display: flex;
  gap: 3px;
  background: #1e1e1e;
  border-radius: 10px;
  padding: 4px;
  border: 1px solid #2a2a2a;
}

.ob-mock-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #555;
}

.ob-mock-spotify {
  background: #1DB954;
  color: #fff;
  box-shadow: 0 2px 12px rgba(29,185,84,0.3);
}

.ob-mock-rj { color: #888; }
.ob-rj-icon { filter: brightness(0) invert(0.55); vertical-align: middle; opacity: 0.85; }

.ob-mock-arrow {
  font-size: 1.2rem;
  color: #444;
  margin: 4px 0;
}

/* Mock sort dropdown */
.ob-mock-sort {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #1e1e1e;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  padding: 10px 18px;
}

.ob-mock-sort-label { font-size: 0.75rem; color: #666; }
.ob-mock-dropdown {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1DB954;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  padding: 4px 12px;
}
.ob-mock-chevron { font-size: 0.6rem; color: #1DB954; }

.ob-mock-options {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: #222;
  border-radius: 8px;
  overflow: hidden;
  width: 180px;
}

.ob-mock-opt {
  padding: 6px 14px;
  font-size: 0.72rem;
  font-weight: 500;
  color: #666;
  background: #1a1a1a;
}

.ob-mock-opt--active {
  color: #1DB954;
  background: rgba(29,185,84,0.08);
}

/* Mock search */
.ob-mock-search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  padding: 10px 16px;
  width: 100%;
  max-width: 280px;
}

.ob-mock-search-icon { font-size: 0.9rem; }
.ob-mock-search-text { font-size: 0.82rem; color: #555; }

.ob-mock-cats {
  display: flex;
  gap: 6px;
}

.ob-mock-cat {
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 0.68rem;
  font-weight: 500;
  color: #666;
  border: 1px solid #2a2a2a;
}

.ob-mock-cat--active {
  background: #1DB954;
  border-color: #1DB954;
  color: #fff;
}

/* Mock submit */
.ob-mock-submit-card {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  padding: 16px;
  width: 100%;
  max-width: 260px;
}

.ob-mock-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #111;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  font-size: 0.72rem;
  color: #555;
  margin-bottom: 10px;
}

.ob-mock-input-icon { font-size: 0.8rem; }

.ob-mock-submit-btn {
  background: #1DB954;
  color: #fff;
  text-align: center;
  padding: 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* CTA button */
.ob-cta {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 12px;
  background: #1DB954;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.ob-cta:hover { background: #1ed760; }

/* Load More button (chart pagination) */
.load-more-wrap {
  text-align: center;
}

.load-more-btn {
  display: inline-block;
  margin: 20px auto 4px;
  min-height: 44px;
  padding: 12px 36px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all var(--transition);
}

.load-more-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg-hover);
}

.load-more-btn:active { transform: translateY(1px); }

/* Help button */
.help-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1e1e1e;
  border: 1px solid #2a2a2a;
  color: #888;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.help-btn:hover {
  background: #1DB954;
  color: #fff;
  border-color: #1DB954;
}

/* RJ logo image */
.rj-logo-img {
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(0.5);
}

.platform-btn.radiojavan.active .rj-logo-img {
  filter: brightness(0) invert(1);
}

/* Modal nav arrows */
.ob-nav-arrows {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px 16px;
}

.ob-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #2a2a2a;
  background: rgba(255,255,255,0.04);
  color: #888;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.ob-arrow:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

.ob-arrow:disabled {
  opacity: 0.2;
  cursor: default;
}

.ob-arrow:disabled:hover {
  background: rgba(255,255,255,0.04);
  color: #888;
}

/* ── AI Citable Rankings Snapshot ────────────────────────────────
   Server-rendered by router.php. This is the "answer box" that
   Google AI Overviews, Perplexity, ChatGPT & Bing Copilot cite.
   Designed to read as an authoritative, dated, sourced summary. */
.ai-snapshot {
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(29,185,84,0.07) 0%, transparent 55%),
    var(--bg-secondary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 48px 20px;
}

.ai-snapshot-inner {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  padding-left: 18px;
  border-left: 3px solid var(--accent);
}

.ai-snapshot h2 {
  font-size: 1.32rem;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 12px;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.ai-snapshot h3 {
  font-size: 0.92rem;
  font-weight: 700;
  margin: 22px 0 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ai-snapshot p {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.ai-snapshot p strong { color: var(--text-primary); font-weight: 700; }

.ai-snapshot time {
  color: var(--accent);
  font-weight: 600;
  white-space: nowrap;
}

.ai-ranking-list {
  counter-reset: airank;
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.ai-ranking-list li {
  counter-increment: airank;
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 14px 9px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.93rem;
  color: var(--text-secondary);
  transition: background var(--transition);
}

.ai-ranking-list li:nth-child(odd) { background: rgba(255,255,255,0.018); }
.ai-ranking-list li:hover { background: var(--bg-hover); }

.ai-ranking-list li::before {
  content: counter(airank);
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--bg-primary);
  background: var(--accent);
  border-radius: 50%;
  transform: translateY(2px);
}

.ai-ranking-list li:nth-child(1)::before { background: #FFD24A; color: #2a1f00; }
.ai-ranking-list li:nth-child(2)::before { background: #D6DCE4; color: #1a1f24; }
.ai-ranking-list li:nth-child(3)::before { background: #E0915A; color: #2a1500; }

.ai-ranking-list li strong { color: var(--text-primary); font-weight: 700; }

.snap-genre {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 500;
  margin-left: auto;
  padding-left: 10px;
  white-space: nowrap;
}

.ai-snapshot-source {
  margin-top: 18px;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--text-muted);
  border-top: 1px dashed var(--border-light);
  padding-top: 14px;
}

@media (max-width: 600px) {
  .ai-snapshot { padding: 36px 16px; }
  .ai-snapshot h2 { font-size: 1.12rem; }
  .ai-snapshot-inner { padding-left: 14px; }
  .ai-ranking-list li { flex-wrap: wrap; font-size: 0.88rem; }
  .snap-genre { margin-left: 36px; padding-left: 0; }
}

/* ── Footer newsletter signup + Pro link ─────────────────────── */
.footer-newsletter { max-width: 420px; margin: 18px auto 6px; text-align: center; }
.footer-nl-label { display: block; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 8px; font-weight: 500; }
.footer-nl-row { display: flex; gap: 8px; }
.footer-nl-input {
  flex: 1; min-width: 0; font-family: var(--font); font-size: 0.85rem; padding: 9px 12px;
  background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-primary); outline: none; transition: border-color var(--transition);
}
.footer-nl-input:focus { border-color: var(--accent); }
.footer-nl-input::placeholder { color: var(--text-muted); }
.footer-nl-btn {
  font-family: var(--font); font-size: 0.85rem; font-weight: 600; padding: 9px 18px;
  background: var(--accent); color: #fff; border: none; border-radius: var(--radius-sm);
  cursor: pointer; transition: opacity var(--transition); white-space: nowrap;
}
.footer-nl-btn:hover { opacity: 0.9; }
.footer-nl-btn:disabled { opacity: 0.6; cursor: default; }
.footer-nl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.footer-nl-msg { font-size: 0.78rem; margin-top: 8px; }
.footer-nl-msg.success { color: var(--rank-up); }
.footer-nl-msg.error { color: var(--rank-down); }
.footer-nl-privacy { font-size: 0.68rem; color: var(--text-muted); margin-top: 8px; opacity: 0.75; }
.footer-pro { margin-top: 14px; }
.footer-pro a { font-size: 0.8rem; color: var(--accent); font-weight: 600; }
.footer-pro a:hover { text-decoration: underline; }
@media (max-width: 480px) { .footer-nl-row { flex-direction: column; } }

/* ── Onboarding signup slide (modal slide 0) ───────────────────── */
.ob-slide-signup { padding: 38px 28px 22px; }
.ob-signup-hero { text-align: center; margin-bottom: 20px; }
.ob-signup-logo { display: inline-block; border-radius: 12px; margin-bottom: 14px; }
.ob-slide-signup h3 { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; color: #fff; margin-bottom: 8px; }
.ob-signup-hero p { font-size: 0.92rem; color: var(--text-secondary); line-height: 1.55; max-width: 320px; margin: 0 auto; }
.ob-signup-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.ob-signup-input {
  width: 100%; font-family: var(--font); font-size: 0.92rem; padding: 12px 14px;
  background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-md);
  color: var(--text-primary); outline: none; transition: border-color var(--transition);
}
.ob-signup-input:focus { border-color: var(--spotify-green); }
.ob-signup-input::placeholder { color: var(--text-muted); }
.ob-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ob-signup-btn {
  width: 100%; font-family: var(--font); font-size: 0.95rem; font-weight: 700; padding: 13px;
  background: var(--spotify-green); color: #fff; border: none; border-radius: var(--radius-md);
  cursor: pointer; transition: all var(--transition); box-shadow: 0 2px 16px rgba(29,185,84,0.3);
}
.ob-signup-btn:hover { background: var(--spotify-green-hover); }
.ob-signup-btn:disabled { opacity: 0.6; cursor: default; }
.ob-signup-msg { font-size: 0.82rem; margin-top: 4px; text-align: center; }
.ob-signup-msg.success { color: var(--rank-up); }
.ob-signup-msg.error { color: var(--rank-down); }
.ob-maybe-later {
  display: block; margin: 6px auto 0; background: none; border: none; cursor: pointer;
  font-family: var(--font); font-size: 0.82rem; color: var(--text-muted); text-decoration: underline;
}
.ob-maybe-later:hover { color: var(--text-secondary); }
.ob-signup-privacy { font-size: 0.7rem; color: var(--text-muted); text-align: center; margin-top: 12px; opacity: 0.8; }

/* ── Footer CTA (replaces the old inline newsletter form) ──────── */
.footer-cta { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 18px auto 6px; }
.footer-subscribe-link {
  font-family: var(--font); font-size: 0.9rem; font-weight: 600; padding: 10px 22px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 50px;
  color: var(--text-primary); cursor: pointer; transition: all var(--transition);
}
.footer-subscribe-link:hover { border-color: var(--spotify-green); color: var(--spotify-green); }
.footer-pro-link { font-size: 0.8rem; color: var(--accent); font-weight: 600; }
.footer-pro-link:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════
   Reusable Signup Widget (js/signup.js) — dark, on-brand, RTL-aware
   Covers: nav Subscribe button, slim homepage/artist banner, the widget
   internals (Email/Phone toggle, inputs, submit), intl-tel-input dark
   overrides, and the celebratory success panel + animated checkmark.
   ═══════════════════════════════════════════════════════════════ */

/* ── Nav "Subscribe" button (desktop only) ─────────────────────── */
.nav-subscribe-btn {
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 14px;
  margin: 0 2px;
  border: 1px solid var(--spotify-green);
  border-radius: 50px;
  background: var(--spotify-green-dim);
  color: var(--spotify-green);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition);
}
.nav-subscribe-btn:hover {
  background: var(--spotify-green);
  color: #fff;
}
/* The nav itself is hidden on mobile (≤768px), but guard the button explicitly
   in case it is ever placed outside .nav. */
@media (max-width: 768px) {
  .nav-subscribe-btn { display: none !important; }
}
/* RTL: flip the small left margin so it sits correctly after the prior nav item. */
html[dir="rtl"] .nav-subscribe-btn { margin: 0 2px; }

/* ── Slim signup banner (homepage + artist page) ───────────────── */
.fc-signup-banner {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(29,185,84,0.10) 0%, transparent 55%),
    var(--bg-secondary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 32px 20px;
}
.fc-signup-banner-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.fc-signup-pitch { flex: 1 1 320px; min-width: 0; }
.fc-signup-pitch h2 {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.fc-signup-pitch p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.55;
  max-width: 460px;
}
.fc-signup-banner .fc-signup-form { flex: 1 1 340px; min-width: 0; max-width: 460px; }

/* ── The widget itself ─────────────────────────────────────────── */
.fc-signup {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fc-input {
  width: 100%;
  font-family: var(--font);
  font-size: 16px; /* 16px+ prevents iOS zoom-on-focus */
  padding: 11px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  outline: none;
  transition: border-color var(--transition);
  appearance: none;
  -webkit-appearance: none;
}
.fc-input:focus { border-color: var(--spotify-green); }
.fc-input::placeholder { color: var(--text-muted); }

/* Email | Phone segmented toggle */
.fc-toggle {
  display: flex;
  gap: 3px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 3px;
}
.fc-toggle-btn {
  flex: 1 1 0;
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 14px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
}
.fc-toggle-btn:hover { color: var(--text-secondary); }
.fc-toggle-btn.is-active {
  background: var(--spotify-green);
  color: #fff;
  box-shadow: 0 2px 10px rgba(29,185,84,0.25);
}

.fc-contact-wrap { width: 100%; }

/* Visually-hidden honeypot (kept in flow, off-screen). */
.fc-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

/* Submit button */
.fc-submit {
  width: 100%;
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 700;
  padding: 13px;
  background: var(--spotify-green);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: 0 2px 16px rgba(29,185,84,0.25);
}
.fc-submit:hover { background: var(--spotify-green-hover); transform: translateY(-1px); }
.fc-submit:active { transform: translateY(0); }
.fc-submit:disabled { opacity: 0.6; cursor: default; transform: none; }

/* Inline message */
.fc-msg {
  font-size: 0.82rem;
  margin-top: 2px;
  text-align: center;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
}
.fc-msg.success { color: var(--rank-up); background: rgba(76,175,80,0.12); }
.fc-msg.error { color: var(--rank-down); background: rgba(244,67,54,0.12); }

/* Already-subscribed note (prepended to any form when the visitor has signed up
   before). Subtle, on-brand, non-blocking — the form below stays fully usable. */
.fc-already {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--spotify-green);
  background: var(--spotify-green-dim);
  border: 1px solid rgba(29,185,84,0.28);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  text-align: center;
}

/* Compact variant (inside the slim banner): toggle + contact + button on one
   tidy column but a touch tighter; still stacks safely on mobile. */
.fc-signup--compact { gap: 8px; }
.fc-signup--compact .fc-input,
.fc-signup--compact .fc-submit { padding: 10px 14px; }

/* ── intl-tel-input dark-theme overrides (v23) ─────────────────── */
.fc-signup .iti { width: 100%; display: block; }
.fc-signup .iti__tel-input,
.fc-signup input.iti__tel-input {
  width: 100%;
}
/* Selected country / flag container (v23 uses .iti__selected-country; older
   builds use .iti__selected-flag — style both for safety). */
.fc-signup .iti__selected-country,
.fc-signup .iti__selected-flag {
  background: var(--bg-card);
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.fc-signup .iti__selected-country:hover,
.fc-signup .iti__selected-flag:hover,
.fc-signup .iti__selected-country-primary:hover {
  background: var(--bg-hover);
}
.fc-signup .iti__selected-dial-code { color: var(--text-secondary); }
.fc-signup .iti__arrow { border-top-color: var(--text-muted); }
.fc-signup .iti__arrow--up { border-bottom-color: var(--text-muted); }

/* Country dropdown list */
.fc-signup .iti__dropdown-content,
.iti__dropdown-content,
.iti--container .iti__country-list,
.fc-signup .iti__country-list {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
}
.iti__country,
.fc-signup .iti__country {
  color: var(--text-primary);
  padding: 8px 12px;
}
.iti__country.iti__highlight,
.iti__country:hover {
  background: var(--bg-hover);
}
.iti__dial-code { color: var(--text-muted); }
.iti__search-input,
.fc-signup .iti__search-input {
  background: var(--bg-input);
  color: var(--text-primary);
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 9px 12px;
  /* 16px keeps iOS from zooming the viewport when the country-search box
     auto-focuses (the mobile country picker was unusable because of this). */
  font-size: 16px;
}
.iti__search-input::placeholder { color: var(--text-muted); }
/* Divider between preferred + full list */
.iti__divider { border-bottom-color: var(--border); }
/* The mobile fullscreen country picker is appended to <body> at z-index 1060,
   which is BELOW the signup modal (.ob-overlay = 9999) — so opened from inside
   the modal it rendered behind it (the arrow flipped but nothing was visible /
   clickable). Lift the picker container above the modal. */
.iti--container { z-index: 10001 !important; }

/* ── Success panel + animated checkmark ────────────────────────── */
.fc-signup-done {
  text-align: center;
  padding: 18px 8px 8px;
  animation: fcDoneIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes fcDoneIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.fc-check-wrap {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--spotify-green-dim);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fc-check { width: 48px; height: 48px; }
.fc-check-circle {
  stroke: var(--spotify-green);
  stroke-width: 2.5;
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: fcCircle 0.5s ease-out 0.05s forwards;
}
.fc-check-tick {
  stroke: var(--spotify-green);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: fcTick 0.35s cubic-bezier(0.65, 0, 0.45, 1) 0.45s forwards;
}
@keyframes fcCircle { to { stroke-dashoffset: 0; } }
@keyframes fcTick { to { stroke-dashoffset: 0; } }
.fc-done-title {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.fc-done-sub {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.55;
  max-width: 340px;
  margin: 0 auto;
}
@media (prefers-reduced-motion: reduce) {
  .fc-signup-done,
  .fc-check-circle,
  .fc-check-tick { animation: none; }
  .fc-check-circle, .fc-check-tick { stroke-dashoffset: 0; }
}

/* ── RTL awareness for the widget ──────────────────────────────── */
/* The banner lays out pitch + form as a flex row; on RTL the inherited
   direction reverses the order so the pitch sits on the right (reading start)
   and the form on the left. Make the whole widget RTL so labels/placeholders
   read naturally; the email/tel VALUES are forced back to LTR below. */
html[dir="rtl"] .fc-signup-banner-inner { direction: rtl; }
html[dir="rtl"] .fc-signup-pitch h2,
html[dir="rtl"] .fc-signup-pitch p { text-align: right; }
html[dir="rtl"] .fc-signup { direction: rtl; }
html[dir="rtl"] .fc-already { text-align: center; }
html[dir="rtl"] .fc-done-sub,
html[dir="rtl"] .fc-msg { text-align: center; }

/* Name + location are free text — let them flow RTL with right-aligned
   placeholders so Persian reads naturally. */
html[dir="rtl"] .fc-input-name,
html[dir="rtl"] .fc-input-location {
  direction: rtl;
  text-align: right;
}

/* Email | Phone segmented toggle: buttons fill the row evenly, so the visual
   flip is automatic under RTL; just keep each label centered. */
html[dir="rtl"] .fc-toggle-btn { text-align: center; }

/* Submit button label centered (it's full-width). */
html[dir="rtl"] .fc-submit { text-align: center; }

/* Keep email + tel typed VALUES LTR even on the RTL page (so you@…, +1… and
   digits render in the correct order). Align them to the field start — which is
   the right edge on the RTL page — so the placeholder reads from the right. */
html[dir="rtl"] .fc-input-email,
html[dir="rtl"] .fc-input-tel,
html[dir="rtl"] .fc-signup .iti__tel-input {
  direction: ltr;
  text-align: right;
  unicode-bidi: plaintext;
}
/* On RTL, intl-tel-input's flag/dial-code sits on the right; round that corner
   instead and keep the country selector itself LTR (flag + +code order). */
html[dir="rtl"] .fc-signup .iti,
html[dir="rtl"] .fc-signup .iti--separate-dial-code { direction: ltr; }
html[dir="rtl"] .fc-signup .iti__selected-country,
html[dir="rtl"] .fc-signup .iti__selected-flag {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

/* ── Banner responsive (stack vertically; safe down to 360px) ──── */
@media (max-width: 768px) {
  .fc-signup-banner { padding: 24px 16px; }
  .fc-signup-banner-inner { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 16px; }
  /* In a column the children's flex-basis becomes HEIGHT, so the desktop
     `flex: 1 1 320px/340px` forced the pitch to 320px tall — leaving a big
     empty gap above the form. Reset to natural content height on mobile. */
  .fc-signup-pitch,
  .fc-signup-banner .fc-signup-form { flex: 0 0 auto; }
  .fc-signup-pitch { text-align: center; }
  .fc-signup-pitch p { margin-left: auto; margin-right: auto; }
  .fc-signup-banner .fc-signup-form { max-width: 100%; }
}
@media (max-width: 360px) {
  .fc-signup-pitch h2 { font-size: 1.15rem; }
  .fc-toggle-btn { padding: 8px 8px; font-size: 0.78rem; }
  .fc-done-title { font-size: 1.2rem; }
}

/* Print: hide the marketing banner. */
@media print { .fc-signup-banner { display: none; } }