/* ==========================================================================
   Форма поиска отелей (вкладка «Отели»)
   ========================================================================== */

.b-search-hotel__form {
    position: relative;
}

/* --- Оранжевая секция (главная) ------------------------------------------- */

/* Важно: первая строка (направление, даты, туристы) лежит на белой плашке
   .b-search-form_hotels, поэтому её текст и иконки остаются тёмными.
   На оранжевом градиенте оказываются только фильтры второго и третьего
   ряда, и вот им нужен светлый текст. */
.b-section_gradient_orange .b-search-hotel__form .b-hotel-guarantee__label {
    color: #fff;
}

/* Подпись «Бюджет» — серая, на оранжевом почти не читается. */
.b-section_gradient_orange
    .b-search-hotel__form
    [data-hotel-trigger="budget"]
    .b-input-row__caption {
    color: rgba(255, 255, 255, 0.8);
}

.b-hotel-budget .b-hotel-budget__value,
.b-hotel-budget .b-input-row__caption {
    padding-left: 0;
}
/* --- Основная строка: направление · заезд · выезд · туристы · кнопка ------- */

.b-search-form_hotels {
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .b-search-form_hotels {
        grid-template-columns: repeat(2, 1fr);
    }

    .b-search-form_hotels .b-search-form__field_direction {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1024px) {
    .b-search-form_hotels {
        grid-template-columns: 1.7fr 1fr 1fr 1.2fr auto;
    }

    .b-search-form_hotels .b-search-form__field_direction {
        grid-column: auto;
    }
}

/* Направление шире остальных полей, иначе выпадалка с отелями не помещается */

.b-search-form__field_direction .b-input::placeholder {
    color: #afadad;
}

.b-search-hotel__form .b-input-row__note {
    position: absolute;
    right: 12px;
    top: 12px;
    transform: translateY(-50%);
    color: #f97444;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
}

/* --- Автодополнение направления ------------------------------------------ */

.b-dropdown-container_direction {
    width: 460px;
    max-width: calc(100vw - 32px);
    min-width: 100%;
}

.b-hotel-direction {
    max-height: 360px;
    overflow-y: auto;
}

.b-hotel-direction__group:not(:last-child) {
    margin-bottom: 12px;
}

.b-hotel-direction__title {
    display: block;
    padding: 4px 12px 8px;
    color: #afadad;
}

.b-hotel-direction__country {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    padding: 8px 12px;
    background-color: #f7f7f7;
    border-radius: 10px;
}

.b-hotel-direction__country-name {
    font-weight: 500;
    font-size: 15px;
    color: #363232;
}

.b-hotel-direction__reset {
    border: none;
    background: none;
    padding: 0;
    color: #f97444;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.b-hotel-direction__reset:hover {
    text-decoration: underline;
}

.b-hotel-direction__empty {
    padding: 16px 12px;
    text-align: center;
    color: #afadad;
}

.b-search-hotel__form .b-hotel-suggestion {
    cursor: pointer;
    color: #363232;
    padding: 8px 12px;
    border-radius: 8px;
    transition: 0.25s background-color;
}

.b-search-hotel__form .b-hotel-suggestion:hover {
    background-color: #ededed;
}

.b-search-hotel__form .b-hotel-suggestion__name {
    display: block;
    font-size: 16px;
}

.b-search-hotel__form .b-hotel-suggestion__note {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: #afadad;
}

.b-search-hotel__form .b-hotel-suggestion_mark {
    color: #f97444;
}

/* --- Ширина выпадающих списков основной строки ---------------------------- */

.b-hotel-dropdown_narrow {
    width: 340px;
    max-width: calc(100vw - 32px);
}

.b-hotel-dropdown_budget {
    width: 460px;
    max-width: calc(100vw - 32px);
}

/* Выпадающие списки отелей вылезают за пределы карточки-триггера, поэтому
   им нужен собственный фон и слой above соседних фильтров. */
.b-search-hotel__form .b-hotel-dropdown {
    position: absolute;
    z-index: 40;
    margin-top: 6px;
}

.b-search-hotel__form .b-hotel-dropdown .b-dropdown-container__inner {
    padding: 16px;
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 0 8px 24px rgba(54, 50, 50, 0.16);
}

/* Триггеры-карточки должны быть над выпадающими списками соседей. */
.b-search-hotel__form [data-hotel-field],
.b-search-hotel__form [data-hotel-filter],
.b-search-hotel__form [data-hotel-stars],
.b-search-hotel__form [data-hotel-accordion] {
    position: relative;
}

.b-search-form_hotels .b-counter-row {
    grid-template-columns: 34% 64%;
}

.b-search-form_hotels .b-counter-row__item-label {
    font-size: 13px;
    line-height: 1.25;
}

/* --- Карточки фильтров ------------------------------------------------------ */

/* Форма отелей ставится и на оранжевую секцию (главная), и на светлую
   (/result). На оранжевой 8% белого читается как полупрозрачная карточка,
   а на светлом фоне становится невидимым — поэтому для светлых секций
   используем плотный белый, как у формы туров. */
.b-filter__bg-hotel {
    background-color: rgba(255, 255, 255, 0.08);
}

.b-section__filter .b-filter__bg-hotel,
.b-section_light_gray .b-filter__bg-hotel,
.b-section_white .b-filter__bg-hotel {
    background-color: #fff;
}

/* --- Строка фильтров -------------------------------------------------------- */

.b-search-filter-params_hotels {
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .b-search-filter-params_hotels {
        grid-template-columns: repeat(2, 1fr);
    }

    .b-search-filter-params_hotels__wide {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1024px) {
    .b-search-filter-params_hotels {
        grid-template-columns: repeat(4, 1fr);
    }

    .b-search-filter-params_hotels__wide {
        grid-column: span 2;
    }
}

/* Базовый .b-filter даёт 20px по бокам — свои отступы здесь ломали
   выравнивание подписей внутри одного ряда фильтров. */
.b-search-filter-params_hotels .b-rating-filter {
    padding: 0 20px;
}

.b-search-filter-params_hotels .b-rating-filter__label {
    white-space: nowrap;
}

/* --- Бюджет: сумма от/до + валюта ------------------------------------------ */

.b-hotel-budget {
    position: relative;
    padding: 0 20px;
}

.b-hotel-budget .b-input-row {
    cursor: pointer;
}

/* Знак из начала поля убран — он живёт суффиксом в «от» и «до».
   Поле возвращаем к штатному отступу 12px, иначе значение уезжало левее
   подписи «Бюджет», у которой тот же отступ. */
.b-hotel-budget__inner .b-input {
    min-width: 0;
}

/* Поле бюджета — div, а не input: только так знаки валют можно вставить
   прямо в текст («от 300 ₽ до 500 ₽»). Блок ведём себя как поле ввода. */
.b-hotel-budget__value {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    white-space: nowrap;
}

/* --- Знак валюты: один размер и в списке, и в полях от/до ----------------- */

/* Знак должен быть по размеру как текст рядом (16px), поэтому глифы берём
   тем же кеглем, а SVG-знак BYN масштабируем под высоту строчных знаков
   того же текста (~12px). Размер общий, чтобы в списке валют и в полях
   знаки не отличались. */
.b-hotel-sign {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    height: 12px;
    color: #363232;
}

.b-hotel-sign__glyph {
    font-size: 16px;
    line-height: 12px;
}

.b-hotel-sign__svg {
    display: block;
    width: 9.7px;
    height: 12px;
    fill: currentColor;
    /* Бокс знака по центру совпадает с центром цифр (расхождение меньше
       пикселя), но у «Б» тяжёлая нижняя чаша, и глаз читает его как
       висящий ниже строки. Поднимаем на 1px, чтобы знак встал ровно
       напротив цифр. */
    transform: translateY(-1px);
}

/* Знак в полях «от» и «до» стоит сразу за суммой и центрируется по
   вертикали самому полю. Позиционировать его надо относительно обёртки
   вокруг input: если взять родителем <label>, то в центре окажется вся
   метка вместе с подписью «от»/«до», и знак уедет вниз. */
.b-hotel-budget__field {
    position: relative;
    display: block;
    /* input по умолчанию inline и добавляет к строке baseline-зазор, из-за
       чего обёртка выше самого поля и top: 50% уводит знак вверх. */
    line-height: 0;
}

.b-hotel-budget__price-sign {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    /* Обёртка иначе растягивается на строчку шрифта (≈21px вместо 16px
       самого знака) из-за унаследованного line-height. */
    display: flex;
    align-items: center;
    line-height: 0;
    pointer-events: none;
}

.b-hotel-budget__price-sign[hidden] {
    display: none;
}

/* Монета из триггера бюджета убрана — остаётся только шеврон справа. */
.b-hotel-budget__chevron {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    fill: #363232;
    transform: rotate(90deg);
    transition: transform 0.25s;
}

/* Раскрытый бюджет — шеврон повёрнут вверх, как у соседних фильтров. */
.b-hotel-budget__trigger.js-act .b-hotel-budget__chevron {
    transform: rotate(-90deg);
}

.b-hotel-budget__prices {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.b-hotel-budget__price {
    flex: 1 1 0;
    min-width: 0;
}

.b-hotel-budget__price-caption {
    display: block;
    margin-bottom: 4px;
    color: #afadad;
    font-size: 13px;
}

.b-hotel-budget__input {
    display: block;
    width: 100%;
    height: 43px;
    /* Справа место под знак валюты, чтобы сумма не залезала под него. */
    padding: 0 34px 0 12px;
    border: none;
    border-radius: 10px;
    background-color: #f7f7f7;
    color: #363232;
    font-size: 16px;
    font-weight: 500;
    font-family: inherit;
}

.b-hotel-budget__input:focus {
    box-shadow: 0 0 0 2px #f97444;
    outline: none;
}

.b-hotel-budget__sep {
    color: #afadad;
    padding-bottom: 10px;
}

/* --- Валюты: знак и название валюты --------------------------------------- */

/* Название после знака («Б Белорусские рубли») в три колонки не помещается,
   поэтому список вертикальный — по строке на валюту. */
.b-hotel-dropdown_budget [data-hotel-list="currencies"] {
    grid-template-columns: 1fr;
    grid-gap: 8px;
}

.b-hotel-currency__label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-height: 43px;
    cursor: pointer;
}

.b-hotel-currency__name {
    font-size: 15px;
    line-height: 1.2;
}

/* Размер знака задаёт общий .b-hotel-sign. Оранжевым подсвечиваем только
   знак — название валюты остаётся читаемым тёмным. */
.b-hotel-currency
    .b-option__input:checked
    ~ .b-hotel-currency__label
    .b-hotel-sign {
    color: #f97444;
}

/* --- Бюджет и гарантия: то же состояние, что у остальных фильтров -------- */

/* Оба — обычные .b-filter, а правило «карточка белеет при выборе» в
   common.min.css привязано к .b-dropdown-filter, поэтому повторяем его.
   "any" (выбор не задан) — полупрозрачная карточка, сквозь неё виден фон
   секции; "some" — плотный белый, как у Питания/Рейтинга с выбранным
   значением. */
.b-hotel-budget[data-selected-value]:not([data-selected-value="any"]),
.b-hotel-guarantee[data-selected-value]:not([data-selected-value="any"]) {
    background-color: #fff;
}

/* На белой карточке текст должен стать тёмным, иначе не читается. */
.b-hotel-budget[data-selected-value]:not([data-selected-value="any"])
    .b-input-row__caption,
.b-hotel-budget[data-selected-value]:not([data-selected-value="any"])
    .b-hotel-budget__value,
.b-hotel-budget[data-selected-value]:not([data-selected-value="any"])
    .b-hotel-sign,
.b-hotel-guarantee[data-selected-value]:not([data-selected-value="any"])
    .b-checkbox__label {
    color: #363232;
}

.b-hotel-guarantee[data-selected-value]:not([data-selected-value="any"])
    .b-hotel-guarantee__label {
    color: #363232;
}

/* Шеврон бюджета на полупрозрачной карточке оранжевой секции должен быть
   светлым — как у соседних фильтров с data-selected-value="any". */
.b-section_gradient_orange
    .b-hotel-budget[data-selected-value="any"]
    .b-hotel-budget__chevron {
    fill: #fff;
}

/* --- Гарантия мест ---------------------------------------------------------- */

.b-hotel-guarantee {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 0 12px;
}

.b-hotel-guarantee__label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 16px;
}

.b-hotel-guarantee__label::before {
    flex: 0 0 20px;
}

/* --- Фильтры по стране ------------------------------------------------------ */

.b-search-hotel__geo {
    grid-column: 1 / -1;
}

.b-search-hotel__geo[hidden] {
    display: none;
}

.b-search-hotel__geo-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .b-search-hotel__geo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .b-search-hotel__geo-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --- Расширенные фильтры ---------------------------------------------------- */

.b-accordion-container_hotels {
    border-radius: 0 0 20px 20px;
}

.b-accordion-container_hotels .b-checkbox__label {
    font-size: 15px;
}

.b-accordion-container__options {
    display: grid;
    gap: 8px 16px;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

/* --- Состояния полей -------------------------------------------------------- */

.b-search-form__field.is-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.b-search-form__field.is-missing .b-input-row,
.b-hotel-budget.is-missing .b-input-row {
    box-shadow: 0 0 0 2px #f97444;
    border-radius: 14px;
    animation: b-hotel-shake 0.4s ease;
}

@keyframes b-hotel-shake {
    0%,
    100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-4px);
    }
    75% {
        transform: translateX(4px);
    }
}

