/* ============================================================
   LogicaMaster style-v2.css
   ============================================================ */

/* ── PLAYER BAR TOPO ── */
:root { --lm-ph: 66px; }
#lm-bar {
    position: fixed; top:0; left:0; right:0;
    height: var(--lm-ph); z-index: 1060;
    display: flex; align-items: center;
    justify-content: center;          /* CENTRALIZA TUDO */
    padding: 0 18px; gap: 0;
    box-shadow: 0 2px 16px rgba(0,0,0,.22);
}

/* Wrapper interno centralizado com largura máxima */
.lm-bar-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 900px;
    width: 100%;
    justify-content: center;
}

.lm-live-badge {
    display: flex; align-items: center; gap: 5px;
    background: #ef4444; color: #fff;
    font-size: .62rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    padding: 4px 11px; border-radius: 100px; flex-shrink: 0;
}
.lm-live-dot {
    width: 6px; height: 6px; border-radius: 50%; background: #fff;
    animation: lmDot 1.4s ease-in-out infinite;
}
@keyframes lmDot { 0%,100%{opacity:1} 50%{opacity:.3} }

.lm-play-btn-top {
    width: 46px; height: 46px; border-radius: 50%;
    background: #fff; border: none;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; cursor: pointer;
    transition: all .2s;
    box-shadow: 0 2px 12px rgba(0,0,0,.2);
}
.lm-play-btn-top:hover { transform: scale(1.08); }
.lm-play-btn-top svg { width: 18px; height: 18px; }

.lm-station-name {
    font-size: .84rem; font-weight: 600; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 220px;
}

.lm-station-sub {
    font-size: .68rem; color: rgba(255,255,255,.55);
    white-space: nowrap;
}

.lm-station-info { display: flex; flex-direction: column; line-height: 1.3; }

