/* ═══════════════════════════════════════════════════════════════════
   RLC VIDEO PLAYER — rlc-video-custom.css
   Version: 1.0.0

   Matches the design language of the lightbox (dark, minimal, DM Mono).
   All rules are scoped to .rlc-videocontainer or .rlc-hasvideo-custom
   to avoid collisions with other page styles.

   CAPTION DISPLAY
   ───────────────
   .rlc-vc-caption-display is intentionally left mostly unstyled —
   position it and style the text however your design requires.
   The only defaults set here are: hidden when empty, block when active.

   DESIGN TOKENS
   ─────────────
   The player respects these CSS custom properties if set on a parent:
     --rlc-vc-accent       scrubber progress + active state  (default: #c8ff00)
     --rlc-vc-fg           icon and scrubber track color     (default: #e8e4dc)
     --rlc-vc-bg           controls background               (default: rgba(12,12,12,0.6))
     --rlc-vc-icon-size    button icon size                  (default: 18px)
     --rlc-vc-btn-size     button hit area                   (default: 36px)
═══════════════════════════════════════════════════════════════════ */

/* ─── CONTAINER ───────────────────────────── */
.rlc-hasvideo-custom .rlc-videocontainer {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  /* Cursor hides when controls hide during playback */
  cursor: default;
}

.rlc-hasvideo-custom .rlc-videocontainer.rlc-vc-playing.rlc-vc-controls-hidden {
  cursor: none;
}

/* ─── POSTER PICTURE ──────────────────────── */
.rlc-hasvideo-custom .rlc-picture {
  position: absolute;
  inset: 0;
  z-index: 2;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.rlc-hasvideo-custom .rlc-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rlc-hasvideo-custom .rlc-picture.rlc-vc-poster-hidden {
  opacity: 0;
  pointer-events: none;
}

/* ─── VIDEO ELEMENT ───────────────────────── */
.rlc-hasvideo-custom .rlc-vc-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}

/* ─── CONTROLS WRAPPER ────────────────────── */
.rlc-hasvideo-custom .rlc-vc-controls {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none; /* children re-enable as needed */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.rlc-hasvideo-custom .rlc-vc-controls.rlc-vc-controls-hidden {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.rlc-hasvideo-custom .rlc-vc-controls.rlc-vc-controls-visible {
  opacity: 1;
  transition: opacity 0.2s ease;
}

/* ─── SCRUBBER TRACK ──────────────────────── */
.rlc-hasvideo-custom .rlc-vc-scrubber-track {
  position: relative;
  width: 100%;
  height: 4px;
  background: #fff;   /* time remaining */
  cursor: pointer;
  pointer-events: all;
  flex-shrink: 0;
  transition: height 0.15s ease;
}

.rlc-hasvideo-custom .rlc-vc-scrubber-track:hover,
.rlc-hasvideo-custom .rlc-vc-scrubbing .rlc-vc-scrubber-track {
  height: 5px;
}

.rlc-hasvideo-custom .rlc-vc-scrubber-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: #000;  /* elapsed — white/cream */
  pointer-events: none;
  transition: width 0.05s linear;
}

/* Scrubber thumb — appears on hover/drag */
.rlc-hasvideo-custom .rlc-vc-scrubber-progress::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--rlc-vc-fg, #e8e4dc);
  transition: transform 0.15s ease;
}

.rlc-hasvideo-custom .rlc-vc-scrubber-track:hover .rlc-vc-scrubber-progress::after,
.rlc-hasvideo-custom .rlc-vc-scrubbing .rlc-vc-scrubber-progress::after {
  transform: translateY(-50%) scale(1);
}

/* ─── BUTTONS ROW ─────────────────────────── */
.rlc-hasvideo-custom .rlc-vc-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: 8px 10px 0;
  pointer-events: all;
}

