/*
 * Player front-end — Rádio Online.
 * Autor: António Lopes — https://antoniolopes.io
 */

.rdo-player{
  --rdo-accent:#e11d48;
  --rdo-bg:#0e1116;
  --rdo-surface:#171b22;
  --rdo-ink:#f4f6fb;
  --rdo-muted:#9aa4b2;
  --rdo-bd:rgba(255,255,255,.08);
  --rdo-track:rgba(255,255,255,.32);
  --rdo-r:16px;
  box-sizing:border-box;
  display:flex;align-items:center;flex-wrap:wrap;gap:14px 16px;
  max-width:520px;width:100%;
  padding:16px 18px;
  color:var(--rdo-ink);
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb,var(--rdo-accent) 22%, transparent), transparent 55%),
    var(--rdo-bg);
  border:1px solid var(--rdo-bd);
  border-radius:var(--rdo-r);
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.35;text-align:left;letter-spacing:normal;
  container-type:inline-size;container-name:rdo;
}
.rdo-player *{box-sizing:border-box}

/* Resets defensivos — o tema do site NÃO pode alterar o player */
.rdo-player button.rdo-btn{
  margin:0;font:inherit;letter-spacing:normal;text-transform:none;text-shadow:none;
  min-height:0;min-width:0;line-height:1;-webkit-appearance:none;appearance:none;
  text-decoration:none;
}
.rdo-player button.rdo-btn:hover,.rdo-player button.rdo-btn:focus{text-decoration:none}
.rdo-player svg{display:inline-block;vertical-align:middle;fill:currentColor;max-width:none;height:auto}
.rdo-player input[type="range"]{margin:0;padding:0;background:transparent;-webkit-appearance:none;appearance:none;min-height:0;box-shadow:none;border:0}
.rdo-player p{margin:0;padding:0;background:none;color:inherit}
.rdo-player span{background:none}

.rdo-player--light{
  --rdo-bg:#fff;--rdo-surface:#f3f5f9;--rdo-ink:#141922;--rdo-muted:#5b6572;
  --rdo-bd:rgba(15,23,42,.10);--rdo-track:rgba(15,23,42,.22);
  box-shadow:0 8px 24px rgba(16,24,40,.10);
}

/* Logo / capa da estação. Escondido por JS se a imagem falhar — boa parte
   dos favicons da Radio Browser aponta para ficheiros mortos. */
.rdo-player__logo{
  flex:0 0 auto;display:block;width:56px;height:56px;
  border-radius:12px;object-fit:cover;
  background:var(--rdo-surface);border:1px solid var(--rdo-bd);
}

