/* =========================================================================
   Índice de recursos da rádio — drawer lateral (radios.pro)
   Barra fininha que abre no hover, recolhe ao sair, com alfinete pra fixar.
   Escaneia [data-rp-section] presentes no DOM → mostra só o que a rádio tem.
   ========================================================================= */
.rp-side-panel{
    --rpsp-open:284px;
    --rpsp-rail:56px;
    --rpsp-bg:rgba(16,16,26,.97);
    --rpsp-surface:#1c1c2b;
    --rpsp-surface-2:#25253a;
    --rpsp-border:rgba(255,255,255,.09);
    --rpsp-text:#eceef6;
    --rpsp-muted:#8b90a6;
    --rpsp-faint:#565b73;
    --rpsp-accent:#5b8cff;
    --rpsp-grad:linear-gradient(135deg,#4f8bff,#7c3aed);
    --rpsp-ok:#38d29e;

    position:fixed;
    left:0;
    top:50%;
    transform:translateY(-50%);
    z-index:1200;
    max-height:min(82vh,640px);
    display:flex;
    font-family:inherit;
}
.rp-side-panel[hidden]{display:none}

.rp-side-panel__inner{
    width:var(--rpsp-rail);
    max-height:inherit;
    display:flex;
    flex-direction:column;
    background:var(--rpsp-bg);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    border:1px solid var(--rpsp-border);
    border-left:0;
    border-radius:0 16px 16px 0;
    box-shadow:0 24px 60px -28px rgba(0,0,0,.8);
    overflow:hidden;
    transition:width .24s cubic-bezier(.4,0,.2,1);
}
.rp-side-panel:hover .rp-side-panel__inner,
.rp-side-panel:focus-within .rp-side-panel__inner,
.rp-side-panel.is-pinned .rp-side-panel__inner{
    width:var(--rpsp-open);
    box-shadow:26px 0 70px -30px rgba(0,0,0,.85);
}

/* topo — o ícone da marca fica sempre na mesma posição (centrado no trilho
   recolhido); título e alfinete revelam por opacidade/largura, nunca por
   troca abrupta de layout (justify-content, padding), pra não "pular". */
.rp-side-panel__top{
    display:flex;align-items:center;
    padding:13px 12px;min-height:52px;
    border-bottom:1px solid var(--rpsp-border);
}
.rp-side-panel__brand{
    width:32px;height:32px;flex:none;border-radius:9px;background:var(--rpsp-grad);
    display:grid;place-items:center;color:#fff;font-size:14px;
}
.rp-side-panel__title{
    flex:none;min-width:0;font-weight:700;font-size:13.5px;color:var(--rpsp-text);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em;
    max-width:0;opacity:0;margin-left:0;
    transition:max-width .22s ease,opacity .16s ease,margin-left .22s ease;
}
.rp-side-panel__pin{
    flex:none;width:30px;height:30px;border-radius:8px;cursor:pointer;
    border:1px solid var(--rpsp-border);background:var(--rpsp-surface);color:var(--rpsp-muted);
    display:grid;place-items:center;font-size:12px;
    max-width:0;opacity:0;margin-left:0;overflow:hidden;pointer-events:none;
    transition:max-width .22s ease,opacity .16s ease,margin-left .22s ease,color .15s,background .15s,border-color .15s,transform .15s;
}
.rp-side-panel:hover .rp-side-panel__title,
.rp-side-panel:focus-within .rp-side-panel__title,
.rp-side-panel.is-pinned .rp-side-panel__title{
    max-width:160px;opacity:1;margin-left:10px;
}
.rp-side-panel:hover .rp-side-panel__pin,
.rp-side-panel:focus-within .rp-side-panel__pin,
.rp-side-panel.is-pinned .rp-side-panel__pin{
    max-width:30px;opacity:1;margin-left:8px;pointer-events:auto;
}
.rp-side-panel__pin:hover{color:var(--rpsp-text);background:var(--rpsp-surface-2)}
.rp-side-panel__pin[aria-pressed="true"]{color:#fff;background:var(--rpsp-grad);border-color:transparent;transform:rotate(-30deg)}
.rp-side-panel__pin:focus-visible{outline:2px solid var(--rpsp-accent);outline-offset:2px}

/* nav */
.rp-side-panel__nav{
    flex:1;overflow-y:auto;overflow-x:hidden;
    padding:8px;display:flex;flex-direction:column;gap:4px;
}
.rp-side-panel__nav::-webkit-scrollbar{width:6px}
.rp-side-panel__nav::-webkit-scrollbar-thumb{background:var(--rpsp-surface-2);border-radius:4px}

.rp-nav-group{margin-top:6px}
.rp-nav-group:first-child{margin-top:0}
/* Divisor de categoria: some/aparece com altura+opacidade animadas (não um
   toggle instantâneo), pra não empurrar os itens abaixo de supetão. */
.rp-nav-group__title{
    font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--rpsp-faint);
    font-weight:700;white-space:nowrap;overflow:hidden;
    max-height:0;opacity:0;padding:0 10px;
    transition:max-height .22s ease,opacity .16s ease,padding .22s ease;
}
.rp-side-panel:hover .rp-nav-group__title,
.rp-side-panel:focus-within .rp-nav-group__title,
.rp-side-panel.is-pinned .rp-nav-group__title{
    max-height:26px;opacity:1;padding:6px 10px 5px;
}

/* Item do menu: o ícone fica numa coluna de largura fixa (mesma posição
   sempre, recolhido ou expandido) — só o rótulo desliza/aparece ao lado. */
.rp-nav-item{
    display:flex;align-items:center;width:100%;text-align:left;
    background:transparent;border:0;color:var(--rpsp-text);font:inherit;font-size:13.5px;
    /* padding-left:9px centra o ícone de 22px dentro dos 40px de largura útil
       do trilho recolhido (56px do trilho − 8px de padding do nav em cada
       lado = 40px). Não mexer sem refazer essa conta. */
    padding:9px 10px 9px 9px;border-radius:9px;cursor:pointer;position:relative;
    transition:background .14s,color .14s;
}
.rp-nav-item__ic{
    width:22px;height:22px;flex:none;display:grid;place-items:center;
    color:var(--rpsp-muted);font-size:15px;
}
.rp-nav-item__label{
    flex:none;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    max-width:0;opacity:0;margin-left:0;
    transition:max-width .22s ease,opacity .16s ease,margin-left .22s ease;
}
.rp-side-panel:hover .rp-nav-item__label,
.rp-side-panel:focus-within .rp-nav-item__label,
.rp-side-panel.is-pinned .rp-nav-item__label{
    max-width:180px;opacity:1;margin-left:12px;
}
.rp-nav-item:hover{background:var(--rpsp-surface)}
.rp-nav-item:focus-visible{outline:2px solid var(--rpsp-accent);outline-offset:-2px}
.rp-nav-item.is-active{background:var(--rpsp-surface-2)}
.rp-nav-item.is-active::before{
    content:"";position:absolute;left:-8px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--rpsp-grad);
}
.rp-nav-item.is-active .rp-nav-item__ic{color:var(--rpsp-accent)}

