/* Finepedia video player — port of the Elsetube watch player (Plyr chrome), Finepedia branding.
   Progress bar: YouTube-style, 3px thin, grows on hover, buffered + played + scrubber dot + time tooltip. */

.finepedia-theme .video-player-wrapper.fp-player-shell,
.fp-player-shell {
  --fp-player-main: var(--fp-teal, #3dbdbd);
  --fp-player-accent: var(--fp-yellow, #f5c518);
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0b0b0f;
  overflow: hidden;
  isolation: isolate;
  border-radius: 4px;
  box-shadow: 0 10px 32px rgba(15, 23, 42, .22);
}

.finepedia-theme .fp-player-shell .plyr,
.fp-player-shell .plyr {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  background: #000;
  --plyr-color-main: var(--fp-player-main);
  --plyr-video-background: #0b0b0f;
  --plyr-video-control-color: #fff;
  --plyr-video-control-color-hover: #fff;
  --plyr-video-control-background-hover: rgba(61, 189, 189, .92);
  --plyr-font-family: inherit;
  --plyr-font-size-small: 13px;
  --plyr-font-size-base: 13px;
  --plyr-font-size-large: 16px;
  --plyr-control-icon-size: 20px;
  --plyr-control-spacing: 10px;
  --plyr-control-radius: 8px;
  --plyr-range-fill-background: var(--fp-player-main);
  --plyr-range-thumb-background: var(--fp-player-main);
  --plyr-range-thumb-height: 13px;
  --plyr-range-thumb-shadow: none;
  --plyr-range-thumb-active-shadow-width: 0;
  --plyr-range-track-height: 3px;
  --plyr-video-range-track-background: rgba(255, 255, 255, .2);
  --plyr-video-progress-buffered-background: rgba(255, 255, 255, .4);
  --plyr-menu-background: rgba(28, 28, 28, .96);
  --plyr-menu-color: #fff;
  --plyr-menu-border-radius: 10px;
  --plyr-menu-shadow: 0 8px 28px rgba(0, 0, 0, .45);
  --plyr-tooltip-background: rgba(28, 28, 28, .92);
  --plyr-tooltip-color: #fff;
  --plyr-tooltip-radius: 4px;
  --plyr-badge-background: var(--fp-player-main);
}

.fp-player-shell .plyr video,
.fp-player-shell .plyr__video-wrapper,
.fp-player-shell .plyr__video-embed,
.fp-player-shell .plyr__video-embed iframe {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  padding-bottom: 0 !important;
  object-fit: contain;
}

.finepedia-theme .video-player-wrapper.fp-player-shell .plyr video,
.finepedia-theme .video-player-wrapper.fp-player-shell .plyr iframe { object-fit: contain; }

/* Control bar: gradient, progress on its own full-width row above the buttons (YouTube layout). */
.fp-player-shell .plyr__controls {
  flex-wrap: wrap;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .22) 28%, rgba(0, 0, 0, .78) 100%) !important;
  padding: 26px 10px 6px !important;
  color: #fff;
  align-items: center;
}
.fp-player-shell .plyr__controls .plyr__progress__container {
  order: -1;
  flex: 0 0 100%;
  margin: 0 0 4px !important;
  padding: 0 !important;
}
.fp-player-shell .plyr__controls .plyr__controls__item.plyr__time--current { margin-left: 4px; }
.fp-player-shell .plyr__controls .plyr__controls__item:nth-last-child(1) { margin-left: 0; }
.fp-player-shell .plyr__controls .plyr__volume { margin-right: auto; }

.fp-player-shell .plyr__control { border-radius: 8px; }
.fp-player-shell .plyr__control.plyr__tab-focus,
.fp-player-shell .plyr__control:hover,
.fp-player-shell .plyr__control[aria-expanded="true"] { background: rgba(61, 189, 189, .92); }

/* Big play button */
.fp-player-shell .plyr__control--overlaid {
  background: rgba(15, 15, 18, .72);
  border: 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .4);
  padding: 22px;
  color: #fff;
}
.fp-player-shell .plyr__control--overlaid:hover,
.fp-player-shell .plyr__control--overlaid.plyr__tab-focus { background: var(--fp-player-main); }

/* ---- Thin YouTube-style progress bar ---- */
.fp-player-shell .plyr__progress {
  position: relative;
  left: 0;
  margin: 0;
  padding: 6px 0;            /* bigger hit area than the 3px line */
  cursor: pointer;
}
.fp-player-shell .plyr__progress input[type="range"],
.fp-player-shell .plyr__progress__buffer {
  margin: 0;
  width: 100%;
  left: 0;
  transition: height .12s ease;
}
.fp-player-shell .plyr__progress input[type="range"] { color: var(--fp-player-main); height: 13px; }
.fp-player-shell .plyr__progress__buffer { margin-top: 0; top: 50%; transform: translateY(-50%); border-radius: 0; }
.fp-player-shell .plyr__progress:hover,
.fp-player-shell .plyr__progress:focus-within { --plyr-range-track-height: 5px; }

