/* Lazy walk-around video embed (#1071/#1109) */
.bim-video-embed {
    position: relative;
    width: 100%;
    height: 100%;
    background: #0b1220;
    overflow: hidden;
}
.bim-video-embed-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* position is pinned !important on the overlay buttons: dealer themes
   commonly reset button:focus/:active to position:relative, which would
   teleport an absolutely-positioned control mid-click (#1071 arrow bug). */
.bim-video-embed-play {
    position: absolute !important;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border: 0;
    background: rgba(2, 6, 23, 0.3);
    cursor: pointer;
    transition: background 0.2s ease;
}
.bim-video-embed-play:hover,
.bim-video-embed-play:focus-visible {
    background: rgba(2, 6, 23, 0.45);
}
.bim-video-embed-play-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #0b1220;
    font-size: 26px;
    padding-left: 6px; /* optical centering of the triangle */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease;
}
.bim-video-embed-play:hover .bim-video-embed-play-icon {
    transform: scale(1.08);
}
.bim-video-embed-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.bim-video-embed-mute {
    position: absolute !important;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(2, 6, 23, 0.6);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease;
}
.bim-video-embed-mute:hover {
    background: rgba(2, 6, 23, 0.85);
}
.bim-video-embed-mute[hidden] {
    display: none;
}
.bim-video-embed--playing .bim-video-embed-poster,
.bim-video-embed--playing .bim-video-embed-play {
    display: none;
}

/* Bottom-left, away from YouTube's watermark corner; sits above the link
   guard so it reads as part of our chrome while the patch is showing. */
.bim-video-embed-cc {
    position: absolute !important;
    left: 12px;
    bottom: 12px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(2, 6, 23, 0.6);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    cursor: pointer;
    opacity: 0.65;
    transition: background 0.2s ease, opacity 0.2s ease;
}
.bim-video-embed-cc:hover {
    background: rgba(2, 6, 23, 0.85);
    opacity: 1;
}
.bim-video-embed-cc[data-cc="1"] {
    opacity: 1;
    background: rgba(37, 99, 235, 0.85);
}
.bim-video-embed-cc[hidden] {
    display: none;
}

/* Transparent shield: hover and clicks never reach YouTube's player, so
   its overlay chrome (title, More videos, copy-link) never renders. Sits
   over the iframe, under our buttons; frontend JS turns its clicks into
   state-synced pause/resume. */
.bim-video-embed-shield {
    position: absolute !important;
    inset: 0;
    z-index: 1;
    cursor: pointer;
    display: none;
}
.bim-video-embed--playing .bim-video-embed-shield {
    display: block;
}

/* Paused cover + the warming window over fresh players (YouTube's start
   fade): the poster returns above shield and iframe; paused also brings
   the play badge back. Declared after the --playing rules to win the
   display tie. */
.bim-video-embed--playing.bim-video-embed--paused .bim-video-embed-poster,
.bim-video-embed--playing.bim-video-embed--warming .bim-video-embed-poster {
    display: block;
    z-index: 2;
}
.bim-video-embed--playing.bim-video-embed--paused .bim-video-embed-play {
    display: flex;
    z-index: 3;
}