@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=Playfair+Display:wght@500;600;700&display=swap');

:root{
    --bg:#05020a;
    --bg2:#0b0512;
    --panel:rgba(16,8,24,.86);
    --panel-2:rgba(23,10,33,.92);
    --purple:#7b35a5;
    --purple-bright:#b766ee;
    --purple-soft:#9d58c8;
    --gold:#d9ad64;
    --gold-light:#f1d79e;
    --white:#fff9f0;
    --muted:#a99cad;
    --border:rgba(217,173,100,.24);
    --purple-border:rgba(183,102,238,.38);
    --shadow:0 25px 90px rgba(0,0,0,.55);
    --radius:22px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    background:
        radial-gradient(circle at 50% 0%,rgba(103,35,144,.20),transparent 34rem),
        radial-gradient(circle at 90% 55%,rgba(82,24,110,.16),transparent 28rem),
        var(--bg);
    color:var(--white);
    font-family:Cairo,Arial,sans-serif;
    min-height:100vh;
}
body:before{
    content:"";
    position:fixed;inset:0;pointer-events:none;z-index:-1;
    background-image:
        radial-gradient(circle,rgba(255,255,255,.55) 0 1px,transparent 1.5px);
    background-size:130px 130px;
    opacity:.10;
}
button,input{font:inherit}
button{cursor:pointer}
a{text-decoration:none;color:inherit}
.container{width:min(1360px,94%);margin-inline:auto}

