/* ==========================================================
   RADIO HIT FM HAITI PLAYER
   Version 2.0
========================================================== */

/* ==========================================================
   VARIABLES
========================================================== */

:root{

    --primary:#ff2c7d;
    --primary-hover:#ff4f97;

    --secondary:#234C6A;

    --accent:#FEB21A;

    --background:#090909;

    --surface:#111111;

    --surface-light:#1d1d1d;

    --text:#ffffff;

    --muted:#b6b6b6;

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

    --shadow:0 -8px 25px rgba(0,0,0,.40);

}

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

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

/* ==========================================================
   BODY
========================================================== */

body{

    padding-bottom:72px;

}

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

#radio-hit-player{

    position:fixed;

    left:0;

    bottom:0;

    width:100%;

    height:72px;

    background:rgba(10,10,10,.96);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

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

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 26px;

    z-index:99999999;

    box-shadow:var(--shadow);

}

/* ==========================================================
   TOP BORDER
========================================================== */

#radio-hit-player::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:2px;

    background:

    linear-gradient(

        90deg,

        var(--accent),

        var(--primary),

        var(--secondary)

    );

}

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

.rhp-left{

    display:flex;

    align-items:center;

    gap:14px;

    width:34%;

}

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

.rhp-cover{

    width:50px;

    height:50px;

    border-radius:12px;

    overflow:hidden;

    flex-shrink:0;

    background:#fff;

    box-shadow:0 5px 15px rgba(0,0,0,.35);

}

.rhp-cover img{

    width:100%;

    height:100%;

    object-fit:cover;

}

/* ==========================================================
   INFO
========================================================== */

.rhp-info{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.rhp-live{

    display:flex;

    align-items:center;

    gap:6px;

    color:#ff4b4b;

    font-size:10px;

    letter-spacing:1px;

    font-weight:700;

    margin-bottom:3px;

}

.rhp-live-dot{

    width:8px;

    height:8px;

    border-radius:50%;

    background:#ff2b2b;

    animation:rhpPulse 1s infinite;

}

.rhp-info h3{

    color:var(--text);

    font-size:15px;

    font-weight:700;

    line-height:1.1;

}

.rhp-info p{

    margin-top:2px;

    font-size:11px;

    color:var(--muted);

}

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

.rhp-center{

    width:32%;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

}

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

.rhp-btn{

    border:none;

    outline:none;

    cursor:pointer;

    transition:.25s ease;

}

.rhp-btn.play{

    width:52px;

    height:52px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--primary-hover),
        var(--primary)
    );

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    box-shadow:0 8px 20px rgba(255,44,125,.30);

}

.rhp-btn.play:hover{

    transform:scale(1.06);

}

.rhp-btn.play:active{

    transform:scale(.95);

}

/* ==========================================================
   EQUALIZER
========================================================== */

.rhp-wave{

    display:flex;

    align-items:flex-end;

    justify-content:center;

    gap:3px;

    height:24px;

    width:58px;

    opacity:.35;

    transition:.35s;

}

.rhp-wave span{

    width:3px;

    height:8px;

    border-radius:20px;

    background:linear-gradient(
        to top,
        var(--primary),
        #ffc4de
    );

    animation:rhpWave 1s linear infinite;

}

.rhp-wave span:nth-child(1){animation-delay:.10s;}
.rhp-wave span:nth-child(2){animation-delay:.35s;}
.rhp-wave span:nth-child(3){animation-delay:.55s;}
.rhp-wave span:nth-child(4){animation-delay:.20s;}
.rhp-wave span:nth-child(5){animation-delay:.75s;}
.rhp-wave span:nth-child(6){animation-delay:.45s;}
.rhp-wave span:nth-child(7){animation-delay:.25s;}
.rhp-wave span:nth-child(8){animation-delay:.60s;}

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

.rhp-right{

    width:34%;

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:12px;

}

/* ==========================================================
   VOLUME BUTTON
========================================================== */

