/* =======================================================
   XIT MUSIC CHARTS
   RED • BLACK • GOLD
======================================================= */

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

:root{

    --red:#e50914;
    --dark:#0a0a0a;
    --card:#111;
    --gold:#FFD700;
    --silver:#c0c0c0;
    --bronze:#cd7f32;
    --white:#ffffff;
    --text:#cfcfcf;
    --border:#232323;

}

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

body{

    background:var(--dark);

    color:var(--white);

}

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

.featured-hero{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:40px;

    padding:60px;

    margin:40px auto;

    max-width:1400px;

    border-radius:25px;

    background:

    linear-gradient(

    135deg,

    #151515,

    #090909

    );

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

    box-shadow:

    0 0 40px

    rgba(229,9,20,.18);

}

.featured-cover{

    width:260px;

    height:260px;

    object-fit:cover;

    border-radius:20px;

    box-shadow:

    0 20px 45px

    rgba(0,0,0,.45);

}

.featured-content{

    flex:1;

}

.featured-content h2{

    color:var(--gold);

    font-size:18px;

    margin-bottom:15px;

}

.featured-content h1{

    font-size:3rem;

    margin-bottom:15px;

}

.featured-content p{

    color:var(--text);

    margin-bottom:30px;

    font-size:1.1rem;

}

.featured-content .btn{

    display:inline-block;

    padding:15px 35px;

    background:var(--red);

    color:#fff;

    border-radius:12px;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}

.featured-content .btn:hover{

    background:#ff2734;

    transform:translateY(-3px);

}


/* ==========================
   CHART STATISTICS
========================== */

.chart-stats{

    max-width:1400px;

    margin:40px auto;

    display:grid;

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

    gap:25px;

    padding:0 20px;

}

.stat-card{

    background:#111;

    border:1px solid #222;

    border-radius:18px;

    padding:30px;

    text-align:center;

    transition:.35s;

    box-shadow:0 0 20px rgba(0,0,0,.25);

}

.stat-card:hover{

    transform:translateY(-6px);

    border-color:#e50914;

    box-shadow:0 0 30px rgba(229,9,20,.25);

}

.stat-card h3{

    color:#bbb;

    font-size:15px;

    margin-bottom:15px;

    font-weight:500;

}

.stat-card h2{

    color:#FFD700;

    font-size:2rem;

    font-weight:700;

}

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

.chart-search{

    max-width:700px;

    margin:40px auto;

    padding:0 20px;

}

.chart-search input{

    width:100%;

    padding:16px 20px;

    background:#111;

    color:#fff;

    border:1px solid #333;

    border-radius:12px;

    font-size:16px;

    outline:none;

    transition:.3s;

}

.chart-search input:focus{

    border-color:#e50914;

    box-shadow:0 0 15px rgba(229,9,20,.25);

}

/* ==========================
   CHART TABS
========================== */

.chart-tabs{

    max-width:1400px;

    margin:25px auto;

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

    padding:0 20px;

}

.chart-tab{

    background:#111;

    color:#fff;

    border:1px solid #333;

    border-radius:30px;

    padding:12px 26px;

    cursor:pointer;

    transition:.3s;

    font-weight:600;

}

.chart-tab:hover{

    background:#1a1a1a;

    border-color:#e50914;

}

.chart-tab.active{

    background:#e50914;

    border-color:#e50914;

    color:#fff;

}



/* ==========================
   SONG GRID
========================== */

.songs{

    max-width:1400px;

    margin:40px auto;

    padding:0 20px;

    display:grid;

    grid-template-columns:

    repeat(auto-fill,minmax(280px,1fr));

    gap:25px;

}

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

.song{

    display:block;

    text-decoration:none;

    background:#111;

    border:1px solid #222;

    border-radius:18px;

    overflow:hidden;

    transition:.35s;

    position:relative;

}

.song:hover{

    transform:translateY(-8px);

    border-color:#e50914;

    box-shadow:

    0 15px 35px

    rgba(229,9,20,.20);

}

.song-cover{

    width:100%;

    height:260px;

    object-fit:cover;

    display:block;

}

.song-info{

    padding:18px;

}

.song-info h3{

    color:#fff;

    font-size:1.2rem;

    margin-bottom:10px;

    line-height:1.4;

}

