/*
|--------------------------------------------------------------------------
| PLAYER
|--------------------------------------------------------------------------
*/

.fajar-player{

    min-height:100vh;

    background:#0F172A;

    padding:70px 0;

}

.fajar-player-container{

    width:min(1300px,92%);

    margin:0 auto;

    display:grid;

    grid-template-columns:380px 1fr;

    gap:60px;

    align-items:start;

}


/*
|--------------------------------------------------------------------------
| COUVERTURE
|--------------------------------------------------------------------------
*/

.fajar-player-cover{

    position:sticky;

    top:40px;

}

.fajar-player-cover img{

    width:100%;

    display:block;

    border-radius:18px;

    box-shadow:

        0 25px 60px rgba(0,0,0,.45);

}


/*
|--------------------------------------------------------------------------
| CONTENU
|--------------------------------------------------------------------------
*/

.fajar-player-content{

    color:#FFF;

}

.fajar-player-content h1{

    margin:0;

    font-size:46px;

    line-height:1.2;

    font-weight:800;

}

.fajar-player-author{

    margin:18px 0 8px;

    font-size:20px;

    color:#D4AF37;

}

.fajar-player-duration{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:10px;

    padding:10px 16px;

    border-radius:999px;

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

    color:#E5E7EB;

    font-size:15px;

}
/*
|--------------------------------------------------------------------------
| LECTEUR AUDIO
|--------------------------------------------------------------------------
*/

.fajar-player-audio{

    margin-top:40px;

}

.fajar-player-audio audio{

    display:none;

}


/*
|--------------------------------------------------------------------------
| CONTRÔLES
|--------------------------------------------------------------------------
*/

.fajar-player-controls{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:20px;

    margin:35px 0;

}

.fajar-player-controls button{

    border:none;

    outline:none;

    cursor:pointer;

    transition:.25s;

}

#fajar-play{

    width:78px;

    height:78px;

    border-radius:50%;

    background:var(--fajar-gold);

    color:#111827;

    font-size:28px;

    font-weight:700;

}

#fajar-play:hover{

    transform:scale(1.08);

}

#fajar-backward,

#fajar-forward{

    padding:14px 22px;

    border-radius:999px;

    background:#1E293B;

    color:#FFF;

    font-size:15px;

    font-weight:600;

}

#fajar-backward:hover,

#fajar-forward:hover{

    background:#334155;

}


/*
|--------------------------------------------------------------------------
| BARRE DE PROGRESSION
|--------------------------------------------------------------------------
*/

.fajar-player-progress{

    display:grid;

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

    align-items:center;

    gap:18px;

    margin-top:20px;

}

#fajar-current-time,

#fajar-duration{

    color:#CBD5E1;

    font-size:14px;

    font-weight:600;

    text-align:center;

}

#fajar-progress{

    width:100%;

    height:6px;

    cursor:pointer;

    accent-color:var(--fajar-gold);

}


/*
|--------------------------------------------------------------------------
| VITESSE
|--------------------------------------------------------------------------
*/

.fajar-player-speed{

    display:flex;

    align-items:center;

    gap:15px;

    margin-top:30px;

}

.fajar-player-speed label{

    color:#CBD5E1;

    font-weight:600;

}

#fajar-speed{

    min-width:140px;

    height:46px;

    border:none;

    border-radius:10px;

    background:#1E293B;

    color:#FFF;

    padding:0 15px;

    outline:none;

}
/*
|--------------------------------------------------------------------------
| CHAPITRES
|--------------------------------------------------------------------------
*/

.fajar-player-chapters{

    margin-top:60px;

}

.fajar-player-chapters h2{

    margin:0 0 25px;

    color:#FFF;

    font-size:30px;

    font-weight:700;

}

.fajar-player-chapters ul{

    margin:0;

    padding:0;

    list-style:none;

}

.fajar-player-chapters li{

    margin-bottom:12px;

}

