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

*{
box-sizing:border-box;
}

body{
margin:0;
padding:0;
font-family:'Outfit',sans-serif;
color:#c8c1be;


background-image:
linear-gradient(rgba(0,0,0,0.88),rgba(0,0,0,0.18)),
url("../imgs/background.png");

background-size:cover;
background-position:center top;
background-repeat:no-repeat;
background-attachment:fixed;
}
:root{
--accent:#ff3b1f;
--accent-dark:#830013;
--accent-soft:rgba(255,60,0,0.15);
--accent-border:rgba(255,60,0,0.2);
}


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

.container{
width:95%;
max-width:1600px;
margin:0 auto;
padding:10px 0 20px;
}

.top{
display:grid;
grid-template-columns: 1fr 1fr;
gap:20px;
align-items:start;
}

.header-right{
display:flex;
flex-direction:column;
gap:12px;
}

.layout{
display:grid;
grid-template-columns: 2fr 1fr;
gap:10px;
margin-top:4px;
align-items:start; 
}

.layout > .main-content:only-child{
    grid-column:1 / -1;
    width:100%;
}

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

.logo img{
width:100%;
max-width:420px;
}


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

.now-playing{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;

padding:20px;
border-radius:12px;

position:relative;
overflow:hidden;

background:
linear-gradient(135deg, rgba(10,10,15,0.55), rgba(5,5,10,0.55)),
url("npbackground.png");

background-size:cover;
background-position:center;

background-blend-mode:overlay;

box-shadow:
0 0 20px rgba(255,60,0,0.15),
inset 0 0 40px rgba(255,60,0,0.05);
}
.now-playing::before{
content:"";
position:absolute;
inset:0;
border-radius:12px;
pointer-events:none;

background:
radial-gradient(circle at 20% 50%, rgba(255,60,0,0.15), transparent 60%),
radial-gradient(circle at 80% 50%, rgba(255,60,0,0.10), transparent 60%);

opacity:.9;
}

.now-playing::after{
content:"";
position:absolute;
inset:0;
border-radius:12px;
pointer-events:none;

box-shadow:
0 0 10px rgba(255,60,0,0.7),
inset 0 0 10px rgba(255,60,0,0.25);
}

.np-left{
flex:1;
}

.np-title{
font-size:24px;
font-weight:700;
margin-bottom:5px;
}

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

.np-meta{
font-size:12px;
opacity:.7;
margin-bottom:15px;
display:flex;
flex-direction:column;
gap:2px;
}

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

#np-desc{
font-size:14px;
opacity:.7;
margin-left:8px;
}

.np-requested{
color:#830013;
font-size:12px;
padding-left:6px;
border-left:3px solid #830013;
}

.np-player{
display:flex;
align-items:center;
gap:12px;
}

.play-btn{
width:18px;
height:18px;
cursor:pointer;
position:relative;
}

.play-btn::before{
content:"";
position:absolute;
left:0;
top:0;
width:0;
height:0;
border-left:18px solid #830013;
border-top:10px solid transparent;
border-bottom:10px solid transparent;
}

.play-btn.stop::before{
content:"";
position:absolute;
left:2px;
top:2px;
width:16px;
height:16px;
background:#830013;
border:none;
}

.volume-bar{
flex:1;
height:6px;
background:#350000;
position:relative;
border-radius:2px;
cursor:pointer;
}

.volume-level{
position:absolute;
left:0;
top:0;
height:100%;
width:60%;
background:#830013;
}

/* ======================================================
NAV BUTTONS (ASLYUM STYLE)
====================================================== */

.nav{
grid-column:1 / -1;
display:flex;
justify-content:center;
gap:12px;
margin-top:10px;
flex-wrap:wrap;
}

.nav-btn{
display:flex;
align-items:center;
gap:6px;

padding:6px 20px;
border-radius:8px;

font-size:15px;
font-weight:600;
text-decoration:none;

color:#830013;

background:rgba(20,20,25,0.75);

border:1px solid rgba(255,60,0,0.2);

transition:all .25s ease;
position:relative;
}

