/*!
 * More Voices Player — stage 2 styles
 * (c) 2026 COPAGACLUB.ETH LLC. All rights reserved.
 * Change the look by overriding the --mv-* variables on .mv-player
 * (for example in your theme): colors, corner radius, ticker font size.
 */
.mv-player {
  --mv-accent: #E4572E;          /* play button, focus ring */
  --mv-ticker-bg: #13233A;       /* scrolling text band */
  --mv-ticker-fg: #FFFFFF;
  --mv-ticker-sep: #F2A541;
  --mv-stage-bg: #0B1220;
  --mv-radius: 14px;
  --mv-ticker-size: 1.05rem;
  --mv-font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic", "Noto Sans Devanagari", sans-serif;

  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  font-family: var(--mv-font);
  border-radius: var(--mv-radius);
  overflow: hidden;
  background: var(--mv-stage-bg);
  box-shadow: 0 10px 30px rgba(10, 20, 40, .18);
}
.mv-player *, .mv-player *::before, .mv-player *::after { box-sizing: border-box; }

/* video area */
.mv-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--mv-stage-bg); overflow: hidden; }
.mv-video, .mv-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; display: block; }

/* poster + play button */
.mv-cover {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; padding: 0; margin: 0; cursor: pointer; color: #fff;
  background: radial-gradient(120% 90% at 30% 20%, #23395B 0%, var(--mv-stage-bg) 70%) center / cover no-repeat;
  display: flex; align-items: center; justify-content: center;
}
.mv-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 45%); }
.mv-cover__play {
  position: relative; z-index: 1;
  width: clamp(56px, 12vw, 84px); height: clamp(56px, 12vw, 84px);
  border-radius: 50%; background: var(--mv-accent);
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
  transition: transform .2s ease;
}
.mv-cover__play::before {
  content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent #fff;
}
.mv-cover:hover .mv-cover__play, .mv-cover:focus-visible .mv-cover__play { transform: scale(1.08); }
.mv-cover:focus-visible { outline: 3px solid var(--mv-accent); outline-offset: -3px; }
.mv-cover__title {
  position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 14px;
  font-size: clamp(.95rem, 2.6vw, 1.25rem); font-weight: 600; text-align: start;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.mv-ticker--bottom ~ .mv-cover .mv-cover__title,
.mv-stage:has(.mv-ticker--bottom) .mv-cover__title { bottom: 56px; }

.mv-message {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 24px; text-align: center; color: #fff; font-size: 1rem; line-height: 1.5;
}

/* scrolling text */
.mv-ticker {
  position: relative; display: flex; align-items: center;
  min-height: 44px; background: var(--mv-ticker-bg); color: var(--mv-ticker-fg);
  font-size: var(--mv-ticker-size); line-height: 1.4; transition: opacity .3s ease;
}
.mv-ticker__viewport {
  flex: 1 1 auto; min-width: 0; overflow: hidden; align-self: stretch; display: flex; align-items: center;
  contain: inline-size; /* its width comes from the page, never from the long scrolling line */
}
.mv-ticker--top, .mv-ticker--bottom { position: absolute; left: 0; right: 0; z-index: 2; background: color-mix(in srgb, var(--mv-ticker-bg) 82%, transparent); pointer-events: none; }
.mv-ticker--top { top: 0; }
.mv-ticker--bottom { bottom: 0; }
.mv-player.is-playing .mv-ticker--bottom { bottom: 48px; } /* keep native video controls clickable */
.mv-ticker.is-hidden { opacity: 0; visibility: hidden; }

.mv-ticker__track {
  display: flex; flex: none; width: max-content; white-space: nowrap;
  animation: mv-scroll var(--mv-duration, 20s) linear infinite;
  will-change: transform;
}
.mv-ticker[dir="rtl"] .mv-ticker__track { animation-name: mv-scroll-rtl; }
.mv-ticker__run { display: inline-flex; align-items: center; }
.mv-ticker__unit { display: inline-flex; align-items: center; padding-inline-end: 3rem; }
.mv-ticker__msg { padding: 10px 0; }
.mv-ticker__sep { color: var(--mv-ticker-sep); padding: 0 1.1rem; font-size: 1.2em; }
/* Pause only when the mouse or keyboard is on the text itself, not on the buttons
   (so the text keeps scrolling while Listen reads it aloud). */
.mv-ticker__viewport:hover .mv-ticker__track,
.mv-ticker__viewport:focus-within .mv-ticker__track,
.mv-ticker.is-paused .mv-ticker__track { animation-play-state: paused; }

@keyframes mv-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--mv-distance, 50%))); } }
@keyframes mv-scroll-rtl { from { transform: translateX(0); } to { transform: translateX(var(--mv-distance, 50%)); } }

