/* =========================================================
ROOT COLORS
========================================================= */

:root{
--hz-blue:#00a8d0;
--hz-pink:#ce0186;
--hz-bg:#121212;
--hz-panel:#0e1117;
--hz-text:#ffffff;
--hz-muted:#9aa3ad;
}

/* =========================================================
BASE
========================================================= */

body{
margin:0;
font-family:Arial,Helvetica,sans-serif;
background:var(--hz-bg);
color:var(--hz-text);
}

/* =========================================================
LAYOUT
========================================================= */

.layout{
display:flex;
min-height:100vh;
}

#main-content{
transition:opacity .45s ease;
}
/* =========================================================
SIDEBAR
========================================================= */

.sidebar{
width:260px;
background:#07090d;
padding:10px;
border-right:2px solid #1b1b1b;
}

.logo{
text-align:center;
margin-bottom:25px;
}

.logo img{
max-width:260px;
}

/* NAV */

.sidebar nav{
margin-top:30px;
}

.sidebar nav a{
display:block;
padding:12px 14px;
margin-bottom:8px;
color:var(--hz-muted);
text-decoration:none;
border-radius:6px;
transition:0.2s;
}

.sidebar nav a:hover{
border-left:2px solid var(--hz-blue);
color:var(--hz-blue);
background:#000000;
}

.sidebar nav a.active{
border-left:2px solid var(--hz-pink);
color:var(--hz-blue);
font-weight:600;
}

/* =========================================================
CONTENT
========================================================= */

.content{
flex:1;
padding:40px;
margin-bottom:30px;
}

/* HEADINGS */

.section-title{
color:var(--hz-blue);
margin-bottom:20px;
letter-spacing:1px;
}

.sub-title{
margin-top:35px;
margin-bottom:15px;
color:var(--hz-pink);
}

/* =========================================================
NOW PLAYING PANEL
========================================================= */

.np-panel{
background:#0b0b0b;
padding:25px;
border-radius:10px;
border-left:4px solid var(--hz-blue);
box-shadow:0 0 15px rgba(0,0,0,0.6);
margin-bottom:30px;
}


/* =========================================================
NOW PLAYING
========================================================= */

.now-playing-card{
display:flex;
gap:20px;
background:#0b0b0b;
border-radius:4px;
}

.np-art img{
width:160px;
height:160px;
object-fit:cover;
border-radius:6px;
}

.np-meta{
display:flex;
flex-direction:column;
justify-content:center;
}

.np-meta h3{
margin:0 0 10px 0;
font-size:22px;
color:#fff;
}

.np-meta p{
margin:0 0 8px 0;
color:var(--hz-muted);
}

.np-meta span{
color:var(--hz-blue);
font-size:14px;
}
.request-messages{
margin-top:10px;
font-size:13px;
color:var(--hz-muted);
}

.request-msg{
padding:4px 0;
}

.request-msg i{
margin-right:6px;
color:var(--hz-blue);
}

.req-text{
color:var(--hz-muted);
}

/* =========================================================
UPCOMING SONGS
========================================================= */

.upcoming-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
margin-top:20px;
}

.song-card{
display:flex;
gap:12px;
background:#0b0b0b;
transition:0.2s;
color:var(--hz-muted);
align-items:center;
}

.song-card img{
width:90px;
height:90px;
object-fit:cover;
border-radius:4px;
}
/* =========================================================
BLOCKS
========================================================= */
:root{
--scs-template-fingerprint:#534353;
}
.welcome{
display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
margin-top:30px;
}

.welcome-full{
width:100%;
margin-bottom:30px;
gap:30px;
margin-top:30px;

}

.welcome-box{
background:#121b21;
padding:25px;
border-radius:3px;
border:1px solid #111;
}

.welcome-box h4{
margin-top:0;
color:var(--hz-blue);
}

.welcome-box p{
color:var(--hz-muted);
}

.recently-list{
list-style:none;
padding:0;
margin:0;
}

.recently-list{
list-style:none;
padding:0;
margin:0;
}

.recently-list li{
padding:8px 0;
font-size:14px;
color:var(--hz-muted);
border-bottom:1px solid #111;
display:flex;
align-items:center;
gap:8px;
transition:0.2s;
}

.recently-list li:last-child{
border-bottom:none;
}

.recently-list li:hover{
color:#ffffff;
padding-left:4px;
}

.recently-list li i{
color:#77004d;
font-size:12px;
}

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

.player-bar{
position:fixed;
bottom:0;
left:0;
right:0;
background:#000;
border-top:2px solid var(--hz-blue);
padding:6px 15px;
display:flex;
justify-content:space-between;
align-items:center;
z-index:9999;
}

.player-left{
display:flex;
align-items:center;
gap:15px;
}

.station-meta{
display:flex;
align-items:center;
gap:12px;
}

