.elin-player{

    background:#fcfcfc;
    border: 1px solid #D0D5DD;
    border-radius:16px;

    padding:32px;

    direction:rtl;

    font-family:inherit;
}
.elin-time,.elin-controls {
    direction: ltr;
}

.elin-top h2{

    margin:0;

    font-size:32px;

    font-weight:700;

    color:#111827;
}

.elin-top p{

    color:#6b7280;

    margin-top:8px;
}

.waveform{
    width: 100%;
    margin:24px 0;
}

.elin-time{

    display:flex;
    align-items: center;
    justify-content:space-between;
    gap: 20px;
    color:#6b7280;

    margin-top:20px;
}

.elin-controls{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    flex-wrap:nowrap;
    border: 1px solid #EAECF0;
    padding: 0 16px;
    border-radius: 8px;
    background: #F9FAFB;
}


.elin-controls button{

    border:none;

    background:transparent;

    border-radius:14px;
    padding:8px;

    cursor:pointer;

    font-size:16px;
    color: #667085;
}


button.play {
    width:56px;

    height:56px;

    border-radius:50% !important;

    color:white;
    display: flex;
    align-items: center;
    justify-content: center;
}
.backward,.forward {
    display: flex;
    align-items: center;
    gap: 3px;
}
.backward svg,.forward svg {
    margin-top: 3px;
}
.play-wrap {
    display: flex;
    gap: 24px;
}
.speed-wrap{

    display:flex;

    align-items:center;

    gap: 20px;
}

.speed-value{

    width:28px;

    height:28px;

    border-radius:50%;

    background:#6bb29d;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;
}

/*///////*/
.speed-controller{
    width:100%;
    display:flex;
    justify-content:center;
}

.speed-slider{
    width:200px;
    height:70px;
    position:relative;

    display:flex;
    justify-content:space-between;
    align-items:center;
}

.speed-line{
    position:absolute;
    left:8px;
    right:8px;
    height:2px;
    background:#ddd;
    border-radius:10px;
}

.speed-step{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#61b09b;
    cursor:pointer;
    z-index:1;
}

.speed-knob{
    width:40px;
    height:40px;
    border-radius:50%;
    background:#61b09b;

    position:absolute;
    top:50%;
    left:50%;

    transform:translate(-50%, -50%);

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

    color:#fff;
    font-weight:bold;
    font-size:14px;

    transition:.25s ease;

    z-index:2;

    user-select:none;
}


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

.mobile-speed{
    display:none;
}

/* دکمه اصلی */

.mobile-speed-btn{
    width:32px;
    height:32px;
    border-radius:50%;
    background:#61b09b;

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

    color:#fff;
    font-size:12px;
    font-weight:bold;

    cursor:pointer;
}

/* popup */

.mobile-popup{
    position:fixed;
    inset:0;

    background:rgba(0,0,0,.35);

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

    opacity:0;
    pointer-events:none;

    transition:.2s ease;

    z-index:999;
}

.mobile-popup.show{
    opacity:1;
    pointer-events:auto;
}

.mobile-popup-content{
    width:90%;
    max-width:360px;

    background:#fff;
    border-radius:24px;

    padding:40px 20px;
}

/* slider inside popup */

.mobile-speed-slider{
    width:100%;
    height:70px;

    position:relative;

    display:flex;
    align-items:center;
    justify-content:space-between;
}

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

@media(max-width:768px){

    .speed-controller{
        display:none;
        
    }

    .mobile-speed{
        display:flex;
        justify-content:center;
    }
    .elin-player{
        padding: 16px;
    }
    .speed-wrap{
        gap: 4px;
    }
    .speed-wrap > span {
        font-size: 10px;
        width: 100%;
    }
    .play-wrap {
        gap: 8px;
    }
    .elin-controls {
        padding: 8px;
    }
    

}