.blog-detail-video .blog-detail-video-wrapper {
        position: relative;
    }

    .blog-detail-video .blog-detail-video-wrapper video {
        width: 100%;
        display: block;
        height: 100%;
        border-radius: 15px;
    }

    .blog-detail-video .blog-detail-video-wrapper .blog-detail-video-control {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80px;
        cursor: pointer;
        z-index: 10;
        transition: opacity 0.3s ease;
        opacity: 0.8;
    }

    .blog-detail-video {
        margin-top: 30px;
    }


    .blog-detail-video .blog-detail-video-wrapper.playing .blog-detail-video-control {
        opacity: 0;
    }

    .blog-detail-video .blog-detail-video-wrapper.playing:hover .blog-detail-video-control {
        opacity: 0.8;
    }

    .blog-detail-video .blog-detail-video-wrapper.cursor-still.playing .blog-detail-video-control {
        opacity: 0 !important;
    }


    
    





    @media (max-width: 767px) {
        .blog-detail-video.mobile {
            display: block;
        }

        .blog-detail-video .blog-detail-video-wrapper .blog-detail-video-control {
            width: 43px;
        }

        .blog-detail-video .blog-detail-video-wrapper {
            width: 90%;
            display: block;
            margin: auto;
        }

        .blog-detail-video .blog-detail-video-wrapper.played-once .blog-detail-video-control {
            display: none;
        }


    }




    @media (min-width: 768px) and (max-width: 991.98px) {
       

        .blog-detail-video .blog-detail-video-wrapper {
            width: 90%;
            display: block;
            margin: auto;
        }

        .blog-detail-video .blog-detail-video-wrapper.played-once .blog-detail-video-control {
            display: none;
        }

   

    }

    @media (min-width: 992px) and (max-width: 1199.98px) {
        .blog-detail-video .blog-detail-video-wrapper .blog-detail-video-control {
            width: 50px;
        }
    }



    



    /* =========================================================
       FLOATING MINI PLAYER (YouTube-style picture-in-picture)
    ========================================================= */

    /* ---- Preview left behind in the article while the video floats ---- */

    .blog-detail-video-placeholder {
        position: relative;
        border-radius: 15px;
        overflow: hidden;
        background-color: #0b0b0b;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .blog-detail-video-placeholder::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, .55);
    }

    .blog-detail-video-placeholder span {
        position: relative;
        display: inline-block;
        max-width: 80%;
        padding: 9px 16px;
        border: 1px solid rgba(255, 255, 255, .35);
        border-radius: 999px;
        background: rgba(0, 0, 0, .35);
        font-family: "Red Hat Display", sans-serif;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        text-align: center;
        line-height: 1.3;
        color: #fff;
    }

    /* ---- Drag handle ---- */

    .bdv-mini-bar {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 34px;
        display: none;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 0 6px 0 12px;
        background: linear-gradient(to bottom, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
        z-index: 14;
        cursor: grab;
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
    }

    .bdv-mini-bar-label {
        font-family: "Red Hat Display", sans-serif;
        font-size: 11px;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, .85);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        pointer-events: none;
    }

    /* Buttons in the mini player's top bar: fullscreen (left), close (right).
       SVG icons rather than a text glyph, so they sit centred at any size. */
    .bdv-mini-btn {
        flex: 0 0 auto;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: #fff;
        line-height: 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background-color .15s ease;
    }

    .bdv-mini-btn svg {
        width: 18px;
        height: 18px;
        display: block;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.4;
        stroke-linecap: round;
        stroke-linejoin: round;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
        pointer-events: none;
    }

    .bdv-mini-btn:hover,
    .bdv-mini-btn:focus-visible {
        background: rgba(255, 255, 255, .18);
    }

    .bdv-mini-btn:focus-visible {
        outline: 2px solid #fff;
        outline-offset: -2px;
    }

    /* ---- Bottom controls: rewind / play-pause / forward, seek bar below ----
       Mini player only; visibility is driven inline by syncBar() together
       with the top bar. */
    .bdv-mini-bottom {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 14;
        flex-direction: column;
        gap: 2px;
        padding: 18px 4px 4px;
        background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
    }

    .blog-detail-video-wrapper.is-mini .bdv-mini-bottom {
        display: flex;
    }

    /* [-10s] [play/pause] [+10s], centred with clear space between them */
    .bdv-mini-bottom-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 22px;
    }

    /* Let the buttons give a little if the player is pinched very small */
    .bdv-mini-bottom-row .bdv-mini-btn {
        flex: 0 1 auto;
        min-width: 0;
    }

    .bdv-mini-play svg {
        fill: currentColor;
        stroke: none;
    }

    /* Play/pause is the main button - a little bigger than the skip buttons */
    .blog-detail-video-wrapper .bdv-mini-play {
        width: 34px;
        height: 34px;
    }

    .blog-detail-video-wrapper .bdv-mini-play svg {
        width: 22px;
        height: 22px;
    }

    .blog-detail-video-wrapper .bdv-mini-seek svg {
        width: 22px;
        height: 22px;
        stroke-width: 2;
    }

    /* Tap-to-restore / double-tap-to-enlarge: the size change is animated as
           a transform (see setMiniWidth), so it runs smoothly on the GPU */
    .blog-detail-video-wrapper.is-mini.bdv-resizing {
        transition: transform .3s cubic-bezier(.2, .8, .2, 1);
        will-change: transform;
    }

    @media (prefers-reduced-motion: reduce) {
        .blog-detail-video-wrapper.is-mini.bdv-resizing {
            transition: none;
        }
    }

    @media (max-width: 767px) {

        /* Spacing scales with the player, so it stays even at any size */
        .bdv-mini-bottom-row {
            gap: 10%;
        }

        .blog-detail-video-wrapper .bdv-mini-play {
            width: 30px;
            height: 30px;
        }

        .blog-detail-video-wrapper .bdv-mini-play svg {
            width: 20px;
            height: 20px;
        }

        .blog-detail-video-wrapper .bdv-mini-seek svg {
            width: 20px;
            height: 20px;
        }
    }

    /* Seek bar: a thin track with a tall invisible hit area for fingers */
    .bdv-mini-scrub {
        position: relative;
        display: flex;
        align-items: center;
        height: 16px;
        margin: 0 7px;
        cursor: pointer;
        touch-action: none;
        -webkit-tap-highlight-color: transparent;
    }

    .bdv-mini-scrub:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 2px;
        border-radius: 4px;
    }

    .bdv-mini-scrub-track {
        position: relative;
        width: 100%;
        height: 3px;
        border-radius: 3px;
        background: rgba(255, 255, 255, .35);
    }

    .bdv-mini-scrub-fill {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 0;
        border-radius: inherit;
        background: #fff;
    }

    .bdv-mini-scrub-thumb {
        position: absolute;
        top: 50%;
        left: 0;
        width: 12px;
        height: 12px;
        margin: -6px 0 0 -6px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
        transition: transform .1s ease;
    }

    .bdv-mini-scrub.is-scrubbing .bdv-mini-scrub-thumb {
        transform: scale(1.25);
    }

    /* The thin always-on progress line gives way to the seek bar */
    .blog-detail-video-wrapper.is-mini.bdv-controls-visible .bdv-mini-progress {
        opacity: 0;
    }

    @media (max-width: 767px) {
        .bdv-mini-bottom {
            padding: 14px 2px 2px;
            gap: 0;
        }

        .bdv-mini-scrub {
            height: 14px;
            margin: 0 6px;
        }

        .bdv-mini-scrub-thumb {
            width: 10px;
            height: 10px;
            margin: -5px 0 0 -5px;
        }
    }

    .blog-detail-video-wrapper:fullscreen .bdv-mini-bottom {
        display: none !important;
    }

    .blog-detail-video-wrapper:-webkit-full-screen .bdv-mini-bottom {
        display: none !important;
    }


    /* The big centre play/pause circle real Android phones showed in the mini
       player is part of Chrome's native controls, which page CSS cannot
       style. So the mini player turns the native controls off altogether
       (see applyMiniControls in the script) and uses its own buttons plus
       this thin YouTube-style progress line. Fullscreen and the in-article
       player keep the native controls. */
    .bdv-mini-progress {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3px;
        background: rgba(255, 255, 255, .3);
        z-index: 13;
        pointer-events: none;
    }

    .bdv-mini-progress span {
        display: block;
        width: 0;
        height: 100%;
        background: #0066ff;
    }

    .blog-detail-video-wrapper.is-mini .bdv-mini-progress {
        display: block;
    }

    .blog-detail-video-wrapper:fullscreen .bdv-mini-progress {
        display: none !important;
    }

    .blog-detail-video-wrapper:-webkit-full-screen .bdv-mini-progress {
        display: none !important;
    }

    /* Our own centre play/pause image is also redundant in the mini player on
       touch screens (no hover to reveal/hide it) */
    @media (hover: none),
    (pointer: coarse) {
        .blog-detail-video-wrapper.is-mini .blog-detail-video-control {
            display: none !important;
        }
    }

    /* Fullscreen: drop the mini player's rounded corners */
    .blog-detail-video-player:fullscreen {
        border-radius: 0 !important;
        object-fit: contain !important;
        aspect-ratio: auto !important;
    }

    .blog-detail-video-player:-webkit-full-screen {
        border-radius: 0 !important;
        object-fit: contain !important;
        aspect-ratio: auto !important;
    }

    /* ---- Whole player in fullscreen (from the mini player's button) ----
       !important is needed to beat the inline left/top/width/transform the
       drag and pinch code leaves on the wrapper. Rules are duplicated for
       the -webkit- prefix: an unknown pseudo-class in a selector list would
       drop the whole rule. */
    .blog-detail-video-wrapper:fullscreen {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        transform: none !important;
        animation: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #000 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .blog-detail-video-wrapper:-webkit-full-screen {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        transform: none !important;
        animation: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #000 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    .blog-detail-video-wrapper:fullscreen video {
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: auto !important;
        object-fit: contain !important;
        border-radius: 0 !important;
    }

    .blog-detail-video-wrapper:-webkit-full-screen video {
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: auto !important;
        object-fit: contain !important;
        border-radius: 0 !important;
    }

    /* Top bar: always visible in fullscreen, X only, bigger tap target,
       clear of the notch / status bar */
    .blog-detail-video-wrapper:fullscreen .bdv-mini-bar {
        display: flex !important;
        justify-content: flex-end !important;
        height: auto !important;
        padding: calc(12px + env(safe-area-inset-top, 0px)) calc(12px + env(safe-area-inset-right, 0px)) 24px 12px !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 20;
    }

    .blog-detail-video-wrapper:-webkit-full-screen .bdv-mini-bar {
        display: flex !important;
        justify-content: flex-end !important;
        height: auto !important;
        padding: calc(12px + env(safe-area-inset-top, 0px)) calc(12px + env(safe-area-inset-right, 0px)) 24px 12px !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 20;
    }

    .blog-detail-video-wrapper:fullscreen .bdv-mini-fullscreen {
        display: none !important;
    }

    .blog-detail-video-wrapper:-webkit-full-screen .bdv-mini-fullscreen {
        display: none !important;
    }

    .blog-detail-video-wrapper:fullscreen .bdv-mini-close {
        width: 44px !important;
        height: 44px !important;
        background: rgba(0, 0, 0, .45);
    }

    .blog-detail-video-wrapper:-webkit-full-screen .bdv-mini-close {
        width: 44px !important;
        height: 44px !important;
        background: rgba(0, 0, 0, .45);
    }

    .blog-detail-video-wrapper:fullscreen .bdv-mini-close svg {
        width: 24px !important;
        height: 24px !important;
    }

    .blog-detail-video-wrapper:-webkit-full-screen .bdv-mini-close svg {
        width: 24px !important;
        height: 24px !important;
    }

    .blog-detail-video-wrapper:fullscreen .blog-detail-video-control {
        width: 64px !important;
    }

    .blog-detail-video-wrapper:-webkit-full-screen .blog-detail-video-control {
        width: 64px !important;
    }


    /* NOTE: these rules must NOT depend on a .blog-detail-video ancestor.
       While floating, the player is moved to <body> to escape the stacking
       context created by the sticky left sidebar, so the base player rules
       (width/height/radius on the video, centring of the control) no longer
       reach it and are re-declared here. */

    .blog-detail-video-wrapper.is-mini video {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 12px;
    }

    .blog-detail-video-wrapper.is-mini .blog-detail-video-control {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 44px;
        cursor: pointer;
        z-index: 10;
        opacity: .8;
        transition: opacity .3s ease;
    }

    .blog-detail-video-wrapper.is-mini.playing .blog-detail-video-control {
        opacity: 0;
    }

    .blog-detail-video-wrapper.is-mini.playing:hover .blog-detail-video-control {
        opacity: .8;
    }

    .blog-detail-video-wrapper.is-mini.cursor-still.playing .blog-detail-video-control {
        opacity: 0 !important;
    }

    .blog-detail-video-wrapper.is-mini {
        position: fixed;
        right: 24px;
        bottom: 24px;
        top: auto;
        left: auto;
        width: 190px;
        max-width: calc(100vw - 32px);
        margin: 0;
        z-index: 1111111111;
        /* above #myHeader, below BS modals (1050+) */
        border-radius: 14px;
        overflow: hidden;
        /* background: #000; */
        background: #00000045;
        box-shadow: 0 12px 34px rgba(0, 0, 0, .35);

        /* The whole player is a drag surface, so the browser must not claim
           the touch for panning. Without this the browser starts scrolling,
           fires pointercancel, and the drag dies mid-gesture. */
        touch-action: none;
    }

    .blog-detail-video-wrapper.is-mini video {
        border-radius: 6px;
    }

    /* One-shot entry animation. Kept on its own class, removed once it has
       run: if it lived on .is-mini, every toggle of .is-dragging would
       restart it and the player would visibly blink. */
    .blog-detail-video-wrapper.is-mini.is-entering {
        animation: bdv-mini-in .25s ease-out both;
    }

    .blog-detail-video-wrapper.is-mini .bdv-mini-bar {
        display: flex;
        justify-content: space-between;
        padding: 2px 4px 0;
    }

    /* While dragging: grabbing cursor, lift the shadow */
    .blog-detail-video-wrapper.is-mini.is-dragging {
        box-shadow: 0 20px 48px rgba(0, 0, 0, .5);
        cursor: grabbing;
    }

    .blog-detail-video-wrapper.is-mini.is-dragging .bdv-mini-bar {
        cursor: grabbing;
    }

    /* Don't fight the "Book a strategy call" modal */
    body.modal-open .blog-detail-video-wrapper.is-mini {
        display: none;
    }


    /* The handle - with its close button - shows and hides together with the
       video's native controls. The script adds .bdv-controls-visible on the
       same cues the browser uses (see "Close icon follows the native
       controls"); a tap reveals it on touch screens. Kept visible mid-drag,
       and while the close button has keyboard focus.

       visibility (delayed until the fade has finished) stops a hidden close
       button from catching a tap or click. */
    .bdv-mini-bar {
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease, visibility 0s linear .2s;
    }

    .blog-detail-video-wrapper.is-mini.bdv-controls-visible .bdv-mini-bar,
    .blog-detail-video-wrapper.is-mini.is-dragging .bdv-mini-bar,
    .blog-detail-video-wrapper.is-mini .bdv-mini-bar:focus-within {
        opacity: 1;
        visibility: visible;
        transition-delay: 0s;
    }


    @keyframes bdv-mini-in {
        from {
            opacity: 0;
            transform: translateY(16px) scale(.96);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .blog-detail-video-wrapper.is-mini.is-entering {
            animation: none;
        }
    }

    @media (max-width: 991.98px) {

        /* Mirrors the in-article rule, which no longer reaches the portaled player */
        .blog-detail-video-wrapper.is-mini.played-once .blog-detail-video-control {
            display: none;
        }
    }

    @media (max-width: 767px) {
        .blog-detail-video-wrapper.is-mini {
            width: 121px;
            /* YouTube-sized mini player: 121 x 209 */
            right: 12px;
            bottom: 12px;
            border-radius: 10px;
        }

        .blog-detail-video-wrapper.is-mini .blog-detail-video-control {
            width: 28px;
        }

        /* Lock the mini player to 121:209, so it is 121 x 209 at the default
           width (and keeps that shape when pinched bigger). The video is
           cropped a few percent to fill it rather than letterboxed. */
        .blog-detail-video-wrapper.is-mini video {
            aspect-ratio: 121 / 209;
            height: auto;
            object-fit: cover;
        }

        .bdv-mini-bar {
            height: 28px;
            padding-left: 8px;
        }

        .bdv-mini-bar-label {
            display: none;
        }

        .blog-detail-video-placeholder span {
            font-size: 11px;
            padding: 7px 12px;
        }

        .blog-detail-video-wrapper.is-mini .bdv-mini-bar {
            height: 32px;
            padding: 2px 2px 0;
        }

        .bdv-mini-btn {
            width: 28px;
            height: 28px;
        }

        .bdv-mini-btn svg {
            width: 16px;
            height: 16px;
        }
    }


    @media (min-width: 1200px) and (max-width: 1399.98px) {
        .blog-detail-video-wrapper.is-mini {
            width: 190px;
        }
    }



    .blog-detail-video.horizontal-video-ratio .blog-detail-video-wrapper video{    height: 627px;}
    
    body:has(.horizontal-video-ratio) .blog-detail-video-wrapper.is-mini{    width: 320px;}
    body:has(.horizontal-video-ratio) .blog-detail-video-wrapper.is-mini video{       height: 200px;    object-fit: cover; width: 100%;}


    @media (min-width: 1401px) and (max-width: 1800px) {
        .blog-detail-video.horizontal-video-ratio .blog-detail-video-wrapper video{    height: 478px;}
    }

    @media (min-width: 1200px) and (max-width: 1399.99px) {
        .blog-detail-video.horizontal-video-ratio .blog-detail-video-wrapper video{    height: 627px;}
    }

    @media (min-width: 992px) and (max-width: 1199.98px) {
        .blog-detail-video.horizontal-video-ratio .blog-detail-video-wrapper video{    height: 345px;}
    }

    @media (min-width: 768px) and (max-width: 991.98px) {
        .blog-detail-video.horizontal-video-ratio .blog-detail-video-wrapper video{    height: 440px;}
    }

    @media (max-width: 767px) {
        .blog-detail-video.horizontal-video-ratio .blog-detail-video-wrapper video{    height: 330px;}
        body:has(.horizontal-video-ratio) .blog-detail-video-wrapper.is-mini video{   height: 150px;   aspect-ratio: unset;}
        body:has(.horizontal-video-ratio) .blog-detail-video-wrapper.is-mini { width: 232px;}
  
    }

     @media (max-width: 575px) {
        .blog-detail-video.horizontal-video-ratio .blog-detail-video-wrapper video{    height: 230px;}
        body:has(.horizontal-video-ratio) .blog-detail-video-wrapper.is-mini video{   height: 110px;   aspect-ratio: unset;}
        body:has(.horizontal-video-ratio) .blog-detail-video-wrapper.is-mini { width: 182px;}
  
    }



    /* =========================================================
   FLOATING VIDEO - VIDEO CAROUSEL
   ========================================================= */

/* Floating video */
.video-wrapper.is-mini {
    position: fixed;
    right: 24px;
    bottom: 24px;
    top: auto;
    left: auto;
    width: 190px;
    max-width: calc(100vw - 32px);
    margin: 0;
    z-index: 1111111111;
    border-radius: 14px;
    overflow: hidden;
    background: #00000045;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .35);
    touch-action: none;
}

/* Video inside floating player */
.video-wrapper.is-mini .new-ai-video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}

