/* HotelWidget: supplied Pop-up Бронь 1-3 palette and typography.
   Раньше здесь стояло «внутренности виджета настраиваются только штатной
   темой». Это оказалось не так: проверено на живом виджете — портал Контура
   это обычный DOM в body (ни iframe, ни shadow DOM), наши правила к нему
   применяются. Карта устойчивых зацепок — в конце файла. */
.booking-system {
  width: min(1240px, calc(100% - 64px));
  max-width: 1240px;
  max-height: calc(100dvh - 64px);
  margin: 32px auto;
  padding: 0;
  border: 0;
  border-radius: 40px;
  background: #f7f0e6;
  color: #494949;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  overscroll-behavior: contain;
}

.booking-system::backdrop { background: rgb(17 24 43 / 65%); }
/* The SDK owns the active overlay/backdrop while our native top layer is suspended. */
.booking-system.booking-system--vendor-open {
  position: fixed;
  inset: auto;
  top: min(var(--booking-layer-top), max(0px, calc(100dvh - var(--booking-layer-height))));
  left: max(0px, calc((100vw - var(--booking-layer-width)) / 2));
  width: min(100vw, var(--booking-layer-width));
  height: min(100dvh, var(--booking-layer-height));
  margin: 0;
  z-index: var(--booking-layer-z, 0);
}
.booking-system .booking-modal__inner { padding: 60px 32px 32px; }
.booking-system .booking-modal__title {
  margin: 0 64px 40px;
  color: #847f57;
  font-family: 'Etude Noire', sans-serif;
  font-weight: 500;
  font-size: 64px;
  line-height: 67px;
  text-align: center;
}
.booking-system .booking-modal__close {
  position: absolute;
  z-index: 2;
  top: 32px;
  right: 32px;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: rgb(132 127 87 / 15%);
  color: #847f57;
  font-size: 36px;
  line-height: 1;
}
.booking-system .booking-modal__close:hover { background: rgb(132 127 87 / 25%); }
.booking-system .booking-modal__lead { max-width: none; margin: 0 0 24px; }
.booking-system .booking-modal__loading { margin: 24px 0; }
.booking-system .kontur-host { min-width: 0; min-height: 100px; }
.booking-system #BookingFormWidget { margin-top: 0; }
.booking-system .booking-system__section { margin-top: 32px; min-width: 0; }
.booking-system .booking-system__section > h3 {
  margin: 0 0 24px;
  font-family: 'Montserrat', sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 29px;
}
.booking-system [hidden] { display: none !important; }

@media (min-width: 1280px) and (min-height: 960px) {
  .booking-system { margin-top: 160px; max-height: calc(100dvh - 192px); }
}

/* No mobile frame was supplied: fluid adaptation of the desktop shell. */
@media (max-width: 1100px) {
  .booking-system .booking-modal__title { font-size: 44px; line-height: 48px; }
}
@media (max-width: 767px) {
  .booking-system {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
    font-size: 16px;
    line-height: 24px;
  }
  .booking-system .booking-modal__inner { padding: 80px 16px 32px; }
  .booking-system .booking-modal__title {
    margin: 0 0 24px;
    font-size: clamp(24px, 5.5vw, 40px);
    line-height: 1.15;
    overflow-wrap: anywhere;
  }
  .booking-system .booking-modal__close { position: fixed; top: 16px; right: 16px; }
}

/* =========================================================================
   Внутренности виджета Контура

   Модель темы Контура (см. widgetTheme() в kontur.js) умеет только цвета
   кнопок, скругления и порог адаптива — шрифта в ней нет вообще. Но сам
   виджет рендерится обычным DOM: портал лежит в body как <div class="react-ui">,
   без iframe и без shadow DOM, поэтому наш CSS до него достаёт.

   Классы виджета захешированы (react-ui-1tkv7o8) и меняются от сборки к
   сборке — цепляться только за атрибуты data-tid и data-*, они смысловые.
   Снято с живого виджета:
     [data-tid="Calendar__root"]              календарь целиком
     [data-tid="DayCellView__root"]           ячейка дня
     [data-date-range-picker-day]             она же, у выбора диапазона
     [data-tid="MonthView__month"]            сетка месяца
     [data-tid="MonthView__headerMonth"]      подпись месяца
     [data-tid="MonthView__headerYear"]       подпись года
     [data-tid="DateRangePicker__root"]       блок «Заезд — Выезд»
     [data-tid="DateRangePicker__start"]      поле заезда
     [data-tid="DateRangePicker__end"]        поле выезда
     [data-tid="InputLikeText__input"]        поле ввода даты
     [data-tid="DateInput__icon"]             иконка календаря в поле
     [data-tid="DateFragmentsView__placeholder"] плейсхолдер дд.мм.гггг
     [data-tid="Button__rootElement"]         кнопка виджета
     [data-tid="Select__root"]                выпадающий список
     [data-tid="PopupContent"]                всплывающий слой

   Ниже — только типографика: виджет приходит с фирменным шрифтом Контура
   (Lab Grotesque), и внутри нашего окна он читается как чужой. Замер до и
   после подмены: ячейка дня 32×32, календарь 260×450, кнопка 278, поле 83
   — размеры не изменились ни на пиксель, обрезанных элементов нет.
   Цвета, кнопки, поля и карточки — в блоке «Оформление виджета Контура»
   в конце файла.
   ========================================================================= */
