/* Посадка новой формы бронирования в старую разметку страницы объекта.
   Боковая колонка .dnRBpv в наследованном CSS на узких экранах — это
   полноэкранная шторка старой формы: position:fixed + display:none.
   Новая форма на мобильном рисует свою нижнюю панель с position:fixed,
   а внутри скрытого и позиционированного предка она была бы не видна.
   display:contents убирает саму колонку из раскладки, оставляя содержимое:
   панель и шторка виджета становятся обычными fixed-элементами страницы.
   Порог 61.9375em совпадает с порогом наследованного CSS; тот же порог
   (992px) передан виджету в mobileBreakpoint, чтобы переключение
   десктоп/мобильный происходило в одной точке. */
@media (max-width: 61.9375em) {
  #sidebar-popup.listing__SidebarWrapper-sc-zd7bpe-2 {
    display: contents;
    position: static;
    overflow: visible;
    background: none;
    padding: 0;
    height: auto;
    width: auto;
    z-index: auto;
  }
}

/* ==================================================================
   Карточка формы бронирования на десктопе — по стилям прежней формы.
   Поведение виджета не трогаем, только внешность: все числа ниже взяты
   из object-page.css, где описана старая форма, и перенесены как есть.

     .khigty   фон rgb(247,248,246), радиус 6px, отступы 32px/24px
     .dnRBpv .BookingForm__BookingFormWrapper   max-width 344px, вправо
     .imUXtQ   цена 50px, насыщенность 500, «за ночь» 0.4em
     .khigty .DateRangePickerInput   рамка rgb(213,213,213)
     .gNPIaZ   кнопка: фон rgb(12,103,118), радиус 6px, padding 1em,
               обычная насыщенность, letter-spacing 1px, во всю ширину
     .bBEHzM   текст под кнопкой: 14px, насыщенность 300, rgb(73,73,72),
               по центру, отступ сверху 16px

   Селекторы с #sidebar-popup, чтобы перебить CSS-модуль виджета:
   у модуля специфичность в два класса, у нас id плюс два класса.
   ================================================================== */
