/* Туры в один отель: таблица вариантов (public/js/tour-search/hotel-tours.js).
   Без своей прокрутки — все варианты в длину страницы (решение 05.11.2026);
   шапка таблицы прилипает под меню разделов при прокрутке страницы. */
.htours-table {
    background: #fff;
    border: 1px solid var(--ts-line);
    border-radius: var(--ts-radius);
}

.htours-row {
    display: grid;
    grid-template-columns: 150px 110px minmax(150px, 1.2fr) minmax(150px, 1.4fr) 150px 210px;
    align-items: center;
    column-gap: 14px;
    width: 100%;
    padding: 13px 18px;
    font: inherit;
    font-size: 16px;
    color: var(--ts-text);
    text-align: left;
    background: #fff;
    border: 0;
    border-bottom: 1px solid var(--ts-line);
    cursor: pointer;
    transition: background .15s;
}

.htours-row:last-child { border-bottom: 0; }
.htours-row:hover, .htours-row:focus-visible { background: #fdecea; outline: none; }

.htours-row--head {
    position: sticky;
    top: var(--htours-sticky, 0px);
    z-index: 2;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ts-muted);
    background: var(--ts-soft);
    cursor: default;
}
.htours-row--head:hover { background: var(--ts-soft); }
.htours-row--head > :last-child { text-align: right; }

.htours-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.htours-cell svg { flex: none; color: var(--ts-accent); }
.htours-cell span { min-width: 0; line-height: 1.3; }
.htours-cell--date span { text-transform: capitalize; }
.htours-cell--operator { color: var(--ts-muted); }
.htours-cell--operator svg { color: var(--ts-muted); }

.htours-cell--price { justify-content: flex-end; gap: 12px; }
.htours-cell--price strong { font-size: 18px; font-weight: 700; white-space: nowrap; }
.htours-row.is-best .htours-cell--price strong { color: var(--ts-accent); }
/* зелёная галочка «выбрать»: в покое контур, при наведении на строку — залита */
.htours-go {
    display: flex; align-items: center; justify-content: center; flex: none;
    width: 36px; height: 36px;
    color: #1f9d55;
    background: #e6f6ec;
    border-radius: 50%;
    transition: background .15s, color .15s;
}
.htours-row:hover .htours-go, .htours-row:focus-visible .htours-go { color: #fff; background: #1f9d55; }

@media (max-width: 1100px) {
    .htours-row { grid-template-columns: 130px 90px minmax(120px, 1fr) minmax(120px, 1.2fr) 110px 150px; font-size: 15px; }
}

/* телефон: каждый вариант — карточка в две колонки, цена отдельной строкой */
@media (max-width: 760px) {
    .htours-row--head { display: none; }
    .htours-row { grid-template-columns: 1fr 1fr; row-gap: 8px; padding: 14px; }
    .htours-cell--meal, .htours-cell--room, .htours-cell--price { grid-column: 1 / -1; }
    .htours-cell--operator { grid-column: 1 / -1; }
    .htours-cell--price { justify-content: space-between; }
}

/* галочка берёт цвет кружка (зелёная в покое, белая при наведении), а не красный цвет иконок ячеек */
.htours-cell .htours-go svg { color: inherit; }

/* Сортировка: заголовки колонок — кнопки; активная колонка в цвете сайта со стрелкой направления */
.htours-sort {
    display: flex; align-items: center; gap: 6px; min-width: 0; padding: 0;
    font: inherit; font-weight: 600; color: var(--ts-muted); text-align: left;
    background: none; border: 0; cursor: pointer;
}
.htours-sort i { font-style: normal; font-size: 13px; opacity: .45; }
.htours-sort:hover, .htours-sort.is-active { color: var(--ts-accent); }
.htours-sort.is-active i { opacity: 1; }
.htours-row--head > .htours-sort:last-child { justify-content: flex-end; padding-right: 48px; }

/* телефон: шапки-колонки нет, сортировка — строкой кнопок над вариантами */
@media (max-width: 760px) {
    .htours-row--head {
        display: flex; flex-wrap: wrap; gap: 6px 8px; position: static; padding: 10px 14px;
    }
    .htours-sort { padding: 5px 10px; font-size: 13px; background: #fff; border: 1px solid var(--ts-line); border-radius: 999px; }
    .htours-sort.is-active { border-color: var(--ts-accent); }
    .htours-row--head > .htours-sort:last-child { padding-right: 10px; }
}

/* углы: шапка и последняя строка повторяют скругление рамки таблицы
   (overflow у таблицы не ставим — иначе шапка перестанет прилипать) */
.htours-row--head { border-radius: calc(var(--ts-radius) - 1px) calc(var(--ts-radius) - 1px) 0 0; }
.htours-body .htours-row:last-child { border-radius: 0 0 calc(var(--ts-radius) - 1px) calc(var(--ts-radius) - 1px); }

/* Питание: международный код в цветной плашке; цвет — уровень питания */
.htours-meal {
    flex: none; min-width: 38px; padding: 4px 7px; text-align: center;
    font-size: 13px; font-weight: 700; letter-spacing: .3px; line-height: 1.2;
    border-radius: 6px; color: #5d6470; background: #eceae5;
}
.htours-meal--bb { color: #8a5a00; background: #fdeecb; }
.htours-meal--hb { color: #1a5fa8; background: #e1eefb; }
.htours-meal--fb { color: #6a3fa0; background: #efe6fa; }
.htours-meal--ai { color: #176b3a; background: #dff3e6; }
.htours-meal--uai { color: #fff; background: #1f9d55; }

/* телефон: сортировка — белый блок с подписью, кнопки сеткой 3 × 2, крупнее и с воздухом */
@media (max-width: 760px) {
    .htours-row--head {
        display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
        padding: 16px 14px 18px; background: #fff;
    }
    .htours-row--head:hover { background: #fff; }
    .htours-row--head::before {
        content: 'Сортировать по'; grid-column: 1 / -1;
        font-size: 14px; font-weight: 600; color: var(--ts-muted);
    }
    .htours-sort {
        justify-content: center; min-height: 42px; padding: 8px 6px;
        font-size: 14px; line-height: 1.2; text-align: center;
        background: #fff; border: 1px solid var(--ts-line); border-radius: 10px;
    }
    .htours-sort.is-active { border-color: var(--ts-accent); background: #fdecea; }
    .htours-row--head > .htours-sort:last-child { justify-content: center; padding-right: 6px; }
}

/* телефон: в карточке варианта каждое поле на своей строке, крупнее шрифт и больше отступы */
@media (max-width: 760px) {
    .htours-body .htours-row { grid-template-columns: 1fr; row-gap: 12px; padding: 18px 16px; font-size: 17px; }
    .htours-body .htours-cell { grid-column: 1 / -1; gap: 10px; }
    .htours-body .htours-cell svg { width: 20px; height: 20px; }
    .htours-body .htours-cell--price { margin-top: 4px; }
    .htours-body .htours-cell--price strong { font-size: 20px; }
    .htours-body .htours-go { width: 40px; height: 40px; }
}

/* телефон: в узких кнопках сортировки стрелка только у активной, иначе подпись переносится и упирается в край */
@media (max-width: 760px) {
    .htours-sort:not(.is-active) i { display: none; }
}

/* узкий телефон: кнопки сортировки в два столбца */
@media (max-width: 416px) {
    .htours-row--head { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}