/* controls at the end of the band: language, Listen, ⓘ, pause */
.mv-ticker__controls {
  position: relative; flex: none; align-self: stretch; z-index: 1;
  display: flex; align-items: center; gap: 6px; padding-inline: 10px 6px;
  background: var(--mv-ticker-bg); pointer-events: auto;
}
.mv-ticker__controls::before { /* soft fade where the text slides under the controls */
  content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: 28px; pointer-events: none;
  background: linear-gradient(to left, var(--mv-ticker-bg), transparent);
}
.mv-ticker[dir="rtl"] .mv-ticker__controls::before { right: auto; left: 100%; background: linear-gradient(to right, var(--mv-ticker-bg), transparent); }
.mv-ticker__toggle, .mv-ticker__info {
  position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.14); color: inherit; display: flex; align-items: center; justify-content: center;
  font: 700 .85rem/1 Georgia, "Times New Roman", serif;
}
.mv-ticker__listen {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 10px;
  border: 0; border-radius: 999px; cursor: pointer; background: rgba(255,255,255,.14); color: inherit;
  font: inherit; font-size: .85rem; white-space: nowrap;
}
.mv-ticker__listen[aria-pressed="true"] { background: var(--mv-accent); color: #fff; }
.mv-ticker__lang {
  flex: 0 1 auto; min-width: 0; max-width: 130px; height: 32px; padding: 0 8px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.28); background: var(--mv-ticker-bg); color: inherit; font: inherit; font-size: .85rem;
}
.mv-ticker__toggle:hover, .mv-ticker__info:hover, .mv-ticker__listen:hover { background-color: rgba(255,255,255,.26); }
.mv-ticker__listen[aria-pressed="true"]:hover { background: var(--mv-accent); }
.mv-ticker__toggle:focus-visible, .mv-ticker__info:focus-visible, .mv-ticker__listen:focus-visible, .mv-ticker__lang:focus-visible { outline: 2px solid var(--mv-accent); outline-offset: 2px; }
.mv-notes {
  position: absolute; inset-inline-end: 8px; bottom: calc(100% + 8px); z-index: 3; width: min(360px, calc(100% - 16px));
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.mv-ticker--top .mv-notes { bottom: auto; top: calc(100% + 8px); }
.mv-note {
  pointer-events: auto;
  padding: 10px 14px; border-radius: 10px; background: #fff; color: #13233A; font-size: .85rem; line-height: 1.45;
  box-shadow: 0 8px 24px rgba(0,0,0,.25); white-space: normal;
}
.mv-note strong { display: block; margin-bottom: 4px; }
.mv-note { position: relative; }
.mv-note[role="note"] { padding-inline-end: 40px; } /* room for the close button */
.mv-note__close {
  position: absolute; top: 6px; inset-inline-end: 6px; width: 28px; height: 28px; border: 0; border-radius: 50%;
  background: transparent; color: inherit; font: 400 1.3rem/1 system-ui, sans-serif; cursor: pointer;
}
.mv-note__close:hover { background: rgba(19, 35, 58, .08); }
.mv-note__close:focus-visible { outline: 2px solid var(--mv-accent); outline-offset: 1px; }
@media (max-width: 520px) {
  .mv-ticker__listen-label { display: none; }
  .mv-ticker__listen { padding: 0 9px; }
  .mv-ticker__info { display: none; } /* the note still opens by itself on the first Listen */
  .mv-ticker__lang { max-width: 92px; }
}
.mv-icon { display: block; position: relative; width: 12px; height: 12px; }
.mv-icon--pause::before, .mv-icon--pause::after { content: ""; position: absolute; top: 0; bottom: 0; width: 4px; background: currentColor; border-radius: 1px; }
.mv-icon--pause::before { left: 1px; } .mv-icon--pause::after { right: 1px; }
.mv-icon--speaker { width: 14px; height: 12px; }
.mv-icon--speaker::before { content: ""; position: absolute; left: 0; top: 3px; width: 4px; height: 6px; background: currentColor; }
.mv-icon--speaker::after { content: ""; position: absolute; left: 2px; top: 0; border-style: solid; border-width: 6px 7px 6px 0; border-color: transparent currentColor transparent transparent; }
.mv-icon--play::before { content: ""; position: absolute; left: 2px; top: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }

/* people who ask their device for less motion get still, wrapped text */
@media (prefers-reduced-motion: reduce) {
  .mv-ticker__track { animation: none; white-space: normal; width: auto; }
  .mv-ticker__run[aria-hidden="true"], .mv-ticker__unit[aria-hidden="true"] { display: none; }
  .mv-ticker__run, .mv-ticker__unit { flex-wrap: wrap; padding: 4px 12px; }
  .mv-ticker__toggle { display: none; }
  .mv-ticker__controls { position: static; }
  .mv-ticker__controls::before { display: none; }
  .mv-ticker { flex-wrap: wrap; }
}

/* Version 9.4: under the videos of an unpaid plan (the license never expires) */
.mv-powered { margin: 6px 0 0; font-size: .82em; opacity: .8; }
.mv-powered a { color: inherit; text-decoration: underline; }

/* Version 9.9.30: our own full screen button (the whole player, scrolling text included) */
.mv-player { position: relative; }
.mv-fs { border: 0; cursor: pointer; color: #fff; display: flex; align-items: center; justify-content: center; padding: 0; flex: none; }
.mv-fs--bar { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.14); color: inherit; }
.mv-fs--bar:hover { background-color: rgba(255,255,255,.26); }
.mv-fs--over { position: absolute; top: 8px; left: 8px; z-index: 6; width: 36px; height: 36px; border-radius: 8px; background: rgba(0,0,0,.55); display: none; }
.mv-player.is-playing .mv-fs--over { display: flex; }
.mv-fs--over:hover { background: rgba(0,0,0,.8); }
.mv-fs:focus-visible { outline: 2px solid var(--mv-accent, #fff); outline-offset: 2px; }
.mv-fs__icon { width: 16px; height: 16px; display: block;
  background: linear-gradient(currentColor,currentColor) left top/6px 2px, linear-gradient(currentColor,currentColor) left top/2px 6px,
    linear-gradient(currentColor,currentColor) right top/6px 2px, linear-gradient(currentColor,currentColor) right top/2px 6px,
    linear-gradient(currentColor,currentColor) left bottom/6px 2px, linear-gradient(currentColor,currentColor) left bottom/2px 6px,
    linear-gradient(currentColor,currentColor) right bottom/6px 2px, linear-gradient(currentColor,currentColor) right bottom/2px 6px;
  background-repeat: no-repeat; }
[dir="rtl"] .mv-fs--over { left: auto; right: 8px; }
.mv-player:fullscreen { display: flex; flex-direction: column; justify-content: center; background: #000; width: 100%; height: 100%; max-width: none; margin: 0; }
.mv-player:-webkit-full-screen { display: flex; flex-direction: column; justify-content: center; background: #000; width: 100%; height: 100%; max-width: none; margin: 0; }
.mv-player.is-fullscreen .mv-stage { flex: 1 1 auto; aspect-ratio: auto !important; height: auto; min-height: 0; }
.mv-player.is-fullscreen .mv-fs__icon { transform: rotate(45deg) scale(.85); }