/* =====================================
   WILDSTYLE SCHEDULE
===================================== */

:root{

--pink:#ff2d92;
--purple:#7b4dff;
--blue:#3f8cff;

--glass:rgba(255,255,255,.05);
--border:rgba(255,255,255,.08);

}

/* ==========================
GENERAL
========================== */

.schedule-page{

width:min(1500px,95%);
margin:auto;
padding:30px 0 80px;

}

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

.schedule-hero{

margin:25px 0;

background:
linear-gradient(
135deg,
rgba(255,45,146,.18),
rgba(63,140,255,.18)
);

border:1px solid var(--border);

border-radius:30px;

overflow:hidden;

}

.hero-overlay{

display:flex;

justify-content:space-between;

align-items:center;

padding:45px;

gap:40px;

}

.hero-copy{

flex:1;

}

.hero-tag{

display:inline-block;

padding:8px 18px;

border-radius:50px;

background:linear-gradient(
90deg,
var(--pink),
var(--purple)
);

color:white;

font-weight:700;

margin-bottom:18px;

}

.hero-copy h1{

font-size:52px;

font-weight:800;

margin-bottom:10px;

color:white;

}

.hero-copy p{

font-size:22px;

color:#d5d5d5;

margin-bottom:30px;

}

.hero-buttons{

display:flex;

gap:15px;

flex-wrap:wrap;

}

.hero-image{

display:flex;

justify-content:center;

align-items:center;

}

.hero-image img{

width:230px;

height:230px;

border-radius:50%;

object-fit:cover;

border:5px solid var(--pink);

box-shadow:

0 0 35px rgba(255,45,146,.45);

}

/* ==========================
NOW ON
========================== */

.now-show-card{

display:flex;

align-items:center;

gap:20px;

padding:25px;

margin:25px 0;

border-radius:25px;

background:var(--glass);

border:1px solid var(--border);

backdrop-filter:blur(14px);

}

.live-dot{

width:18px;

height:18px;

border-radius:50%;

background:#ff2d55;

box-shadow:

0 0 15px #ff2d55;

animation:pulse 1.2s infinite;

}

.live-label{

display:block;

font-size:13px;

letter-spacing:2px;

color:#ff4da8;

text-transform:uppercase;

}

#nowon{

font-size:30px;

color:white;

margin-top:5px;

}

/* ==========================
UP NEXT
========================== */

.up-next-card{

margin-bottom:30px;

padding:30px;

border-radius:25px;

background:var(--glass);

border:1px solid var(--border);

backdrop-filter:blur(12px);

}

.up-next-card h3{

font-size:34px;

color:white;

margin-top:15px;

}

#upnextTime{

font-size:20px;

margin-top:10px;

color:#dddddd;

}

#upnextCountdown{

display:inline-block;

margin-top:18px;

padding:8px 18px;

border-radius:30px;

background:linear-gradient(
90deg,
var(--pink),
var(--purple)
);

color:white;

font-weight:700;

}

/* ==========================
DAY TABS
========================== */

.day-tabs{

display:flex;

gap:12px;

overflow-x:auto;

padding-bottom:12px;

margin:35px 0;

}

.day-tabs::-webkit-scrollbar{

display:none;

}

.day-btn{

padding:12px 24px;

border-radius:40px;

border:2px solid var(--pink);

background:transparent;

color:white;

cursor:pointer;

font-weight:700;

transition:.3s;

white-space:nowrap;

}

.day-btn:hover{

background:rgba(255,45,146,.2);

}

.day-btn.active{

border:none;

background:

linear-gradient(
90deg,
var(--pink),
var(--purple),
var(--blue)
);

}

/* ==========================
SECTION HEADINGS
========================== */

.section-head{

margin-bottom:30px;

}

.section-head h2{

font-size:38px;

color:white;

margin-bottom:8px;

}

.section-head p{

color:#bdbdbd;

font-size:17px;

}

/* =====================================
   WEEKLY SCHEDULE
===================================== */

.schedule-grid{

display:grid;

gap:35px;

}

.schedule-day{

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.08);

border-radius:24px;

padding:25px;

backdrop-filter:blur(14px);

}

.schedule-day-title{

font-size:32px;

color:#fff;

margin-bottom:25px;

padding-bottom:12px;

border-bottom:1px solid rgba(255,255,255,.08);

}

.dj-grid{

display:grid;

grid-template-columns:
repeat(auto-fill,minmax(300px,1fr));

gap:20px;

}

.dj-card{

background:#141722;

border:1px solid rgba(255,255,255,.08);

border-radius:20px;

overflow:hidden;

transition:.3s;

}

.dj-card:hover{

transform:translateY(-6px);

border-color:#ff2d92;

box-shadow:
0 0 25px rgba(255,45,146,.25);

}

.dj-image-wrap{

height:220px;

overflow:hidden;

position:relative;

}

.dj-image-wrap img{

width:100%;

height:100%;

object-fit:cover;

display:block;

transition:.4s;

}

.dj-card:hover img{

transform:scale(1.05);

}

