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

*{ box-sizing:border-box; }

:root{
--accent:#00ff9c;
--accent2:#00cfff;
--bg-dark:#020617;
--panel:#0b1220;
--panel-soft:#0f172a;
--border:rgba(0,255,200,0.15);
--glow:rgba(0,255,200,0.25);
}

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

background:
radial-gradient(circle at 20% 20%, rgba(0,255,200,0.08), transparent 40%),
radial-gradient(circle at 80% 80%, rgba(0,150,255,0.08), transparent 40%),
#020617;
}

/* ======================================================
WRAPPER
====================================================== */

.wrapper{
max-width:1400px;
margin:auto;
}

/* ======================================================
TOP BAR
====================================================== */

.topbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px;
background:linear-gradient(to right,#020617,#020617,#0a0f1f);
border-bottom:1px solid var(--border);
flex-wrap:wrap;
gap:15px;
}

.logo img{
height:160px;
}

.dj-strip{
display:flex;
gap:20px;
}

.dj{
display:flex;
align-items:center;
gap:10px;

}

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

.dj strong{
display:block;
font-size:16px;
}

.dj span{
font-size:13px;
opacity:.7;
}

.nowplaying-dj{
min-width:380px;
max-width:440px;
flex-shrink:0;
}

.nowplaying-dj div{
flex:1;
overflow:hidden;
text-align:right;
}

#np-title-small,
#np-artist-small{
display:block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

#np-title-small{
font-size:18px;
font-weight:600;
color:#fff;
}

#np-artist-small{
font-size:13px;
opacity:.7;
}

/* ======================================================
TABLET (= 1024px)
====================================================== */

@media (max-width:1024px){

.logo img{
height:120px;
}

.dj img{
width:75px;
height:75px;
}

.nowplaying-dj{
min-width:260px;
}

#np-title-small{
font-size:18px;
}

}

/* ======================================================
MOBILE (768px)
====================================================== */

@media (max-width:768px){

.topbar{
flex-direction:column;
align-items:stretch;
text-align:center;
}

.logo{
text-align:center;
}

.logo img{
height:100px;
margin:0 auto;
}

.dj-strip{
flex-wrap:wrap;
justify-content:center;
gap:12px;
}

.dj{
flex-direction:column;
text-align:center;
}

.dj img{
width:70px;
height:70px;
}

.nowplaying-dj{
min-width:100%;
max-width:100%;
margin-top:10px;
}

#np-title-small,
#np-artist-small{
text-align:center;
white-space:normal;
}

#np-title-small{
font-size:18px;
}

}

/* ======================================================
SMALL MOBILE (= 480px)
====================================================== */

@media (max-width:480px){

.logo img{
height:80px;
}

.dj img{
width:60px;
height:60px;
}

#np-title-small{
font-size:16px;
}

#np-artist-small{
font-size:12px;
}

}
/* ======================================================
NAV BAR
====================================================== */

