/* overlays.css
   -----------------------------------------------------------------
   CORREÇÃO DE BUG: os painéis (Estações, Histórico) e modais (Letras,
   Compartilhar, Vídeo) não possuíam NENHUMA regra de exibição/ocultação
   no CSS original — por isso não abriam/fechavam corretamente. Este
   arquivo define o comportamento completo desses componentes.
   ----------------------------------------------------------------- */

/* Liga as cores escolhidas no painel (Aparência) ao sistema de tema
   existente (--accent), usado nos botões do player. O JavaScript
   (ColorThief) continua podendo sobrescrever essa cor dinamicamente
   com base na capa de cada estação. */
:root{ --accent: var(--color-primary, #e50914); }
body{ background-color: var(--color-secondary, #111111); }

/* ---------- Painéis laterais (offcanvas) ---------- */
.offcanvas{
    position:fixed; top:0; right:0; height:100dvh; width:min(380px,88vw);
    background:rgba(15,17,21,.97); backdrop-filter:blur(14px);
    border-left:1px solid rgba(255,255,255,.08);
    box-shadow:-12px 0 40px rgba(0,0,0,.5);
    transform:translateX(100%); transition:transform .32s cubic-bezier(.4,0,.2,1);
    z-index:1000; padding:24px 18px calc(24px + env(safe-area-inset-bottom));
    padding-top:calc(24px + env(safe-area-inset-top));
    overflow-y:auto;
}
.offcanvas.is-active{ transform:translateX(0); }
.offcanvas-content{ display:flex; flex-direction:column; gap:10px; }

/* Fundo escurecido atrás dos painéis/modais abertos (navegadores modernos) */
body:has(.offcanvas.is-active, .modal.is-active, .modal-video.is-active, .player-modal.is-active)::before{
    content:""; position:fixed; inset:0; background:rgba(0,0,0,.55);
    z-index:900; animation:fade-in .2s ease;
}
@keyframes fade-in{ from{opacity:0} to{opacity:1} }

/* ---------- Modal padrão (Letras) ---------- */
.modal{
    position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
    padding:20px; opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:1000;
}
.modal.is-active{ opacity:1; pointer-events:auto; }
.modal-content{
    background:#181b22; border:1px solid rgba(255,255,255,.08); border-radius:16px;
    width:min(520px,100%); max-height:80vh; display:flex; flex-direction:column;
    box-shadow:0 20px 60px rgba(0,0,0,.5); transform:scale(.96); transition:transform .25s ease;
}
.modal.is-active .modal-content{ transform:scale(1); }
.modal-title{ padding:18px 20px; border-bottom:1px solid rgba(255,255,255,.08); }
.modal-title button, .modal-video>button, .player-modal-x{
    background:rgba(255,255,255,.08); border:none; color:#fff; border-radius:50%;
    width:34px; height:34px; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.modal-title button:hover, .modal-video>button:hover, .player-modal-x:hover{ background:rgba(255,255,255,.18); }
.modal-body{ padding:20px; overflow-y:auto; color:#cfd3da; line-height:1.7; }

/* ---------- Modal de vídeo (câmera/Web TV) ---------- */
.modal-video{
    position:fixed; inset:0; background:rgba(0,0,0,.92); display:flex; align-items:center;
    justify-content:center; opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:1001;
}
.modal-video.is-active{ opacity:1; pointer-events:auto; }
.modal-video>button{ position:absolute; top:20px; right:20px; z-index:2; }
.modal-body-video{ width:min(960px,92vw); aspect-ratio:16/9; }
.modal-body-video iframe{ width:100%; height:100%; border:0; border-radius:12px; }

/* ---------- Modal de compartilhamento ---------- */
.player-modal{
    position:fixed; top:50%; left:50%; transform:translate(-50%,-45%) scale(.96);
    background:#181b22; border:1px solid rgba(255,255,255,.08); border-radius:16px;
    width:min(360px,90vw); padding:28px 24px; text-align:center; opacity:0; pointer-events:none;
    transition:opacity .25s ease, transform .25s ease; z-index:1000; box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.player-modal.is-active{ opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }
.player-modal-image{ width:120px; height:120px; border-radius:14px; object-fit:cover; margin:14px auto; display:block; }
.modal-social{ display:flex; gap:12px; justify-content:center; margin-top:16px; flex-wrap:wrap; }
.modal-social a{
    width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08);
    display:flex; align-items:center; justify-content:center; color:#fff; text-decoration:none;
}
.modal-social a:hover{ background:var(--accent,var(--color-primary,#e50914)); }

/* Volume dropdown também não tinha estado de exibição definido */
.dropdown{
    position:absolute; bottom:calc(100% + 10px); right:0; background:#181b22;
    border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:14px 12px;
    opacity:0; pointer-events:none; transform:translateY(6px); transition:.2s ease; z-index:20;
    box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.player-button-volume-toggle.is-active + .dropdown,
.player-button-volume.is-active .dropdown{ opacity:1; pointer-events:auto; transform:translateY(0); }

/* -----------------------------------------------------------------
   Camada de imagem de fundo do site (configurável no painel admin)
   ----------------------------------------------------------------- */
.site-background{
    position:fixed; inset:0; z-index:-2; background-size:cover; background-position:center;
    background-repeat:no-repeat;
}
.site-background::after{
    content:""; position:absolute; inset:0; background:rgba(8,9,12,.55);
}
.app{ position:relative; z-index:1; }

/* -----------------------------------------------------------------
   Rótulos de texto dos botões — ocultos em telas pequenas e em
   modelos de player mais compactos, mantendo apenas os ícones
   (aparência mais profissional e evita quebra de layout)
   ----------------------------------------------------------------- */
@media (max-width: 720px){
    .btn-label{ display:none; }
    .player-right{ gap:6px; }
    .rk-card{ display:none; }
}

/* -----------------------------------------------------------------
   Suporte a "safe area" do iOS (notch / home indicator)
   ----------------------------------------------------------------- */
.player{ padding-bottom: env(safe-area-inset-bottom); }
.header{ padding-top: env(safe-area-inset-top); }

/* -----------------------------------------------------------------
   Correções finas por modelo de player (evita sobreposições)
   ----------------------------------------------------------------- */
body.skin-topbar .header{ padding-top: calc(74px + env(safe-area-inset-top)); }
body.skin-bottombar .main,
body.skin-modern .main{ padding-bottom: env(safe-area-inset-bottom); }

@media (max-width: 480px){
    :root{ --cover-size: 220px; --control-size: 72px; }
    body.skin-floating .player{ right:10px; left:10px; bottom:10px; max-width:none; }
}