.fajar-player-chapter{

    width:100%;

    display:flex;

    align-items:center;

    gap:18px;

    padding:18px 22px;

    border:none;

    border-radius:14px;

    background:#1E293B;

    color:#FFF;

    cursor:pointer;

    transition:.25s;

    text-align:left;

}

.fajar-player-chapter:hover{

    background:#334155;

    transform:translateX(6px);

}

.fajar-player-chapter-number{

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--fajar-gold);

    color:#111827;

    font-weight:700;

    flex-shrink:0;

}

.fajar-player-chapter-title{

    font-size:16px;

    font-weight:600;

}


/*
|--------------------------------------------------------------------------
| DESCRIPTION
|--------------------------------------------------------------------------
*/

.fajar-player-description{

    margin-top:70px;

}

.fajar-player-description h2{

    margin-bottom:25px;

    color:#FFF;

    font-size:30px;

    font-weight:700;

}

.fajar-player-description-content{

    background:#1E293B;

    border-radius:18px;

    padding:30px;

    color:#CBD5E1;

    line-height:1.9;

    font-size:16px;

}

.fajar-player-description-content p:first-child{

    margin-top:0;

}

.fajar-player-description-content p:last-child{

    margin-bottom:0;

}


/*
|--------------------------------------------------------------------------
| LIVRES SIMILAIRES
|--------------------------------------------------------------------------
*/

.fajar-player-related{

    margin-top:80px;

}

.fajar-player-related h2{

    margin-bottom:30px;

    color:#FFF;

    font-size:30px;

    font-weight:700;

}

.fajar-player-related-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));

    gap:24px;

}
/*
|--------------------------------------------------------------------------
| ANIMATIONS
|--------------------------------------------------------------------------
*/

.fajar-player *{

    box-sizing:border-box;

}

.fajar-player button{

    transition:

        background .25s,

        color .25s,

        transform .25s,

        box-shadow .25s;

}

.fajar-player button:hover{

    box-shadow:

        0 10px 25px rgba(0,0,0,.25);

}

.fajar-player img{

    user-select:none;

    -webkit-user-drag:none;

}


/*
|--------------------------------------------------------------------------
| SCROLLBAR
|--------------------------------------------------------------------------
*/

.fajar-player ::-webkit-scrollbar{

    width:8px;

    height:8px;

}

.fajar-player ::-webkit-scrollbar-thumb{

    background:#475569;

    border-radius:999px;

}

.fajar-player ::-webkit-scrollbar-track{

    background:transparent;

}


/*
|--------------------------------------------------------------------------
| RESPONSIVE
|--------------------------------------------------------------------------
*/

@media (max-width:1100px){

    .fajar-player-container{

        grid-template-columns:320px 1fr;

        gap:40px;

    }

    .fajar-player-content h1{

        font-size:38px;

    }

}

@media (max-width:900px){

    .fajar-player-container{

        grid-template-columns:1fr;

    }

    .fajar-player-cover{

        position:relative;

        top:auto;

        max-width:420px;

        margin:0 auto;

    }

    .fajar-player-content{

        margin-top:40px;

    }

}

@media (max-width:768px){

    .fajar-player{

        padding:40px 0;

    }

    .fajar-player-content h1{

        font-size:30px;

    }

    .fajar-player-author{

        font-size:18px;

    }

    .fajar-player-controls{

        gap:12px;

        flex-wrap:wrap;

    }

    #fajar-play{

        width:64px;

        height:64px;

        font-size:24px;

    }

    #fajar-backward,

    #fajar-forward{

        padding:12px 18px;

    }

    .fajar-player-progress{

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

        gap:10px;

    }

    .fajar-player-speed{

        flex-direction:column;

        align-items:flex-start;

    }

    .fajar-player-related-grid{

        grid-template-columns:1fr;

    }

}

@media (max-width:480px){

    .fajar-player-content h1{

        font-size:26px;

    }

    .fajar-player-description-content{

        padding:20px;

    }

    .fajar-player-chapter{

        padding:15px;

    }

}