/* ================================
   THEME TOKENS (меняй под бренд)
   ================================ */
:root {
  --ply-bg: #0b0f17;
  --ply-surface: #0f1420;
  --ply-surface-2: #131a28;
  --ply-overlay: rgba(8, 12, 20, 0.65);
  --ply-border: rgba(255,255,255,0.08);

  /* Текст/иконки */
  --ply-text: #f5f7fb;
  --ply-text-2: rgba(245,247,251,0.75);
  --ply-muted: rgba(245,247,251,0.55);

  /* Акцент (indigo/blue) */
  --ply-accent: #3b82f6;   /* основной оттенок */
  --ply-accent-2: #2563eb; /* ховер/актив */

  /* Системные */
  --ply-shadow: 0 10px 35px rgba(0, 0, 0, 0.4);
  --ply-blur: saturate(140%) blur(6px);
}

/* Возможность переключить акцент целиком на странице:
   body[data-accent="purple"] { --ply-accent:#8b5cf6; --ply-accent-2:#7c3aed; }
   body[data-accent="teal"]   { --ply-accent:#06b6d4; --ply-accent-2:#0891b2; }
*/

/* ================================
   CONTAINER
   ================================ */
.cinema-player {
  position: relative;
  background: var(--ply-surface);
  border: 1px solid var(--ply-border);
  border-radius: 14px;
  overflow: hidden;
  max-width: 100%;
  box-shadow: var(--ply-shadow);
  user-select: none;
  cursor: default;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.cinema-player:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,.55);
}

.cinema-player video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  background: #000;
  object-fit: contain;
}

/* ================================
   CENTRAL OVERLAY BUTTON
   ================================ */
.cp-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none; /* клики идут по кнопке, не по слою */
}

.cp-center .cp-btn {
  pointer-events: auto;
  background: linear-gradient(180deg, rgba(20,28,44,.8), rgba(13,19,33,.8));
  border: 1px solid var(--ply-border);
  backdrop-filter: var(--ply-blur);
  -webkit-backdrop-filter: var(--ply-blur);
  border-radius: 50%;
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}

.cp-center .cp-btn:hover {
  transform: scale(1.06);
  border-color: rgba(59,130,246,.35);
}

.cp-center svg { fill: var(--ply-text); width: 36px; height: 36px; }

/* ================================
   CONTROLS WRAPPER
   ================================ */
.cp-controls {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 14px 12px;
  background: linear-gradient(180deg, transparent 0, rgba(5,8,13,.85) 60%);
  opacity: 0;
  transition: opacity .25s ease;
  border-top: 1px solid rgba(255,255,255,.05);
}

.cinema-player.show-controls .cp-controls,
.cinema-player.paused .cp-controls {
  opacity: 1;
}

/* ================================
   PROGRESS
   ================================ */
.cp-progress {
  width: 100%;
  appearance: none;
  height: 5px;
  background: rgba(255,255,255,.18);
  border-radius: 6px;
  cursor: pointer;
}
.cp-progress:focus { outline: none; }

.cp-progress::-webkit-slider-thumb {
  appearance: none;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--ply-accent);
  border: 2px solid #fff;
  box-shadow: 0 0 0 3px rgba(59,130,246,.25);
  transition: transform .1s ease;
}
.cp-progress:active::-webkit-slider-thumb { transform: scale(1.05); }

.cp-progress::-moz-range-thumb {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--ply-accent);
  border: 2px solid #fff;
}

/* ================================
   LOWER ROW
   ================================ */
.cp-row {
  display: flex; align-items: center; gap: 10px; margin-top: 8px;
}

/* Buttons */
.cp-btn {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--ply-border);
  border-radius: 10px;
  padding: 6px 8px;
  min-width: 36px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
}

.cp-btn:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,.07);
  border-color: rgba(59,130,246,.3);
}

.cp-btn:active { transform: translateY(0); }

.cp-btn svg {
  width: 22px; height: 22px; fill: var(--ply-text);
}

/* Time label */
.cp-time {
  color: var(--ply-text);
  font-size: 13px;
  letter-spacing: .2px;
  opacity: .9;
  min-width: 90px;
}

/* ================================
   VOLUME + FS
   ================================ */
.cp-vol { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.cp-vol input[type="range"] {
  width: 95px;
  appearance: none;
  height: 4px;
  background: rgba(255,255,255,.2);
  border-radius: 4px;
  cursor: pointer;
}
.cp-vol input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ply-accent-2);
  border: 2px solid #fff;
}
.cp-vol input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ply-accent-2);
  border: 2px solid #fff;
}

/* ================================
   FULLSCREEN STYLES
   ================================ */
.cinema-player:fullscreen,
.cinema-player:-webkit-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  margin: 0;
  border-radius: 0;
  background: #000;
  z-index: 9999;
}
.cinema-player:fullscreen video,
.cinema-player:-webkit-full-screen video {
  width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  object-fit: contain;
}

/* В FS убираем курсор, но показываем при движении */
.cinema-player.is-fs { cursor: none; }
.cinema-player.is-fs.show-controls { cursor: default; }

/* Скрыть полосы прокрутки в FS (некоторые браузеры) */
.cinema-player:fullscreen::-webkit-scrollbar { display: none; }

/* ================================
   FOCUS / ACCESSIBILITY
   ================================ */
.cp-controls button:focus { outline: 2px solid rgba(59,130,246,.5); outline-offset: 2px; }

/* ================================
   SMALL SCREENS
   ================================ */
@media (max-width: 640px) {
  .cp-center .cp-btn { width: 60px; height: 60px; }
  .cp-controls { padding: 8px 10px 10px; }
  .cp-btn { border-radius: 8px; min-width: 32px; padding: 5px 7px; }
  .cp-time { font-size: 12px; min-width: 72px; }
  .cp-vol input[type="range"] { width: 80px; }
}

/* ================================
   EXTRA: hover подсветка accent
   ================================ */
.cinema-player.show-controls .cp-progress::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(59,130,246,.35);
}

/* --- Скрытие центральной кнопки при неактивности --- */
.cp-center {
  opacity: 1;
  transition: opacity 0.4s ease;
}
.cp-center:not(.visible) {
  opacity: 0;
  pointer-events: none;
}