.lm-vol-wrap {
    display: flex; align-items: center; gap: 8px;
    color: rgba(255,255,255,.7); flex-shrink: 0;
}
.lm-vol-wrap svg { width: 15px; height: 15px; flex-shrink: 0; }
.lm-vol-wrap input { width: 80px; accent-color: #fff; cursor: pointer; }

.lm-bar-divider {
    width: 1px; height: 28px;
    background: rgba(255,255,255,.18); flex-shrink: 0;
}

/* Quando player = top → ocultar player original + ajustar sticky */
body:has(#lm-bar) { padding-top: var(--lm-ph) !important; }
body:has(#lm-bar) #mobile-player   { display: none !important; }
body:has(#lm-bar) .main-header     { position: relative !important; }
/* main-navbar: sem sticky — comportamento original do header.css preservado */

/* Banner do header: aparece quando cadastrado (gif padrão removido do PHP) */

/* Banner carrossel gerenciado pelo banner-carrousel.css */

/* ── PROGRAMAÇÃO: live card 3 colunas ── */
.live-show-card {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important; gap: 18px !important;
    padding: 20px 24px !important; border-radius: 16px !important;
    margin-bottom: 22px !important; position: relative; overflow: hidden;
}
.live-show-card::after {
    content: ''; position: absolute; right:-20px; top:-20px;
    width:100px; height:100px; border-radius:50%;
    background: rgba(255,255,255,.07);
}
.lm-next-block { text-align: right; flex-shrink: 0; }
.lm-next-label { font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.52);margin-bottom:4px; }
.lm-next-title { font-size:.9rem;font-weight:700;color:#fff; }
.lm-next-time  { font-size:.73rem;color:rgba(255,255,255,.65);margin-top:2px; }
.program-list .card, .top-songs .card {
    border-radius:14px!important; border:1px solid #e2e8f0!important;
    box-shadow:0 2px 8px rgba(0,0,0,.05)!important; overflow:hidden;
}
.card-header { font-size:.8rem!important;font-weight:700!important;background:#f8fafc!important;border-bottom:1px solid #e2e8f0!important; }

/* ── VÍDEOS: layout coluna ── */
.video-layout { display:flex!important; flex-direction:column!important; gap:0!important; }
.video-grid {
    flex:none!important; width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr))!important;
    gap:20px!important;
}
.video-card { border-radius:14px!important; transition:all .2s!important; }
.video-card:hover { transform:translateY(-4px)!important; box-shadow:0 12px 32px rgba(0,0,0,.12)!important; }

/* ── ENQUETES ── */
.poll-component { display:block!important; }

/* ── MURAL ── */
#messageForm { display:block!important; }
#messageForm.hidden { display:none!important; }

/* ── RESPONSIVO ── */
@media(max-width:900px){
    .lm-vol-wrap { display:none!important; }
    .lm-bar-divider { display:none!important; }
    .lm-station-info .lm-station-sub { display:none; }
}
@media(max-width:768px){
    :root { --lm-ph: 56px; }
    .live-show-card { grid-template-columns:auto 1fr!important; }
    .lm-next-block  { display:none!important; }
    .video-grid { grid-template-columns:1fr 1fr!important; }
}
@media(max-width:480px){
    .video-grid { grid-template-columns:1fr!important; }
}
/* ================= TOPBAR ================= */

/* ================= TOPBAR ================= */

.topbar{
background:#1f3c88;
color:#fff;
font-size:15px; /* antes 14 */
}

.topbar .container{
padding:10px 0; /* aumenta altura */
}

.topbar span{
margin-right:25px;
opacity:.95;
font-weight:500;
}

.topbar i{
margin-right:6px;
}

/* redes sociais */

.topbar a{
color:#fff;
margin-left:14px;
font-size:16px; /* ícones maiores */
transition:.25s;
}

.topbar a:hover{
opacity:.75;
transform:scale(1.1);
}

.topbar-right a:hover{
opacity:.7;
}


/* ================= HEADER ================= */

.main-header{
background:none;
padding:56px 0;
color:#fff;
box-shadow:0 6px 20px rgba(0,0,0,0.15);
}

.header-grid{
display:grid;
grid-template-columns: auto 1fr auto;
align-items:center;
gap:40px; /* antes 30px */
}


/* ================= LOGO ================= */

.logo-box{
display:flex;
align-items:center;
text-decoration:none;
color:#fff;
}

.logo-icon img{
height:80px;
width:auto;
margin-right:10px;
}

.logo-text strong{
display:block;
font-size:26px;
}

.logo-text span{
font-size:15px;
opacity:.85;
}


/* ================= BANNER ================= */

/* ================= BANNER ================= */

.header-banner{
display:flex;
justify-content:center;
align-items:center;
}

.header-banner img{
max-height:160px;
width:auto;
object-fit:contain;
margin:auto;
display:block;
}


/* ================= PLAYER ================= */

.header-player{

display:flex;
align-items:center;
gap:14px;

background:rgba(255,255,255,0.12);
border:1px solid rgba(255,255,255,0.25);

border-radius:12px;

padding:12px 18px;

backdrop-filter:blur(6px);

box-shadow:0 4px 15px rgba(0,0,0,0.2);

}


/* ================= PLAY BUTTON ================= */

.play-btn{

width:38px;
height:38px;

border-radius:50%;
border:none;

background:#ffffff;
color:#2a60c9;

font-size:20px;

display:flex;
align-items:center;
justify-content:center;

cursor:pointer;

transition:.25s;
}

.play-btn:hover{
transform:scale(1.08);
background:#e9f0ff;
}


/* ================= PLAYER INFO ================= */

.player-info{
display:flex;
flex-direction:column;
gap:2px;
}


/* badge ao vivo */

.live-badge{

background:#ff3b3b;
color:#fff;

font-size:10px;
font-weight:700;

padding:2px 6px;

border-radius:4px;

width:max-content;

letter-spacing:.4px;

}


/* nome rádio */

.radio-name{
font-size:13px;
font-weight:600;
color:#fff;
}


/* ================= VOLUME ================= */

.volume-box{

display:flex;
align-items:center;
gap:6px;

font-size:12px;
color:#e8f0ff;

}

.volume-box i{
font-size:16px;
}

/* slider */

.volume-box input{

width:80px;
height:4px;

appearance:none;

background: none;
border-radius:4px;

outline:none;

cursor:pointer;

}

/* thumb */

.volume-box input::-webkit-slider-thumb{

appearance:none;

width:12px;
height:12px;

border-radius:50%;

background:#ffffff;

cursor:pointer;

box-shadow:0 0 4px rgba(0,0,0,0.3);

}

#volDisplay{
font-size:11px;
opacity:.9;
}


/* ================= NAVBAR ================= */

.main-navbar{
background: none;
}

.main-navbar .nav-link{
color:#fff !important;
font-weight:500;
padding:14px 16px !important;
transition:.3s;
}

.main-navbar .nav-link:hover{
background:rgba(255,255,255,0.15);
border-radius:6px;
}

.main-navbar .nav-link.active{
background:rgba(255,255,255,0.2);
border-radius:6px;
}


/* ================= RESPONSIVIDADE ================= */


/* ===== DESKTOP MÉDIO ===== */

@media (max-width:1200px){

.header-banner img{
max-height:60px;
max-width:420px;
}

.volume-box input{
width:80px;
}

}


/* ===== TABLET ===== */

@media (max-width:992px){

.header-grid{
grid-template-columns:1fr;
gap:20px;
text-align:center;
}

/* logo centralizada */

.logo-box{
justify-content:center;
}

/* banner centralizado */

.header-banner{
order:2;
display:flex;
justify-content:center;
}

.header-banner img{
max-width:80%;
max-height:65px;
}

/* player abaixo */

.header-player{
order:3;
justify-content:center;
margin:auto;
max-width:420px;
}

/* navbar */

.main-navbar .navbar-collapse{
background:#2a60c9;
padding:10px;
border-radius:8px;
margin-top:10px;
}

.main-navbar .nav-link{
padding:10px !important;
}

}


/* ===== MOBILE ===== */

@media (max-width:768px){

.topbar-inner{
flex-direction:column;
gap:6px;
text-align:center;
}

.topbar-left span{
margin-right:8px;
font-size:13px;
}

/* estrutura */

.header-grid{
grid-template-columns:1fr;
gap:18px;
}

/* logo */

.logo-box{
justify-content:center;
}

.logo-icon img{
height:42px;
}

.logo-text strong{
font-size:17px;
}

.logo-text span{
font-size:12px;
}

/* banner */

.header-banner{
order:2;
display:flex;
justify-content:center;
}

.header-banner img{
max-width:90%;
max-height:60px;
}

/* player */

.header-player{
order:3;
justify-content:center;
padding:10px 16px;
gap:12px;
max-width:95%;
margin:auto;
}

.radio-name{
font-size:13px;
}

/* volume */

.volume-box input{
width:90px;
}

}


/* ===== MOBILE PEQUENO ===== */

@media (max-width:480px){

.header-player{
flex-wrap:wrap;
justify-content:center;
gap:10px;
padding:10px 14px;
}

.player-info{
align-items:center;
text-align:center;
}

.volume-box{
justify-content:center;
}

.play-btn{
width:38px;
height:38px;
font-size:18px;
}

.volume-box input{
width:110px;
}

/* banner proporcional */

.header-banner img{
max-width:95%;
max-height:55px;
}

}