/* ── Fluxary media carousel ────────────────────────────────────────────────
   Shared by the landing pricing tooltips and the dashboard Billing screen.
   Colours come from custom properties so each host page keeps its own theme:
   --fx-car-bg / --fx-car-fg / --fx-car-border, with sane dark fallbacks. */

.fx-car {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--fx-car-aspect, 1 / 1);
  max-height: var(--fx-car-max-h, 210px);
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
  background: var(--fx-car-bg, #0b0b12);
  border: 1px solid var(--fx-car-border, rgba(255,255,255,0.12));
  outline: none;
  isolation: isolate;
}
.fx-car:focus-visible { box-shadow: 0 0 0 2px var(--fx-car-accent, #7b5ea7); }

/* Catalogos verticales: el ancho sale del alto. Sin esto, `width:100%` +
   `max-height` daban una caja apaisada con el clip 9:16 centrado entre dos
   franjas de matte casi tan anchas como el video. */
.fx-car--portrait {
  width: auto;
  height: var(--fx-car-max-h, 210px);
  max-height: none;
  max-width: 100%;
}

.fx-car-track { display: block; position: absolute; inset: 0; }

.fx-car-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity .38s ease, transform .38s ease;
  pointer-events: none;
}
.fx-car-slide.is-active { opacity: 1; transform: none; pointer-events: auto; }

/* contain, not cover: the catalogs mix 1:1 stills with 9:16 clips, and
   cropping a sample defeats the point of showing it. */
.fx-car-slide img,
.fx-car-slide video {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}

/* Arriba, no abajo: los clips traen su propio titular quemado en la parte
   inferior del cuadro y el caption se le montaba encima. */
.fx-car-cap {
  position: absolute;
  left: 7px; top: 7px;
  max-width: calc(100% - 14px);
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  color: #fff;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* ── Arrows ─────────────────────────────────────────────────────────────── */
.fx-car-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  color: #fff;
  cursor: pointer;
  /* Visible at rest on purpose. Hiding the arrows until hover made the
     gallery undiscoverable — the whole point is that you can see there is
     more than one sample without having to go looking for it. */
  opacity: .62;
  transition: opacity .2s ease, background .2s ease, transform .15s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 4;
  /* Explicito: el tooltip de precios que hospeda el carrusel es
     pointer-events:none mientras esta cerrado, y esa herencia dejaba las
     flechas muertas al click aunque la tarjeta ya estuviera visible. Un hijo
     puede reactivarse aunque el padre este en none. */
  pointer-events: auto;
  touch-action: manipulation;
}
/* Zona de click mas grande que el circulo visible (44px, minimo tactil de
   WCAG) sin agrandar el dibujo. */
.fx-car-nav::before {
  content: '';
  position: absolute;
  inset: -9px;
}
.fx-car-nav svg { width: 15px; height: 15px; }
.fx-car-prev { left: 6px; }
.fx-car-next { right: 6px; }
.fx-car:hover .fx-car-nav,
.fx-car:focus-within .fx-car-nav { opacity: 1; }
.fx-car-nav:hover { background: rgba(0,0,0,0.8); opacity: 1; }
.fx-car-nav:active { transform: translateY(-50%) scale(.9); }
.fx-car-nav:focus-visible { opacity: 1; outline: 2px solid #fff; outline-offset: 1px; }

/* ── Dots ───────────────────────────────────────────────────────────────── */
/* Scrim: the dots and caption are white, and half the catalog is bright
   artwork on a white background — without this they vanish. */
.fx-car::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 58px;
  background: linear-gradient(to top, rgba(0,0,0,0.42), rgba(0,0,0,0));
  pointer-events: none;
  z-index: 2;
}
.fx-car-dots {
  position: absolute;
  left: 0; right: 0; bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  z-index: 4;
  pointer-events: auto;
}
.fx-car-dot {
  position: relative;
  pointer-events: auto;
  touch-action: manipulation;
  width: 5px; height: 5px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.38);
  cursor: pointer;
  transition: background .2s ease, width .2s ease;
}
/* Alto generoso, ancho acotado a la mitad del gap: con inset uniforme las
   areas de dos dots vecinos se pisaban y el click caia en el de al lado. */
.fx-car-dot::before { content: ''; position: absolute; inset: -10px -3px; }
.fx-car-dot.is-on { background: #fff; width: 13px; border-radius: 3px; }
.fx-car-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Scrim superior para que el caption se lea sobre muestras claras. */
.fx-car::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 42px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.38), rgba(0,0,0,0));
  pointer-events: none;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .fx-car-slide { transition: opacity .01ms; transform: none; }
  .fx-car-slide.is-active { transform: none; }
  .fx-car-nav { transition: none; }
}

/* ── Boton de play (solo si el navegador bloqueo el autoplay) ────────────── */
.fx-car-play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  display: none;
  align-items: center; justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.62);
  color: #fff;
  cursor: pointer;
  z-index: 3;
  pointer-events: auto;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 3px 14px rgba(0,0,0,.45);
}
.fx-car-play svg { width: 22px; height: 22px; margin-left: 2px; }
.fx-car-play:hover { background: rgba(0,0,0,0.8); }
.fx-car-slide.needs-play .fx-car-play { display: flex; }