/* ============================================
   ОБЩИЕ СТИЛИ ДЛЯ БЛОКА ПОИСКА
   Используется на страницах 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;
}

/* Убираем padding-top для десктопа, так как расстояние задается через margin-bottom у .breadcrumb-container-search */
/* Используем более высокую специфичность, чтобы переопределить базовый padding: 40px 0 из site.css */
/* На странице поиска используем <main class="main search-page">, поэтому применяем стили к этому элементу */
@media (min-width: 769px) {
    main.main.search-page,
    main.search-page.main,
    main.main.search-page.main,
    .main.search-page,
    .search-page .main {
        padding: 0 0 40px 0 !important; /* Убираем padding-top, оставляем padding-bottom: 40px, боковые: 0 */
    }
}

/* === Специфичные стили для страницы 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;
}

/* Стили для .breadcrumb-container-search на странице поиска */
/* Используется специфичный класс, чтобы не конфликтовать с глобальными стилями .breadcrumb-container */
.breadcrumb-container-search {
    max-width: var(--container-max-width, 1920px);
    margin: 0 auto;
    background-color: var(--color-white, #ffffff);
}

/* Уменьшенное расстояние сверху и снизу для десктопа (как на странице деталей отеля) */
@media (min-width: 769px) {
    .breadcrumb-container-search {
        margin-top: var(--header-height, 80px) !important; /* Компенсируем фиксированный хедер для десктопа */
        padding-top: clamp(0.375rem, 0.875vw, 0.5rem) !important; /* Уменьшенное расстояние сверху для десктопа: 6-8px */
        margin-bottom: clamp(0.375rem, 0.875vw, 0.5rem) !important; /* Расстояние до заголовка для десктопа: 6-8px (как на странице деталей отеля) */
        padding-bottom: 0 !important; /* Убираем padding-bottom, используем только margin-bottom */
    }
}

/* Вложенный .main__container внутри .breadcrumb-container-search должен иметь такие же отступы, как и основной .main__container */
/* Это обеспечивает выравнивание хлебных крошек с заголовком "Популярные места" */
.breadcrumb-container-search .main__container {
    padding: 0 120px !important; /* Те же отступы, что и у основного .main__container для выравнивания с заголовком */
    display: flex !important; /* Используем flex для выравнивания с основным контейнером */
    gap: 40px !important; /* Те же отступы между колонками */
    max-width: var(--container-max-width) !important;
    margin: 0 auto !important;
    align-items: flex-start !important;
}

/* Левая колонка внутри .breadcrumb-container-search для выравнивания с заголовком */
.breadcrumb-container-search .main__left-column {
    flex: 1;
    min-width: 0;
    display: block; /* Не flex, так как внутри только крошки */
}

/* Убеждаемся, что стили хлебных крошек применяются одинаково на странице поиска */
.breadcrumb-container-search .breadcrumb {
    font-family: var(--font-family-montserrat, 'Montserrat', sans-serif) !important;
    font-size: clamp(0.875rem, 1.5vw, 0.95rem) !important;
    line-height: 1.5 !important;
}

/* Мобильный вид - стили хлебных крошек как на странице деталей отеля */
@media (max-width: 768px) {
    .breadcrumb-container-search .breadcrumb {
        font-size: clamp(0.75rem, 1.75vw, 0.875rem) !important; /* Те же стили, что и в Breadcrumb.razor.css для мобильного */
        line-height: 1.5 !important;
    }
}

@media (max-width: 1200px) {
    .breadcrumb-container-search .main__container {
        padding: 0 60px !important; /* Те же отступы, что и у основного .main__container для средних экранов */
    }
}

/* Мобильный вид - расстояния как на странице деталей отеля */
@media (max-width: 768px) {
    /* На странице деталей отеля: .hotel-details-container имеет margin-top: 80px (компенсирует фиксированный хедер) + padding-top: 40px */
    /* Визуально расстояние от хедера до крошек = 40px (padding-top), так как margin-top компенсирует фиксированный хедер */
    /* На странице поиска: .breadcrumb-container-search находится ВНЕ .main, поэтому структура как у .hotel-details-container */
    /* Убираем .search-page-spacer полностью, так как он удален из HTML */
    .search-page-spacer {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Расстояния для хлебных крошек (как на странице деталей отеля) */
    /* На странице деталей отеля: .hotel-details-container имеет margin-top: 80px (компенсирует фиксированный хедер) + padding-top: 40px */
    /* Но визуально расстояние от хедера до крошек = 40px (padding-top), так как margin-top компенсирует фиксированный хедер */
    /* На странице поиска: убираем padding-top, так как он создает слишком большое расстояние */
    .breadcrumb-container-search {
        margin-top: 0 !important; /* Убираем margin-top, так как он создает лишний отступ */
        padding-top: 0 !important; /* Убираем padding-top, так как он создает слишком большое расстояние */
        margin-bottom: clamp(0.75rem, 1.5vw, 1rem) !important; /* Расстояние до заголовка: 12-16px (как margin-bottom у .breadcrumb-container на странице деталей отеля) */
        padding-bottom: 0 !important; /* Убираем padding-bottom, используем только margin-bottom */
    }
    
    .breadcrumb-container-search .main__container {
        padding: 0 clamp(1rem, 4vw, 1.25rem) !important; /* Единый отступ как на странице деталей отеля: 16-20px */
    }
    
    /* Добавляем padding-top для .content на странице поиска в мобильном виде */
    /* .content оборачивает @Body в NewMainLayout, а страница поиска содержит .search-page */
    .content:has(.search-page) {
        padding-top: 4px;
    }
}

/* Когда правая колонка отсутствует, левая занимает всю ширину */
.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) {
    /* Стили для очень маленьких экранов */
    /* Отступ от хедера остается таким же, как на странице деталей отеля (через .search-page-spacer) */
    
    .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;
    }
}