/* ================= 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:28px 0;   /* antes era 15px */
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:46px;
width:auto;
margin-right:10px;
}

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

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


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

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

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

.header-banner img{
max-height:80px;
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;
}

}