@media only screen and (min-width: 720px) {
    .catalog-item__gallery {
        height: 100%;
    }
}
.catalog-item__view-btn {
    margin-left: auto;
}
.catalog-item__title-main {
    text-transform: capitalize;
}
.filter-range .single {
    margin-top: 0 !important;
}
.filter-price-skeleton {
    display: none;
    margin-bottom: 24px;
}

.filter-price-skeleton.active {
    display: block;
}

.filter-price-skeleton span,
.filter-price-skeleton i {
    display: block;
    border-radius: 10px;
    background: linear-gradient(90deg, #eef0f4 0%, #f7f8fb 45%, #eef0f4 90%);
    background-size: 240% 100%;
    animation: filterSkeleton 1.15s ease-in-out infinite;
}

.filter-price-skeleton__grid {
    display: flex;
    grid-gap: 10px;
}
.filter-price-skeleton span {
    width: 100%;
    height: 34px;
}

.filter-price-skeleton i {
    height: 6px;
    margin-top: 8px;
}

@keyframes filterSkeleton {
    0% {
        background-position: 120% 0;
    }

    100% {
        background-position: -120% 0;
    }
}
.content-page {
    display: none;
}
.content-page.is-loaded {
    display: block;
}
.catalog-item__price {
    margin-left: auto;
}
.catalog-empty {
    font-size: 16px;
    padding: 12px 16px;
    border-radius: 16px;
    font-weight: 700;
    color: #F04438;
    text-align: center;
    background: #FEF3F2;
    box-shadow: 0 1px 3px 0 rgba(11, 11, 16, 0.02), 0 8px 16px 0 rgba(11, 11, 16, 0.04);
}
@media only screen and (max-width: 720px) {
    .catalog-empty {
        font-size: 14px;
    }
}
.region-drop__item {
    cursor: pointer;
}
.region-drop__item input {
    display: none;
}

.payment-title span {
    font-size: 24px;
    transform: translateY(-2px);
    display: inline-block;
}

.popup-qr {
    width: 470px;
    padding: 40px 25px;
    border-radius: 16px;
    background: #FFF;
    box-shadow: 0 1px 3px 0 rgba(11, 11, 16, 0.02), 0 8px 16px 0 rgba(11, 11, 16, 0.04);
}
.popup-qr__photo {
    width: fit-content;
    margin: 0 auto;
}
.popup-qr__link {
    font-size: 18px;
    text-align: center;
    word-wrap: break-word;
    font-weight: 700;
    margin-top: 45px;
}

@media only screen and (max-width: 720px) { 
    .popup-qr {
        width: 300px;
        padding: 30px 25px;
    }
    .popup-qr__link  {
        margin-top: 25px;
    }
}
@media only screen and (min-width: 1260px) {
    .footer .section-frame {
        max-width: 1240px;
    }
    
}
@media only screen and (min-width: 1200px) {
    .single-date {
        width: 215px;
        flex-shrink: 0;
    }
}
.catalog-banner__content p {
    font-size: 14px;
}

.catalog-banner__content span {
    color: #8B5CF6;
}

@media only screen and (max-width: 720px) {
    .catalog-banner__content br {
        display: none;
    }
}
.room-main__counter {
    display: none;
}
.open-frame {
    overflow: hidden !important;
}


.location-nearby,
.location-nearby * {
    direction: ltr;
    unicode-bidi: isolate;
}

.location-nearby__item,
.location-nearby-item {
    display: flex;
    align-items: center;
    gap: 8px;
    direction: ltr;
    unicode-bidi: isolate;
}

.location-nearby__name,
.location-item__title, .location-item__title span  {
    direction: ltr;
    unicode-bidi: isolate;
}

.location-nearby__distance,
.location-nearby-distance {
    margin-left: 6px;
    white-space: nowrap;
    direction: ltr;
    unicode-bidi: isolate;
}
.location-group {
    margin-bottom: 16px;
}
.location-group:last-child {
    margin-bottom: 0;
}
.single-content {
    justify-content: flex-start;
}
.single-gallery__item {
    cursor: pointer;
}

.services-wrap:nth-child(1) .services-list {
	column-count: 4;
	column-gap: 16px;
	display: block;
}

.services-wrap:nth-child(1) .services-group {
	break-inside: avoid;
	page-break-inside: avoid;
	margin-bottom: 28px;
}

.services-wrap:nth-child(1) .services-item {
	display: block;
}
@media only screen and (max-width: 720px) { 
    .services-wrap:nth-child(1)  .services-list {
        column-count: 2;
    }
}

.dop-info {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.dop-info h3 {
	margin: 0 0 10px;
	font-weight: 600;
}


.dop-info ul {
	margin: 0 0 12px;
	padding-left: 20px;
}

.dop-info li {
	list-style: disc;
	margin-bottom: 6px;
}

.dop-info a {
    color: #8B5CF6;
	text-decoration: underline;
}
.single-gallery__full {
    cursor: pointer;
}
.single-popular__item-title {
    transform: translateY(2px);
}


.catalog.hide .catalog-frame {
    display: none;
}
.catalog-full-skeleton {
    background: none !important;
}
.catalog-full-skeleton-wrap {
    background: none !important;
}
@media only screen and (max-width: 720px) { 
    .catalog-full-skeleton-wrap {
        padding: 0 !important;
    }
    .catalog-full-skeleton__main {
        width: 100%;
    }
    .catalog-full-skeleton__bottom {
        grid-gap: 10px;
    }
    .catalog-full-skeleton__box {
        width: 150px !important;
    }
    .catalog-full-skeleton__banner-top .catalog-full-skeleton__box {
        display: none !important;
    }
}

.global-kids-drop-scroll {
    height: 200px;
    overflow: hidden;
    overflow-y: scroll;
}

.global-kids-drop-scroll::-webkit-scrollbar {
        width: 4px;     
    }
.global-kids-drop-scroll::-webkit-scrollbar-track {
        background: #F4F4F5;
         
         border-radius: 10px; 
    }

.global-kids-drop-scroll::-webkit-scrollbar-thumb {
        background: #8B5CF6;
        border-radius: 20px;
    }
.room-price__nalog-info {
    font-size: 10px;
    margin-top: 5px;
}
/* Гражданство: прокручиваемый список при большом числе стран */
.booking-residency .filter-drop__list.active {
  overflow-y: auto;
  max-height: 280px;
}
.booking-residency .filter-drop__list::-webkit-scrollbar {
  width: 6px;
}
.booking-residency .filter-drop__list::-webkit-scrollbar-thumb {
  background: #d7d7e0;
  border-radius: 8px;
}

/* Single-room only (ETG сертификация): бронирование одного номера за тариф.
   Скрываем добавление нескольких номеров — бэкенд всё равно шлёт 1 комнату. */
.place-drop__add,
.place-drop__more {
  display: none !important;
}

/* Календарь в попапе «Выберите даты проживания» раскрывался absolute вниз и
   уезжал за нижнюю границу попапа/экрана (список месяцев уходил в бесконечность).
   Внутри попапа показываем его фиксированно по центру экрана с ограничением
   высоты и внутренним скроллом. Календарь в формах на страницах не трогаем. */
.popup-date .calendar {
  position: fixed;
  top: 50%;
  left: 50%;
  right: auto;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  max-height: 86vh;
  z-index: 30;
}
.popup-date .calendar.active {
  margin-top: 0;
}
.popup-date .calendar .date-month {
  max-height: calc(86vh - 16px);
}
.popup-date .calendar .date-wrap {
  overflow-y: auto;
  max-height: calc(86vh - 16px);
}

/* ============================================================
   QR-попап оплаты в стиле платёжного шлюза (тёмная карточка):
   «Ожидание платежа», сумма, адрес с копированием, жёлтый варнинг
   про сеть TRC20, QR на белой подложке, таймер, точки-прогресс.
   ============================================================ */
.popup-qr {
  width: 560px;
  max-width: 94vw;
  max-height: 92vh;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 34px 44px 30px;
  border-radius: 20px;
  background: #ffffff;
  color: #1a1a2e;
  text-align: center;
}
.popup-qr__title {
  font-size: 26px;
  font-weight: 800;
  color: #1a1a2e;
}
.popup-qr__due {
  margin-top: 10px;
  font-size: 16px;
  color: #6b6b85;
}
.popup-qr__due b { color: #1a1a2e; font-size: 18px; }
.popup-qr__label {
  margin-top: 22px;
  text-align: left;
  font-size: 14px;
  color: #6b6b85;
}
.popup-qr__addr {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f5f6f9;
  border: 1px solid #e4e6ef;
  border-radius: 10px;
  padding: 12px 12px 12px 14px;
}
.popup-qr__addr-text {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: left;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 13.5px;
  color: #1a1a2e;
}
.popup-qr__copy {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: #e9eaf2;
  color: #55556b;
  cursor: pointer;
  transition: .2s;
}
.popup-qr__copy:hover { background: #dcdeeb; color: #1a1a2e; }
.popup-qr__copy.is-copied { background: #1a9e5f; color: #fff; }
.popup-qr__warn {
  margin-top: 14px;
  background: #fdf0c9;
  color: #7a5c17;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13.5px;
  line-height: 1.5;
  text-align: left;
}
.popup-qr__photo-wrap {
  margin: 20px auto 0;
  width: 190px;
}
.popup-qr__photo { display: flex; justify-content: center; }
.popup-qr__photo img, .popup-qr__photo canvas { display: block; }
.popup-qr__scan {
  margin-top: 12px;
  font-size: 14px;
  color: #6b6b85;
}
.popup-qr__timer {
  margin: 14px auto 0;
  display: inline-block;
  background: #f1f2f6;
  border: 1px solid #e4e6ef;
  border-radius: 10px;
  padding: 9px 18px;
  font-size: 15px;
  font-weight: 700;
  color: #1a1a2e;
}
.popup-qr__dots {
  margin-top: 16px;
  display: flex;
  justify-content: center;
  gap: 9px;
}
.popup-qr__dots span {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background: #5b79f7;
  animation: aifQrDot 1.4s ease-in-out infinite;
}
.popup-qr__dots span:nth-child(2) { animation-delay: .15s; }
.popup-qr__dots span:nth-child(3) { animation-delay: .3s; }
.popup-qr__dots span:nth-child(4) { animation-delay: .45s; }
.popup-qr__dots span:nth-child(5) { animation-delay: .6s; }
@keyframes aifQrDot {
  0%, 100% { opacity: .35; transform: scale(.82); }
  50% { opacity: 1; transform: scale(1); }
}
.popup-qr__wait {
  margin-top: 10px;
  font-size: 14px;
  color: #6b6b85;
}
.popup-qr__wait.is-ok { color: #1a9e5f; font-weight: 700; }
.popup-qr__wait.is-error { color: #cf222e; font-weight: 700; }
@media only screen and (max-width: 720px) {
  .popup-qr { padding: 24px 18px 22px; }
  .popup-qr__title { font-size: 21px; }
}

/* ============================================================
   Карточка «Стоимость номера» (правая колонка страницы оплаты)
   ============================================================ */
.pay-cost {
  margin-top: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ececf3;
}
.pay-cost__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.pay-cost__title { font-size: 17px; font-weight: 700; }
.pay-cost__sum { font-size: 16px; font-weight: 700; white-space: nowrap; }
.pay-cost__sub { margin-top: 4px; font-size: 13px; color: #8a8aa3; }
.pay-cost__links { margin-top: 10px; font-size: 13.5px; display: flex; gap: 8px; flex-wrap: wrap; }
.pay-cost__links a { color: #7C5CFF; text-decoration: none; }
.pay-cost__links a:hover { text-decoration: underline; }
.pay-cost__links span { color: #c4c4d4; }

/* Промокод партнёра */
.promo { margin-top: 16px; }
.promo__toggle {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    padding: 14px 16px; cursor: pointer; font-family: inherit;
    border: 1.5px dashed #b9a8ff; border-radius: 14px;
    background: linear-gradient(135deg, #f5f1ff 0%, #eef6ff 100%);
    transition: border-color .15s, box-shadow .15s, transform .05s;
}
.promo__toggle:hover { border-color: #7C5CFF; box-shadow: 0 4px 14px rgba(124,92,255,.16); }
.promo__toggle:active { transform: scale(.995); }
.promo__toggle-ic { font-size: 24px; line-height: 1; flex-shrink: 0; }
.promo__toggle-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.promo__toggle-title { font-size: 15px; font-weight: 700; color: #5b3ff0; line-height: 1.25; }
.promo__toggle-sub { font-size: 12px; color: #8a8aa3; margin-top: 2px; }
.promo__toggle-chevron {
    flex-shrink: 0; font-size: 22px; font-weight: 400; color: #7C5CFF; line-height: 1;
    width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(124,92,255,.2);
    transition: transform .2s;
}
.promo__toggle.is-open .promo__toggle-chevron { transform: rotate(45deg); }
.promo__body { margin-top: 12px; }
.promo__row { display: flex; gap: 8px; }
.promo__input {
    flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid #d9d6ec;
    border-radius: 10px; font-size: 14px; font-family: inherit; text-transform: uppercase;
    outline: none; transition: border-color .15s;
}
.promo__input:focus { border-color: #7C5CFF; }
.promo__apply {
    padding: 10px 16px; border: none; border-radius: 10px; cursor: pointer;
    background: #7C5CFF; color: #fff; font-size: 14px; font-weight: 600; font-family: inherit;
    white-space: nowrap; transition: opacity .15s;
}
.promo__apply:hover { opacity: .9; }
.promo__apply:disabled { opacity: .5; cursor: default; }
.promo__msg { margin-top: 8px; font-size: 13px; color: #8a8aa3; min-height: 0; }
.promo__msg.is-error { color: #cf222e; }
.promo__applied {
    margin-top: 6px; display: flex; align-items: center; justify-content: space-between;
    gap: 10px; font-size: 13.5px; color: #1a7f37;
}
.promo__remove {
    background: none; border: none; padding: 0; cursor: pointer;
    color: #8a8aa3; font-size: 13px; text-decoration: underline; font-family: inherit;
    white-space: nowrap;
}
.promo__remove:hover { color: #cf222e; }
.payment-step-note {
  margin-top: 10px;
  font-size: 13px;
  color: #8a8aa3;
  text-align: center;
  line-height: 1.45;
}

/* ============================================================
   Попапы «Детали тарифа» / «Важная информация» (стиль Ostrovok)
   ============================================================ */
.popup-ostrovok {
  position: relative;
  width: 760px;
  max-width: 94vw;
  max-height: 88vh;
  overflow-y: auto;
  box-sizing: border-box;
  background: #fff;
  border-radius: 16px;
  padding: 36px 40px 40px;
  text-align: left;
}
.popup-ostrovok__close {
  position: absolute;
  top: 22px;
  right: 24px;
  cursor: pointer;
}
.popup-ostrovok__title { font-size: 30px; font-weight: 800; margin-bottom: 6px; }
.popup-ostrovok__h2 { font-size: 19px; font-weight: 800; margin: 22px 0 10px; }
.popup-ostrovok__body { font-size: 14.5px; line-height: 1.6; color: #33333f; }
.popup-ostrovok__body p { margin: 0 0 10px; }
.popup-ostrovok__body a { color: #7C5CFF; }
.popup-ostrovok__mark {
  position: relative;
  padding-left: 16px;
}
.popup-ostrovok__mark::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 5px;
  height: 14px;
  border-radius: 2px;
  background: #b9bdcd;
}
.popup-ostrovok__mark.is-good::before { background: #29b26b; }
.popup-ostrovok__mark.is-bad::before { background: #e04a3a; }
.popup-ostrovok__checkin {
  display: flex;
  gap: 40px;
  background: #f5f6f9;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 6px;
}
.popup-ostrovok__label { font-size: 13px; color: #8a8aa3; }
.popup-ostrovok__value { font-size: 15.5px; font-weight: 700; margin-top: 2px; }
.popup-ostrovok__note { font-size: 13px; color: #8a8aa3; }
@media only screen and (max-width: 720px) {
  .popup-ostrovok { padding: 24px 18px 26px; }
  .popup-ostrovok__title { font-size: 23px; }
  .popup-ostrovok__checkin { flex-direction: column; gap: 12px; }
}

/* ============================================================
   Форма «Контактные данные гостя» (стиль Ostrovok)
   ============================================================ */
.payment-form__item-note {
  font-size: 12.5px;
  color: #8a8aa3;
  margin: 4px 0 12px;
  line-height: 1.5;
}
.payment-form__select {
  appearance: auto;
  -webkit-appearance: menulist;
  cursor: pointer;
}
.payment-form__textarea {
  resize: vertical;
  min-height: 76px;
  font-family: inherit;
}
.payment-guests-extra { margin-top: 8px; }
.payment-guests-extra__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f2effe;
  border: none;
  border-radius: 10px;
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #7C5CFF;
  cursor: pointer;
  transition: .2s;
  margin-top: 10px;
}
.payment-guests-extra__toggle:hover { background: #e9e4fd; }
.payment-guests-extra__toggle i { transition: transform .2s; font-size: 11px; }
.payment-guests-extra__toggle.is-open i { transform: rotate(180deg); }
.payment-guests-extra__note {
  font-size: 12.5px;
  color: #8a8aa3;
  margin: 8px 0 4px;
  line-height: 1.5;
}
.payment-form__item_extra { margin-top: 10px; }
.payment-form__item-title_small { font-size: 15px; }
.payment-arrival__row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.payment-arrival__time { flex: 0 0 220px; }
.payment-arrival__hint { font-size: 13px; color: #8a8aa3; }

/* ============================================================
   Layout страницы оплаты (по образцу Ostrovok): слева основной
   поток (шапка заказа, форма, доп. инфо), справа липкий сайдбар
   «Стоимость номера» — всё под рукой, без лишнего скролла.
   ============================================================ */
.payment-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 384px;
  gap: 28px;
  align-items: start;
  margin-top: 35px;
}
.payment-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.payment-main .payment-dop { margin-top: 0; }
.payment-side { position: sticky; top: 96px; }
.payment-side__card { padding: 18px 20px 20px; }
@media only screen and (max-width: 1100px) {
  .payment-layout { grid-template-columns: 1fr; }
  .payment-side { position: static; }
}

/* Шапка заказа: фото + название/адрес/номер + даты заезда/выезда */
.pay-head {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
}
.pay-head__photo {
  width: 128px;
  height: 100px;
  border-radius: 12px;
  background: #eef0f4 center/cover no-repeat;
}
.pay-head__name { font-size: 17px; font-weight: 800; line-height: 1.3; }
.pay-head__addr { font-size: 13px; color: #8a8aa3; margin-top: 3px; }
.pay-head__addr:empty { display: none; }
.pay-head__room { font-size: 14.5px; font-weight: 600; margin-top: 8px; }
.pay-head__bed { font-size: 13px; color: #8a8aa3; margin-top: 2px; }
.pay-head__bed:empty { display: none; }
.pay-head__dates {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 18px;
  border-left: 1px solid #ececf3;
  min-width: 132px;
}
.pay-head__dates span { display: block; font-size: 12px; color: #8a8aa3; }
.pay-head__dates i { font-style: normal; }
.pay-head__dates b { font-size: 15px; font-weight: 700; }
.pay-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #f0f0f6;
}
.pay-badge { display: flex; align-items: flex-start; gap: 7px; font-size: 13.5px; }
.pay-badge span { font-size: 15px; line-height: 1.2; }
.pay-badge b { font-weight: 700; display: block; line-height: 1.25; }
.pay-badge small { display: block; font-size: 12px; color: #8a8aa3; }
.pay-badge.is-good b, .pay-badge.is-good span { color: #1a9e5f; }
.pay-badge.is-good small { color: #1a9e5f; }
.pay-badge.is-bad b, .pay-badge.is-bad span { color: #cf222e; }
.pay-guests {
  margin-top: 12px;
  font-size: 13.5px;
  color: #8a8aa3;
}
.pay-guests b { color: #1a1a2e; font-weight: 600; }
@media only screen and (max-width: 720px) {
  .pay-head { grid-template-columns: 96px minmax(0, 1fr); }
  .pay-head__photo { width: 96px; height: 84px; }
  .pay-head__dates {
    grid-column: 1 / -1;
    flex-direction: row;
    gap: 24px;
    border-left: none;
    padding-left: 0;
    padding-top: 10px;
    border-top: 1px solid #f0f0f6;
  }
}

/* Двухфазный поиск: баннер «Загружаем актуальные цены…» над мгновенными
   карточками + плейсхолдер цены на карточке */
.aif-prices-note {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  margin-bottom: 16px;
  background: linear-gradient(120deg, #f6f3ff, #fff);
  border: 1px solid #e6defc;
  border-radius: 12px;
  font-size: 13.5px;
  color: #55556b;
  line-height: 1.5;
}
.aif-prices-note__plane {
  font-size: 18px;
  animation: aifFly 2.6s ease-in-out infinite;
}
.catalog-item__price_pending b {
  font-size: 14px;
  font-weight: 600;
  color: #8a8aa3;
  background: linear-gradient(90deg, #edf0f5 0%, #f8f9fc 45%, #edf0f5 90%);
  background-size: 240% 100%;
  animation: hotelSkeleton 1.15s ease-in-out infinite;
  border-radius: 8px;
  padding: 4px 10px;
}

/* Переключатель способа оплаты (USDT / СБП) в сайдбаре оплаты */
.pay-method {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 16px 0 4px;
}
.pay-method__item {
  border: 1.5px solid #e4e6ef;
  border-radius: 12px;
  padding: 10px 12px;
  text-align: center;
  cursor: pointer;
  transition: .18s;
  user-select: none;
}
.pay-method__item b { display: block; font-size: 14.5px; }
.pay-method__item span { display: block; font-size: 11.5px; color: #8a8aa3; margin-top: 1px; }
.pay-method__item:hover { border-color: #c9bcff; }
.pay-method__item.is-active {
  border-color: #7C5CFF;
  background: #f6f3ff;
}
.pay-method__item.is-active b { color: #7C5CFF; }

/* Кнопка «Открыть в приложении банка» в СБП-режиме окна оплаты */
.popup-qr__bank {
  display: block;
  margin-top: 14px;
  padding: 13px 16px;
  border-radius: 12px;
  background: #7C5CFF;
  color: #fff !important;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: .18s;
}
.popup-qr__bank:hover { background: #6a4be6; }

/* Режим Telegram Mini App: убираем сайтовую обвязку — навигация телеграмовская */
.tg-app .header,
.tg-app .footer,
.tg-app .payment-new-search,
.tg-app .header-popup { display: none !important; }
.tg-app main { padding-top: 8px; }
.tg-app .payment-title h1 { font-size: 24px; }

/* ===== Отзывы гостей (фид ETG) ===== */
.single-rating {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 8px 0 4px; cursor: pointer;
}
.single-rating b {
  background: #7C5CFF; color: #fff; font-size: 15px; font-weight: 800;
  border-radius: 8px; padding: 4px 9px;
}
.single-rating span { font-size: 13.5px; color: #55556b; font-weight: 600; }

.reviews-section { padding: 24px 0; }
.reviews-title { font-size: 24px; font-weight: 800; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.reviews-score { font-size: 15px; color: #7C5CFF; font-weight: 700; }
.rv-details {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px 24px; margin: 18px 0 6px;
}
.rv-detail { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.rv-detail span { flex: 0 0 100px; color: #55556b; }
.rv-detail b { flex: 0 0 30px; text-align: right; font-weight: 700; }
.rv-bar { flex: 1; height: 6px; border-radius: 3px; background: #eceef4; overflow: hidden; }
.rv-bar i { display: block; height: 100%; background: #7C5CFF; border-radius: 3px; }
.rv-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 18px; }
.rv-card { background: #fff; border: 1px solid #ececf3; border-radius: 14px; padding: 16px 18px; }
.rv-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rv-author { font-size: 14.5px; font-weight: 700; }
.rv-date { font-size: 12px; color: #8a8aa3; }
.rv-mark { margin-left: auto; background: #f2effe; color: #7C5CFF; font-weight: 800;
  font-size: 13px; border-radius: 7px; padding: 3px 8px; }
.rv-plus, .rv-minus { font-size: 13.5px; line-height: 1.5; margin: 3px 0; }
.rv-plus span { color: #1a9e5f; font-weight: 800; }
.rv-minus span { color: #cf222e; font-weight: 800; }
.rv-empty { font-size: 13px; color: #8a8aa3; font-style: italic; }
.rv-room { font-size: 12px; color: #8a8aa3; margin-top: 8px; }
/* Реальные фото гостей в отзыве */
.rv-photos { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; }
.rv-photo {
  display: block; width: 74px; height: 74px; border-radius: 10px; overflow: hidden;
  cursor: pointer; background: #f2f2f7; flex: 0 0 auto;
}
.rv-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.rv-photo:hover img { transform: scale(1.06); }
/* Агрегированная галерея «Реальные фото гостей» */
.rv-gallery { margin: 6px 0 20px; }
.rv-gallery__title { font-size: 16px; font-weight: 700; margin-bottom: 12px; }
.rv-gallery__title span {
  font-size: 13px; font-weight: 600; color: #7C5CFF; background: #f2effe;
  border-radius: 20px; padding: 2px 10px; margin-left: 6px;
}
.rv-gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.rv-gallery__item {
  display: block; aspect-ratio: 1/1; border-radius: 12px; overflow: hidden;
  cursor: pointer; background: #f2f2f7;
}
.rv-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.rv-gallery__item:hover img { transform: scale(1.07); }
/* Чипы-фильтры отзывов */
.rv-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.rv-chip {
  display: inline-flex; align-items: center; gap: 6px; font-family: inherit;
  font-size: 13.5px; font-weight: 600; color: #55556b; cursor: pointer;
  background: #f3f2f8; border: 1.5px solid transparent; border-radius: 22px; padding: 8px 15px;
  transition: background .15s, border-color .15s, color .15s;
}
.rv-chip:hover { border-color: #c9bcff; }
.rv-chip.is-active { background: #f2effe; border-color: #7C5CFF; color: #5b3ff0; }
.rv-chip i { font-style: normal; font-size: 12px; opacity: .7; }
/* Кнопка «Отзывы гостей» в баннере отеля */
.single-banner__reviews {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;
  padding: 9px 16px; border-radius: 12px; text-decoration: none;
  background: #f2effe; border: 1.5px solid #d9d0ff; transition: background .15s, border-color .15s;
}
.single-banner__reviews:hover { background: #e9e3ff; border-color: #7C5CFF; }
.single-banner__reviews b { font-size: 15px; font-weight: 800; color: #5b3ff0; }
.single-banner__reviews span { font-size: 13.5px; font-weight: 600; color: #5b3ff0; }
.rv-more {
  display: block; margin: 20px auto 0; border: 1.5px solid #7C5CFF; background: #fff;
  color: #7C5CFF; font-weight: 700; font-size: 14.5px; border-radius: 12px;
  padding: 11px 28px; cursor: pointer;
}
.rv-more:hover { background: #f6f3ff; }

/* Бейдж рейтинга на карточке каталога */
.catalog-item__rating {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
}
.catalog-item__rating b {
  background: #7C5CFF; color: #fff; font-size: 13px; font-weight: 800;
  border-radius: 6px; padding: 2px 7px;
}
.catalog-item__rating span { font-size: 12px; color: #8a8aa3; }

/* ─── Отель занят на выбранные даты ────────────────────────────────────────
   Раньше это состояние было тупиком: заголовок «недоступен» и целая страница
   справочной информации, которой нельзя воспользоваться. Блок ниже даёт три
   ответа — когда отель свободен, какие даты заняты и что взять вместо. */
.hb-busy {
  margin-top: 20px; padding: 24px; border-radius: 16px; background: #fff;
  box-shadow: 0 1px 3px 0 rgba(11,11,16,.02), 0 8px 16px 0 rgba(11,11,16,.04);
}
.hb-busy__title { font-size: 22px; font-weight: 600; margin: 0 0 6px; }
.hb-busy__lead { margin: 0 0 20px; color: #8a86a3; font-size: 15px; }
.hb-busy__sub {
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #a6a3bb; margin: 24px 0 12px;
}
.hb-busy__note { font-size: 13px; color: #9b98b0; margin: 10px 0 0; }
.hb-busy__spinner { color: #8a86a3; font-size: 15px; }

/* Ближайшие свободные окна */
.hb-windows { display: flex; flex-wrap: wrap; gap: 10px; }
.hb-window {
  display: inline-flex; flex-direction: column; gap: 2px; padding: 12px 18px;
  border-radius: 12px; background: #F1EDFF; color: #3a3852; text-decoration: none;
  transition: background .15s;
}
.hb-window:hover { background: #E4DCFF; }
.hb-window b { font-size: 15px; font-weight: 600; }
.hb-window span { font-size: 13px; color: #7d78a0; }

/* Календарь занятости. Три состояния, и «не проверяли» — полноправное:
   за пределами опрошенного окна мы про даты ничего не знаем. */
.hb-cal { display: flex; flex-wrap: wrap; gap: 6px; }
.hb-cal__day {
  min-width: 44px; padding: 7px 6px; border-radius: 9px; text-align: center;
  font-size: 12px; line-height: 1.25;
}
.hb-cal__day b { display: block; font-size: 13px; font-weight: 600; }
.hb-cal__day_free { background: #E9F7EE; color: #2f7d4c; }
.hb-cal__day_busy { background: #FBECEC; color: #b04a4a; }
.hb-cal__day_unknown { background: #F2F1F6; color: #9b98b0; }
.hb-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; font-size: 13px; color: #8a86a3; }
.hb-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }

/* Альтернативы */
.hb-alts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hb-alt {
  display: flex; flex-direction: column; border-radius: 14px; overflow: hidden;
  background: #fff; border: 1px solid #EDEAF6; text-decoration: none; color: inherit;
  transition: border-color .15s, transform .15s;
}
.hb-alt:hover { border-color: #C9BCFF; transform: translateY(-2px); }
.hb-alt__photo { aspect-ratio: 3 / 2; background: #F2F1F6 center / cover no-repeat; }
.hb-alt__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.hb-alt__name { font-size: 15px; font-weight: 600; line-height: 1.3; }
.hb-alt__meta { font-size: 13px; color: #8a86a3; }
.hb-alt__price { margin-top: 6px; font-size: 15px; font-weight: 700; }
.hb-alt__price span { font-weight: 400; font-size: 13px; color: #8a86a3; }

@media only screen and (max-width: 1200px) { .hb-alts { grid-template-columns: repeat(2, 1fr); } }
@media only screen and (max-width: 720px) {
  .hb-busy { padding: 18px; }
  .hb-busy__title { font-size: 19px; }
  .hb-alts { grid-template-columns: 1fr; }
  .hb-cal__day { min-width: 40px; }
}

/* ─── Хлебные крошки в воронке ─────────────────────────────────────────────
   Со страницы отеля и из выдачи не было пути назад: гость приходил из поиска
   или из Google и упирался в тупик. Оформление повторяет .seo__crumbs на
   посадочных страницах, чтобы навигация выглядела одинаково по всему сайту. */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 13px; color: #8c89a6; margin-bottom: 14px; min-height: 18px;
}
.crumbs a { color: #6b4ef0; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span { color: #8c89a6; }
.crumbs i { font-style: normal; color: #c3c0d4; }
@media only screen and (max-width: 720px) {
  .crumbs { font-size: 12px; margin-bottom: 10px; }
}

/* ─── Заглушка вместо неавторизованной карты ───────────────────────────────
   Google рисует серый холст с водяным знаком и своей модалкой поверх, если у
   проекта не подключён биллинг. Показываем вместо этого адрес и ссылку в
   карты — она работает без ключа. */
.map-fallback {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 8px; height: 100%; min-height: 180px; padding: 24px;
  border-radius: 14px; background: #F5F4F9;
}
.map-fallback__title { margin: 0; font-size: 15px; font-weight: 600; color: #3a3852; }
.map-fallback__address { margin: 0; font-size: 14px; color: #8a86a3; }
.map-fallback__link {
  margin-top: 4px; font-size: 14px; font-weight: 600;
  color: #6b4ef0; text-decoration: none;
}
.map-fallback__link:hover { text-decoration: underline; }

/* Каталог без выбранного города: направления вместо пустой страницы. */
.catalog-cities { padding: 8px 0 24px; }
.catalog-cities__title { font-size: 20px; font-weight: 700; margin: 0 0 16px; color: #1a1a2e; }
.catalog-cities__list { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.catalog-cities__list a { display: inline-flex; align-items: baseline; gap: 8px;
    padding: 10px 16px; border-radius: 12px; background: #fff; color: #1a1a2e;
    border: 1px solid #e6defc; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.catalog-cities__list a:hover { border-color: #7C5CFF; box-shadow: 0 4px 14px rgba(124,92,255,.15); }
.catalog-cities__list span { font-size: 12px; color: #8a8aa3; }

/* Шапка: меню прижато к логотипу, кнопки остаются справа.
   main.css собирается из SCSS — правим здесь. Авто-отступ перебивает
   justify-content: flex-end у .header-wrap. */
.header-menu { margin-right: auto; }
@media only screen and (max-width: 1200px) { .header-menu { margin-right: 24px; } }

/* ---------------------------------------------------------------------------
 * Каталог: карта — постоянная третья колонка (десктоп ≥1200px)
 *
 * Было: карта пряталась за кнопкой «Показать карту», а при её открытии список
 * ужимался до 205px — смотреть выдачу и карту одновременно было нельзя.
 * Стало: фильтры | список | карта на экране сразу.
 *
 * Ширину контента снимаем с 888px: три колонки в неё не помещаются. Карта
 * лежит в .map-window — она absolute относительно body, поэтому правое поле
 * контента держим ровно под её ширину, иначе список уедет под карту.
 * ------------------------------------------------------------------------- */
@media only screen and (min-width: 1200px) {
    .catalog .section-frame {
        max-width: none;
        padding-left: 24px;
        padding-right: calc(40% + 24px);
    }

    .map-window {
        width: 40%;
    }

    /* .map прячется через opacity и pointer-events, а показывается классом
       .active по кнопке. На десктопе кнопки больше нет — показываем сразу.
       Прозрачность снимаем только с самой карты: у потомков она бывает своя. */
    .map {
        opacity: 1;
        pointer-events: auto;
    }
    .map * {
        pointer-events: auto;
    }

    /* Переключатели «Показать карту» / «Открыть списком» на десктопе лишние:
       обе колонки и так на экране. */
    .catalog-banner__map,
    .catalog-open,
    .catalog.open .catalog-open {
        display: none !important;
    }
}

/* Тумблер «Искать при перемещении карты» — поверх карты, справа сверху.
   Лежит внутри .map, поэтому наследует её opacity и не мозолит глаза, пока
   карта скрыта. */
.map-move-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    z-index: 3;
    right: 16px;
    top: 16px;
    padding: 8px 12px;
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0 1px 3px rgba(11, 11, 16, .12), 0 8px 16px rgba(11, 11, 16, .08);
    font-size: 13px;
    line-height: 1.2;
    color: #1a1a2e;
    cursor: pointer;
    user-select: none;
}
.map-move-search input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #7C5CFF;
    cursor: pointer;
}
@media only screen and (max-width: 1200px) {
    /* На узком экране сверху уже висят «Даты», «Фильтры» и крестик — тумблер
       уводим под них, иначе он их перекрывает. */
    .map-move-search {
        right: 12px;
        top: 68px;
    }
}

/* Карта не поднялась — тумблер поиска по области прячем вместе с ней. */
.map.is-fallback .map-move-search {
    display: none;
}

/* Причина, по которой карта не поднялась. Видна только по ?mapdebug=1. */
.map-fallback__reason {
    margin: 8px 0 0;
    max-width: 320px;
    font-size: 12px;
    line-height: 1.35;
    color: #b0435a;
    text-align: center;
}

/* ---------------------------------------------------------------------------
 * Шапка во всю ширину экрана (десктоп).
 *
 * Была плавающей «таблеткой» в колонке 888px — на каталоге, где содержимое
 * занимает весь экран, она висела посреди пустоты, не совпадая ни с фильтрами
 * слева, ни с картой справа. Логотип уходит к левому краю, кнопки к правому,
 * как на витринах-конкурентах.
 * ------------------------------------------------------------------------- */
@media only screen and (min-width: 1200px) {
    .header {
        top: 0;
    }

    .header .section-frame {
        max-width: none;
        padding-left: 24px;
        padding-right: 24px;
    }

    .header-frame {
        border-radius: 0;
        padding: 10px 0;
    }
    /* Белым закрашена вся полоса, а не только середина: иначе под шапкой
       просвечивало бы содержимое страницы. Полосу рисует псевдоэлемент.
       Раньше это была тень с огромным разбросом, обрезанная clip-path по
       вертикали, — и та же обрезка съедала выпадающие списки виджетов
       шапки: на каталоге, в карточке отеля и на оплате они не открывались
       вовсе. На главной ошибки не было видно, потому что там обрезка снята. */
    .header-frame::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -100vmax;
        right: -100vmax;
        background: #fff;
        z-index: -1;
    }
}

/* ---------------------------------------------------------------------------
 * Первый экран главной: заголовок и поиск в одном цветном блоке.
 *
 * Было: баннер с фотографией, а форма поиска — отдельным блоком под ним.
 * Гость приходит искать отель, а поиск оказывался ниже сгиба.
 * Стало: один блок во всю ширину, крупный заголовок и строка поиска сразу.
 * ------------------------------------------------------------------------- */
.hero {
    /* body держит padding-top: 80px как место под фиксированную шапку. Цвет
       первого экрана должен доходить до самого верха, поэтому забираем этот
       отступ себе: вытягиваем блок вверх и добавляем столько же внутрь. */
    margin-top: -80px;
    padding-top: 80px;
    padding-bottom: 40px;
    border-radius: 0 0 32px 32px;
    background: #C8F45C;
}

.hero .banner {
    /* Шапка фиксированная и места не занимает — отступ задаём здесь.
       Собственный margin-top баннера обнуляем, иначе между шапкой и
       заголовком повисает пустая полоса. */
    margin-top: 0;
    padding-top: 28px;
}

.hero .banner-wrap {
    /* Заголовок лежит прямо на цветном фоне, а не в белой карточке. */
    display: block;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.hero .banner-title {
    font-size: 52px;
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
}

.hero .booking {
    margin-top: 36px;
}

@media only screen and (min-width: 1200px) {
    /* Содержимое первого экрана — центральная колонка, а не во всю ширину.
       Поля, растянутые от края до края, теряют композицию: заголовок
       прилипает к рамке окна, а строка поиска расползается. Шапка при этом
       остаётся во всю ширину — как и задумано. */
    .hero .section-frame {
        width: 78%;
        max-width: 1440px;
        margin: 0 auto;
        padding-left: 0;
        padding-right: 0;
    }

    /* Пропорции строки поиска. Направление шире остальных, но не вдвое, а
       кнопка «Найти» — заметная, а не приставка сбоку. */
    .hero .booking-group {
        grid-gap: 10px;
        align-items: stretch;
    }
    .hero .booking-search { flex: 46 1 0; }
    /* «Заезд» и «Выезд» — фиксированной ширины, из-за чего справа от них
       оставалась пустая полоса, и промежуток до гостей был втрое больше
       остальных. Пусть делят свой блок поровну. */
    .hero .booking-date__item { flex: 1 1 0; width: auto; }
    .hero .booking-date   { flex: 26 1 0; }
    .hero .booking-room   { flex: 12 1 0; }
    .hero .booking-sub    { flex: 14 1 0; margin-top: 0; }
}

@media only screen and (max-width: 1200px) {
    .hero .banner {
        padding-top: 24px;
    }
    .hero .banner-title {
        font-size: 34px;
    }
}

@media only screen and (max-width: 720px) {
    .hero .banner-title {
        font-size: 27px;
    }
}

/* Блок «Почему с нами удобно» — три карточки-факта вместо трёх абзацев.
   Цифра и короткая формулировка читаются с одного взгляда, длинный текст
   с иконкой — нет. */
.advantages-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.advantages-item {
    padding: 28px;
    border-radius: 20px;
    background: #F1EDFF;
    box-sizing: border-box;
}
.advantages-item__lead {
    margin: 0;
    font-size: 34px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #6B4EF0;
}
.advantages-item__info {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.45;
    color: #3A3852;
}
.advantages-item_accent {
    background: #6B4EF0;
}
.advantages-item_accent .advantages-item__lead,
.advantages-item_accent .advantages-item__info {
    color: #fff;
}
@media only screen and (max-width: 1200px) {
    .advantages-list {
        grid-template-columns: 1fr;
    }
    .advantages-item__lead {
        font-size: 28px;
    }
}

/* Главная: шапка лежит на цветном первом экране, а не белой полосой над ним.
   Поэтому на ней снимаем белый фон и подложку во всю ширину — их ставит
   общее правило шапки. */
@media only screen and (min-width: 1200px) {
    .page-home .header-frame {
        background: transparent;
    }
    .page-home .header-frame::before {
        display: none;
    }
}

/* Поля поиска лежат прямо на цвете: белая карточка вокруг них дублировала бы
   белые поля и глушила цвет. */
.hero .booking-form {
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}


/* На цветном первом экране бледная кнопка сливается с фоном — делаем белой. */
@media only screen and (min-width: 1200px) {
    .page-home .header-create {
        background: #fff;
        color: #4C1D95;
    }
}

/* Кнопка поиска на первом экране — оранжевая: на лаймовом фоне это самый
   заметный цвет, и она перестаёт теряться среди белых полей. */
.hero .booking-sub {
    background: #FF6A1A;
    color: #fff;
}
.hero .booking-sub:hover {
    background: #F25C0A;
}
.hero .booking-sub span {
    color: #fff;
}

/* ---------------------------------------------------------------------------
 * Ряд виджетов в шапке: помощь и меню.
 *
 * Иконка сама по себе ничего не объясняет, поэтому за каждой стоит выпадающий
 * список с настоящими адресами. Виджетов, за которыми у нас ничего нет
 * (уведомления и выбор валюты), здесь намеренно нет: пустая иконка хуже
 * её отсутствия. Валюта одна — рубль, уведомлений система не шлёт.
 * ------------------------------------------------------------------------- */
.header-tools {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-right: 8px;
}
@media only screen and (max-width: 1200px) {
    /* На узких экранах уже есть своё меню-бургер — второго не нужно. */
    .header-tools { display: none; }
}

.header-tool {
    position: relative;
}
.header-tool__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #1D1D20;
    cursor: pointer;
    transition: background .15s;
}
.header-tool__btn:hover,
.header-tool.is-open .header-tool__btn {
    background: rgba(255, 255, 255, .55);
}

.header-tool__drop {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 240px;
    padding: 14px 0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(11, 11, 16, .06), 0 12px 32px rgba(11, 11, 16, .12);
    z-index: 30;
}
.header-tool.is-open .header-tool__drop {
    display: block;
}
.header-tool__drop_wide {
    min-width: 280px;
}

.header-tool__group {
    margin: 0;
    padding: 6px 20px 2px;
    font-size: 12px;
    color: #8A86A3;
}
.header-tool__group + .header-tool__group {
    border-top: 1px solid #F0EEF7;
    margin-top: 8px;
    padding-top: 12px;
}
.header-tool__link {
    display: block;
    padding: 8px 20px;
    font-size: 15px;
    font-weight: 600;
    color: #6B4EF0;
    text-decoration: none;
}
.header-tool__link:hover {
    background: #F6F3FF;
}


/* --- Выбор языка -----------------------------------------------------------
 * Список длинный: тридцать с лишним строк не помещаются на экран, поэтому
 * он прокручивается внутри себя, а не тянет за собой страницу.
 * -------------------------------------------------------------------------- */
.header-tool__btn_lang {
    width: auto;
    gap: 4px;
    padding: 0 10px;
}
.header-tool__code {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
}

.header-tool__drop_lang {
    min-width: 260px;
    padding-bottom: 8px;
}
.header-langs {
    max-height: 320px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.header-lang {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 20px;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    color: #1D1D20;
    text-align: left;
    cursor: pointer;
}
.header-lang:hover {
    background: #F6F3FF;
}
.header-lang.is-current {
    font-weight: 700;
    color: #6B4EF0;
}
.header-lang__flag {
    flex: none;
    width: 22px;
    font-size: 16px;
    line-height: 1;
}

/* Языки, которые пишутся справа налево: разворачиваем текст, но не разметку —
 * шапку и карточки перекладывать зеркально мы не готовили. */
[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}
[dir="rtl"] .header-lang {
    text-align: right;
}

/* ── Избранное ─────────────────────────────────────────────────────────── */

/* Сердечко в шапке. Ссылка, а не кнопка: ведёт на отдельную страницу. */
.header-tool__btn_fav {
    position: relative;
    text-decoration: none;
    color: #1D1D20;
    flex: 0 0 auto;
}
.header-tool__btn_fav.has-items {
    color: #2F4FE0;
}
.header-tool__count {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: #2F4FE0;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}
[dir="rtl"] .header-tool__count {
    right: auto;
    left: 3px;
}

/* Сердечко на карточке и на странице отеля. Контур, пока не нажато. */
.fav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 1px 3px rgba(11, 11, 16, .18);
    cursor: pointer;
    transition: transform .12s, background .15s;
}
.fav-btn:hover {
    transform: scale(1.08);
}
.fav-btn svg path {
    fill: none;
    stroke: #1D1D20;
    stroke-width: 2;
    stroke-linejoin: round;
    transition: fill .15s, stroke .15s;
}
.fav-btn.is-active svg path {
    fill: #2F4FE0;
    stroke: #2F4FE0;
}

/* Поверх фотографии карточки. Галерея уже position: relative. */
.fav-btn_card {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
}
[dir="rtl"] .fav-btn_card {
    right: auto;
    left: 12px;
}

.single-banner__head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.fav-btn_single {
    flex: 0 0 auto;
    background: #fff;
}

/* ── Страница избранного ───────────────────────────────────────────────── */

.favorites {
    padding: 24px 0 64px;
}
.favorites__title {
    margin: 12px 0 24px;
    font-size: 30px;
    line-height: 1.25;
}
.favorites__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}
.fav-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(11, 11, 16, .06), 0 8px 24px rgba(11, 11, 16, .07);
    overflow: hidden;
}
.fav-card__photo {
    display: block;
    aspect-ratio: 4 / 3;
    background: #EEEEF2;
}
.fav-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fav-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px 18px;
}
.fav-card__title {
    color: #1D1D20;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
}
.fav-card__title:hover {
    text-decoration: underline;
}
.fav-card__star {
    display: flex;
    gap: 2px;
}
.fav-card__star img {
    width: 14px;
    height: 14px;
}
.fav-card__address {
    color: #6B6B85;
    font-size: 13px;
    line-height: 1.4;
}
.fav-card__rating {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}
.fav-card__rating b {
    padding: 3px 8px;
    border-radius: 8px;
    background: #2F4FE0;
    color: #fff;
}
.fav-card__rating span {
    color: #6B6B85;
}
.fav-card__btn {
    margin-top: 4px;
    padding: 10px 14px;
    border-radius: 12px;
    background: #6C5CE7;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.favorites__empty {
    max-width: 560px;
    padding: 32px 0;
}
.favorites__empty-title {
    font-size: 17px;
    line-height: 1.5;
}
.favorites__empty-note {
    margin-top: 10px;
    color: #6B6B85;
    line-height: 1.5;
}
.favorites__empty-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 13px 26px;
    border-radius: 14px;
    background: #6C5CE7;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}
.favorites__warn {
    margin-top: 20px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #FFF7E6;
    color: #6B5A2E;
    font-size: 14px;
    line-height: 1.5;
}

/* ── Липкий поиск ──────────────────────────────────────────────────────── */

/* Высоту задаёт скрипт по фактическому размеру блока. flow-root, чтобы
   верхний отступ блока не выпал наружу и не сдвинул всё на 36px. */
.sticky-search__dock {
    display: flow-root;
}

/* Пока страница не прокручена, за шапкой лаймовый герой, и своего фона ей
   не нужно. Как только поиск прилип — сквозь неё поехало бы содержимое
   страницы, поэтому красим полосу в цвет героя: шапка и поиск читаются как
   один блок. Фон настоящий, на полноширинном контейнере: псевдоэлемент с
   отрицательным z-index здесь не проявляется. */
.page-home.is-search-docked .header .section-frame {
    background: #C8F45C;
    /* У .header свой padding-top 12px, и над «таблеткой» шапки оставалась
       непрокрашенная полоса. Забираем этот отступ себе — тот же приём, что
       у .hero выше по файлу: блок тянем вверх и добавляем столько же внутрь,
       поэтому шапка остаётся на месте, а цвет доходит до верха экрана. */
    margin-top: -12px;
    padding-top: 12px;
}

/* Прилипший поиск идёт под шапкой: у неё z-index 20. Цвет тот же, что у
   героя, — сверху получается одна сплошная лаймовая полоса. */
.booking.is-docked {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 19;
    /* Свой margin-top 36px увёл бы прилипшую строку из-под шапки. */
    margin: 0;
    padding: 10px 0 14px;
    background: #C8F45C;
    box-shadow: 0 6px 20px rgba(11, 11, 16, .10);
}
/* «Только квартиры» — уточнение, а не часть запроса: в прилипшей строке
   оно съедало бы высоту на телефоне, где её и так мало. */
.booking.is-docked .booking-toggle {
    display: none;
}