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

*{
box-sizing:border-box;
}

body{
font-family:Arial, Helvetica, sans-serif;
margin:0;
background:
radial-gradient(circle at 50% 72%,
rgba(255,185,0,0.55) 0%,
rgba(255,200,0,0.35) 15%,
rgba(255,210,80,0.18) 30%,
rgba(255,255,255,0) 50%),

repeating-conic-gradient(
from 270deg at 50% 72%,
rgba(255,150,0,0.13) 0deg,
rgba(255,150,0,0.13) 6deg,
rgba(255,255,255,0) 6deg,
rgba(255,255,255,0) 14deg
),

#f6f6f6;

background-attachment:fixed;

color:#333;

}

img{
max-width:100%;
display:block;
}


/* ======================================================
SITE GRID LAYOUT
====================================================== */

.site-layout{
display:grid;
grid-template-columns:260px 1fr;
grid-template-rows:auto auto 1fr auto;
max-width:1200px;
margin:auto;
gap:25px;
padding:20px;
}


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

.logo-area{
grid-column:1;
grid-row:1;
}

.logo img{
height:180px;
}


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

.now-playing{
grid-column:2;
grid-row:1;
background:#fdb813;
border-radius:8px;
padding:20px;
display:flex;
align-items:center;
gap:20px;
box-shadow:0 6px 18px rgba(0,0,0,0.12);
}

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

.np-info h2{
margin:5px 0;
font-size:26px;
}

.badge{
background:white;
padding:4px 8px;
font-size:11px;
border-radius:4px;
font-weight:bold;
}

.np-show{
display:inline-block;
font-size:13px;
font-weight:600;
background:#ffc02a;
padding:4px 10px;
border-radius:4px;
margin-bottom:6px;
}

.np-title{
font-size:28px;
font-weight:700;
margin-bottom:4px;
}

#np-artist{
font-size:15px;
opacity:.85;
margin-bottom:6px;
}

.np-requested{
font-size:14px;
font-weight:600;
margin-top:4px;
}

.np-message{
font-size:14px;
font-style:italic;
opacity:.85;
margin-top:4px;
}

/* ======================================================
NAVIGATION
====================================================== */

.nav-area{
grid-column:1;
grid-row:2;
}

.nav{
display:flex;
flex-direction:column;
gap:10px;
}

.nav a{
background:white;
padding:12px;
text-decoration:none;
color:#333;
font-weight:600;
border-radius:6px;
transition:.2s;
}

.nav a:hover{
background:#fdb813;
color:#000;
}

.nav a.active{
border-left:2px solid #ffc02a;
color:#000;
font-weight:600;
}

/* ======================================================
COMING UP
====================================================== */

.coming-up{
grid-column:2;
grid-row:2;
background:white;
padding:20px;
border-radius:8px;
box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

.upcoming-grid{
display:flex;
gap:60px;
margin-top:4px;
}

.track{
text-align:center;
font-size:13px;
}

.track img{
width:70px;
height:70px;
object-fit:cover;
border-radius:4px;
margin-bottom:5px;
}


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

.page-content{
grid-column:1 / span 2;
grid-row:3;
background:white;
padding:15px;
border-radius:8px;
box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

.home-container{
}

.welcome-block{
background:white;
padding:20px;
border-radius:6px;
margin-bottom:15px;
text-align:center;
}

.welcome-block h2{
margin-top:0;
}

.home-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
margin-bottom:30px;
}

.home-card{
background:white;
padding:30px;
border-radius:6px;
text-decoration:none;
color:#333;
text-align:center;
transition:0.2s;
}

.home-card i{
font-size:32px;
color:#ff7a00;
margin-bottom:10px;
}

.home-card:hover{
transform:translateY(-3px);
box-shadow:0 6px 14px rgba(0,0,0,0.1);
}

.schedule-preview{
background:white;
padding:25px;
border-radius:6px;
}

.home-two-col{
display:flex;
gap:20px;
flex-wrap:wrap;
}

.home-left{
flex:2;
min-width:280px;
}

.home-right{
flex:1;
min-width:220px;
}

/* ======================================================
FOOTER
====================================================== */

.footer{
grid-column:1 / span 2;
grid-row:4;
text-align:center;

background:#222;
color:white;
padding:14px 20px;
margin-top:20px;
border-radius:6px;
}

.footer-inner{
max-width:1100px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
font-size:14px;
}

.footer a{
color:#ffb300;
text-decoration:none;
}

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

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

.player-bar{
position:sticky;
bottom:0;
left:0;
right:0;

background:#111;
border-top:3px solid #f68b1f;

z-index:9999;
}

.player-bar-inner{
display:flex;
align-items:center;
justify-content:space-between;

max-width:1200px;
margin:auto;
padding:10px 20px;
}

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

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

.player-logo{
width:70px;
}

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

.station-meta span{
font-size:12px;
color:#aaa;
}

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

.play-btn{
width:38px;
height:38px;

border:none;
background:#fdb813;
color:#111;

font-size:16px;
cursor:pointer;

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

.play-btn:hover{
background:white;
}

#volume-slider{
width:140px;
cursor:pointer;
accent-color:#fdb813;
}

#radio-player{
display:none;
}


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

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

#live-search:focus{
outline:none;
}

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

.request-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:18px;
margin-top:15px;
}

