/*!
 * WavePlay — Modern Video Streaming Platform
 * Copyright (c) 2025–2026 WavePlay. All rights reserved. | Contact: contact@waveplay.in
 * Proprietary — see LICENSE file. Not for redistribution.
 * Module: Custom video player styles | Created: 2025-06-01 | Last updated: 2026-08-04
 */
/* ── WavePlay Custom Player ───────────────────────────────────────────────── */
.sp-wrap {
  position: relative;
  width: 100%; aspect-ratio: 16/9;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
  border: 1px solid var(--border);
  user-select: none;
}
.sp-wrap video {
  width: 100%; height: 100%; display: block;
  cursor: pointer;
}

/* Overlay fades out during playback */
.sp-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  justify-content: flex-end;
  opacity: 1;
  transition: opacity .35s;
}
.sp-wrap.sp-playing.sp-idle .sp-overlay { opacity: 0; }
.sp-wrap.sp-playing.sp-idle { cursor: none; }

/* Top gradient */
.sp-overlay::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(0,0,0,.4) 0%,
    transparent 25%,
    transparent 55%,
    rgba(0,0,0,.85) 100%);
  pointer-events: none;
}

/* ── Center play/pause flash ──────────────────────────────────────────────── */
.sp-center {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.sp-center-btn {
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(58,123,213,.88);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.7);
  transition: opacity .18s, transform .18s;
  box-shadow: 0 4px 24px rgba(58,123,213,.50);
}
.sp-center-btn.flash {
  animation: sp-flash .5s ease forwards;
}
@keyframes sp-flash {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.3); }
}

/* ── Buffering spinner ────────────────────────────────────────────────────── */
.sp-spinner {
  position: absolute; inset: 0;
  display: none; align-items: center; justify-content: center;
  pointer-events: none;
}
.sp-spinner.show { display: flex; }
.sp-spinner::after {
  content: '';
  width: 44px; height: 44px;
  border: 3px solid rgba(255,255,255,.2);
  border-top-color: var(--accent-light);
  border-radius: 50%;
  animation: sp-spin .7s linear infinite;
}
@keyframes sp-spin { to { transform: rotate(360deg); } }

/* ── Playback error ───────────────────────────────────────────────────────── */
.sp-error {
  position: absolute; inset: 0;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  background: #0a0a0a;
  color: var(--text3);
  text-align: center;
  padding: 20px;
}
.sp-error.show { display: flex; }
.sp-error-icon { font-size: 32px; opacity: .7; }
.sp-error-text { font-size: 14px; font-weight: 600; color: var(--text2); }
.sp-wrap.sp-error-state .sp-overlay,
.sp-wrap.sp-error-state video { display: none; }

/* ── Resume / start over ──────────────────────────────────────────────────────
   Sits on the video, just above the control bar. A sibling of .sp-overlay, not a
   child, so it stays put when the overlay fades out on idle — the choice is only
   offered for a few seconds and it must not vanish because the mouse went still.

   Hidden state is visibility + opacity rather than display:none, for two reasons:
   the fade animates, and pointer-events:none keeps it from swallowing clicks on
   the video underneath it while invisible. */
.sp-resume {
  position: absolute; left: 14px; bottom: 74px; z-index: 3;
  display: flex; align-items: center; gap: 4px;
  padding: 4px;
  border-radius: 999px;
  /* Translucent enough to read the frame through, opaque enough to read the text
     on top of any frame. The blur is what does most of the work. */
  background: rgba(10, 16, 30, .55);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .13);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .38);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(6px);
  transition: opacity .28s ease, transform .28s ease, visibility .28s;
}
.sp-resume.show { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }

.sp-resume-btn {
  border: 0; background: transparent; color: #fff;
  font-family: inherit; font-size: 12.5px; font-weight: 600; line-height: 1;
  padding: 7px 13px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  transition: background var(--transition), transform var(--transition);
}
.sp-resume-btn:hover  { background: rgba(255, 255, 255, .15); }
.sp-resume-btn:active { transform: scale(.96); }
.sp-resume-btn:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
.sp-resume-btn svg { flex-shrink: 0; }