.player-logo{
width:170px;
}

.station-meta strong{
display:block;
font-size:14px;
}

.station-meta span{
font-size:12px;
color:var(--hz-blue);
}

/* RIGHT SIDE */

.player-right{
display:flex;
align-items:center;
gap:15px;
}

.live{
background:#b00020;
padding:4px 8px;
border-radius:4px;
font-size:12px;
font-weight:bold;
}

.play-btn{
width:40px;
height:40px;
border-radius:50%;
border:none;
background:var(--hz-blue);
color:#000;
font-size:16px;
cursor:pointer;
}

#volume-slider{
width:120px;
}

.footer{
background:#07090d;
border-top:1px solid #111;
margin-top:40px;
padding:18px 30px;
color:var(--hz-muted);
font-size:14px;
}

.footer-inner{
display:flex;
justify-content:space-between;
align-items:center;
max-width:1400px;
margin:0 auto;
}

.footer a{
color:var(--hz-blue);
text-decoration:none;
font-weight:600;
}

.footer a:hover{
text-decoration:underline;
}

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

@media (max-width:1024px){

.layout{
flex-direction:column;
}

.sidebar{
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
padding:15px 20px;
border-right:none;
border-bottom:2px solid #1b1b1b;
}

.logo img{
max-width:160px;
}

.sidebar nav{
display:flex;
gap:10px;
margin-top:0;
flex-wrap:wrap;
}

.sidebar nav a{
margin-bottom:0;
padding:8px 10px;
font-size:14px;
}

.content{
padding:25px;
}

.upcoming-grid{
grid-template-columns:repeat(2,1fr);
}

.welcome{
grid-template-columns:1fr;
}

}
/* =========================================================
REQUEST SEARCH
========================================================= */

#live-search{
width:100%;
padding:12px 14px;
border-radius:6px;
border:1px solid #1c1c1c;
background:#0f151a;
color:#ffffff;
font-size:14px;
transition:0.2s;
}

#live-search:focus{
outline:none;
border-color:var(--hz-blue);
box-shadow:0 0 0 2px rgba(0,168,208,0.15);
}

/* =========================================================
REQUEST SONG CARD
========================================================= */

.song-card{
display:flex;
align-items:center;
gap:14px;
background:#0b0b0b;
padding:14px;
border-radius:6px;
border:1px solid #0f0f0f;
transition:0.2s;
}

.song-card:hover{
background:#0e1218;
border-color:#1c2530;
}

.song-card img{
width:70px;
height:70px;
object-fit:cover;
border-radius:6px;
}

.song-meta{
flex:1;
display:flex;
flex-direction:column;
justify-content:center;
}

.song-meta strong{
color:#ffffff;
font-size:14px;
}

.song-meta p{
margin:3px 0;
font-size:13px;
color:var(--hz-muted);
}

.song-meta span{
font-size:12px;
color:var(--hz-blue);
}


/* =========================================================
REQUEST BUTTON
========================================================= */

.request-btn{
margin-left:auto;
padding:7px 12px;
border:solid 1px var(--hz-pink);
border-radius:5px;
font-size:12px;
font-weight:600;
cursor:pointer;
display:flex;
align-items:center;
gap:6px;
background:#000;
color:#fff;
transition:0.2s;
}

.request-btn:hover{
transform:translateY(-1px);
box-shadow:0 3px 10px rgba(0,168,208,0.35);
}

/* =========================================================
PAGINATION
========================================================= */

.pagination{
margin-top:30px;
display:flex;
justify-content:center;
align-items:center;
gap:8px;
flex-wrap:wrap;
}

.pagination a,
.pagination span{
padding:6px 10px;
border-radius:4px;
font-size:13px;
text-decoration:none;
border:1px solid #1c1c1c;
background:#0f151a;
color:var(--hz-muted);
}

.pagination a:hover{
background:var(--hz-blue);
color:#000;
}

.pagination span.active{
background:var(--hz-pink);
color:#fff;
border-color:var(--hz-pink);
font-weight:600;
}

.pagination .dots{
border:none;
background:transparent;
color:#666;
}

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

@media (max-width:700px){

.song-card{
flex-direction:column;
align-items:flex-start;
}

.song-card img{
width:70px;
height:70px;
}

.request-btn{
width:100%;
justify-content:center;
margin-top:10px;
}

.pagination{
flex-direction:column;
gap:8px;
}

}

/* =========================================================
REQUEST MODAL
========================================================= */

.modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.85);
display:none;
align-items:center;
justify-content:center;
z-index:99999;
}

.modal.active{
display:flex;
}

.modal-box{
background:var(--hz-panel);
border:1px solid #14181f;
border-top:3px solid var(--hz-blue);
border-radius:8px;
padding:30px;
width:100%;
max-width:420px;
box-shadow:0 0 25px rgba(0,0,0,0.6);
animation:modalFade .2s ease;
}

