/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/


.wd-header-nav li>a>span  { font-size: 16px; text-transform: none; }
.wd-header-nav  { background-color: white;    border-radius: 10px; padding: 5px 25px; }
.knop {     padding: 16px 25px; font-size: 14px;     border-radius: 10px;  }

/* Базовый класс кнопки */
.knop {
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.3s ease-in-out !important;
    transform: translateZ(0); /* Для плавности на мобильных */
}

/* Элемент блика */
.knop::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    transition: none;
}

/* Блик запускается при наведении */
.knop:hover::after {
    left: 150%;
    transition: all 0.8s ease-in-out !important;
}

/* Плавный подъем кнопки вверх и тень при наведении */
.knop:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(196, 98, 43, 0.4) !important; /* Мягкое оранжевое свечение */
}




/* Базовое состояние логотипа */
.whb-main-header .wd-main-logo > img {
    /* Добавляем transform в transition для плавного уменьшения размера */
    transition: filter 0.3s ease, transform 0.3s ease !important;
    
    /* Точка трансформации, чтобы логотип "сжимался" к левому краю, а не улетал в центр */
    transform-origin: left center !important; 
}



/* Состояние при прилипании (липкое меню) */
.whb-sticked .wd-main-logo > img {
    /* 1. Точный CSS-фильтр для преобразования белого/черного в цвет #54595F */
    filter: brightness(0) saturate(100%) invert(35%) sepia(9%) saturate(723%) hue-rotate(172deg) brightness(94%) contrast(88%) !important;
    
    /* 2. Уменьшаем размер на 25% (остается 75% от оригинала) */
    transform: scale(0.85) !important;
}

.telhed a  {     color: white;
    font-size: 20px;
    font-weight: 600; }
.whb-sticked 	.telhed  a {     color: black; } 

/* Стили для самих элементов списка (плашек) */
.herolist .elementor-icon-list-item {
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 10px !important;
    padding: 10px 20px !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important; /* Для поддержки Safari */
    transition: background-color 0.3s ease !important;
    cursor: default;
	    margin-bottom: 8px;
    margin-right: 0;
}

/* Эффект при наведении (фон становится чуть светлее) */
.herolist .elementor-icon-list-item:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Стили для текста внутри плашек */
.herolist .elementor-icon-list-text {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
}


/* Начало: Стиль для подзаголовка с рыжими линиями по бокам (.titleorangelines) */
.titleorangelines {
    display: inline-flex;
    align-items: center;
    gap: 16px; /* Расстояние между текстом и линиями */
    color: #b35a22; /* Рыжий цвет текста (Акцентный) */
    font-family: 'Manrope', sans-serif; /* Шрифт как в проекте */
    font-size: 14px; 
    font-weight: 700; /* Жирное начертание */
    text-transform: uppercase; /* Все буквы заглавные */
    letter-spacing: 0.1em; /* Увеличенное межбуквенное расстояние */
    margin-bottom: 24px;
}

/* Левая и правая рыжие линии */
.titleorangelines::before,
.titleorangelines::after {
    content: "";
    display: block;
    width: 32px; /* Длина линии */
    height: 2px; /* Толщина линии */
    background-color: #b35a22; /* Цвет линии */
}

/* Поведение на мобильных устройствах (скрываем линии, как в оригинале) */
@media (max-width: 640px) {
    .titleorangelines::before,
    .titleorangelines::after {
        display: none;
    }
    .titleorangelines {
        font-size: 12px; /* Чуть меньше размер текста на смартфонах */
    }
}
/* Конец: Стиль для подзаголовка с рыжими линиями по бокам (.titleorangelines) */


/* --- НАЧАЛО СТИЛЕЙ ДЛЯ МАЛЕНЬКОЙ ИКОНКИ PET-FRIENDLY --- */
.paw-icon .wd-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px !important;  /* Размеры круглого фона */
    height: 40px !important;
    border-radius: 50% !important; /* Идеальный круг */
    /* background-color: #EEF2ED; - вы написали, что фон уже залили, но если что - вот его код (bg-sage) */
}

/* Оформляем саму картинку внутри круга */
.paw-icon img {
    width: 20px !important; /* Уменьшаем саму лапку */
    height: 20px !important;
    object-fit: contain;
    
    /* Магия CSS-фильтров: превращаем абсолютно черный цвет картинки в рыжий (#b35a22) */
    filter: invert(44%) sepia(34%) saturate(2462%) hue-rotate(352deg) brightness(85%) contrast(93%) !important;
}
/* --- КОНЕЦ СТИЛЕЙ МАЛЕНЬКОЙ ИКОНКИ --- */


