/* =======================================================================
   ToxicDev Plyr Skin — /socialclub/assets/css/video-player.css
   Стили без сокращений. Подключай ПОСЛЕ plyr.css и style.css.
   ======================================================================= */

/* ---------------------- Палитра и ключевые переменные ------------------ */
:root{
  /* База из манифеста темы */
  --tox-bg:           #1C1C1C;  /* фон плеера */
  --tox-panel:        #2E2E2E;  /* панели/меню/тултипы */
  --tox-edge:         #3B3B3B;  /* бордеры/разделители */
  --tox-text:         #E1E1E1;  /* основной текст/иконки */
  --tox-dim:          #A0A0A0;  /* вторичный текст */
  --tox-gold:         #FFD700;  /* акцент (токсик-золото) */

  /* Главная переменная Plyr для прогресса/ползунков/акцентных элементов */
  --plyr-color-main:  var(--tox-gold);
}

/* ---------------------- Размер и контейнер видео ----------------------- */
/* Обёртка вокруг <video> в карточке поста (рекомендуется так верстать):
   <div class="post-video"><video class="video-player" ...></video></div> */
.post-video{
  position: relative;
  width: 100%;
  max-width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: var(--tox-bg);
  border: 1px solid var(--tox-edge);
  box-shadow: 0 2px 18px rgba(0,0,0,.35);
}

/* На всю ширину карточки */
.post-video video.video-player,
.post-video .plyr{
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Современное соотношение 16:9 */
@supports (aspect-ratio: 16 / 9){
  .post-video .plyr{ aspect-ratio: 16 / 9; }
}

/* Fallback для старых браузеров */
@supports not (aspect-ratio: 16 / 9){
  .post-video::before{
    content: "";
    display: block;
    padding-top: 56.25%; /* 16:9 */
  }
  .post-video > .plyr,
  .post-video > video{
    position: absolute;
    inset: 0;
    height: 100% !important;
  }
}

/* ---------------------- Корневой контейнер Plyr ------------------------ */
.plyr--video{
  background: var(--tox-bg) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

/* Постер (если есть) — не ярче остального */
.plyr__poster{
  background-color: var(--tox-bg);
  background-size: cover;
  background-position: center;
}

/* ---------------------- Большая кнопка Play ---------------------------- */
.plyr__control.plyr__control--overlaid{
  background: rgba(28,28,28,.92) !important;
  border: 1px solid var(--tox-edge) !important;
  color: #0a0a0a !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.45);
}
.plyr__control.plyr__control--overlaid:hover,
.plyr__control.plyr__control--overlaid:focus-visible{
  box-shadow: 0 0 0 2px rgba(255,215,0,.25), 0 6px 28px rgba(0,0,0,.6);
  outline: none;
}

/* ---------------------- Нижняя панель управления ---------------------- */
.plyr--video .plyr__controls{
  background: linear-gradient(
    to top,
    rgba(22,22,22,.95),
    rgba(22,22,22,.25) 60%,
    rgba(22,22,22,0)
  );
  border-top: 1px solid rgba(255,255,255,.05);
  padding: 10px 12px;
  backdrop-filter: saturate(140%) blur(6px);
}

/* Кнопки панели */
.plyr__control{
  color: var(--tox-text) !important;
  background: transparent !important;
  border-radius: 10px !important;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.plyr__control:hover,
.plyr__control[aria-expanded="true"]{
  color: #111 !important;
  background: linear-gradient(180deg, #FFE36B, var(--tox-gold)) !important;
  box-shadow: 0 0 0 1px rgba(255,215,0,.35);
}
.plyr__control[disabled],
.plyr__control[aria-disabled="true"]{
  opacity: .5;
  cursor: not-allowed;
}

/* Таймеры и разделители */
.plyr__time{
  color: var(--tox-dim) !important;
}
.plyr__controls .plyr__controls__item.plyr__progress__container{
  margin-inline: 10px;
}

/* ---------------------- Прогресс и громкость --------------------------- */
/* Plyr берёт currentColor для активной части range */
.plyr--full-ui input[type="range"]{
  color: var(--tox-gold) !important;
}

/* Буфер (серая штриховка) */
.plyr__progress__buffer{
  background: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,.10) 0 10px,
    rgba(255,255,255,.03) 10px 20px
  ) !important;
}

/* Спиннер загрузки */
.plyr__spinner{
  filter: drop-shadow(0 0 6px rgba(255,215,0,.35));
}

/* ---------------------- Тултипы (езда по прогресс-бару и т.п.) -------- */
.plyr__tooltip{
  background: var(--tox-panel) !important;
  color: var(--tox-text) !important;
  border: 1px solid var(--tox-edge) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.45) !important;
}
.plyr__tooltip:before{ display: none !important; }

/* ---------------------- Меню (качество/скорость/сабсы) ---------------- */
.plyr__menu__container{
  background: var(--tox-panel) !important;
  color: var(--tox-text) !important;
  border: 1px solid var(--tox-edge) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.55) !important;
}
.plyr__menu__container .plyr__control{
  color: var(--tox-text) !important;
}
.plyr__menu__container .plyr__control:hover{
  background: rgba(255,215,0,.08) !important;
}
.plyr__menu__container .plyr__control[role="menuitemradio"][aria-checked="true"]{
  background: rgba(255,215,0,.14) !important;
  box-shadow: inset 0 0 0 1px rgba(255,215,0,.45) !important;
}