/* Entry animation */
.video-wrapper.is-mini.is-entering {
    animation: bdv-mini-in .25s ease-out both;
}

/* Dragging */
.video-wrapper.is-mini.is-dragging {
    box-shadow: 0 20px 48px rgba(0, 0, 0, .5);
    cursor: grabbing;
}

.video-wrapper.is-mini.is-dragging .bdv-mini-bar {
    cursor: grabbing;
}

.video-wrapper.is-mini.playing .video-icon{width: 44px;}

/* =========================================================
   FLOATING TOP BAR
   ========================================================= */

.video-wrapper.is-mini .bdv-mini-bar {
    display: flex;
    justify-content: space-between;
    padding: 2px 4px 0;
}


/* =========================================================
   FLOATING CONTROLS VISIBILITY
   ========================================================= */

.video-wrapper.is-mini.bdv-controls-visible .bdv-mini-bar,
.video-wrapper.is-mini.is-dragging .bdv-mini-bar,
.video-wrapper.is-mini .bdv-mini-bar:focus-within {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}


/* =========================================================
   PLAY / PAUSE BUTTON
   ========================================================= */

.video-carousel .video-wrapper .bdv-mini-play {
    width: 34px;
    height: 34px;
}

.video-carousel .video-wrapper .bdv-mini-play svg {
    width: 22px;
    height: 22px;
}