.bg-paw  { 
    background-repeat: no-repeat;
    background-size: 128px;
    background-position: 105% 123%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EEF2ED' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='4' r='2'/%3E%3Ccircle cx='18' cy='8' r='2'/%3E%3Ccircle cx='20' cy='16' r='2'/%3E%3Cpath d='M9 10a5 5 0 0 1 5 5v3.5a3.5 3.5 0 0 1-6.84 1.045Q6.52 17.48 4.46 16.84A3.5 3.5 0 0 1 5.5 10Z'/%3E%3C/svg%3E");
 }


/* Начало стилей для блока с размытием (цифры скидки) */
.blurblock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  padding: 10px 15px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}
/* Конец стилей для блока с размытием */


/* Оформление плашки источника (Яндекс, Отзовик) */
.review-source-badge {
  background-color: #FBF9F6; 
  color: #8C938E; 
  border: 1px solid rgba(0, 0, 0, 0.05); 
  border-radius: 9999px; /* Делает форму "таблеткой" */
  padding: 6px 12px;
  font-family: "Inter", sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em; /* Широкий межбуквенный интервал */
  display: inline-block;
}




/* Анимация увеличения фона при наведении и настройка cover */
.backanim {
    overflow: hidden; /* Обрезаем края, чтобы при увеличении фон не выходил за пределы скруглений блока */
}

.backanim::before {
    background-size: cover !important; /* Убеждаемся, что фон всегда полностью заполняет блок, не обрезаясь криво */
    background-position: center center !important; /* Центрируем фоновое изображение */
    transition: transform 3s ease-out !important; /* Задаем плавность увеличения (3 секунды) */
    will-change: transform; /* Подсказка браузеру для более плавной анимации */
}

.backanim:hover::before {
    transform: scale(1.05); /* Легкое увеличение фона на 5% при наведении курсора */
}
/* Конец: Анимация увеличения фона при наведении и настройка cover */


/* Двойной темный градиент (сверху и снизу) поверх фона */
.doublegrad {
    position: relative; /* Устанавливаем точку отсчета для абсолютного позиционирования градиента */
}

.doublegrad::after {
    content: '';
    position: absolute;
    inset: 0; /* Растягиваем слой на всю ширину и высоту родителя */
    /* Линейный градиент: темный верх, прозрачный центр, темный низ */
    background: linear-gradient(
        to bottom, 
        rgba(0, 0, 0, 0.45) 0%,   /* Верхнее затемнение для читаемости заголовка */
        rgba(0, 0, 0, 0) 35%,     /* Плавный переход в прозрачность */
        rgba(0, 0, 0, 0) 65%,     /* Прозрачная середина фото */
        rgba(0, 0, 0, 0.85) 100%  /* Сильное нижнее затемнение для белого текста */
    );
    z-index: 0; /* Слой градиента находится над фоном (::before), но под контентом */
    pointer-events: none; /* Защита, чтобы градиент не перекрывал клики по внутренним элементам */
    border-radius: inherit; /* Наследуем скругления от главного контейнера карточки */
}

/* Поднимаем виджеты с контентом (текст, заголовки) поверх нашего градиента */
.doublegrad > .elementor-element {
    position: relative;
    z-index: 1; /* Контент всегда выше фона и градиента */
}
/* Конец: Двойной темный градиент (сверху и снизу) поверх фона */


.timed {
  display: inline-flex;
  align-items: center;
  background-color: var(--color-bg-sage);
  color: #b35a22;
  font-weight: 700;
  font-size: 16px;
  line-height: 1rem;
  padding: 0.25rem 0.75rem 0.25rem 2rem;
  border-radius: 9999px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23b35a22" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2"/><circle cx="7" cy="17" r="2"/><path d="M9 17h6"/><circle cx="17" cy="17" r="2"/></svg>');
  background-repeat: no-repeat;
  background-position: 0.5rem center; /* Позиционирование иконки слева по центру */
  border: 1px solid rgba(179, 90, 34, 0.3);
}





/* Галерея: вкладки Лето / Зима */
.belkinogal .elementor-gallery__titles-container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 48px !important;
}

/* Кнопки вкладок */
.belkinogal .elementor-gallery__titles-container .elementor-item {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  padding: 12px 32px !important;
  border-radius: 9999px !important;

  font-family: "Manrope", sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;

  background-color: #EFEBE5 !important;
  color: #8C938E !important;
  border: none !important;
  text-decoration: none !important;

  transition: all 0.3s ease-out !important;
  cursor: pointer !important;
}

