/* ==========================================================================
   WC Sticky Product Video — Stylesheet
   ========================================================================== */

/* ── Variables ─────────────────────────────────────────────────────────── */
:root {
  --wcsv-widget-w:      120px;
  --wcsv-widget-h:      180px;         /* 9:16 vertical ratio             */
  --wcsv-radius:        14px;
  --wcsv-shadow:        0 8px 32px rgba(0,0,0,.45);
  --wcsv-z-widget:      99990;
  --wcsv-z-modal:       99999;
  --wcsv-easing:        cubic-bezier(.4,0,.2,1);
  --wcsv-transition:    .3s var(--wcsv-easing);
}

/* ── Sticky Widget ─────────────────────────────────────────────────────── */
#wcsv-widget {
  position:   fixed;
  bottom:     24px;
  right:      20px;
  z-index:    var(--wcsv-z-widget);
  display:    flex;
  flex-direction: column;
  align-items: flex-end;
  gap:        8px;

  /* entrance animation */
  animation: wcsv-slide-in .45s var(--wcsv-easing) both;
}

@keyframes wcsv-slide-in {
  from { opacity: 0; transform: translateY(30px) scale(.9); }
  to   { opacity: 1; transform: translateY(0)   scale(1);   }
}

/* Thumbnail wrapper (the clickable preview) */
#wcsv-thumb {
  position:      relative;
  width:         var(--wcsv-widget-w);
  height:        var(--wcsv-widget-h);
  border-radius: var(--wcsv-radius);
  overflow:      hidden;
  cursor:        pointer;
  box-shadow:    var(--wcsv-shadow);
  background:    #000;

  /* ring on focus-visible (keyboard nav) */
  outline: none;
}
#wcsv-thumb:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* Scale up gently on hover */
#wcsv-thumb:hover .wcsv-play-overlay {
  opacity: 1;
}
#wcsv-thumb:hover {
  transform: scale(1.03);
  transition: transform .2s var(--wcsv-easing);
}

/* Silent preview – MP4 */
#wcsv-thumb-video {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

/* Silent preview – iframe (embed types) */
#wcsv-thumb-iframe {
  width:        calc(var(--wcsv-widget-w) * 3);   /* 3× to remove black bars */
  height:       calc(var(--wcsv-widget-h) * 2.5);
  margin-left:  calc(-1 * var(--wcsv-widget-w));
  margin-top:   calc(-0.5 * var(--wcsv-widget-h));
  border:       none;
  pointer-events: none;                           /* clicks go to the wrapper */
  transform:    scale(.9);
}

/* Play icon overlay */
.wcsv-play-overlay {
  position:   absolute;
  inset:      0;
  display:    flex;
  align-items:    center;
  justify-content:center;
  opacity:    .75;
  transition: opacity .2s;
  pointer-events: none;
}
.wcsv-play-overlay svg {
  width:  48px;
  height: 48px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.6));
}

/* Dismiss (×) button */
#wcsv-close-widget {
  width:         26px;
  height:        26px;
  border-radius: 50%;
  background:    rgba(0,0,0,.65);
  border:        none;
  cursor:        pointer;
  padding:       0;
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    background .2s;
  align-self:    flex-end;
  margin-right:  4px;
}
#wcsv-close-widget:hover { background: rgba(220,38,38,.9); }
#wcsv-close-widget svg   { width: 12px; height: 12px; }

/* Widget hidden state */
#wcsv-widget.wcsv-hidden {
  animation: wcsv-slide-out .3s var(--wcsv-easing) forwards;
  pointer-events: none;
}
@keyframes wcsv-slide-out {
  to { opacity: 0; transform: translateY(20px) scale(.85); }
}

/* ── Modal Backdrop ────────────────────────────────────────────────────── */
#wcsv-modal {
  position: fixed;
  inset:    0;
  z-index:  var(--wcsv-z-modal);
  display:  flex;
  align-items:    center;
  justify-content:center;
}

/* hidden attribute still used by JS; opacity handles the animation */
#wcsv-modal[hidden] {
  display: none;   /* hard-hide when truly closed */
}

#wcsv-modal.wcsv-modal-opening,
#wcsv-modal.wcsv-modal-open {
  display: flex;
}

#wcsv-backdrop {
  position:   absolute;
  inset:      0;
  background: rgba(0,0,0,.82);
  backdrop-filter:  blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor:     pointer;

  opacity: 0;
  transition: opacity var(--wcsv-transition);
}
#wcsv-modal.wcsv-modal-open #wcsv-backdrop { opacity: 1; }

/* ── Modal Content ─────────────────────────────────────────────────────── */
#wcsv-modal-content {
  position:      relative;
  z-index:       1;
  width:         min(360px, 90vw);
  max-height:    90vh;
  aspect-ratio:  9 / 16;
  border-radius: 18px;
  overflow:      hidden;
  background:    #000;
  box-shadow:    0 24px 80px rgba(0,0,0,.8);

  /* entrance */
  opacity:   0;
  transform: scale(.88) translateY(24px);
  transition: opacity var(--wcsv-transition), transform var(--wcsv-transition);
}
#wcsv-modal.wcsv-modal-open #wcsv-modal-content {
  opacity:   1;
  transform: scale(1) translateY(0);
}

/* Native MP4 in modal */
#wcsv-modal-video {
  width:      100%;
  height:     100%;
  object-fit: contain;
  background: #000;
  display:    block;
}

/* Embed iframe in modal */
#wcsv-modal-iframe-wrap,
#wcsv-modal-iframe-wrap iframe {
  width:   100%;
  height:  100%;
  border:  none;
  display: block;
}

/* ── Modal Controls Bar ────────────────────────────────────────────────── */
#wcsv-modal-controls {
  position:       absolute;
  top:            12px;
  right:          12px;
  display:        flex;
  flex-direction: column;
  gap:            10px;
  z-index:        2;
}

#wcsv-modal-controls button {
  width:         40px;
  height:        40px;
  border-radius: 50%;
  background:    rgba(0,0,0,.6);
  border:        none;
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    background .2s, transform .15s;
  padding:       0;
}
#wcsv-modal-controls button:hover {
  background: rgba(0,0,0,.85);
  transform:  scale(1.1);
}
#wcsv-modal-controls button svg {
  width:  20px;
  height: 20px;
}

/* ── Responsive tweaks ─────────────────────────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --wcsv-widget-w:  100px;
    --wcsv-widget-h:  150px;
  }

  #wcsv-widget {
    bottom: 16px;
    right:  12px;
  }

  #wcsv-modal-content {
    width:     min(300px, 88vw);
    max-height: 88vh;
  }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  #wcsv-widget        { animation: none; }
  #wcsv-modal-content { transition: none; }
  #wcsv-backdrop      { transition: none; }
}