/*
 * MTC video skin over Plyr. Loads after assets/css/plyr/plyr.min.css.
 * Brand accent comes from the parent theme's --color-primary Tailwind token.
 */

/* Plyr replaces <video class="mtc-vid"> with div.plyr wrapping the media. */
.plyr,
.video-player .plyr,
.mtc-vid-wrap .plyr {
  --plyr-color-main: var(--color-primary, #f97316);
  --plyr-video-background: #09090b;
  --plyr-video-control-background-hover: var(--color-primary, #f97316);

  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 24px 64px -24px rgb(0 0 0 / 0.5);
}

/* Big centred play button — glassy disc, brand-tinted glyph */
.plyr[data-plyr-support="video"] .plyr__control--overlaid {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 9999px;
  background: rgb(9 9 11 / 0.55);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgb(255 255 255 / 0.14);
  box-shadow: 0 16px 40px -12px rgb(0 0 0 / 0.6);
  transition: transform 200ms ease, background 200ms ease;
  background: var(--color-primary, #f97316);
}

.plyr[data-plyr-support="video"] .plyr__control--overlaid:hover {
  transform: scale(1.06);
  background: var(--color-primary, #f97316);
  filter: brightness(1.08);
}

/* Frosted control bar */
.plyr--video .plyr__controls {
  background: rgb(9 9 11 / 0.55);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  padding: 0.5rem 0.75rem;
  gap: 0.125rem;
}

/* Progress bar a touch thinner, brand-filled */
.plyr--video .plyr__progress__buffer,
.plyr--video input[type="range"].plyr__seek__input {
  height: 0.3125rem;
}

@media (prefers-reduced-motion: reduce) {
  .plyr,
  .plyr *,
  .plyr *::before,
  .plyr *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}