/* MAIS TUNER 24.22 — Sintonia Central reorganizada.
   Só layout: fontes, cores dos botões de play e textos continuam os mesmos.
   Desktop: capa | identidade da rádio, estado + atalhos na mesma linha,
   cartão "Tocando agora" e reações. Rodapé com selos de qualidade e as
   fontes de áudio recolhidas num botão. Celular: capa pequena ao lado do
   nome da rádio, o resto em largura total. */

:root{--ct-ease:cubic-bezier(.22,1,.36,1)}

/* ---------- estrutura ---------- */
.hero .hero-panel{padding:18px 22px 6px!important}
.hero .hero-panel-head{padding-bottom:12px!important}
.hero .hero-main{grid-template-columns:minmax(220px,288px) minmax(0,1fr)!important;gap:40px!important;align-items:center!important;padding:22px 6px 22px!important}
html body .hero .hero-copy{display:flex!important;flex-flow:row wrap!important;align-items:center!important;align-content:center!important;justify-content:flex-start!important;column-gap:8px!important;row-gap:0!important;min-width:0;text-align:left!important}
html body .hero .hero-copy>*{flex:0 0 100%;min-width:0;box-sizing:border-box}
html body .hero .hero-copy>.hero-overline{order:1!important;flex:0 0 100%!important}
html body .hero .hero-copy>.hero-station{order:2!important}
html body .hero .hero-copy>.hero-editorial-question{order:3!important}
html body .hero .hero-copy>.hero-sub{order:4!important;margin:6px 0 0!important;text-align:left!important;max-width:none!important;flex:0 0 100%!important}
html body .hero .hero-copy>.hero-status-row{order:5!important;flex:0 1 auto!important;margin-top:16px!important}
html body .hero .hero-copy>.central-media-actions{order:5!important;flex:0 1 auto!important;margin:16px 0 0!important}
html body .hero .hero-copy>#nowPlayingWrap{order:6!important}
html body .hero .hero-copy>#communityReactions{order:7!important}

