/* محتویات همان style که فرستادی */
button {
    background: none;
    outline: none;
}
.container { max-width: 800px; margin: 0 auto; }
.p-wrapper {
    background: #fbecec;
    /*display: flex; justify-content: center; align-items: center;*/
    padding: 10px 10px; border-radius: 10px; box-shadow: 6px 6px 9px rgba(0, 0, 0, 0.2); margin: 0;
}
.player { display: flex; align-items: center; gap: 35px; max-width: 700px; width: 95%; flex-wrap: wrap; }
.info { flex: 1; min-width: 250px; }
.info h2 { font-size: 18px; font-weight: 700; color: #222; margin: 0; }
.progress { width: 100%; height: 5px; background: #ddd; border-radius: 5px; cursor: pointer; margin: 10px 0; direction: ltr; }
.progress-filled { height: 100%; width: 0%; background: #ff6333; border-radius: 5px; }
.time { display: flex; justify-content: space-between; font-size: 16px; color: #444; direction: ltr; }
.controls { display: flex; align-items: center; justify-content: center; gap: 15px; margin-top: 15px; }
.sbtn { width: 70px; height: 70px; border-radius: 100%; border: none; font-size: 20px; cursor: pointer; display: flex; justify-content: center; align-items: center; }
#play { background: #FF713D; }
.cover { width: 200px; background: #ECB8C3; border-radius: 15px; flex-shrink: 0; overflow: hidden; padding: 10px; position: relative; }
i.podcast-icon { position: absolute; bottom: 10px; right: 10px; background: white; padding: 10px; border-radius: 100%; width: 25px; height: 25px; display: flex; justify-content: center; align-items: center; text-shadow: -1px 1px 3px #000000; color: #ecb8c3; }
.mb-3 { margin-bottom: 20px; }
@media (max-width: 600px) {
    .player { flex-direction: column; align-items: center; text-align: center; /*gap: 0;*/ }
    .info { width: 100%; }
    .controls { margin-top: 15px; }
    .progress { margin-top: 10px; }
    #play { background: #FF713D; width: 150px; border-radius: 50px; }
}