/* home-booking-bar.css — форма брони hero (банер + дата/гости/поиск). Только главная. */

.hero-booking-bar {
  --hero-booking-search-width: clamp(221px, 15.156vw, 291px);
  display: grid;
  grid-template-columns:
    var(--hero-booking-banner-width)
    var(--hero-booking-date-track)
    var(--hero-booking-guest-track)
    var(--hero-booking-search-width);
  justify-content: start;
  align-items: center;
  gap: 0;
  width: min(100%, var(--home-hero-booking-width));
  height: 123px;
  margin: auto auto 0;
  padding: 0 var(--hero-booking-widget-pad) 0 0;
  background: transparent;
  color: #121212;
  border: 0;
}

.hero-booking-bar__field,
.hero-booking-bar__search {
  position: relative;
  min-height: 86px;
  background: #fffced;
  border: 1px solid #c6c1a1;
}

.hero-booking-bar__promo {
  min-height: 123px;
  height: 123px;
  overflow: hidden;
  color: #fff;
}

.hero-booking-bar__wine-banner {
  width: 100%;
  height: 100%;
}

.hero-booking-bar__field {
  padding: 13px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-booking-bar__field + .hero-booking-bar__field,
.hero-booking-bar__search {
  border-left: 0;
}

.hero-booking-bar__field--date {
  z-index: 5;
  margin-left: var(--hero-booking-widget-pad);
}

.hero-booking-bar__date-toggle,
.hero-booking-bar__select-toggle {
  width: 100%;
  height: 100%;
  padding: 0 28px 0 0;
  border: 0;
  background: transparent;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  cursor: pointer;
}

.hero-booking-bar__date-toggle:hover,
.hero-booking-bar__date-toggle:focus-visible,
.hero-booking-bar__select-toggle:hover,
.hero-booking-bar__select-toggle:focus-visible {
  background: transparent;
  transform: none;
}

.hero-booking-bar__label {
  margin-bottom: 10px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.hero-booking-bar__value {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  line-height: 1.2;
}

.hero-booking-bar__chevron {
  position: absolute;
  right: 25px;
  top: 64%;
  width: 7px;
  height: 13px;
  background: #171513;
  mask: url("../images/figma/chevron-figma.svg") center / contain no-repeat;
  -webkit-mask: url("../images/figma/chevron-figma.svg") center / contain no-repeat;
  transform: translateY(-50%) rotate(90deg);
  pointer-events: none;
}

.hero-booking-bar .hero-booking-bar__dropdown {
  top: auto;
  bottom: calc(100% + 1px);
  left: -1px;
  width: min(834px, calc(100vw - 70px));
  z-index: 80;
}

.hero-booking-bar .booking-dropdown--calendar {
  width: min(calc(100% + var(--hero-booking-guest-track) + var(--hero-booking-search-width) + 2px), calc(100vw - 70px));
}

.hero-booking-bar__field--guest {
  z-index: 7;
}

.hero-booking-bar__field--currency {
  z-index: 6;
}

.hero-booking-bar__field--special {
  z-index: 5;
  align-items: stretch;
}

.hero-booking-bar .booking-dropdown--guest {
  left: -1px;
  right: auto;
  width: min(calc(100% + var(--hero-booking-search-width) + 2px), calc(100vw - 70px));
}

.hero-booking-bar .booking-dropdown--currency {
  width: 305px;
  min-height: 173px;
  padding: 18px 0;
}

.hero-booking-bar__field--special .hero-booking-bar__label {
  margin-bottom: 0;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}

.hero-booking-bar__field--special .hero-booking-bar__value {
  margin-top: -4px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 40px;
  font-weight: 500;
  line-height: 1;
}

.hero-booking-bar__field--special .hero-booking-bar__chevron {
  top: 50%;
}

.hero-booking-bar__search {
  padding: 18px 17px;
}

.hero-booking-bar__button {
  width: 100%;
  min-height: var(--button-height);
  padding: 0 var(--button-padding-x);
  background: var(--button-dark-bg);
  font-size: var(--button-font-size);
  font-weight: 500;
  letter-spacing: var(--button-letter-spacing);
}

@media (max-width: 1440px) {
  .hero-booking-bar {
    padding-left: 18px;
    padding-right: 18px;
  }

  .hero-booking-bar__field {
    padding-left: 18px;
  }
}

@media (max-width: 1366px) {
  .hero-booking-bar {
    --hero-booking-search-width: 245px;
    grid-template-columns: repeat(2, minmax(220px, 261px)) minmax(220px, 245px);
  }

  .hero-booking-bar__field,
  .hero-booking-bar__search {
    min-height: 78px;
  }

  .hero-booking-bar__label {
    font-size: 0.78rem;
    letter-spacing: 0.18em;
  }

  .hero-booking-bar__value {
    font-size: 1rem;
  }
}

@media (max-width: 1180px) {
  .hero-booking-bar {
    grid-template-columns: repeat(2, minmax(260px, 305px)) 269px;
    width: 100%;
    height: auto;
    min-height: 123px;
  }

  .hero-booking-bar__field + .hero-booking-bar__field,
  .hero-booking-bar__search {
    border-left: 1px solid #c6c1a1;
  }

  .hero-booking-bar .hero-booking-bar__dropdown {
    top: 100%;
    bottom: auto;
    border-top: 0;
    border-bottom: 1px solid var(--booking-line);
  }

  .hero-booking-bar .booking-dropdown--guest {
    width: min(calc(100% + var(--hero-booking-search-width) + 2px), calc(100vw - 28px));
  }

  .hero-booking-bar .booking-dropdown--calendar {
    width: min(calc(200% + var(--hero-booking-search-width) + 4px), calc(100vw - 28px));
  }

  .hero-booking-bar .booking-dropdown--currency {
    width: min(305px, calc(100vw - 28px));
  }

  .hero-booking-bar .booking-dropdown--special,
  .booking-widget .booking-dropdown--special {
    width: min(305px, calc(100vw - 28px));
  }

  .hero-booking-bar__button {
    width: 100%;
    min-height: var(--button-height);
  }
}

@media (max-width: 640px) {
  .hero-booking-bar {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1367px) and (max-width: 1440px) {
  .hero-booking-bar {
    --hero-booking-search-width: 231px;
    grid-template-columns: repeat(2, minmax(240px, 261px)) 231px;
    width: 100%;
    height: 113px;
    min-height: 113px;
    padding: 17px 19px 17px 20px;
  }

  .hero-booking-bar__field,
  .hero-booking-bar__search {
    min-height: 79px;
  }

  .hero-booking-bar__field {
    padding: 13px 24px 13px 20px;
  }

  .hero-booking-bar__search {
    padding: 16px 16px 14px;
  }
}

@media (min-width: 1025px) {
  .hero-booking-bar {
    --hero-booking-banner-width: clamp(300px, 39.22vw, 600px);
    --hero-booking-search-width: clamp(180px, 15.03vw, 291px);
    --hero-booking-right-start: clamp(14px, 1.31vw, 20px);
    --hero-booking-right-end: clamp(14px, 1.18vw, 18px);
    position: relative;
    display: grid;
    grid-template-columns: var(--hero-booking-banner-width) minmax(0, 1fr) minmax(0, 1fr) var(
        --hero-booking-search-width
      );
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 126px;
    min-height: 126px;
    margin: auto 0 0;
    padding: 0 var(--hero-booking-right-end) 0 0;
    justify-content: stretch;
    background: transparent;
  }

  .hero-booking-bar::before {
    content: none;
  }

  .hero-booking-bar__field,
  .hero-booking-bar__search {
    z-index: 1;
    align-self: center;
    height: 86px;
    min-height: 86px;
  }

  .hero-booking-bar__field {
    padding: 13px 24px;
  }

  .hero-booking-bar__search {
    padding: 16px 18px;
  }

  .hero-booking-bar > .hero-booking-bar__field--date {
    margin-left: var(--hero-booking-right-start);
    border-left: 1px solid #c6c1a1;
  }

  .hero-booking-bar .hero-booking-bar__dropdown {
    top: auto;
    bottom: calc(100% + 1px);
    border-top: 1px solid var(--booking-line);
    border-bottom: 0;
  }
}

@media (min-width: 1180px) and (max-width: 1440px) {
  .hero-booking-bar {
    --hero-booking-banner-width: clamp(463px, 39.22vw, 565px);
    --hero-booking-search-width: clamp(192px, 15.03vw, 216px);
    --hero-booking-right-start: clamp(15px, 1.31vw, 19px);
    --hero-booking-right-end: clamp(14px, 1.18vw, 17px);
    width: 100%;
    max-width: none;
    height: 113px;
    min-height: 113px;
    margin: 0;
  }

  .hero-booking-bar__field,
  .hero-booking-bar__search {
    height: 79px;
    min-height: 79px;
  }

  .hero-booking-bar__field {
    padding: 13px 22px 13px 20px;
  }

  .hero-booking-bar__search {
    padding: 16px;
  }

  .hero-booking-bar__label {
    font-size: 14px;
    letter-spacing: 0.2em;
  }

  .hero-booking-bar__value {
    font-size: 18px;
  }
}

@media (min-width: 1280px) and (max-width: 1440px) {
  .hero-booking-bar {
    --hero-booking-banner-width: clamp(410px, 32vw, 461px);
    grid-template-columns: var(--hero-booking-banner-width) minmax(316px, 1fr) minmax(270px, 1fr) var(
        --hero-booking-search-width
      );
  }
}

@media (min-width: 1441px) {
  .hero-booking-bar {
    --hero-booking-banner-width: clamp(461px, 32vw, 600px);
    grid-template-columns: var(--hero-booking-banner-width) minmax(270px, 1fr) minmax(270px, 1fr) var(
        --hero-booking-search-width
      );
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 1179px) {
  .hero-booking-bar {
    --hero-booking-search-width: 220px;
    grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(180px, 220px);
  }

  .hero-booking-bar__field + .hero-booking-bar__field,
  .hero-booking-bar__search {
    border-left: 1px solid #c6c1a1;
  }
}

@media (max-width: 767px) {
  .hero-booking-bar {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .hero-booking-bar__field + .hero-booking-bar__field,
  .hero-booking-bar__search {
    border-top: 0;
  }

  .hero-booking-bar .hero-booking-bar__dropdown {
    width: min(100%, calc(100vw - 28px));
  }
}

@media (max-width: 374px) {
  .hero-booking-bar {
    padding: 10px;
  }
}

.hero-booking-bar {
  --hero-booking-banner-width: clamp(532px, calc(14.167vw + 328px), 600px);
  --hero-booking-date-track: clamp(275px, calc(7.292vw + 170px), 310px);
  --hero-booking-guest-track: clamp(260px, calc(10.417vw + 110px), 310px);
  --hero-booking-search-width: clamp(221px, 15.156vw, 291px);
  --hero-booking-widget-pad: clamp(20px, calc(-0.833vw + 36px), 24px);
  position: relative;
  width: min(calc(100vw - 32px), var(--home-hero-booking-width));
  max-width: var(--home-hero-booking-width);
  height: var(--home-hero-booking-height);
  min-height: var(--home-hero-booking-height);
  margin: auto auto 0;
  padding: 0 var(--hero-booking-widget-pad) 0 0;
  grid-template-columns:
    var(--hero-booking-banner-width)
    var(--hero-booking-date-track)
    var(--hero-booking-guest-track)
    var(--hero-booking-search-width);
  justify-content: start;
  align-items: center;
}

.hero-booking-bar::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: var(--hero-booking-banner-width);
  z-index: 0;
  background: #fffced;
  pointer-events: none;
}

.hero-booking-bar__promo,
.hero-booking-bar__field,
.hero-booking-bar__search {
  position: relative;
  z-index: 1;
}

.hero-booking-bar__field,
.hero-booking-bar__search {
  height: var(--home-hero-booking-field-height);
  min-height: var(--home-hero-booking-field-height);
}

.hero-booking-bar__promo {
  height: var(--home-hero-booking-height);
  min-height: var(--home-hero-booking-height);
}

.hero-booking-bar > .hero-booking-bar__field--date {
  margin-left: var(--hero-booking-widget-pad);
  border-left: 1px solid #c6c1a1;
}

@media (min-width: 1180px) and (max-width: 1440px) {
  .hero-booking-bar {
    --hero-booking-banner-width: clamp(410px, calc(76.25vw - 566px), 532px);
    --hero-booking-date-track: clamp(230px, calc(13.125vw + 62px), 251px);
    --hero-booking-guest-track: clamp(230px, calc(18.75vw - 10px), 260px);
    --hero-booking-search-width: clamp(190px, calc(19.375vw - 58px), 221px);
    --hero-booking-widget-pad: clamp(20px, calc(2.5vw - 12px), 24px);
    margin: auto auto 0;
    padding: 0 var(--hero-booking-widget-pad) 0 0;
  }
}

@media (min-width: 1441px) {
  .hero-booking-bar {
    width: min(100%, var(--home-hero-booking-width));
    max-width: var(--home-hero-booking-width);
  }
}

@media (min-width: 1280px) {
  .hero-booking-bar {
    grid-template-columns:
      var(--hero-booking-banner-width)
      minmax(var(--hero-booking-date-track), 1fr)
      minmax(var(--hero-booking-guest-track), 1fr)
      var(--hero-booking-search-width);
    justify-content: stretch;
  }

  .hero-booking-bar .booking-dropdown--calendar {
    width: min(
      calc(
        var(--home-hero-booking-width) - var(--hero-booking-banner-width) - var(--hero-booking-widget-pad) -
          var(--hero-booking-widget-pad)
      ),
      calc(100vw - 70px)
    );
  }
}

@media (max-width: 1179px) {
  .hero-booking-bar {
    display: none;
  }
}

/* Multi-room guest dropdown from Figma nodes 1685:574/10659/10582/10473. */
@media (min-width: 1180px) {
  /* The panel sizes to its content and is only capped by the space between the
     fixed header and the hero bar (it opens upward). With one room it stays
     compact — no dead space above the phone strip; with 2-3 rooms it grows to
     the cap and the room list scrolls internally (Figma 1685:10582/03/04).

     The `- 286px` is the reserved vertical budget and is what keeps the panel
     clear of the fixed header on short viewports. It is one chain:
       100px  header height
        14px  gap the panel keeps above the hero bar (matches the design)
       140px  hero bar + its offset from the viewport bottom
        32px  visible breathing gap under the header  <- tune this one
     At 1280x700 the cap resolves to 414px and the panel top lands at ~132
     (header bottom 100), i.e. a clearly visible gap instead of the 0.5px seam
     the previous 254px budget produced. One room is unaffected: it is shorter
     than the cap and still sizes to its content. */
  /* :not([hidden]) is required: this selector outweighs `.booking-dropdown[hidden]`,
     so without it the `display: flex` below keeps the closed panel on screen. */
  .hero-booking-bar .booking-dropdown--guest:has(.booking-room-guests):not([hidden]) {
    left: auto;
    right: calc(-1 * var(--hero-booking-search-width) - 1px);
    width: min(calc(100% + var(--hero-booking-search-width) + 2px), calc(100vw - 70px));
    height: auto;
    min-height: 0;
    max-height: min(620px, calc(100vh - 286px));
    padding: 32px 24px 88px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Short viewports (e.g. MacBook 1280x700): size against the dynamic viewport
     so the panel never slides under the fixed header or past the hero bar. */
  @supports (height: 100dvh) {
    .hero-booking-bar .booking-dropdown--guest:has(.booking-room-guests):not([hidden]) {
      max-height: min(620px, calc(100dvh - 286px));
    }
  }

  /* The scroll region covers the room list *and* the add-room link, so the link
     travels with the content instead of floating over the counters. The phone
     strip below stays pinned (it is absolutely positioned against the panel). */
  .hero-booking-bar .booking-room-guests {
    min-height: 0;
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    margin-right: -18px;
    padding-right: 18px;
    overflow-y: auto;
    /* Visible thin scrollbar (Figma 1685:10582): the list scrolls when the
       viewport is short, and the affordance must be discoverable. */
    scrollbar-width: thin;
    scrollbar-color: #c6c1a1 transparent;
  }

  .hero-booking-bar .booking-room-guests::-webkit-scrollbar {
    width: 4px;
  }

  .hero-booking-bar .booking-room-guests::-webkit-scrollbar-thumb {
    background: #c6c1a1;
  }

  .hero-booking-bar .booking-room-guests__list {
    min-height: 0;
    flex: 0 0 auto;
    overflow: visible;
  }

  .hero-booking-bar .booking-room-guests__room {
    padding-bottom: 38px;
  }

  .hero-booking-bar .booking-room-guests__room + .booking-room-guests__room {
    padding-top: 44px;
  }

  .hero-booking-bar .booking-room-guests__room:only-child .booking-room-guests__head {
    display: none;
  }

  .hero-booking-bar .booking-room-guests__head {
    padding: 0 0 22px;
  }

  .hero-booking-bar .booking-room-guests__remove {
    display: inline-flex;
    gap: 4px;
    text-decoration: none;
  }

  .hero-booking-bar .booking-room-guests__add {
    width: auto;
    min-height: 0;
    /* Sits in the scroll flow right under the last room's counters and close
       above the divider of the phone strip (Figma 02/03/04 mockups). */
    margin: 6px 0 14px;
    padding: 0;
    border: 0;
    display: inline-flex;
    justify-content: flex-start;
    align-self: flex-start;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    text-decoration: underline;
    text-transform: none;
    text-decoration-skip-ink: auto;
    text-underline-offset: 6px;
    flex: 0 0 auto;
  }

  .hero-booking-bar .booking-room-guests__add span {
    display: none;
  }

  .hero-booking-bar .booking-room-guests__add[hidden] {
    display: none;
  }

  .hero-booking-bar .booking-room-guests__limit {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: 88px;
    margin: 0;
    padding: 30px 24px 20px;
    display: block;
    border-top: 1px solid var(--booking-line, #c6c1a1);
    background: #fffced;
    font-size: 12px;
    font-style: italic;
    line-height: 1.35;
    text-align: left;
    z-index: 1;
  }

  .hero-booking-bar .booking-room-guests__limit a {
    display: inline;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: 0;
    text-decoration: underline;
    white-space: nowrap;
  }

}