/* HEADER */
.topbar{
    position:absolute;top:0;left:0;right:0;z-index:20;
    border-bottom:1px solid rgba(217,173,100,.22);
    background:rgba(5,2,10,.66);
    backdrop-filter:blur(16px);
}
.topbar-inner{
    width:min(1450px,96%);
    margin:auto;
    min-height:74px;
    display:flex;
    align-items:center;
    gap:28px;
}
.brand{display:flex;align-items:center;gap:12px;min-width:250px}
.brand-logo{
    width:60px;height:60px;border-radius:50%;object-fit:cover;
    border:1px solid var(--gold);
    box-shadow:0 0 24px rgba(217,173,100,.18);
}
.brand-text strong{display:block;font-size:15px}
.brand-text span{
    display:block;color:var(--gold-light);font-size:10px;
    letter-spacing:2.5px;direction:ltr;margin-top:1px;
}
.main-nav{
    display:flex;align-self:stretch;align-items:center;
    gap:4px;flex:1;justify-content:center;
}
.nav-link{
    padding:27px 22px 24px;
    color:#eee4ef;font-size:13px;
    border-bottom:2px solid transparent;
    transition:.2s;
}
.nav-link span{color:var(--gold-light);margin-inline-start:7px}
.nav-link:hover,.nav-link.active{
    background:linear-gradient(180deg,rgba(126,53,166,.25),transparent);
    border-color:var(--gold);
    color:#fff;
}
.socials{display:flex;gap:9px}
.socials a{
    width:38px;height:38px;border:1px solid var(--gold);
    border-radius:50%;display:grid;place-items:center;
    color:var(--gold-light);font-weight:800;
    transition:.2s;
}
.socials a:hover{background:var(--gold);color:#160b1a}
.mobile-menu{display:none;background:none;border:0;color:#fff;font-size:25px}

/* HERO */
.hero{
    min-height:590px;position:relative;overflow:hidden;
    display:flex;align-items:flex-end;
    border-bottom:1px solid var(--border);
}
.hero-bg{
    position:absolute;inset:0;
    background-image:url('../assets/cover.jfif');
    background-size:cover;
    background-position:center center;
    transform:scale(1.015);
}
.hero-overlay{
    position:absolute;inset:0;
    background:
        linear-gradient(180deg,rgba(4,1,8,.20) 0%,rgba(5,2,10,.05) 45%,#05020a 100%),
        linear-gradient(90deg,rgba(4,1,8,.45),transparent 45%,rgba(4,1,8,.25));
}
.hero-content{
    position:relative;z-index:2;
    text-align:center;
    padding:120px 0 36px;
}
.hero-logo{
    position:absolute;
    top:108px;left:12px;
    width:125px;height:125px;
    border-radius:50%;
    overflow:hidden;
    border:2px solid var(--gold);
    box-shadow:0 0 45px rgba(217,173,100,.25);
}
.hero-logo img{width:100%;height:100%;object-fit:cover}
.hero-copy{display:inline-block;text-shadow:0 8px 35px #000}
.hero-kicker{
    color:var(--gold-light);letter-spacing:6px;
    font-size:12px;margin-bottom:4px;direction:ltr;
}
.hero-copy h1{
    font-family:"Playfair Display",serif;
    font-size:clamp(52px,8vw,105px);
    line-height:.98;margin:0;
    background:linear-gradient(180deg,#fff0c6,#c78e45);
    -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-radio{
    font-family:"Playfair Display",serif;
    font-size:clamp(34px,5vw,68px);
    color:var(--gold-light);
    font-style:italic;
    margin-top:4px;
}
.hero-divider{color:var(--gold);font-size:13px;margin:3px 0 6px}
.hero-copy p{margin:0;color:#ead6ae;font-size:18px}
.on-air-banner{
    margin:25px auto 0;
    width:max-content;max-width:94%;
    display:flex;align-items:center;gap:12px;
    padding:9px 20px;
    border:1px solid var(--purple-border);
    background:rgba(9,3,15,.78);
    border-radius:10px;
    backdrop-filter:blur(10px);
    font-size:13px;
}
.on-air-dot{
    width:10px;height:10px;background:#f03d4f;border-radius:50%;
    box-shadow:0 0 15px #f03d4f;
    animation:pulse 1.6s infinite;
}
.on-air-banner strong{color:#ff596a;letter-spacing:1px;direction:ltr}
.signal{color:var(--gold);letter-spacing:-3px}
@keyframes pulse{50%{opacity:.35;transform:scale(.72)}}

/* MAIN */
.main-content{padding:0 0 155px;position:relative;margin-top:-1px}

/* PLAYER */
.glass-card{
    background:linear-gradient(120deg,rgba(23,10,34,.96),rgba(7,3,12,.96));
    border:1px solid var(--border);
    box-shadow:var(--shadow);
}
.player-card{
    position:relative;
    display:grid;
    grid-template-columns:220px 235px 1fr;
    gap:24px;
    align-items:center;
    padding:17px 20px;
    border-radius:22px;
    overflow:hidden;
}
.player-card:before{
    content:"";position:absolute;inset:auto -20% -70%;
    height:280px;
    background:radial-gradient(ellipse,rgba(123,53,165,.16),transparent 65%);
    pointer-events:none;
}
.player-art-wrap{position:relative;z-index:1}
.player-art{
    display:block;width:205px;height:190px;
    object-fit:cover;border-radius:17px;
    border:1px solid var(--purple-border);
    box-shadow:0 15px 45px rgba(0,0,0,.5);
    transition:opacity .25s,transform .25s;
}
.player-art.changing{opacity:.2;transform:scale(.97)}
.art-glow{
    position:absolute;inset:12px;
    background:transparent;
    box-shadow:0 0 35px rgba(183,102,238,.18);
    pointer-events:none;
}
.track-summary{align-self:center;position:relative;z-index:1}
.playing-badge{
    display:inline-block;padding:5px 11px;border-radius:20px;
    background:rgba(123,53,165,.28);
    color:var(--gold-light);font-size:11px;margin-bottom:12px;
}
.player-title{
    font-size:27px;font-weight:800;line-height:1.35;
    word-break:break-word;
}
.player-subtitle{font-size:12px;color:var(--gold-light);margin-top:5px}
.mini-wave{
    height:30px;display:flex;align-items:center;gap:3px;margin-top:15px;
}
.mini-wave i{
    width:4px;border-radius:10px;
    background:linear-gradient(#a955e0,#5b2a78);
    animation:bar 1.1s ease-in-out infinite;
}
.mini-wave i:nth-child(1){height:10px}.mini-wave i:nth-child(2){height:19px;animation-delay:.08s}
.mini-wave i:nth-child(3){height:12px;animation-delay:.16s}.mini-wave i:nth-child(4){height:25px;animation-delay:.23s}
.mini-wave i:nth-child(5){height:15px;animation-delay:.31s}.mini-wave i:nth-child(6){height:21px;animation-delay:.12s}
.mini-wave i:nth-child(7){height:11px;animation-delay:.4s}.mini-wave i:nth-child(8){height:18px;animation-delay:.2s}
@keyframes bar{50%{transform:scaleY(.35);opacity:.55}}

.player-controls-area{position:relative;z-index:1}
.visualizer{
    height:62px;display:flex;align-items:end;justify-content:center;
    gap:5px;margin-bottom:6px;
}
.visualizer i{
    width:5px;height:20px;border-radius:7px 7px 2px 2px;
    background:linear-gradient(#bc65ed,#6d2b91);
    box-shadow:0 0 10px rgba(183,102,238,.18);
    opacity:.9;
}
.visualizer i:nth-child(1){height:16px}.visualizer i:nth-child(2){height:30px}.visualizer i:nth-child(3){height:22px}
.visualizer i:nth-child(4){height:45px}.visualizer i:nth-child(5){height:34px}.visualizer i:nth-child(6){height:55px}
.visualizer i:nth-child(7){height:27px}.visualizer i:nth-child(8){height:42px}.visualizer i:nth-child(9){height:33px}
.visualizer i:nth-child(10){height:49px}.visualizer i:nth-child(11){height:23px}.visualizer i:nth-child(12){height:38px}
.visualizer i:nth-child(13){height:55px}.visualizer i:nth-child(14){height:29px}.visualizer i:nth-child(15){height:45px}
.visualizer i:nth-child(16){height:25px}.visualizer i:nth-child(17){height:51px}.visualizer i:nth-child(18){height:35px}
.visualizer i:nth-child(19){height:43px}.visualizer i:nth-child(20){height:22px}.visualizer i:nth-child(21){height:48px}
.visualizer i:nth-child(22){height:30px}.visualizer i:nth-child(23){height:55px}.visualizer i:nth-child(24){height:25px}
.visualizer i:nth-child(25){height:43px}.visualizer i:nth-child(26){height:34px}.visualizer i:nth-child(27){height:49px}
.visualizer i:nth-child(28){height:23px}.visualizer i:nth-child(29){height:39px}.visualizer i:nth-child(30){height:52px}
.visualizer i:nth-child(31){height:26px}.visualizer i:nth-child(32){height:45px}.visualizer i:nth-child(33){height:31px}
.visualizer i:nth-child(34){height:50px}.visualizer i:nth-child(35){height:21px}.visualizer i:nth-child(36){height:42px}
.visualizer i:nth-child(37){height:28px}.visualizer i:nth-child(38){height:52px}.visualizer i:nth-child(39){height:32px}
.visualizer i:nth-child(40){height:44px}

.visualizer.playing i{animation:visual 1s ease-in-out infinite alternate}
.visualizer.playing i:nth-child(2n){animation-delay:.16s}
.visualizer.playing i:nth-child(3n){animation-delay:.31s}
.visualizer.playing i:nth-child(4n){animation-delay:.47s}
@keyframes visual{from{transform:scaleY(.45);opacity:.55}to{transform:scaleY(1);opacity:1}}

.progress-wrap{cursor:pointer}
.progress-track{
    height:5px;background:#2d2035;border-radius:99px;overflow:hidden;
}
.progress-fill{
    height:100%;width:0;
    background:linear-gradient(90deg,#8b3cb2,#e1bc72);
    border-radius:inherit;
}
.time-line{
    display:flex;justify-content:space-between;
    direction:ltr;color:#9b8ca0;font-size:10px;margin-top:6px;
}
.controls{
    display:flex;justify-content:center;align-items:center;gap:18px;margin-top:15px;
}
.control-button{
    width:38px;height:38px;border-radius:50%;
    background:transparent;color:var(--gold-light);
    border:0;font-size:16px;transition:.18s;
}
.control-button:hover{transform:scale(1.08);color:#fff}
.control-button.small{font-size:17px}
.control-button.active{color:var(--purple-bright)}
.play-button{
    width:60px;height:60px;
    border:1px solid var(--purple-bright);
    color:var(--gold-light);
    background:rgba(90,35,121,.18);
    box-shadow:0 0 28px rgba(183,102,238,.25);
    font-size:22px;
}
.volume-row{
    display:flex;align-items:center;gap:10px;
    margin-top:14px;color:var(--gold-light);
    justify-content:flex-end;
}
.volume-row input{width:120px}
input[type=range]{accent-color:#c78cdb}
.settings-button{background:none;border:0;color:var(--gold);font-size:16px}

/* PLAYLIST */
.playlist-section{padding-top:26px}
.section-heading{
    display:flex;align-items:flex-end;justify-content:space-between;
    gap:20px;margin-bottom:15px;
}
.section-kicker{font-size:10px;color:var(--gold);letter-spacing:2px;direction:ltr}
.section-heading h2{
    margin:2px 0 0;font-size:26px;font-weight:800;
}
.section-heading h2 span{color:var(--gold);font-size:25px}
.playlist-actions{display:flex;gap:9px}
.sort-btn{
    color:#e7dce9;background:rgba(18,8,25,.8);
    border:1px solid rgba(183,102,238,.22);
    padding:9px 16px;border-radius:9px;font-size:12px;
}
.sort-btn.active,.sort-btn:hover{
    border-color:var(--purple-bright);
    box-shadow:0 0 20px rgba(183,102,238,.08);
}

.cards-grid{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:16px;
}
.track-card{
    position:relative;overflow:hidden;
    background:linear-gradient(180deg,rgba(26,12,37,.95),rgba(11,5,16,.98));
    border:1px solid rgba(183,102,238,.18);
    border-radius:15px;
    transition:.22s;
}
.track-card:hover{transform:translateY(-4px);border-color:rgba(183,102,238,.55)}
.track-card.active{
    border-color:#b766ee;
    box-shadow:0 0 28px rgba(183,102,238,.14);
}
.card-art{
    position:relative;aspect-ratio:1.35;overflow:hidden;
}
.card-art img{width:100%;height:100%;object-fit:cover;display:block;transition:.35s}
.track-card:hover .card-art img{transform:scale(1.05)}
.card-overlay{
    position:absolute;inset:0;
    background:linear-gradient(180deg,transparent 55%,rgba(5,2,9,.75));
}
.card-number{
    position:absolute;top:10px;left:11px;
    font-size:14px;color:#fff;text-shadow:0 2px 10px #000;
    direction:ltr;
}
.card-eq{
    position:absolute;top:9px;right:10px;
    color:var(--purple-bright);font-size:17px;
    opacity:0;
}
.track-card.active .card-eq{opacity:1}
.card-body{padding:10px 12px 12px}
.card-title{
    font-size:13px;font-weight:700;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;
}
.card-meta{font-size:10px;color:var(--gold-light);margin-top:3px}
.card-footer{
    display:flex;align-items:center;justify-content:space-between;
    margin-top:9px;
}
.card-play{
    width:28px;height:28px;border-radius:50%;
    background:transparent;border:0;color:var(--purple-bright);
    font-size:14px;
}
.card-download{
    color:var(--gold-light);font-size:17px;
    padding:2px 5px;opacity:.85;
}
.card-download:hover{opacity:1;color:#fff}

.empty-state{text-align:center;padding:80px 20px;color:var(--muted)}
.empty-icon{font-size:45px;color:var(--gold)}
.empty-state h3{color:#fff;margin:10px 0 5px}
.empty-state p{margin:0}

/* MINI PLAYER */
.mini-player{
    position:fixed;z-index:50;
    left:50%;bottom:12px;transform:translateX(-50%);
    width:min(1450px,96%);
    min-height:84px;
    display:flex;align-items:center;gap:13px;
    padding:9px 15px;
    background:rgba(12,5,18,.94);
    border:1px solid rgba(183,102,238,.28);
    border-radius:18px;
    box-shadow:0 20px 80px rgba(0,0,0,.65);
    backdrop-filter:blur(22px);
}
.mini-player.collapsed{transform:translate(-50%,calc(100% + 15px))}
.mini-player img{
    width:62px;height:62px;border-radius:10px;object-fit:cover;
    border:1px solid rgba(217,173,100,.28);
}
.mini-info{min-width:180px;max-width:220px}
.mini-info strong{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-info span{font-size:10px;color:var(--gold-light)}
.mini-icon,.mini-main{
    border:0;background:transparent;color:var(--gold-light);
    font-size:17px;min-width:32px;height:35px;
}
.mini-icon.active{color:var(--purple-bright)}
.mini-main{
    width:48px;height:48px;border-radius:50%;
    border:1px solid var(--gold);
    background:rgba(104,47,130,.22);
    color:#f4d79d;font-size:18px;
}
.mini-time{min-width:230px;flex:1;direction:ltr}
.mini-time span{display:block;text-align:center;color:#a99cad;font-size:10px}
.mini-progress{height:4px;background:#302437;border-radius:10px;margin-top:5px;overflow:hidden}
.mini-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#8742ad,#dfbd7b)}
.mini-volume{display:flex;align-items:center;gap:7px;color:var(--gold-light)}
.mini-volume input{width:95px}
.collapse{font-size:22px}

/* FOOTER */
.footer{
    border-top:1px solid rgba(217,173,100,.15);
    padding:25px 20px 115px;
    text-align:center;color:#867989;font-size:11px;
}
.footer-heart{color:var(--gold);font-size:18px;margin-top:4px}

/* RESPONSIVE */
@media(max-width:1150px){
    .cards-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .player-card{grid-template-columns:180px 190px 1fr}
    .player-art{width:170px;height:170px}
    .socials{display:none}
    .brand{min-width:210px}
}
@media(max-width:850px){
    .topbar-inner{min-height:64px}
    .brand-logo{width:48px;height:48px}
    .main-nav{
        display:none;
        position:absolute;top:64px;left:3%;right:3%;
        background:rgba(10,4,15,.97);
        border:1px solid var(--border);
        border-radius:0 0 15px 15px;
        flex-direction:column;height:auto;
    }
    .main-nav.open{display:flex}
    .nav-link{width:100%;text-align:center;padding:14px}
    .mobile-menu{display:block;margin-inline-start:auto}
    .hero{min-height:510px}
    .hero-logo{display:none}
    .hero-content{padding-top:115px}
    .player-card{
        grid-template-columns:145px 1fr;
        gap:17px;
    }
    .player-controls-area{grid-column:1/-1}
    .player-art{width:145px;height:145px}
    .player-title{font-size:22px}
    .mini-info{min-width:110px;max-width:150px}
    .mini-time{min-width:150px}
    .mini-volume{display:none}
}
@media(max-width:600px){
    .container{width:92%}
    .hero{min-height:475px}
    .hero-content{padding-bottom:28px}
    .hero-copy h1{font-size:53px}
    .hero-radio{font-size:42px}
    .hero-copy p{font-size:14px}
    .on-air-banner{font-size:11px;gap:7px;padding:8px 11px}
    .on-air-banner span:nth-of-type(2){display:none}
    .player-card{
        grid-template-columns:105px 1fr;
        padding:12px;
        gap:12px;
        border-radius:16px;
    }
    .player-art{width:105px;height:105px;border-radius:12px}
    .player-title{font-size:17px}
    .player-subtitle{font-size:10px}
    .mini-wave{margin-top:7px}
    .visualizer{height:45px;gap:3px}
    .visualizer i{width:3px}
    .visualizer i:nth-child(n+25){display:none}
    .controls{gap:7px}
    .control-button{width:34px;height:34px}
    .play-button{width:54px;height:54px}
    .volume-row{justify-content:center}
    .volume-row input{width:130px}
    .section-heading{align-items:flex-start;flex-direction:column}
    .playlist-actions{width:100%}
    .sort-btn{flex:1}
    .cards-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
    .card-title{font-size:12px}
    .mini-player{
        width:96%;bottom:7px;gap:5px;padding:7px 8px;
        min-height:66px;border-radius:14px;
    }
    .mini-player img{width:48px;height:48px}
    .mini-info{min-width:0;flex:1;max-width:none}
    .mini-info strong{font-size:11px}
    .mini-icon{display:none}
    .mini-main{width:40px;height:40px;min-width:40px;font-size:15px}
    .mini-time{display:none}
    .collapse{display:block;min-width:30px}
}
@media(max-width:380px){
    .cards-grid{grid-template-columns:1fr 1fr}
    .card-art{aspect-ratio:1.15}
    .brand-text{display:none}
}

.hero-play{
    margin-top:18px;
    border:1px solid rgba(217,173,100,.55);
    background:linear-gradient(135deg,rgba(122,52,163,.8),rgba(52,20,70,.9));
    color:var(--gold-light);
    border-radius:999px;
    padding:10px 22px;
    font-weight:700;
    box-shadow:0 10px 35px rgba(0,0,0,.25);
    transition:.2s;
}
.hero-play:hover{transform:translateY(-2px);box-shadow:0 15px 45px rgba(183,102,238,.18)}

.hero-play-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.hero-random {
    background: rgba(216,179,106,.12);
    border: 1px solid rgba(216,179,106,.55);
    color: #d8b36a;
}

.hero-random:hover {
    background: rgba(216,179,106,.22);
    color: #fff;
}

@media (max-width: 600px) {
    .hero-play-actions {
        flex-direction: column;
        width: 100%;
    }

    .hero-play-actions .hero-play {
        width: 100%;
    }
}

.radio-start-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(24, 8, 35, 0.97);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.radio-start-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.radio-start-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 34px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50px;
    background: transparent;
    color: #fff;
    font-size: 21px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.25s ease, background 0.25s ease;
}

.radio-start-button:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: scale(1.04);
}

.radio-start-button:active {
    transform: scale(0.97);
}

.radio-start-icon {
    font-size: 27px;
}

@media (max-width: 600px) {
    .radio-start-button {
        padding: 16px 28px;
        font-size: 18px;
    }

    .radio-start-icon {
        font-size: 24px;
    }
}
.radio-start-logo {
    width: 180px;
    height: 180px;
    object-fit: contain;
    cursor: pointer;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.radio-start-logo:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 0 18px rgba(180, 120, 255, 0.45));
}

.radio-start-logo:active {
    transform: scale(0.97);
}

@media (max-width: 600px) {
    .radio-start-logo {
        width: 145px;
        height: 145px;
    }
}
/* =========================================
   Radio Share
   ========================================= */

.radio-share {
    width: 100%;
    margin: 18px auto 8px;
    text-align: center;
}

.radio-share-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
    font-weight: 600;
}

.radio-share-headphone {
    font-size: 15px;
}

.radio-share-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.radio-share-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    text-decoration: none;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.radio-share-btn:hover {
    transform: translateY(-3px) scale(1.06);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.25);
}

.radio-share-btn:active {
    transform: scale(0.94);
}

.share-facebook:hover {
    background: #1877f2;
}

.share-whatsapp:hover {
    background: #25d366;
}

.share-x:hover {
    background: #000;
}

.share-telegram:hover {
    background: #229ed9;
}

.share-copy:hover {
    background: #7b4ab8;
}

.share-copy-message {
    display: none;
    margin-top: 9px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
}

.share-copy-message.show {
    display: block;
}

@media (max-width: 600px) {

    .radio-share {
        margin-top: 15px;
    }

    .radio-share-buttons {
        gap: 8px;
    }

    .radio-share-btn {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .radio-share-title {
        font-size: 13px;
    }
}
/* =========================================
   MP3 DOWNLOAD MODAL
   ========================================= */

body.mp3-modal-open {
    overflow: hidden;
}

.mp3-download-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;

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

    padding: 20px;

    visibility: hidden;
    opacity: 0;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}

.mp3-download-modal.show {
    visibility: visible;
    opacity: 1;
}

.mp3-download-backdrop {
    position: absolute;
    inset: 0;

    background:
        rgba(5, 2, 10, .82);

    backdrop-filter: blur(8px);
}

.mp3-download-dialog {
    position: relative;
    z-index: 2;

    width: min(480px, 100%);

    padding: 30px 26px 26px;

    border: 1px solid rgba(216, 179, 106, .35);
    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(30, 13, 45, .98),
            rgba(9, 4, 16, .98)
        );

    box-shadow:
        0 30px 90px rgba(0, 0, 0, .65),
        0 0 40px rgba(120, 55, 180, .16);

    text-align: center;

    transform: translateY(20px) scale(.97);

    transition:
        transform .3s ease;
}

.mp3-download-modal.show .mp3-download-dialog {
    transform: translateY(0) scale(1);
}

.mp3-download-close {
    position: absolute;

    top: 12px;
    left: 12px;

    width: 38px;
    height: 38px;

    border: 0;
    border-radius: 50%;

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

    color: rgba(255,255,255,.75);

    font-size: 27px;
    line-height: 1;

    cursor: pointer;

    transition: .2s ease;
}

.mp3-download-close:hover {
    background: rgba(216,179,106,.18);
    color: #fff;
}

.mp3-download-icon {
    width: 62px;
    height: 62px;

    margin: 0 auto 14px;

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

    border-radius: 50%;

    background: rgba(216,179,106,.10);

    border: 1px solid rgba(216,179,106,.30);

    color: #d8b36a;

    font-size: 29px;
}

.mp3-download-heading span {
    display: block;

    color: #d8b36a;

    font-size: 13px;

    margin-bottom: 6px;
}

.mp3-download-heading h3 {
    margin: 0 0 22px;

    color: #fff;

    font-size: 22px;

    font-weight: 700;

    line-height: 1.5;
}

/* AdSense area */

.mp3-download-ad {
    margin: 0 auto 22px;

    padding: 10px;

    min-height: 120px;

    border-radius: 14px;

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

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

.mp3-download-ad-label {
    margin-bottom: 6px;

    color: rgba(255,255,255,.38);

    font-size: 10px;
}

.mp3-adsense-slot {
    min-height: 90px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: rgba(255,255,255,.20);

    font-size: 11px;
}

/* Timer */

.mp3-download-timer-box {
    margin-bottom: 20px;
}

.mp3-download-timer {
    width: 76px;
    height: 76px;

    margin: 0 auto 10px;

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

    border-radius: 50%;

    border: 3px solid rgba(216,179,106,.30);

    color: #d8b36a;

    font-size: 28px;
    font-weight: 700;
}

.mp3-download-timer-text {
    color: rgba(255,255,255,.65);

    font-size: 14px;
}

.mp3-download-progress {
    height: 5px;

    margin-top: 13px;

    overflow: hidden;

    border-radius: 20px;

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

.mp3-download-progress span {
    display: block;

    width: 0;
    height: 100%;

    border-radius: inherit;

    background: #d8b36a;

    transition: width 1s linear;
}

/* Download button */

.mp3-download-button {
    width: 100%;

    min-height: 54px;

    border: 0;

    border-radius: 15px;

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

    color: rgba(255,255,255,.35);

    font-size: 17px;
    font-weight: 700;

    cursor: not-allowed;

    transition: .25s ease;
}

.mp3-download-button span:first-child {
    margin-left: 7px;
}

.mp3-download-button.ready {
    background: #d8b36a;

    color: #160d05;

    cursor: pointer;

    box-shadow:
        0 8px 30px rgba(216,179,106,.18);
}

.mp3-download-button.ready:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 35px rgba(216,179,106,.28);
}

@media (max-width: 600px) {

    .mp3-download-modal {
        padding: 14px;
    }

    .mp3-download-dialog {
        padding: 28px 18px 20px;

        border-radius: 21px;
    }

    .mp3-download-heading h3 {
        font-size: 19px;
    }

    .mp3-download-ad {
        min-height: 110px;
    }
}