/* ═══════════════════════════════════════════════════════════════════════════
   La Villa Pine — HomeReserve Widget, светлая тема
   ─────────────────────────────────────────────────────────────────────────
   Парный файл к hr-widget-theme.css (тёмная). Тёмная остаётся как есть и не
   подключается на сайте; этот файл правит ТОЛЬКО то, что у родного светлого
   виджета выглядит чужим на нашем сайте, а не перекрашивает всё подряд.

   Селекторы — реальные классы виджета (поиск `.search__*`, `.select__*`,
   календарь `.vanilla-calendar*`, список `.hotel-*`, `.price-*`), а не
   угадывание `[class*="…"]`. Календарь вставляется в <body>, а не в
   #hr-widget, поэтому его правила без префикса.

   Стили виджета скоупятся атрибутом [data-v-…] (специфичность 0,2,0), так что
   перебиваем через !important.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --hrl-ink: #17191b;
  --hrl-ink-2: #3d4246;
  --hrl-muted: #676d72;
  --hrl-surface: #f7f7f5;
  --hrl-surface-2: #ecece9;
  --hrl-line: #dcdcd8;
  --hrl-accent: #96661c;       /* текст/ссылки на светлом */
  --hrl-accent-fill: #d4a44a;  /* заливки */
  --hrl-accent-soft: rgba(212, 164, 74, .22);
  --hrl-radius: 14px;
  --hrl-font: 'Onest', ui-sans-serif, system-ui, sans-serif;
}

/* ── Шрифт: тот же, что на сайте ── */
#hr-widget,
#hr-widget *,
.vanilla-calendar,
.vanilla-calendar * {
  font-family: var(--hrl-font) !important;
}

/* ═══════════════════════════════════════════════════════
   ПОИСК (главная): Заезд / Выезд / Гости / Найти
   ═══════════════════════════════════════════════════════ */
#hr-widget .search__container {
  border-radius: 20px !important;
  padding: 4px !important;
  box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .55) !important;
}

#hr-widget .search__input,
#hr-widget .select__input {
  background: #fff !important;
  transition: background-color .2s ease !important;
}
#hr-widget .search__input:hover,
#hr-widget .select__input:hover {
  background: var(--hrl-surface) !important;
}
#hr-widget .search__input_first { border-radius: 16px 0 0 16px !important; }
#hr-widget .select__input_last { border-radius: 0 16px 16px 0 !important; }

#hr-widget .search__input-text {
  color: var(--hrl-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}
#hr-widget .search__input-value,
#hr-widget .select__input-value {
  color: var(--hrl-ink) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

/* «Найти», «Забронировать» — графитовый текст на янтаре (белый на янтаре не читался).
   У виджета свои правила `body #hr-widget .button-primary[data-v]` с !important
   (специфичность 1,2,1), поэтому селектор здесь утяжелён повтором класса. */
body #hr-widget a.button-primary.button-primary,
body .vanilla-calendar a.button-primary.button-primary {
  background-color: var(--hrl-accent-fill) !important;
  color: var(--hrl-ink) !important;
  border: 0 !important;
  border-radius: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  transition: background-color .2s ease, color .2s ease !important;
}
body #hr-widget a.button-primary.button-primary .button-content,
body #hr-widget a.button-primary.button-primary svg { color: inherit !important; }
body #hr-widget a.button-primary.button-primary:hover,
body #hr-widget a.button-primary.button-primary:active,
body .vanilla-calendar a.button-primary.button-primary:hover {
  background-color: var(--hrl-ink) !important;
  color: #fff !important;
}
#hr-widget .search__input-button { font-size: 16px !important; }

/* ═══════════════════════════════════════════════════════
   ВЫПАДАЮЩИЙ СПИСОК «ГОСТИ»
   ═══════════════════════════════════════════════════════ */
#hr-widget .select__dropdown {
  border: 1px solid var(--hrl-line) !important;
  border-radius: 18px !important;
  padding: 10px !important;
  box-shadow: 0 28px 56px -24px rgba(0, 0, 0, .5) !important;
}
#hr-widget .select__row {
  color: var(--hrl-ink) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}
#hr-widget .select__increment {
  border: 0 !important;
  border-radius: 50% !important;
  color: var(--hrl-ink) !important;
  transition: background-color .15s ease !important;
}
#hr-widget .select__increment:not(.select_disabled):hover {
  background: var(--hrl-ink) !important;
}
/* Кружок и плюс нарисованы внутри svg (rect + path): без fill:none серая заливка
   перекрывала графитовый фон, и белый плюс на светлом кружке пропадал */
#hr-widget .select__increment svg rect,
#hr-widget .select__increment svg path { fill: none !important; transition: stroke .15s ease !important; }
#hr-widget .select__increment svg rect { stroke: var(--hrl-line) !important; }
#hr-widget .select__increment:not(.select_disabled):hover svg rect { stroke: var(--hrl-ink) !important; }
#hr-widget .select__increment:not(.select_disabled):hover svg path { stroke: #fff !important; }
#hr-widget .select__number { color: var(--hrl-ink) !important; font-weight: 600 !important; }
#hr-widget .select__option-child_select {
  background-color: var(--hrl-surface-2) !important;
  border: 0 !important;
  border-radius: 12px !important;
  color: var(--hrl-ink-2) !important;
}