body:has(.booking-system[open]) > .react-ui,
body:has(.booking-system[open]) > .react-ui *,
.booking-system .kontur-host .react-ui,
.booking-system .kontur-host .react-ui * {
  font-family: 'Montserrat', system-ui, sans-serif !important;
}

/* Calendar palette from Pop-up Бронь 1 шаг.svg. Keep SDK sizing and
   virtual scrolling intact; selectors were checked on the live widget. */
body:has(.booking-system[open]) > .react-ui [data-tid="DateRangePicker__root"] > [data-tid="PopupContent"] {
  border-radius: 16px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #847f57 #f7f0e6;
}
body:has(.booking-system[open]) > .react-ui [data-tid="DateRangePicker__root"] [data-tid="DayCellView__root"] {
  color: #667595;
}
body:has(.booking-system[open]) > .react-ui [data-tid="DateRangePicker__root"] [data-tid="DayCellView__root"]:disabled {
  color: #cbd2e0;
}
body:has(.booking-system[open]) > .react-ui :is([data-tid="DateRangePicker__rangeStart"], [data-tid="DateRangePicker__rangeEnd"]) {
  background-color: #fff0e4;
}
body:has(.booking-system[open]) > .react-ui :is([data-tid="DateRangePicker__rangeStart"], [data-tid="DateRangePicker__rangeEnd"])::before {
  background-color: #ffcda6;
  border-radius: 50%;
}
body:has(.booking-system[open]) > .react-ui [data-tid="DateRangePicker__root"] [data-tid="DayCellView__root"]:focus-visible {
  outline: 2px solid #9b5026;
  outline-offset: -2px;
}

/* =========================================================================
   Оформление виджета Контура по макетам «Pop-up Бронь 1–3 шаг»

   Контур красит интерфейс своими токенами --k-color-* (у каждого есть
   запасное значение) и переменными темы --bm-theme-*, которые SDK пишет
   прямо в style у body. Переопределяем их внутри нашего окна и порталов
   виджета: одна замена перекрашивает все экраны сразу, включая те, до
   которых сейчас не дойти (выбор тарифа, данные гостя, оплата).
   Палитра сайта: кремовый #F7F0E6, плашки #E6DFD1, терракота #9B5026,
   олива #847F57, текст #494949, выделение #FFF0E4 / #FFCDA6.
   ========================================================================= */
/* Живой SDK ставит на портал data-k-brand/data-k-accent и задаёт по ним свои
   токены (специфичность 0,2,0) — поэтому селекторы с запасом по весу. */
.booking-system,
body:has(.booking-system[open]) > .react-ui,
:is(.booking-system, body:has(.booking-system[open]) > .react-ui)[data-k-brand][data-k-accent],
:is(.booking-system, body:has(.booking-system[open]) > .react-ui) [data-k-brand][data-k-accent] {
  --k-color-shape-bold-warning: #9b5026;
  --k-color-shape-bold-warning-hover: #843f1b;
  --k-color-shape-bold-warning-pressed: #6f3515;
  --k-color-line-warning-bold: #9b5026;
  --k-color-text-const-heavy-black: #f7f0e6;
  --k-color-shape-faint-warning: #fff0e4;
  --k-color-shape-faint-success: #fff0e4;
  --k-color-text-success-heavy: #847f57;
  --k-color-text-warning-heavy: #9b5026;
  --k-color-text-neutral-heavy: #494949;
  --k-color-text-accent-heavy: #494949;
  --k-color-text-accent-heavy-hover: #9b5026;
  --k-color-text-accent-heavy-pressed: #843f1b;
  --k-color-text-neutral-soft: #6f6a63;
  --k-color-text-neutral-pale: #8c8780;
  --k-color-text-neutral-faint: #a9a49c;
  --k-color-line-neutral-pale: #d9cfbf;
  --k-color-line-neutral-pale-hover: #b9ab96;
  --k-color-line-neutral-faint: #e6dfd1;
  --k-color-line-accent-bold: #9b5026;
  --k-color-shape-bold-accent: #9b5026;
  --k-color-shape-faint-neutral-alpha: #e6dfd1;
  --k-color-shape-pale-neutral-alpha: #d9cfbf;
  --k-color-shape-other-backless-hover: #efe8dc;
  --k-color-shape-other-disabled: #efe8dc;
  --k-color-customizable-bold-red: #9b5026;
  --k-color-customizable-heavy-red: #9b5026;
  --k-color-surface-modal-backdrop: rgb(17 24 43 / 65%);
}
/* Переменные темы SDK стоят в style у body — перебить их можно только с !important. */
body:has(.booking-system[open]) > .react-ui {
  --bm-theme-btnPayBg: #9b5026 !important;
  --bm-theme-btnPayTextColor: #f7f0e6 !important;
  --bm-theme-btnPayHoverBg: #843f1b !important;
  --bm-theme-btnPayHoverTextColor: #fff !important;
  --bm-theme-placeholderColor: #a9a49c !important;
  --bm-theme-bgGreenLightColor: #fff0e4 !important;
  --bm-theme-bgYellowLightColor: #fff0e4 !important;
  --bm-theme-fontRedColor: #9b5026 !important;
  --bm-theme-fontGreenColor: #847f57 !important;
  --bm-theme-fontBlackColor: #494949 !important;
  --bm-theme-fontBlackActiveColor: #494949 !important;
  --bm-theme-fontGrayColor: #8c8780 !important;
  --bm-theme-bgGrayLightColor: #e6dfd1 !important;
  --bm-theme-bgGrayColor: #e6dfd1 !important;
  --bm-theme-whiteColor: #fff !important;
}

