/*
Theme Name: Eskort Moskva
Theme URI: https://eskort-moskva.com
Author: eskort-moskva
Author URI: https://eskort-moskva.com
Description: eskort-moskva
Version: 1.0
*/

.fade-in {
    opacity: 0;
    /* Элемент невидим по умолчанию */
    transform: translateY(20px);
    /* Смещение вниз */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    /* Анимация плавного появления */
}

.fade-in.show {
    opacity: 1;
    /* Элемент становится видимым */
    transform: translateY(0);
    /* Возврат в исходное положение */
}

.main-image {
    max-height: 500px;
}

.main-image img {
    height: 500px;
}

/*Перезадание стилей для выпадающего меню хэдера для */
.dropdown-menu.show {
    position: absolute !important;
    inset: 0px auto auto 0px !important;
    margin: 0px !important;
    transform: translate(0px, 60px) !important;
}

/* Отображение выпадающего меню при наведении */

.navigation::after {
    display: inline-block;
    margin-left: 8px;
    /* Отступ от текста */
    transition: transform 0.3s ease;
    /* Плавный переход */
}

.navigation.collapsed::after {
    transform: rotate(0deg);
    /* Стрелка вниз, когда меню свернуто */
}

.navigation:not(.collapsed)::after {
    transform: rotate(180deg);
    /* Стрелка вверх, когда меню развернуто */
}

.nav-item.dropdown:hover .dropdown-menu {
    display: block;
    /* Показываем выпадающее меню */
}

/* Убираем анимацию появления/скрытия от Bootstrap */
.navbar .dropdown-menu {
    margin-top: 0;
    /* Убираем сдвиг */
}

/* Анимация для поворота треугольника при наведении */
.nav-link.dropdown-toggle::after {
    transition: transform 0.3s ease;
    /* Плавная анимация */
    display: inline-block;
}

.nav-item.dropdown:hover>.dropdown-menu {
    display: block;
    /* Показываем меню */
    position: absolute;
    /* Абсолютное позиционирование */
}

/* Переворот стрелки при наведении на .nav-item */
.nav-item.dropdown:hover>.nav-link::after {
    transform: rotate(180deg);
    /* Переворот стрелки вверх */
}

.a:not(.collapsed)>.navigation.dropdown-toggle::after {
    transform: rotate(180deg);
    /* Переворот треугольника вверх */
}



a:hover .svg-icon path {
    fill: black;
}

.product-gallery {
    max-width: 470px;
    /* Ограничиваем ширину блока галереи */
}

/* Настройка изображений в карусели */

#carouselFade .carousel-item img {
    width: 470px;
    /* Фиксированная ширина изображения */
    height: 564px;
    /* Фиксированная высота изображения */
    object-position: center;
    /* Центрирование изображения в контейнере */
}

.product-thumbnails .thumbnail {
    cursor: pointer;
    /* Курсор указателя при наведении */
}

/* Задаем фиксированные размеры для модального окна */
#customImageModal .modal-dialog {
    max-width: 900px;
    /* Максимальная ширина карусели для больших экранов */
    max-height: 100%;
}

/* Логотип */
.logo {
    width: 65px;
    height: 48px;
    /* Корректная высота для масштаба */
}

/* Карточки товара */
.product-card {
    width: 365px;
    /* Фиксированная ширина изображения */
    height: 440px;
    /* Фиксированная высота изображения */
}

.product-card a img {
    max-height: 600px;
    min-width: 100%;
    /* Фиксированная ширина изображения */
    min-height: 100%;
    /* Фиксированная высота изображения */
}

.card-img-overlay {
    top: auto;

}

/* Исправление проблемы с размерами SVG и другими элементами */
.svg-container {
    width: 40px;
    /* Задайте ширину контейнера SVG */
    height: 40px;
    /* Задайте высоту контейнера SVG */
}

.svg-container svg {
    width: 100%;
    /* SVG будет занимать всю ширину контейнера */
    height: 100%;
    /* SVG будет занимать всю высоту контейнера */
}

/* Стили для миниатюр с эффектом свечения */
.product-thumbnails .thumbnail img {
    width: 100px;
    /* Ширина миниатюры */
    height: 100px;
    /* Высота миниатюры */
    border: 2px solid #fce181;
    /* Постоянная видимая обводка */
    border-radius: 8px;
    /* Закругленные углы */
    box-shadow: 0 0 10px rgba(252, 225, 129, 0.7);
    /* Постоянное свечение */
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    /* Плавная анимация обводки и масштабирования */
}

