/* ================================================================
   Achyls Fansub — Turkish Theme for Plyr.js
   
   Custom CSS properties override Plyr's default styling with a
   modern Turkish fansub aesthetic. The color palette is inspired
   by the Turkish flag (red/white) with a dark video-first design.
   ================================================================ */

:root {
  /* ── Primary Brand Colors ── */
  --achyls-red: #e30a17;
  --achyls-red-hover: #ff1a2e;
  --achyls-red-dark: #b00812;
  --achyls-white: #ffffff;
  --achyls-cream: #f5f0eb;

  /* ── Dark theme surface colors ── */
  --achyls-bg: #0d0d0d;
  --achyls-surface: #1a1a1a;
  --achyls-surface-hover: #252525;
  --achyls-border: #333333;
  --achyls-text: #e0e0e0;
  --achyls-text-muted: #888888;

  /* ── Marker colors ── */
  --achyls-marker-opening: #f59e0b;
  --achyls-marker-ending: #3b82f6;
}

/* ── Plyr CSS Custom Properties Override ── */
.achylys-player {
  /* Main accent = Achyls red */
  --plyr-color-main: var(--achyls-red);

  /* Video background */
  --plyr-video-background: var(--achyls-bg);

  /* Control bar */
  --plyr-video-controls-background: linear-gradient(
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.85) 100%
  );
  --plyr-video-control-color: var(--achyls-text);
  --plyr-video-control-color-hover: var(--achyls-white);
  --plyr-video-control-background-hover: var(--achyls-red);

  /* Progress bar */
  --plyr-range-fill-background: var(--achyls-red);
  --plyr-video-progress-buffered-background: rgba(255, 255, 255, 0.2);
  --plyr-video-range-track-background: rgba(255, 255, 255, 0.15);

  /* Menu / Settings */
  --plyr-menu-background: rgba(26, 26, 26, 0.95);
  --plyr-menu-color: var(--achyls-text);
  --plyr-menu-border-color: var(--achyls-border);
  --plyr-menu-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  --plyr-menu-radius: 8px;
  --plyr-menu-item-arrow-color: var(--achyls-text-muted);

  /* Badges */
  --plyr-badge-background: var(--achyls-red);
  --plyr-badge-text-color: var(--achyls-white);

  /* Tooltips */
  --plyr-tooltip-background: rgba(26, 26, 26, 0.95);
  --plyr-tooltip-color: var(--achyls-text);

  /* Captions */
  --plyr-captions-background: rgba(0, 0, 0, 0.75);
  --plyr-captions-text-color: var(--achyls-white);

  /* Typography */
  --plyr-font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --plyr-font-size-base: 15px;
  --plyr-font-size-time: 13px;
  --plyr-font-size-menu: 13px;

  /* Controls */
  --plyr-control-spacing: 10px;
  --plyr-control-radius: 6px;

  /* Progress */
  --plyr-range-thumb-height: 13px;
  --plyr-range-thumb-background: var(--achyls-red);
  --plyr-range-thumb-shadow: 0 1px 3px rgba(227, 10, 23, 0.4);
  --plyr-range-track-height: 5px;
}

/* ── Player Container ── */
.achylys-player-container {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--achyls-bg);
  overflow: hidden;
}

/* When embedded as iframe, fill the viewport */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
}

/* ── Episode Info Overlay ── */
.achylys-episode-info {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 10;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  border-left: 3px solid var(--achyls-red);
  padding: 10px 16px;
  border-radius: 0 8px 8px 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.achylys-episode-info.hidden {
  opacity: 0;
}

.achylys-episode-info .series-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--achyls-red);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}

.achylys-episode-info .episode-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--achyls-white);
  margin: 2px 0 0;
}

.achylys-episode-info .translator-credit {
  font-size: 11px;
  color: var(--achyls-text-muted);
  margin: 4px 0 0;
}

/* ── Marker Styles ── */
.achylys-player .plyr__progress__marker {
  width: 3px;
  border-radius: 2px;
}

.achylys-player .plyr__progress__marker[data-type="opening_start"],
.achylys-player .plyr__progress__marker[data-type="opening_end"] {
  background-color: var(--achyls-marker-opening) !important;
}