/* ---------------------- Субтитры -------------------------------------- */
.plyr__captions{
  font-size: 14px;
  line-height: 1.35;
  text-shadow: 0 2px 4px rgba(0,0,0,.75);
}
.plyr__captions .plyr__caption{
  background: rgba(0,0,0,.35);
  color: #fff;
  padding: .15em .35em;
  border-radius: 4px;
}

/* ---------------------- Полный экран ---------------------------------- */
.plyr--full-ui.plyr--fullscreen-enabled.plyr--fullscreen-active .plyr__controls{
  background: linear-gradient(
    to top,
    rgba(10,10,10,.85),
    rgba(10,10,10,.20) 60%,
    rgba(10,10,10,0)
  );
}

/* ---------------------- Ошибка/заглушка -------------------------------- */
.video-error{
  display: block;
  width: 100%;
  min-height: 180px;
  background: var(--tox-bg);
  color: var(--tox-dim);
  border: 1px dashed var(--tox-edge);
  border-radius: 12px;
  padding: 16px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ---------------------- Мобилка: компактные отступы -------------------- */
@media (max-width: 520px){
  .plyr--video .plyr__controls{ padding: 8px; }
  .plyr__control{ padding: 6px; }
}
/* ---------- TikTok-style skeleton ---------- */
.has-skeleton{ position:relative; }
.video-skeleton{
  position:absolute; inset:0;
  border-radius:14px;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0.06) 25%,
      rgba(255,255,255,0.12) 37%,
      rgba(255,255,255,0.06) 63%) #1d1f22;
  background-size: 400% 100%;
  animation: tox-shimmer 1.2s linear infinite;
  transition: opacity .2s ease;
  pointer-events:none;
}
.video-skeleton.hide{ opacity:0; }
@keyframes tox-shimmer{
  0%{ background-position: 100% 0; }
  100%{ background-position: 0 0; }
}
/* Контейнер с видео должен быть position:relative */
.post-video { position: relative; }

/* Лоадер поверх постера */
.video-loader{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition: opacity .15s ease;
}
.video-loader.show{ opacity:1; }

/* Спиннер */
.video-loader .spinner{
  width:34px; height:34px; border-radius:50%;
  border:3px solid rgba(255,255,255,.15);
  border-top-color: var(--plyr-color-main, #FFD700);
  animation: tox-spin .8s linear infinite;
}
@keyframes tox-spin { to { transform: rotate(360deg); } }

/* Чтоб постер не перескакивал по высоте — на всякий случай */
.video-player{ width:100%; background:#1D1F22; border-radius:12px; display:block; }