/* views/css/front.css */

.video-thumbnail-item {
    cursor: pointer;
}

.video-thumbnail-item img, .gallery-video-item img, .listing-cover-video img {
    border: none;
    transition: border-color 0.3s ease, opacity 0.4s ease-in-out;
}

.video-thumbnail-item.selected img,
.video-thumbnail-item:hover img,
.gallery-video-item:hover img,
.listing-cover-video:hover img {
    border-color: transparent;
}

/* --- Nowe style dla płynnego przejścia --- */

/* Wrapper odtwarzacza */
.video-player-inline-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border: none;
    /* Ustawienia animacji */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
}

/* Klasa dodawana przez JS, aby pokazać odtwarzacz */
.video-player-inline-wrapper.pi-player-visible {
    opacity: 1;
    visibility: visible;
}

/* Kontener miniatury */
.thumb-container {
    position: relative; /* Niezbędne dla pozycjonowania odtwarzacza */
}

/* Ukrywanie miniatury, gdy wideo jest aktywne */
.thumb-container.pi-thumb-hidden .thumb img {
    opacity: 0;
}


/* --- Koniec nowych stylów --- */


.video-player-inline-wrapper iframe,
.video-player-inline-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Opcjonalnie: ikona play na miniaturce */
.video-thumb-link {
    position: relative;
    display: block;
}

.listing-cover-video:not([data-playback-trigger="onload"]) .video-thumb-link::after {
    content: '';
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 40px 69.3px 40px;
    border-color: transparent transparent #ECEBEB transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.video-thumb-link:hover::after {
    opacity: 1;
}

.thumb-container.video-active-in-thumb .video-thumb-link::after {
    opacity: 0;
}

/* MODIFIED: Styles for the video description block */
.video-description {
    font-size: 13px;
    color: #7a7a7a;
    padding: 5px 2px 0 2px;
    line-height: 1.4;
    text-align: left;
    clear: both;
}