.pickmeup-input-wrapper {
  position: relative; 
  width: 100%;
}

.pickmeup {
  background: #fff;
  border: 2px solid #727271;
  border-radius: 0.4em;
  display: none;
  position: absolute; 
  z-index: 4;
}

.pickmeup.show {
  display: inline-block;
}

.desktop_device .pickmeup.show {
  display: flex;
}

.pickmeup .pmu-instance {
  display: inline-block;
  height: 13.8em;
  padding: .5em;
  text-align: center;
  width: 15em;
}

.pickmeup .close_date_x.pmu-button {
  display: none;
}

.pickmeup .pmu-instance .pmu-button {
  color: var(--color-green-2);;
  cursor: pointer;
  outline: none;
  text-decoration: none;
}

.pickmeup .pmu-instance .pmu-today {
  background: var(--color-green-2);;
  color: #fff;
}

.pickmeup .pmu-instance .pmu-button:hover {
  background: #ccc;
  color: #fff;
}

.pickmeup .pmu-instance .pmu-not-in-month {
  color: #2b2a29;
}

.pickmeup .pmu-instance .pmu-disabled,
.pickmeup .pmu-instance .pmu-disabled:hover {
  background: transparent;
  color: #ddd;
  cursor: default;
}

.pickmeup .pmu-instance .pmu-selected {
  background: #727271;
  color: #fff;
}

.pickmeup .pmu-instance .pmu-not-in-month.pmu-selected {
  background: #2b2a29;
}

.pickmeup .pmu-instance nav {
  color: #eee;
  display: flex;
  line-height: 2em;
}

.pickmeup .pmu-instance nav:first-child *:hover {
  background: transparent;
  color: #2b2a29;
}

.pickmeup .pmu-instance nav .pmu-prev,
.pickmeup .pmu-instance nav .pmu-next {
  display: none;
  height: 2em;
  width: 1em;
}

.pickmeup .pmu-instance nav .pmu-month {
  width: 14em;
}

.pickmeup .pmu-instance .pmu-years *,
.pickmeup .pmu-instance .pmu-months * {
  display: inline-block;
  line-height: 3.6em;
  width: 3.5em;
}

.pickmeup .pmu-instance .pmu-day-of-week {
  color: #727271;
  cursor: default;
  font-weight: 700;
}

.pickmeup .pmu-instance .pmu-day-of-week *,
.pickmeup .pmu-instance .pmu-days * {
  display: inline-block;
  line-height: 1.5em;
  width: 2em;
}

.pickmeup .pmu-instance .pmu-day-of-week * {
  line-height: 1.8em;
}

.pickmeup .pmu-instance:first-child .pmu-prev,
.pickmeup .pmu-instance:last-child .pmu-next {
  display: block;
}

.pickmeup .pmu-instance:first-child .pmu-month,
.pickmeup .pmu-instance:last-child .pmu-month {
  width: 13em;
}

.pickmeup .pmu-instance:first-child:last-child .pmu-month {
  width: 12em;
}

.pickmeup:not(.pmu-view-days) .pmu-days,
.pickmeup:not(.pmu-view-days) .pmu-day-of-week,
.pickmeup:not(.pmu-view-months) .pmu-months,
.pickmeup:not(.pmu-view-years) .pmu-years {
  display: none;
}

.pickmeup_align_right .pickmeup {
  left: auto !important; /* перебивает инлайновый left, который ставит JS */
  right: 0;              /* правый край попапа = правый край input/обёртки */
}

/* Поля «Заезд»/«Выезд» только для чтения — открывают общий range-календарь */
.checkin_date_search_frame input[readonly] {
  cursor: pointer;
}

/* Скрываем числа соседних месяцев, попадающие в сетку месяца (публичный календарь).
   visibility: hidden сохраняет выравнивание по дням недели и делает ячейки
   некликабельными. */
.pickmeup_search .pickmeup .pmu-instance .pmu-not-in-month {
  visibility: hidden;
}

/* Заголовок месяца некликабелен — выбор месяцев/годов отключён */
.pickmeup_search .pickmeup .pmu-instance nav .pmu-month {
  cursor: default;
}

/* Убираем подсветку текущей даты (публичный календарь) — сегодня выглядит как
   обычный день. Выделение при выборе (pmu-selected) и наведении (:hover)
   сохраняем через :not(...). */
.pickmeup_search .pickmeup .pmu-instance .pmu-today:not(.pmu-selected):not(:hover) {
  background: none;
  color: var(--color-green-2);
}

/* Подсветка выбранного диапазона дат (публичный календарь):
   границы (начало/конец) — тёмно-зелёный, дни между ними — светло-зелёный. */
