/* فریم اصلی پلیر را هدف قرار می‌دهیم */
/*audio, video {
    width: 100%;
    border-radius: 40px;*/ /* گوشه‌های گرد */
    /*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);*/ /* سایه نرم */
    /*outline: none;
    margin: 10px 0;
}*/

    /* شخصی‌سازی برای مرورگرهای مبتنی بر WebKit (مثل کروم و اج) */
    audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
        background-color: #f3f4f6; /* رنگ پس‌زمینه ملایم */
    }

    /* تغییر رنگ دکمه‌ها */
    audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
        background-color: #4f46e5; /* رنگ بنفش شاخص */
        border-radius: 50%;
        transform: scale(0.9); /* کمی کوچک‌تر کردن */
    }

    /* تغییر نوار زمان */
    audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
        background-color: #e2e8f0;
        border-radius: 10px;
        height: 4px;
    }

    audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display,
    audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display {
        color: #1f2937; /* رنگ متن تیره */
    }

    /*video {*/
  /* ابعاد واکنش‌گرا */
  /*max-width: 100%;
  height: auto;*/
  
  /* حاشیه‌های گرد و نرم */
  /*border-radius: 20px;*/
  
  /* سایه‌ی ملایم برای عمق بخشیدن */
  /*box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.25),
              0 0 0 1px rgba(255, 255, 255, 0.1) inset;*/
  
  /* افکت نرم هنگام تعامل */
  /*transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);*/
  
  /* پس‌زمینه در زمان بارگذاری */
  /*background-color: #0a0a0a;*/
  
  /* برش خودکار محتوا برای هماهنگی با حاشیه گرد */
  /*overflow: clip;
}*/

/* افکت هنگام هاور (قرار گرفتن ماوس) */
/*video:hover {
  transform: scale(1.01);
  box-shadow: 0 25px 40px -12px rgba(0, 0, 0, 0.35);
}*/

/* افکت فوکوس برای دسترسی بهتر (کیبورد) */
/*video:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.6), 0 20px 35px -10px rgba(0, 0, 0, 0.25);
}*/

/* راه حل اصلی (روی wrapper ویدیو) */
.plyr__video-wrapper {
    border-radius: 24px !important;
    overflow: hidden !important;
}

/* پشتیبان برای مرورگرهایی که به خود ویدیو نیاز دارند */
.plyr video {
    border-radius: 24px !important;
}
@media (min-width: 480px) {
    .plyr--video .plyr__controls { 
        border-radius: 21px !important; 
    }
}
.plyr audio, .plyr iframe, .plyr video { 
    margin: 0 !IMPORTANT;
}
.wavesurfer-container {
    pointer-events: none;
}