.nav-btn i{
color:#830013;
font-size:16px;
}

.nav-btn:hover{
color:#830013;
border-color:#830013;

box-shadow:
0 0 12px rgba(255,60,0,0.5),
inset 0 0 10px rgba(255,60,0,0.2);

transform:translateY(-2px);
}

.nav-btn.active{
color:#830013;
border:1px solid #830013;

box-shadow:
0 0 8px rgba(255,60,0,0.8),
0 0 20px rgba(255,60,0,0.5),
inset 0 0 10px rgba(255,60,0,0.3);
}
/* ======================================================
MAIN CONTENT
====================================================== */

.main-content{
background:rgba(20,20,25,0.75);
padding:25px;
border-radius:10px;
min-height:220px;
box-shadow:0 0 20px rgba(255,60,0,0.1);
}

.main-content h1{
margin-top:0;
font-size:28px;
}

.main-content p{
opacity:.85;
line-height:1.6;
}

/* ======================================================
FULL WIDTH SCHEDULE LAYOUT
====================================================== */

.schedule-page .layout{
    display:block;
}

.schedule-page .main-content{
    width:100%;
}

.schedule-page .schedule-section{
    width:100%;
}

/* ======================================================
SIDEBAR
====================================================== */

.sidebar > div{
background:rgba(20,20,25,0.75);
padding:15px;
border-radius:10px;
margin-bottom:15px;
position:relative;
box-shadow:0 0 20px rgba(255,60,0,0.1);
transition:.2s;
}

.feature{
overflow:hidden;
padding:0 !important;
}

.feature img{
    width:100%;
    display:block;
    transition: all .24s ease;
}

.feature img.fade-out{
    opacity:0;
    transform:translateX(-40px);
}

.feature img.fade-in{
    opacity:1;
    transform:translateX(0);
}

.up-next{
display:flex;
gap:12px;
align-items:center;
}

.up-next img{
width:95px;
height:95px;
object-fit:cover;
border-radius:6px;
}

.up-label{
font-size:13px;
color:#830013;
display:block;
margin-bottom:3px;
}

.up-next h3{
margin:0;
font-size:18px;
}

.up-next p{
margin:0;
font-size:13px;
opacity:.8;
}

.recent h4{
margin:0 0 10px;
color:#830013;
font-size:14px;
}

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

.recent li{
margin-bottom:6px;
font-size:13px;
opacity:.85;
}

.show-list{
list-style:none;
margin:0;
padding:0;
display:flex;
flex-direction:column;
gap:10px;
}

.show-item{
display:flex;
justify-content:space-between;
align-items:center;
padding:14px;
border-radius:8px;
background:rgba(0,0,0,0.25);
transition:all .2s ease;
}

.show-meta{
display:flex;
flex-direction:column;
gap:4px;
}

.show-name{
font-weight:600;
font-size:15px;
color:#c8c1be;
}

.no-show{
text-align:center;
opacity:.7;
padding:10px;
}

.live-badge{
font-size:11px;
font-weight:700;
color:#ff3c00;
border:1px solid #ff3c00;
padding:3px 8px;
border-radius:4px;
letter-spacing:1px;
}

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

footer{
margin-top:30px;
padding:20px 0;
background:#090909;
border-top:1px solid #222;
}

.footer-inner{
display:flex;
justify-content:space-between;
align-items:center;
font-size:13px;
color:#aaa;
}

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


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

@media(max-width:900px){

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

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

.logo img{
max-width:320px;
margin:auto;
display:block;
}

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

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

}

.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:#830013;
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:#1a1410;
    color:#c8c1be;
    border-left:3px solid #864d00;
}

.metal{
    background:#0f0f0f;
    color:#c8c1be;
    border-left:3px solid #86001d;
}

.classic{
    background:#161616;
    color:#c8c1be;
    border-left:3px solid #855400;
}

.alt{
    background:#111827;
    color:#c8c1be;
    border-left:3px solid #000386;
}