/* ─── INDIVIDUAL BUTTONS ──────────────────── */
.rlc-creative_v3 .rlc-hasvideo-custom .rlc-vc-btn.rlc-button {
  width:   36px;
  height:  36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 1;
  transition: opacity 0.2s ease, transform 0.15s ease;
  border-radius: 50%;
  flex-shrink: 0;
  margin: 0 0.375em;
}
.rlc-creative_v3 .rlc-hasvideo-custom .rlc-vc-btn.rlc-button.rlc-vc-captions {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 20C4.45 20 3.97917 19.8042 3.5875 19.4125C3.19583 19.0208 3 18.55 3 18V6C3 5.45 3.19583 4.97917 3.5875 4.5875C3.97917 4.19583 4.45 4 5 4H19C19.55 4 20.0208 4.19583 20.4125 4.5875C20.8042 4.97917 21 5.45 21 6V18C21 18.55 20.8042 19.0208 20.4125 19.4125C20.0208 19.8042 19.55 20 19 20H5ZM5 18H19V6H5V18ZM7 15H10C10.2833 15 10.5208 14.9042 10.7125 14.7125C10.9042 14.5208 11 14.2833 11 14V13H9.5V13.5H7.5V10.5H9.5V11H11V10C11 9.71667 10.9042 9.47917 10.7125 9.2875C10.5208 9.09583 10.2833 9 10 9H7C6.71667 9 6.47917 9.09583 6.2875 9.2875C6.09583 9.47917 6 9.71667 6 10V14C6 14.2833 6.09583 14.5208 6.2875 14.7125C6.47917 14.9042 6.71667 15 7 15ZM14 15H17C17.2833 15 17.5208 14.9042 17.7125 14.7125C17.9042 14.5208 18 14.2833 18 14V13H16.5V13.5H14.5V10.5H16.5V11H18V10C18 9.71667 17.9042 9.47917 17.7125 9.2875C17.5208 9.09583 17.2833 9 17 9H14C13.7167 9 13.4792 9.09583 13.2875 9.2875C13.0958 9.47917 13 9.71667 13 10V14C13 14.2833 13.0958 14.5208 13.2875 14.7125C13.4792 14.9042 13.7167 15 14 15Z' fill='%23E1E1DC'/%3E%3C/svg%3E");
  background-size: 55%;
  width: 2.25em;
  height: 2.25em;
  background-repeat: no-repeat;
  background-position: center;
}
.rlc-creative_v3 .rlc-hasvideo-custom .rlc-vc-btn.rlc-button.rlc-vc-captions.rlc-vc-btn-active {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9.02499 9.0002L10.525 10.5002H7.49999V13.5002H9.49999V13.0002H11V14.0002C11 14.2835 10.9042 14.521 10.7125 14.7127C10.5208 14.9044 10.2833 15.0002 9.99999 15.0002H6.99999C6.71665 15.0002 6.47915 14.9044 6.28749 14.7127C6.09582 14.521 5.99999 14.2835 5.99999 14.0002V10.0002C5.99999 9.71686 6.09582 9.47936 6.28749 9.2877C6.47915 9.09603 6.71665 9.0002 6.99999 9.0002H9.02499ZM6.87499 4.0002H19C19.55 4.0002 20.0208 4.19603 20.4125 4.5877C20.8042 4.97936 21 5.4502 21 6.0002V18.1252L19 16.1252V6.0002H8.87499L6.87499 4.0002ZM18 13.0002V14.0002C18 14.1502 17.9708 14.296 17.9125 14.4377C17.8542 14.5794 17.7667 14.6919 17.65 14.7752L16.375 13.5002H16.5V13.0002H18ZM16.5 11.0002V10.5002H14.5V11.6252L13 10.1252V10.0002C13 9.71686 13.0958 9.47936 13.2875 9.2877C13.4792 9.09603 13.7167 9.0002 14 9.0002H17C17.2833 9.0002 17.5208 9.09603 17.7125 9.2877C17.9042 9.47936 18 9.71686 18 10.0002V11.0002H16.5ZM4.19999 4.1752L6.02499 6.0002H4.99999V18.0002H15.175L0.674988 3.5002L2.09999 2.0752L21.9 21.8752L20.475 23.3002L17.175 20.0002H4.99999C4.44999 20.0002 3.97915 19.8044 3.58749 19.4127C3.19582 19.021 2.99999 18.5502 2.99999 18.0002V6.0002C2.99999 5.58353 3.11249 5.2127 3.33749 4.8877C3.56249 4.5627 3.84999 4.3252 4.19999 4.1752Z' fill='%23E1E1DC'/%3E%3C/svg%3E");
}

/* .rlc-vc-btn:hover {
  opacity: 1;
  transform: scale(1.1);
}

.rlc-vc-btn:active {
  transform: scale(0.95);
} 

.rlc-vc-btn.rlc-vc-btn-active {
  opacity: 1;
  color: var(--rlc-vc-accent, #c8ff00);
}

.rlc-vc-btn.rlc-vc-btn-disabled {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}*/

.rlc-hasvideo-custom .rlc-vc-btn svg {
  width:  1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

/* Play/pause icon is filled, not stroked */
.rlc-hasvideo-custom .rlc-vc-playpause svg {
  fill: currentColor;
  stroke: none;
}

/* Mute icon fill elements */
.rlc-hasvideo-custom .rlc-vc-mute svg polygon {
  fill: currentColor;
  stroke: none;
}
.rlc-hasvideo-custom .rlc-vc-mute svg line {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.rlc-hasvideo-custom .rlc-vc-mute svg path {
  fill: currentColor;
  stroke: none;
}

/* Captions icon */
.rlc-hasvideo-custom .rlc-vc-captions svg rect:first-child {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}
.rlc-hasvideo-custom .rlc-vc-captions svg line {
  stroke: currentColor;
  stroke-width: 2;
}

/* ─── CAPTION DISPLAY ─────────────────────── */
/*
  Intentionally minimal — position and style
  this element to suit your layout.
  It is a sibling of .rlc-videocontainer inside
  .rlc-hasvideo-custom.
*/
.rlc-hasvideo-custom .rlc-vc-caption-display {
  display: none;
  pointer-events: none;
}

.rlc-hasvideo-custom .rlc-vc-caption-display.rlc-vc-captions-active {
  display: block;
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #fff;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 67.87%, rgba(0, 0, 0, 0.50) 105.54%);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 3.75em;
}
  .rlc-hasvideo-custom .rlc-vc-caption-display.rlc-vc-captions-active .rlc-vc-caption-text {
    font-family: RL_DroidKufi, "LeJeuneDeck-Regular", Arial, Helvetica, sans-serif;
    font-size: 1.25em;
    line-height: 1.4em;
    letter-spacing: 0;
    width: 75%;
  }

/* ─── MOBILE ──────────────────────────────── */
@media (max-width: 767px) {
  .rlc-hasvideo-custom .rlc-vc-btn {
    --rlc-vc-btn-size:  40px;
    --rlc-vc-icon-size: 20px;
  }

  .rlc-hasvideo-custom .rlc-vc-scrubber-track {
    height: 4px; /* slightly thicker on touch for easier scrubbing */
  }
}