.sp-resume-go       { background: rgba(58, 123, 213, .82); }
.sp-resume-go:hover { background: rgba(58, 123, 213, .96); }
.sp-resume-over     { color: rgba(255, 255, 255, .82); }
.sp-resume-over:hover { color: #fff; }

@media (max-width: 600px) {
  .sp-resume { left: 8px; bottom: 66px; gap: 2px; }
  .sp-resume-btn { font-size: 11.5px; padding: 6px 10px; }
}

/* ── Controls bar ─────────────────────────────────────────────────────────── */
.sp-controls {
  position: relative; z-index: 2;
  padding: 0 14px 12px;
}

/* Progress bar */
.sp-progress {
  position: relative; height: 4px;
  background: rgba(255,255,255,.2);
  border-radius: 4px; cursor: pointer;
  margin-bottom: 10px;
  transition: height .15s;
}
.sp-wrap:hover .sp-progress,
.sp-progress:hover { height: 6px; }

.sp-buffered {
  position: absolute; left: 0; top: 0; height: 100%;
  background: rgba(255,255,255,.3); border-radius: 4px;
  pointer-events: none;
}
.sp-played {
  position: absolute; left: 0; top: 0; height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  border-radius: 4px; pointer-events: none;
}
.sp-thumb {
  position: absolute; top: 50%; width: 14px; height: 14px;
  background: #fff; border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform .15s;
  pointer-events: none;
  box-shadow: 0 0 6px rgba(58,123,213,.45);
}
.sp-progress:hover .sp-thumb { transform: translate(-50%, -50%) scale(1); }

/* Time tooltip on hover */
.sp-time-tip {
  position: absolute; bottom: 16px;
  background: rgba(7,9,15,.9);
  color: #fff; font-size: 12px; font-weight: 600;
  padding: 3px 8px; border-radius: 5px;
  pointer-events: none; white-space: nowrap;
  transform: translateX(-50%);
  display: none;
  border: 1px solid var(--border2);
}
.sp-progress:hover .sp-time-tip { display: block; }

/* Controls row */
.sp-bar {
  display: flex; align-items: center; gap: 10px;
}

/* Ghost controls (2026-08-04). Nothing is drawn at rest — no box, no fill, just the
   glyph on the scrim. The disc and its halo exist only under the pointer, so the
   picture is never competing with a row of chrome. The halo is a spread-only
   box-shadow rather than a second element, which keeps hit-testing to the button. */
.sp-btn {
  background: transparent; border: none; color: #fff;
  width: 34px; height: 34px; padding: 0; cursor: pointer; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  opacity: .82; flex-shrink: 0;
  transition: opacity var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.sp-btn:hover, .sp-btn:focus-visible {
  opacity: 1;
  background: rgba(255,255,255,.20);
  box-shadow: 0 0 0 6px rgba(255,255,255,.07);
}
.sp-btn svg { display: block; }

.sp-time-display {
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,.9);
  white-space: nowrap; letter-spacing: .3px; flex-shrink: 0;
}

.sp-spacer { flex: 1; }

/* Volume */
.sp-vol-wrap {
  display: flex; align-items: center; gap: 6px;
}
.sp-vol-slider {
  width: 70px; height: 4px; cursor: pointer;
  -webkit-appearance: none;
  background: rgba(255,255,255,.25); border-radius: 4px;
  border: none; padding: 0;
  transition: width .2s;
}
.sp-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; cursor: pointer;
}
.sp-vol-slider::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: none; cursor: pointer;
}

/* Speed, quality and captions are the same ghost treatment in pill form — they carry
   text, so they can't be the 34px circle the icon buttons are. The border is
   transparent rather than absent so the pill doesn't change width on hover. */
.sp-speed, .sp-quality, .sp-cc {
  background: transparent;
  border: 1px solid transparent;
  color: #fff; font-size: 12px; font-weight: 600;
  padding: 4px 9px; border-radius: 40px; cursor: pointer;
  width: auto; opacity: .82;
  transition: opacity var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.sp-speed:hover,   .sp-speed:focus-visible,
.sp-quality:hover, .sp-quality:focus-visible,
.sp-cc:hover,      .sp-cc:focus-visible {
  opacity: 1;
  background: rgba(255,255,255,.20);
  box-shadow: 0 0 0 6px rgba(255,255,255,.07);
}
.sp-quality { margin-left: 6px; }
.sp-cc      { margin-left: 6px; max-width: 110px; }
.sp-speed option, .sp-quality option, .sp-cc option { background: var(--bg2); color: var(--text); }

/* Title overlay (top) */
.sp-title-bar {
  position: absolute; top: 0; left: 0; right: 0;
  padding: 14px 16px;
  font-size: 14px; font-weight: 600; color: #fff;
  z-index: 2;
  opacity: .9;
}

/* Keyboard hint */
.sp-kbd-flash {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(7,9,15,.8);
  color: #fff; padding: 10px 20px;
  border-radius: 10px; font-size: 15px; font-weight: 700;
  border: 1px solid var(--border2);
  opacity: 0; pointer-events: none; z-index: 10;
  transition: opacity .15s;
}
.sp-kbd-flash.show { opacity: 1; }