.drive{
    background:#141821;
    color:#c8c1be;
    border-left:3px solid #003c86;
}

.rock{
    background:#121212;
    color:#c8c1be;
    border-left:3px solid #853600;
}

.request{
    background:#1f1720;
    color:#c8c1be;
    border-left:3px solid #750086;
}

.weekend{
    background:#0f1f1c;
    color:#c8c1be;
    border-left:3px solid #008677;
}

/* fallback */
.default{
    background:#121212;
    color:#c8c1be;
    border-top:3px solid #6b7280;
}

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

}


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

#live-search{
width:100%;
padding:12px 14px;
border-radius:6px;
border:1px solid var(--accent-border);
background:#121212;
color:#c8c1be;
font-size:14px;
transition:0.2s;
margin-bottom:20px;
}

#live-search::placeholder{
color:#c8c1be;
}

#live-search:focus{
outline:none;
border-color:var(--accent);
box-shadow:0 0 0 2px var(--accent-soft);
}


/* =========================================================
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:rgba(10,10,12,0.85);
padding:14px;
border-radius:8px;
border:1px solid rgba(255,255,255,0.05);
transition:all 0.2s ease;
min-height:90px;
}

.song-card:hover{
background:rgba(20,20,25,0.95);
border-color:var(--accent-border);
transform:translateY(-2px);
box-shadow:0 6px 18px rgba(255,40,0,0.25);
}

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

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

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


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

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

.request-btn:hover{
background:linear-gradient(135deg,var(--accent-dark),var(--accent));
color:#fff;
border-color:transparent;
transform:translateY(-1px);
box-shadow:0 0 10px rgba(255,40,0,0.4);
}


/* =========================================================
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(255,255,255,0.08);
background:#121212;
color:#ccc;
transition:all 0.2s ease;
}

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

/* Active page */
.pagination span.active{
background:linear-gradient(135deg,var(--accent-dark),var(--accent));
color:#fff;
border-color:transparent;
font-weight:600;
}

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


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

@media (max-width:700px){

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

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

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

.modal.active{
display:flex;
}

.modal-box{
background:#121212;
border:1px solid rgba(255,255,255,0.08);
border-top:4px solid var(--accent);
border-radius:10px;
padding:28px;
width:100%;
max-width:420px;
box-shadow:0 12px 30px rgba(0,0,0,0.6);
animation:modalFade .25s ease;
}

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


/* INPUTS */

.modal-box input,
.modal-box textarea{
width:100%;
padding:12px 14px;
margin-bottom:12px;
background:#1a1a1a;
border:1px solid rgba(255,255,255,0.08);
border-radius:6px;
font-size:14px;
color:#fff;
transition:all .2s ease;
}

.modal-box input:focus,
.modal-box textarea:focus{
outline:none;
border-color:var(--accent);
background:#111;
box-shadow:0 0 0 2px var(--accent-soft);
}


/* SEND BUTTON */

#send-request{
width:100%;
padding:11px;
margin-top:6px;
border:none;
border-radius:6px;
font-weight:600;
cursor:pointer;
background:linear-gradient(135deg,var(--accent-dark),var(--accent));
color:#fff;
transition:all .2s ease;
}

#send-request:hover{
transform:translateY(-1px);
box-shadow:0 0 12px rgba(255,40,0,0.5);
}


/* CANCEL BUTTON */

#close-modal{
width:100%;
margin-top:8px;
padding:10px;
background:#1a1a1a;
border:1px solid rgba(255,255,255,0.08);
border-radius:6px;
cursor:pointer;
transition:all .2s ease;
color:#ccc;
}

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


/* STATUS */

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

/* Success */
.request-status.success{
background:#0f1f14;
border-top:3px solid #22c55e;
color:#4ade80;
display:block;
}

/* Error */
.request-status.error{
background:#1f0f12;
border-top:3px solid #ef4444;
color:#f87171;
display:block;
}


/* ANIMATION */

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