/* Spolocny zaklad video playera */
.si-video-wrap {
    position: relative;
    width: 100%;
    cursor: pointer;
}

.si-video-player {
    display: block;
    width: 100%;
    height: auto;
}

/* Ikona play/pause */
.si-video-play {
    position: absolute;
    top: 8%;
    right: 15px;
    z-index: 2;
    pointer-events: none;
    opacity: 1;
    visibility: visible;
    transition: opacity var(--transition-dur, 0.25s) ease-in-out,
                visibility var(--transition-dur, 0.25s) ease-in-out;
}

/* Ikona lightbox */
.si-video-lightbox {
    position: absolute;
    right: 15px;
    bottom: 8%;
    z-index: 3;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition-dur, 0.25s) ease-in-out,
                visibility var(--transition-dur, 0.25s) ease-in-out;
}

/* Spolocne ikony videa */
.si-video-play i,
.si-video-wrap .si-video-lightbox i {
    font-size: 26px;
    line-height: 1;
    color: var(--awb-color5);
}

/* Spolocne kruhove pozadie ikon videa */
.si-video-play,
.si-video-wrap .si-video-lightbox {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Reset pre lightbox ikonu */
.si-video-wrap .si-video-lightbox {
    border: 0;
    padding: 0;
    text-decoration: none;
}

/* Jemne centrovanie play ikony v kruhu */
.si-video-play i.fa-play::before {
    display: inline-block;
    transform: translateX(3px);
}

/* Ovladanie videa - viditelne kratko po akcii */
.si-video-wrap--custom.is-playing.is-controls-visible .si-video-lightbox {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Skryt play/pause pocas prehravania */
.si-video-wrap--custom.is-playing:not(.is-controls-visible) .si-video-play {
    opacity: 0;
    visibility: hidden;
}

/* Desktop - zobrazit ovladanie pri hoveri */
@media (hover: hover) and (pointer: fine) {
    .si-video-wrap--custom.is-playing:hover .si-video-play,
    .si-video-wrap--custom.is-playing:focus-within .si-video-play {
        opacity: 1;
        visibility: visible;
    }

    .si-video-wrap--custom.is-playing:hover .si-video-lightbox,
    .si-video-wrap--custom.is-playing:focus-within .si-video-lightbox {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

/* Custom video lightbox */
.si-video-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(15px, 4vw, 40px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition-dur, 0.25s) ease-in-out,
                visibility var(--transition-dur, 0.25s) ease-in-out;
}

.si-video-modal.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.si-video-modal__backdrop {
    position: absolute;
    inset: 0;
    background: var(--si-color-overlay);
}

.si-video-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 1920px);
    max-height: calc(100vh - 80px);
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.7);
}

.si-video-modal__video {
    display: block;
    width: 100%;
    height: auto;
    max-height: calc(100vh - 80px);
    background: #000;
}

.si-video-modal__close {
    font-size: 16px;
    color: var(--awb-color5);
    background: transparent;
    border: 0;
    padding: 0;
    position: absolute;
    right: 0;
    top: -38px;
    z-index: 2;
    cursor: pointer;
    transition: color var(--transition-dur, 0.25s) ease-in-out;
}

.si-video-modal__close:hover {
    color: var(--awb-color4);
}

body.si-video-modal-is-open {
    overflow: hidden;
}

@media (max-width: 640px) {
    .si-video-modal {
        padding: 15px;
    }

    .si-video-modal__dialog {
        max-height: calc(100vh - 60px);
    }

    .si-video-modal__video {
        max-height: calc(100vh - 60px);
    }

    .si-video-modal__close {
        top: -34px;
    }

    /* Video ikony - mensie na mobile */
    .si-video-play,
    .si-video-wrap .si-video-lightbox {
        width: 38px;
        height: 38px;
    }

    .si-video-play i,
    .si-video-wrap .si-video-lightbox i {
        font-size: 21px;
    }

    .si-video-play i.fa-play::before {
        transform: translate(2.5px, 1px);
    }

    .si-video-wrap--custom .si-video-play {
        right: 12px;
    }

    .si-video-wrap--custom .si-video-lightbox {
        right: 12px;
    }
}