.video-carousel .video-wrapper .bdv-mini-seek svg {
    width: 22px;
    height: 22px;
    stroke-width: 2;
}


/* =========================================================
   RESIZE ANIMATION
   ========================================================= */

.video-wrapper.is-mini.bdv-resizing {
    transition: transform .3s cubic-bezier(.2, .8, .2, 1);
    will-change: transform;
}


/* =========================================================
   FULLSCREEN
   ========================================================= */

.video-carousel .video-wrapper:fullscreen .bdv-mini-bar,
.video-carousel .video-wrapper:-webkit-full-screen .bdv-mini-bar {
    display: flex !important;
    justify-content: flex-end !important;
    height: auto !important;
    padding:
        calc(12px + env(safe-area-inset-top, 0px))
        calc(12px + env(safe-area-inset-right, 0px))
        24px
        12px !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 20;
}

.video-carousel .video-wrapper:fullscreen .bdv-mini-fullscreen,
.video-carousel .video-wrapper:-webkit-full-screen .bdv-mini-fullscreen {
    display: none !important;
}

.video-carousel .video-wrapper:fullscreen .bdv-mini-close,
.video-carousel .video-wrapper:-webkit-full-screen .bdv-mini-close {
    width: 44px !important;
    height: 44px !important;
    background: rgba(0, 0, 0, .45);
}