.rdo-player__main{flex:1 1 150px;min-width:0}
.rdo-player__top{display:flex;align-items:center;gap:10px;min-width:0}
.rdo-live{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
  font-size:10.5px;font-weight:800;letter-spacing:.08em;
  padding:3px 8px;border-radius:999px;
  color:var(--rdo-accent);
  background:color-mix(in srgb,var(--rdo-accent) 16%, transparent);
  border:1px solid color-mix(in srgb,var(--rdo-accent) 35%, transparent);
}
.rdo-live__dot{width:7px;height:7px;border-radius:50%;background:var(--rdo-accent);box-shadow:0 0 0 0 var(--rdo-accent);animation:rdo-pulse 1.6s ease-out infinite}
.rdo-player__title{flex:0 1 auto;min-width:0;font-size:18px;font-weight:700;color:var(--rdo-ink);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rdo-player__title:empty{display:none}
.rdo-player__name{margin-top:5px;font-size:12.5px;font-weight:500;color:var(--rdo-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rdo-player__now{margin-top:4px;font-size:12px;font-weight:600;color:var(--rdo-accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.rdo-player__now:empty{display:none}
.rdo-player__now::before{content:"♪ ";opacity:.85}

/* Equalizer signature — só anima ao tocar */
.rdo-eq{display:flex;align-items:flex-end;gap:3px;height:16px;margin-top:8px}
.rdo-eq i{width:3px;height:20%;border-radius:2px;background:var(--rdo-accent);opacity:.55;transform-origin:bottom}
.rdo-player.is-playing .rdo-eq i{animation:rdo-bar .9s ease-in-out infinite}
.rdo-player.is-playing .rdo-eq i:nth-child(1){animation-delay:-.1s}
.rdo-player.is-playing .rdo-eq i:nth-child(2){animation-delay:-.5s}
.rdo-player.is-playing .rdo-eq i:nth-child(3){animation-delay:-.2s}
.rdo-player.is-playing .rdo-eq i:nth-child(4){animation-delay:-.7s}
.rdo-player.is-playing .rdo-eq i:nth-child(5){animation-delay:-.35s}

@keyframes rdo-bar{0%,100%{height:20%}50%{height:100%}}
@keyframes rdo-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--rdo-accent) 70%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* Controls */
.rdo-player__controls{display:flex;align-items:center;gap:12px;flex:0 0 auto;margin-left:auto}
.rdo-player .rdo-btn{
  display:grid;place-items:center;cursor:pointer;color:var(--rdo-ink);
  background:var(--rdo-surface);border:1px solid var(--rdo-bd);border-radius:50%;
  padding:0;transition:transform .08s ease,background .15s ease,box-shadow .15s ease;
}
.rdo-player .rdo-btn:hover{transform:translateY(-1px)}
.rdo-player .rdo-btn:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--rdo-accent) 45%,transparent)}
.rdo-player .rdo-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.rdo-player .rdo-play{width:52px;height:52px;color:#fff;background:var(--rdo-accent);border-color:transparent;box-shadow:0 6px 18px color-mix(in srgb,var(--rdo-accent) 40%,transparent)}
.rdo-player .rdo-play .rdo-ico-pause,.rdo-player .rdo-play.is-on .rdo-ico-play{display:none}
.rdo-player .rdo-play.is-on .rdo-ico-pause{display:block}
.rdo-player .rdo-mute{width:38px;height:38px}
.rdo-player .rdo-mute .rdo-ico-mute{display:none}
.rdo-player .rdo-mute.is-muted .rdo-ico-vol{display:none}
.rdo-player .rdo-mute.is-muted .rdo-ico-mute{display:block}

.rdo-vol{display:flex;align-items:center;gap:8px}
/* Range cross-browser: input transparente + track visível nas pseudo-classes.
   --rdo-track é cor sólida (sem color-mix) para nunca ficar invisível. */
.rdo-player .rdo-vol__range{width:84px;height:16px;-webkit-appearance:none;appearance:none;background:transparent;border:0;cursor:pointer;padding:0;margin:0}
.rdo-player .rdo-vol__range::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:var(--rdo-track)}
.rdo-player .rdo-vol__range::-moz-range-track{height:4px;border-radius:999px;background:var(--rdo-track)}
.rdo-player .rdo-vol__range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-5px;width:14px;height:14px;border-radius:50%;background:var(--rdo-accent);border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.rdo-player .rdo-vol__range::-moz-range-thumb{width:14px;height:14px;border:2px solid #fff;border-radius:50%;background:var(--rdo-accent);box-shadow:0 1px 3px rgba(0,0,0,.35)}
.rdo-player .rdo-vol__range:focus-visible{outline:none}
.rdo-player .rdo-vol__range:focus-visible::-webkit-slider-runnable-track{box-shadow:0 0 0 3px rgba(255,255,255,.15)}

.rdo-player__msg{flex-basis:100%;order:9;margin:0;font-size:12px;color:var(--rdo-muted);min-height:0}
.rdo-player__msg:empty{display:none}
.rdo-player.is-error .rdo-player__msg{color:#f87171}

/* Container-based: adapta ao espaço real do shortcode, não só à viewport.
   O volume fica SEMPRE visível — apenas encolhe. */
@container rdo (max-width:420px){
  .rdo-player__logo{width:44px;height:44px;border-radius:10px}
  .rdo-player__controls{flex-basis:100%;margin-left:0;justify-content:space-between}
  .rdo-vol{flex:1 1 auto;justify-content:flex-end}
  .rdo-player .rdo-vol__range{flex:1 1 auto;width:auto;min-width:56px;max-width:160px}
}

/* Fallback por viewport (navegadores sem container queries) */
@supports not (container-type:inline-size){
  @media (max-width:480px){
    .rdo-player__logo{width:44px;height:44px;border-radius:10px}
    .rdo-player__controls{flex-basis:100%;margin-left:0;justify-content:space-between}
    .rdo-vol{flex:1 1 auto;justify-content:flex-end}
    .rdo-player .rdo-vol__range{flex:1 1 auto;width:auto;min-width:56px;max-width:160px}
  }
}
@media (prefers-reduced-motion:reduce){
  .rdo-player.is-playing .rdo-eq i,
  .rdo-live__dot{animation:none}
  .rdo-btn{transition:none}
}

/* ---- Barra fixa no topo (sticky) ---- */
.rdo-sticky{
  position:fixed;top:0;left:0;right:0;z-index:99990;
  display:block;
  box-shadow:0 4px 18px rgba(0,0,0,.28);
}
/* Player ocupa toda a largura da página, flush com a barra */
.rdo-sticky .rdo-player{
  max-width:none;width:100%;
  border-radius:0;border-left:0;border-right:0;border-top:0;
  padding:12px clamp(14px,4vw,40px);
}
.rdo-sticky .rdo-player__logo{width:40px;height:40px;border-radius:10px}
body.admin-bar .rdo-sticky{top:32px}
@media (max-width:782px){body.admin-bar .rdo-sticky{top:46px}}
.rdo-spa-loading{cursor:progress}

/* ---- Card flutuante ---- */
.rdo-float{
  /* O --rdo-accent real chega por style inline a partir do PHP; o valor aqui
     é só a rede. As restantes variáveis do tema vivem no .rdo-player, e os
     botões de minimizar são irmãos dele e não descendentes — daí repeti-las. */
  --rdo-accent:#e11d48;
  --rdo-ink:#f4f6fb;
  --rdo-surface:#171b22;
  --rdo-bd:rgba(255,255,255,.12);
  position:fixed;z-index:999990;width:min(380px,calc(100vw - 32px));
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.30));
}
.rdo-float .rdo-player{width:100%;max-width:none}
.rdo-float--br{right:20px;bottom:20px}
.rdo-float--bl{left:20px;bottom:20px}
.rdo-float--tr{right:20px;top:20px}
.rdo-float--tl{left:20px;top:20px}
/* Só acima do breakpoint mobile. Abaixo dele o float vira barra em baixo, e
   este top:52px — de especificidade maior que a media query — combinava com
   bottom:0 e esticava a caixa dos 52px até ao fundo do ecrã (92%), tapando a
   pagina com uma área transparente que continuava a apanhar cliques. */
@media (min-width:601px){
  body.admin-bar .rdo-float--tr,body.admin-bar .rdo-float--tl{top:52px}
}
@media (max-width:600px){
  /* No mobile o card vira barra full-width colada em baixo */
  .rdo-float{inset:auto 0 0;width:100%}
  .rdo-float .rdo-player{
    border-radius:0;border-left:0;border-right:0;border-bottom:0;
    /* indicador de home do iOS: sem isto o play e o volume ficam por baixo dele */
    padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));
  }
  /* Na barra full-width o canto não existe: o botão passa para dentro. Os
     controlos já estão na 2ª linha aqui, portanto o topo direito está livre. */
  .rdo-float .rdo-float__min{top:6px;right:6px}

  /* Minimizado deixa de ser barra e volta a ser um alvo no canto inferior,
     do lado que corresponde à posição configurada. */
  .rdo-float[data-minimized="true"]{
    inset:auto auto calc(20px + env(safe-area-inset-bottom,0px));
  }
  .rdo-float--br[data-minimized="true"],
  .rdo-float--tr[data-minimized="true"]{right:20px}
  .rdo-float--bl[data-minimized="true"],
  .rdo-float--tl[data-minimized="true"]{left:20px}
}