/* Square-ish line like YouTube, no rounded track */
.fp-player-shell .plyr__progress input[type="range"]::-webkit-slider-runnable-track { border-radius: 0; transition: height .12s ease; }
.fp-player-shell .plyr__progress input[type="range"]::-moz-range-track { border-radius: 0; }
.fp-player-shell .plyr__progress input[type="range"]::-moz-range-progress { border-radius: 0; }

/* Scrubber dot: hidden until hover / drag */
.fp-player-shell .plyr__progress input[type="range"]::-webkit-slider-thumb {
  transform: scale(0);
  transition: transform .12s ease;
  box-shadow: none;
}
.fp-player-shell .plyr__progress input[type="range"]::-moz-range-thumb {
  transform: scale(0);
  transition: transform .12s ease;
  box-shadow: none;
}
.fp-player-shell .plyr__progress:hover input[type="range"]::-webkit-slider-thumb,
.fp-player-shell .plyr__progress input[type="range"]:active::-webkit-slider-thumb,
.fp-player-shell .plyr__progress input[type="range"].plyr__tab-focus::-webkit-slider-thumb { transform: scale(1); }
.fp-player-shell .plyr__progress:hover input[type="range"]::-moz-range-thumb,
.fp-player-shell .plyr__progress input[type="range"]:active::-moz-range-thumb { transform: scale(1); }

/* Hover time tooltip */
.fp-player-shell .plyr__progress .plyr__tooltip {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  padding: 4px 7px;
  bottom: 100%;
  margin-bottom: 6px;
}


.fp-player-shell .plyr--hide-controls .plyr__controls { opacity: 0; }

.fp-player-shell .plyr__time { font-variant-numeric: tabular-nums; font-weight: 500; font-size: 13px; color: #fff; }
.fp-player-shell .plyr__menu__container { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); min-width: 200px; }
.fp-player-shell .plyr__menu__container .plyr__control { font-size: 13px; font-weight: 500; }
.fp-player-shell .plyr__menu__container .plyr__control[role="menuitemradio"][aria-checked="true"]::before { background: var(--fp-player-main); }
.fp-player-shell .plyr__volume input[type="range"] { max-width: 72px; }
.fp-player-shell .plyr__captions { font-size: 18px; font-weight: 500; text-shadow: 0 1px 3px rgba(0, 0, 0, .85); }

/* Branding: site logo watermark, top-right, fades with the controls */
.fp-player-brand {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  pointer-events: none;
  opacity: .85;
  transition: opacity .2s ease;
}
.fp-player-brand img {
  display: block;
  height: 22px;
  width: auto;
  max-width: 120px;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6));
}
.fp-player-shell .plyr--playing.plyr--hide-controls ~ .fp-player-brand { opacity: .35; }

/* Loading spinner (brand colour) */
.fp-player-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, .25);
  border-top-color: var(--fp-player-main);
  animation: fp-player-spin .8s linear infinite;
  z-index: 5;
  pointer-events: none;
  display: none;
}
.fp-player-spinner.is-on { display: block; }
@keyframes fp-player-spin { to { transform: rotate(360deg); } }
.fp-video-facade.is-loading .fp-video-facade__play { opacity: .4; }

/* Toast (seek / speed / volume feedback) */
.fp-player-toast {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translateX(-50%) scale(.94);
  background: rgba(15, 15, 18, .82);
  color: #fff;
  font: 600 18px/1.2 inherit;
  padding: 10px 16px;
  border-radius: 10px;
  opacity: 0;
  pointer-events: none;
  z-index: 20;
  transition: opacity .16s ease, transform .16s ease;
}
.fp-player-toast.is-on { opacity: 1; transform: translateX(-50%) scale(1); }