.pickmeup_search .pickmeup .pmu-instance .pmu-in-range {
  background: #e8f1e8; /* фолбэк для браузеров без color-mix */
  background: color-mix(in srgb, var(--color-green-2) 16%, #fff);
  color: var(--gray-dark, #2b2a29);
}

.pickmeup_search .pickmeup .pmu-instance .pmu-range-endpoint {
  background: var(--color-green-2);
  color: #fff;
}

/* Мобильный: календарь открывается на весь экран (вся ширина и высота),
   месяцы идут вертикально и листаются вертикальным скролом.
   Правила скоуплены на .pickmeup_search (только публичный поиск),
   чтобы не задеть календари личного кабинета. */
.mobile_device .pickmeup_search .pickmeup {
  position: fixed;
  top: 0 !important; /* перебивает инлайновый top/left от JS */
  left: 0 !important;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* учитывает адресную строку мобильных браузеров */
  margin: 0;
  padding: 3em 0.5em 1em; /* место сверху под кнопку закрытия */
  box-sizing: border-box;
  overflow-y: auto; /* переход между месяцами — вертикальным скролом */
  overscroll-behavior: contain; /* скрол не «протекает» на страницу под окном */
  -webkit-overflow-scrolling: touch;
  z-index: 100000;
}

.mobile_device .pickmeup_search .pickmeup.show {
  display: flex;
  flex-direction: column; /* месяцы друг под другом */
}

.mobile_device .pickmeup_search .pickmeup .pmu-instance {
  width: 100%; /* месяц на всю ширину */
  height: auto;
}

/* дни и шапка дней недели — 7 колонок на всю ширину */
.mobile_device .pickmeup_search .pickmeup .pmu-days,
.mobile_device .pickmeup_search .pickmeup .pmu-day-of-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.mobile_device .pickmeup_search .pickmeup .pmu-days *,
.mobile_device .pickmeup_search .pickmeup .pmu-day-of-week *,
.mobile_device .pickmeup_search .pickmeup .pmu-month {
  width: auto; /* снять фиксированные em-ширины */
}

/* Навигация — вертикальным скролом, стрелки prev/next не нужны */
.mobile_device .pickmeup_search .pickmeup .pmu-prev,
.mobile_device .pickmeup_search .pickmeup .pmu-next {
  display: none !important;
}

/* Кнопка закрытия — одна, зафиксирована в правом верхнем углу окна */
.mobile_device .pickmeup_search .pickmeup .pmu-instance:first-child .close_date_x {
  align-items: center;
  background: #fff;
  color: #2b2a29;
  display: flex;
  font-size: 1.6em;
  height: 1.6em;
  justify-content: center;
  line-height: 1;
  position: fixed;
  right: 0.25em;
  top: 0.25em;
  width: 1.6em;
  z-index: 1;
}

.mobile_device .pickmeup_search .pickmeup .pmu-instance:first-child .close_date_x::before {
  content: "\00d7"; /* × */
}

/* Минимальная цена за сутки под числом дня (span.pmu-price добавляет
   render-хук из initPickmeup по данным window.min_available_prices) */

/* Ячейки с ценой выше обычных — высота месяца становится плавающей */
.pickmeup .pmu-instance {
  height: auto;
  min-height: 13.8em;
}

/* Число дня прижато к верху ячейки, даже если у соседних ячеек есть цена */
.pickmeup .pmu-instance .pmu-days > * {
  vertical-align: top;
}

.pickmeup .pmu-instance .pmu-days .pmu-price {
  display: block;
  font-size: .55em;
  line-height: 1.3;
  width: auto;
  opacity: .75;
}

/* День без свободных номеров — светло-красная точка на месте цены.
   Селектор через «> div >»: на мобильном правило .pmu-days * задаёт
   width: auto, иначе точка растянулась бы во всю ячейку */
.pickmeup .pmu-instance .pmu-days > div > .pmu-no-price-dot {
  display: block;
  width: .4em;
  height: .4em;
  margin: .5em auto 0;
  border-radius: 50%;
  background: #f0a0a0;
}

/* Календарь с ценами (класс ставится в initPickmeup, когда на странице есть
   window.min_available_prices): все ячейки дней одной высоты — ряды и месяцы
   не различаются по высоте из-за дней без цены.
   Отступ под ценой — такой же, как над числом дня (~0.25em,
   полуинтерлиньяж строки числа с line-height 1.5) */
.pickmeup.pmu-with-prices .pmu-days > div {
  height: 2.55em; /* строка числа (1.5em) + строка цены (~0.72em) + 0.25em отступа снизу */
}

/* Мобильная версия: месяцы в flex-колонке не сжимаются под высоту экрана —
   иначе подросшие из-за цен месяцы наползают друг на друга;
   переход между месяцами остаётся вертикальным скролом */
.mobile_device .pickmeup_search .pickmeup .pmu-instance {
  flex-shrink: 0;
}