@media (prefers-reduced-motion:reduce){
    .rp-side-panel,.rp-side-panel__inner,.rp-nav-item__label,.rp-nav-group__title,
    .rp-side-panel__title,.rp-side-panel__pin{transition:none}
}

/* ---- Seta / mobile ----
   No lugar de um botão flutuante solto na tela, uma abinha pendurada logo
   abaixo do header do site (usa --rp-header-height, definida globalmente em
   home.css) — sempre no mesmo lugar previsível, não sobrepõe conteúdo. */
.rp-side-panel-fab{
    position:fixed;
    top:var(--rp-header-height, 56px);
    left:12px;
    z-index:1200;
    width:46px;height:22px;border:0;cursor:pointer;
    border-radius:0 0 12px 12px;
    background:linear-gradient(135deg,#4f8bff,#7c3aed);color:#fff;font-size:12px;
    display:none;place-items:center;
    box-shadow:0 8px 18px -9px rgba(79,139,255,.7);
    transition:top .2s ease;
}
/* Quando a barra do mini-player está tocando, ela também se posiciona logo
   abaixo do header (mesma referência --rp-header-height) — sem isso a seta
   cairia por cima dela. `--radio-global-player-offset` é a altura REAL da
   barra, medida e mantida atualizada pelo próprio radio.php; empurra a seta
   pra baixo dela em vez de adivinhar um valor fixo. */
body.has-radio-global-player .rp-side-panel-fab{
    top:calc(var(--rp-header-height, 56px) + var(--radio-global-player-offset, 60px));
}
.rp-side-panel-fab i{transition:transform .22s ease}
.rp-side-panel-fab[aria-expanded="true"] i{transform:rotate(180deg)}
.rp-side-panel-fab[hidden]{display:none !important}
.rp-side-panel-fab:focus-visible{outline:2px solid #fff;outline-offset:2px}

@media (prefers-reduced-motion:reduce){
    .rp-side-panel-fab{transition:none}
    .rp-side-panel-fab i{transition:none}
}

.rp-side-panel__backdrop{
    position:fixed;inset:0;z-index:1190;background:rgba(6,6,12,.55);
    opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.rp-side-panel__backdrop.is-visible{opacity:1;pointer-events:auto}

@media (max-width:900px){
    .rp-side-panel{
        /* Desce logo abaixo da abinha (que agora fica na lateral esquerda,
           colada no header — não mais centralizada). */
        top:calc(var(--rp-header-height, 56px) + 30px);
        bottom:auto;left:14px;right:14px;
        justify-content:flex-start;
        max-height:min(60vh,480px);
        opacity:0;pointer-events:none;transform:translateY(-10px);
        transition:opacity .2s ease,transform .2s ease,top .2s ease;
    }
    /* Mesma lógica da seta: com o mini-player tocando, abre abaixo dele.
       +30px é o MESMO espaçamento do estado normal (linha acima) — precisa
       ser igual, não um valor menor, senão o painel invade a seta (que tem
       22px de altura); já apareceu esse bug uma vez por usar +12px aqui. */
    body.has-radio-global-player .rp-side-panel{
        top:calc(var(--rp-header-height, 56px) + var(--radio-global-player-offset, 60px) + 30px);
    }
    .rp-side-panel__inner{
        width:auto !important;max-width:320px;border-left:1px solid var(--rpsp-border);
        border-radius:16px;
    }
    .rp-side-panel.is-mobile-open{opacity:1;pointer-events:auto;transform:translateY(0)}
    /* Sem hover no touch: força o estado "expandido" sempre — textos e
       divisores sempre visíveis, nada de recolher por ícone. */
    .rp-nav-item{padding:9px 10px}
    .rp-nav-item__label{max-width:none !important;opacity:1 !important;margin-left:12px !important}
    .rp-nav-group__title{max-height:none !important;opacity:1 !important;padding:6px 10px 5px !important}
    .rp-side-panel__title{max-width:none !important;opacity:1 !important;margin-left:10px !important}
    .rp-side-panel__pin{display:none}
    .rp-side-panel-fab{display:grid}
}