/* Иконка через SVG mask */
.belkinogal .elementor-gallery__titles-container .elementor-item::before {
  content: "" !important;

  position: static !important;
  inset: auto !important;
  display: inline-block !important;

  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  flex: 0 0 18px !important;

  margin: 0 !important;
  padding: 0 !important;

  background-color: currentColor !important;
  border: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;

  -webkit-mask-size: contain !important;
  mask-size: contain !important;

  -webkit-mask-position: center !important;
  mask-position: center !important;

  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
}

/* Лето */
.belkinogal .elementor-gallery__titles-container .elementor-item[data-gallery-index="0"]::before {
  -webkit-mask-image: url("https://belkino-domiki.ru/wp-content/uploads/leto.svg") !important;
  mask-image: url("https://belkino-domiki.ru/wp-content/uploads/leto.svg") !important;
}

/* Зима */
.belkinogal .elementor-gallery__titles-container .elementor-item[data-gallery-index="1"]::before {
  -webkit-mask-image: url("https://belkino-domiki.ru/wp-content/uploads/zima-black.svg") !important;
  mask-image: url("https://belkino-domiki.ru/wp-content/uploads/zima-black.svg") !important;
}

/* Hover — Лето */
.belkinogal .elementor-gallery__titles-container .elementor-item[data-gallery-index="0"]:hover {
  background-color: rgba(179, 90, 34, 0.1) !important;
  color: #b35a22 !important;
}

/* Active — Лето */
.belkinogal .elementor-gallery__titles-container .elementor-item[data-gallery-index="0"].elementor-item-active {
  background-color: #b35a22 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(179, 90, 34, 0.3) !important;
}

/* Hover — Зима */
.belkinogal .elementor-gallery__titles-container .elementor-item[data-gallery-index="1"]:hover {
  background-color: rgba(59, 130, 246, 0.1) !important;
  color: #3b82f6 !important;
}

/* Active — Зима */
.belkinogal .elementor-gallery__titles-container .elementor-item[data-gallery-index="1"].elementor-item-active {
  background-color: #3b82f6 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

@media (max-width: 768px) {
  .belkinogal .elementor-gallery__titles-container .elementor-item {
    padding: 10px 24px !important;
    font-size: 14px !important;
  }

  .belkinogal .elementor-gallery__titles-container .elementor-item::before {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    flex-basis: 16px !important;
  }
}




/* Галерея: контейнер вкладок */
.simplegal .elementor-gallery__titles-container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  margin-bottom: 32px !important;
}

/* Кнопки вкладок (базовый неактивный вид) */
.simplegal .elementor-gallery__titles-container .elementor-item {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  padding: 8px 24px !important;
  border-radius: 9999px !important;
  border: 1px solid #e5e7eb !important; /* Легкая серая обводка */

  font-family: "Manrope", sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;

  background-color: #ffffff !important;
  color: #5E6861 !important; /* Приглушенный серый текст */
  text-decoration: none !important;

  transition: all 0.3s ease-out !important;
  cursor: pointer !important;
}

/* Наведение (Hover) для неактивных кнопок */
.simplegal .elementor-gallery__titles-container .elementor-item:hover {
  color: #1F2924 !important; /* Текст становится темнее */
  border-color: #d1d5db !important; /* Обводка чуть темнеет */
}

/* Активная вкладка (оранжевая) */
.simplegal .elementor-gallery__titles-container .elementor-item.elementor-item-active {
  background-color: #b35a22 !important; /* Оранжевый акцентный цвет */
  color: #ffffff !important; /* Белый текст */
  border-color: transparent !important; /* Убираем серую обводку */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important; /* Мягкая тень */
}

/* Мобильная версия */
@media (max-width: 768px) {
  .simplegal .elementor-gallery__titles-container .elementor-item {
    padding: 8px 20px !important;
    font-size: 14px !important;
  }
}





/* Начало блока стилей для FAQ аккордеона (.akbel) */

/* Оформление каждого блока вопроса-ответа с тенью и скруглениями */
.akbel .e-n-accordion-item {
  background-color: #ffffff !important;
  border-radius: 24px !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06) !important;
  margin-bottom: 20px !important;
  border: none !important;
  transition: box-shadow 0.3s ease !important;
}

/* Тень при наведении на весь блок */
.akbel .e-n-accordion-item:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1) !important;
}

/* Внутренние отступы для заголовка вопроса */
.akbel .e-n-accordion-item-title {
  padding: 24px 32px !important; 
}

/* Внутренние отступы для текста ответа */
.akbel .e-n-accordion-item > div[role="region"] {
  padding: 0 32px 24px 32px !important;
}

