/* ==========================================================
   Propague Vídeo Slider — Elementor Widget
   Efeito 3D tipo Seed ByteDance
   Transforms via CSS vars → live preview nativo no Elementor
   ========================================================== */

/* ── Wrapper externo: contexto para setas absolutas ── */
.pvs-outer {
    position: relative;
    width: 100%;
    user-select: none;
    -webkit-user-select: none;
}

/* ── Setas: fora do mask, posicionadas no outer ── */
.pvs-nav-prev,
.pvs-nav-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;
    width: var(--pvs-arrow-size, 44px);
    height: var(--pvs-arrow-size, 44px);
    border-radius: 50%;
    background: var(--pvs-arrow-bg, rgba(255, 255, 255, 0.88));
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--pvs-arrow-color, #333);
    font-size: 18px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    line-height: 1;
}

.pvs-nav-prev {
    left: 12px;
}

.pvs-nav-next {
    right: 12px;
}

.pvs-nav-prev:hover,
.pvs-nav-next:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22);
    transform: translateY(-50%) scale(1.08);
}

/* ── Wrapper com mask lateral ── */
.pvs-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right,
            transparent 0%,
            #000 var(--pvs-mask-size, 12%),
            #000 calc(100% - var(--pvs-mask-size, 12%)),
            transparent 100%);
    mask-image: linear-gradient(to right,
            transparent 0%,
            #000 var(--pvs-mask-size, 12%),
            #000 calc(100% - var(--pvs-mask-size, 12%)),
            transparent 100%);
}

/* ── Stage: apenas container de largura ── */
.pvs-stage {
    width: 100%;
}

/* ── Track: pai direto dos slides → aqui fica a perspectiva ── */
.pvs-track {
    position: relative;
    width: 100%;
    /* A perspectiva AQUI garante que os slides (filhos diretos) recebam o efeito 3D.
       Sem preserve-3d de volta, z-index funciona normalmente. */
    perspective: var(--pvs-perspective, 1200px);
    perspective-origin: 50% 50%;

    /* Altura calculada por CSS via custom props:
       slide-width-num% × ratio-factor / 100 = padding-top em %
       (ex: 50 × 56.25 / 100 = 28.125%) */
    padding-top: calc(var(--pvs-slide-width-num, 50) * var(--pvs-ratio-factor, 56.25) / 100 * 1%);
}

/* ── Factors de aspect ratio (setados pela classe adicionada pelo PHP) ── */
.pvs-ratio-16-9 {
    --pvs-ratio-factor: 56.25;
}

.pvs-ratio-9-16 {
    --pvs-ratio-factor: 177.78;
}

.pvs-ratio-3-4 {
    --pvs-ratio-factor: 133.33;
}

.pvs-ratio-1-1 {
    --pvs-ratio-factor: 100;
}

/* ── Slide base: absolutamente posicionado, centrado ── */
.pvs-slide {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--pvs-slide-width, 50%);
    height: 100%;
    border-radius: var(--pvs-radius, 14px);
    overflow: hidden;
    cursor: pointer;
    isolation: isolate;
    /* contexto de empilhamento independente */
    z-index: 1;
    opacity: 0;
    pointer-events: none;

    /* Transição CSS: toda mudança de classe anima suavemente */
    transition:
        transform var(--pvs-speed, 600ms) cubic-bezier(0.25, 1, 0.5, 1),
        opacity var(--pvs-speed, 600ms) cubic-bezier(0.25, 1, 0.5, 1),
        filter var(--pvs-speed, 600ms) cubic-bezier(0.25, 1, 0.5, 1),
        z-index 0ms;
}

/* ── Slide sem transição (inicialização) ── */
.pvs-no-transition .pvs-slide {
    transition: none !important;
}

/* ================================================================
   CSS CLASS-BASED TRANSFORMS
   Todos os parâmetros são CSS vars → live preview no Elementor
================================================================ */

/* ATIVO */
.pvs-slide.pvs-active {
    transform: translateX(-50%) translateY(-50%) scale(1) rotateY(0deg);
    opacity: 1;
    filter: none;
    z-index: 10;
    cursor: default;
    pointer-events: auto;
}

/* LATERAL ESQUERDO — 1ª posição */
.pvs-slide.pvs-prev-1 {
    transform:
        translateX(calc(-50% - var(--pvs-slide-width, 50%) * 0.9)) translateY(-50%) scale(var(--pvs-side-scale, 0.82)) rotateY(var(--pvs-rotate, 38deg));
    opacity: var(--pvs-side-opacity, 0.65);
    filter: grayscale(var(--pvs-side-grayscale, 35%)) brightness(0.82);
    z-index: 7;
    pointer-events: auto;
}

