/**
 * Custom Plyr Styles - Schreibszene Brand Colors
 *
 * This file overrides default Plyr colors with the Schreibszene orange (#FF7B33)
 * and adapts the player to match the site's design language.
 */

:root {
  /* Primary brand color - used for main UI elements */
  --plyr-color-main: #FF7B33;

  /* Control colors */
  --plyr-video-control-background-hover: #FF7B33;
  --plyr-audio-control-background-hover: #FF7B33;

  /* Range/Progress colors */
  --plyr-range-fill-background: #FF7B33;

  /* Tab focus color for accessibility */
  --plyr-tab-focus-color: #FF7B33;
  --plyr-focus-visible-color: #FF7B33;

  /* Menu item checked state */
  --plyr-control-toggle-checked-background: #FF7B33;
}

/* Play button (large center button) */
.plyr__control--overlaid {
  background: #FF7B33 !important;
}

.plyr__control--overlaid:hover,
.plyr__control--overlaid:focus {
  background: #e66d2e !important; /* Slightly darker on hover */
}

/* Control bar buttons on hover */
.plyr--video .plyr__control:hover,
.plyr--video .plyr__control:focus {
  background: #FF7B33 !important;
}

.plyr--audio .plyr__control:hover,
.plyr--audio .plyr__control:focus {
  background: #FF7B33 !important;
}

/* Progress bar fill */
.plyr--full-ui input[type=range]::-webkit-slider-runnable-track {
  background-image: linear-gradient(to right, #FF7B33 var(--value, 0), transparent var(--value, 0)) !important;
}

.plyr--full-ui input[type=range]::-moz-range-progress {
  background: #FF7B33 !important;
}

/* Active slider thumb shadow */
.plyr--full-ui.plyr--video input[type=range]:active::-webkit-slider-thumb {
  box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2)), 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px) rgba(255, 123, 51, 0.5) !important;
}

.plyr--full-ui.plyr--video input[type=range]:active::-moz-range-thumb {
  box-shadow: var(--plyr-range-thumb-shadow, 0 1px 1px rgba(35, 40, 47, 0.15), 0 0 0 1px rgba(35, 40, 47, 0.2)), 0 0 0 var(--plyr-range-thumb-active-shadow-width, 3px) rgba(255, 123, 51, 0.5) !important;
}

/* Menu radio button checked state */
.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:before {
  background: #FF7B33 !important;
}

/* Focus outline for accessibility */
.plyr__control:focus-visible {
  outline-color: #FF7B33 !important;
}

/* Loading spinner color (if visible) */
.plyr--loading .plyr__progress__buffer {
  background-image: linear-gradient(-45deg, rgba(255, 123, 51, 0.6) 25%, transparent 25%, transparent 50%, rgba(255, 123, 51, 0.6) 50%, rgba(255, 123, 51, 0.6) 75%, transparent 75%, transparent) !important;
}

/* ========================================
   CUSTOM PLAY ICON (play-pillow-final.svg)
   ======================================== */

/* Hide default Plyr SVG play icons */
.plyr__control--overlaid svg,
.plyr__controls button[data-plyr="play"] svg,
.plyr__controls .plyr__control.plyr__control--overlaid svg {
  display: none !important;
}

/* Large center play button - use custom icon */
.plyr__control--overlaid,
.plyr--paused .plyr__control--overlaid,
.plyr--stopped .plyr__control--overlaid {
  width: 120px !important;
  height: 80px !important;
  padding: 0 !important;
  background-color: transparent !important;
  background-image: url('/icons/play-pillow-final.svg') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  border: none !important;
  box-shadow: none !important;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)) !important;
  transition: transform 0.3s ease, filter 0.3s ease !important;
  transform: translate(-50%, -50%);
  transform-origin: center;
}

.plyr__control--overlaid:hover,
.plyr__control--overlaid:focus,
.plyr--paused .plyr__control--overlaid:hover,
.plyr--paused .plyr__control--overlaid:focus {
  background-color: transparent !important;
  background-image: url('/icons/play-pillow-final.svg') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  transform: translate(-50%, -50%) scale(1.08) !important;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4)) !important;
}

/* Small play/pause button in control bar - use custom icon (smaller) */
.plyr__controls button[data-plyr="play"] {
  position: relative;
  background: transparent !important;
}

.plyr__controls button[data-plyr="play"]::before {
  content: '';
  display: block;
  width: 32px;
  height: 21px;
  background-image: url('/icons/play-pillow-final.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: brightness(0) invert(1); /* Make it white for control bar */
}

/* When playing, show a simple pause icon instead */
.plyr--playing .plyr__controls button[data-plyr="play"]::before {
  background-image: none;
  width: 18px;
  height: 18px;
  border-left: 5px solid white;
  border-right: 5px solid white;
  border-top: 0;
  border-bottom: 0;
  background: transparent;
  filter: none;
}

/* ========================================
   VIDEO END OVERLAY (to hide YouTube related videos)
   ======================================== */

.video-end-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  /* Semi-transparent dark overlay for better text readability */
  box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.5);
}

.video-end-overlay.active {
  display: flex;
}

.video-end-overlay-content {
  text-align: center;
  color: white;
  padding: 2rem;
  max-width: 500px;
}

.video-end-overlay-content h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.video-end-overlay-content p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.video-end-overlay-link {
  display: inline-block;
  background: #FF7B33;
  color: white;
  padding: 0.75rem 2rem;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  font-size: 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.video-end-overlay-link:hover {
  background: #e66d2e;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
  color: white;
  text-decoration: none;
}

/* Self-contained video frame: no dependency on the retired theme CSS. */
.video-banner-container { position: relative; width: 100%; max-width: 100%; aspect-ratio: 4/3; overflow: hidden; cursor: pointer; }
.video-shortcode-plyr { aspect-ratio: 16/9; }
.video-banner-container .video-banner-poster { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-play-overlay { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.video-play-overlay img { width: 120px; max-width: 25%; height: auto; filter: drop-shadow(0 4px 8px rgba(0,0,0,.3)); }
.video-banner-container:focus-visible { outline: 3px solid #ff7b33; outline-offset: 4px; }
.video-banner-container .video-container-16-9 { position: absolute; inset: 0; width: 100%; height: 100%; }
.video-container-16-9 > div, .video-container-16-9 .plyr, .video-container-16-9 .plyr__video-wrapper { width: 100%; height: 100%; }
.video-banner-container.playing > .video-banner-poster,
.video-banner-container.playing > .video-play-overlay { display: none; }
.video-privacy-panel { position: absolute; inset: 0; z-index: 20; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; overflow-y: auto; padding: clamp(12px, 3vw, 30px); background: #e4f8fb; color: #220c10; text-align: center; cursor: default; }
.video-privacy-panel p { max-width: 52ch; margin: 0; font: 400 clamp(13px, 1.5vw, 17px)/1.5 "Ubuntu", sans-serif; }
.video-privacy-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.video-privacy-button { padding: 10px 14px; border: 1px solid #086172; background: #086172; color: #fff; font: 600 12px/1.3 "Montserrat", sans-serif; cursor: pointer; }
.video-privacy-button--cancel { background: transparent; color: #086172; }
.video-privacy-button:focus-visible { outline: 3px solid #ff7b33; outline-offset: 2px; }
.video-stop-button { position: absolute; top: 8px; right: 8px; z-index: 30; }
@media (max-width: 480px) { .video-privacy-panel { gap: 8px; } .video-privacy-button { padding: 8px 10px; } }