@media (min-width: 62em) {
  /* Боковая колонка — sticky с top:100px (ровно высота фиксированной шапки).
     Отступ сверху был один — padding:56px внутри липкого блока. Внутренний
     отступ едет вместе с блоком, поэтому после прилипания он превращался в
     полосу пустоты под шапкой и съедал низ карточки.
     Делим пополам по смыслу:
       margin-top:40px  — снаружи липкого блока, живёт в потоке. Держит
                          стартовое положение: верх карточки вровень с
                          заголовком объекта. При прокрутке уезжает вместе
                          со страницей, как и положено.
       padding-top:16px — внутри. Остаётся зазором под шапкой, когда
                          карточка уже прилипла.
     Итого: на старте как было, после прилипания на 40px выше. */
  #sidebar-popup {
    margin-top: 40px;
    padding-top: 16px;
  }

  #sidebar-popup .bk-desktop {
    max-width: 344px;
    margin-left: auto;
    background: rgb(247, 248, 246);
    border-radius: 6px;
    padding: 32px 24px;
    box-shadow: none;
  }

  /* ---- поля ---- */
  /* В столбик, как было: на 344px два столбца тесны. */
  #sidebar-popup .bk-desktop .fields {
    grid-template-columns: 1fr;
  }
  /* Подписи «Даты» и «Гости» не несут смысла: под датами стоит
     «Выберите даты», гости всегда заполнены. Лишняя сущность и лишний
     размер шрифта. */
  #sidebar-popup .bk-desktop .flbl {
    display: none;
  }
  #sidebar-popup .bk-desktop .field {
    background: #ffffff;
    border-radius: 6px;
    padding: 14px;
    box-shadow: inset 0 0 0 1px rgb(213, 213, 213);
  }
  /* Прежняя форма не подсвечивала «следующий шаг» жирной рамкой. Оставляем
     тонкую рамку везде, цветом отмечаем только реально открытое поле. */
  #sidebar-popup .bk-desktop .field.next,
  #sidebar-popup .bk-desktop .field:hover {
    box-shadow: inset 0 0 0 1px rgb(170, 175, 175);
  }
  #sidebar-popup .bk-desktop .field.open {
    box-shadow: inset 0 0 0 1px var(--acc);
  }

  /* ---- размеры текста ---- */
  /* Один размер на всю карточку. Крупной остаётся только цена. */
  #sidebar-popup .bk-desktop .fval,
  #sidebar-popup .bk-desktop .fval.ph,
  #sidebar-popup .bk-desktop .srow {
    font-size: 16px;
    font-weight: 400;
  }
  /* «от» перед ценой, пока даты не выбраны: цена за ночь у владельца разная
     по дням, и плоская цифра без оговорки расходится с итогом. */
  #sidebar-popup .bk-desktop .pfrom {
    font-size: 20px;
    color: rgb(12, 57, 63);
    align-self: center;
  }
  #sidebar-popup .bk-desktop .pbig {
    font-size: 50px;
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: rgb(12, 57, 63);
  }
  #sidebar-popup .bk-desktop .pper {
    font-size: 20px;
    color: rgb(12, 57, 63);
  }

  /* ---- кнопка и текст под ней ---- */
  #sidebar-popup .bk-desktop .cta {
    height: auto;
    padding: 1em;
    border-radius: 6px;
    background: rgb(12, 103, 118);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 1px;
    margin-top: 8px;
  }
  #sidebar-popup .bk-desktop .cta.loading {
    width: 100%;
    border-radius: 6px;
  }
  #sidebar-popup .bk-desktop .note,
  #sidebar-popup .bk-desktop .legal {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.45;
    color: rgb(73, 73, 72);
  }
  #sidebar-popup .bk-desktop .note b {
    font-weight: 400;
    color: rgb(73, 73, 72);
  }

  /* Кнопка поля раньше была прямой ячейкой сетки и растягивалась сама.
     Теперь между сеткой и кнопкой стоит .fcell, и кнопка сжалась по
     содержимому — отсюда поля разной ширины. Растягиваем явно. */
  #sidebar-popup .bk-desktop .fcell,
  #sidebar-popup .bk-desktop .fcell .field {
    width: 100%;
  }

  /* ---- строки итога и контактов ---- */
  /* «Итого за 2 ночи» и сумма рядом с ней шли 16px/600 и 20px/700 — два
     лишних размера и две лишние насыщенности. Сводим к тому же 16px, что
     и остальной текст карточки; выделяем сумму только насыщенностью 500. */
  #sidebar-popup .bk-desktop .pbox,
  #sidebar-popup .bk-desktop .r3,
  #sidebar-popup .bk-desktop .r3 .big .pbox {
    font-size: 16px;
    font-weight: 500;
    color: rgb(12, 57, 63);
  }
  #sidebar-popup .bk-desktop .pold {
    font-size: 16px;
    font-weight: 400;
  }
  #sidebar-popup .bk-desktop .lbl,
  #sidebar-popup .bk-desktop .hint {
    font-size: 14px;
    font-weight: 400;
    color: rgb(73, 73, 72);
  }
  /* Поля контактов — как поля дат и гостей: тонкая серая рамка, радиус 6px. */
  #sidebar-popup .bk-desktop .ibox {
    background: #ffffff;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgb(213, 213, 213);
  }
  #sidebar-popup .bk-desktop .ibox:focus-within,
  #sidebar-popup .bk-desktop .ibox.next {
    box-shadow: inset 0 0 0 1px var(--acc);
  }
  #sidebar-popup .bk-desktop .inp {
    font-size: 16px;
    font-weight: 400;
  }
  #sidebar-popup .bk-desktop .cc {
    font-size: 16px;
    font-weight: 400;
  }

  /* ---- всплывающие окна ---- */
  /* Раскрываются под своим полем поверх карточки, а не раздвигают её вниз:
     иначе кнопка уезжает за экран. Так вела себя и прежняя форма. */
  #sidebar-popup .bk-desktop .fcell {
    position: relative;
  }
  #sidebar-popup .bk-desktop .fcell .pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 6;
    border-radius: 6px;
    box-shadow: 0 10px 30px -14px rgba(16, 38, 43, 0.35),
      0 0 0 1px rgb(213, 213, 213);
    /* Окно гостей вырастает выше экрана: малыши, питомцы и кнопка «Готово»
       оказывались за нижним краем, и надо было догадаться прокрутить страницу.
       Прокручиваем внутри окна, а не страницу; overscroll-behavior не даёт
       прокрутке перескочить на страницу, когда список кончился. */
    /* Высоту ставит сам виджет, по месту до низа экрана (см. BookingWidget).
       Здесь только страховка на случай, если скрипт ещё не отработал. */
    max-height: 60vh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* «Готово» всегда на виду у нижнего края окна, сколько бы ни было строк. */
  #sidebar-popup .bk-desktop .fcell .pop .darkbtn {
    position: sticky;
    bottom: -16px;
    margin-bottom: -16px;
    padding-top: 10px;
    padding-bottom: 10px;
    height: auto;
    border-radius: 6px;
  }
}

/* Опрос «Чего-то не хватает?» на телефоне открывается такой же шторкой снизу,
   и нижняя панель бронирования оказывается поверх неё — накрывает смайлики
   и кнопку ответа. Пока шторка опроса открыта, панель убираем: форма никуда
   не денется, человек вернётся к ней, закрыв опрос. Метку на <body> ставит
   сам виджет опроса (components/feedback-widget/FeedbackWidget.tsx). */
@media (max-width: 61.9375em) {
  body.gg-feedback-sheet-open .bk-mobile .bar {
    display: none;
  }
}

@media (min-width: 62em) {
  /* Пока открыт календарь или гости, крупная цена сверху не нужна: человек уже
     внутри формы и смотрит на выбор, а не на «350 ₾ за ночь». Убирая её, мы
     поднимаем поля на полсотни пикселей, и окно выбора почти всегда помещается
     в экран целиком — на ноутбуке прокручивать уже нечего.
     :has() читает «в карточке есть открытое поле»; поддержан всеми текущими
     браузерами, а где нет — просто останется как было. */
  #sidebar-popup .bk-desktop:has(.field.open) .price {
    display: none;
  }

  /* Карточка «Сделали дешевле!» на десктопе раньше занимала форму целиком:
     белый прямоугольник во весь блок, с пустыми полями сверху и снизу, — читалось
     как рекламный попап, подменивший собой форму. Теперь это шторка, выезжающая
     снизу внутри самой карточки: форма видна над ней, затемнение тоже только
     внутри карточки, страница не трогается. Нижние углы по радиусу карточки (6px). */
  #sidebar-popup .bk-desktop .wow.incard {
    border-radius: 14px 14px 6px 6px;
    box-shadow: 0 -16px 36px -20px rgba(16, 38, 43, 0.45);
  }
}