/* ═══════════════════════════════════════════════════════
   КАЛЕНДАРЬ (вставляется в <body>)
   ═══════════════════════════════════════════════════════ */
.vanilla-calendar {
  border: 1px solid var(--hrl-line) !important;
  border-radius: 24px !important;
  box-shadow: 0 36px 70px -28px rgba(0, 0, 0, .55) !important;
  overflow: hidden !important;
}

.vanilla-calendar-month,
.vanilla-calendar-year {
  color: var(--hrl-ink) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
}

.vanilla-calendar-week__day {
  color: var(--hrl-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}
.vanilla-calendar-week__day_weekend { color: var(--hrl-accent) !important; }

/* Дни: без сетки из рамок, мягкие скругления */
.vanilla-calendar-day { padding: 2px !important; }
.vanilla-calendar-day__btn {
  background: transparent !important;
  border: 0 !important;
  border-radius: 14px !important;
  color: var(--hrl-ink) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  transition: background-color .15s ease, color .15s ease !important;
}
.vanilla-calendar-day__btn_weekend { color: var(--hrl-ink) !important; }
.vanilla-calendar-day__btn:not(.vanilla-calendar-day__btn_disabled):not(.vanilla-calendar-day__btn_selected):hover {
  background: var(--hrl-accent-soft) !important;
}
.vanilla-calendar-day__btn_disabled {
  background: transparent !important;
  color: #b3b6b8 !important;
  font-weight: 400 !important;
}
.vanilla-calendar-day__btn_today {
  box-shadow: inset 0 0 0 1.5px var(--hrl-accent-fill) !important;
}

/* Выбранные даты — графит; промежуток — мягкий янтарь */
.vanilla-calendar-day__btn_selected,
.vanilla-calendar-day__btn_selected:hover {
  background: var(--hrl-ink) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.vanilla-calendar-day_selected-intermediate .vanilla-calendar-day__btn {
  background: var(--hrl-accent-soft) !important;
  border-radius: 0 !important;
  color: var(--hrl-ink) !important;
}

/* Подсказка-цена над днём */
.vanilla-calendar-day__popup {
  background: var(--hrl-ink) !important;
  color: #fff !important;
  border-radius: 10px !important;
}

/* ── Подвал календаря: текст слева, «Сбросить» — плашкой справа ── */
.vanilla-calendar-footer {
  border-top: 1px solid var(--hrl-line) !important;
  padding: 16px 24px !important;
}
.vanilla-calendar-footer__container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}
.vanilla-calendar-footer__title {
  margin: 0 !important;
  color: var(--hrl-ink) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}
.vanilla-calendar-info__clear {
  flex: none !important;
  margin-left: auto !important;
  min-height: 40px !important;
  padding: 0 22px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--hrl-accent-fill) !important;
  color: var(--hrl-ink) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: background-color .2s ease, color .2s ease !important;
}
.vanilla-calendar-info__clear:hover {
  background: var(--hrl-ink) !important;
  color: #fff !important;
}
.vanilla-calendar-footer__notice { color: var(--hrl-muted) !important; }
.vanilla-calendar-footer__notice:empty { display: none !important; }

/* ═══════════════════════════════════════════════════════
   СПИСОК ОБЪЕКТОВ (страница бронирования)
   ═══════════════════════════════════════════════════════ */
#hr-widget .hotel-card {
  border: 1px solid var(--hrl-line) !important;
  border-radius: 18px !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
#hr-widget .hotel-info__title { color: var(--hrl-ink) !important; font-weight: 700 !important; }
#hr-widget .hotel-info__text,
#hr-widget .hotel-info__params-item { color: var(--hrl-ink-2) !important; }
#hr-widget .hotel-list__item { color: var(--hrl-muted) !important; }
/* Текстовые ссылки-кнопки («Подробнее», «Изменить»): янтарь не читался на белом */
body #hr-widget a.button-text.button-text,
body #hr-widget a.button-text.button-text .button-content,
body #hr-modal a.button-text.button-text,
body #hr-modal a.button-text.button-text .button-content,
body .vanilla-calendar a.button-text.button-text,
body .vanilla-calendar a.button-text.button-text .button-content,
body a.button-text.button-text,
body a.button-text.button-text .button-content {
  color: var(--hrl-accent) !important;
  font-weight: 600 !important;
}
#hr-widget .price-info__current-price { color: var(--hrl-ink) !important; font-weight: 700 !important; }
#hr-widget .price-info__day { color: var(--hrl-muted) !important; }
#hr-widget .price-info__button { border-radius: 12px !important; }

/* Точки слайдера фото */
#hr-widget .swiper-pagination-bullet-active { background: var(--hrl-accent-fill) !important; }

/* ═══════════════════════════════════════════════════════
   МОБИЛКА
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #hr-widget .search__container { border-radius: 18px !important; }
  .vanilla-calendar { border-radius: 20px !important; }
  .vanilla-calendar-footer { padding: 14px 16px !important; }
  .vanilla-calendar-info__clear { min-height: 38px !important; padding: 0 18px !important; }
}