/**
* 2007-2026 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
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license@prestashop.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade PrestaShop to newer
* versions in the future. If you wish to customize PrestaShop for your
* needs please refer to http://www.prestashop.com for more information.
*
*  @author    PrestaShop SA <contact@prestashop.com>
*  @copyright 2007-2026 PrestaShop SA
*  @license   http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
*  International Registered Trademark & Property of PrestaShop SA
*
* Don't forget to prefix your containers with your own identifier
* to avoid any conflicts with others containers.
*/
.fmmaivideo-container {
    width: 100%;
    max-width: 600px;
    margin: auto;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 16px;
}

.fmmaivideo-player {
    border: 4px solid #fff;
    transition: transform 0.3s ease;
}

.fmmaivideo-player:hover {
    transform: scale(1.02);
}

/* Thumbnails: match theme's thumbnail sizing */
.thumbnails__container .fmmaivideo-thumb-wrapper,
ul.thumbnails__list .fmmaivideo-thumb-wrapper {
    position: relative;
    cursor: pointer;
    min-width: 0;
}

/* Classic theme */
ul.product-images .fmmaivideo-thumb-wrapper {
    display: inline-block;
    vertical-align: top;
    margin: 0 0.625rem 0.625rem 0;
}

.fmmaivideo-thumb-aspect {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
    background: #f1f3f5;
    aspect-ratio: 1 / 1;
}

.fmmaivideo-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    display: block;
    object-fit: cover;
    border: 2px solid transparent;
    border-radius: 8px;
}

.fmmaivideo-thumb.selected {
    border-color: #24b9d7 !important;
}

.thumbnails__container .thumbnail.fmmaivideo-thumb-wrapper.active .fmmaivideo-thumb {
    border-color: #24b9d7;
}

.fmmaivideo-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: background 0.3s ease;
}

.fmmaivideo-thumb-wrapper:hover .fmmaivideo-play-icon {
    background: rgba(36, 185, 215, 0.8);
}

.fmmaivideo-play-icon i {
    font-size: 18px;
}

.fmmaivideo-gallery-player {
    max-height: 500px;
    background: #000;
}

/* Carousel slide video */
.fmmaivideo-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.fmmaivideo-carousel-video {
    width: 100%;
    height: auto;
    max-height: 70vh;
    background: #000;
    border-radius: 8px;
}

/* Classic theme video cover */
.fmmaivideo-classic-cover-video {
    display: none;
    background: #000;
}

/* Force specific thumbnail dimensions to prevent collapsing in Classic themes */
ul.product-images .fmmaivideo-thumb-wrapper.classic-thumb {
    width: 90px !important;
    height: 90px !important;
    margin: 0 5px 5px 0 !important;
    display: inline-block !important;
    vertical-align: top;
    box-sizing: border-box;
    border: 1px solid #ddd;
    padding: 2px;
    position: relative !important;
    /* CRITICAL: contain the absolute play icon */
}

ul.product-images .fmmaivideo-thumb-wrapper.classic-thumb .fmmaivideo-thumb-aspect {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    overflow: hidden;
    position: relative;
}

ul.product-images .fmmaivideo-thumb-wrapper.classic-thumb .fmmaivideo-thumb {
    border-radius: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}