/* zs-video-modal -- Plyr container styles + palette overrides for ZEC.
 *
 * Scoped to .zs-video-player which is what Etch dialog slots contain.
 * Etch's own dialog chrome (background, padding, max-width, close button)
 * is controlled in Etch's editor via component props -- not here.
 */

.zs-video-player {
  /* Plyr CSS variables -> ZEC tokens (ACSS) */
  --plyr-color-main: var(--primary, #AB8952);
  --plyr-video-background: var(--base-ultra-dark, #0F0C07);
  --plyr-menu-background: var(--base-dark, #261C12);
  --plyr-menu-color: var(--base-ultra-light, #EDE3D3);
  --plyr-tooltip-background: var(--base-dark, #261C12);
  --plyr-tooltip-color: var(--base-ultra-light, #EDE3D3);
  --plyr-control-radius: 0;
  --plyr-control-icon-size: 18px;
  --plyr-font-family: var(--font-inter, system-ui, sans-serif);
  --plyr-font-size-base: 14px;

  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 100%;
  background: var(--base-ultra-dark, #0F0C07);
  overflow: hidden;
}

.zs-video-player .plyr {
  width: 100%;
  height: 100%;
}

.zs-video-player .plyr--video {
  background: var(--base-ultra-dark, #0F0C07);
}

/* Ensure the trigger button looks like the original anchor */
.film-card__media {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: inherit;
  display: block;
  width: 100%;
}

.film-card__media:focus-visible {
  outline: 2px solid var(--primary, #AB8952);
  outline-offset: 4px;
}