.lv-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
    line-height: 0;
}

.lv-wrap video {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Optional title (shown when the shortcode is given a `title` attr).
   Rendered as a block above the video, in normal flow — not overlaid.
   Inherits the surrounding text colour / font from the theme; the
   line-height reset is needed because .lv-wrap sets line-height: 0
   to kill the inline-block whitespace under the video. */
.lv-title {
    display: block;
    margin: 0 0 6px;
    color: inherit;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 600;
    text-align: left;
}

/* Reset every state explicitly so the active theme's button styles can't
   paint a coloured background or shadow behind our icons. */
.lv-btn,
.lv-btn:hover,
.lv-btn:focus,
.lv-btn:active {
    position: absolute;
    bottom: 8px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit;
    cursor: pointer;
    line-height: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.lv-btn {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.lv-pp    { left: 8px; }
.lv-sound { right: 8px; }

/* Visible while the wrapper is hovered, or while a keyboard user has
   focus inside it. Mouse-click focus is removed via JS (button.blur())
   so the icons don't linger after the click. */
.lv-wrap:hover .lv-btn,
.lv-wrap:focus-within .lv-btn {
    opacity: 1;
}

.lv-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    opacity: 1;
}

/* White icon, black outline. stroke-width is in viewBox units; with
   paint-order: stroke fill, half the stroke is hidden by the fill,
   so the visible outline ≈ stroke-width / 2 viewBox units. */
.lv-btn svg {
    width: 32px;
    height: 32px;
    fill: #fff;
    stroke: #000;
    stroke-width: 3;
    stroke-linejoin: round;
    paint-order: stroke fill;
    pointer-events: none;
}

/* Play / pause icon swap (action-icon convention). */
.lv-pp .lv-play  { display: none; }
.lv-pp .lv-pause { display: block; }
.lv-wrap.is-paused .lv-pp .lv-play  { display: block; }
.lv-wrap.is-paused .lv-pp .lv-pause { display: none; }

/* Mute / unmute icon swap. */
.lv-sound .lv-on  { display: none; }
.lv-sound .lv-off { display: block; }
.lv-wrap.is-unmuted .lv-sound .lv-on  { display: block; }
.lv-wrap.is-unmuted .lv-sound .lv-off { display: none; }