/* Оформление контейнера иконки: круглый фон, размеры и обводка */
.akbel .e-n-accordion-item-title-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 50% !important;
  background-color: #FBF9F6 !important; /* Светло-бежевый фон кружка */
  border: 1px solid rgba(179, 90, 34, 0.3) !important; /* Оранжевая полупрозрачная обводка */
  color: #b35a22 !important; /* Оранжевый цвет самой стрелочки */
  transition: all 0.3s ease !important;
}

/* Инверсия цветов иконки при открытом аккордеоне (активное состояние) */
.akbel .e-n-accordion-item[open] .e-n-accordion-item-title-icon {
  background-color: #b35a22 !important;
  color: #ffffff !important;
}

/* Управление размерами SVG стрелочки внутри кружка */
.akbel .e-n-accordion-item-title-icon svg {
  width: 18px !important;
  height: 18px !important;
  fill: currentColor !important;
}

/* Конец блока стилей для FAQ аккордеона (.akbel) */

.mapp iframe {     border-radius: 30px; }




/* === Оформление шапки мобильного меню === */

/* 1. Делаем шапку flex-контейнером, чтобы логотип и крестик встали по краям */
.mobile-nav.wd-side-hidden .wd-heading {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 20px 24px !important; /* Отступы как в макете */
    border-bottom: 1px solid #f0f0f0; /* Легкая линия разделения снизу */
}

/* 2. Вставляем логотип */
.mobile-nav.wd-side-hidden .wd-heading::before {
    content: "";
    display: block;
    width: 140px; /* Примерная ширина, чтобы сохранить пропорции */
    height: 40px; /* Ограничение по высоте, как ты просил */
    /* Ссылка на темный логотип: */
    background-image: url('https://belkino-domiki.ru/wp-content/uploads/logo-belka2-white-gor-h100.png');
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
}

/* 3. Убираем слово "Закрыть", оставляем только иконку крестика (как на макете) */
.mobile-nav.wd-side-hidden .wd-heading .wd-action-text {
    display: none !important;
}

/* 4. Центруем крестик, если у него остались лишние отступы от темы */
.mobile-nav.wd-side-hidden .wd-heading .close-side-widget {
    margin: 0 !important;
}

.mobile-nav.wd-side-hidden .wd-heading .wd-action-icon {
    /* Можно чуть увеличить крестик, если он мелковат */
    font-size: 18px !important; 
}






/* мобильные адаптации */
@media (min-width: 1175px) and (max-width: 1350px) {
.telhed a  {    font-size: 14px; }
}

@media  (max-width: 1175px) {
.telhed a  {    display: none; }
}






@media  (max-width: 440px) {
.rituali .blurblock, 
.blurblock.blackfon
 { background-color: #2A2F2B; }
 .mobile-nav.wd-side-hidden .wd-action-text  {     font-size: 14px; }
 .widgetarea-mobile  {     position: absolute; bottom: 0; }
}
















/* начало заглушки со стилями букинг блока Общий контейнер */
.hero-booking-form {
  margin-top: 40px;
  width: 100%;
  max-width: 1050px;
  background-color: #ffffff;
  padding: 8px;
  border-radius: 16px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

@media (min-width: 768px) {
  .hero-booking-form {
    flex-direction: row;
    align-items: center;
  }
}

/* Поля ввода (Заезд, Выезд, Гости) */
.booking-field {
  flex: 1;
  width: 100%;
  background-color: #FAFAFA; /* Цвет фона карточки (surface) */
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.3s ease;
}

.booking-field:hover {
  border-color: rgba(97, 206, 112, 0.5); /* #61CE70 с прозрачностью */
}

/* Тексты внутри полей */
.booking-info {
  display: flex;
  flex-direction: column;
}

.booking-label {
  font-family: inherit; /* Подхватит шрифт Elementor */
  font-size: 12px;
  color: #7A7A7A;
  font-weight: 500;
  margin-bottom: 2px;
}

.booking-value {
  font-family: inherit;
  font-size: 14px;
  color: #333333; /* Темный цвет текста */
  font-weight: 600;
}

/* Иконки */
.booking-icon {
  width: 20px;
  height: 20px;
  color: #7A7A7A;
  transition: color 0.3s ease;
}

.booking-field:hover .booking-icon {
  color: #61CE70; /* Акцентный цвет при наведении */
}

/* Кнопка */
.booking-btn {
  width: 100%;
  height: 58px;
  background-color: #61CE70;
  color: #ffffff;
  border-radius: 12px;
  padding: 12px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .booking-btn {
    width: auto;
    margin-right: 4px;
  }
}

.booking-btn:hover {
  background-color: #55b562; /* Немного темнее при наведении */
  transform: translateY(-2px);
}
/* конец заглушки со стилями букинг блока */