/* === Стилизация слайдера на Tailwind === */

/* Контейнер слайдера */
#main_slider {
    @apply w-full rounded-2xl overflow-hidden shadow-[0_10px_30px_-5px_rgba(0,0,0,0.1)] aspect-video relative bg-gray-900;
	position: relative;
    z-index: 0;
}

/* Контейнер слайдов */
.slides-container {
    @apply relative w-full h-full;
	position: relative;
    z-index: 0;
}

/* Сам слайд */
.slide {
    @apply w-full h-full absolute top-0 left-0 bg-cover bg-center;
}

/* Текстовый блок на слайдере */
.slide .content {
    @apply absolute bottom-0 left-0 w-full px-[5%] pb-[30px] pt-[40px] z-5 text-left max-w-3xl;
}

.slide .content h3 {
    @apply text-white text-3xl font-semibold mb-3 drop-shadow-lg leading-tight;
}

.slide .content p {
    @apply text-white/90 text-lg mb-4;
}

/* Кнопка "Подробнее" */
.slide .content a.button {
    @apply inline-block bg-[#883F52] text-white px-6 py-2.5 rounded-full text-base font-medium no-underline transition-all duration-300 hover:bg-[#A0576A] hover:-translate-y-0.5 hover:shadow-[0_5px_15px_rgba(136,63,82,0.4)];
}

/* Стрелки навигации */
#prev-btn,
#next-btn {
    @apply absolute top-1/2 -translate-y-1/2 w-11 h-11 rounded-full bg-white/90 opacity-0 transition-all duration-300 shadow-[0_4px_10px_rgba(0,0,0,0.1)] z-10 flex items-center justify-center hover:bg-[#883F52];
}

#prev-btn {
    @apply left-5;
}

#next-btn {
    @apply right-5;
}

#prev-btn svg,
#next-btn svg {
    @apply w-4 h-4 fill-[#883F52] transition-all;
}

#prev-btn:hover svg,
#next-btn:hover svg {
    @apply fill-white;
}

/* Точки навигации (Pagination) */
#pagination {
    @apply absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-1.5 z-10;
}

.pagination-dot {
    @apply w-2.5 h-2.5 bg-white/50 rounded-full transition-all duration-300 cursor-pointer;
}

.pagination-dot.active {
    @apply bg-[#883F52] scale-125;
}

/* Анимации слайдов */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-100%);
    }
}

.slide-enter {
    animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.slide-exit {
    animation: slideOut 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.slide-hidden {
    display: none;
}

/* Показываем стрелки при наведении на слайдер */
#main_slider:hover #prev-btn,
#main_slider:hover #next-btn {
    @apply opacity-100;
}

/* === Адаптив слайдера под мобильные устройства === */
    @media (max-width: 768px) {
        /* 1. Отодвигаем контент вверх, чтобы он не налезал на стрелки */
        #main_slider .content {
            padding-bottom: 70px !important; /* Было 30px */
            padding-top: 20px !important;    /* Было 40px */
        }

        /* 2. Уменьшаем размер заголовка */
        #main_slider .content h3 {
            font-size: 1.25rem !important; /* Эквивалент text-xl */
            line-height: 1.3 !important;
            margin-bottom: 0.5rem !important;
        }

        /* 3. Делаем кнопку меньше */
        #main_slider .content .button {
            font-size: 0.875rem !important; /* Эквивалент text-sm */
            padding: 0.5rem 1rem !important; /* Меньший padding */
        }

        /* 4. Расширяем контейнер с индикаторами, чтобы они не были микроскопическими */
        #main_slider .indicators-container {
            max-width: 60% !important; /* Было 40% */
        }

        /* 5. Немного уменьшаем стрелки, чтобы они не перекрывали текст */
        #main_slider .slider-controls-wrapper button {
            width: 36px !important;
            height: 36px !important;
            font-size: 18px !important;
        }

        /* 6. Поднимаем стрелки чуть выше, чтобы они не вылезали за край */
        #main_slider .slider-controls-wrapper {
            bottom: 12px !important;
        }
    }

    /* === Дополнительно для очень маленьких экранов (до 480px) === */
    @media (max-width: 480px) {
        #main_slider .content h3 {
            font-size: 1.1rem !important;
        }
        
        /* Сокращаем отступы по бокам, чтобы текст влезал */
        #main_slider .content {
            padding-left: 20px !important;
            padding-right: 20px !important;
        }
        
        /* Индикаторы еще немного шире */
        #main_slider .indicators-container {
            max-width: 65% !important;
        }
    }
/* === Базовый фикс: поднимаем контент выше стрелок на всех экранах === */
    #main_slider .content {
        padding-bottom: 80px !important; /* Было 30px. 80px достаточно, чтобы очистить зону со стрелками */
    }

    /* === Адаптив слайдера под мобильные устройства === */
    @media (max-width: 768px) {
        /* 1. Дополнительно отодвигаем контент на мобилках */
        #main_slider .content {
            padding-bottom: 70px !important; 
            padding-top: 20px !important;    
        }

        /* 2. Уменьшаем размер заголовка */
        #main_slider .content h3 {
            font-size: 1.25rem !important;
            line-height: 1.3 !important;
            margin-bottom: 0.5rem !important;
        }

        /* 3. Делаем кнопку меньше */
        #main_slider .content .button {
            font-size: 0.875rem !important; 
            padding: 0.5rem 1rem !important; 
        }

        /* 4. Расширяем контейнер с индикаторами */
        #main_slider .indicators-container {
            max-width: 60% !important; 
        }

        /* 5. Немного уменьшаем стрелки */
        #main_slider .slider-controls-wrapper button {
            width: 36px !important;
            height: 36px !important;
            font-size: 18px !important;
        }

        /* 6. Поднимаем стрелки чуть выше */
        #main_slider .slider-controls-wrapper {
            bottom: 12px !important;
        }
    }

    /* === Для очень маленьких экранов === */
    @media (max-width: 480px) {
        #main_slider .content h3 {
            font-size: 1.1rem !important;
        }
        #main_slider .content {
            padding-left: 20px !important;
            padding-right: 20px !important;
            padding-bottom: 65px !important; /* Чуть плотнее на узких экранах */
        }
        #main_slider .indicators-container {
            max-width: 65% !important;
        }
    }