/*==================================================
RADIO PLAYER MINI
==================================================*/

.radio-player{
    width:100%;
    max-width:1200px;
    margin:25px auto;
    font-family:Arial,Helvetica,sans-serif;
}

.radio-player__mini{
    position:relative;
    display:flex;
    align-items:center;
    background:#E9E4B5;
    border-radius:12px;
    padding:14px 22px;
    overflow:hidden;
}

/*=========================================
FONDO
=========================================*/

.radio-player__background{
    position:absolute;
    inset:0;
    background: linear-gradient(rgb(0 0 0 / 22%), rgba(255, 255, 255, .15)), #E9E4B5;
    z-index:0;

}

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

.radio-player__left{
    position:relative;
    z-index:2;
    width:100%;
    padding-right:220px;
}

/*=========================================
BARRA
=========================================*/

.radio-player__progress{
    width:100%;
    margin-bottom:12px;
}

#progress{
    width:100%;
    appearance:none;
    height:5px;
    background:#ffffff;
    border-radius:20px;
    outline:none;
    cursor:pointer;
}

#progress::-webkit-slider-thumb{
    appearance:none;
    width:12px;
    height:12px;
    background:#B95DFF;
    border-radius:50%;
    cursor:pointer;
}

#progress::-moz-range-thumb{
    width:12px;
    height:12px;
    background:#B95DFF;
    border:none;
    border-radius:50%;
}

/*=========================================
INFO + CONTROLES
=========================================*/

.radio-player__bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

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

.radio-player__info{
    font-size:15px;
    color:#5A4A97;
    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.radio-player__separator{
    margin:0 8px;
    color:#7b6ab2;
}

/*=========================================
CONTROLES
=========================================*/

.radio-player__controls{
    display:flex;
    align-items:center;
    gap:12px;
}

/*=========================================
BOTONES
=========================================*/

.radio-btn{
    background:none;
    border:none;
    cursor:pointer;
    color:#B95DFF;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
}

.radio-btn svg{
    width:18px;
    height:18px;
    fill:#B95DFF;
}

.radio-btn--play{
    width:auto;
    height:auto;
    background:none;
    border-radius:0;
    box-shadow:none;
}

.radio-btn--play svg{
    width:22px;
    height:22px;
}

/*=========================================
VOLUMEN
=========================================*/

.radio-player__volume{
    display:flex;
    align-items:center;
    gap:8px;
}

.radio-player__volume svg{
    width:18px;
    height:18px;
    fill:#B95DFF;
}

#volume{
    width:70px;
    appearance:none;
    height:4px;
    background:#B95DFF;
    border-radius:30px;
}

#volume::-webkit-slider-thumb{
    appearance:none;
    width:10px;
    height:10px;
    border-radius:50%;
    background:#B95DFF;
}

#volume::-moz-range-thumb{
    width:10px;
    height:10px;
    border:none;
    border-radius:50%;
    background:#B95DFF;
}

/*=========================================
TIEMPO
=========================================*/

.radio-player__time{
    color:#B95DFF;
    font-size:14px;
    font-weight:bold;
    white-space:nowrap;
}

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

.radio-player__logo{
    position:absolute;
    right:8px;
    top:50%;
    transform:translateY(-50%);
    z-index:3;
}

.radio-player__logo img{
    width:175px;
    height:auto;
    display:block;
}

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

.radio-player__footer{
    margin-top:8px;
}

.radio-player__toggle{
    background:none;
    border:none;
    color:#6F41D8;
    cursor:pointer;
    font-size:14px;
    font-weight:bold;
    padding:0;
}

.radio-player__toggle:hover{
    text-decoration:underline;
}

/*==================================================
PLAYLIST
==================================================*/

.radio-player__playlist{
    display:none;
    margin-top:8px;
    background:#F8F6E4;
    border-radius:0 0 14px 14px;
    border:1px solid #DDD6A8;
    overflow:hidden;
}

.radio-player__playlist.is-open{
    display:block;
    animation:playlistFade .3s ease;
}

.radio-player__playlist-list{
    margin:0;
    padding:10px;
    list-style:none;
    max-height:420px;
    overflow-y:auto;
}

.radio-player__playlist-item{
    display:flex;
    align-items:center;
    gap:16px;
    padding:10px 14px;
    margin-bottom:8px;
    border-radius:10px;
    cursor:pointer;
    transition:.25s;
    position:relative;
    background:#FFF;
    border:1px solid transparent;
}

.radio-player__playlist-item:last-child{
    margin-bottom:0;
}

.radio-player__playlist-item:hover{
    background:#F4F0FF;
    border-color:#D7C7FF;
}

/*==================================================
IMAGEN
==================================================*/

.radio-player__playlist-thumb{
    width:56px;
    min-width:56px;
    height:56px;
    border-radius:8px;
    overflow:hidden;
    background:#DDD;
    box-shadow:0 2px 6px rgba(0,0,0,.08);
}

.radio-player__playlist-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.radio-player__playlist-thumb--empty{
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:20px;
    background:#EEE;
}

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

.radio-player__playlist-info{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:3px;
}

.radio-player__playlist-title{
    font-size:15px;
    color:#2D2D2D;
    font-weight:700;
}

.radio-player__playlist-meta{
    display:flex;
    align-items:center;
    gap:8px;
}

.radio-player__playlist-type{
    font-size:12px;
    color:#777;
    text-transform:uppercase;
    letter-spacing:.5px;
}

.radio-player__playlist-featured{
    background:#6F41D8;
    color:#FFF;
    padding:2px 8px;
    border-radius:20px;
    font-size:10px;
    font-weight:bold;
}

/*==================================================
LADO DERECHO
==================================================*/

.radio-player__playlist-right{
    display:flex;
    align-items:center;
    gap:14px;
}

.radio-player__playlist-duration{
    color:#777;
    font-size:13px;
    font-weight:600;
    min-width:45px;
    text-align:right;
}

.radio-player__playlist-icon{
    width:30px;
    height:30px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#EFE8FF;
    color:#6F41D8;
    opacity:0;
    transition:.25s;
}

.radio-player__playlist-item:hover .radio-player__playlist-icon{
    opacity:1;
}

/*==================================================
ACTIVO
==================================================*/

.radio-player__playlist-item.is-active{
    background:#F1ECFF;
    border-color:#CDBAFF;
}

.radio-player__playlist-item.is-active::before{
    content:"";
    position:absolute;
    left:0;
    top:8px;
    bottom:8px;
    width:4px;
    border-radius:4px;
    background:#6F41D8;
}

/*==================================================
REPRODUCIENDO
==================================================*/

.radio-player__playlist-item.is-playing{
    background:#ECE4FF;
}

.radio-player__playlist-item.is-playing .radio-player__playlist-title{
    color:#6F41D8;
}

.radio-player__playlist-item.is-playing .radio-player__playlist-icon{
    opacity:1;
    background:#6F41D8;
    color:#FFF;
}

/*==================================================
SCROLL
==================================================*/

.radio-player__playlist-list::-webkit-scrollbar{
    width:6px;
}

.radio-player__playlist-list::-webkit-scrollbar-track{
    background:transparent;
}

.radio-player__playlist-list::-webkit-scrollbar-thumb{
    background:#C8B8F7;
    border-radius:20px;
}

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

@media(max-width:768px){
    .radio-player__playlist-item{
        gap:12px;
        padding:10px;
    }

    .radio-player__playlist-thumb{
        width:48px;
        min-width:48px;
        height:48px;
    }

    .radio-player__playlist-title{
        font-size:14px;
    }

    .radio-player__playlist-right{
        flex-direction:column;
        gap:5px;
    }
}