/* Divi Blur Video Preview */

.dbvp {
    --dbvp-blur: 8px;
    --dbvp-overlay: 0;
    --dbvp-aspect: 16 / 9;
    --dbvp-play-size: 80px;
    --dbvp-play-bg: rgba(0, 0, 0, 0.55);
    --dbvp-play-color: #ffffff;
    --dbvp-modal-width: 960px;
    --dbvp-modal-bg: rgba(8, 12, 22, 0.72);
    --dbvp-modal-backdrop-blur: 14px;
    --dbvp-motion-duration: 0.48s;
    --dbvp-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --dbvp-vp-top: 8%;
    --dbvp-vp-left: 6%;
    --dbvp-vp-width: 88%;
    --dbvp-vp-height: 72%;
    --dbvp-frame-max: 100%;
    --dbvp-modal-aspect: 16 / 9;
    position: relative;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.dbvp--has-frame {
    max-width: var(--dbvp-frame-max, 100%);
}

.dbvp--empty .dbvp__placeholder {
    margin: 0;
    padding: 1.5rem;
    text-align: center;
    color: #666;
    background: #f5f5f5;
    border-radius: 4px;
}

.dbvp__frame {
    position: relative;
    width: 100%;
    line-height: 0;
}

.dbvp__frame-media {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    user-select: none;
}

.dbvp__viewport {
    position: absolute;
    top: var(--dbvp-vp-top, 8%);
    left: var(--dbvp-vp-left, 6%);
    width: var(--dbvp-vp-width, 88%);
    height: var(--dbvp-vp-height, 72%);
    overflow: hidden;
}

.dbvp__preview {
    position: relative;
    width: 100%;
    aspect-ratio: var(--dbvp-aspect, 16 / 9);
    overflow: hidden;
    cursor: pointer;
    background: #1a1a1a;
    border-radius: 2px;
    transition:
        transform var(--dbvp-motion-duration, 0.48s) var(--dbvp-motion-ease, cubic-bezier(0.22, 1, 0.36, 1)),
        box-shadow var(--dbvp-motion-duration, 0.48s) var(--dbvp-motion-ease, cubic-bezier(0.22, 1, 0.36, 1)),
        opacity var(--dbvp-motion-duration, 0.48s) var(--dbvp-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.dbvp--has-frame .dbvp__preview {
    aspect-ratio: unset;
    height: 100%;
}

.dbvp--modal-source-active .dbvp__preview {
    transform: scale(0.98);
    opacity: 0.35;
    pointer-events: none;
    transition:
        transform var(--dbvp-motion-duration, 0.48s) var(--dbvp-motion-ease, cubic-bezier(0.22, 1, 0.36, 1)),
        opacity var(--dbvp-motion-duration, 0.48s) var(--dbvp-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.dbvp__media {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.dbvp__media-el {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dbvp__media-placeholder {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #2a3f5f 0%, #1a2744 50%, #3d5a80 100%);
}

.dbvp--preview-placeholder .dbvp__media-placeholder {
    background: linear-gradient(145deg, #1e2a3a 0%, #121a24 45%, #2b3d52 100%);
}

.dbvp--preview-placeholder .dbvp__media-placeholder::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.08) 0%, transparent 55%);
    pointer-events: none;
}

.dbvp__blur {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    backdrop-filter: blur(var(--dbvp-blur, 8px));
    -webkit-backdrop-filter: blur(var(--dbvp-blur, 8px));
}

.dbvp__overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: rgba(0, 0, 0, calc(var(--dbvp-overlay) / 100));
}

.dbvp__play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;
    transform: translate(-50%, -50%);
    width: var(--dbvp-play-size, 80px);
    height: var(--dbvp-play-size, 80px);
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--dbvp-play-bg, rgba(0, 0, 0, 0.55));
    color: var(--dbvp-play-color, #ffffff);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.dbvp__play:hover,
.dbvp__play:focus {
    transform: translate(-50%, -50%) scale(1.05);
    outline: none;
}

.dbvp__play:focus-visible {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
}

.dbvp__play-icon--svg {
    width: calc(var(--dbvp-play-size, 80px) * 0.35);
    height: calc(var(--dbvp-play-size, 80px) * 0.35);
    margin-left: 4%;
}

/* Divi ETmodules / extended icon (play) */
.dbvp__play--divi-icon::before {
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: calc(var(--dbvp-play-size, 80px) * 0.42);
    color: var(--dbvp-play-color, #ffffff);
}

.dbvp__play--divi-icon .dbvp__play-icon--svg {
    display: none;
}

/* Modal (self-contained CSS variables — modal may be moved to body) */

.dbvp-modal {
    --dbvp-modal-width: 960px;
    --dbvp-modal-bg: rgba(8, 12, 22, 0.72);
    --dbvp-modal-backdrop-blur: 14px;
    --dbvp-motion-duration: 0.48s;
    --dbvp-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 3vw, 2.5rem);
    box-sizing: border-box;
    visibility: hidden;
    pointer-events: none;
}

.dbvp-modal[hidden] {
    display: none !important;
}

.dbvp-modal.is-active {
    visibility: visible;
    pointer-events: auto;
}

.dbvp-modal__backdrop {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background: var(--dbvp-modal-bg, rgba(8, 12, 22, 0.72));
    backdrop-filter: blur(var(--dbvp-modal-backdrop-blur, 14px));
    -webkit-backdrop-filter: blur(var(--dbvp-modal-backdrop-blur, 14px));
    opacity: 0;
    transition: opacity var(--dbvp-motion-duration, 0.48s) var(--dbvp-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.dbvp-modal.is-open .dbvp-modal__backdrop,
.dbvp-modal.is-closing .dbvp-modal__backdrop {
    opacity: 1;
}

.dbvp-modal__dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--dbvp-modal-width, 960px);
    margin: 0 auto;
    will-change: transform, opacity;
    transform: translate3d(0, 0, 0) scale(1, 1);
    opacity: 1;
    transition:
        transform var(--dbvp-motion-duration, 0.48s) var(--dbvp-motion-ease, cubic-bezier(0.22, 1, 0.36, 1)),
        opacity var(--dbvp-motion-duration, 0.48s) var(--dbvp-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
    border-radius: 12px;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.25),
        0 24px 80px rgba(0, 0, 0, 0.45);
}

.dbvp-modal--anim-fade .dbvp-modal__dialog {
    transform: none;
}

.dbvp-modal--anim-fade:not(.is-open):not(.is-closing) .dbvp-modal__dialog {
    opacity: 0;
}

.dbvp-modal__shell {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}

.dbvp-modal__close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 3;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transform: scale(0.85);
    transition:
        opacity 0.3s ease 0.15s,
        transform 0.3s ease 0.15s,
        background 0.2s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dbvp-modal__close-glyph {
    font-size: 1.75rem;
    line-height: 1;
}

.dbvp-modal__close-icon {
    display: block;
    font-size: 1.25rem;
    line-height: 1;
    speak: never;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.dbvp-modal.is-open .dbvp-modal__close {
    opacity: 1;
    transform: scale(1);
}

.dbvp-modal__close:hover,
.dbvp-modal__close:focus {
    background: rgba(0, 0, 0, 0.75);
    outline: none;
}

.dbvp-modal__close:focus-visible {
    box-shadow: 0 0 0 2px #fff;
}

.dbvp-modal__player {
    position: relative;
    width: 100%;
    aspect-ratio: var(--dbvp-modal-aspect, 16 / 9);
    background: #000;
    overflow: hidden;
}

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

body.dbvp-modal-open {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .dbvp,
    .dbvp__preview,
    .dbvp-modal__backdrop,
    .dbvp-modal__dialog,
    .dbvp-modal__close {
        transition-duration: 0.01ms !important;
    }
}

/* Visual Builder: static preview only */

.et-fb .dbvp__preview {
    cursor: default;
}

.et-fb .dbvp--modal-source-active .dbvp__preview {
    transform: none;
    opacity: 1;
    pointer-events: auto;
}

.et-fb .dbvp-modal {
    display: none !important;
}