.object-availability{padding:82px max(6vw,calc((100vw - 1180px)/2));background:#31708e;color:#fff}.object-availability-intro{max-width:720px;margin-bottom:32px}.object-availability-intro h2{font:clamp(36px,4vw,56px)/1.08 Lora,serif;letter-spacing:-1.5px;margin:18px 0}.object-availability-intro p{max-width:650px;color:rgba(255,255,255,.78);font-size:13px;line-height:1.75}.object-widget-card{padding:16px;border-radius:5px;background:#fff;color:#31708e;box-shadow:0 20px 55px rgba(11,35,46,.22)}.object-widget-card [data-instance-id="object-search"],.object-widget-card [data-instance-id="object-list"]{width:100%}.object-widget-card .hr-search-container{max-width:none!important;padding:0!important;background:transparent!important}.object-widget-card .search__container{width:100%!important;max-width:none!important}.object-widget-card .search__input-button{background:#5085a5!important}.object-widget-card .object-results-hidden{display:none!important}#objectBookingFallback{padding:26px;text-align:center;color:#687864}#objectBookingFallback a{color:#31708e;font-weight:800}@media(max-width:800px){.object-availability{padding:60px 18px}.object-widget-card{padding:8px}.object-widget-card .search__container{width:100%!important}}

/* Approved booking-bar design for every object. Do not change without a new
   direct request from the user. The legacy class name is retained so the
   confirmed selectors and widget behaviour remain byte-for-byte stable. */
.object-booking-preview-aga .object-widget-card {
  padding: 0;
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

:is(.object-booking-preview-aga .object-widget-card [data-instance-id="object-search"], .object-booking-preview-aga .object-search-host, body.object-booking-preview-aga > :is(#app, #hr-modal):has(.search__container)),
:is(.object-booking-preview-aga .object-widget-card [data-instance-id="object-search"], .object-booking-preview-aga .object-search-host, body.object-booking-preview-aga > :is(#app, #hr-modal):has(.search__container)) .main-page,
:is(.object-booking-preview-aga .object-widget-card [data-instance-id="object-search"], .object-booking-preview-aga .object-search-host, body.object-booking-preview-aga > :is(#app, #hr-modal):has(.search__container)) .hr-search-container,
:is(.object-booking-preview-aga .object-widget-card [data-instance-id="object-search"], .object-booking-preview-aga .object-search-host, body.object-booking-preview-aga > :is(#app, #hr-modal):has(.search__container)) .search {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 83px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

:is(.object-booking-preview-aga .object-widget-card [data-instance-id="object-search"], .object-booking-preview-aga .object-search-host, body.object-booking-preview-aga > :is(#app, #hr-modal):has(.search__container)) .search__container {
  position: relative !important;
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 83px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 4px solid #31708e !important;
  border-radius: 14px !important;
  background: #31708e !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

:is(.object-booking-preview-aga .object-widget-card [data-instance-id="object-search"], .object-booking-preview-aga .object-search-host, body.object-booking-preview-aga > :is(#app, #hr-modal):has(.search__container)) .search__calendar {
  display: flex !important;
  flex: 2 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
}

:is(.object-booking-preview-aga .object-widget-card [data-instance-id="object-search"], .object-booking-preview-aga .object-search-host, body.object-booking-preview-aga > :is(#app, #hr-modal):has(.search__container)) .search__input,
:is(.object-booking-preview-aga .object-widget-card [data-instance-id="object-search"], .object-booking-preview-aga .object-search-host, body.object-booking-preview-aga > :is(#app, #hr-modal):has(.search__container)) .select__input {
  flex: 1 1 0 !important;
  width: auto !important;
  height: 75px !important;
  min-height: 75px !important;
  margin: 0 !important;
  border: 0 !important;
  border-right: 1px solid #d8d8d8 !important;
  border-radius: 0 !important;
  background: #fff !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
}

:is(.object-booking-preview-aga .object-widget-card [data-instance-id="object-search"], .object-booking-preview-aga .object-search-host, body.object-booking-preview-aga > :is(#app, #hr-modal):has(.search__container)) .search__input_first {
  border-radius: 9px 0 0 9px !important;
}

:is(.object-booking-preview-aga .object-widget-card [data-instance-id="object-search"], .object-booking-preview-aga .object-search-host, body.object-booking-preview-aga > :is(#app, #hr-modal):has(.search__container)) .search__input-text {
  color: #766f52 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

:is(.object-booking-preview-aga .object-widget-card [data-instance-id="object-search"], .object-booking-preview-aga .object-search-host, body.object-booking-preview-aga > :is(#app, #hr-modal):has(.search__container)) .search__input-value,
:is(.object-booking-preview-aga .object-widget-card [data-instance-id="object-search"], .object-booking-preview-aga .object-search-host, body.object-booking-preview-aga > :is(#app, #hr-modal):has(.search__container)) .select__input-value {
  color: #276b8e !important;
  font-family: Georgia, serif !important;
  font-weight: 700 !important;
}

:is(.object-booking-preview-aga .object-widget-card [data-instance-id="object-search"], .object-booking-preview-aga .object-search-host, body.object-booking-preview-aga > :is(#app, #hr-modal):has(.search__container)) .search__input-button.button-primary.big {
  display: flex !important;
  flex: 0 0 130px !important;
  min-width: 130px !important;
  height: 75px !important;
  min-height: 75px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 14px 14px 0 !important;
  background: #087342 !important;
  align-self: stretch !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* Only the reservation CTA in a result card is green. The search CTA keeps
   the existing blue treatment and the main page is not affected. */
body.object-page :is(#app, #hr-modal, #hr-widget) .hotel-card :is(a, button).button-primary {
  background-color: #087342 !important;
  border-radius: 10px !important;
}

body.object-page :is(#app, #hr-modal, #hr-widget) .hotel-card :is(a, button).button-primary:hover {
  background-color: #065d35 !important;
}

/* Hide the white Homereserve strip around the centred post-search bar. */
body.object-booking-preview-aga > :is(#app, #hr-modal):has(.search__container) .search {
  background-color: #31708e !important;
}

:is(.object-booking-preview-aga .object-widget-card [data-instance-id="object-search"], .object-booking-preview-aga .object-search-host, body.object-booking-preview-aga > :is(#app, #hr-modal):has(.search__container)) .search__input-button .button-content {
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  color: #fff !important;
  font: 700 18px/1 Arial, sans-serif !important;
}

:is(.object-booking-preview-aga .object-widget-card [data-instance-id="object-search"], .object-booking-preview-aga .object-search-host, body.object-booking-preview-aga > :is(#app, #hr-modal):has(.search__container)) .select__input_last {
  position: relative !important;
  z-index: 20 !important;
}

:is(.object-booking-preview-aga .object-widget-card [data-instance-id="object-search"], .object-booking-preview-aga .object-search-host, body.object-booking-preview-aga > :is(#app, #hr-modal):has(.search__container)) .select__dropdown {
  z-index: 100 !important;
}

/* The object search above remains functional, so suppress only the duplicate
   search strip generated inside the results list. */
.object-booking-preview-aga [data-instance-id="object-list"] .hr-search-container {
  display: none !important;
}

.object-booking-preview-aga .object-widget-card [data-instance-id="object-list"] .hotels,
.object-booking-preview-aga .object-widget-card [data-instance-id="object-list"] .hotel-card {
  width: 100% !important;
  max-width: none !important;
}

/* The post-search module is styled from its own DOM shape as well as the JS
   marker. This removes the race when Homereserve replaces a host between
   MutationObserver callbacks. */
body.object-booking-preview-aga > :is(#app, #hr-modal):has(.search__container) .search {
  justify-content: center !important;
}

body.object-booking-preview-aga > :is(#app, #hr-modal):has(.search__container) .search__container {
  flex: 0 1 1180px !important;
  width: min(1180px, 88vw) !important;
  max-width: 1180px !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

/* Before a search, keep the object widget as the compact bar shown in the
   approved result view instead of leaving a tall blue panel around it. */
.object-booking-preview-aga .object-availability {
  padding: 0;
  background: #f7f9fb !important;
  scroll-margin-top: 108px;
}

/* The booking bar must never be covered by the blue sticky site header. */
.object-booking-preview-aga .object-header {
  position: static;
}

.object-booking-preview-aga .object-availability-intro {
  display: none;
}

.object-booking-preview-aga .rooms-section {
  background: #eaf4f9 !important;
}

.object-booking-preview-aga .object-widget-card {
  width: min(1180px, calc(100% - 36px)) !important;
  margin: 0 auto !important;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

@media(max-width:800px) {
  .object-booking-preview-aga .object-widget-card { padding: 0; }

  body.object-booking-preview-aga > :is(#app, #hr-modal):has(.search__container) .search__container {
    width: calc(100% - 36px) !important;
  }
}