/* ==========================================================================
   Video Carousel — Confident
   ========================================================================== */

:root {
    --cf-vc-gap: 16px;
}

/* ── Wrapper ────────────────────────────────────────────────────────────── */

.cf-vc-wrapper {
    position: relative;
    width: 100%;
}

/* ── Navigation ─────────────────────────────────────────────────────────── */

.cf-vc-nav {
    display: flex;
}

.cf-vc-nav-btn {
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 150ms ease, opacity 150ms ease, background-color 200ms ease;
}

.cf-vc-nav-btn:hover:not([aria-disabled="true"]) {
    transform: scale(1.05);
}

.cf-vc-nav-btn:active:not([aria-disabled="true"]) {
    transform: scale(0.95);
}

.cf-vc-nav-btn[aria-disabled="true"] {
    cursor: not-allowed;
}

/* ── Container & Track ──────────────────────────────────────────────────── */

.cf-vc-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.cf-vc-track {
    display: flex;
    gap: var(--cf-vc-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
}

.cf-vc-track::-webkit-scrollbar {
    display: none;
}

/* When content overflows, force flex-start so the first cards aren't clipped */
.cf-vc-track[data-cf-vc-overflow="true"] {
    justify-content: flex-start !important;
}

/* ── Video Card ─────────────────────────────────────────────────────────── */

.cf-vc-card {
    scroll-snap-align: start;
    flex: 0 0 calc((100% - (var(--cf-vc-gap) * 3)) / 4);
    overflow: hidden;
    position: relative;
    contain: layout style paint;
    cursor: pointer;
}

.cf-vc-card:focus-visible {
    outline: 2px solid #0066FF;
    outline-offset: 2px;
}

/* ── Cover Wrap ────────────────────────────────────────────────────────── */

.cf-vc-cover-wrap {
    position: relative;
    aspect-ratio: 9/16;
    overflow: hidden;
    background: #000;
    border-radius: inherit;
}

.cf-vc-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cf-vc-cover-placeholder {
    background: #1a1a1a;
}

/* Preview video (cards sin cover image — autoplay muted en bucle).
   pointer-events:none deja que los clicks pasen al card → abre el modal. */
.cf-vc-preview-video {
    pointer-events: none;
}

/* ── Mute Toggle ────────────────────────────────────────────────────────
   Botón circular en la esquina superior izquierda del card (sólo cuando
   no hay cover image, paralelo al duration-badge que vive arriba a la
   derecha). El SVG muteado se muestra por defecto; al desmutear se
   intercambia por el SVG con ondas (CSS gobierna ambos vía aria-pressed). */

.cf-vc-mute-toggle {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background-color 200ms ease;
    /* Reset nuclear contra Elementor + tema: el rojo que se cuela al hacer
       click viene del BACKGROUND del botón (no del outline), porque el
       theme/Elementor pintan button:focus { background: <accent>; } con
       !important. Forzamos background + todas las decoraciones en estado
       base; los estados :hover/:focus/:active los re-forzamos en la regla
       compuesta abajo. -webkit-appearance:none mata cualquier UA-stylesheet
       residual. */
    background: rgba(0, 0, 0, 0.55) !important;
    background-color: rgba(0, 0, 0, 0.55) !important;
    background-image: none !important;
    color: #fff !important;
    border: 0 none transparent !important;
    outline: 0 none transparent !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    -webkit-tap-highlight-color: transparent;
}

/* Kill cualquier pseudo-elemento que el tema podría inyectar como
   "ring activo" sobre el botón. */
.cf-vc-mute-toggle::before,
.cf-vc-mute-toggle::after {
    content: none !important;
    display: none !important;
}

/* Override: posición izquierda (controlada desde Elementor → "Card Display"
   → "Posición del ícono de mute"). Atributo en el wrapper para evitar tener
   que tocar el HTML del card. */
.cf-vc-wrapper[data-cf-vc-mute-pos="left"] .cf-vc-mute-toggle {
    left: 10px;
    right: auto;
}

/* Si el mute está a la derecha (default) y el card tiene preview, movemos el
   duration badge a top-left para que no se superponga con el botón. Cards
   con cover image asignada no llevan mute-toggle, así que ahí el badge
   se queda donde estaba (top-right). */
.cf-vc-wrapper:not([data-cf-vc-mute-pos="left"]) .cf-vc-card[data-cf-vc-has-preview="1"] .cf-vc-duration-badge {
    left: 10px;
    right: auto;
}

/* Reset compuesto de todos los estados interactivos. Incluimos background
   porque ese es el que se cuela en rojo desde el tema/Elementor; los demás
   (outline/box-shadow/border) ya estaban cubiertos pero los repetimos por
   consistencia y por si el tema usa un selector más específico que sólo
   golpea estos estados. */
.cf-vc-mute-toggle:hover,
.cf-vc-mute-toggle:focus,
.cf-vc-mute-toggle:active,
.cf-vc-mute-toggle:focus-within,
.cf-vc-mute-toggle:visited {
    background: rgba(0, 0, 0, 0.55) !important;
    background-color: rgba(0, 0, 0, 0.55) !important;
    background-image: none !important;
    color: #fff !important;
    border: 0 none transparent !important;
    outline: 0 none transparent !important;
    box-shadow: none !important;
}

/* Override sólo para :hover — feedback sutil de fondo más oscuro. */
.cf-vc-mute-toggle:hover {
    background: rgba(0, 0, 0, 0.75) !important;
    background-color: rgba(0, 0, 0, 0.75) !important;
}

/* Ring de focus sólo para navegación por teclado (Tab). Va DESPUÉS del
   reset compuesto en el archivo para ganar en orden de cascada cuando
   ambos tienen !important. Mouse click NO dispara :focus-visible en
   navegadores modernos (Chrome/Firefox/Safari), así que con mouse el
   botón queda totalmente limpio. */
.cf-vc-mute-toggle:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.8) !important;
    outline-offset: 2px;
}

