/* ═══════════════════════════════════════════════
   VIDEO PLAYER — Custom Styles
   Target: #video1  (dmx-video component)
   Edit the :root variables to rebrand instantly
   ═══════════════════════════════════════════════ */
:root {
  --vp-accent:      #2d6ef5;      /* progress bar & controls accent */
  --vp-radius:      12px;         /* corner rounding               */
  --vp-shadow:      0 8px 32px rgba(0,0,0,.28);
  --vp-bg:          #000;         /* letterbox background          */
  --vp-border:      1px solid rgba(255,255,255,.08);

  /* ── Centre play button — edit these to customise ─────────
     These are NEW variables, added on top of your existing CSS */
  --vp-btn-size:          72px;           /* button diameter              */
  --vp-btn-radius:        50%;            /* 50% = circle, 12px = square  */
  --vp-btn-icon-size:     30px;           /* SVG icon size                */
  --vp-btn-bg:            rgba(0,0,0,.52);           /* default background  */
  --vp-btn-bg-hover:      rgba(0,0,0,.75);           /* hover background    */
  --vp-btn-border-width:  2px;
  --vp-btn-border-color:  rgba(255,255,255,.85);     /* border colour       */
  --vp-btn-border-hover:  #ffffff;
  --vp-btn-icon-color:    #ffffff;                   /* icon fill colour    */
  --vp-btn-icon-hover:    #ffffff;
  --vp-btn-glow:          0 0 28px rgba(255,255,255,.22);
  --vp-btn-glow-hover:    0 0 42px rgba(255,255,255,.40);
  --vp-btn-blur:          blur(6px);
  --vp-btn-scale-hover:   1.10;
  --vp-btn-scale-active:  0.93;
  --vp-t:                 0.20s ease;
  --vp-t-slow:            0.36s ease;
}


/* ── Outer Bootstrap column wrapper ── */
.col-md-10.col-xl-8 {
  padding: 0;
}


/* ══════════════════════════════════════════════════════════════
   NEW: .vp-wrapper
   A single <div class="vp-wrapper"> around your <video> and
   <button> in Wappler is all that is needed. It makes the
   button position relative to the video without breaking
   the aspect-ratio or any of your existing video styles.
   ══════════════════════════════════════════════════════════════ */
.vp-wrapper {
  position:      relative; /* anchor for the absolute button     */
  display:       block;
  line-height:   0;        /* removes ghost whitespace below video */
  border-radius: var(--vp-radius);
  overflow:      hidden;   /* clips button glow to player edges  */
}


/* ── The video element itself ── */
/* ✅ Your original rules — UNCHANGED                           */
#video1 {
  display:          block;
  width:            100%;
  border-radius:    var(--vp-radius);
  background:       var(--vp-bg);
  -webkit-box-shadow:   var(--vp-shadow);
          box-shadow:   var(--vp-shadow);
  border:           var(--vp-border);
  outline:          none;
  aspect-ratio:     16 / 9;
  -o-object-fit:    contain;
     object-fit:    contain;
}


/* ── Native controls — WebKit/Chrome tinting ──
   Note: Firefox & Safari have limited support.
   Use a custom player (Plyr) for full control. */
/* ✅ Your original rules — UNCHANGED                           */
#video1::-webkit-media-controls-panel {
  background-image: -webkit-gradient(
    linear,
    left top, left bottom,
    from(transparent),
    color-stop(60%, rgba(0, 0, 0, 0.75))
  );
  background-image: linear-gradient(
    transparent,
    rgba(0, 0, 0, 0.75) 60%
  );
  border-radius: 0 0 var(--vp-radius) var(--vp-radius);
}

#video1::-webkit-media-controls-play-button,
#video1::-webkit-media-controls-mute-button,
#video1::-webkit-media-controls-fullscreen-button {
  -webkit-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1); /* white icons */
}

#video1::-webkit-media-controls-timeline {
  accent-color: var(--vp-accent);
}

#video1::-webkit-media-controls-volume-slider {
  accent-color: var(--vp-accent);
}

/* ── Focus ring accessibility ── */
/* ✅ Your original rule — UNCHANGED                           */
#video1:focus-visible {
  outline:        2px solid var(--vp-accent);
  outline-offset: 3px;
}


/* ══════════════════════════════════════════════════════════════
   NEW: Centre play / pause overlay button
   Add this HTML inside .vp-wrapper in Wappler:

   <button class="vp-play-btn" id="vpPlayBtn" aria-label="Play / Pause">
     <svg class="vp-icon-play"  viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
     <svg class="vp-icon-pause" viewBox="0 0 24 24"><path d="M6 19h4V5H6zm8-14v14h4V5z"/></svg>
   </button>
   ══════════════════════════════════════════════════════════════ */