.modal-box h3{
margin-top:0;
margin-bottom:20px;
font-size:18px;
color:var(--hz-blue);
}

.modal-box input,
.modal-box textarea{
width:100%;
padding:12px 14px;
margin-bottom:12px;
background:#0f151a;
border:1px solid #1c1c1c;
border-radius:6px;
color:#fff;
font-size:14px;
transition:0.2s;
}

.modal-box textarea{
resize:none;
min-height:90px;
}

.modal-box input:focus,
.modal-box textarea:focus{
outline:none;
border-color:var(--hz-blue);
box-shadow:0 0 0 2px rgba(0,168,208,0.15);
}

#send-request{
width:100%;
padding:11px;
margin-top:5px;
border:none;
border-radius:6px;
font-weight:600;
cursor:pointer;
background:linear-gradient(135deg,var(--hz-blue),var(--hz-pink));
color:#fff;
transition:0.2s;
}

#send-request:hover{
transform:translateY(-1px);
box-shadow:0 3px 10px rgba(0,168,208,0.35);
}

#close-modal{
width:100%;
margin-top:8px;
padding:10px;
background:#0f151a;
border:1px solid #1c1c1c;
border-radius:6px;
color:var(--hz-muted);
cursor:pointer;
transition:0.2s;
}

#close-modal:hover{
color:#fff;
border-color:var(--hz-pink);
}
.request-status{
margin-top:10px;
padding:10px;
border-radius:6px;
font-size:14px;
display:none;
}

.request-status.success{
background:#b6eacd;
border-left:solid 3px #03a857;
color:#000;
display:block;
}

.request-status.error{
background:#fee3e1;
border-left:solid 3px #d94034;
color:#000;
display:block;
}
@keyframes modalFade{
from{
opacity:0;
transform:scale(.95);
}
to{
opacity:1;
transform:scale(1);
}
}
.schedule-section{
background:rgba(0,0,0,0.28);
overflow-x:auto;
}

.schedule{
display:grid;

grid-template-columns: repeat(7, 1fr);

grid-auto-rows: 40px;

gap:6px;

margin-top:20px;
}

.day{
text-align:center;
font-weight:700;
padding:14px 0;

color:#fff;
letter-spacing:1px;
text-transform:uppercase;
font-size:14px;

border-radius:3px;
}

.show{
padding:10px;
border-radius:3px;
font-size:14px;
}

.show strong{
display:block;
font-weight:600;
}

.show span{
font-size:12px;
opacity:.8;
}

.morning{background:#eda54b;color:#000;}
.news{background:#1c7ed6;color:#fff;}
.talk{background:#ea8685;color:#000;}
.drive{background:#3576d4;color:#fff;}
.house{background:#a5a6df;color:#000;}
.party{background:#8e6be8;color:#fff;}
.auto{background:#4f6b4f;color:#fff;}
.weekend{background:#95d5d6;color:#000;}
.default{background:#f1f3f5;color:#000;}

.today-shows{
display:none;
margin-top:20px;
}

.today-show{
padding:16px;
margin-bottom:12px;
background:rgba(255,255,255,0.08);
border-radius:8px;
}

.today-show strong{
display:block;
font-size:18px;
margin-bottom:4px;
color:#ffffff;
}

.today-show .time{
font-size:13px;
opacity:.8;
color:#ffffff;

}

.today-show p{
margin-top:6px;
font-size:13px;
opacity:.85;
color:#ffffff;

}


/* MOBILE SWITCH */

@media(max-width:800px){

.schedule{
display:none;
}

.today-shows{
display:block;
}

}

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

@media (max-width:700px){

.content{
padding:20px 15px;
}

.now-playing-card{
flex-direction:column;
align-items:center;
text-align:center;
}

.np-art img{
width:120px;
height:120px;
}

.np-meta h3{
font-size:18px;
}

.np-meta p{
font-size:14px;
}

.upcoming-grid{
grid-template-columns:1fr;
}

.song-card img{
width:70px;
height:70px;
}

.welcome{
grid-template-columns:1fr;
gap:20px;
}

.welcome-box{
padding:20px;
}

.sidebar{
flex-direction:column;
align-items:flex-start;
}

.sidebar nav{
width:100%;
display:grid;
grid-template-columns:repeat(2,1fr);
gap:8px;
margin-top:15px;
}

.sidebar nav a{
text-align:center;
}

.player-bar{
flex-direction:column;
align-items:flex-start;
gap:8px;
padding:10px 12px;
}

.player-left{
gap:10px;
}

.player-logo{
width:120px;
}

.player-right{
width:100%;
justify-content:space-between;
}

#volume-slider{
width:80px;
}

.footer-inner{
flex-direction:column;
gap:10px;
text-align:center;
}

}