.song-artist{

    color:#FFD700;

    font-weight:600;

    margin-bottom:12px;

}

.song-meta{

    color:#bdbdbd;

    font-size:14px;

    margin-bottom:8px;

}

.song-views{

    margin-top:15px;

    color:#fff;

    font-weight:700;

}

/* ==========================
   RANK
========================== */

.song-rank{

    position:absolute;

    top:12px;

    left:12px;

    z-index:20;

}

.rank-number{

    background:#222;

    color:#fff;

    padding:6px 12px;

    border-radius:20px;

    font-size:13px;

    font-weight:700;

}

.gold-badge{

    background:#FFD700;

    color:#111;

    padding:6px 14px;

    border-radius:20px;

    font-weight:700;

}

.silver-badge{

    background:#c0c0c0;

    color:#111;

    padding:6px 14px;

    border-radius:20px;

    font-weight:700;

}

.bronze-badge{

    background:#cd7f32;

    color:#fff;

    padding:6px 14px;

    border-radius:20px;

    font-weight:700;

}



/* ==========================
   PREMIUM BADGES
========================== */

.song-badges{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin:12px 0;

}

.featured-badge{

    background:#FFD700;

    color:#111;

    padding:5px 12px;

    border-radius:20px;

    font-size:12px;

    font-weight:700;

}

.verified-badge{

    background:#2196F3;

    color:#fff;

    padding:5px 12px;

    border-radius:20px;

    font-size:12px;

    font-weight:700;

}

.trending-badge{

    background:#e50914;

    color:#fff;

    padding:5px 12px;

    border-radius:20px;

    font-size:12px;

    font-weight:700;

}

.new-badge{

    background:#00C853;

    color:#fff;

    padding:5px 12px;

    border-radius:20px;

    font-size:12px;

    font-weight:700;

}

/* ==========================
   ARTIST CARDS
========================== */

.artist-card{

    background:#111;

    border:1px solid #222;

    border-radius:20px;

    padding:25px;

    text-align:center;

    transition:.35s;

}

.artist-card:hover{

    transform:translateY(-8px);

    border-color:#FFD700;

    box-shadow:0 15px 35px rgba(255,215,0,.20);

}

.artist-image{

    width:140px;

    height:140px;

    border-radius:50%;

    object-fit:cover;

    margin-bottom:18px;

    border:4px solid #e50914;

}

.artist-card h3{

    color:#FFD700;

    margin-bottom:12px;

}

.artist-card p{

    color:#bbb;

    margin:6px 0;

}

/* ==========================
   GENRE CARDS
========================== */

.genre-card{

    background:#111;

    border:1px solid #222;

    border-radius:20px;

    padding:30px;

    text-align:center;

    transition:.35s;

}

.genre-card:hover{

    transform:translateY(-8px);

    border-color:#e50914;

    box-shadow:0 15px 35px rgba(229,9,20,.20);

}

.genre-card h3{

    color:#FFD700;

    margin-bottom:15px;

    font-size:1.5rem;

}

.genre-card p{

    color:#bbb;

    margin:8px 0;

}

/* ==========================
   EMPTY STATE
========================== */

.search-empty{

    text-align:center;

    padding:80px 20px;

    color:#bbb;

}

.search-empty h2,

.search-empty h3{

    color:#fff;

    margin-bottom:15px;

}


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

@media (max-width:1200px){

    .featured-hero{

        padding:40px;

        gap:30px;

    }

    .featured-cover{

        width:220px;

        height:220px;

    }

}

@media (max-width:992px){

    .featured-hero{

        flex-direction:column;

        text-align:center;

    }

    .featured-cover{

        width:260px;

        height:260px;

    }

    .featured-content{

        width:100%;

    }

    .chart-stats{

        grid-template-columns:

        repeat(2,1fr);

    }

}