/* ---- Minimizar (só no modo flutuante) ---- */
.rdo-float--theme-light{
  --rdo-ink:#141922;
  --rdo-surface:#fff;
  --rdo-bd:rgba(15,23,42,.12);
}

/* Botão de minimizar: encostado ao canto do card, por fora, para nunca
   colidir com os controlos de reprodução seja qual for o layout. */
.rdo-float__min{
  position:absolute;top:-8px;right:-8px;z-index:3;
  display:grid;place-items:center;
  width:28px;height:28px;padding:0;margin:0;
  border-radius:50%;cursor:pointer;line-height:1;
  /* Cor de destaque só na borda e no glifo. O fundo fica neutro para o
     glifo continuar legível sobre qualquer cor escolhida. */
  color:var(--rdo-accent);
  background:var(--rdo-surface);
  border:1px solid var(--rdo-accent);
  box-shadow:0 2px 8px rgba(0,0,0,.32);
  /* Sem esbatimento em repouso: a 65% a cor configurada lia-se lavada. */
  opacity:1;
  -webkit-appearance:none;appearance:none;
  transition:transform .15s ease;
}
.rdo-float__min:hover{transform:scale(1.08)}
.rdo-float__min:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--rdo-accent) 45%,transparent);
}

/* Ícone: alvo de 56px, acima do mínimo de 44px para toque. */
.rdo-float__icon{
  display:none;place-items:center;position:relative;
  width:56px;height:56px;padding:0;margin:0;
  border:0;border-radius:50%;cursor:pointer;line-height:1;
  color:#fff;background:var(--rdo-accent);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  -webkit-appearance:none;appearance:none;
  transition:transform .15s ease;
}
.rdo-float__icon:hover{transform:scale(1.06)}
.rdo-float__icon:focus-visible{
  outline:none;
  box-shadow:0 8px 24px rgba(0,0,0,.35),0 0 0 3px color-mix(in srgb,var(--rdo-accent) 55%,transparent);
}
.rdo-float__glyph{position:relative;z-index:1}
/* Emitido depois do glifo, portanto tapa-o quando carrega. */
.rdo-float__logo{
  position:absolute;inset:0;z-index:2;
  width:100%;height:100%;
  border-radius:50%;object-fit:cover;
}
/* Fica por fora do botão, logo o botão não pode ter overflow:hidden. */
.rdo-float__ring{
  position:absolute;inset:-4px;z-index:0;
  border-radius:50%;pointer-events:none;
  border:2px solid var(--rdo-accent);
  opacity:0;
}
.rdo-float[data-playing="true"] .rdo-float__ring{
  opacity:1;animation:rdo-ring 1.8s ease-out infinite;
}
@keyframes rdo-ring{
  0%{transform:scale(1);opacity:.9}
  70%{transform:scale(1.4);opacity:0}
  100%{transform:scale(1.4);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .rdo-float[data-playing="true"] .rdo-float__ring{animation:none;opacity:.85}
  .rdo-float__min,.rdo-float__icon{transition:none}
  .rdo-float__min:hover,.rdo-float__icon:hover{transform:none}
}

/* Alternância. Especificidade (0,2,0): ganha as regras de largura de
   .rdo-float (0,1,0) sem depender da ordem no ficheiro. */
.rdo-float[data-minimized="true"]{width:56px;height:56px;filter:none}
.rdo-float[data-minimized="true"] .rdo-player,
.rdo-float[data-minimized="true"] .rdo-float__min{display:none}
.rdo-float[data-minimized="true"] .rdo-float__icon{display:grid}

/* ---- Ecrãs baixos: landscape de telemóvel ----
   Aqui o que aperta é a altura, não a largura, por isso o breakpoint dos 600px
   não chega. */
@media (max-height:450px){
  .rdo-float .rdo-eq{display:none}
  .rdo-float .rdo-player{padding-top:10px;padding-bottom:10px}
}
/* Com largura suficiente, alargar o card para lá dos 420px da container query
   evita que os controlos passem para uma segunda linha — o que duplicava a
   altura. Fica fora do modo barra para não entrar em conflito com left/right:0. */
@media (min-width:601px) and (max-height:450px){
  /* 500px é o mínimo para os controlos caberem na mesma linha que o logo e o
     bloco principal: 36 (padding) + 56 (logo) + 16 + 150 (flex-basis do main)
     + 16 + 194 (controlos) = 468. Aos 460px faltavam 8px e a linha partia na
     mesma, o que anulava o ganho de altura. */
  .rdo-float{width:min(500px,calc(100vw - 32px))}
}

/* ---- Barra de progresso do PJAX ---- */
.rdo-pjax-bar{
  position:fixed;top:0;left:0;height:3px;width:0;opacity:0;z-index:1000000;
  background:var(--rdo-accent,#e11d48);
  box-shadow:0 0 8px rgba(0,0,0,.3);
  transition:width .3s ease, opacity .3s ease;pointer-events:none;
}

/* Estados via atributo data-playing (sincroniza múltiplas UIs) */
.rdo-player[data-playing="true"] .rdo-ico-play{display:none}
.rdo-player[data-playing="true"] .rdo-ico-pause{display:block}
.rdo-player[data-playing="true"] .rdo-eq i{animation:rdo-bar .9s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .rdo-player[data-playing="true"] .rdo-eq i{animation:none}
}