/* ============================================
   ОБЩИЕ СТИЛИ ДЛЯ БЛОКА ПОИСКА
   Используется на страницах Search и Hotel Details
   ============================================ */

/* === Search Hero Section === */
.search-hero {
    background: var(--color-white);
    padding: clamp(1rem, 2vw, 1.5rem) 0 clamp(0.5rem, 1vw, 1rem);
    margin: 0;
}

.search-hero__container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--container-padding);
}

/* === Стили для компактной формы поиска === */
.search-hero .hero-search .search-form__fields {
    display: grid !important;
    grid-template-columns: auto auto 280px auto !important; /* Поле "Гости" получает ширину 280px для размещения максимального текста */
    gap: 0.375rem !important; /* Одинаковый gap между всеми элементами */
    margin-bottom: 0 !important;
    align-items: end !important;
    justify-content: start !important; /* Выравниваем по левому краю вместо stretch */
    width: fit-content !important; /* Ширина по содержимому */
    max-width: 100% !important; /* Не выходим за пределы родителя */
}

.search-hero .hero-search .search-form {
    background: var(--color-white) !important;
    border-radius: clamp(0.5rem, 1.5vw, 1rem) !important;
    padding: clamp(0.5rem, 1vw, 0.75rem) !important; /* Возвращаем исходный padding для симметрии */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
    max-width: none !important; /* Убираем фиксированную ширину - ширина будет по содержимому */
    width: fit-content !important; /* Ширина по содержимому */
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* Выравниваем по левому краю */
}

.search-hero .hero-search .search-form__flexible-search {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* Выравниваем по левой стороне */
    margin-top: 0.5rem !important; /* Увеличиваем отступ сверху */
    padding-top: 0.5rem !important; /* Увеличиваем внутренний отступ сверху */
    padding-bottom: 0.5rem !important; /* Добавляем отступ снизу для баланса */
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    width: 100% !important; /* Занимаем всю ширину */
}

/* Стили для полей - выравниваем по левому краю */
.search-hero .hero-search .search-form__field {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* Выравниваем по левому краю */
    width: 100% !important; /* Занимаем всю доступную ширину */
}

/* Выпадающий список гостей - увеличиваем только его ширину */
.search-hero .hero-search .guests-dropdown {
    min-width: 350px !important; /* Увеличили минимальную ширину выпадающего списка для комфортного отображения */
    width: auto !important; /* Автоматическая ширина в зависимости от содержимого */
    left: 50% !important; /* Центрируем относительно родителя */
    right: auto !important; /* Отключаем right: 0 */
    transform: translateX(-50%) !important; /* Сдвигаем на половину своей ширины для центрирования */
}

/* Лейблы - выравниваем по левому краю */
.search-hero .hero-search .search-form__label {
    text-align: left !important; /* Выравниваем по левому краю */
    width: 100% !important;
}

/* Инпуты - выравниваем по левому краю */
.search-hero .hero-search .search-form__input {
    text-align: left !important; /* Выравниваем по левому краю */
    width: 100% !important;
    max-width: 100% !important;
}

/* Поле "Гости" - задаем минимальную ширину для размещения "2 взрослых, 1 детей, 1 младенцев" */
.search-hero .hero-search .search-form__field:nth-child(3) {
    min-width: 280px !important; /* Увеличили ширину для комфортного размещения максимального текста */
}

.search-hero .hero-search .search-form__field--guests-wrapper {
    width: 100% !important;
}

.search-hero .hero-search .search-form__guests-btn {
    text-align: left !important; /* Выравниваем текст по левому краю */
    white-space: nowrap !important; /* Запрещаем перенос текста */
    min-width: 280px !important; /* Минимальная ширина 280px для комфортного отображения */
    width: 100% !important;
}

/* Кнопка поиска */
.search-hero .hero-search .search-form__button,
.search-hero .hero-search .search-form__submit {
    width: 100% !important;
    text-align: center !important; /* Текст кнопки по центру */
}

/* Десктоп: фиксируем выравнивание кнопки по нижней линии полей,
   чтобы мобильные правки не сдвигали её вверх */