@media (max-width:768px){

    .songs{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

    .chart-tabs{

        justify-content:flex-start;

        overflow-x:auto;

        flex-wrap:nowrap;

        padding-bottom:10px;

        scrollbar-width:none;

    }

    .chart-tabs::-webkit-scrollbar{

        display:none;

    }

    .chart-tab{

        flex:0 0 auto;

    }

    .featured-content h1{

        font-size:2rem;

    }

    .featured-content p{

        font-size:15px;

    }

    .stat-card{

        padding:20px;

    }

}

@media (max-width:600px){

    .chart-stats{

        grid-template-columns:1fr;

    }

    .featured-hero{

        padding:25px;

    }

    .featured-cover{

        width:200px;

        height:200px;

    }

    .song-cover{

        height:220px;

    }

    .song-info{

        padding:15px;

    }

    .song-info h3{

        font-size:18px;

    }

}

@media (max-width:450px){

    .featured-content h1{

        font-size:1.6rem;

    }

    .featured-content .btn{

        display:block;

        width:100%;

        text-align:center;

    }

    .artist-image{

        width:110px;

        height:110px;

    }

}

/* =======================================================
   SMOOTH ANIMATIONS
======================================================= */

.song,
.artist-card,
.genre-card,
.stat-card,
.chart-tab,
.featured-content .btn{

    transition:all .3s ease;

}

/* =======================================================
   IMAGE QUALITY
======================================================= */

.song-cover,
.artist-image,
.featured-cover{

    image-rendering:auto;

}

/* =======================================================
   SELECTION
======================================================= */

::selection{

    background:#e50914;

    color:#fff;

}

/* =======================================================
   END OF CHARTS.CSS
======================================================= */


/* =======================================================
   CHART MOVEMENT
======================================================= */

.chart-movement{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:5px;

    margin-bottom:12px;

    padding:6px 12px;

    border-radius:20px;

    font-size:12px;

    font-weight:700;

}

.move-up{

    background:#00C853;

    color:#fff;

}

.move-down{

    background:#E53935;

    color:#fff;

}

.move-same{

    background:#555;

    color:#fff;

}

.move-new{

    background:#FFD700;

    color:#111;

}

/* =======================================================
   SONG HOVER
======================================================= */

.song:hover .song-cover{

    transform:scale(1.05);

}

.song-cover{

    transition:.4s;

}

/* =======================================================
   IMAGE OVERLAY
======================================================= */

.song{

    overflow:hidden;

}

.song::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    to top,

    rgba(0,0,0,.85),

    transparent 60%

    );

    opacity:0;

    transition:.3s;

    pointer-events:none;

}

.song:hover::before{

    opacity:1;

}

/* =======================================================
   PLAY BUTTON
======================================================= */

.play-overlay{

    position:absolute;

    top:50%;

    left:50%;

    transform:

    translate(-50%,-50%);

    width:70px;

    height:70px;

    border-radius:50%;

    background:

    rgba(229,9,20,.92);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:26px;

    opacity:0;

    transition:.35s;

}

.song:hover .play-overlay{

    opacity:1;

}

/* =======================================================
   SONG SHADOW
======================================================= */

.song{

    box-shadow:

    0 8px 18px

    rgba(0,0,0,.25);

}

.song:hover{

    box-shadow:

    0 18px 45px

    rgba(229,9,20,.30);

}



/* =======================================================
   NOW TRENDING
======================================================= */

.trending-strip{

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(240px,1fr));

    gap:25px;

    margin-top:30px;

}

.trending-card{

    display:block;

    background:#111;

    border:1px solid #222;

    border-radius:18px;

    overflow:hidden;

    text-decoration:none;

    transition:.35s;

    position:relative;

}

.trending-card:hover{

    transform:translateY(-8px);

    border-color:#e50914;

    box-shadow:

    0 15px 35px

    rgba(229,9,20,.25);

}

.trending-cover{

    width:100%;

    height:220px;

    object-fit:cover;

}

.trending-info{

    padding:18px;

}

.trending-info h3{

    color:#fff;

    margin-bottom:10px;

    font-size:1.1rem;

}

.trending-info p{

    color:#FFD700;

    margin-bottom:10px;

}

.trending-info span{

    color:#bbb;

    font-size:14px;

}

.trending-rank{

    position:absolute;

    top:12px;

    left:12px;

    background:#e50914;

    color:#fff;

    padding:8px 14px;

    border-radius:25px;

    font-weight:700;

    z-index:10;

}

.loading{

    opacity:.6;

}

.section-subtitle{

    color:#999;

    margin-top:10px;

    font-size:15px;

}

@media(max-width:768px){

    .trending-strip{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
    }

    .top-artists{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

}


/* =======================================================
   TOP ARTISTS
======================================================= */

.top-artists{

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(220px,1fr));

    gap:25px;

    margin-top:30px;

}