.achylys-player .plyr__progress__marker[data-type="ending_start"],
.achylys-player .plyr__progress__marker[data-type="ending_end"] {
  background-color: var(--achyls-marker-ending) !important;
}

/* ── Quality Badges ── */
.achylys-player .plyr__menu__container [data-value]::after {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 8px;
}

.achylys-player .plyr__menu__container [data-value="1080p"]::after {
  content: "Yüksek";
  background: var(--achyls-red);
  color: white;
}

.achylys-player .plyr__menu__container [data-value="720p"]::after {
  content: "Orta";
  background: #666;
  color: white;
}

.achylys-player .plyr__menu__container [data-value="480p"]::after {
  content: "Düşük";
  background: #444;
  color: white;
}

/* ── Subtitle Style Panel (matches Plyr settings menu) ── */
.achylys-subtitle-panel {
  position: absolute;
  right: 12px;
  bottom: 56px;
  z-index: 20;
  background: var(--plyr-menu-background);
  backdrop-filter: blur(12px);
  border: 1px solid var(--plyr-menu-border-color);
  border-radius: var(--plyr-menu-radius);
  padding: 16px;
  width: 260px;
  color: var(--plyr-menu-color);
  font-size: var(--plyr-font-size-menu);
  box-shadow: var(--plyr-menu-shadow);
  transition: opacity 0.2s ease, transform 0.2s ease;
  line-height: 1.5;
}

.achylys-subtitle-panel.hidden {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

.achylys-subtitle-panel h3 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--achyls-red);
  border-bottom: 1px solid var(--plyr-menu-border-color);
  padding-bottom: 8px;
}

.achylys-subtitle-panel .style-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 4px 0;
}

.achylys-subtitle-panel .style-row label {
  font-size: 13px;
  color: var(--plyr-menu-color);
  flex-shrink: 0;
}

.achylys-subtitle-panel select,
.achylys-subtitle-panel input[type="range"] {
  background: var(--achyls-surface);
  border: 1px solid var(--achyls-border);
  border-radius: 4px;
  color: var(--achyls-text);
  padding: 4px 8px;
  font-size: 12px;
  max-width: 120px;
}

.achylys-subtitle-panel input[type="color"] {
  width: 32px;
  height: 24px;
  border: 1px solid var(--achyls-border);
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  background: transparent;
}

.achylys-subtitle-panel .preset-colors {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.achylys-subtitle-panel .preset-color {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.15s;
}

.achylys-subtitle-panel .preset-color:hover,
.achylys-subtitle-panel .preset-color.active {
  border-color: var(--achyls-red);
}

.achylys-subtitle-panel .style-reset {
  width: 100%;
  margin-top: 12px;
  padding: 8px;
  background: transparent;
  border: 1px solid var(--achyls-border);
  border-radius: var(--plyr-control-radius);
  color: var(--achyls-text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.achylys-subtitle-panel .style-reset:hover {
  background: var(--achyls-surface-hover);
  color: var(--achyls-text);
  border-color: var(--achyls-red);
}

/* ── Iframe-specific: fill viewport, no page chrome ── */
.achylys-player-container .plyr {
  width: 100%;
  height: 100%;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .achylys-subtitle-panel {
    width: calc(100% - 24px);
    right: 12px;
    bottom: 64px;
  }

  .achylys-episode-info {
    top: 8px;
    left: 8px;
    padding: 6px 12px;
  }

  .achylys-episode-info .series-title {
    font-size: 12px;
  }

  .achylys-episode-info .episode-title {
    font-size: 14px;
  }
}

/* ── Smooth transitions for caption changes ── */
.achylys-player ::cue {
  transition: font-size 0.2s ease, color 0.2s ease;
}

/* ── Loading spinner color ── */
.achylys-player .plyr__progress--loading::after {
  background-color: var(--achyls-red) !important;
}

/* ── Focus visible ── */
.achylys-player .plyr__control:focus-visible,
.achylys-player .plyr__control--overlaid:focus-visible {
  outline: 2px solid var(--achyls-red);
  outline-offset: 2px;
}