.nav-bar{
display:flex;
justify-content:center;
gap:25px;
padding:20px;

background:linear-gradient(to bottom,#0b1220,#050a18);
border-bottom:1px solid var(--border);
}

.nav-bar a{
text-decoration:none;
color:#94a3b8;
font-size:14px;
text-transform:lowercase;
transition:.2s;
}

.nav-bar a:hover{
color:var(--accent);
text-shadow:0 0 8px var(--glow);
}

/* ======================================================
HERO
====================================================== */

.hero{
position:relative;
height:340px;
overflow:hidden;
}

.hero-inner{
height:100%;
position:relative;
}

.hero-image{
position:absolute;
inset:0;
background:url("../imgs/hero.jpg") 35% 15% / cover no-repeat;
filter:brightness(.9);
}
.hero-text{
position:absolute;
right:40px;
top:50%;
transform:translateY(-50%);
text-align:right;
}

.hero-text h2{
font-size:28px;
color:var(--accent2);
margin:0;
}

.hero-text span{
color:var(--accent);
font-size:14px;
}

.hero-text h1{
font-size:42px;
margin-top:10px;
}

/* ======================================================
TILES
====================================================== */

.tiles{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:10px;
padding:15px;
}

.tile{
position:relative;
overflow:hidden;
border-radius:6px;
}

.tile img{
width:100%;
height:120px;
object-fit:cover;
transition:.3s;
}

.tile span{
position:absolute;
bottom:0;
left:0;
right:0;
padding:8px;
background:rgba(0,0,0,0.6);
font-size:13px;
text-align:center;
}

.tile:hover img{
transform:scale(1.1);
}

/* ======================================================
MAIN GRID
====================================================== */

.main-grid{
display:grid;
grid-template-columns:220px 1fr 300px;
gap:15px;
padding:15px;
align-items:start;
}

.main-grid.no-left{
    grid-template-columns:1fr 300px;
}

.main-grid.full{
    grid-template-columns:1fr;
    padding:15px 30px;
}

.separator{
    border-top:2px dotted rgba(255,255,255,0.2);
    margin:25px 0;
}

/* ======================================================
LEFT MENU
====================================================== */

.left-menu{
background:var(--panel);
padding:15px;
border-radius:6px;
border:1px solid var(--border);
}

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

.left-menu li{
padding:8px 0;
font-size:14px;
color:#94a3b8;
cursor:pointer;
}

.left-menu li:hover{
color:var(--accent);
}

.dj-rotator{
display:flex;
flex-direction:column;
gap:12px;
}

.dj-card{
display:flex;
align-items:center;
gap:10px;
padding:10px;
transition:all .3s ease;
}

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

.dj-card span{
font-size:13px;
font-weight:600;
border-bottom:5px solid #102d14;
}

.dj-card.fade-out{
opacity:0;
transform:translateX(-20px);
}

.dj-card.fade-in{
opacity:1;
transform:translateX(0);
}

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

.content{
background:var(--panel-soft);
padding:20px;
border-radius:6px;
border:1px solid var(--border);
}

.content h1{
margin-top:0;
}

.featured-show{
    display:flex;
    gap:20px;
    margin-top:20px;
    align-items:center;
}

.featured-show .text{
    flex:1;
}

.featured-show img{
    width:320px;
    flex-shrink:0;
}

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

.right-bar{
background:var(--panel);
padding:15px;
border-radius:6px;
border:1px solid var(--border);
}

.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:12px;
transition:all .2s ease;
border-left:5px solid #102d14;
}

.show-item:hover{
background:rgba(255,255,255,0.06);
transform:translateY(-2px);
}

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

.show-name{
font-weight:600;
font-size:14px;
color:#fff;
}

.show-time{
font-size:12px;
opacity:.7;
}

.live-badge{
font-size:10px;
font-weight:700;
color:#ff3b1f;
border:1px solid #ff3b1f;
padding:2px 6px;
border-radius:4px;
letter-spacing:1px;
}

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

.show-dj{
    display:block;
    font-size:12px;
    opacity:.7;
    margin-top:2px;
}

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

footer{
margin-top:40px;
padding:20px;
background:#020617;
border-top:1px solid rgba(255,255,255,0.05);
}

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

.footer-right a{
color:var(--accent);
text-decoration:none;
font-weight:500;
}

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

/* ======================================================
NOW PLAYING (UPDATED STYLE)
====================================================== */

.now-playing{
background:linear-gradient(135deg,#020617,#0b1220);
border:1px solid var(--border);
border-radius:10px;
padding:20px;
box-shadow:0 0 20px var(--glow);
}

.np-title{
font-size:20px;
font-weight:600;
}

.np-artist{
opacity:.8;
}

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

@media(max-width:1000px){

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

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

.hero-text{
right:20px;
}

}

.card{
    background:linear-gradient(180deg, #0b1a2a 0%, #081423 100%);
    border:1px solid rgba(0,255,255,0.15);
    border-radius:10px;
    padding:25px;
    box-shadow:0 10px 30px rgba(0,0,0,0.4);
}

.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:#ffffff;
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:#0f172a;
    color:#e6faff;
    border-left:3px solid #22d3ee;
}

.daytime{
    background:#0b1a2a;
    color:#e6faff;
    border-left:3px solid #38bdf8;
}

.mix{
    background:#111827;
    color:#e6faff;
    border-left:3px solid #6366f1;
}

.chill{
    background:#0a1f1a;
    color:#e6faff;
    border-left:3px solid #14b8a6;
}

.drive{
    background:#0f1a2b;
    color:#e6faff;
    border-left:3px solid #3b82f6;
}

.club{
    background:#1a0f2a;
    color:#f0e6ff;
    border-left:3px solid #a855f7;
}

.peak{
    background:#2a0f1a;
    color:#ffe4e6;
    border-left:3px solid #f43f5e;
}

.night{
    background:#020617;
    color:#c7d2fe;
    border-left:3px solid #818cf8;
}

.live{
    background:#1f2937;
    color:#ffffff;
    border-left:3px solid #facc15;
}

.party{
    background:#2a1a0f;
    color:#fff7ed;
    border-left:3px solid #fb923c;
}

.classic{
    background:#1e1b16;
    color:#fef3c7;
    border-left:3px solid #fbbf24;
}

.weekend{
    background:#0f2a26;
    color:#ccfbf1;
    border-left:3px solid #2dd4bf;
}

/* fallback */
.default{
    background:#020617;
    color:#e5e7eb;
    border-left:3px solid #64748b;
}

.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:13px 15px;
border-radius:8px;
border:1px solid rgba(255,255,255,0.08);
background:rgba(15,15,18,0.9);
color:#e5e5e5;
font-size:14px;
transition:all 0.25s ease;
margin-bottom:20px;
backdrop-filter:blur(6px);
}

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