.video-carousel .video-wrapper:fullscreen .bdv-mini-close svg,
.video-carousel .video-wrapper:-webkit-full-screen .bdv-mini-close svg {
    width: 24px !important;
    height: 24px !important;
}


/* =========================================================
   VIDEO IN FULLSCREEN
   ========================================================= */

.video-carousel .video-wrapper:fullscreen .new-ai-video,
.video-carousel .video-wrapper:-webkit-full-screen .new-ai-video {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    border-radius: 0 !important;
}


/* =========================================================
   HIDE FLOATING PLAYER WHEN MODAL IS OPEN
   ========================================================= */

body.modal-open .video-wrapper.is-mini {
    display: none;
}


/* =========================================================
   MINI CONTROL BAR
   ========================================================= */

.video-wrapper.is-mini .bdv-mini-bottom {
    display: flex;
}


/* =========================================================
   BOTTOM CONTROL ROW
   ========================================================= */

.video-carousel .video-wrapper .bdv-mini-play {
    flex: 0 1 auto;
    min-width: 0;
}

.bdv-mini-bottom-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
}


/* =========================================================
   SEEK BAR
   ========================================================= */

.bdv-mini-scrub {
    position: relative;
    display: flex;
    align-items: center;
    height: 16px;
    margin: 0 7px;
    cursor: pointer;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

.bdv-mini-scrub:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: 4px;
}

.bdv-mini-scrub-track {
    position: relative;
    width: 100%;
    height: 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .35);
}

.bdv-mini-scrub-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    border-radius: inherit;
}

.bdv-mini-scrub-thumb {
    position: absolute;
    top: 50%;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .video-wrapper.is-mini.is-entering {
        animation: none;
    }

    .video-wrapper.is-mini.bdv-resizing {
        transition: none;
    }
}


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width: 991.98px) {

    .video-wrapper.is-mini .video-icon {
        display: none;
    }
}


@media (max-width: 767px) {

    .video-wrapper.is-mini {
        width: 121px;
        right: 12px;
        bottom: 12px;
        border-radius: 10px;
    }

    .video-wrapper.is-mini .new-ai-video {
        aspect-ratio: 121 / 209;
        height: auto;
        object-fit: cover;
    }

    .video-carousel .video-wrapper .bdv-mini-play {
        width: 30px;
        height: 30px;
    }

    .video-carousel .video-wrapper .bdv-mini-play svg {
        width: 20px;
        height: 20px;
    }

    .video-carousel .video-wrapper .bdv-mini-seek svg {
        width: 20px;
        height: 20px;
    }

    .bdv-mini-bottom-row {
        gap: 10%;
    }
}