/* ==========================================================================
   Специфичные стили для страниц single-tours и page-tours
   ========================================================================== */

/* 1. Меняем цвет текста по умолчанию на этих страницах на темный (если изначально он был светлым) */
.single-tours .header,
.page-tours .header,
.page-template-page-tours .header {
  color: #1d2d3a; /* Темный оттенок (можете заменить на вашу переменную, например, var(--color-dark)) */
}

/* Обязательно добавляем цвет (color) в свойство transition, чтобы текст темнел/светлел плавно */
.single-tours .header,
.page-tours .header,
.page-template-page-tours .header {
  transition-property:
    background-color,
    box-shadow,
    backdrop-filter,
    -webkit-backdrop-filter,
    color; /* Добавлено */
}

/* 2. Изменяем состояние при скролле (is-scrolled) на более голубоватое и темное */
.single-tours .header.is-scrolled,
.page-tours .header.is-scrolled,
.page-template-page-tours .header.is-scrolled {
  /* Глубокий темно-голубой/синий цвет с прозрачностью */
  background-color: rgba(24, 38, 51, 0.85); 
  
  /* Текст внутри шапки при скролле делаем еще темнее или наоборот контрастным, 
     но раз фон стал темнее, текст логично сделать светлым, либо оставить темным на чуть более светлом голубом.
     Если элементы должны быть ТЕМНЫМИ, то фон должен быть СВЕТЛО-голубым.
     
     ВАРИАНТ А: Если элементы ТЕМНЕЮТ, то фон делаем СВЕТЛО-голубым: */
  background-color: rgba(220, 234, 242, 0.82); /* Светло-голубой */
  color: #0f1c26; /* Очень темный текст и бургер */
  
  box-shadow: 0 10px 36px rgba(15, 28, 38, 0.15); /* Мягкая темная тень */
}

/* 3. Меняем поведение ссылок при ховере на этих страницах */
.single-tours .header__nav-link:hover,
.page-tours .header__nav-link:hover,
.page-template-page-tours .header__nav-link:hover {
  color: #0066cc; /* Синий/голубой акцент при наведении вместо кремового */
}

/* 4. Корректируем фокус для бургера на этих страницах, чтобы рамка не была кремовой */
.single-tours .header__burger:focus-visible,
.page-tours .header__burger:focus-visible,
.page-template-page-tours .header__burger:focus-visible {
  outline: 2px solid #0066cc;
}

/* ==========================================================================
   Перекрашивание белого IMG-логотипа в темный на страницах туров
   ========================================================================== */

/* 1. На страницах туров делаем белый логотип темным по умолчанию */
.single-tours .logo__image,
.page-tours  .logo__image,
.page-template-page-tours .logo__image
{
  /* invert(1) превращает белый в черный, а brightness(0.15) подгоняет под цвет текста */
  filter: invert(1) brightness(0.15);
  
  /* Плавный переход при скролле */
  transition: filter var(--transition-duration, 0.3s) ease;
}

/* 2. При скролле (на светло-голубом фоне) делаем его еще темнее и контрастнее */
.single-tours .header.is-scrolled .logo__image {
  filter: invert(1) brightness(0.06);
}

/* ==========================================================================
   Светлый фон для бургер-меню (оверлея) на страницах туров
   ========================================================================== */

/* 1. Меняем фон самого оверлея на страницах туров */
.single-tours .header__overlay,
.page-tours .header__overlay,
.page-template-page-tours .header__overlay {
  background-color: #dceaec; /* Твой фирменный светло-голубой цвет, либо rgba(220, 234, 242, 0.98) для легкой прозрачности */
}

/* 2. Перекрашиваем текст ссылок меню в темный цвет */
.single-tours .header__overlay .header__nav-link,
.page-tours .header__overlay .header__nav-link,
.page-template-page-tours .header__overlay .header__nav-link {
  color: #0f1c26 !important; /* Насильно делаем текст темным, чтобы он не сливался со светлым фоном */
}

/* Активная ссылка в оверлее на страницах туров */
.single-tours .header__overlay .header__nav-link--active,
.page-tours .header__overlay .header__nav-link--active,
.page-template-page-tours .header__overlay .header__nav-link--active {
  color: #0066cc !important; /* Выделяем активный пункт сине-голубым */
}

