/*
Theme Name: Z Radio Live
Theme URI: https://zradiolive.com
Author: ZLF Productions
Author URI: https://www.zlfproductions.com
Description: Responsive custom theme for Z Radio Live — persistent audio player, live show pages, WordPress-native News, Listen platforms directory, and a combined Support (Donate / Book Interview / Advertise) page.
Version: 1.0.0
License: All Rights Reserved
Text Domain: zradiolive
*/

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: #000; }
body, .wp-site-blocks, #page, #content, #main, .site, .site-content, .entry-content { background: #000 !important; }
body { margin: 0; color: #fff; font-family: 'Inter', system-ui, sans-serif; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--zrl-accent, #19AD21); text-decoration: none; }
a:hover { color: #3ddc44; }
::selection { background: var(--zrl-accent, #19AD21); color: #000; }
button { font-family: inherit; cursor: pointer; border: none; }
input, textarea { font-family: inherit; }

@keyframes zrl-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes zrl-panel-in { 0% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes zrl-icon-pop { 0% { transform: scale(.5); opacity: .4; } 100% { transform: scale(1); opacity: 1; } }
@keyframes zrl-ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

.zrl-page { position: relative; min-height: 100vh; padding-bottom: 94px; }
@media (min-width: 1020px) { .zrl-page { padding-bottom: 74px; } }

/* ---------- Header / Nav ---------- */
.zrl-header { position: sticky; top: 0; z-index: 500; background: linear-gradient(135deg,#0c2a0f 0%,#0a1a0b 60%,#000 100%); border-bottom: 2px solid var(--zrl-accent, #19AD21); }
.zrl-header-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; max-width: 1400px; margin: 0 auto; }
@media (min-width: 720px) { .zrl-header-inner { padding: 16px 32px; } }
.zrl-logo img { height: 36px; width: auto; }
@media (min-width: 720px) { .zrl-logo img { height: 48px; } }
.zrl-nav-desktop { display: none; align-items: center; gap: 20px; }
@media (min-width: 1100px) { .zrl-nav-desktop { display: flex; } .zrl-nav-desktop { gap: 32px; } }
.zrl-nav-list { display: flex; align-items: center; gap: 20px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 1240px) { .zrl-nav-list { gap: 32px; } }
.zrl-nav-list a { font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #fff; white-space: nowrap; padding-bottom: 4px; border-bottom: 2px solid transparent; transition: color .25s ease; }
.zrl-nav-list a:hover { color: var(--zrl-accent, #19AD21); }
.zrl-nav-list li.current-menu-item a { color: var(--zrl-accent, #19AD21); border-bottom-color: var(--zrl-accent, #19AD21); }
.zrl-listen-btn { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--zrl-accent, #19AD21); color: #000; padding: 10px 20px; border-radius: 3px; white-space: nowrap; width: 130px; flex: none; display: inline-flex; align-items: center; justify-content: center; }

.zrl-hamburger { display: flex; background: none; padding: 8px; z-index: 401; position: relative; }
@media (min-width: 1100px) { .zrl-hamburger { display: none; } }
.zrl-hb-bar { position: absolute; top: 0; left: 50%; width: 26px; height: 3px; background: #fff; border-radius: 2px; transform: translate(-50%, 0); transition: all .35s cubic-bezier(.22,1,.36,1), background .3s ease; }
.zrl-hamburger:hover .zrl-hb-bar { background: var(--zrl-accent, #19AD21); }
.zrl-hamburger { width: 26px; height: 20px; }
.zrl-hb-top { transform: translate(-50%, 0); }
.zrl-hb-mid { transform: translate(-50%, 8px); }
.zrl-hb-bottom { transform: translate(-50%, 16px); }
.zrl-hamburger.is-open .zrl-hb-mid { width: 31px; transform: translate(-50%, 8px) rotate(-32deg); }
.zrl-hamburger.is-open .zrl-hb-bar { background: var(--zrl-accent, #19AD21); }

.zrl-mobile-overlay { position: fixed; inset: 0; z-index: 400; background: #000; display: none; flex-direction: column; padding: 128px 28px 40px; overflow-y: auto; animation: zrl-panel-in .3s cubic-bezier(.22,1,.36,1) both; }
.zrl-mobile-overlay.is-open { display: flex; }
@media (min-width: 1100px) { .zrl-mobile-overlay.is-open { display: none; } }
.zrl-mobile-nav-list { list-style: none; margin: 0; padding: 0; }
.zrl-mobile-nav-list a { display: block; font-size: 24px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #fff; padding: 20px 0; border-bottom: 1px solid #161616; transition: color .25s ease; }
.zrl-mobile-nav-list a:hover { color: var(--zrl-accent, #19AD21); }
.zrl-mobile-nav-list li.current-menu-item a { color: var(--zrl-accent, #19AD21); }
.zrl-mobile-listen-btn { margin-top: 32px; width: 100%; text-align: center; padding: 16px 20px; border-radius: 6px; font-size: 16px; }

/* ---------- Hero ---------- */
.zrl-hero { position: relative; background: linear-gradient(135deg, var(--zrl-accent, #19AD21) 0%, #0a4a10 55%, #000 100%); padding: 32px 20px 90px; text-align: center; overflow: hidden; }
@media (min-width: 720px) { .zrl-hero { padding: 48px 40px 110px; } }
.zrl-hero-inner { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; }
.zrl-hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(0,0,0,.35); padding: 6px 18px; border-radius: 20px; margin-bottom: 20px; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: #fff; }
.zrl-hero-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: zrl-pulse 1.4s infinite; }
.zrl-hero-title { font-weight: 700; font-size: 34px; line-height: 1.05; margin: 0 0 18px; color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.4); }
@media (min-width: 720px) { .zrl-hero-title { font-size: 58px; } }
.zrl-hero-sub { font-size: 15px; color: rgba(255,255,255,.9); max-width: 560px; margin: 0 auto 32px; line-height: 1.5; }
@media (min-width: 720px) { .zrl-hero-sub { font-size: 18px; } }
.zrl-hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.zrl-hero-stripe { position: absolute; bottom: 0; left: 0; width: 200%; height: 26px; background: repeating-linear-gradient(100deg, rgba(0,0,0,.25) 0 40px, transparent 40px 90px); }

/* ---------- On Air Now / Up Next popover (hero badge) ---------- */
.zrl-hero-badge-wrap { position: relative; display: inline-block; margin-bottom: 20px; }
.zrl-hero-badge-wrap .zrl-hero-badge { margin-bottom: 0; padding: 6px 10px 6px 16px; background: rgba(0,0,0,.35); border: none; color: #fff; cursor: pointer; }
.zrl-hero-badge-chevron { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.15); margin-left: 2px; transition: transform .25s ease; }
.zrl-onair-popover { display: none; position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: 270px; background: rgba(10,10,10,.97); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 20px; text-align: left; box-shadow: 0 20px 50px rgba(0,0,0,.55); z-index: 20; animation: zrl-panel-in .25s cubic-bezier(.22,1,.36,1) both; }
.zrl-onair-popover.is-open { display: block; }
.zrl-onair-label { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; color: var(--zrl-accent, #19AD21); margin-bottom: 8px; }
.zrl-onair-current { margin-bottom: 16px; }
.zrl-onair-title { font-weight: 700; font-size: 17px; color: #fff; line-height: 1.3; margin-bottom: 3px; }
.zrl-onair-sub { font-size: 12.5px; color: #8a8a8a; }
.zrl-onair-divider { height: 1px; background: rgba(255,255,255,.1); margin-bottom: 16px; }
.zrl-onair-next { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.zrl-onair-next-info { min-width: 0; }
.zrl-onair-next-title { font-weight: 700; font-size: 14px; color: #fff; white-space: normal; overflow-wrap: break-word; }
.zrl-onair-next-time { font-size: 12px; color: #8a8a8a; margin-top: 2px; }
.zrl-onair-countdown { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .04em; background: rgba(25,173,33,.14); color: var(--zrl-accent, #19AD21); padding: 5px 10px; border-radius: 20px; white-space: nowrap; margin-top: 1px; }

/* ---------- Waveform (real audio via Web Audio AnalyserNode, falls back to a simulated bounce) ---------- */
@keyframes zrl-bar-bounce { 0% { transform: scaleY(.2); } 50% { transform: scaleY(1); } 100% { transform: scaleY(.35); } }
@keyframes zrl-bar-idle-breathe { 0% { transform: scaleY(.4); opacity: .5; } 100% { transform: scaleY(.62); opacity: .8; } }
.zrl-waveform { position: absolute; bottom: 0; left: 0; right: 0; height: 160px; display: flex; align-items: flex-end; justify-content: center; gap: 8px; overflow: hidden; padding: 0; }
/* Each bar gets its own resting height (--zrl-wf-h, set per-bar in PHP via a sine-based formula)
   so the idle state reads as a jagged EQ silhouette, not a flat row. Delay + duration also vary
   per bar (via --zrl-wf-i) so bars breathe/bounce out of sync with each other — a uniform
   animation on every bar (same duration, only phase-shifted by delay) reads as one wave rippling
   across the strip instead of independent EQ bars; varying the height AND timing breaks that up. */
.zrl-waveform > div { width: 10px; flex: 0 0 10px; height: var(--zrl-wf-h, 66px); background: rgba(0,0,0,.55); border-radius: 3px; transform-origin: bottom; transform: scaleY(0.3); animation: zrl-bar-idle-breathe calc(2s + (var(--zrl-wf-i, 0) * 0.037s)) ease-in-out infinite alternate; animation-delay: calc(var(--zrl-wf-i, 0) * 0.11s); }
.zrl-page.is-playing .zrl-waveform > div { animation-name: zrl-bar-bounce; animation-duration: calc(0.5s + (var(--zrl-wf-i, 0) * 0.017s)); animation-delay: calc(var(--zrl-wf-i, 0) * 0.045s); }

.zrl-btn-solid { font-size: 15px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: #000; color: #fff; border: 2px solid #000; padding: 16px 34px; border-radius: 4px; white-space: nowrap; display: inline-block; }
#zrl-hero-play-btn { min-width: 220px; text-align: center; }
.zrl-btn-outline { font-size: 15px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: transparent; color: #fff; border: 2px solid #fff; padding: 16px 34px; border-radius: 4px; white-space: nowrap; display: inline-block; }

/* ---------- Ticker ---------- */
.zrl-ticker-wrap { background: #0a0a0a; border-bottom: 1px solid #1c1c1c; overflow: hidden; display: flex; align-items: center; }
.zrl-ticker-label { flex: none; background: var(--zrl-accent, #19AD21); color: #000; font-weight: 700; font-size: 11.5px; letter-spacing: .06em; padding: 12px 18px; white-space: nowrap; z-index: 2; }
.zrl-ticker-track { flex: 1; overflow: hidden; position: relative; }
.zrl-ticker-inner { display: flex; width: max-content; animation: zrl-ticker 32s linear infinite; }
.zrl-ticker-item { display: flex; align-items: center; gap: 22px; padding: 12px 0; font-size: 13.5px; color: #ddd; white-space: nowrap; }
.zrl-ticker-item::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--zrl-accent, #19AD21); margin: 0 22px; display: inline-block; }
.zrl-last-played-wrap { max-width: 1300px; margin: 0 auto; padding: 0 18px 12px; }
.zrl-last-played-wrap iframe { display: block; border-radius: 8px; overflow: hidden; }

/* ---------- Sections ---------- */
.zrl-section { max-width: 1300px; margin: 0 auto; padding: 44px 18px; background: #000; }
@media (min-width: 720px) { .zrl-section { padding: 64px 40px; } }
.zrl-section-header-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 40px 0 22px; }
.zrl-view-all-news { font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--zrl-accent, #19AD21); white-space: nowrap; }
.zrl-section-badge { display: inline-block; color: #000; font-weight: 700; font-size: 13px; letter-spacing: .04em; padding: 8px 20px; transform: skewX(-8deg); margin-bottom: 24px; }
@media (min-width: 720px) { .zrl-section-badge { font-size: 15px; } }
.zrl-section-badge span { display: inline-block; transform: skewX(8deg); }
.zrl-page-wrap { max-width: 1300px; margin: 0 auto; padding: 44px 18px; }
@media (min-width: 720px) { .zrl-page-wrap { padding: 64px 40px; } }
.zrl-page-wrap--narrow { max-width: 1000px; }
.zrl-page-title { font-weight: 700; font-size: 30px; margin: 0 0 16px; color: #fff; }
@media (min-width: 720px) { .zrl-page-title { font-size: 42px; } }
.zrl-page-subtitle { font-weight: 700; font-size: 22px; margin: 40px 0 24px; color: #fff; }
@media (min-width: 720px) { .zrl-page-subtitle { font-size: 28px; } }
.zrl-page-intro { font-size: 15px; color: #aaa; line-height: 1.6; max-width: 640px; margin: 0 0 40px; }
.zrl-legal-content { font-size: 15px; color: #ccc; line-height: 1.7; max-width: 760px; }
.zrl-legal-content h2 { font-size: 20px; font-weight: 700; color: #fff; margin: 34px 0 14px; }
.zrl-legal-content h2:first-child { margin-top: 0; }
.zrl-legal-content p { margin: 0 0 16px; }
.zrl-legal-content a { text-decoration: underline; }

/* ---------- News cards ---------- */
.zrl-news-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 720px) { .zrl-news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .zrl-news-grid { grid-template-columns: repeat(3, 1fr); } }
.zrl-news-card { background: #0c0c0c; border: 1px solid #1c1c1c; border-radius: 6px; overflow: hidden; display: block; }
.zrl-news-card-img { height: 170px; background: repeating-linear-gradient(45deg,#111 0 14px,#161616 14px 28px); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.zrl-news-card-placeholder { font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: .05em; color: rgba(255,255,255,.6); }
.zrl-news-card-body { padding: 18px; }
.zrl-news-card-tag { display: inline-block; border: 1px solid var(--zrl-accent, #19AD21); color: var(--zrl-accent, #19AD21); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; padding: 3px 9px; border-radius: 2px; margin-bottom: 10px; }
.zrl-news-card-title { font-weight: 700; font-size: 16px; color: #fff; line-height: 1.35; margin-bottom: 8px; }
.zrl-news-card-excerpt { font-size: 13px; color: #8a8a8a; line-height: 1.5; }
.zrl-news-card-date { font-size: 11.5px; color: #666; margin-top: 12px; }
.zrl-news-pagination { display: flex; gap: 8px; justify-content: center; margin-top: 36px; }
.zrl-news-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; border-radius: 4px; background: #141414; color: #fff; font-size: 13px; font-weight: 600; }
.zrl-news-pagination .page-numbers.current { background: var(--zrl-accent, #19AD21); color: #000; }
.zrl-news-pagination .page-numbers:hover:not(.current) { background: #1e1e1e; color: var(--zrl-accent, #19AD21); }
.zrl-news-pagination .page-numbers.dots { background: none; }

/* ---------- Shows ---------- */
.zrl-shows-list { display: flex; flex-direction: column; gap: 18px; }
.zrl-show-card-home { display: flex; flex-direction: column; justify-content: center; gap: 10px; border-radius: 6px; min-height: 150px; padding: 26px; transition: background .3s ease, filter .3s ease; }
.zrl-show-card-home:hover { background: linear-gradient(135deg, var(--zrl-show-accent, var(--zrl-accent, #19AD21)) 0%, #0a0a0a 75%) !important; filter: brightness(1.4) saturate(1.5); }
.zrl-show-card-title { font-weight: 700; font-size: 19px; color: #fff; }
.zrl-show-card-time { font-size: 13px; color: rgba(255,255,255,.65); }
.zrl-show-card-btn { align-self: flex-start; font-size: 12px; font-weight: 600; letter-spacing: .05em; color: #fff; border: 1px solid rgba(255,255,255,.5); padding: 8px 18px; border-radius: 3px; margin-top: 6px; white-space: nowrap; }
.zrl-show-card { display: grid; grid-template-columns: 1fr; background: linear-gradient(135deg,#173d1a,#0a1a0b); border-radius: 6px; overflow: hidden; min-height: 150px; transition: background .3s ease, filter .3s ease; }
.zrl-show-card:hover { background: linear-gradient(135deg, var(--zrl-show-accent, var(--zrl-accent, #19AD21)) 0%, #0a0a0a 75%) !important; filter: brightness(1.4) saturate(1.5); }
@media (min-width: 720px) { .zrl-show-card { grid-template-columns: 1.3fr 1fr; } }
.zrl-show-card-body { padding: 26px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.zrl-show-card-art { background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 150px; }

/* Day tabs / schedule */
.zrl-day-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 14px; margin-bottom: 22px; }
.zrl-day-tab { flex: none; font-size: 12px; font-weight: 600; letter-spacing: .06em; color: #fff; background: #141414; padding: 10px 18px; border-radius: 3px; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; }
.zrl-day-tab.is-active { color: #000; background: var(--zrl-accent, #19AD21); }
.zrl-day-tab-today { font-size: 9px; font-weight: 800; background: rgba(0,0,0,.25); color: inherit; padding: 3px 6px; border-radius: 999px; letter-spacing: .04em; }
.zrl-day-panel { display: none; flex-direction: column; gap: 12px; margin-bottom: 50px; }
.zrl-day-panel.is-active { display: flex; }
.zrl-day-slot { display: flex; align-items: center; gap: 18px; background: #0c0c0c; border: 1px solid #1c1c1c; border-radius: 6px; padding: 16px 20px; }
.zrl-day-slot-time { font-weight: 600; font-size: 13px; color: #8a8a8a; width: 130px; flex: none; }
.zrl-day-slot-title { font-weight: 700; font-size: 15px; color: #fff; flex: 1; }
.zrl-day-empty { border: 1px dashed #262626; border-radius: 6px; padding: 36px 20px; text-align: center; margin-bottom: 50px; }
.zrl-day-empty-title { font-weight: 600; font-size: 15px; color: #aaa; margin-bottom: 6px; }
.zrl-day-empty-sub { font-size: 13px; color: #666; }

/* Show detail */
.zrl-show-hero .zrl-hero-title { text-align: center; }
.zrl-show-timebar { display: flex; background: #9a9a9a; }
.zrl-show-timebar-day { flex: 1; color: #000; font-weight: 700; font-size: 13px; letter-spacing: .05em; text-align: center; padding: 14px 10px; }
.zrl-show-timebar-cell { flex: 1; text-align: center; padding: 14px 10px; font-weight: 700; font-size: 13px; color: #fff; }
.zrl-show-detail-grid { display: grid; grid-template-columns: 1fr; gap: 26px; margin-bottom: 44px; }
@media (min-width: 720px) { .zrl-show-detail-grid { grid-template-columns: 220px 1fr; } }
.zrl-show-art { width: 140px; height: 140px; border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 12px; box-sizing: border-box; }
@media (min-width: 720px) { .zrl-show-art { width: 220px; height: 220px; padding: 18px; } }
.zrl-show-art-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 4px; }
.zrl-show-art-placeholder, .zrl-crew-placeholder { font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: .05em; color: rgba(255,255,255,.5); }
.zrl-crew-placeholder { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.zrl-show-description { font-size: 15px; color: #ddd; line-height: 1.6; margin: 0 0 20px; }
.zrl-show-disclaimer { font-size: 13px; color: #888; line-height: 1.6; margin: 0 0 24px; }
.zrl-show-cta { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 22px; color: #fff; line-height: 1.3; text-decoration: none; border-bottom: 2px solid var(--zrl-accent, #19AD21); padding-bottom: 4px; transition: opacity .2s ease, gap .2s ease; }
.zrl-show-cta::after { content: '→'; font-size: 20px; color: var(--zrl-accent, #19AD21); }
.zrl-show-cta:hover { opacity: .8; gap: 16px; }

/* ---------- Single Post (News article) ---------- */
.zrl-post-header { position: relative; background-color: #0a0a0a; padding: 48px 20px 44px; text-align: center; }
@media (min-width: 720px) { .zrl-post-header { padding: 64px 40px 64px; } }
.zrl-post-header-inner { max-width: 820px; margin: 0 auto; }
.zrl-post-tag { display: inline-block; color: #000; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; padding: 5px 14px; border-radius: 3px; margin-bottom: 18px; }
.zrl-post-title { font-weight: 700; font-size: 28px; line-height: 1.15; color: #fff; margin: 0 0 14px; text-shadow: 0 2px 20px rgba(0,0,0,.5); }
@media (min-width: 720px) { .zrl-post-title { font-size: 44px; } }
.zrl-post-meta { font-size: 13px; color: rgba(255,255,255,.7); }
.zrl-post-body { max-width: 760px; margin: 0 auto; padding: 40px 20px; }
@media (min-width: 720px) { .zrl-post-body { padding: 56px 40px; } }
.zrl-post-content { font-size: 16px; color: #ddd; line-height: 1.75; }
.zrl-post-content p { margin: 0 0 22px; }
.zrl-post-content h2, .zrl-post-content h3 { color: #fff; font-weight: 700; margin: 36px 0 16px; }
.zrl-post-content img { border-radius: 6px; margin: 24px 0; }
.zrl-post-content a { text-decoration: underline; }
.zrl-post-content blockquote { border-left: 3px solid var(--zrl-accent, #19AD21); margin: 28px 0; padding: 4px 0 4px 20px; color: #aaa; font-style: italic; }
.zrl-post-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-top: 44px; padding-top: 28px; border-top: 1px solid #1c1c1c; }
.zrl-post-share { display: flex; align-items: center; gap: 10px; }
.zrl-post-share-label { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: #666; }
.zrl-crew-card { position: relative; border-radius: 6px; overflow: hidden; background: repeating-linear-gradient(135deg,#1c1c1c 0 18px,#141414 18px 36px); background-size: cover; background-position: center 22%; height: 340px; display: flex; align-items: flex-end; justify-content: center; }
@media (min-width: 720px) { .zrl-crew-card { height: 440px; } }
.zrl-crew-card-overlay { background: linear-gradient(0deg, rgba(0,0,0,.85), transparent); width: 100%; padding: 24px; }
.zrl-crew-name { font-weight: 700; font-size: 22px; color: #fff; border-bottom: 2px solid; display: inline-block; padding-bottom: 4px; margin-bottom: 10px; }
.zrl-crew-socials { display: flex; gap: 8px; }

/* ---------- Listen ---------- */
.zrl-featured-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 56px; }
@media (min-width: 720px) { .zrl-featured-grid { grid-template-columns: repeat(3, 1fr); } }
.zrl-featured-platform { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.zrl-featured-logo-wrap { width: 100%; display: flex; align-items: center; justify-content: center; transition: transform .25s cubic-bezier(.22,1,.36,1), filter .25s ease; filter: drop-shadow(0 6px 18px rgba(0,0,0,.5)); }
.zrl-featured-logo-wrap img { max-width: 100%; height: 88px; width: auto; object-fit: contain; border-radius: 10px; }
.zrl-featured-platform:hover .zrl-featured-logo-wrap { transform: translateY(-6px) scale(1.04); filter: drop-shadow(0 14px 28px rgba(0,0,0,.65)); }
.zrl-featured-cta { width: 100%; text-align: center; padding: 11px 26px; background: var(--zrl-accent, #19AD21); color: #000; }
.zrl-more-platforms-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 720px) { .zrl-more-platforms-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1020px) { .zrl-more-platforms-grid { grid-template-columns: repeat(6, 1fr); } }
.zrl-more-platform { display: flex; align-items: center; justify-content: center; height: 76px; transition: transform .2s cubic-bezier(.22,1,.36,1), filter .2s ease; filter: drop-shadow(0 3px 10px rgba(0,0,0,.4)); }
.zrl-more-platform img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; border-radius: 8px; }
.zrl-more-platform:hover { transform: translateY(-4px) scale(1.05); filter: drop-shadow(0 10px 20px rgba(0,0,0,.55)); }
.zrl-more-count { font-size: 13px; color: #8a8a8a; white-space: nowrap; }
.zrl-more-list { column-count: 1; column-gap: 40px; border-top: 1px solid #1c1c1c; margin-bottom: 48px; }
@media (min-width: 720px) { .zrl-more-list { column-count: 2; } }
@media (min-width: 1020px) { .zrl-more-list { column-count: 3; } }
.zrl-more-row { display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-bottom: 1px solid #1c1c1c; break-inside: avoid; }
.zrl-more-row-icon { flex: none; width: 38px; height: 38px; border-radius: 6px; background: #0c0c0c; display: flex; align-items: center; justify-content: center; overflow: hidden; transition: transform .2s cubic-bezier(.22,1,.36,1); }
.zrl-more-row:hover .zrl-more-row-icon { transform: translateY(-3px) scale(1.08); }
.zrl-more-row-icon img { max-width: 100%; max-height: 100%; object-fit: contain; }
.zrl-more-row-name { font-size: 14px; font-weight: 600; color: #ddd; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zrl-more-row-arrow { flex: none; font-size: 15px; color: #555; }
.zrl-directory-cta { text-align: center; border-top: 1px solid #1c1c1c; padding-top: 40px; }
.zrl-directory-cta p { font-size: 15px; color: #aaa; margin: 0 0 20px; }
.zrl-platform-placeholder { width: 100%; height: 88px; background: repeating-linear-gradient(45deg,#111 0 12px,#1a1a1a 12px 24px); border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.zrl-platform-placeholder span { font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: .05em; color: rgba(255,255,255,.5); }
.zrl-platform-placeholder--small { height: 76px; border-radius: 8px; }

/* ---------- Support tabs ---------- */
.zrl-support-tabs { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; }
.zrl-support-tab { font-size: 13.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: #141414; padding: 12px 26px; border-radius: 24px; white-space: nowrap; }
.zrl-support-tab.is-active { color: #000; background: var(--zrl-accent, #19AD21); }
.zrl-support-panel { display: none; }
.zrl-support-panel.is-active { display: block; }
.zrl-donate-intro { text-align: center; max-width: 640px; margin: 0 auto 36px; }
.zrl-donate-intro p { font-size: 15px; color: #aaa; line-height: 1.6; margin: 0 0 26px; }
.zrl-donate-tiers { display: grid; grid-template-columns: 1fr; gap: 20px; max-width: 900px; margin: 0 auto; text-align: center; }
@media (min-width: 720px) { .zrl-donate-tiers { grid-template-columns: repeat(3, 1fr); } }
.zrl-donate-tier { background: #0c0c0c; border: 1px solid #1c1c1c; border-radius: 6px; padding: 28px 20px; }
.zrl-donate-amount { font-weight: 700; font-size: 26px; margin-bottom: 8px; }
.zrl-donate-desc { font-size: 13px; color: #aaa; }
.zrl-packages-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 30px; }
@media (min-width: 720px) { .zrl-packages-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .zrl-packages-grid { grid-template-columns: repeat(3, 1fr); } }
.zrl-package-card { background: #0c0c0c; border: 1px solid #1c1c1c; border-radius: 8px; padding: 28px 22px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.zrl-package-icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(25,173,33,.12); border: 2px solid var(--zrl-accent, #19AD21); display: flex; align-items: center; justify-content: center; font-size: 22px; }
/* Forces any emoji (a colorful bitmap glyph) down to a flat white silhouette, so admin-editable
   emoji fields still match the site's white-icon look regardless of which emoji is picked:
   brightness(0) crushes every color channel to black while preserving the glyph's alpha shape,
   then invert(1) flips that black silhouette to white. */
.zrl-emoji-white { display: inline-block; filter: brightness(0) invert(1); line-height: 1; }
.zrl-package-title { font-weight: 700; font-size: 17px; color: #fff; line-height: 1.3; }
.zrl-package-subtitle { font-size: 12.5px; color: #8a8a8a; line-height: 1.5; }
.zrl-package-btn { margin-top: auto; font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: var(--zrl-accent, #19AD21); color: #000; padding: 12px 22px; border-radius: 4px; width: 100%; text-align: center; white-space: nowrap; }
.zrl-interview-footer { text-align: center; }
.zrl-interview-footer p { font-size: 15px; color: #aaa; line-height: 1.7; margin: 0 0 26px; }
.zrl-advertise-grid { display: grid; grid-template-columns: 1fr; gap: 20px; max-width: 1000px; }
@media (min-width: 720px) { .zrl-advertise-grid { grid-template-columns: repeat(2, 1fr); } }
.zrl-advertise-card { background: #0c0c0c; border: 1px solid #1c1c1c; border-radius: 8px; padding: 28px 24px; display: flex; flex-direction: column; gap: 14px; }
.zrl-advertise-title { font-weight: 700; font-size: 18px; color: #fff; }
.zrl-advertise-desc { font-size: 14px; color: #aaa; line-height: 1.6; flex: 1; }

/* ---------- Contact ---------- */
.zrl-contact-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 720px) { .zrl-contact-grid { grid-template-columns: 1.4fr 1fr; } }
.zrl-contact-grid--no-form { align-items: start; }
.zrl-contact-cta { background: #0c0c0c; border: 1px solid #1c1c1c; border-radius: 10px; padding: 40px 36px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.zrl-contact-cta-label { font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.zrl-contact-cta-email { font-size: 26px; font-weight: 700; color: #fff; word-break: break-word; }
.zrl-contact-cta-sub { font-size: 14px; color: #aaa; line-height: 1.6; margin: 0 0 12px; max-width: 420px; }
.zrl-contact-form { display: flex; flex-direction: column; gap: 16px; }
.zrl-contact-form input, .zrl-contact-form textarea { background: #0c0c0c; border: 1px solid #262626; border-radius: 4px; padding: 14px 16px; color: #fff; font-size: 14px; }
.zrl-contact-form button { align-self: flex-start; }
.zrl-hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.zrl-form-message { font-size: 14px; line-height: 1.5; padding: 14px 16px; border-radius: 6px; margin-bottom: 16px; }
.zrl-form-message--success { background: rgba(25,173,33,0.12); border: 1px solid var(--zrl-accent, #19AD21); color: #fff; }
.zrl-form-message--error { background: rgba(255,80,80,0.1); border: 1px solid rgba(255,80,80,0.5); color: #ffb3b3; }
.zrl-contact-info { display: flex; flex-direction: column; gap: 22px; }
.zrl-contact-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; margin-bottom: 6px; }
.zrl-contact-value { font-size: 15px; color: #fff; line-height: 1.5; }
.zrl-contact-links { display: flex; gap: 12px; flex-wrap: wrap; }
.zrl-pill-link { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: #fff; border: 1px solid rgba(255,255,255,.4); border-radius: 20px; padding: 9px 18px; white-space: nowrap; }
.zrl-contact-socials { display: flex; gap: 10px; margin-top: 8px; }

/* ---------- Request a Song ---------- */
.zrl-song-request { background: #0c0c0c; border: 1px solid #1c1c1c; border-radius: 10px; padding: 32px 36px; margin-bottom: 40px; }
.zrl-song-request-title { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 18px; color: #fff; margin-bottom: 4px; }
.zrl-song-request-sub { font-size: 13.5px; color: #8a8a8a; line-height: 1.5; margin: 6px 0 16px; max-width: 520px; }
.zrl-song-request-fields { display: grid; grid-template-columns: 1fr; gap: 12px; max-width: 720px; }
@media (min-width: 720px) { .zrl-song-request-fields { grid-template-columns: repeat(3, 1fr); } }
.zrl-song-request input[type="text"], .zrl-song-request input[type="email"] { width: 100%; box-sizing: border-box; background: #141414; border: 1px solid #262626; border-radius: 4px; padding: 12px 14px; font-size: 14px; color: #fff; }
.zrl-song-request input[type="text"]:focus, .zrl-song-request input[type="email"]:focus { outline: none; border-color: var(--zrl-accent, #19AD21); }
.zrl-song-email { max-width: 320px; margin-top: 12px; display: block; }
.zrl-song-alerts-check { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; cursor: pointer; max-width: 520px; }
.zrl-song-alerts-check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--zrl-accent, #19AD21); flex: none; cursor: pointer; }
.zrl-song-alerts-check span { font-size: 13px; color: #aaa; line-height: 1.5; }
.zrl-song-captcha { margin-top: 18px; max-width: 340px; background: #141414; border: 1px solid #262626; border-radius: 6px; padding: 16px; align-items: center; gap: 12px; }
.zrl-song-captcha input { width: 20px; height: 20px; accent-color: var(--zrl-accent, #19AD21); flex: none; cursor: pointer; }
.zrl-song-captcha-title { font-size: 13px; font-weight: 600; color: #fff; }
.zrl-song-captcha-sub { font-size: 11px; color: #666; margin-top: 2px; line-height: 1.4; }
.zrl-song-submit { margin-top: 16px; display: block; }
.zrl-song-submit:disabled { background: #262626; color: #666; cursor: not-allowed; }
.zrl-text-link { background: none; border: none; padding: 0; font-family: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--zrl-accent, #19AD21); cursor: pointer; margin-top: 8px; }

/* ---------- Newsletter ---------- */
.zrl-newsletter-box { background: #0c0c0c; border: 1px solid #1c1c1c; border-radius: 8px; padding: 28px 32px; margin-bottom: 20px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: space-between; }
.zrl-newsletter-copy { flex: 1; min-width: 240px; }
.zrl-newsletter-title { font-weight: 700; font-size: 18px; color: #fff; margin-bottom: 6px; }
.zrl-newsletter-sub { font-size: 13.5px; color: #8a8a8a; line-height: 1.5; }
.zrl-newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; flex: none; }
.zrl-newsletter-form input[type="email"] { flex: 1; min-width: 220px; box-sizing: border-box; background: #141414; border: 1px solid #262626; border-radius: 4px; padding: 12px 14px; font-size: 14px; color: #fff; }
.zrl-newsletter-form input[type="email"]:focus { outline: none; border-color: var(--zrl-accent, #19AD21); }
.zrl-newsletter-form button { white-space: nowrap; }

/* ---------- Social icons ---------- */
.zrl-social-icon { border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; transition: transform .2s cubic-bezier(.34,1.56,.64,1); }
.zrl-social-icon:hover { transform: translateY(-3px); }

/* ---------- Footer ---------- */
.zrl-footer { position: relative; background: radial-gradient(ellipse 900px 500px at 50% -80px, rgba(25,173,33,0.16), transparent 70%), linear-gradient(180deg, #050705 0%, #020402 100%); border-top: 1px solid var(--zrl-accent, #19AD21); padding: 40px 20px; text-align: center; margin-top: 40px; overflow: hidden; }
@media (min-width: 720px) { .zrl-footer { padding: 56px 40px; } }
.zrl-footer-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px); background-size: 34px 34px; -webkit-mask-image: radial-gradient(ellipse 700px 400px at 50% 0%, #000, transparent 75%); mask-image: radial-gradient(ellipse 700px 400px at 50% 0%, #000, transparent 75%); pointer-events: none; }
.zrl-footer-content { position: relative; z-index: 1; }
.zrl-footer-logo { height: 200px; width: auto; margin: 0 auto 18px; }
.zrl-footer-socials { display: flex; gap: 12px; justify-content: center; margin-bottom: 22px; }
.zrl-footer-donate { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: var(--zrl-accent, #19AD21); color: #000; padding: 11px 26px; border-radius: 20px; margin-bottom: 22px; white-space: nowrap; box-shadow: 0 6px 24px rgba(25,173,33,0.35); }
.zrl-footer-links { display: flex; gap: 16px; justify-content: center; margin-bottom: 18px; }
.zrl-footer-links a { font-size: 11px; font-weight: 600; letter-spacing: .04em; color: #888; }
.zrl-footer-links a:hover { color: var(--zrl-accent, #19AD21); }
.zrl-footer-copy { font-size: 11.5px; color: #555; line-height: 1.6; max-width: 700px; margin: 0 auto; }

/* ---------- Persistent Player ---------- */
.zrl-player { position: fixed; z-index: 300; display: none; }
.zrl-player.is-active { display: flex; }
.zrl-player--bar { left: 0; right: 0; bottom: 0; background: linear-gradient(90deg,#0a1f0b, var(--zrl-accent, #19AD21) 120%); border-top: 2px solid #000; align-items: center; gap: 12px; padding: 10px 16px; animation: zrl-panel-in .4s cubic-bezier(.22,1,.36,1) both; }
@media (min-width: 720px) { .zrl-player--bar { gap: 18px; padding: 12px 32px; } }
.zrl-player-play { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #000; display: flex; align-items: center; justify-content: center; transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease; }
.zrl-player-play:active { transform: scale(.88); }
.zrl-icon-play { width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 13px solid #fff; margin-left: 3px; }
.zrl-icon-pause { display: flex; gap: 4px; }
.zrl-icon-pause::before, .zrl-icon-pause::after { content: ''; width: 4px; height: 16px; background: #fff; border-radius: 1px; }
.zrl-player-art { display: none; flex: none; width: 44px; height: 44px; border-radius: 4px; background: repeating-linear-gradient(45deg,#000 0 6px,#0d2a0e 6px 12px); }
@media (min-width: 720px) { .zrl-player-art { display: block; } }
.zrl-player-info { flex: 1; min-width: 0; }
.zrl-player-title-row { display: flex; align-items: center; gap: 8px; }
.zrl-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #888; flex: none; }
.zrl-live-dot.is-live { background: #ff3b3b; animation: zrl-pulse 1.2s infinite; }
.zrl-player-title { font-weight: 600; font-size: 15px; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zrl-player-status { font-size: 12.5px; font-weight: 500; color: rgba(0,0,0,.75); margin-top: 3px; padding-left: 15px; }
.zrl-player-controls { display: none; align-items: center; gap: 8px; flex: none; }
@media (min-width: 720px) { .zrl-player-controls { display: flex; } }
.zrl-player-request { flex: none; cursor: pointer; display: flex; align-items: center; background: rgba(0,0,0,.15); border: 1.5px solid rgba(0,0,0,.4); color: #000; padding: 10px 18px; border-radius: 20px; font-size: 12.5px; font-weight: 700; letter-spacing: .03em; white-space: nowrap; transition: background .2s ease; text-decoration: none; }
.zrl-player-request:hover { background: rgba(0,0,0,.28); color: #000; }
.zrl-mute-btn { background: none; padding: 4px; display: flex; align-items: center; justify-content: center; }
.zrl-volume { width: 90px; accent-color: #000; }

.zrl-player--pill { flex-direction: column; right: 20px; bottom: 20px; background: #0a1f0b; border: 2px solid var(--zrl-accent, #19AD21); border-radius: 50px; box-shadow: 0 8px 30px rgba(0,0,0,.6); max-width: calc(100vw - 40px); width: 300px; max-height: calc(100vh - 28px); overflow-y: auto; overflow-x: hidden; transition: width .5s cubic-bezier(.22,1,.36,1), border-radius .5s cubic-bezier(.22,1,.36,1); }
@media (min-width: 720px) { .zrl-player--pill:not(.is-expanded) { width: 300px; } }
@media (max-width: 719px) { .zrl-player--pill { left: 14px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); width: auto; max-height: calc(100vh - 28px - env(safe-area-inset-bottom, 0px)); } .zrl-player--pill.is-expanded { border-radius: 20px; } }
@media (min-width: 720px) { .zrl-player--pill.is-expanded { width: 340px; border-radius: 20px; } }
.zrl-pill-top { max-height: 0; overflow: hidden; transition: max-height .45s cubic-bezier(.22,1,.36,1); }
.zrl-player--pill.is-expanded .zrl-pill-top { max-height: 28px; }
.zrl-pill-close { display: flex; justify-content: flex-end; margin: 4px 8px 0 auto; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.08); color: #8fbf90; font-size: 16px; line-height: 1; align-items: center; justify-content: center; }
.zrl-pill-row { display: flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; transition: padding .4s cubic-bezier(.22,1,.36,1); }
.zrl-player--pill.is-expanded .zrl-pill-row { padding: 0 18px 2px; }
.zrl-pill-play { width: 40px; height: 40px; background: var(--zrl-accent, #19AD21); }
.zrl-pill-title { color: #fff; font-size: 14px; }
.zrl-pill-artist { color: rgba(255,255,255,.75); font-size: 12px; padding-left: 15px; }
.zrl-pill-bottom { max-height: 0; overflow: hidden; transition: max-height .45s cubic-bezier(.22,1,.36,1); }
.zrl-player--pill.is-expanded .zrl-pill-bottom { max-height: 170px; }
.zrl-pill-divider { display: none; }
.zrl-pill-status { font-size: 11.5px; font-weight: 500; color: rgba(255,255,255,.75); padding: 6px 18px 0; }
.zrl-pill-controls { display: flex; align-items: center; gap: 10px; padding: 8px 18px 12px; }
.zrl-pill-controls .zrl-mute-btn { color: #fff; }
.zrl-pill-controls .zrl-volume { flex: 1; accent-color: var(--zrl-accent, #19AD21); }
.zrl-pill-request { display: flex; align-items: center; justify-content: center; margin: 0 18px 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); color: #fff; padding: 9px 13px; border-radius: 20px; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.zrl-pill-request:hover { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.4); }