/* ---------- capa ---------- */
.hero .hero-visual{max-width:288px!important;box-shadow:0 34px 60px -38px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.06)!important;transition:transform .5s var(--ct-ease),box-shadow .5s var(--ct-ease)}
.hero .hero-visual:hover{transform:translateY(-3px)}
/* Sem capa da música: a marca da rádio fica no centro, grande, em vez do selo no canto. */
.hero.has-station .hero-panel[data-cover-ready="false"] .art{position:absolute!important;inset:0!important;top:0!important;left:0!important;width:100%!important;height:100%!important;padding:22%!important;border-radius:inherit!important;box-shadow:none!important;
  background:radial-gradient(120% 90% at 30% 15%,rgba(95,255,192,.16),transparent 55%),linear-gradient(150deg,#1b4f9c 0%,#0b2a58 55%,#071a38 100%)!important}
.hero.has-station .hero-panel[data-cover-ready="false"] .art.is-brand-wordmark{padding:24% 18%!important}
.hero.has-station .hero-panel[data-cover-ready="false"] .art img{filter:drop-shadow(0 10px 24px rgba(0,0,0,.45))}

/* ---------- estado + atalhos ---------- */
.hero .hero-status-row{gap:6px!important}
.hero .central-media-actions{gap:6px!important}
.hero .central-media-actions button{min-height:34px!important;padding:6px 13px!important;font-size:12px!important}
.hero .central-media-actions button svg{width:16px!important;height:16px!important}

/* ---------- cartão "Tocando agora" ---------- */
.hero #nowPlayingWrap{position:relative!important;max-width:680px!important;margin-top:18px!important;padding:16px 18px 14px!important;border-radius:18px!important;
  border:1px solid color-mix(in srgb,var(--ui81-accent,#5fffc0) 18%,var(--ui81-line,rgba(255,255,255,.12)))!important;
  background:linear-gradient(135deg,color-mix(in srgb,var(--ui81-surface,#0d2a4d) 82%,transparent),color-mix(in srgb,var(--ui81-surface,#0d2a4d) 52%,transparent))!important;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);overflow:hidden!important;animation:ctCardIn .6s var(--ct-ease) both}
.hero #nowPlayingWrap .np-row{padding:0!important}
.hero #nowPlayingWrap .np-label{display:inline-flex!important;align-items:center;gap:7px;color:var(--ui81-accent,#5fffc0)!important;font-size:9.5px!important;letter-spacing:.16em!important}
.hero #nowPlayingWrap .np-label::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 0 currentColor;animation:ctPulse 2.2s ease-out infinite}
.hero #nowPlayingText{font-size:clamp(19px,1.9vw,24px)!important;font-weight:750!important;letter-spacing:-.01em;margin-top:4px}
.hero #nowPlayingWrap .np-lyrics{margin-top:12px!important}
.hero #nowPlayingWrap .np-progress-wrap{margin-top:14px!important}
.hero #nowPlayingWrap .next-track-peek{border-radius:18px}
@keyframes ctCardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes ctPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 55%,transparent)}70%,100%{box-shadow:0 0 0 7px transparent}}

/* ---------- reações (curtir, salvar) ---------- */
.hero #communityReactions{margin-top:12px!important;padding:0!important;border-top:0!important;display:flex!important;flex-wrap:wrap;align-items:center;gap:8px}
.hero #communityReactions>*{margin:0!important}
.hero #communityReactions .community-reaction-buttons{display:flex;flex-wrap:wrap;gap:6px}
.hero #communityReactions .community-button,.hero #communityReactions .community-login,.hero #communityReactions>button{min-height:34px!important;border-radius:999px!important;font-size:12px!important;padding:6px 13px!important}
html body .hero:not(.has-station) #communityReactions{display:none!important}
/* A legenda repete a música quando o cartão "Tocando agora" está visível. */
.hero .hero-copy:has(#nowPlayingWrap.show) .community-track-caption{display:none!important}
.hero .community-track-caption{flex:0 0 100%;font-size:12.5px!important;opacity:.8}

/* ---------- rodapé: selos + fontes de áudio ---------- */
.hero .hero-detail-row{display:flex!important;align-items:center!important;gap:12px!important;padding:12px 6px!important;border-top:1px solid var(--ui81-line,rgba(255,255,255,.1))!important;flex-wrap:wrap}
.hero .hero-detail-row .eq{order:0;margin:0 4px}
.hero .hero-detail-row #qualityBadges{order:1}
.hero .hero-detail-row #qualityBadges:not(:has(.qb.active)){display:none!important}
.central-sources-toggle{order:2;margin-left:auto;display:inline-flex;align-items:center;gap:9px;min-height:38px;max-width:100%;padding:6px 8px 6px 14px;border-radius:999px;
  border:1px solid var(--ui81-line,rgba(255,255,255,.14));background:color-mix(in srgb,var(--ui81-surface,#0d2a4d) 70%,transparent);color:var(--ui81-text,#fff);font:inherit;font-size:12px;cursor:pointer;
  transition:border-color .2s ease,background .2s ease}
.central-sources-toggle:hover{border-color:color-mix(in srgb,var(--ui81-accent,#5fffc0) 55%,transparent)}
.central-sources-toggle:focus-visible{outline:3px solid var(--ui81-accent,#5fffc0);outline-offset:2px}
.central-sources-toggle[hidden]{display:none!important}
.central-sources-toggle .cst-label{font-size:9.5px;font-weight:800;letter-spacing:.14em;color:var(--ui81-muted,#a6bddb);white-space:nowrap}
.central-sources-toggle .cst-current{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;max-width:260px}
.central-sources-toggle .cst-count{display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:color-mix(in srgb,var(--ui81-accent,#5fffc0) 18%,transparent);color:var(--ui81-accent,#5fffc0);font-size:11px;font-weight:800}
.central-sources-toggle .cst-chev{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .35s var(--ct-ease)}
.central-sources-toggle[aria-expanded="true"] .cst-chev{transform:rotate(180deg)}
.hero-panel.has-sources-toggle:not(.sources-open) #sourceRow{display:none!important}
.hero-panel.has-sources-toggle #sourceRow::before{display:none!important}
.hero-panel.has-sources-toggle.sources-open #sourceRow{margin:0 0 14px!important;animation:ctCardIn .45s var(--ct-ease) both}

/* ---------- tema claro ---------- */
html[data-site-theme="light"] .hero #nowPlayingWrap{background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(255,255,255,.62))!important;border-color:rgba(20,60,110,.14)!important}
html[data-site-theme="light"] .hero #nowPlayingWrap .np-label{color:#08805a!important}
html[data-site-theme="light"] .central-sources-toggle{background:rgba(255,255,255,.8);border-color:rgba(20,60,110,.16);color:#0b2140}
html[data-site-theme="light"] .central-sources-toggle .cst-label{color:#4b6280}
html[data-site-theme="light"] .central-sources-toggle .cst-count{color:#08805a}

/* ---------- tablet ---------- */
@media (max-width:980px) and (min-width:721px){
  .hero .hero-main{grid-template-columns:minmax(180px,230px) minmax(0,1fr)!important;gap:26px!important}
}

/* ---------- celular ---------- */
@media (max-width:720px){
  .hero .hero-panel{padding:14px 14px 4px!important}
  .hero .hero-main,.hero:not(.has-station) .hero-main{display:grid!important;grid-template-columns:104px minmax(0,1fr)!important;column-gap:14px!important;row-gap:0!important;align-items:center!important;padding:14px 0 12px!important}
  html body .hero .hero-copy{display:contents!important}
  .hero .hero-visual,.hero:not(.has-station) .hero-visual{grid-column:1;grid-row:1/4;align-self:start;width:104px!important;max-width:104px!important;margin:0!important;border-radius:14px!important}
  .hero .hero-visual .np-cover,.hero .hero-visual .art{border-radius:14px!important}
  .hero .hero-play{width:40px!important;height:40px!important;right:-6px!important;bottom:-6px!important}
  .hero .hero-play svg{width:18px!important;height:18px!important}
  .hero.has-station .hero-panel[data-cover-ready="true"] .art{top:6px!important;left:6px!important;width:48px!important;height:26px!important;padding:4px 6px!important;border-radius:8px!important}
  html body .hero .hero-copy>.hero-editorial-question{grid-column:1/-1;grid-row:4;margin-top:12px!important}
  html body .hero .hero-copy>.hero-overline{grid-column:2;grid-row:1;align-self:end;margin:0!important}
  html body .hero .hero-copy>.hero-station{grid-column:2;grid-row:2;font-size:24px!important;margin:4px 0 0!important;overflow-wrap:anywhere}
  html body .hero .hero-copy>.hero-sub{grid-column:2;grid-row:3;align-self:start;margin-top:4px!important;font-size:12px!important}
  html body .hero .hero-copy>.hero-status-row{grid-column:1/-1;grid-row:5;margin-top:14px!important}
  html body .hero .hero-copy>.central-media-actions{grid-column:1/-1;grid-row:6;margin-top:10px!important}
  html body .hero .hero-copy>#nowPlayingWrap{grid-column:1/-1;grid-row:7;max-width:none!important;margin-top:14px!important;padding:14px 14px 12px!important}
  html body .hero .hero-copy>#communityReactions{grid-column:1/-1;grid-row:8}
  .hero #nowPlayingText{font-size:18px!important}
  .hero .central-media-actions button{flex:1 1 0;min-height:40px!important}
  .hero .hero-detail-row{padding:10px 0!important;gap:8px!important}
  .central-sources-toggle{flex:1 1 0;min-width:0;margin-left:0;justify-content:space-between}
  .central-sources-toggle .cst-current{max-width:none;flex:1;text-align:left}
  .hero .hero-visual:hover{transform:none}
}
/* Sem rádio selecionada no celular: capa e convite um pouco maiores. */
@media (max-width:720px){
  .hero:not(.has-station) .hero-visual{width:104px!important}
  html body .hero:not(.has-station) .hero-copy>.hero-editorial-question{display:block}
}

@media (prefers-reduced-motion:reduce){
  .hero #nowPlayingWrap,.hero-panel.has-sources-toggle.sources-open #sourceRow{animation:none!important}
  .hero #nowPlayingWrap .np-label::before{animation:none}
  .central-sources-toggle .cst-chev,.hero .hero-visual{transition:none}
}

/* ================================================================ 24.45.2: player de baixo mais rico (site no computador)
   capa da música com o selinho da rádio + nome da rádio com a fitinha da afiliada */
#miniPlayer .mini-cover,#miniPlayer .mini-brandline{display:none}
@media (min-width:900px){
  html:not(.mt-app) #miniPlayer .mini-cover:not([hidden]){position:relative;display:block;flex:0 0 58px;width:58px;height:58px;margin:0 6px 0 0}
  html:not(.mt-app) #miniPlayer .mini-cover-img{display:block;width:100%;height:100%;object-fit:cover;border-radius:12px;
    box-shadow:0 10px 22px -12px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.1)}
  html:not(.mt-app) #miniPlayer .mini-cover-badge{position:absolute;right:-7px;bottom:-7px;display:grid;place-items:center;width:26px;height:26px;overflow:hidden;
    border-radius:8px;background:var(--mc-brand,#123a69);box-shadow:0 0 0 2px var(--ui81-surface,#0d2a4d),0 4px 10px -4px rgba(0,0,0,.7)}
  html:not(.mt-app) #miniPlayer .mini-cover-badge img{width:78%;height:78%;object-fit:contain}
  html:not(.mt-app) #miniPlayer .mini-cover-badge.is-cover img{width:100%;height:100%;object-fit:cover}
  html:not(.mt-app) #miniPlayer .mini-cover-badge img[hidden]{display:none}
  html:not(.mt-app) #miniPlayer .mini-cover-badge b{color:#fff;font:800 10px/1 'Reddit Sans',sans-serif}
  html:not(.mt-app) #miniPlayer.has-song-cover .mini-art{display:none!important}
  /* sem capa da música: o logo da rádio um pouco maior, alinhado com a capa */
  html:not(.mt-app) #miniPlayer:not(.has-song-cover) .mini-art{width:52px!important;height:52px!important;min-width:52px!important}
  html:not(.mt-app) #miniPlayer #miniStation{display:none!important}
  html:not(.mt-app) #miniPlayer .mini-brandline{display:flex;align-items:center;gap:8px;min-width:0;margin-bottom:3px}
  html:not(.mt-app) #miniPlayer .mini-brandname{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
    color:var(--ui81-text,#f4f8ff);font-family:'Reddit Sans',sans-serif;font-size:14px;font-weight:750;line-height:1.15}
  /* a fitinha: o mesmo degradê e a mesma letra condensada dos cubos do modo Marcas */
  html:not(.mt-app) #miniPlayer .mini-ribbon:not([hidden]){flex:none;display:inline-flex;align-items:center;height:19px;padding:0 8px 1px;border-radius:5px;
    background:linear-gradient(100deg,#36cae7 0%,#55e4d1 52%,#5fffc0 100%);color:#082a47;
    font-family:'Reddit Sans Condensed','Arial Narrow',sans-serif;font-size:13px;font-weight:600;letter-spacing:-.2px;line-height:1;white-space:nowrap}
  html:not(.mt-app) #miniPlayer #miniTrack{font-size:12px}
}