/* Шрифт сайта во всём виджете: и в портале, и в карточках на странице окна. */
.booking-system .kontur-host,
.booking-system .kontur-host :not(svg, path, use) {
  font-family: 'Montserrat', system-ui, sans-serif !important;
}

/* ---------- Кнопки ----------
   Основные (терракотовые) — пилюля, как «Добавить»/«Оплатить» в макете;
   остальные — плашка #E6DFD1 со скруглением 10, как «Продолжить
   бронирование» и поля в шапке окна. Классы кнопок Контура захешированы,
   поэтому kontur.js помечает кнопку data-bs-kind="primary" / "neutral"
   по её исходному фону (терракотовый после замены токенов — основная). */
:is(.booking-system .kontur-host, body:has(.booking-system[open]) > .react-ui) [data-tid="Button__rootElement"] {
  border-radius: 10px !important;
  box-shadow: none !important;
  font-weight: 500 !important;
}
:is(.booking-system .kontur-host, body:has(.booking-system[open]) > .react-ui) [data-tid="Button__rootElement"][data-bs-kind="neutral"]:not(:disabled) {
  background-color: #e6dfd1 !important;
  color: #494949 !important;
}
:is(.booking-system .kontur-host, body:has(.booking-system[open]) > .react-ui) [data-tid="Button__rootElement"][data-bs-kind="neutral"]:not(:disabled):hover {
  background-color: #ddd3c1 !important;
}
:is(.booking-system .kontur-host, body:has(.booking-system[open]) > .react-ui) [data-tid="Button__rootElement"][data-bs-kind="primary"] {
  border-radius: 100px !important;
  color: #f7f0e6 !important;
  padding-inline: 28px !important;
}

/* ---------- Поля ----------
   Даты и гости — плашки #E6DFD1 без рамки, как строка «домик / даты /
   гости» в макете шагов 2–3. Текстовые поля формы гостя — белые с
   терракотовой рамкой 1px и скруглением 10, как в макете шага 3. */
