/*==================================================
LISTEN MODE
==================================================*/

.reader-player {
    position: fixed;
    inset: 0;

    background: rgba(15, 18, 22, .92);

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

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

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity .35s ease,
                visibility .35s ease;

    z-index: 9999;
}

.reader-player.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


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

.player-window {
    position: relative;

    width: min(520px, calc(100% - 40px));

    padding: 32px;

    background: #fffdf8;

    border: 1px solid rgba(60, 80, 70, 0.15);

    border-radius: 18px;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.15);
}

/*==================================================
CLOSE BUTTON
==================================================*/

.player-close{

    position:absolute;

    top:20px;

    right:20px;

    width:40px;

    height:40px;

    border:none;

    border-radius:50%;

    background:#ECE7DF;

    cursor:pointer;

    transition:.3s;

}

.player-close:hover{

    background:#D8D0C7;

}

/*==================================================
LABEL
==================================================*/

.player-label{

    letter-spacing:.35em;

    text-transform:uppercase;

    font-size:.72rem;

    color:var(--gold);

}

/*==================================================
TITLE
==================================================*/

.player-window h2{

    margin:18px 0 10px;

    font-family:"Cormorant Garamond",serif;

    font-size:3rem;

    font-weight:500;

    color:#222;

}

.player-author{

    color:#777;

    margin-bottom:35px;

}

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

.play-button {
    width: 88px;
    height: 88px;

    border: none;
    border-radius: 50%;

    background: var(--green);
    color: white;

    font-size: 1.5rem;

    cursor: pointer;

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

    margin: 0 auto;

    transition: .35s;
}

/*==================================================
PROGRESS
==================================================*/

.progress-wrapper{

    margin-top:45px;

    display:grid;

    grid-template-columns:55px 1fr 55px;

    align-items:center;

    gap:15px;

}

.progress-wrapper span{

    font-size:.85rem;

    color:#777;

}

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

#progressBar{

    appearance:none;

    width:100%;

    height:4px;

    border-radius:999px;

    background:#DDD;

    outline:none;

}

#progressBar::-webkit-slider-thumb{

    appearance:none;

    width:15px;

    height:15px;

    border-radius:50%;

    background:var(--green);

    cursor:pointer;

}

/*==================================================
SPEED
==================================================*/

.speed-control{

    margin-top:35px;

    display:flex;

    justify-content:center;

    gap:12px;

}

.speed{

    border:none;

    padding:10px 18px;

    border-radius:999px;

    background:#ECE7DF;

    cursor:pointer;

    transition:.3s;

}

.speed.active{

    background:var(--green);

    color:white;

}

/*==================================================
CONTINUE
==================================================*/

.continue-reading-btn{

    margin-top:40px;

    border:none;

    padding:14px 26px;

    border-radius:999px;

    background:var(--gold);

    color:white;

    cursor:pointer;

    transition:.3s;

}

.continue-reading-btn:hover{

    transform:translateY(-2px);

}

/*==================================================
HIDE DEFAULT AUDIO
==================================================*/

audio{

    display:none;

}

@media(max-width:768px){

.player-window{

padding:35px 25px;

}

.player-window h2{

font-size:2.3rem;

}

.play-button{

width:74px;

height:74px;

}

}

@media(max-width:768px){

.player-window{

padding:35px 25px;

}

.player-window h2{

font-size:2.3rem;

}

.play-button{

width:74px;

height:74px;

}

}