.song-card{
display:flex;
align-items:center;
gap:14px;
background:#ffffff;
padding:14px;
border-radius:6px;
border:1px solid rgba(0,0,0,0.06);
transition:all 0.2s ease;
min-height:90px;
}

.song-card:hover{
background:#f8f9fa;
border-color:#e9ecef;
transform:translateY(-2px);
box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

.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:#212529;
font-size:14px;
}

.song-meta p{
margin:3px 0;
font-size:13px;
color:#495057;
}

.song-meta span{
font-size:12px;
color:#868e96;
}

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

.request-btn{
margin-left:auto;
padding:7px 12px;
background:#fff4e6;
border:1px solid #ffe8cc;
border-radius:5px;
font-size:12px;
font-weight:600;
cursor:pointer;
display:flex;
align-items:center;
gap:6px;
color:#d9480f;
transition:all 0.2s ease;
}

.request-btn:hover{
background:#ffe8cc;
transform:translateY(-1px);
}
@media (max-width:700px){

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

}
/* =========================================================
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 rgba(0,0,0,0.06);
background:#ffffff;
color:#495057;
transition:all 0.2s ease;
}

.pagination a:hover{
background:#f1f3f5;
color:#212529;
transform:translateY(-1px);
}

/* Active page */
.pagination span.active{
background:#fff4e6;
color:#d9480f;
border-color:#ffe8cc;
font-weight:600;
}

/* Dots (...) */
.pagination .dots{
border:none;
background:transparent;
color:#adb5bd;
}

/* =========================================================
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.55);
display:none;
align-items:center;
justify-content:center;
z-index:99999;
}

.modal.active{
display:flex;
}

.modal-box{
background:#ffffff;
border:1px solid rgba(0,0,0,0.06);
border-top:4px solid #f59f00;
border-radius:8px;
padding:28px;
width:100%;
max-width:420px;
box-shadow:0 12px 30px rgba(0,0,0,0.25);
animation:modalFade .25s ease;
}

.modal-box h3{
margin:0 0 20px;
font-size:18px;
color:#212529;
}

/* INPUTS */

.modal-box input,
.modal-box textarea{
width:100%;
padding:12px 14px;
margin-bottom:12px;
background:#f8f9fa;
border:1px solid #e9ecef;
border-radius:6px;
font-size:14px;
transition:all .2s ease;
}

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

.modal-box input:focus,
.modal-box textarea:focus{
outline:none;
border-color:#f59f00;
background:#ffffff;
box-shadow:0 0 0 2px rgba(245,159,0,0.15);
}

/* SEND BUTTON */

#send-request{
width:100%;
padding:11px;
margin-top:6px;
border:none;
border-radius:6px;
font-weight:600;
cursor:pointer;
background:#fff4e6;
color:#d9480f;
transition:all .2s ease;
}

#send-request:hover{
background:#ffe8cc;
transform:translateY(-1px);
}

/* CANCEL BUTTON */

#close-modal{
width:100%;
margin-top:8px;
padding:10px;
background:#f1f3f5;
border:1px solid #e9ecef;
border-radius:6px;
cursor:pointer;
transition:all .2s ease;
color:#495057;
}

#close-modal:hover{
background:#e9ecef;
}

/* STATUS */

.request-status{
margin-top:10px;
padding:10px;
border-radius:6px;
font-size:14px;
display:none;
}

/* Success */
.request-status.success{
background:#ebfbee;
border-top:3px solid #40c057;
color:#2b8a3e;
display:block;
}

/* Error */
.request-status.error{
background:#fff5f5;
border-top:3px solid #fa5252;
color:#c92a2a;
display:block;
}

/* ANIMATION */

@keyframes modalFade{
from{
opacity:0;
transform:scale(.95);
}
to{
opacity:1;
transform:scale(1);
}
}

.schedule-section{

}

.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:#000;
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:#fff7ed; color:#333; border-top:3px solid #f59f00; }
.news    { background:#edf6ff; color:#333; border-top:3px solid #228be6; }
.talk    { background:#fff0f0; color:#333; border-top:3px solid #fa5252; }
.drive   { background:#edf4ff; color:#333; border-top:3px solid #4dabf7; }
.house   { background:#f3f0ff; color:#333; border-top:3px solid #7950f2; }
.party   { background:#f8f0ff; color:#333; border-top:3px solid #ae3ec9; }
.auto    { background:#edf7ed; color:#333; border-top:3px solid #40c057; }
.weekend { background:#e6fcf5; color:#333; border-top:3px solid #20c997; }
.default { background:#f1f3f5; color:#333; border-top:3px solid #adb5bd; }


.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;
}

}


/* ======================================================
RESPONSIVE
====================================================== */

@media (max-width:900px){

.site-layout{
grid-template-columns:1fr;
}

.logo-area,
.now-playing,
.nav-area,
.coming-up,
.page-content,
.footer{
grid-column:1;
}

.nav{
flex-direction:row;
flex-wrap:wrap;
}

.upcoming-grid{
justify-content:center;
flex-wrap:wrap;
}

.player-inner{
flex-direction:column;
gap:10px;
}

.player-inner audio{
width:100%;
}

}
#main-content{
opacity:1;
transition:opacity .95s ease;
}

#main-content.fade-out{
opacity:0;
}