/* =========================================================
   БАЗОВЫЕ СТИЛИ МОДАЛКИ И ОКРУЖЕНИЯ
========================================================= */
.modal-callback {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    z-index: 100;
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal-callback.is-open {
    opacity: 1; visibility: visible;
}
.modal-callback__overlay {
    position: absolute;
    width: 100%; height: 100%;
    background-color: rgba(29, 35, 28, 0.4);
    backdrop-filter: blur(4px);
    z-index: 1;
}

/* Первоначальная сцена Pixel Perfect */
.modal-callback__scene {
    position: relative;
    width: 100%;
    max-width: 800px;  /* По ширине огромной подложки */
    height: 855px;     /* По высоте огромной подложки */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* =========================================================
   ПИРОГ СЛОЕВ (Z-INDEX) ПО ТВОИМ РАЗМЕРАМ
========================================================= */

/* СЛОЙ 1: Огромная декоративная бумага (Самый низ) */
.modal-deck__bg-paper {
    position: absolute;
    top: 80px;
    left: 26px;
    width: 720px;
    height: 720px;
    background-image: url('https://xn--80aej3aodgdfei1c.xn--p1ai/wp-content/uploads/2026/06/Group-7108-1.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 10;
    filter: drop-shadow(0px 15px 40px rgba(29, 35, 28, 0.15));
    pointer-events: none;
}

/* СЛОЙ 2: Правый цветок */
.modal-deck__flower-right {
    position: absolute;
    bottom: -6px;
    right: -243px;
    width: 600px;
    height: 100%;
    background-image: url('https://xn--80aej3aodgdfei1c.xn--p1ai/wp-content/uploads/2026/06/17.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom right;
    z-index: 20;
    pointer-events: none;
}

/* СЛОЙ 3: Вторая рабочая бумага с контентом */
.modal-callback__wrapper {
    position: relative;
    width: 100%;
    max-width: 540px; 
    height: 620px; /* Фиксируем высоту, чтобы CF7 не сжимал пропорции рваного листа */
    padding: 60px 55px 45px 55px;
    
    /* Внутреннее выравнивание элементов по вертикали */
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    background-image: url('https://xn--80aej3aodgdfei1c.xn--p1ai/wp-content/uploads/2026/06/Subtract.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    
    z-index: 30; 
}

/* СЛОЙ 4: Левый цветок (Самый верх) */
.modal-deck__flower-left {
    position: absolute;
    top: 80px; 
    left: 90px; 
    width: 130px; 
    height: 130px;
    background-image: url('https://xn--80aej3aodgdfei1c.xn--p1ai/wp-content/uploads/2026/06/16.png');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 40; 
    pointer-events: none;
}

/* =========================================================
   СТИЛИ ВНУТРЕННИХ ЭЛЕМЕНТОВ И ИСПРАВЛЕНИЕ ОШИБОК CF7
========================================================= */
.modal-callback__close {
    position: absolute;
    top: 40px; right: 40px;
    background: none; border: none; cursor: pointer; padding: 5px;
    z-index: 50;
}
.modal-callback__title {
    font-size: 44px; color: #1D231C; margin: 0 0 8px 0; font-weight: 400;
}
.modal-callback__subtitle {
    font-size: 15px; color: #1D231C; opacity: 0.8; margin: 0 0 25px 0;
}
.modal-form__field { margin-bottom: 18px; }

/* Поля ввода */
.modal-form__input {
    width: 100%; border: none !important; border-bottom: 1px solid rgba(29, 35, 28, 0.2) !important;
    background: transparent !important; padding: 8px 0 !important; font-size: 16px; color: #1D231C;
    outline: none; box-shadow: none !important; border-radius: 0 !important;
}
.modal-form__input:focus { border-bottom-color: #1D231C !important; }
.modal-form__label { display: block; font-size: 14px; color: #1D231C; opacity: 0.7; margin-bottom: 10px; }

/* Радиокнопки: исправляем перенос и уродливые изломы текста */
.modal-form__radio-group { 
    display: flex; 
    flex-direction: column; /* Элементы выстраиваются списком сверху вниз */
    gap: 12px; 
}
.modal-form__radio-group .wpcf7-list-item {
    margin: 0 !important;
    display: block !important;
}
.modal-form__radio-group label { 
    display: flex; 
    align-items: flex-start; 
    cursor: pointer; 
    font-size: 15px; 
    color: #1D231C; 
    line-height: 1.3;
}
.modal-form__radio-group input[type="radio"] { 
    margin-top: 3px;
    margin-right: 10px; 
    flex-shrink: 0; /* Чтобы кружочек радиокнопки не сжимался */
    accent-color: #5A1F22; 
}

/* Кнопка «Подать заявку» */
.button--submit {
    display: block; width: 100%; background-color: #5A1F22 !important; color: #FFFFFF !important;
    border: none; border-radius: 30px; padding: 14px 30px; font-size: 16px; font-weight: 500;
    cursor: pointer; transition: background-color 0.2s ease; margin-top: 20px;
}
.button--submit:hover { background-color: #421416 !important; }

/* Согласие / Чекбокс */
.modal-form__field--acceptance { margin-top: 15px; }
.modal-form__field--acceptance label { display: flex; align-items: flex-start; font-size: 13px; color: #1D231C; line-height: 1.4; }
.modal-form__field--acceptance input[type="checkbox"] { margin-top: 3px; margin-right: 10px; flex-shrink: 0; accent-color: #5A1F22; }
.modal-form__field--acceptance a { color: #1D231C; text-decoration: underline; }

/* =========================================================
   ИСПРАВЛЕНИЕ РАДИОКНОПОК С ПРАВИЛЬНЫМ ПЕРЕНОСОМ ТЕКСТА
========================================================= */

/* Контейнер для обеих кнопок (выстраиваем их в ряд) */
#js-modal-callback .modal-form__radio-group { 
    display: flex !important; 
    flex-direction: row !important; 
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: flex-start !important; /* Выравнивание пунктов по верхней линии */
    gap: 20px !important; /* Отступ между первой и второй кнопкой */
    width: 100% !important;
    max-width: 100% !important;
}

/* Каждый отдельный пункт */
#js-modal-callback .modal-form__radio-group .wpcf7-list-item {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: flex-start !important; /* Точка ровняется по первой строчке текста */
    justify-content: flex-start !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Специфичный хак для второго (последнего) пункта, чтобы заставить его перенестись */
#js-modal-callback .modal-form__radio-group .wpcf7-list-item.last {
    max-width: 220px !important; /* Ограничиваем ширину, чтобы скобки улетели вниз */
    width: 100% !important;
}

/* Кругляшок радиокнопки */
#js-modal-callback .modal-form__radio-group .wpcf7-list-item input[type="radio"] { 
    margin: 2px 8px 0 0 !important; /* Выравниваем точку четко по центру первой строки */
    flex-shrink: 0 !important;
    width: 16px !important;
    height: 16px !important;
    accent-color: #5A1F22 !important; 
}

/* Текст лейбла внутри радиокнопок */
#js-modal-callback .modal-form__radio-group .wpcf7-list-item-label {
    font-size: 15px !important; 
    color: #1D231C !important; 
    line-height: 1.3 !important; /* Даем комфортный межстрочный интервал для переноса */
    white-space: normal !important; /* РАЗРЕШАЕМ перенос слов */
    display: inline-block !important;
}

/* =========================================================
   АДАПТИВНОСТЬ
========================================================= */

@media (max-width: 820px) {
    /* 1. Сцена занимает больше пространства на мобильном экране */
    .modal-callback__scene {
        width: 100%;
        max-width: 620px; /* Увеличиваем общую ширину сцены */
        height: auto;
        min-height: 100vh; /* Даем форме дышать по вертикали */
        padding: 40px 10px;
        box-sizing: border-box;
    }

    /* 2. Декоративная фоновая бумага (Самый нижний слой) */
    .modal-deck__bg-paper {
        top: 111px;
        left: -100px;
        background-size: contain;
        transform: scale(1.05);
    }

    /* 3. Обертка с контентом (Рваный лист Subtract) */
    .modal-callback__wrapper {
        width: 96% !important; /* Делаем форму максимально широкой на мобилке */
        max-width: 480px !important; 
        height: auto !important; /* УБИРАЕМ фиксированные 620px, чтобы лист не вытягивался искусственно */
        min-height: 540px !important; /* Минимальная планка, чтобы сохранить пропорции рваного края */
        
        /* Уменьшаем огромные десктопные паддинги (освобождаем место для инпутов) */
        padding: 50px 32px 40px 32px !important; 
        
        /*background-size: 100% 100%; оставляем, чтобы лист тянулся за контентом */
    }

    /* 4. Корректируем цветы, чтобы они не улетали за границы экрана */
    .modal-deck__flower-right {
        right: -85px;
        bottom: 31px;
        width: 280px;
        height: 350px;
        background-position: bottom right;
    }

    .modal-deck__flower-left {
        top: 136px;
        left: -7px;
        width: 80px;
        height: 80px;
    }
    /* 5. Кнопка закрытия на мобилках */
    .modal-callback__close {
        top: 25px;
        right: 25px;
    }

    /* 6. Поля формы — даем им полную ширину без зажатий */
    .modal-form__field {
        width: 100% !important;
        margin-bottom: 16px;
    }

    /* Тексты */
    .modal-callback__title {
        font-size: 32px !important; /* Немного уменьшаем заголовки, чтобы они не переносились уродливо по одному слову */
        line-height: 1.2;
    }
    .modal-callback__subtitle {
        font-size: 14px !important;
        margin-bottom: 20px;
    }

    /* 7. Радиокнопки на мобилках */
    #js-modal-callback .modal-form__field--radio .modal-form__radio-group { 
        flex-direction: column !important; /* На мелких экранах пускай идут аккуратным списком */
        gap: 12px !important;
    }
    #js-modal-callback .modal-form__field--radio .wpcf7-list-item.last {
        max-width: 100% !important; /* Сбрасываем десктопное ограничение */
    }
}

/* Экстремально маленькие экраны (iPhone SE и т.д.) */
@media (max-width: 414px) {
    .modal-callback__scene {
        padding: 20px 5px;
    }
    .modal-callback__wrapper {
        padding: 45px 20px 35px 20px !important; /* Еще сильнее жмем паддинги, спасая ширину инпутов */
    }
    .modal-callback__title {
        font-size: 28px !important;
    }
    .modal-deck__flower-right {
		right: -121px;
    }
}