/**
 * nexirvideos — front styles
 * Classicblinders theme / Splide-based product gallery.
 */

/* ── Video thumbnail slide in the secondary Splide nav ──────────────────── */

/* Match the 70×70 sizing of sibling Splide thumb slides */
.nexirvideos-thumb-slide {
  position: relative;
  width: 70px;
  height: 70px;
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
}

/* On mobile the theme thumbs are 50×50 — match them */
@media (max-width: 767px) {
  .nexirvideos-thumb-slide {
    width: 50px;
    height: 50px;
  }
}

/* Pointer cursor for keyboard-activated elements */
.nexirvideos-thumb-slide:focus {
  outline: 2px solid #2d7abd;
  outline-offset: 2px;
}

/* ── Play badge overlay ──────────────────────────────────────────────────── */

.nexirvideos-play {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  /* Triangle via clip-path (pure CSS, no pseudo-elements needed) */
}

/* Play triangle using a pseudo-element */
.nexirvideos-play::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  /* Triangle pointing right: 12px tall, 18px wide */
  border-width: 10px 0 10px 18px;
  border-color: transparent transparent transparent #ffffff;
  margin-left: 4px; /* optical centering */
  animation: nexirvideos-pulse 1.8s ease-in-out infinite;
}

/* Expanding ring behind the triangle — the classic "tap me" pulse.
   Absolutely positioned so it never shifts the flex-centered triangle. */
.nexirvideos-play::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  animation: nexirvideos-ring 1.8s ease-out infinite;
}

@keyframes nexirvideos-ring {
  0%   { transform: scale(0.55); opacity: 0.9; }
  70%  { transform: scale(1.3);  opacity: 0;   }
  100% { transform: scale(1.3);  opacity: 0;   }
}

/* Subtle pulse: badge brightens / scales on beat */
@keyframes nexirvideos-pulse {
  0%   { opacity: 1;    transform: scale(1); }
  50%  { opacity: 0.65; transform: scale(1.18); }
  100% { opacity: 1;    transform: scale(1); }
}

/* Dim the overlay while hovered to give a "press" feel */
.nexirvideos-thumb-slide:hover .nexirvideos-play,
.nexirvideos-thumb-slide:focus .nexirvideos-play {
  background: rgba(0, 0, 0, 0.22);
}

/* ── Stable player overlay (covers the gallery host, shown on demand) ───── */
/* Anchored once over #splide_images_product_miniature. Toggling visibility
   keeps the iframe/video alive so playback resumes instead of restarting. */

.nexirvideos-overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: none;
  align-items: center;
  background: #000;
}

.nexirvideos-overlay.is-visible {
  display: flex;
}

/* ── Inline player container (16:9 responsive) ──────────────────────────── */

.nexirvideos-player {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  background: #000;
}

.nexirvideos-player iframe,
.nexirvideos-player video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ── "Video review" card inside .product-features (optional, BO toggle) ──── */

/* Selector matches the theme's (0,3,0) .data-sheet rules + one more class so
   our brand-green cell wins without !important (except the > span override,
   which the theme forces). Just one more grid cell, same size as the rest. */
.product-information .product-features .data-sheet.nexirvideos-feature {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: #268458; /* color empresarial */
  border-color: #268458;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.product-information .product-features .data-sheet.nexirvideos-feature:hover,
.product-information .product-features .data-sheet.nexirvideos-feature:focus {
  background: #074d43; /* verde oscuro de marca */
  border-color: #074d43;
  outline: none;
}

/* Theme sets .data-sheet > span { width:100% !important } for the single value;
   our row carries icon + text, so opt them back to auto. */
.product-information .product-features .data-sheet.nexirvideos-feature > span {
  width: auto !important;
}

/* Play icon: plain white triangle (no button look) */
.nexirvideos-feature__icon {
  flex-shrink: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 11px;
  border-color: transparent transparent transparent #fff;
}

.nexirvideos-feature__text {
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

/* ── Embedded player above the long description (optional, BO toggle) ───── */
/* Reuses .nexirvideos-player (16:9 responsive) inside the wrapper. */

.nexirvideos-embed {
  margin: 4px 0 22px;
}

/* ── Respect reduced-motion: kill the thumbnail animations ──────────────── */
@media (prefers-reduced-motion: reduce) {
  .nexirvideos-play::after,
  .nexirvideos-play::before {
    animation: none;
  }
}