@media (min-width: 769px) {
    .search-hero .hero-search .search-form__fields {
        align-items: end !important;
    }
    
    .search-hero .hero-search .search-form__submit {
        align-self: end !important;
        height: 48px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* === Специфичные стили для страницы Search === */
.search-page .search-hero {
    margin-top: 0 !important; /* Убираем отступ */
}

.main.search-page {
    margin-top: 0 !important; /* Убираем margin-top для .main.search-page */
}

.search-page .main {
    margin-top: 0 !important;
}

/* === Специфичные стили для страницы Hotel Details === */
.hotel-details-container .search-hero {
    padding: clamp(0.5rem, 1vw, 0.75rem) 0 clamp(0.5rem, 1vw, 1rem) !important; /* Уменьшаем верхний отступ только на странице деталей */
}

/* Пустой блок для создания отступа от хедера на странице поиска */
.search-page-spacer {
    height: var(--header-height, 80px); /* Высота как у верхнего блока страницы деталей, fallback 80px */
    width: 100%;
    display: block;
}

/* На мобильных сразу уменьшаем базовое значение */
@media (max-width: 768px) {
    .search-page-spacer {
        height: clamp(1rem, 2.5vw, 1.25rem) !important; /* Уменьшено в 2 раза: 16-20px */
    }
}

/* Когда правая колонка отсутствует, левая занимает всю ширину */
.search-page .main__container:not(:has(.main__right-column)) .main__left-column {
    flex: 1;
    width: 100%;
}

/* Fallback для браузеров без поддержки :has() */
.search-page .main__container.no-right-column .main__left-column {
    flex: 1;
    width: 100%;
}

/* Основная логика для левой колонки */
.search-page .main__container .main__left-column {
    flex: 1;
    min-width: 0;
}

/* ============================================
   АДАПТИВНОСТЬ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ
   ============================================ */

@media (max-width: 1200px) {
    .search-hero__container {
        padding-inline: clamp(1.25rem, 5vw, 5rem);
    }
}

@media (max-width: 768px) {
    /* Убираем верхний padding у .main на странице поиска для мобильных */
    .main.search-page {
        padding-top: 0 !important; /* Убираем верхний padding, так как отступ создается через .search-page-spacer */
        padding-bottom: clamp(0.375rem, 1.25vw, 0.625rem) !important; /* Уменьшено в 2 раза: 6-10px */
    }
    
    .search-hero {
        padding: clamp(0.0625rem, 0.375vw, 0.1875rem) 0 clamp(0.125rem, 0.5vw, 0.25rem) !important; /* Уменьшено в 2 раза: 1-3px сверху, 2-4px снизу */
    }
    
    .search-hero__container {
        padding-inline: clamp(1rem, 4vw, 2.5rem);
    }
    
    /* Форма поиска - вертикальная на мобильных */
    .search-hero .hero-search .search-form__fields {
        grid-template-columns: 1fr !important;
        gap: clamp(0.75rem, 2vw, 1rem) !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .search-hero .hero-search .search-form {
        width: 100% !important;
        max-width: 100% !important;
        padding: clamp(1rem, 3vw, 1.5rem) !important;
    }
    
    .search-hero .hero-search .search-form__field {
        width: 100% !important;
        min-width: unset !important;
    }
    
    .search-hero .hero-search .search-form__field:nth-child(3) {
        min-width: unset !important;
        width: 100% !important;
    }
    
    .search-hero .hero-search .search-form__guests-btn {
        min-width: unset !important;
        width: 100% !important;
        white-space: normal !important;
    }
    
    .search-hero .hero-search .guests-dropdown {
        min-width: unset !important;
        width: calc(100vw - 2rem) !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
    }
    
    .search-hero .hero-search .search-form__flexible-search {
        margin-top: clamp(0.75rem, 2vw, 1rem) !important;
        padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(0.75rem, 2vw, 1rem) !important;
    }
    
    .search-hero .hero-search .search-form__button,
    .search-hero .hero-search .search-form__submit {
        width: 100% !important;
        padding: clamp(0.75rem, 2vw, 1rem) !important;
        font-size: clamp(0.875rem, 2vw, 1rem) !important;
    }
    
    /* Отступ от хедера на мобильных - уже задан выше в отдельном медиа-запросе */
}

@media (max-width: 480px) {
    /* Отступ от хедера на очень маленьких экранах - уменьшено в 2 раза */
    .search-page-spacer {
        height: clamp(0.875rem, 2.25vw, 1.125rem) !important; /* Уменьшено в 2 раза: 14-18px */
    }
    
    .main.search-page {
        padding-bottom: clamp(0.25rem, 1vw, 0.5rem) !important; /* Уменьшено в 2 раза: 4-8px */
    }
    
    .search-hero {
        padding: clamp(0.0625rem, 0.25vw, 0.125rem) 0 clamp(0.125rem, 0.375vw, 0.25rem) !important; /* Уменьшено в 2 раза: 1-2px сверху, 2-4px снизу */
    }
    
    .search-hero {
        padding: clamp(0.25rem, 1vw, 0.5rem) 0 clamp(0.375rem, 1vw, 0.5rem); /* Еще меньше верхний отступ: 4-8px */
    }
    
    .search-hero__container {
        padding-inline: clamp(0.75rem, 3vw, 1.25rem);
    }
    
    .search-hero .hero-search .search-form {
        padding: clamp(0.875rem, 2.5vw, 1.25rem) !important;
        border-radius: clamp(0.5rem, 1.5vw, 0.875rem) !important;
    }
    
    .search-hero .hero-search .search-form__fields {
        gap: clamp(0.625rem, 2vw, 0.875rem) !important;
    }
    
    .search-hero .hero-search .search-form__label {
        font-size: clamp(0.75rem, 2vw, 0.875rem) !important;
    }
    
    .search-hero .hero-search .search-form__input {
        padding: clamp(0.625rem, 1.5vw, 0.75rem) !important;
        font-size: clamp(0.75rem, 2vw, 0.875rem) !important;
    }
    
    .search-hero .hero-search .guests-dropdown {
        width: calc(100vw - 1.5rem) !important;
        padding: clamp(0.75rem, 2vw, 0.875rem) !important;
    }
    
    .search-hero .hero-search .search-form__flexible-search {
        margin-top: clamp(0.625rem, 2vw, 0.75rem) !important;
        padding: clamp(0.4375rem, 1.5vw, 0.625rem) clamp(0.625rem, 2vw, 0.75rem) !important;
    }
}

/* Очень маленькие экраны (< 360px) */
@media (max-width: 360px) {
    .search-hero__container {
        padding-inline: 0.75rem;
    }
    
    .search-hero .hero-search .search-form {
        padding: 1rem !important;
    }
    
    .search-hero .hero-search .search-form__fields {
        gap: 0.75rem !important;
    }
    
    .search-hero .hero-search .guests-dropdown {
        width: calc(100vw - 1rem) !important;
        padding: 0.75rem !important;
    }
}