.b-search-hotel__form [data-hotel-input][readonly] {
    cursor: pointer;
}

/* Индикатор загрузки справочников */
.b-hotel-loader {
    padding: 24px 12px;
    text-align: center;
    color: #afadad;
}

/* ==========================================================================
   Результаты поиска отелей (страница /result, tourType=hotels)
   ========================================================================== */

.b-hotel-results__loader {
    padding: 48px 0;
    text-align: center;
    color: #afadad;
    font-size: 16px;
    grid-column: 1 / -1;
}

.b-hotel-results__card .b-card__img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 305 / 229;
}

.b-hotel-results__card .b-card__title {
    font-size: 16px;
    line-height: 1.3;
}

.b-hotel-results__card .b-card__rating {
    margin-inline-start: auto;
}

.b-hotel-results__place {
    margin-top: 6px;
}

.b-hotel-results__place p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.b-hotel-results__stars,
.b-hotel-results__type {
    align-items: center;
    gap: 4px;
}

.b-hotel-results__stars .icon {
    width: 10px;
    height: 10px;
}

.b-hotel-results__rating {
    min-width: 0;
}

.b-hotel-results__message {
    padding: 24px 12px;
    text-align: center;
    color: #9b9b9b;
}
.b-rating-filter .star path {
    fill: #d7d6d6;
}

.b-hotel-results__card .b-hotel-results__link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.b-hotel-results__card .b-hotel-results__link:hover {
    color: #f97444;
}

.b-hotel-results__more {
    margin-top: 12px;
    align-self: flex-start;
    white-space: nowrap;
}