.ncars-plyr-host {
  --ncars-brand-primary: #ff9800;
  --ncars-brand-primary-hover: #ffb74d;
  --ncars-ink-strong: #f5f5f5;
  --ncars-panel-dark: rgba(24, 24, 24, 0.94);

  --plyr-color-main: var(--ncars-brand-primary);
  --plyr-focus-visible-color: var(--ncars-brand-primary-hover);
  --plyr-video-background: #000000;
  --plyr-video-controls-background: linear-gradient(
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.86)
  );
  --plyr-video-control-color: #fafafa;
  --plyr-video-control-color-hover: #1f1f1f;
  --plyr-video-control-background-hover: var(--ncars-brand-primary);

  --plyr-badge-background: var(--ncars-brand-primary);
  --plyr-badge-text-color: #1f1f1f;
  --plyr-control-radius: 10px;
  --plyr-menu-radius: 12px;

  --plyr-menu-background: var(--ncars-panel-dark);
  --plyr-menu-color: var(--ncars-ink-strong);
  --plyr-menu-shadow: 0 10px 28px rgba(0, 0, 0, 0.44);
  --plyr-menu-item-arrow-color: rgba(255, 255, 255, 0.74);
  --plyr-menu-border-color: rgba(255, 255, 255, 0.14);
  --plyr-menu-border-shadow-color: transparent;

  --plyr-range-fill-background: var(--ncars-brand-primary);
  --plyr-video-progress-buffered-background: rgba(255, 255, 255, 0.28);
  --plyr-range-thumb-background: #ffffff;
  --plyr-range-thumb-shadow:
    0 1px 1px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 152, 0, 0.48);
  --plyr-video-range-thumb-active-shadow-color: rgba(255, 152, 0, 0.44);

  --plyr-tooltip-background: rgba(22, 22, 22, 0.96);
  --plyr-tooltip-color: #f5f5f5;
  --plyr-tooltip-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  --plyr-tooltip-radius: 8px;

  --plyr-font-family:
    "Avenir Next",
    "Avenir",
    "Segoe UI",
    "Helvetica Neue",
    Arial,
    sans-serif;
}

.ncars-plyr-host .plyr {
  border-radius: inherit;
}

.ncars-plyr-host .plyr__menu__container .plyr__control[role="menuitemradio"][aria-checked="true"]::after {
  background: #1b1b1b;
}