/**
 * [2020] PrestaShop
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 *
 * @author    knowband.com <support@knowband.com>
 * @copyright 2020 Knowband
 * @license   see file: LICENSE.txt
 * @category  PrestaShop Module
 */

.kb-product-videos {
    margin: 20px 0;
}

.kb-video-container {
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
}

.kb-video-container:last-child {
    margin-bottom: 0;
}

.kb-video-container iframe,
.kb-video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Video Thumbnails */
.kb-video-thumb {
    position: relative;
    cursor: pointer;
}

.kb-video-thumb::before {
    content: '\25B6'; /* Play triangle symbol */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 8px;
    border-radius: 50%;
    font-size: 12px;
    z-index: 1;
}

.kb-video-thumb-img {
    object-fit: cover;
    border: 2px solid transparent;
    transition: border-color 0.3s ease;
}

.kb-video-thumb-img:hover {
    border-color: #2fb5d2;
}

/* Main Video Container */
.kb-product-video-wrapper {
    width: 100%;
    height: 253px;
    background: #000;
}

.kb-product-video-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kb-product-video-container iframe,
.kb-product-video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Fix for product cover container */
.product-cover {
    position: relative;
    background: #fff;
}

.product-cover .layer {
    z-index: 2;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .kb-video-container {
        margin-bottom: 15px;
    }
    .kb-product-video-container {
        min-height: 300px;
    }
} 

.thumb-container.js-thumb-container.kb-video-thumb{
    display: inline-block;
}