#live-search:focus{
outline:none;
border-color:var(--accent);
box-shadow:0 0 0 2px var(--accent-soft),
            0 0 12px rgba(180,0,255,0.25);
}


/* =========================================================
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(20,20,25,0.75);
padding:14px;
border-radius:10px;
border:1px solid rgba(255,255,255,0.06);
transition:all 0.25s ease;
min-height:90px;
backdrop-filter:blur(8px);
}

.song-card:hover{
background:rgba(30,30,38,0.95);
border-color:rgba(180,0,255,0.35);
transform:translateY(-3px);
box-shadow:0 10px 25px rgba(180,0,255,0.25);
}

.song-card img{
width:70px;
height:70px;
object-fit:cover;
border-radius:8px;
box-shadow:0 0 12px rgba(0,0,0,0.4);
}

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

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

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

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


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

.request-btn{
margin-left:auto;
padding:8px 13px;
background:rgba(255,255,255,0.02);
border:1px solid rgba(180,0,255,0.35);
border-radius:6px;
font-size:12px;
font-weight:600;
cursor:pointer;
display:flex;
align-items:center;
gap:6px;
color:#d946ef;
transition:all 0.25s ease;
}

.request-btn:hover{
background:linear-gradient(135deg,#7e22ce,#d946ef);
color:#fff;
border-color:transparent;
transform:translateY(-1px);
box-shadow:0 0 14px rgba(217,70,239,0.6);
}


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

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

.pagination a,
.pagination span{
padding:7px 11px;
border-radius:6px;
font-size:13px;
text-decoration:none;
border:1px solid rgba(255,255,255,0.06);
background:rgba(18,18,22,0.9);
color:#aaa;
transition:all 0.2s ease;
}

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

/* Active page */
.pagination span.active{
background:linear-gradient(135deg,#7e22ce,#d946ef);
color:#fff;
border:none;
font-weight:600;
box-shadow:0 0 10px rgba(217,70,239,0.5);
}

/* 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.8);
display:none;
align-items:center;
justify-content:center;
z-index:99999;
backdrop-filter:blur(6px);
}

.modal.active{
display:flex;
}

.modal-box{
background:rgba(18,18,22,0.95);
border:1px solid rgba(255,255,255,0.06);
border-top:3px solid #d946ef;
border-radius:12px;
padding:28px;
width:100%;
max-width:420px;
box-shadow:0 20px 40px rgba(0,0,0,0.7);
animation:modalFade .25s ease;
}

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


/* INPUTS */

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

.modal-box input:focus,
.modal-box textarea:focus{
outline:none;
border-color:#d946ef;
box-shadow:0 0 0 2px rgba(217,70,239,0.25);
}


/* 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,#7e22ce,#d946ef);
color:#fff;
transition:all .2s ease;
}

#send-request:hover{
transform:translateY(-1px);
box-shadow:0 0 14px rgba(217,70,239,0.6);
}


/* CANCEL BUTTON */

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

#close-modal:hover{
background:#1f1f26;
color:#fff;
}


/* STATUS */

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

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

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


/* ANIMATION */

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