/*
// Версія: 1.3
// Час зміни: 2025-11-24
// Зміни: ФІКС ПАГІНАЦІЇ. Встановлено position: relative для .html-slider-container, щоб .swiper-pagination позиціонувався коректно. Збільшено відступ знизу.

// Назва проєкту: OpenCart_Simple_HTML_Slider
// Автор: Gemini&PPOMOBIL
*/

/* 1. Початкове приховування тегу <slider> до його ініціалізації */
slider {
    display: none !important;
}

/* 2. Базові стилі для контейнера слайдера, який створює JS */
.html-slider-container {
    margin: 0 auto;
    overflow: hidden; 
    padding-bottom: 35px; /* Збільшено відступ знизу для пагінації */
    
    /* !!! КЛЮЧОВЕ ВИПРАВЛЕННЯ: ЗАДАЄМО ВІДНОСНЕ ПОЗИЦІОНУВАННЯ !!! */
    position: relative !important; 
}

/* --- КОРЕКТНА РОБОТА SWIPER --- */

/* Гарантуємо, що слайди розташовуються горизонтально */
.html-slider-container .swiper-wrapper {
    position: relative; 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
    display: flex !important; 
    box-sizing: content-box;
    transition-property: transform; 
}

/* Гарантуємо, що слайд займає повну ширину */
.html-slider-container .swiper-slide {
    flex-shrink: 0; 
    /*width: 100% !important; */
    height: 100%;
    position: relative; 
    transition-property: transform; 
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 3. Налаштування відображення зображення (Адаптивність) */
.html-slider-container img {
    max-width: 100% !important; 
    width: auto !important; 
    max-height: 100% !important;
    height: auto !important;
    object-fit: contain; 
}

/* --- СТИЛІ ДЛЯ ПАГІНАЦІЇ (ТОЧОК) --- */

.swiper-pagination {
    /* !!! КЛЮЧОВЕ: ПОВИНЕН БУТИ ABSOLUTE, щоб позиціонуватися відносно RELATIVE батька !!! */
    position: absolute; 
    left: 0; /* Вирівнюємо по лівому краю */
    right: 0; /* Вирівнюємо по правому краю */
    text-align: center;
    transition: 0.3s opacity;
    transform: translate3d(0, 0, 0);
    z-index: 10;
    bottom: 5px; /* Трохи піднімаємо над краєм контейнера */
}

.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 50%;
    background: #000;
    opacity: 0.5;
    margin: 0 4px;
    cursor: pointer;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background: #000;
}