/* PapyrusPay Video Banner 1.3.1.
   The in-flow ratio spacer guarantees height even if a theme overrides video
   dimensions or does not respect aspect-ratio on the outer frame. */
.ppvb-section,
.ppvb-section * {
    box-sizing: border-box;
}
.ppvb-section[data-ppvb="video-banner"] {
    display: block !important;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible;
    padding: 0;
    margin: 0;
}
.ppvb-section[data-ppvb="video-banner"] > .ppvb-container {
    display: block !important;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto !important;
    padding: 0 16px;
    margin: 0 auto;
}
.ppvb-section[data-ppvb="video-banner"] .ppvb-frame {
    display: block !important;
    position: relative !important;
    isolation: isolate;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    /* Height comes from the spacer, not aspect-ratio or the video element. */
    aspect-ratio: auto !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #f3f2f6;
}
.ppvb-section[data-ppvb="video-banner"] .ppvb-frame > .ppvb-ratio-spacer {
    display: block !important;
    position: relative !important;
    float: none !important;
    clear: both !important;
    box-sizing: border-box;
    width: 100% !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-top: var(--ppvb-desktop-height, 56.25%) !important;
    border: 0 !important;
    background: transparent;
}
.ppvb-section[data-ppvb="video-banner"] .ppvb-frame > video.ppvb-video {
    position: absolute !important;
    display: block !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1;
    box-sizing: border-box;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: inherit !important;
    object-fit: var(--ppvb-object-fit, cover) !important;
    object-position: center !important;
    background: #f3f2f6;
    pointer-events: none !important;
}
.ppvb-section .ppvb-video::-webkit-media-controls,
.ppvb-section .ppvb-video::-webkit-media-controls-panel,
.ppvb-section .ppvb-video::-webkit-media-controls-start-playback-button {
    display: none !important;
    opacity: 0 !important;
}
@media (max-width: 767px) {
    .ppvb-section[data-ppvb="video-banner"] {
        padding-top: 0;
        /* Requested mobile-only spacing belongs on the SECTION itself. */
        padding-bottom: 80px !important;
    }
    .ppvb-section[data-ppvb="video-banner"] > .ppvb-container {
        padding: 0 16px !important;
    }
    /* Mobile-only fix: reserve height with BOTTOM PADDING on the actual
       video frame. This also survives themes that collapse spacer elements. */
    .ppvb-section[data-ppvb="video-banner"] .ppvb-frame {
        border-radius: 18px !important;
        height: auto !important;
        padding-bottom: var(--ppvb-mobile-height, 56.25%) !important;
    }
    /* The frame itself now provides the mobile height; don't add it twice. */
    .ppvb-section[data-ppvb="video-banner"] .ppvb-frame > .ppvb-ratio-spacer {
        display: none !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}
@media (min-width: 768px) {
    .ppvb-section[data-ppvb="video-banner"] > .ppvb-container {
        padding-right: 48px;
        padding-left: 48px;
    }
}
@media (min-width: 1024px) {
    .ppvb-section[data-ppvb="video-banner"] .ppvb-frame {
        border-radius: 32px !important;
    }
}
@media (min-width: 1280px) {
    .ppvb-section[data-ppvb="video-banner"] { padding-top: 0; }
    .ppvb-section[data-ppvb="video-banner"] > .ppvb-container {
        max-width: 1040px;
        padding-left: 0;
        padding-right: 0;
    }
}
@media (min-width: 1440px) {
    .ppvb-section[data-ppvb="video-banner"] > .ppvb-container {
        max-width: 1280px;
    }
}