/* Button — centred absolutely over the video */
.vp-play-btn {
  position:        absolute;
  top:             50%;
  left:            50%;
  -webkit-transform:       translate(-50%, -50%) scale(1);
          transform:       translate(-50%, -50%) scale(1);

  width:           var(--vp-btn-size);
  height:          var(--vp-btn-size);
  border-radius:   var(--vp-btn-radius);

  background:          var(--vp-btn-bg);
  border:              var(--vp-btn-border-width) solid var(--vp-btn-border-color);
  -webkit-box-shadow:          var(--vp-btn-glow);
          box-shadow:          var(--vp-btn-glow);
  backdrop-filter:     var(--vp-btn-blur);
  -webkit-backdrop-filter: var(--vp-btn-blur);

  display:         -webkit-box;

  display:         -ms-flexbox;

  display:         flex;
  -webkit-box-align:     center;
      -ms-flex-align:     center;
          align-items:     center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;

  cursor:    pointer;
  padding:   0;
  outline:   none;
  z-index:   10;

  opacity:   1;
  -webkit-transition: opacity      var(--vp-t-slow),
              background   var(--vp-t),
              border-color var(--vp-t),
              -webkit-transform    var(--vp-t),
              -webkit-box-shadow   var(--vp-t);
  transition: opacity      var(--vp-t-slow),
              background   var(--vp-t),
              border-color var(--vp-t),
              -webkit-transform    var(--vp-t),
              -webkit-box-shadow   var(--vp-t);
  transition: opacity      var(--vp-t-slow),
              transform    var(--vp-t),
              background   var(--vp-t),
              box-shadow   var(--vp-t),
              border-color var(--vp-t);
  transition: opacity      var(--vp-t-slow),
              transform    var(--vp-t),
              background   var(--vp-t),
              box-shadow   var(--vp-t),
              border-color var(--vp-t),
              -webkit-transform    var(--vp-t),
              -webkit-box-shadow   var(--vp-t);
}

/* SVG icons inside the button */
.vp-play-btn svg {
  width:       var(--vp-btn-icon-size);
  height:      var(--vp-btn-icon-size);
  fill:        var(--vp-btn-icon-color);
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display:     block;
  -webkit-transition:  fill var(--vp-t);
  transition:  fill var(--vp-t);
}

/* Pause icon hidden by default */
.vp-icon-pause {
  display: none;
}

/* Hover state */
.vp-play-btn:hover {
  background:   var(--vp-btn-bg-hover);
  border-color: var(--vp-btn-border-hover);
  -webkit-box-shadow:   var(--vp-btn-glow-hover);
          box-shadow:   var(--vp-btn-glow-hover);
  -webkit-transform:    translate(-50%, -50%) scale(var(--vp-btn-scale-hover));
          transform:    translate(-50%, -50%) scale(var(--vp-btn-scale-hover));
}

.vp-play-btn:hover svg {
  fill: var(--vp-btn-icon-hover);
}

/* Pressed state */
.vp-play-btn:active {
  -webkit-transform:  translate(-50%, -50%) scale(var(--vp-btn-scale-active));
          transform:  translate(-50%, -50%) scale(var(--vp-btn-scale-active));
  -webkit-box-shadow: none;
          box-shadow: none;
}


/* ── Playing state — JS adds .is-playing to .vp-wrapper ─────── */

/* Swap icons */
.vp-wrapper.is-playing .vp-icon-play  { display: none;  }
.vp-wrapper.is-playing .vp-icon-pause { display: block; }

/* Fade button out while video is playing */
.vp-wrapper.is-playing .vp-play-btn {
  opacity:        0;
  pointer-events: none;
}

/* Re-appear when user hovers over the player while it plays */
.vp-wrapper.is-playing:hover .vp-play-btn {
  opacity:        0.88;
  pointer-events: all;
}


/* ── Responsive ── */
/* ✅ Your original rule — preserved, wrapper rule added       */
@media (max-width: 576px) {
  #video1 {
    border-radius: 8px;
    -webkit-box-shadow: 0 4px 16px rgba(0,0,0,.22);
            box-shadow: 0 4px 16px rgba(0,0,0,.22);
  }

  .vp-wrapper {
    border-radius: 8px;
  }

  /* Scale button down slightly on small screens */
  .vp-play-btn {
    width:  calc(var(--vp-btn-size) * 0.80);
    height: calc(var(--vp-btn-size) * 0.80);
  }

  .vp-play-btn svg {
    width:  calc(var(--vp-btn-icon-size) * 0.80);
    height: calc(var(--vp-btn-icon-size) * 0.80);
  }
}