.rhp-volume-btn{

    width:36px;

    height:36px;

    border-radius:50%;

    border:none;

    outline:none;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#232323;

    color:#ffffff;

    transition:.25s;

}

.rhp-volume-btn:hover{

    background:var(--primary);

    color:#fff;

}

.rhp-volume-btn i{

    font-size:15px;

    opacity:1 !important;

    visibility:visible !important;

}

/* ==========================================================
   VOLUME SLIDER
========================================================== */

#rhpVolume{

    width:135px;

    appearance:none;

    height:5px;

    border-radius:30px;

    background:#343434;

    outline:none;

    cursor:pointer;

}

#rhpVolume::-webkit-slider-thumb{

    appearance:none;

    width:15px;

    height:15px;

    border-radius:50%;

    background:var(--primary);

    cursor:pointer;

}

#rhpVolume::-moz-range-thumb{

    width:15px;

    height:15px;

    border:none;

    border-radius:50%;

    background:var(--primary);

    cursor:pointer;

}

/* ==========================================================
   LOADING STATE
========================================================== */

.rhp-btn.play.loading{

    pointer-events:none;

    opacity:.7;

    animation:rhpLoading .9s linear infinite;

}

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

@keyframes rhpPulse{

    0%{

        transform:scale(1);

        opacity:1;

    }

    50%{

        transform:scale(1.45);

        opacity:.45;

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}

@keyframes rhpWave{

    0%{

        height:5px;

    }

    25%{

        height:16px;

    }

    50%{

        height:8px;

    }

    75%{

        height:22px;

    }

    100%{

        height:5px;

    }

}

@keyframes rhpLoading{

    0%{

        transform:rotate(0deg);

    }

    100%{

        transform:rotate(360deg);

    }

}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width:992px){

    body{

        padding-bottom:66px;

    }

    #radio-hit-player{

        height:66px;

        padding:0 14px;

    }

    .rhp-left{

        width:42%;

        gap:10px;

    }

    .rhp-center{

        width:26%;

        gap:12px;

    }

    .rhp-right{

        width:32%;

        gap:8px;

    }

    .rhp-cover{

        width:42px;

        height:42px;

    }

    .rhp-info h3{

        font-size:13px;

    }

    .rhp-info p{

        font-size:10px;

    }

    .rhp-btn.play{

        width:44px;

        height:44px;

        font-size:16px;

    }

    .rhp-wave{

        width:44px;

        gap:2px;

    }

    .rhp-wave span{

        width:2px;

    }

    #rhpVolume{

        width:90px;

    }

}

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

@media (max-width:640px){

    body{

        padding-bottom:60px;

    }

    #radio-hit-player{

        height:60px;

        padding:0 10px;

    }

    .rhp-left{

        width:auto;

        flex:1;

        gap:8px;

        overflow:hidden;

    }

    .rhp-center{

        width:auto;

        gap:8px;

        margin:0 8px;

    }

    .rhp-right{

        width:auto;

        gap:6px;

    }

    .rhp-cover{

        width:36px;

        height:36px;

        border-radius:8px;

    }

    .rhp-live{

        font-size:8px;

        margin-bottom:1px;

    }

    .rhp-live-dot{

        width:6px;

        height:6px;

    }

    .rhp-info h3{

        font-size:11px;

        white-space:nowrap;

        overflow:hidden;

        text-overflow:ellipsis;

    }

    .rhp-info p{

        display:none;

    }

    .rhp-btn.play{

        width:38px;

        height:38px;

        font-size:14px;

    }

    .rhp-wave{

        width:30px;

        gap:2px;

    }

    .rhp-wave span{

        width:2px;

    }

    .rhp-volume-btn{

        width:28px;

        height:28px;

    }

    .rhp-volume-btn i{

        font-size:12px;

    }

    #rhpVolume{

        width:55px;

        height:4px;

    }

}

/* ==========================================================
   VERY SMALL DEVICES
========================================================== */

@media (max-width:420px){

    .rhp-wave{

        display:none;

    }

    #rhpVolume{

        display:none;

    }

}