.cf-vc-mute-toggle svg {
    width: 18px;
    height: 18px;
    display: block;
    pointer-events: none;
}

.cf-vc-mute-toggle .cf-vc-icon-unmuted { display: none; }
.cf-vc-mute-toggle[aria-pressed="true"] .cf-vc-icon-muted   { display: none; }
.cf-vc-mute-toggle[aria-pressed="true"] .cf-vc-icon-unmuted { display: block; }

/* ── Duration Badge ────────────────────────────────────────────────────── */

.cf-vc-duration-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}

/* ── Center Content (play btn + title + description) ───────────────────── */

.cf-vc-center-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    pointer-events: none;
    text-align: center;
}

/* ── Play Button ───────────────────────────────────────────────────────── */

.cf-vc-play-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    pointer-events: auto;
    transition: transform 200ms ease, box-shadow 200ms ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.cf-vc-play-btn svg {
    width: 40%;
    height: 40%;
    display: block;
    margin-left: 4%;
}

.cf-vc-play-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.4);
}

.cf-vc-play-btn:active {
    transform: scale(0.96);
}

/* ── Card Title & Description ──────────────────────────────────────────── */

.cf-vc-card-title {
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.cf-vc-card-desc {
    display: block;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    max-width: 90%;
}

/* ── Ver Video Button ──────────────────────────────────────────────────── */

.cf-vc-ver-video-btn {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background-color 200ms ease, transform 200ms ease;
}

.cf-vc-ver-video-btn:hover {
    transform: translateX(-50%) scale(1.04);
}

.cf-vc-ver-video-btn:active {
    transform: translateX(-50%) scale(0.97);
}

.cf-vc-ver-video-btn svg {
    flex-shrink: 0;
}

/* ── Product Overlay ────────────────────────────────────────────────────── */

.cf-vc-product-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 6;
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease;
}

.cf-vc-card:hover .cf-vc-product-overlay {
    opacity: 1;
    pointer-events: auto;
}

.cf-vc-overlay--slide-up {
    transform: translateY(8px);
    transition: opacity 300ms ease, transform 300ms ease;
}

.cf-vc-card:hover .cf-vc-overlay--slide-up {
    transform: translateY(0);
}

/* ── Product Link Layout ────────────────────────────────────────────────── */

.cf-vc-product-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}

.cf-vc-product-thumb {
    flex-shrink: 0;
    object-fit: cover;
    display: block;
}

.cf-vc-product-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.cf-vc-product-name {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.3;
}

.cf-vc-product-price {
    display: block;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.3;
}

.cf-vc-product-cta {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Modal ──────────────────────────────────────────────────────────────── */

.cf-vc-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
}

.cf-vc-modal[aria-hidden="false"] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cf-vc-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--cf-vc-modal-bg, rgba(0, 0, 0, 0.92));
    cursor: pointer;
}

.cf-vc-modal-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    max-width: 480px;
    max-height: 90vh;
}

.cf-vc-modal-video {
    width: 100%;
    max-height: 90vh;
    border-radius: 12px;
    background: #000;
    outline: none;
}

.cf-vc-modal-close {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background-color 200ms ease, transform 200ms ease;
}

.cf-vc-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.cf-vc-modal-close:active {
    transform: scale(0.95);
}

.cf-vc-modal-close svg {
    width: 20px;
    height: 20px;
}

/* ── Animated Border ────────────────────────────────────────────────────── */

@property --cf-vc-border-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.cf-vc-card.cf-vc-has-border-anim {
    padding: var(--cf-vc-border-width, 3px);
}

.cf-vc-card.cf-vc-has-border-anim .cf-vc-cover-wrap {
    border-radius: inherit;
}

.cf-vc-card.cf-vc-has-border-anim:hover {
    background: conic-gradient(
        from var(--cf-vc-border-angle),
        var(--cf-vc-border-color-1, #ff0080),
        var(--cf-vc-border-color-2, #7928ca),
        var(--cf-vc-border-color-3, #00d4ff),
        var(--cf-vc-border-color-1, #ff0080)
    );
    animation: cf-vc-border-spin var(--cf-vc-border-speed, 3s) linear infinite;
}

@keyframes cf-vc-border-spin {
    to {
        --cf-vc-border-angle: 360deg;
    }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1199px) {
    .cf-vc-card {
        flex: 0 0 calc((100% - (var(--cf-vc-gap) * 2)) / 3);
    }
}

@media (max-width: 767px) {
    .cf-vc-card {
        flex: 0 0 calc((100% - var(--cf-vc-gap)) / 1.5);
    }

    .cf-vc-nav {
        display: none;
    }

    .cf-vc-product-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    .cf-vc-overlay--slide-up {
        transform: translateY(0);
    }

    .cf-vc-modal-content {
        width: 95%;
        max-width: none;
    }
}