/* ---------------------------------------------------------------------------
   Booking panel: "Book a stay" in the nav opens one dropdown holding the date
   picker and the guest steppers.
   Figma: Search bar 280:293, Picker: When 281:1111, Picker: Who 282:1315.

   Lives on search-results.html. It was tried in the hero of the location
   pages, where the hero clips its own overflow to hold its cover image in and
   kept shearing the pickers off, and then inline under the heading here. Top
   right of the properties page is where it settled: the panel has the whole
   page below it, and it sits on the page where someone is already narrowing
   a list rather than on the two front doors.

   Colours are sampled off the Figma render: cream #F1ECDB panel, moss
   #3B4126 type and selected day, #E7E2D0 range pill, rules moss at 19%.
   --------------------------------------------------------------------------- */

/* ---- the bar itself, Figma 280:293 ---- */

/* It sits where the wordmark used to, at the top left. Numbers are the design's
   own, converted from its 750px frame: 16.791/20.989px type, a 46px rule, a
   70.953px search button on 5.597px of vertical padding. They are clamped
   rather than fixed so the bar can give ground on a narrow screen instead of
   pushing the burger off the edge.

   Script-only. Without it the native bar further down the page is the one that
   works, and this would be a trigger for a panel that never gets built. */
/* Owl and bar travel together on the left; the burger keeps the right edge.
   Without the group the nav's space-between would strand the bar in the middle. */
.ch-nav__brand {
  display: flex;
  align-items: center;
  gap: clamp(.5rem, 1.1vw, 1rem);
  min-width: 0;
  /* The group carries the width, not the bar. A flex item inside a
     shrink-to-fit flex item contributes its content size, not its basis, so
     leaving the 503px on the bar collapsed it to 271 the moment it gained this
     wrapper. 555px is the owl, the gap and the bar together; the bar then
     fills whatever the owl leaves. */
  flex: 0 1 34.6875rem;
}

/* Under ~380px the owl costs the bar the 36px that keeps "2 adults" whole, and
   a clipped value is worse than no mark. */
@media screen and (max-width: 379px) {
  .ch-nav__owl {
    display: none;
  }
}

.ch-searchbar {
  display: none;
}

.js .ch-searchbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(.5rem, 1.5vw, 1.4rem);
  /* Fills what the owl leaves of .ch-nav__brand's 555px, which works out at
     the 503px the design's 750 scales to at this height -- 9.1:1, its own. */
  flex: 1 1 auto;
  min-width: 0;
  /* Height tracks the wordmark this replaced -- 45px at 1440 in an 85px nav.
     At the design's own 82px the bar stood 37px taller than the logo and
     pushed the page heading down with it, which is the one thing swapping
     them was not meant to do. Everything inside scales off this. */
  height: clamp(2.6875rem, 3.82vw, 3.4375rem);
  padding: 0 .25rem 0 clamp(1rem, 2.16vw, 1.9375rem);
  border-radius: 50em;
  /* The design's frame sits on a dark canvas, where a cream pill reads as
     raised. This page's background is that same cream -- measured, bar and
     page were rgb(241,236,219) on rgb(241,236,219), separation 1.00, with a 3%
     shadow the only thing between them. So it takes the treatment this page
     already gives a card on cream: a moss hairline at 20%, over white rather
     than cream, and a shadow with something in it. */
  /* The design's own cream, which is the same cream as this page -- so unlike
     the white version, the fill contributes nothing and the edge carries the
     whole job. Hence 35% rather than the 20% the site's cards use: at 20% over
     a fill that was already lighter than the page it was a hint, and here it
     would be the only thing there. */
  border: 1px solid rgba(59, 65, 38, .35);
  background-color: #f1ecdb;
  box-shadow: 0 1px 2px rgba(16, 19, 7, .05), 0 .625rem 1.5rem rgba(16, 19, 7, .09);
}

.ch-searchbar__seg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent, #3b4126);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.ch-searchbar__seg:focus-visible {
  outline: 2px solid var(--accent, #3b4126);
  outline-offset: 4px;
  border-radius: .25rem;
}