.top-artist-card{

    background:#111;

    border:1px solid #222;

    border-radius:20px;

    text-align:center;

    padding:25px;

    transition:.35s;

    position:relative;

}

.top-artist-card:hover{

    transform:translateY(-8px);

    border-color:#FFD700;

    box-shadow:

    0 15px 35px

    rgba(255,215,0,.20);

}

.artist-avatar{

    width:120px;

    height:120px;

    object-fit:cover;

    border-radius:50%;

    border:4px solid #e50914;

    margin-bottom:18px;

}

.artist-rank{

    position:absolute;

    top:12px;

    right:12px;

    background:#FFD700;

    color:#111;

    padding:6px 12px;

    border-radius:20px;

    font-weight:700;

}

.top-artist-card h3{

    color:#FFD700;

    margin-bottom:10px;

}

.top-artist-card p{

    color:#bbb;

    margin-bottom:10px;

}

.top-artist-card span{

    color:#fff;

    font-weight:700;

}

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

.site-footer{

    margin-top:80px;

    padding:40px 20px;

    background:#080808;

    border-top:1px solid #1d1d1d;

    text-align:center;

}

.footer-copy{

    color:#ffffff;

    font-size:15px;

    font-weight:600;

    margin-bottom:8px;

    letter-spacing:.5px;

}

.footer-company{

    color:#e50914;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}
.xit-mma-red{color:#e50914!important;font-weight:800;}

/* XITMMA atmospheric background */
body{
  background:
    radial-gradient(ellipse at 15% 10%, rgba(229,9,20,.24) 0%, transparent 30%),
    radial-gradient(ellipse at 85% 15%, rgba(180,0,35,.20) 0%, transparent 28%),
    radial-gradient(ellipse at 50% 55%, rgba(255,255,255,.035) 0%, transparent 38%),
    radial-gradient(ellipse at 20% 90%, rgba(229,9,20,.12) 0%, transparent 32%),
    linear-gradient(125deg,#030303 0%,#0b0b0d 38%,#15090d 68%,#040404 100%);
  background-attachment: fixed;
  background-size: 140% 140%;
}
.mma-magazine-info{
  margin-top:14px;
  padding:12px 14px;
  border:1px solid rgba(229,9,20,.28);
  border-radius:10px;
  background:linear-gradient(135deg,rgba(229,9,20,.08),rgba(255,255,255,.025));
}
.mma-magazine-info strong{display:block;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:#e50914}
.mma-magazine-info span{display:block;margin-top:4px;color:#ddd;font-size:.88rem}

/* card magazine spacing */
.mma-magazine-info{box-sizing:border-box;width:100%;margin-top:12px}

/* product-driven magazine card */
.mma-magazine-info{margin:12px 0 2px;padding:10px 12px;border:1px solid rgba(229,9,20,.3);border-radius:9px;background:rgba(229,9,20,.06)}
.mma-magazine-info strong{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#e50914}
.mma-magazine-info span{display:block;margin-top:4px;font-size:13px;color:#eee}

/* FIX: product-saved magazine edition */
.mma-magazine-info{
  display:block!important;
  width:100%;
  margin-top:10px;
  padding:9px 11px;
  box-sizing:border-box;
  border:1px solid rgba(229,9,20,.35);
  border-radius:8px;
  background:rgba(229,9,20,.07);
}
.mma-magazine-info strong{display:block!important;color:#e50914;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.mma-magazine-info span{display:block!important;color:#fff;font-size:12px;margin-top:3px}

/* =======================================================
   CHARTS — HIGH-END CINEMATIC BACKGROUND
======================================================= */
body{
    background:
        radial-gradient(900px 520px at 8% 0%, rgba(229,9,20,.16), transparent 62%),
        radial-gradient(760px 520px at 94% 12%, rgba(140,0,35,.13), transparent 62%),
        radial-gradient(820px 620px at 52% 48%, rgba(255,255,255,.025), transparent 68%),
        radial-gradient(700px 520px at 8% 96%, rgba(229,9,20,.09), transparent 65%),
        linear-gradient(125deg,#020203 0%,#070709 30%,#10070b 58%,#080607 78%,#010102 100%);
    background-attachment:fixed;
    background-size:cover;
}