/* ============================================================
   BBH VIDEO PLAYER — css/video-player.css
   All selectors scoped to .bbh-vp to avoid conflicts
   ============================================================ */

.bbh-vp {
  position: relative;
  width: 100%;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(53,189,143,0.14),
    0 24px 64px rgba(0,0,0,0.55);
  cursor: pointer;
  /* Reveal controls on hover */
  --ctrl-opacity: 0;
}
.bbh-vp:hover       { --ctrl-opacity: 1; }
.bbh-vp.is-paused   { --ctrl-opacity: 1; }
.bbh-vp.is-ended    { --ctrl-opacity: 1; }

/* ── Video element ─────────────────────────────────── */
.bbh-vp__video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ── Idle / paused overlay ─────────────────────────── */
.bbh-vp__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, rgba(2,28,16,0.55) 0%, rgba(0,0,0,0.40) 100%);
  transition: opacity 0.3s ease;
  border-radius: 14px;
  z-index: 10;
}
.bbh-vp.is-playing .bbh-vp__overlay {
  opacity: 0;
  pointer-events: none;
}

/* Big play button */
.bbh-vp__play-btn {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(53,189,143,0.16);
  border: 1.5px solid rgba(53,189,143,0.50);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.22s, background 0.22s, border-color 0.22s, box-shadow 0.22s;
}
.bbh-vp__play-btn svg { width: 28px; height: 28px; margin-left: 4px; }
.bbh-vp__play-btn:hover {
  transform: scale(1.12);
  background: rgba(53,189,143,0.30);
  border-color: rgba(53,189,143,0.75);
  box-shadow: 0 0 36px rgba(53,189,143,0.25);
}

/* ── Control bar ───────────────────────────────────── */
.bbh-vp__controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32px 16px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(to top, rgba(0,0,0,0.80) 0%, transparent 100%);
  opacity: var(--ctrl-opacity);
  transition: opacity 0.25s ease;
  z-index: 20;
  border-radius: 0 0 14px 14px;
}

/* Generic control button */
.bbh-vp__btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.80);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.18s, background 0.18s;
  padding: 0;
}
.bbh-vp__btn svg { width: 16px; height: 16px; }
.bbh-vp__btn:hover {
  color: #fff;
  background: rgba(255,255,255,0.10);
}

/* Play/pause icon toggling */
.bbh-vp__icon-pause  { display: none; }
.bbh-vp.is-playing .bbh-vp__icon-play  { display: none; }
.bbh-vp.is-playing .bbh-vp__icon-pause { display: block; }

/* Mute icon toggling */
.bbh-vp__icon-muted  { display: none; }
.bbh-vp.is-muted .bbh-vp__icon-vol   { display: none; }
.bbh-vp.is-muted .bbh-vp__icon-muted { display: block; }

/* Fullscreen icon toggling */
.bbh-vp__icon-exit-fs { display: none; }
.bbh-vp.is-fullscreen .bbh-vp__icon-fs      { display: none; }
.bbh-vp.is-fullscreen .bbh-vp__icon-exit-fs { display: block; }

/* ── Progress bar ──────────────────────────────────── */
.bbh-vp__progress {
  flex: 1;
  padding: 8px 0;   /* fat click target */
  cursor: pointer;
}
.bbh-vp__progress-track {
  position: relative;
  height: 3px;
  background: rgba(255,255,255,0.18);
  border-radius: 2px;
  overflow: visible;
}
.bbh-vp__progress-buffer,
.bbh-vp__progress-fill {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  border-radius: 2px;
  width: 0%;
  transition: width 0.1s linear;
}
.bbh-vp__progress-buffer { background: rgba(255,255,255,0.22); }
.bbh-vp__progress-fill   { background: var(--brand-mint, #35BD8F); }

/* Scrub thumb */
.bbh-vp__progress-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%) scale(0);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--brand-mint, #35BD8F);
  transition: transform 0.18s, left 0.1s linear;
  pointer-events: none;
}
.bbh-vp__progress:hover .bbh-vp__progress-thumb,
.bbh-vp__progress:focus .bbh-vp__progress-thumb {
  transform: translate(-50%, -50%) scale(1);
}
.bbh-vp__progress:hover .bbh-vp__progress-track { height: 4px; }

/* ── Time display ──────────────────────────────────── */
.bbh-vp__time {
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.65);
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.bbh-vp__time-sep { margin: 0 2px; opacity: 0.45; }

/* ── Fullscreen ─────────────────────────────────────── */
.bbh-vp:-webkit-full-screen { border-radius: 0; }
.bbh-vp:-moz-full-screen    { border-radius: 0; }
.bbh-vp:fullscreen          { border-radius: 0; }

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 480px) {
  .bbh-vp__play-btn { width: 60px; height: 60px; }
  .bbh-vp__play-btn svg { width: 22px; height: 22px; }
  .bbh-vp__time { display: none; }
}