/* رادیو هم‌داستان — استایل صفحه و پخش‌کننده
   همه‌ی رنگ‌ها از متغیرهای موتور تم سایت می‌آیند: --bg-color، --card-bg، --text-color،
   --border-color و --primary-color. با تغییر رنگ یا حالت روز/شب، این صفحه هم عوض می‌شود. */
.rd-page, .rd-player {
  --rd-accent: var(--primary-color, #ffcc00);
  --rd-accent-2: var(--primary-color, #ffcc00);          /* نسخه‌ی روشن‌تر رنگ سازمانی (در مرورگرهای جدید) */
  --rd-glow: transparent;
  --rd-soft: rgba(128,128,128,.12);
  --rd-mid: rgba(128,128,128,.65);
  --rd-live: #ff4d3d;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .rd-page, .rd-player {
    --rd-accent-2: color-mix(in srgb, var(--primary-color, #ffcc00) 62%, #ffffff);
    --rd-glow: color-mix(in srgb, var(--primary-color, #ffcc00) 14%, transparent);
    --rd-soft: color-mix(in srgb, var(--text-color) 8%, transparent);
    --rd-mid: color-mix(in srgb, var(--text-color) 62%, transparent);
  }
}
.rd-page { color: var(--text-color); padding-bottom: 40px; }
.rd-page *, .rd-player * { box-sizing: border-box; }
[hidden] { display: none !important; }
.rd-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ================= Hero ================= */
.rd-hero { position: relative; overflow: hidden; isolation: isolate; color: var(--text-color);
  background:
    radial-gradient(820px 460px at 88% -8%, var(--rd-glow), transparent 64%),
    var(--bg-color);
  border-bottom: 1px solid var(--border-color); }
.rd-hero-inner { max-width: 1280px; margin: 0 auto; padding: 56px 24px 72px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 24px; align-items: center; min-height: 600px; }
.rd-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px; border-radius: 999px; font-size: .85rem; font-weight: 800; letter-spacing: .12em;
  background: var(--card-bg); border: 1px solid var(--border-color); color: var(--text-color); }
.rd-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--rd-live); box-shadow: 0 0 0 0 rgba(255,77,61,.7); animation: rdPulse 1.8s infinite; }
.rd-title { font-size: clamp(3.2rem, 9vw, 7.2rem); line-height: 1.02; font-weight: 900; margin: 22px 0 10px; letter-spacing: -.01em; }
.rd-title .rd-t1 { display: block; color: var(--text-color); }
.rd-title .rd-t2 { display: block; color: var(--rd-accent); padding-bottom: .08em;
  background: linear-gradient(95deg, var(--rd-accent), var(--rd-accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.rd-latin { font-size: .95rem; letter-spacing: .42em; font-weight: 700; color: var(--text-color); opacity: .55; margin-bottom: 20px; direction: ltr; text-align: start; }
.rd-sub { max-width: 560px; font-size: 1.15rem; line-height: 2; color: var(--text-color); opacity: .85; margin: 0 0 28px; }
.rd-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 34px; }
.rd-btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 30px; font: inherit; font-weight: 800; font-size: 1.05rem; border-radius: 999px; cursor: pointer; text-decoration: none; border: 2px solid transparent; transition: transform .2s, box-shadow .2s, background .2s; }
.rd-btn:focus-visible, .rd-play:focus-visible, .rd-live-btn:focus-visible, .rd-mini:focus-visible, .rd-ruler-wrap:focus-visible { outline: 3px solid var(--rd-accent); outline-offset: 3px; }
.rd-btn-primary { background: var(--rd-accent); color: var(--rd-on-accent, #0a0a0a); box-shadow: 0 10px 28px -10px var(--rd-accent); }
.rd-btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 16px 34px -10px var(--rd-accent); }
.rd-btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.rd-btn-primary svg { width: 20px; height: 20px; fill: currentColor; flex: 0 0 20px; }
.rd-btn-primary .i-pause { display: none; } .rd-btn-primary.is-playing .i-pause { display: block; } .rd-btn-primary.is-playing .i-play { display: none; }
.rd-btn-ghost { color: var(--text-color); border-color: var(--border-color); background: var(--card-bg); }
.rd-btn-ghost:hover { border-color: var(--rd-accent); color: var(--rd-accent); }

.rd-now { max-width: 520px; padding: 18px 20px; border-radius: 18px; background: var(--card-bg); border: 1px solid var(--border-color); }
.rd-now-k { font-size: .75rem; letter-spacing: .14em; font-weight: 800; color: var(--primary-ink, var(--rd-accent)); margin-bottom: 6px; }
.rd-now-title { font-size: 1.3rem; font-weight: 900; line-height: 1.5; }
.rd-now-time { font-size: .92rem; color: var(--text-color); opacity: .7; margin: 2px 0 12px; }
.rd-bar { height: 6px; border-radius: 999px; background: var(--rd-soft); overflow: hidden; }
.rd-bar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--rd-accent), var(--rd-accent-2)); border-radius: 999px; transition: width 1s linear; }
.rd-now-left { font-size: .82rem; color: var(--text-color); opacity: .6; margin-top: 8px; min-height: 1.2em; }

/* هنر: شماره‌گیر رادیو (اورجینال) — رنگ‌ها از تم */
.rd-art { display: flex; justify-content: center; }
.rd-art svg { width: min(540px, 92vw); height: auto; overflow: visible; direction: ltr; }
.rd-art svg text { direction: ltr; unicode-bidi: isolate; }
.rd-s1 { stop-color: var(--rd-accent); } .rd-s2 { stop-color: var(--rd-accent-2); }
.rd-d1 { stop-color: var(--card-bg); } .rd-d2 { stop-color: var(--bg-color); }
.rd-m1 { stop-color: var(--text-color); stop-opacity: .78; } .rd-m2 { stop-color: var(--text-color); } .rd-m3 { stop-color: var(--text-color); stop-opacity: .6; }
.rd-tick { stroke: var(--text-color); stroke-opacity: .38; }
.rd-ring-dash { stroke: var(--rd-accent); stroke-opacity: .75; fill: none; }
.rd-ring-text { fill: var(--text-color); fill-opacity: .6; }
.rd-grille { stroke: var(--bg-color); stroke-opacity: .38; }
.rd-stand { stroke: var(--text-color); stroke-opacity: .85; }
.rd-rot  { transform-origin: 260px 260px; animation: rdSpin 80s linear infinite; }
.rd-rot2 { transform-origin: 260px 260px; animation: rdSpin 120s linear infinite reverse; }
.rd-wave { transform-origin: 260px 250px; animation: rdWave 2.4s ease-in-out infinite; opacity: .7; }
.rd-wave.w2 { animation-delay: .5s; } .rd-wave.w3 { animation-delay: 1s; }
html:not(.rd-playing) .rd-rot, html:not(.rd-playing) .rd-rot2, html:not(.rd-playing) .rd-wave { animation-play-state: paused; }

/* اکولایزر تزئینی */
.rd-eq { display: flex; align-items: flex-end; gap: 4px; height: 44px; margin-top: 8px; direction: ltr; }
.rd-eq i { display: block; width: 4px; border-radius: 3px; background: linear-gradient(to top, var(--rd-accent), var(--rd-accent-2)); height: 20%; animation: rdEq 1.2s ease-in-out infinite alternate; animation-play-state: paused; opacity: .85; }
html.rd-playing .rd-eq i { animation-play-state: running; }
.rd-eq i:nth-child(3n) { animation-duration: .9s; } .rd-eq i:nth-child(4n) { animation-duration: 1.5s; } .rd-eq i:nth-child(5n) { animation-duration: 1.1s; }
.rd-eq i:nth-child(2n) { animation-delay: -.3s; } .rd-eq i:nth-child(3n+1) { animation-delay: -.7s; } .rd-eq i:nth-child(7n) { animation-delay: -1s; }

@keyframes rdSpin { to { transform: rotate(360deg); } }
@keyframes rdWave { 0%,100% { transform: scale(.94); opacity: .25; } 50% { transform: scale(1.06); opacity: .85; } }
@keyframes rdEq { 0% { height: 12%; } 100% { height: 100%; } }
@keyframes rdPulse { 0% { box-shadow: 0 0 0 0 rgba(255,77,61,.65); } 70% { box-shadow: 0 0 0 12px rgba(255,77,61,0); } 100% { box-shadow: 0 0 0 0 rgba(255,77,61,0); } }

/* ================= بخش‌ها ================= */
.rd-section { max-width: 1280px; margin: 0 auto; padding: 56px 24px 0; }
.rd-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; }
.rd-h2 { font-size: 1.8rem; font-weight: 900; margin: 0 0 6px; color: var(--text-color); }
.rd-h2::after { content: ""; display: block; width: 56px; height: 4px; border-radius: 4px; margin-top: 10px; background: linear-gradient(90deg, var(--rd-accent), var(--rd-accent-2)); }
.rd-note { color: var(--text-color); opacity: .6; font-size: .9rem; margin: 10px 0 22px; line-height: 1.8; }
.rd-list-h { font-size: 1rem; font-weight: 800; color: var(--primary-ink, var(--rd-accent)); margin: 26px 0 12px; letter-spacing: .04em; }
.rd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rd-row { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 16px; background: var(--card-bg); border: 1px solid var(--border-color); transition: border-color .2s, transform .2s; }
.rd-row:hover { border-color: var(--rd-accent); transform: translateY(-1px); }
.rd-row.now { border-color: var(--rd-live); box-shadow: 0 0 0 1px rgba(255,77,61,.35) inset; }
.rd-row.next { opacity: .85; }
.rd-row-cover { flex: 0 0 56px; height: 56px; border-radius: 12px; background: center/cover no-repeat, var(--rd-soft); }
.rd-row-cover--blank { background: linear-gradient(135deg, var(--rd-accent), var(--rd-accent-2)); opacity: .85; }
.rd-row-main { flex: 1; min-width: 0; }
.rd-row-time { font-size: .8rem; opacity: .65; font-weight: 700; direction: inherit; }
.rd-row-title { font-weight: 900; font-size: 1.05rem; line-height: 1.6; }
.rd-row-desc { font-size: .88rem; opacity: .75; line-height: 1.7; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rd-rel { display: inline-block; margin-top: 6px; font-size: .82rem; font-weight: 800; color: var(--primary-ink, var(--rd-accent)); text-decoration: none; border-bottom: 1px dashed currentColor; }
.rd-mini { flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; font: inherit; font-size: .82rem; font-weight: 800; cursor: pointer; border: 1px solid var(--rd-accent); color: var(--primary-ink, var(--rd-accent)); background: transparent; transition: background .2s, color .2s; }
.rd-mini:hover { background: var(--rd-accent); color: var(--rd-on-accent, #0a0a0a); }
.rd-empty { padding: 28px; text-align: center; opacity: .7; border: 1px dashed var(--border-color); border-radius: 16px; }
.rd-side-card { padding: 24px; border-radius: 20px; background: var(--card-bg); border: 1px solid var(--border-color); margin-bottom: 24px; }
.rd-side-card p { line-height: 2; opacity: .85; margin: 12px 0 0; }
.rd-art-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; }
.rd-art-list a { display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit; }
.rd-art-list img { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; flex: 0 0 64px; background: var(--rd-soft); }
.rd-art-list span { font-weight: 800; line-height: 1.6; }
.rd-art-list a:hover span { color: var(--primary-ink, var(--rd-accent)); }

/* ================= پخش‌کننده‌ی ثابت پایین (پس‌زمینه‌ی خودِ سایت) ================= */
.rd-player { position: fixed; inset-inline: 0; bottom: 0; z-index: 900; color: var(--text-color);
  background: var(--bg-color); border-top: 2px solid var(--rd-accent); box-shadow: 0 -10px 34px rgba(0,0,0,.28); }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .rd-player { background: color-mix(in srgb, var(--bg-color) 93%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
}
.rd-player-in { max-width: 1400px; margin: 0 auto; padding: 10px 18px; display: grid; grid-template-columns: minmax(200px, 300px) 1fr auto; gap: 18px; align-items: center; position: relative; }
.rd-pl-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rd-cover { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 12px; background: linear-gradient(135deg, var(--rd-accent), var(--rd-accent-2)); background-size: cover; background-position: center; display: grid; place-items: center; position: relative; }
.rd-cover::before { content: "♪"; font-size: 1.5rem; color: var(--rd-on-accent, #0a0a0a); font-weight: 900; }
.rd-cover.has-img::before { display: none; }
.rd-meta { min-width: 0; }
.rd-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .7rem; font-weight: 900; letter-spacing: .1em; padding: 2px 9px; border-radius: 999px; background: var(--rd-soft); color: var(--text-color); }
.rd-badge.is-live { background: var(--rd-live); color: #fff; }
.rd-badge.is-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: rdPulse 1.8s infinite; }
.rd-badge.is-replay { background: var(--rd-accent); color: var(--rd-on-accent, #0a0a0a); } .rd-badge.is-off { background: var(--rd-soft); color: var(--text-color); opacity: .8; }
.rd-pl-title { font-weight: 900; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
.rd-pl-sub { font-size: .78rem; opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-ruler-wrap { position: relative; height: 76px; border-radius: 12px; overflow: hidden; cursor: grab; touch-action: none; direction: ltr; user-select: none; border: 1px solid var(--border-color); background: var(--card-bg); }
.rd-ruler-wrap.is-dragging { cursor: grabbing; }
.rd-ruler-wrap canvas { display: block; }
.rd-bubble { display: none; position: absolute; top: 4px; transform: translateX(-50%); padding: 4px 10px; border-radius: 8px; font-size: .78rem; font-weight: 800; background: var(--bg-color); color: var(--text-color); border: 1px solid var(--rd-accent); white-space: nowrap; max-width: 90%; overflow: hidden; text-overflow: ellipsis; pointer-events: none; z-index: 2; }
.rd-pl-right { display: flex; align-items: center; gap: 12px; }
.rd-play { width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer; background: var(--rd-accent); color: var(--rd-on-accent, #0a0a0a); display: grid; place-items: center; box-shadow: 0 8px 22px -8px var(--rd-accent); transition: transform .15s; }
.rd-play:hover { transform: scale(1.06); }
.rd-play svg { width: 26px; height: 26px; fill: currentColor; }
.rd-play .i-pause { display: none; } .rd-play.is-playing .i-pause { display: block; } .rd-play.is-playing .i-play { display: none; }
.rd-live-btn { padding: 8px 14px; border-radius: 999px; font: inherit; font-weight: 900; font-size: .78rem; letter-spacing: .06em; color: var(--text-color); background: transparent; border: 1.5px solid var(--rd-live); cursor: pointer; white-space: nowrap; }
.rd-live-btn:hover { background: var(--rd-live); color: #fff; }
.rd-vol { display: flex; align-items: center; }
.rd-vol input { width: 90px; accent-color: var(--rd-accent); }
.rd-status { position: absolute; inset-inline: 0; top: -30px; text-align: center; font-size: .82rem; font-weight: 800; pointer-events: none; }
.rd-status:not(:empty) { display: block; }
.rd-status:empty { display: none; }
.rd-status-pill { display: inline-block; padding: 4px 14px; border-radius: 999px; background: var(--bg-color); color: var(--text-color); border: 1px solid var(--rd-accent); }

/* ================= ریسپانسیو ================= */
@media (max-width: 980px) {
  .rd-hero-inner { grid-template-columns: 1fr; min-height: 0; padding-top: 36px; }
  .rd-art { order: -1; } .rd-art svg { width: min(360px, 80vw); }
  .rd-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .rd-player-in { grid-template-columns: 1fr auto; gap: 10px 12px; padding: 10px 12px; }
  .rd-ruler-wrap { grid-column: 1 / -1; grid-row: 2; height: 76px; }
  .rd-vol { display: none; }
  .rd-row { flex-wrap: wrap; } .rd-mini { margin-inline-start: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  .rd-rot, .rd-rot2, .rd-wave, .rd-eq i, .rd-dot, .rd-badge.is-live::before { animation: none !important; }
  .rd-bar > i { transition: none; }
}