/* Keyboard help (?) */
.fp-player-keys { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, .55); z-index: 10050; align-items: center; justify-content: center; padding: 24px; }
.fp-player-keys.is-on { display: flex; }
.fp-player-keys__box { background: #111827; color: #fff; border-radius: 14px; padding: 22px 26px; max-width: 420px; width: 100%; box-shadow: 0 20px 50px rgba(0, 0, 0, .4); }
.fp-player-keys__box h4 { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: #fff; }
.fp-player-keys__box ul { list-style: none; margin: 0; padding: 0; }
.fp-player-keys__box li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 13px; color: #cbd5e1; }
.fp-player-keys__box kbd { display: inline-block; min-width: 22px; padding: 2px 6px; margin: 0 2px; border-radius: 5px; background: #1e293b; border: 1px solid #334155; font-size: 12px; color: #fff; text-align: center; }
.fp-player-keys__box p { margin: 12px 0 0; font-size: 12px; color: #94a3b8; }

@media (max-width: 768px) {
  .finepedia-theme .video-player-wrapper.fp-player-shell,
  .fp-player-shell { border-radius: 0; }
  .fp-player-shell .plyr__volume input[type="range"] { display: none; }
  .fp-player-shell .plyr__captions { font-size: 14px; }
  .fp-player-shell .plyr__control--overlaid { padding: 16px; }
  .fp-player-brand img { height: 18px; }
}

/* YouTube: hide YouTube's own title bar / "More videos" / logo overlay behind our chrome (Plyr docs technique:
   oversize the iframe vertically and crop it). Our controls, poster and branding stay on top. */
.fp-player-shell .plyr--youtube .plyr__video-embed { position: relative; overflow: hidden; }
.fp-player-shell .plyr--youtube .plyr__video-embed iframe {
  position: absolute;
  top: -50% !important;
  left: 0;
  height: 200% !important;
  pointer-events: none;
}
/* While a YouTube video is paused, YouTube paints its own title / "More videos" panel: cover it with the poster. */
.fp-player-shell .plyr--youtube.plyr--paused .plyr__poster { opacity: 1 !important; z-index: 2; background-size: cover; }

/* Theme rules size every image inside .video-player-wrapper to 100%: keep the watermark small. */
.finepedia-theme .video-player-wrapper.fp-player-shell .fp-player-brand img,
.fp-player-shell .fp-player-brand img {
  width: auto !important;
  height: 22px !important;
  max-width: 120px;
  object-fit: contain;
  position: static;
}
@media (max-width: 768px) {
  .finepedia-theme .video-player-wrapper.fp-player-shell .fp-player-brand img,
  .fp-player-shell .fp-player-brand img { height: 18px !important; }
}

/* ---- Admin > Video Player settings (CSS variables / classes set by fp-player.js applyLook) ---- */
.fp-player-shell .plyr { --plyr-range-track-height: var(--fp-progress-h, 3px); }
.fp-player-shell .plyr__progress:hover,
.fp-player-shell .plyr__progress:focus-within { --plyr-range-track-height: var(--fp-progress-hh, 5px); }
.fp-player-shell.fp-no-buffer .plyr__progress__buffer { display: none; }
.fp-player-shell.fp-no-scrubber .plyr__progress input[type="range"]::-webkit-slider-thumb { transform: scale(0) !important; }
.fp-player-shell.fp-no-scrubber .plyr__progress input[type="range"]::-moz-range-thumb { transform: scale(0) !important; }
.fp-player-shell.fp-no-seektip .plyr__progress .plyr__tooltip { display: none !important; }

.fp-player-shell .fp-player-brand { opacity: var(--fp-logo-opacity, .85); }
.finepedia-theme .video-player-wrapper.fp-player-shell .fp-player-brand img,
.fp-player-shell .fp-player-brand img { height: var(--fp-logo-h, 22px) !important; }
.fp-player-shell.fp-logo-top-left .fp-player-brand { top: 12px; left: 12px; right: auto; bottom: auto; }
.fp-player-shell.fp-logo-top-right .fp-player-brand { top: 12px; right: 12px; left: auto; bottom: auto; }
.fp-player-shell.fp-logo-bottom-left .fp-player-brand { bottom: 64px; left: 12px; top: auto; right: auto; }
.fp-player-shell.fp-logo-bottom-right .fp-player-brand { bottom: 64px; right: 12px; top: auto; left: auto; }
.fp-player-brand--link { pointer-events: auto; }

.fp-player-shell .fp-player-spinner { border-top-color: var(--fp-spinner-color, var(--fp-player-main)); }
.fp-player-shell.fp-spinner-none .fp-player-spinner { display: none !important; }
.fp-player-shell.fp-spinner-dots .fp-player-spinner {
  border: 0;
  width: 56px;
  margin-left: -28px;
  height: 14px;
  margin-top: -7px;
  border-radius: 0;
  animation: none;
  background:
    radial-gradient(circle closest-side, var(--fp-spinner-color, var(--fp-player-main)) 90%, transparent) 0 50% / 14px 14px no-repeat,
    radial-gradient(circle closest-side, var(--fp-spinner-color, var(--fp-player-main)) 90%, transparent) 50% 50% / 14px 14px no-repeat,
    radial-gradient(circle closest-side, var(--fp-spinner-color, var(--fp-player-main)) 90%, transparent) 100% 50% / 14px 14px no-repeat;
}
.fp-player-shell.fp-spinner-dots .fp-player-spinner.is-on { animation: fp-player-dots 1s ease-in-out infinite; }
@keyframes fp-player-dots { 50% { opacity: .35; } }

/* Mini player (docked while playing and scrolled away) */
.fp-player-shell.fp-mini .plyr {
  position: fixed !important;
  inset: auto 16px 16px auto !important;
  width: 340px !important;
  height: 191px !important;
  z-index: 9990;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}
@media (max-width: 768px) {
  .fp-player-shell.fp-mini .plyr { width: 220px !important; height: 124px !important; inset: auto 10px 76px auto !important; }
}