/* ==========================================================================
   [omnicasa_videos] — trigger button + video lightbox
   ========================================================================== */

/* --- Trigger -------------------------------------------------------------
   The button carries .elementor-button so it inherits the kit's button
   styling; only the play icon needs sizing here. */

.oc-videos__trigger {
    cursor: pointer;
    border: none;
}

/* Spacing between icon and label is left to Elementor: its button content
   wrapper is a flex row whose gap comes from the kit's icon-spacing control.
   Only the glyph's own centring is set here; its size follows the button's
   font-size through the icomoon-tabler face. */
.oc-videos__trigger .elementor-button-icon {
    display: inline-flex;
    align-items: center;
}

/* --- Lightbox ------------------------------------------------------------ */

body.oc-video-lightbox-is-open {
    overflow: hidden;
}

.oc-video-lightbox {
    /* Vertical space the chrome around the player needs (padding, gap and the
       thumbnail strip). The frame's width is capped against it so the 16:9 box
       always fits the viewport instead of overlapping the strip. */
    --oc-chrome: 200px;

    /* Omnicasa's player lays out a fixed empty band across the top of its
       iframe, which pushed the video low and left the spacing around it
       uneven. Measured at 35px and constant across frame sizes, so the iframe
       is shifted up by that much and the frame clips it. Adjust here if their
       player changes. */
    --oc-player-offset: 35px;

    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

/* Single video — no thumbnail strip, so less chrome to reserve. */
.oc-video-lightbox--single {
    --oc-chrome: 130px;
}

.oc-video-lightbox__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.87);
}

.oc-video-lightbox__dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 1200px;
    max-height: 100%;
}

/* Every control in here is a <button>, which Elementor kits style globally via
   `.elementor-kit-N button` (specificity 0,1,1) — that painted the close icon
   with the site's accent colour, a border, a radius and padding. The doubled
   class selector (0,2,0) outranks it; the resets below neutralise what the kit
   and the theme's reset.css set on bare buttons. */
.oc-video-lightbox .oc-video-lightbox__close,
.oc-video-lightbox .oc-video-lightbox__nav,
.oc-video-lightbox .oc-video-lightbox__thumb {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: #fff;
    font: inherit;
    line-height: 0;
    letter-spacing: normal;
    text-transform: none;
    min-width: 0;
    min-height: 0;
    cursor: pointer;
}

/* The theme sets `* { outline: none !important }`, which leaves keyboard users
   with no focus indicator inside the lightbox. Restore one for keyboard focus
   only — :focus-visible never fires on mouse clicks. */
.oc-video-lightbox .oc-video-lightbox__close:focus-visible,
.oc-video-lightbox .oc-video-lightbox__nav:focus-visible,
.oc-video-lightbox .oc-video-lightbox__thumb:focus-visible {
    outline: 2px solid #fff !important;
    outline-offset: 2px;
}

/* Pinned to the lightbox corner rather than above the dialog, so it can never
   be pushed off-screen when the dialog is tall. */
.oc-video-lightbox .oc-video-lightbox__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 1;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0.85;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.oc-video-lightbox .oc-video-lightbox__close:hover,
.oc-video-lightbox .oc-video-lightbox__close:focus-visible {
    opacity: 1;
    background: rgba(0, 0, 0, 0.75);
}

.oc-video-lightbox__close svg {
    width: 20px;
    height: 20px;
}

/* --- Stage --------------------------------------------------------------- */

.oc-video-lightbox__stage {
    position: relative;
    flex: 0 1 auto;
    min-height: 0;
}

.oc-video-lightbox__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    width: min(100%, calc((100vh - var(--oc-chrome)) * 16 / 9));
    margin: 0 auto;
    overflow: hidden;
    background: #000;
}

.oc-video-lightbox__player {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Pull the player's empty top band out of view so the video sits centred in
   the frame. Only the iframe needs this — a <video> element has no such band
   and shifting it would crop the picture. */
iframe.oc-video-lightbox__player {
    top: calc(var(--oc-player-offset) * -1);
    height: calc(100% + var(--oc-player-offset));
}

/* --- Prev / next --------------------------------------------------------- */

.oc-video-lightbox .oc-video-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0.8;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.oc-video-lightbox .oc-video-lightbox__nav:hover,
.oc-video-lightbox .oc-video-lightbox__nav:focus-visible {
    opacity: 1;
    background: rgba(0, 0, 0, 0.75);
}

.oc-video-lightbox__nav svg {
    width: 24px;
    height: 24px;
}

/* Inset rather than outside the stage: the dialog can be as wide as the
   viewport, so negative offsets would push these off-screen. */
.oc-video-lightbox__nav--prev {
    left: 12px;
}

.oc-video-lightbox__nav--next {
    right: 12px;
}

/* --- Thumbnail strip ----------------------------------------------------- */

.oc-video-lightbox__thumbs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    overflow-x: auto;
}

.oc-video-lightbox .oc-video-lightbox__thumb {
    flex: 0 0 auto;
    width: 96px;
    height: 54px;
    overflow: hidden;
    background: #222;
    border: 2px solid transparent;
    border-radius: 2px;
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

.oc-video-lightbox__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.oc-video-lightbox .oc-video-lightbox__thumb:hover,
.oc-video-lightbox .oc-video-lightbox__thumb:focus-visible {
    opacity: 0.85;
}

.oc-video-lightbox .oc-video-lightbox__thumb.is-active {
    opacity: 1;
    border-color: #fff;
}

/* --- Small screens ------------------------------------------------------- */

/* Elementor's mobile breakpoint. The width cap mirrors the ratio so the taller
   box still fits the viewport height. */
@media (max-width: 767px) {
    .oc-video-lightbox__frame {
        aspect-ratio: 9 / 16;
        width: min(100%, calc((100vh - var(--oc-chrome)) * 9 / 16));
    }
}

@media (max-width: 900px) {
    .oc-video-lightbox {
        padding: 56px 12px 12px;
    }

    .oc-video-lightbox__thumbs {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
}