/* LATERAL DIREITO — 1ª posição */
.pvs-slide.pvs-next-1 {
    transform:
        translateX(calc(-50% + var(--pvs-slide-width, 50%) * 0.9)) translateY(-50%) scale(var(--pvs-side-scale, 0.82)) rotateY(calc(var(--pvs-rotate, 38deg) * -1));
    opacity: var(--pvs-side-opacity, 0.65);
    filter: grayscale(var(--pvs-side-grayscale, 35%)) brightness(0.82);
    z-index: 7;
    pointer-events: auto;
}

/* LATERAL ESQUERDO — 2ª posição */
.pvs-slide.pvs-prev-2 {
    transform:
        translateX(calc(-50% - var(--pvs-slide-width, 50%) * 1.75)) translateY(-50%) scale(calc(var(--pvs-side-scale, 0.82) * 0.76)) rotateY(calc(var(--pvs-rotate, 38deg) * 1.5));
    opacity: calc(var(--pvs-side-opacity, 0.65) * 0.55);
    filter: grayscale(calc(var(--pvs-side-grayscale, 35%) * 1.6)) brightness(0.7);
    z-index: 4;
    pointer-events: auto;
}

/* LATERAL DIREITO — 2ª posição */
.pvs-slide.pvs-next-2 {
    transform:
        translateX(calc(-50% + var(--pvs-slide-width, 50%) * 1.75)) translateY(-50%) scale(calc(var(--pvs-side-scale, 0.82) * 0.76)) rotateY(calc(var(--pvs-rotate, 38deg) * -1.5));
    opacity: calc(var(--pvs-side-opacity, 0.65) * 0.55);
    filter: grayscale(calc(var(--pvs-side-grayscale, 35%) * 1.6)) brightness(0.7);
    z-index: 4;
    pointer-events: auto;
}

/* OCULTOS (além do 2º) */
.pvs-slide.pvs-hidden {
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    transform:
        translateX(calc(-50% - var(--pvs-slide-width, 50%) * 2.5)) translateY(-50%) scale(0.4) rotateY(calc(var(--pvs-rotate, 38deg) * 2));
}

.pvs-slide.pvs-hidden-right {
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    transform:
        translateX(calc(-50% + var(--pvs-slide-width, 50%) * 2.5)) translateY(-50%) scale(0.4) rotateY(calc(var(--pvs-rotate, 38deg) * -2));
}

/* ── Thumbnail ── */
.pvs-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.3s ease;
    border-radius: inherit;
}

.pvs-playing .pvs-thumb {
    opacity: 0;
}

/* ── Iframe ── */
.pvs-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    z-index: 5;
    background: #000;
    border-radius: inherit;
}

/* ── Botão Play ── */
.pvs-play-btn {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Visível apenas no slide ativo */
.pvs-slide.pvs-active .pvs-play-btn {
    opacity: 1;
}

.pvs-playing .pvs-play-btn {
    opacity: 0 !important;
}

.pvs-play-btn svg {
    width: var(--pvs-play-size, 64px);
    height: var(--pvs-play-size, 64px);
    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, .55));
    transition: transform 0.2s ease;
}

.pvs-slide.pvs-active:hover .pvs-play-btn svg {
    transform: scale(1.12);
}

/* ── Info (título + descrição) ── */
.pvs-info {
    text-align: center;
    padding: 18px 24px 4px;
    min-height: 60px;
}

.pvs-info-title {
    font-size: var(--pvs-title-size, 20px);
    font-weight: 700;
    color: var(--pvs-title-color, #111);
    margin: 0 0 6px;
    line-height: 1.3;
    transition: opacity 0.3s ease;
}

.pvs-info-desc {
    font-size: var(--pvs-desc-size, 14px);
    color: var(--pvs-desc-color, #666);
    margin: 0 auto;
    max-width: 580px;
    line-height: 1.55;
    transition: opacity 0.3s ease;
}

/* ── Dots ── */
.pvs-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 14px 0 2px;
}

.pvs-dot {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: var(--pvs-dot-color, #ccc);
    cursor: pointer;
    transition: width 0.25s ease, background 0.25s ease;
    border: none;
    padding: 0;
    flex-shrink: 0;
}

.pvs-dot.pvs-dot-active {
    width: 24px;
    background: var(--pvs-dot-active-color, #333);
}

/* ── Responsivo ── */
@media (max-width: 768px) {
    .pvs-nav-prev {
        left: 4px;
    }

    .pvs-nav-next {
        right: 4px;
    }

    .pvs-play-btn svg {
        width: 48px;
        height: 48px;
    }

    .pvs-wrapper {
        --pvs-mask-size: 6%;
    }
}