:is(.booking-system .kontur-host, body:has(.booking-system[open]) > .react-ui) :is([data-tid="DateRangePicker__start"], [data-tid="DateRangePicker__end"]) {
  border-radius: 10px !important;
  background-color: #e6dfd1 !important;
  box-shadow: none !important;
}
:is(.booking-system .kontur-host, body:has(.booking-system[open]) > .react-ui) [data-tid="DateRangePicker__root"] > span:not([data-tid]) { color: #494949; }
:is(.booking-system .kontur-host, body:has(.booking-system[open]) > .react-ui) :is(label[data-tid="Input__root"], [data-tid="Input__root"], [data-tid="Textarea__root"], [data-tid="PhoneInput__root"]) {
  border-radius: 10px !important;
  box-shadow: 0 0 0 1px #9b5026 !important;
  background-color: #fff !important;
}
:is(.booking-system .kontur-host, body:has(.booking-system[open]) > .react-ui) [data-tid="InputLikeText__input"] { color: #494949 !important; }
:is(.booking-system .kontur-host, body:has(.booking-system[open]) > .react-ui) [data-tid="DateInput__icon"],
:is(.booking-system .kontur-host, body:has(.booking-system[open]) > .react-ui) [data-tid="Icon__root"] { color: #494949 !important; }

/* ---------- Карточки ---------- */
.booking-system .kontur-host {
  --bm-theme-container-bg: #fff;
  --bm-theme-container-border: 0;
  --bm-theme-container-borderRadius: 20px;
  --bm-theme-container-boxShadow: none;
  --bm-theme-container-outline: 0;
  --bm-theme-filterContainer-border: 0;
  --bm-theme-filterContainer-borderRadius: 20px 20px 0 0;
  --bm-theme-filterContainer-boxShadow: none;
  --bm-theme-photo-border: 0;
  --bm-theme-photo-borderRadius: 10px;
  --bm-theme-photo-boxShadow: none;
  --bm-theme-name-color: #494949;
  --bm-theme-name-fontSize: 24px;
  --bm-theme-name-fontWeight: 600;
  --bm-theme-name-lineHeight: 29px;
  --bm-theme-secondName-color: #6f6a63;
  --bm-theme-description-color: #494949;
  --bm-theme-description-fontSize: 16px;
  --bm-theme-description-lineHeight: 22px;
  --bm-theme-monthName-fontSize: 20px;
  --bm-theme-monthName-fontWeight: 500;
  --bm-theme-monthName-lineHeight: 24px;
  --bm-theme-arrowButtons-bg: #fff0e4;
}

/* ---------- Строка поиска (bookingForm) ----------
   В макете поля лежат прямо на кремовом фоне окна, без белой подложки. */
.booking-system #BookingFormWidget {
  --bm-theme-container-bg: transparent;
  --bm-theme-container-border: 0;
  --bm-theme-container-padding: 0;
  --bm-theme-container-boxShadow: none;
}
.booking-system #BookingFormWidget .VwZTwv { padding: 0 !important; border: 0 !important; background: transparent !important; }
.booking-system #BookingFormWidget :is([data-tid="DateRangePicker__start"], [data-tid="DateRangePicker__end"]) {
  height: 48px !important;
  padding: 0 8px !important;
  font-size: 16px !important;
}
.booking-system #BookingFormWidget [data-tid="Button__rootElement"] { height: 48px !important; font-size: 18px !important; }

/* ---------- Списки домиков и бани/беседок ----------
   В макете шага 2 каждая позиция — отдельная белая карточка со
   скруглением 20 и зазором, фото слева со скруглением 10. У Контура это
   одна лента с разделителями. Классы ниже — имена CSS-модулей виджета
   (не data-tid): зацепиться больше не за что. Если Контур пересоберёт
   виджет и имена сменятся, откатится только эта раскладка — цвета и
   шрифт держатся на токенах. */
.booking-system :is(#BookingRoomsWidget, #BookingHourlyWidget) {
  --bm-theme-container-bg: transparent;
  --bm-theme-container-border: 0;
  --bm-theme-container-padding: 0;
}
.booking-system :is(#BookingRoomsWidget, #BookingHourlyWidget) .ZAbtf8 { background: transparent !important; border: 0 !important; }
.booking-system :is(#BookingRoomsWidget, #BookingHourlyWidget) .ZSaP3T {
  margin-bottom: 20px;
  padding: 0 20px;
  border: 0 !important;
  border-radius: 20px;
  background: #fff;
}

/* ---------- Окна Контура поверх нашего (результаты поиска, номер, бронь) ----------
   По макету это то же окно «Онлайн-бронирование»: кремовый фон, крупное
   скругление, заголовок Etude Noire оливковым по центру, кнопка закрытия
   квадратной плашкой. «BookingLightbox» — не хешированное имя виджета. */
body:has(.booking-system[open]) > .react-ui .BookingLightbox [data-tid="modal-content"] > div:first-child {
  background-color: #f7f0e6 !important;
}
@media (min-width: 768px) {
  body:has(.booking-system[open]) > .react-ui .BookingLightbox [data-tid="modal-content"] > div:first-child { border-radius: 40px !important; }
}
body:has(.booking-system[open]) > .react-ui .BookingLightbox [data-tid="Sticky__root"] > * { background-color: #f7f0e6 !important; }
body:has(.booking-system[open]) > .react-ui [data-tid="ModalHeader__root"] {
  color: #847f57 !important;
  font-family: 'Etude Noire', sans-serif !important;
  font-weight: 500 !important;
  font-size: 40px !important;
  line-height: 44px !important;
  text-align: center;
}
body:has(.booking-system[open]) > .react-ui [data-tid="ModalHeader__root"] :not(svg, path) { font-family: inherit !important; }
body:has(.booking-system[open]) > .react-ui [data-tid="modal-close"] {
  box-sizing: border-box !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 14px !important;
  background: rgb(132 127 87 / 15%) !important;
  color: #847f57 !important;
}
body:has(.booking-system[open]) > .react-ui [data-tid="modal-close"]:hover { background: rgb(132 127 87 / 25%) !important; }
body:has(.booking-system[open]) > .react-ui [data-tid="modal-close"] svg {
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 !important;
  color: #847f57 !important;
}
/* Строка поиска внутри окна Контура — тоже без белой подложки. */
body:has(.booking-system[open]) > .react-ui .BookingLightbox .VwZTwv { padding-inline: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
/* Крестик Контура стоит вплотную к углу — отодвигаем, как у нашего окна (32px). */
body:has(.booking-system[open]) > .react-ui .BookingLightbox [data-tid="modal-close"] { translate: -12px 12px; }

/* Consistent slots and captions. SDK actions and field composition stay intact. */
body:has(.booking-system[open]) > .react-ui [data-tid="modal-content"] > div:first-child { background: #f7f0e6 !important; }
body:has(.booking-system[open]) > .react-ui [data-tid="ModalHeader__root"] .T3qkLq { font-size: inherit !important; line-height: inherit !important; }
.booking-system #BookingFormWidget [data-tid="Button__rootElement"] { min-height: 48px !important; height: auto !important; font-size: 16px !important; }
.booking-system { box-sizing: border-box; margin: auto; max-height: calc(100dvh - 64px); overflow: auto; font-size: 16px; line-height: 24px; scrollbar-width: thin; }
.booking-system .booking-modal__inner { padding: 48px 32px 32px; }
.booking-system .booking-modal__title { margin: 0 64px 24px; }
.booking-system .booking-modal__lead { margin-bottom: 24px; font-size: 16px; line-height: 24px; }
.booking-system .booking-system__section > h3 { color: #9b5026; font: 500 28px/1.2 'Etude Noire', sans-serif; margin-bottom: 20px; }
.booking-system .booking-modal__close { top: 24px; right: 24px; width: 44px; height: 44px; font-size: 30px; }
.booking-system #BookingCalendarWidget { padding: 20px; border-radius: 20px; background: #fff; }
.booking-system #BookingCalendarWidget { background: #eee7da; border: 1px solid rgb(132 127 87 / 25%); }
.booking-system :is(#BookingRoomsWidget, #BookingHourlyWidget) .ZSaP3T { padding: 20px; }
.booking-system .FJbBVA { min-width: 0; white-space: normal !important; overflow-wrap: anywhere; }
.booking-system .WidgetCardPriceButtonContainer { min-width: 220px; flex-shrink: 0; }
.booking-system .WidgetCardPriceButtonContainer > [data-tid="Button__root"] { display: block; width: 100% !important; }
.booking-system .WidgetCardPriceButtonContainer [data-bs-kind="primary"] { width: 100%; }
[data-bs-kontur] [data-tid="Button__root"] { height: auto !important; }
[data-bs-kontur] :is([data-tid="DateRangePicker__start"], [data-tid="DateRangePicker__end"]) { min-height: 48px !important; }
.booking-system :is(#BookingRoomsWidget, #BookingHourlyWidget) [data-bs-kind="primary"] { padding-inline: 14px !important; }

[data-bs-kontur] [data-tid="Button__rootElement"][data-bs-kind] {
  box-sizing: border-box !important; min-height: 48px !important; height: auto !important;
  padding: 11px 20px !important; border: 1px solid transparent !important;
  border-radius: 100px !important; box-shadow: none !important;
  font-size: 16px !important; font-weight: 500 !important; line-height: 24px !important;
  white-space: normal !important; overflow-wrap: anywhere; text-align: center;
}
[data-bs-kontur] [data-bs-kind="primary"]:not(:disabled) { background: #9b5026 !important; color: #f7f0e6 !important; }
[data-bs-kontur] [data-bs-kind="primary"]:not(:disabled):hover { background: #843f1b !important; }
[data-bs-kontur] :is([data-bs-kind="neutral"], [data-bs-kind="control"]):not(:disabled) { background: #e6dfd1 !important; color: #494949 !important; }
[data-bs-kontur] [data-tid="Button__rootElement"][data-bs-kind="control"] { min-width: 104px; border-radius: 10px !important; padding-inline: 14px !important; text-align: left; }
[data-bs-kontur] [data-tid="Button__rootElement"][data-bs-kind="link"] { background: transparent !important; color: #9b5026 !important; padding: 8px 0 !important; border-radius: 0 !important; }
[data-bs-kontur] [data-tid="Button__rootElement"][data-bs-kind="icon"] { min-height: 40px !important; min-width: 40px; padding: 8px !important; }
[data-bs-kontur] [data-tid="Button__rootElement"][data-bs-kind]:disabled { background: #e6dfd1 !important; color: #8c8780 !important; cursor: not-allowed; }
[data-bs-kontur] [data-tid="Button__rootElement"][data-bs-kind] :is(.react-ui-button-caption, .react-ui-button-text, [data-tid="Select__label"]) {
  min-width: 0; white-space: normal !important; text-overflow: clip !important;
  overflow: visible !important; line-height: 24px !important;
}
[data-bs-kontur] [data-bs-kind]:focus-visible { outline: 2px solid #9b5026 !important; outline-offset: 3px; }
[data-bs-kontur] [data-bs-description] { margin-block: 12px; font-size: 16px; line-height: 24px; overflow-wrap: anywhere; }
[data-bs-kontur] [data-bs-description][data-bs-expanded="true"] { max-height: 264px; overflow: auto; overscroll-behavior: contain; padding-right: 8px; scrollbar-width: thin; }
[data-bs-kontur] [data-tid="ShowMoreLink"] { color: #9b5026 !important; }
body:has(.booking-system[open]) > .react-ui [data-tid="ModalHeader__root"] { font-size: 36px !important; line-height: 44px !important; padding-right: 48px; }
/* Preserve the existing rendered 52px frame while removing asymmetric SDK padding. */
body:has(.booking-system[open]) > .react-ui [data-tid="modal-close"] { width: 52px !important; height: 52px !important; }
@media (min-width: 768px) {
  body:has(.booking-system[open]) > .react-ui [data-bs-booking-cart] > div:first-child,
  body:has(.booking-system[open]) > .react-ui [data-bs-booking-cart] [data-tid="Sticky__root"] > * {
    border-top-left-radius: 40px !important;
    border-top-right-radius: 40px !important;
  }
  body:has(.booking-system[open]) > .react-ui [data-bs-booking-cart] [data-tid="Sticky__root"] > * { overflow: hidden; }
}
@media (min-width: 768px) {
  .booking-system .BwFaze { display: grid; grid-template-columns: minmax(0,1fr) 220px; gap: 20px; align-items: start; }
  .booking-system .kItLDh.t2KDLw { flex-direction: column; align-items: flex-start !important; }
  .booking-system [data-bs-description]:not([data-bs-expanded="true"]) { min-height: 72px; }
}
@media (max-width: 767px) {
  .booking-system { width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .booking-system .booking-modal__inner { padding: 72px 16px 24px; }
  .booking-system .booking-modal__title { margin: 0 0 20px; font-size: 30px; line-height: 1.15; }
  .booking-system .booking-modal__close { position: fixed; top: 12px; right: 12px; }
  .booking-system .booking-system__section { margin-top: 24px; }
  .booking-system .booking-system__section > h3 { font-size: 24px; margin-bottom: 16px; }
  .booking-system :is(#BookingRoomsWidget, #BookingHourlyWidget) .ZSaP3T { padding: 16px; margin-bottom: 16px; }
  .booking-system .WidgetCardPriceButtonContainer { min-width: 0; width: 100%; }
  .booking-system #BookingCalendarWidget { padding: 12px; }
  .booking-system .FJbBVA { font-size: 20px; line-height: 26px; }
  body:has(.booking-system[open]) > .react-ui [data-tid="ModalHeader__root"] { font-size: 28px !important; line-height: 34px !important; }
  body:has(.booking-system[open]) > .react-ui .BookingLightbox [data-tid="modal-content"] > div:first-child { border-radius: 16px !important; }
}

/* One stable layer for every SDK portal, including the photo lightbox. */
.booking-system.booking-system--layered { position: fixed; top: 32px; left: 50%; transform: translateX(-50%); margin: 0; z-index: 1000; }
.booking-system-backdrop { position: fixed; inset: 0; z-index: 999; background: rgb(17 24 43 / 65%); }
body:has(.booking-system[open]) > .react-ui { position: fixed; inset: 0; z-index: 1001 !important; pointer-events: none; }
body:has(.booking-system[open]) > .react-ui > * { pointer-events: auto; }
body:has(.booking-system[open]) > .react-ui [data-tid="Select__menu"] { box-sizing: border-box; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow: auto; }
body:has(.booking-system[open]) > .react-ui [data-tid="Select__menu"] button { max-width: 100%; }
body:has(.booking-system[open]) > .yarl__portal { position: fixed; inset: 0; z-index: 1002 !important; }

/* The SDK's fixed field widths were calculated for its original font. */
:is(.booking-system .kontur-host, body:has(.booking-system[open]) > .react-ui) .ZpDuj5 {
  display: grid !important; grid-template-columns: minmax(336px,1.2fr) minmax(200px,1fr) minmax(248px,1fr);
  gap: 16px !important; align-items: center !important;
}
[data-bs-kontur] .ZpDuj5 > * { width: auto !important; min-width: 0 !important; margin: 0 !important; }
[data-bs-kontur] .bj44ek { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: center; gap: 8px; width: 100% !important; }
[data-bs-kontur] .bj44ek:has(> .GZltsj) { grid-template-columns: minmax(0,1fr) 8px minmax(0,1fr); }
[data-bs-kontur] .bj44ek > * { width: auto !important; min-width: 0; }
:is(.booking-system .kontur-host, body:has(.booking-system[open]) > .react-ui) :is([data-tid="DateRangePicker__start"], [data-tid="DateRangePicker__end"]) {
  box-sizing: border-box !important; height: 52px !important; min-height: 52px !important; padding: 0 8px !important; font-size: 16px !important;
}
.booking-system #BookingFormWidget [data-tid="Button__rootElement"],
[data-bs-kontur] [data-tid="Button__rootElement"][data-bs-kind] { min-height: 52px !important; font-weight: 400 !important; padding-block: 13px !important; }
.booking-system .WidgetCardPriceButtonContainer { min-width: 248px; }
@media (min-width: 768px) { .booking-system .BwFaze { grid-template-columns: minmax(0,1fr) 248px; } }
:is(.booking-system .kontur-host, body:has(.booking-system[open]) > .react-ui) [data-bs-kind="primary"]:not(:disabled) { background: #9b5026 !important; color: #f7f0e6 !important; }
:is(.booking-system .kontur-host, body:has(.booking-system[open]) > .react-ui) [data-bs-kind="primary"]:not(:disabled):hover { background: rgb(155 80 38 / 20%) !important; color: #9b5026 !important; }
:is(.booking-system .kontur-host, body:has(.booking-system[open]) > .react-ui) [data-bs-kind="primary"]:not(:disabled):active { background: #494949 !important; color: #f7f0e6 !important; }
:is(.booking-system .kontur-host, body:has(.booking-system[open]) > .react-ui) [data-bs-kind="primary"]:focus-visible { outline: 1px solid #847f57 !important; outline-offset: 3px; }
.booking-system .booking-system__help { display: grid; gap: 16px; margin-top: 28px; padding-top: 8px; }
.booking-system .booking-system__help p { margin: 0; }
.booking-system .booking-system__help button { justify-self: start; }
.booking-system #BookingCalendarWidget .VUyg6j { width: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.booking-system #BookingCalendarWidget .UKwZzA { width: 360px !important; flex-shrink: 0; max-width: 100%; }
.booking-system #BookingCalendarWidget ._9PeHjV { flex: 1 1 280px; min-width: 0; }

/* Separate the description toggle from the paragraph, with a short reading area. */
[data-bs-kontur] [data-bs-description] { min-height: 0 !important; margin-block: 8px !important; }
[data-bs-kontur] div:has(> [data-tid="ShowMoreLink"]) { max-height: 216px; overflow: auto; }
[data-bs-kontur] [data-bs-description][data-bs-expanded="true"] { box-sizing: border-box; max-height: 216px; padding: 12px; background: rgb(230 223 209 / 35%); border-radius: 12px; }
[data-bs-kontur] [data-tid="ShowMoreLink"] { display: none !important; }
[data-bs-kontur] [data-bs-description-toggle] { display: block; align-self: flex-start; margin: 0 0 8px; padding: 4px 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: #9b5026; font: 400 16px/24px 'Montserrat', sans-serif; cursor: pointer; }
[data-bs-kontur] [data-tid="RoomCategoryParameters"] .rCyhgl { height: auto !important; min-height: 52px; align-items: center; flex-wrap: wrap; gap: 12px; }
[data-bs-kontur] [data-tid="RoomCategoryParameters"] [data-tid="Button__root"] { margin: 0 !important; }
body:has(.booking-system[open]) > .react-ui :is([data-tid="ModalHeader__root"], [data-tid="ModalFooter__root"], [data-tid="Sticky__root"] > *) { background-color: #f7f0e6 !important; }
body:has(.booking-system[open]) > .react-ui [data-tid="Sticky__root"] > div > div,
body:has(.booking-system[open]) > .react-ui [data-tid="Sticky__root"] > div > div > div { background-color: #f7f0e6 !important; }
body:has(.booking-system[open]) > .react-ui [data-tid="ModalHeader__root"] a { font-family: 'Montserrat', sans-serif !important; font-size: 16px; line-height: 24px; }
/* Room details have their own scroll frame, with space above and below. */
body:has(.booking-system[open]) > .react-ui [data-tid="modal-container"]:has(.TANWrE) { box-sizing: border-box; padding: 32px 16px !important; }
body:has(.booking-system[open]) > .react-ui [data-tid="modal-content"]:has(.TANWrE) { width: min(700px,100%) !important; margin: 0 auto !important; max-height: calc(100dvh - 64px); overflow: auto; overscroll-behavior: contain; border-radius: 32px; background: #f7f0e6; scrollbar-width: thin; }
body:has(.booking-system[open]) > .react-ui [data-tid="modal-content"]:has(.TANWrE) > div:first-child { width: 100% !important; max-width: 100% !important; }
body:has(.booking-system[open]) > .react-ui [data-tid="modal-content"]:has(.TANWrE) [data-tid="Sticky__root"] > div:first-child { position: static !important; width: 100% !important; left: auto !important; }
body:has(.booking-system[open]) > .react-ui [data-tid="modal-content"]:has(.TANWrE) [data-tid="Sticky__root"] > div:last-child:not(:first-child) { display: none; }
@media (max-width: 1000px) and (min-width: 768px) {
  :is(.booking-system .kontur-host, body:has(.booking-system[open]) > .react-ui) .ZpDuj5 { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  [data-bs-kontur] .ZpDuj5 > .MQe7xH { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .booking-system.booking-system--layered { top: 0; left: 0; transform: none; }
  :is(.booking-system .kontur-host, body:has(.booking-system[open]) > .react-ui) .ZpDuj5 { grid-template-columns: minmax(0,1fr); gap: 12px !important; }
  .booking-system .WidgetCardPriceButtonContainer { min-width: 0; }
  .booking-system #BookingCalendarWidget .UKwZzA { width: 100% !important; }
  .booking-system #BookingCalendarWidget ._9PeHjV { flex: 0 1 auto; width: 100%; min-height: 0; }
  .booking-system #BookingCalendarWidget .VUyg6j { align-items: stretch; gap: 12px; }
  [data-bs-kontur] [data-bs-description][data-bs-expanded="true"] { max-height: 192px; }
  [data-bs-kontur] div:has(> [data-tid="ShowMoreLink"]) { max-height: 192px; }
  body:has(.booking-system[open]) > .react-ui [data-tid="modal-container"] > div { width: calc(100% - 24px) !important; max-width: calc(100% - 24px) !important; margin: 12px auto !important; }
  body:has(.booking-system[open]) > .react-ui [data-tid="modal-content"] > div:first-child { box-sizing: border-box; width: 100% !important; max-width: 100% !important; }
  body:has(.booking-system[open]) > .react-ui [data-tid="modal-container"]:has(.TANWrE) { padding: 16px 12px !important; }
  body:has(.booking-system[open]) > .react-ui [data-tid="modal-container"]:has(.TANWrE) > div { width: 100% !important; max-width: 100% !important; }
  body:has(.booking-system[open]) > .react-ui [data-tid="modal-content"]:has(.TANWrE) { max-height: calc(100dvh - 32px); border-radius: 20px; }
}
@media (max-width: 360px) {
  body:has(.booking-system[open]) > .react-ui .bj44ek { grid-template-columns: minmax(0,1fr); }
  body:has(.booking-system[open]) > .react-ui .bj44ek > .GZltsj { display: none; }
}

/* Keep the amenities action below both columns, including expanded groups. */
[data-bs-kontur] [data-tid="Comforts"] {
  position: relative; display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 24px; margin-top: 16px; padding: 16px 0 0;
  border-top: 1px solid rgb(132 127 87 / 20%);
}
[data-bs-kontur] [data-tid="Comforts"] .KJCWhZ {
  position: static; min-width: 0; display: flex; flex-direction: column; gap: 20px;
}
[data-bs-kontur] [data-tid="Comforts"] .DkbNM5 { position: static; display: flex; flex-direction: column; gap: 20px; }
[data-bs-kontur] [data-tid="Comforts"] .s5TE7H { display: grid; gap: 8px; margin: 0; }
[data-bs-kontur] [data-tid="GeneralGroup"]::before {
  content: "Удобства"; color: #494949; font-weight: 500; line-height: 24px;
}
[data-bs-kontur] [data-tid="Comforts"] [data-tid="Title"] { font-weight: 500; line-height: 24px; }
[data-bs-kontur] [data-tid="ComfortsShowLink"] {
  display: none !important;
}
[data-bs-kontur] [data-tid="Comforts"][data-bs-comforts-expanded="false"] { display: none; }
[data-bs-kontur] [data-bs-comforts-toggle] { display: block; margin: 8px 0 16px; padding: 10px 0; min-height: 44px; border: 0; background: transparent; color: #9b5026; text-decoration: underline; text-underline-offset: 4px; font: 400 16px/24px 'Montserrat', sans-serif; cursor: pointer; }
[data-bs-kontur] [data-bs-comforts-toggle]:focus-visible { outline: 1px solid #847f57; outline-offset: 3px; }
.booking-system [data-fallback-form] .form__checkbox { align-items: center; min-height: 44px; }
.booking-system [data-fallback-form] .form__checkbox > span { min-width: 0; line-height: 24px; }
@media (max-width: 600px) {
  [data-bs-kontur] [data-tid="Comforts"] { grid-template-columns: minmax(0,1fr); gap: 20px; }
}

/* Readable presentation; original SDK description and click handlers stay intact. */
[data-bs-kontur] [data-bs-description-formatted="true"] { display: none !important; }
[data-bs-kontur] [data-bs-description-copy] {
  box-sizing: border-box; max-height: 360px; overflow: auto; overscroll-behavior: contain;
  margin-block: 12px; padding: 16px 20px; border-radius: 12px;
  background: #F7F0E6; color: #494949; font: 400 16px/24px 'Montserrat', sans-serif;
  overflow-wrap: break-word; scrollbar-width: thin; scrollbar-gutter: stable;
}
[data-bs-kontur] [data-bs-description-copy] ul { margin: 0; padding-left: 20px; list-style: disc; }
[data-bs-kontur] [data-bs-description-copy] li { margin: 0; padding-left: 4px; }
[data-bs-kontur] [data-bs-description-copy] li + li { margin-top: 12px; }
[data-bs-kontur] [data-bs-description-copy] li::marker { color: #9B5026; }
[data-bs-kontur] [data-bs-description-copy] p { margin: 0; }
[data-bs-kontur] [data-bs-description-copy] div > * + * { margin-top: 12px; }
[data-bs-kontur] [data-bs-description-copy] .booking-description-heading:not(:first-child) { margin-top: 24px; }
[data-bs-kontur] [data-bs-description-copy] .booking-description-heading { color: #9B5026; }
[data-bs-kontur] [data-bs-description-copy] strong { font-weight: 600; }
[data-bs-kontur] [data-bs-description-copy]:focus-visible { outline: 2px solid #9B5026; outline-offset: 2px; }
@media (max-width: 699px) {
  [data-bs-kontur] [data-bs-description-copy] { max-height: 320px; padding: 14px 16px; font-size: 14px; line-height: 22px; }
}

.booking-system .booking-fallback__vpn { display: block; margin-top: 24px; font-weight: 400; }
.booking-system .booking-fallback__vpn u { text-underline-offset: 3px; }
.booking-system [data-fallback-form] { margin-top: 16px; }
[data-bs-kontur] [data-bs-description-copy][data-bs-description-compact="true"] { max-height: none; overflow: visible; background: none; padding: 0; scrollbar-gutter: auto; }
[data-bs-kontur] [data-bs-description-copy][data-bs-description-compact="true"] li + li { margin-top: 6px; }

/* Description controls match the site's cream, orange outlined buttons. */
[data-bs-kontur] [data-bs-description-toggle] {
  box-sizing: border-box; width: fit-content; max-width: 100%; min-height: 44px;
  margin: 4px 0 16px; padding: 9px 24px; border: 1px solid #9B5026;
  border-radius: 100px; background: #F7F0E6; color: #494949;
  font: 400 16px/24px 'Montserrat', sans-serif; text-align: center;
}
[data-bs-kontur] [data-bs-description-toggle]:hover,
[data-bs-kontur] [data-bs-description-toggle]:active { background: #D5CFC7; border-color: #494949; }
[data-bs-kontur] [data-bs-description-toggle]:focus-visible { outline: 2px solid #9B5026; outline-offset: 3px; }
[data-bs-kontur] .A3OQYi .kItLDh { flex-direction: column; align-items: stretch !important; gap: 16px !important; }
[data-bs-kontur] .A3OQYi [data-bs-description-copy] { width: 100%; margin-block: 0; }
[data-bs-kontur] .A3OQYi [data-bs-description-toggle] { margin-top: 0; }