.dj-badge{

position:absolute;

top:15px;

right:15px;

background:linear-gradient(
90deg,
#ff2d92,
#7b4dff
);

padding:6px 12px;

border-radius:30px;

font-size:12px;

font-weight:700;

color:white;

}

.dj-body{

padding:20px;

}

.dj-body h3{

font-size:24px;

color:white;

margin-bottom:10px;

}

.dj-meta{

margin-bottom:15px;

}

.tag{

display:inline-block;

padding:8px 16px;

border-radius:30px;

background:rgba(255,255,255,.08);

color:white;

font-weight:600;

}

.dj-body p{

color:#cfcfcf;

line-height:1.6;

}

/* =====================================
   FEATURED DJ
===================================== */

.featured-dj{

margin:50px 0;

}

.featured-dj-card{

display:flex;

align-items:center;

gap:30px;

padding:30px;

border-radius:24px;

background:linear-gradient(
135deg,
rgba(255,45,146,.18),
rgba(63,140,255,.18)
);

border:1px solid rgba(255,255,255,.08);

}

.featured-dj-card img{

width:170px;

height:170px;

border-radius:50%;

object-fit:cover;

border:4px solid #ff2d92;

}

.featured-tag{

display:inline-block;

margin-bottom:15px;

padding:8px 15px;

border-radius:30px;

background:#ff2d92;

color:white;

font-weight:700;

}

.featured-dj-content h2{

font-size:34px;

color:white;

margin-bottom:10px;

}

.featured-dj-content p{

color:#ddd;

line-height:1.6;

}

.featured-meta{

margin-top:18px;

color:#ff73c4;

font-weight:700;

}

/* =====================================
   DASHBOARD
===================================== */

.schedule-dashboard{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(320px,1fr));

gap:25px;

margin:60px 0;

}

.dashboard-card{

background:#141722;

border-radius:22px;

border:1px solid rgba(255,255,255,.08);

overflow:hidden;

}

.card-head{

padding:20px;

border-bottom:1px solid rgba(255,255,255,.08);

display:flex;

justify-content:space-between;

align-items:center;

}

.card-head h2{

color:white;

font-size:22px;

}

.badge{

padding:6px 12px;

border-radius:20px;

background:#ff2d92;

color:white;

font-size:12px;

font-weight:700;

}

.card-body{

padding:25px;

color:#ddd;

}

.stats-grid{

display:grid;

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

gap:18px;

}

.stat-box{

padding:20px;

border-radius:16px;

background:rgba(255,255,255,.05);

text-align:center;

}

.stat-box strong{

display:block;

font-size:34px;

color:white;

margin-bottom:8px;

}

.stat-box span{

color:#cfcfcf;

}

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

.player-cover{

width:150px;

height:150px;

border-radius:50%;

display:block;

margin:0 auto 20px;

object-fit:cover;

border:4px solid #ff2d92;

}

#playerDJ{

text-align:center;

font-size:28px;

color:white;

}

#playerTime{

text-align:center;

margin:10px 0 20px;

color:#ddd;

}

/* =====================================
   JOIN
===================================== */

.join-banner{

display:flex;

justify-content:space-between;

align-items:center;

gap:30px;

padding:35px;

margin:60px 0;

border-radius:24px;

background:linear-gradient(
90deg,
#ff2d92,
#7b4dff,
#3f8cff
);

}

.join-banner h2{

font-size:40px;

color:white;

margin-bottom:10px;

}

.join-banner p{

color:white;

}

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

.footer{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:35px;

padding:50px 0;

border-top:1px solid rgba(255,255,255,.08);

}

.footer h3{

color:white;

margin-bottom:15px;

}

.footer p,
.footer li{

color:#bfbfbf;

line-height:1.7;

list-style:none;

}

.footer ul{

padding:0;

margin:0;

}

/* =====================================
   BUTTONS
===================================== */

.btn-primary,
.btn-secondary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:14px 26px;

border-radius:40px;

text-decoration:none;

font-weight:700;

transition:.3s;

}

.btn-primary{

background:linear-gradient(
90deg,
#ff2d92,
#7b4dff
);

color:white;

}

.btn-secondary{

border:2px solid #ff2d92;

color:white;

}

.btn-primary:hover,
.btn-secondary:hover{

transform:translateY(-3px);

}

/* =====================================
   ANIMATION
===================================== */

@keyframes pulse{

0%{
transform:scale(1);
opacity:1;
}

50%{
transform:scale(1.4);
opacity:.45;
}

100%{
transform:scale(1);
opacity:1;
}

}

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

@media(max-width:900px){

.hero-overlay{

flex-direction:column;

text-align:center;

}

.hero-image img{

width:170px;

height:170px;

}

.featured-dj-card{

flex-direction:column;

text-align:center;

}

.join-banner{

flex-direction:column;

text-align:center;

}

.dj-grid{

grid-template-columns:1fr;

}

.schedule-dashboard{

grid-template-columns:1fr;

}

.stats-grid{

grid-template-columns:1fr;

}

.hero-copy h1{

font-size:38px;

}

.section-head h2{

font-size:30px;

}

}