/* ══════════════════════════════════════════════
   WP VAST Ads Pro — Video Player CSS
   ══════════════════════════════════════════════ */
.wvap-player-container {
  position: relative;
  background: #000;
  user-select: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  overflow: hidden;
  border-radius: 4px;
  --accent: #e8213a;
}
.wvap-player-container * { box-sizing: border-box; }
.wvap-player-container:fullscreen,
.wvap-player-container:-webkit-full-screen { width: 100% !important; height: 100% !important; border-radius: 0; }

/* Videos */
.wvap-main-video,
.wvap-ad-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.wvap-ad-video  { z-index: 10; display: none; }

/* ── Loader ── */
.wvap-loader {
  position: absolute; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.6);
}
.wvap-spinner {
  width: 36px; height: 36px;
  border: 3px solid rgba(255,255,255,.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: wvap-spin .7s linear infinite;
}
@keyframes wvap-spin { to { transform: rotate(360deg); } }

/* ── Big play button ── */
.wvap-big-play {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; padding: 0;
  transition: opacity .2s;
}
.wvap-big-play svg { width: 80px; height: 80px; drop-shadow: 0 2px 8px rgba(0,0,0,.5); }
.wvap-big-play:hover svg circle { fill: rgba(0,0,0,.75); }
.wvap-big-play.hidden { opacity: 0; pointer-events: none; }

/* ── Ad UI ── */
.wvap-ad-ui {
  position: absolute; inset: 0; z-index: 15;
  pointer-events: none;
}
.wvap-ad-label {
  position: absolute; top: 10px; left: 12px;
  background: rgba(255,200,0,.9); color: #000;
  font-size: 10px; font-weight: 800; letter-spacing: .06em;
  padding: 3px 7px; border-radius: 3px;
}
.wvap-ad-countdown {
  position: absolute; bottom: 54px; right: 14px;
  color: rgba(255,255,255,.8); font-size: 11px;
  background: rgba(0,0,0,.5); padding: 3px 8px; border-radius: 3px;
}
.wvap-click-through {
  position: absolute; inset: 0;
  cursor: pointer; pointer-events: all;
}
.wvap-skip-wrap {
  position: absolute; bottom: 50px; right: 12px;
  pointer-events: all;
}
.wvap-skip-btn {
  display: flex; align-items: center; gap: 4px;
  background: rgba(0,0,0,.75); color: #fff;
  border: 1px solid rgba(255,255,255,.4);
  padding: 6px 14px; border-radius: 3px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .15s;
}
.wvap-skip-btn:hover { background: rgba(0,0,0,.9); }
.wvap-skip-arrow { font-size: 18px; }
.wvap-skip-countdown {
  position: absolute; bottom: 50px; right: 12px;
  background: rgba(0,0,0,.6); color: rgba(255,255,255,.8);
  padding: 6px 14px; border-radius: 3px;
  font-size: 13px; border: 1px solid rgba(255,255,255,.2);
}

/* ── Controls ── */
.wvap-controls {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 20;
  background: linear-gradient(transparent, rgba(0,0,0,.75));
  padding: 24px 12px 8px;
  transform: translateY(100%);
  transition: transform .25s;
  opacity: 0;
}
.wvap-player-container:hover .wvap-controls,
.wvap-player-container.wvap-paused .wvap-controls {
  transform: translateY(0);
  opacity: 1;
}
.wvap-player-container.wvap-ad-playing .wvap-controls { display: none; }

.wvap-controls-row {
  display: flex; align-items: center; gap: 10px;
}
.wvap-ctrl {
  background: none; border: none; color: #fff;
  cursor: pointer; padding: 4px; display: flex;
  align-items: center; justify-content: center;
  opacity: .85; transition: opacity .15s;
  flex-shrink: 0;
}
.wvap-ctrl:hover { opacity: 1; }
.wvap-ctrl svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wvap-play-btn svg { fill: #fff; stroke: none; }
.wvap-spacer { flex: 1; }

/* Progress bar */
.wvap-progress-wrap { margin-bottom: 6px; cursor: pointer; padding: 4px 0; }
.wvap-progress-bar {
  position: relative; height: 4px; background: rgba(255,255,255,.25);
  border-radius: 2px; overflow: visible;
}
.wvap-progress-fill {
  height: 100%; background: var(--accent);
  border-radius: 2px; pointer-events: none;
  transition: width .1s linear;
  width: 0%;
}
.wvap-progress-thumb {
  position: absolute; top: 50%; right: -1px; transform: translate(50%,-50%);
  width: 12px; height: 12px; background: #fff; border-radius: 50%;
  box-shadow: 0 0 4px rgba(0,0,0,.4); opacity: 0;
  transition: opacity .15s;
}
.wvap-progress-wrap:hover .wvap-progress-bar { height: 5px; }
.wvap-progress-wrap:hover .wvap-progress-thumb { opacity: 1; }

/* Time */
.wvap-time { color: #fff; font-size: 12px; white-space: nowrap; opacity: .85; }

/* Volume */
.wvap-volume-wrap { display: flex; align-items: center; gap: 4px; }
.wvap-volume-slider {
  width: 70px; height: 4px; cursor: pointer;
  -webkit-appearance: none; background: rgba(255,255,255,.3);
  border-radius: 2px; outline: none;
}
.wvap-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px;
  background: #fff; border-radius: 50%; cursor: pointer;
}
@media (max-width: 480px) { .wvap-volume-slider { display: none; } }

/* ── Error state ── */
.wvap-error {
  position: absolute; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  background: #000;
}
.wvap-error p { color: #888; font-size: 14px; }

/* ── Themes ── */
.wvap-theme-light .wvap-controls { background: linear-gradient(transparent, rgba(255,255,255,.85)); }
.wvap-theme-light .wvap-ctrl     { color: #222; }
.wvap-theme-light .wvap-time     { color: #222; }
.wvap-theme-light .wvap-play-btn svg { fill: #222; }

/* ── Mobile ── */
@media (max-width: 480px) {
  .wvap-controls { opacity: 1; transform: none; }
  .wvap-big-play svg { width: 60px; height: 60px; }
}