﻿/* ═════════════════════════════════════════ */
  /* Plyr Orange #ff8000 – تم جدید یوتیوب ۲۰۲۵: pill-shaped, immersive, بلور بیشتر + فیکس مرکز آیکون‌ها */
  /* ═════════════════════════════════════════ */

  :root {
    --plyr-color-main: #ff8000;
    --plyr-menu-background: rgba(28, 28, 34, 0.98);
    --plyr-menu-color: #ffffff !important; /* متن سفید تضمینی */
    --plyr-menu-arrow-color: #ffffff;
    --plyr-menu-border-color: rgba(255, 128, 0, 0.3);
    --plyr-tooltip-background: rgba(28, 28, 34, 0.95);
    --plyr-tooltip-color: #ffffff;
    --plyr-range-fill-background: #ff8000;
    --plyr-video-progress-buffered-background: rgba(255, 255, 255, 0.25);
    --plyr-range-track-height: 6px; /* نازک‌تر مثل یوتیوب جدید */
    --plyr-font-family: 'IRANSans', 'Vazir', system-ui, sans-serif;
    --plyr-font-size-menu: 14px;
    --plyr-control-radius: 9999px; /* pill-shaped برای دکمه‌ها */
  }

  /* کنترل‌بار پایین: گرادیان شفاف‌تر و immersive مثل یوتیوب جدید */
  .plyr__controls {
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.9)) !important;
    padding: 28px 18px 12px !important;
    backdrop-filter: blur(16px) !important; /* بلور قوی‌تر برای لوکس بودن */
    border-radius: 0 0 12px 12px; /* گردی پایین بیشتر */
    opacity: 0.95; /* opaque theme مثل آپدیت ۲۰۲۵ */
    transition: opacity 0.3s ease; /* fade-in نرم */
  }

  .plyr__controls:hover {
    opacity: 1;
  }

  /* دکمه پلی بزرگ: bubblier با scale و blur بیشتر + مرکز کردن آیکون */
  .plyr__control--overlaid {
    background: rgba(255, 128, 0, 0.95) !important;
    backdrop-filter: blur(16px) !important; /* بلور بیشتر برای immersive */
    border: 2px solid rgba(255, 255, 255, 0.3) !important; /* outline distinct */
    box-shadow: 0 12px 40px rgba(255, 128, 0, 0.5) !important;
    border-radius: 50% !important; /* bubblier */
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important; /* bouncy animation */
    display: flex !important; /* فیکس مرکز: flexbox */
    align-items: center !important; /* عمودی مرکز */
    justify-content: center !important; /* افقی مرکز */
  }

  .plyr__control--overlaid:hover {
    background: #ff8000 !important;
    transform: scale(1.2) !important; /* scale بزرگ‌تر برای افکت زیباتر */
    box-shadow: 0 20px 60px rgba(255, 128, 0, 0.7) !important;
  }

  .plyr__control--overlaid svg {
    margin: 0 !important; /* حذف margin پیش‌فرض svg برای مرکز دقیق‌تر */
    transform: translate(0, 0) !important; /* تنظیم دقیق اگر لازم بود */
  }

  /* دکمه‌های کنترل: pill-shaped با outline و هاور نرم + مرکز آیکون‌ها */
  .plyr__control {
    border-radius: var(--plyr-control-radius) !important; /* pill-shaped مثل یوتیوب جدید */
    border: 1px solid rgba(255, 255, 255, 0.2) !important; /* distinct outlines */
    background: rgba(255, 255, 255, 0.1) !important; /* opaque و شفاف */
    transition: all 0.3s ease !important;
    display: flex !important; /* فیکس مرکز برای همه دکمه‌ها */
    align-items: center !important;
    justify-content: center !important;
  }

  .plyr__control:hover {
    background: rgba(255, 128, 0, 0.3) !important;
    transform: translateY(-2px) scale(1.05) !important; /* lift و scale برای immersive */
    border-color: #ff8000 !important;
  }

  .plyr__control.plyr__control--pressed {
    background: #ff8000 !important;
  }

  /* پروگرس بار: نازک‌تر با thumb pill-shaped و انیمیشن نرم‌تر */
  .plyr--video .plyr__progress input[type=range] {
    height: var(--plyr-range-track-height) !important;
    border-radius: 9999px !important; /* pill-shaped */
  }

  .plyr__progress__container {
    border-radius: 9999px !important;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important; /* سایه برای عمق بیشتر */
  }

  .plyr__progress__buffer {
    background-image: linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent) !important;
    background-size: 40px 40px !important; /* بزرگ‌تر برای انیمیشن زیباتر */
    animation: buffer-animation 3s linear infinite !important; /* کندتر و نرم‌تر */
  }

  @keyframes buffer-animation {
    0% { background-position: 0 0; }
    100% { background-position: 40px 0; }
  }

  /* زمان و تولتیپ: با سایه و فونت مدرن */
  .plyr__time, .plyr__tooltip {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8) !important; /* سایه عمیق‌تر برای خوانایی */
    border-radius: 8px !important;
  }

  /* منوی تنظیمات: fade-in با بلور بیشتر و pill-shaped آیتم‌ها */
  .plyr__menu__container {
    background: var(--plyr-menu-background) !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 50px rgba(0,0,0,0.7) !important; /* سایه عمیق‌تر */
    backdrop-filter: blur(24px) !important; /* بلور قوی‌تر برای تم جدید */
    border: 1px solid var(--plyr-menu-border-color) !important;
    animation: menu-fade-in 0.3s ease-out !important; /* fade-in immersive */
  }

  @keyframes menu-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .plyr__menu__container .plyr__control {
    border-radius: 9999px !important; /* pill-shaped آیتم‌ها */
  }

  /* متن‌های منو سفید و خوانا */
  .plyr__menu__container *,
  .plyr__menu__container span,
  .plyr__menu__container label {
    color: var(--plyr-menu-color) !important;
  }

  /* عنوان بخش‌ها نارنجی روشن */
  .plyr__menu__container .plyr__control > span:first-child,
  .plyr__menu__container [data-plyr] > span {
    color: #ffaa33 !important;
    font-weight: 700 !important;
  }

  /* هاور روی آیتم‌ها */
  .plyr__menu__container .plyr__control[role="menuitem"]:hover {
    background: rgba(255, 128, 0, 0.3) !important;
  }

  /* تیک گزینه انتخاب‌شده */
  .plyr__control[role="menuitemradio"][aria-checked="true"]::before {
    background: #ff8000 !important;
  }

  .plyr__menu__container::after {
    border-top-color: var(--plyr-menu-background) !important;
  }

  /* override display: none برای spanهای داخل منو */
  .video-player-container .plyr__menu__container div span,
  .video-player-container .plyr__menu__container span {
    display: inline !important;
  }

  /* حالت تمام‌صفحه: گرادیان immersive */
  .plyr:fullscreen .plyr__controls {
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.95) 100%) !important;
  }

  /* پس‌زمینه ویدیو تیره */
  .plyr--video {
    background: #000 !important;
  }