/* Усиленное свечение и масштабирование при наведении */
.product-thumbnails .thumbnail img:hover {
    transform: scale(1.05);
    /* Небольшое увеличение для акцента */
    box-shadow: 0 0 20px 5px rgba(252, 225, 129, 1), 0 0 10px rgba(252, 225, 129, 0.7);
    /* Усиленное свечение */
}

/* Светящаяся обводка для изображения */
.glow-border {
    border-radius: 8px;
    /* Закругленные углы */
    box-shadow: 0 0 10px rgba(252, 225, 129, 0.7);
    /* Постоянное свечение */
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    /* Плавная анимация обводки и масштабирования */
}

/* Усиленное свечение и масштабирование при наведении */
.glow-border:hover {
    transform: scale(1.05);
    /* Небольшое увеличение для акцента */
    box-shadow: 0 0 20px 5px rgba(252, 225, 129, 1), 0 0 10px rgba(252, 225, 129, 0.7);
    /* Усиленное свечение */
}

.glow-button {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    /* Плавная анимация для кнопок */
}

/* Свечение при наведении на кнопки */
.glow-button:hover {
    transform: scale(1.05);
    /* Небольшое увеличение */
    box-shadow: 0 0 15px 5px rgba(255, 255, 255, 0.8);
    /* Белое свечение */
    mix-blend-mode: difference;
    /* Инвертирует цвет подсветки относительно фона */
}

/* Свечение для кнопок */
.glow-btn {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    /* Плавная анимация для кнопок */
}

/* Свечение при наведении на кнопки */
.glow-btn:hover {
    transform: scale(1.05);
    /* Небольшое увеличение */
    box-shadow: 0 0 15px 5px rgba(255, 193, 7, 0.8);
    /* Желтое свечение вокруг кнопок */
}

/* Дополнительные стили для overlay и текста */
.dark-overlay {
    background: rgba(0, 0, 0, 0.5);
    /* Полупрозрачный фон */
    border-radius: 8px;
}


@media (max-width: 990px) {

    /* Смартфоны (меньше 768px) пиздит гпт  */
    .responsive-rounded {
        border-top-left-radius: 1rem;
        /* Скругление верхнего левого угла */
        border-top-right-radius: 1rem;
        /* Скругление верхнего правого угла */
    }
}

.img-custom {
    width: 300px;
    height: 400px;
}

@media (max-width: 720px) {

    #carouselFade {
        height: 65vh;
    }
}

.btn-my {
    padding: 12px 30px;
    border-radius: 10px;
    border: 0;
    background-color: #FEF9C7;
    letter-spacing: 1.5px;
    font-size: 22px;
    transition: all 0.3s ease;
    box-shadow: #FFF9B9 0px 10px 0px 0px;
    color: hsl(0, 0%, 100%);
    cursor: pointer;
    font-weight: 600;
    border-bottom: 2px solid #9fedd7;
}

.btn-my:hover {
    box-shadow: #FFF9B9 0px 7px 0px 0px;
}

.btn-my:active {
    background-color: #FFF8AD;
    /*50, 168, 80*/
    box-shadow: #FFF9B9 0px 0px 0px 0px;
    transform: translateY(5px);
    transition: 200ms;
}

.form_area {
    background-color: #EDDCD9;
    border: 2px solid #264143;
    border-radius: 20px;
    box-shadow: 3px 4px 0px 1px #E99F4C;
    padding: 20px;
}

.form_style {
    box-shadow: 3px 4px 0px 1px #E99F4C;
    border: 2px solid #264143;
}

.form_style:focus,
.btn-form:focus {
    transform: translateY(4px);
    box-shadow: 1px 2px 0px 0px #E99F4C;
}

.btn-form {
    box-shadow: 3px 3px 0px 0px #E99F4C;
    background-color: #DE5499;
    font-weight: 800;
}

.btn-form:hover {
    opacity: 0.9;
    background-color: #EA64A7;
}


#scrollToTopButton {
    bottom: 1.5rem;
    /* Отступ от низа страницы */
    right: 1.5rem;
    /* Отступ от левого края страницы */
    width: 4rem;
    height: 4rem;
    opacity: 0;
    /* Начальное значение прозрачности */
    z-index: 1030;
    /* Поверх всех элементов */
}

#scrollToTopButton.fade-in {
    opacity: 1;
    /* Видимость кнопки */
}