.ch-searchbar__label {
  font-size: clamp(.625rem, .79vw, .71875rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.005em;
  text-transform: uppercase;
  opacity: .7;
}

.ch-searchbar__value {
  max-width: 100%;
  overflow: hidden;
  font-size: clamp(.8125rem, 1.08vw, .96875rem);
  line-height: 1.35;
  letter-spacing: -.02em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ch-searchbar__rule {
  flex: none;
  width: 1px;
  height: 62%;
  background-color: rgba(59, 65, 38, .25);
}

.ch-searchbar__submit {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100% - .5rem);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 100%;
  background-color: var(--accent, #3b4126);
  color: #f1ecdb;
  cursor: pointer;
  transition: opacity .18s ease;
}

.ch-searchbar__submit:hover,
.ch-searchbar__submit:focus-visible {
  opacity: .9;
}

.ch-searchbar__submit svg {
  width: 38%;
  height: 38%;
}

.ch-nav__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* The native bar under the page heading is the no-script fallback. Hidden off
   the html.js flag set in <head> rather than from this script, so it never
   paints first and then vanishes; without script it stays, and still works. */
.js .ch-search {
  display: none;
}

/* ---- the panel ---- */

/* Fixed and parented to <body>: nothing above it can clip it, whatever the
   section it is nominally anchored to does with its overflow. */
.ch-book {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  max-width: calc(100vw - 1rem);
  /* Same treatment as the bar they hang from: the design's cream, which is
     this page's cream too, so the edge and the shadow carry them. */
  background-color: #f1ecdb;
  border: 1px solid rgba(59, 65, 38, .35);
  border-radius: 1rem;
  box-shadow: 0 1.5rem 3rem rgba(19, 21, 12, .24);
  color: var(--accent, #3b4126);
  font-size: .9375rem;
  text-align: left;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ch-book[hidden] {
  display: none;
}

/* Figma 281:1111 is 462x468 and 282:1315 is 502x328. Widths are the design's;
   the When picker's height is too, since its calendar scrolls inside it. */
.ch-book--when {
  width: 28.875rem;                 /* 462px */
}

.ch-book--who {
  width: 31.375rem;                 /* 502px */
  padding: 1rem;                    /* the design's 16px inset */
}

.ch-book button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.ch-book button:focus-visible {
  outline: 2px solid var(--accent, #3b4126);
  outline-offset: 2px;
}

/* Only hidden inputs live here now; both pickers sit outside it. */
.ch-book__form[hidden] {
  display: none;
}

/* ---- dates ---- */

/* 128px sidebar and a 466px-tall body, per the design's own columns. The
   calendar scrolls within it rather than the card growing. */
.ch-book__cal {
  display: grid;
  grid-template-columns: 8rem 1fr;
  height: 26rem;
  border-bottom: 1px solid rgba(59, 65, 38, .19);
}

.ch-pick__months {
  position: relative;
  overflow-y: auto;
  padding: .25rem 0;
  border-right: 1px solid rgba(59, 65, 38, .19);
  scrollbar-width: none;
}

.ch-pick__months::-webkit-scrollbar {
  display: none;
}

.ch-pick__month-btn {
  display: block;
  width: 100%;
  height: 2rem;
  padding: 0 .875rem;
  text-align: left;
  line-height: 2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ch-pick__month-btn:hover {
  text-decoration: underline;
}

/* Marks every month the calendar is currently showing, so it spans more than
   one row when a scroll position straddles a boundary. Script sets the size. */
.ch-pick__month-mark {
  position: absolute;
  right: 0;
  width: 3px;
  border-radius: 2px;
  background-color: var(--accent, #3b4126);
  transition: top .15s ease, height .15s ease;
  pointer-events: none;
}

.ch-pick__cal {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ch-pick__weekdays {
  flex: none;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin: 0 .5rem;
  height: 2.25rem;
  align-items: center;
  border-bottom: 1px solid rgba(59, 65, 38, .19);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: center;
}

.ch-pick__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 .5rem;
  scrollbar-width: none;
}

.ch-pick__scroll::-webkit-scrollbar {
  display: none;
}

/* A date row cut in half by the container edge reads as broken rather than as
   more-below, and no fixed height fixes it: month labels sit between the rows,
   so the 40px rhythm shifts every month. Fade the last rows out instead, and
   drop the fade once there is nothing further down -- otherwise the end of the
   list looks faded for no reason. */
.ch-pick__scroll,
.ch-pick__months {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.25rem), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 2.25rem), transparent);
}

.ch-pick__scroll.is-at-end,
.ch-pick__months.is-at-end {
  -webkit-mask-image: none;
  mask-image: none;
}

.ch-pick__mlabel {
  padding: .75rem 0 .25rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ch-pick__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 2.5rem;
}

/* The cell carries the range pill so it runs edge to edge and closes the gaps
   between the day circles; the circle sits on top of it. */
.ch-pick__cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ch-pick__cell:before {
  content: "";
  position: absolute;
  top: .125rem;
  bottom: .125rem;
  left: 0;
  right: 0;
  background-color: #e7e2d0;
  opacity: 0;
}

/* The pill covers the nights stayed -- arrival through the night before
   checkout -- so a Feb 21 to Mar 6 stay reads as the 13 nights it is, and the
   checkout day sits outside it. */
.ch-pick__cell.is-pill:before {
  opacity: 1;
}

.ch-pick__cell.is-pill-left:before {
  border-top-left-radius: 50em;
  border-bottom-left-radius: 50em;
}

.ch-pick__cell.is-pill-right:before {
  border-top-right-radius: 50em;
  border-bottom-right-radius: 50em;
}

.ch-pick__day {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 100%;
  font-size: .875rem;
  line-height: 1;
}

.ch-pick__day:hover {
  box-shadow: inset 0 0 0 1px var(--accent, #3b4126);
}

/* Arrival is filled; checkout is ringed, the way the design distinguishes the
   night you sleep from the morning you leave. */
.ch-pick__cell.is-start .ch-pick__day {
  background-color: var(--accent, #3b4126);
  color: #f1ecdb;
}

.ch-pick__cell.is-end .ch-pick__day {
  box-shadow: inset 0 0 0 1.5px var(--accent, #3b4126);
}

.ch-pick__day[disabled] {
  opacity: .45;
  cursor: default;
}

.ch-pick__day[disabled]:hover {
  box-shadow: none;
}

.ch-pick__cell.is-empty {
  pointer-events: none;
}

.ch-book__dates-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.125rem;                 /* the design's 50px bar */
  padding: 0 1.3125rem;
}

.ch-pick__nights {
  font-size: .875rem;
}

.ch-pick__clear {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ch-pick__clear:hover {
  text-decoration: underline;
}

/* ---- guests ---- */

.ch-pick__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .875rem 0;
}

.ch-pick__row + .ch-pick__row {
  border-top: 1px solid rgba(59, 65, 38, .19);
}

.ch-pick__rowname {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.03em;
}

.ch-pick__rownote {
  font-size: .8125rem;
  line-height: 1.35;
  letter-spacing: -.01em;
}

.ch-pick__rownote a {
  color: inherit;
}

.ch-pick__step {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 7rem;
}

.ch-pick__stepbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 100%;
  box-shadow: inset 0 0 0 1px currentColor;
  transition: opacity .15s ease;
}

.ch-pick__stepbtn:hover:not([disabled]) {
  opacity: .7;
}

.ch-pick__stepbtn[disabled] {
  opacity: .35;
  cursor: default;
}

.ch-pick__stepbtn svg {
  display: block;
  width: .875rem;
  height: .875rem;
}

.ch-pick__count {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

/* ---- submit ---- */

/* ---- narrow screens ---- */

@media screen and (max-width: 30em) {
  .ch-nav__actions {
    gap: .75rem;
  }

  /* The month list is the first thing to go when width is short; the calendar
     still scrolls, so no month is out of reach. */
  .ch-book__cal {
    grid-template-columns: 1fr;
  }

  .ch-pick__months {
    display: none;
  }

  .ch-pick__rowname {
    font-size: 1.125rem;
  }
}