/* stay search: hotel + dates + search, one bar */
.searchbar { margin-block: 1rem 0.5rem; container-type: inline-size; width: 100%; }
.searchbar--hero { margin-block: 0; position: relative; z-index: 2; }
.search { display: grid; gap: 0; background: #fff; border: 2px solid var(--brand); border-radius: 1rem; box-shadow: 0 12px 32px rgb(0 0 0 / 0.12); overflow: hidden; }
.search__field { display: grid; gap: 0.125rem; align-content: center; min-height: 64px; padding: 0.625rem 1rem; text-align: start; background: #fff; border: 0; font: inherit; color: inherit; cursor: pointer; }
.search__field + .search__field { border-block-start: 1px solid rgb(0 0 0 / 0.1); }
.search__field:hover { background: #faf7f0; }
.search__field:focus-within, .search__field:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.search__label { font-size: 0.8125rem; font-weight: 700; color: rgb(0 0 0 / 0.55); }
.search__value { font-weight: 700; min-height: 1.5em; }
.search__value:not(.is-set) { color: rgb(0 0 0 / 0.5); font-weight: 600; }
.search__select { width: 100%; padding: 0; border: 0; background: transparent; font: inherit; font-weight: 700; color: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; }
.search__select:focus { outline: none; }
.search__go { border-radius: 0; min-height: 56px; }
@container (min-width: 44rem) {
  .search__field + .search__field { border-block-start: 0; border-inline-start: 1px solid rgb(0 0 0 / 0.1); }
  .search__go { padding-inline: 2.25rem; min-height: 72px; }
}

/* date picker sheet */
.sheet--picker { --sheet-w: 44rem; }
@media (min-width: 48rem) { .sheet--picker { max-width: 44rem; } }
.pick__nav { display: flex; justify-content: space-between; margin-block-end: 0.25rem; }
.pick__months { display: grid; gap: 1.5rem; }
@media (min-width: 48rem) { .pick__months { grid-template-columns: 1fr 1fr; gap: 2rem; margin-block-start: -2.75rem; } }
.pick__month h3 { text-align: center; font-size: 1.0625rem; font-weight: 800; margin-block-end: 0.5rem; }
.pick__week, .pick__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.pick__week span { text-align: center; font-size: 0.8125rem; color: rgb(0 0 0 / 0.5); padding-block: 0.25rem; }
.pd { position: relative; height: 44px; border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; padding: 0; }
.pd span { display: grid; place-items: center; width: 40px; height: 40px; margin: auto; border-radius: 50%; transition: background-color 120ms var(--ease-out), color 120ms var(--ease-out); font-variant-numeric: tabular-nums; }
.pd:hover:not(:disabled) span { background: rgb(181 143 81 / 0.2); }
.pd:disabled { color: rgb(0 0 0 / 0.28); cursor: default; text-decoration: line-through; text-decoration-color: rgb(0 0 0 / 0.2); }
.pd.is-range { background: rgb(181 143 81 / 0.16); }
.pd.is-start span, .pd.is-end span { background: var(--brand); color: #fff; }
.pd.is-start.has-range { background: linear-gradient(to var(--towards, left), transparent 50%, rgb(181 143 81 / 0.16) 50%); }
.pd.is-end { background: linear-gradient(to var(--from, right), transparent 50%, rgb(181 143 81 / 0.16) 50%); }
[dir="rtl"] .pd.is-start.has-range { --towards: right; }
[dir="rtl"] .pd.is-end { --from: left; }
.pick__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

/* results */
.results__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-block: 1.25rem 0.75rem; }
.results__count { font-weight: 800; font-size: 1.125rem; }
.results__sort { display: inline-flex; align-items: center; gap: 0.5rem; color: rgb(0 0 0 / 0.6); font-size: 0.9375rem; }
.results__sort .search__select { width: auto; min-height: 44px; padding-inline: 0.75rem 2rem; border: 1px solid rgb(0 0 0 / 0.2); border-radius: 0.75rem; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat; background-size: 16px; background-position: right 0.625rem center; color: #111; }
[dir="rtl"] .results__sort .search__select { background-position: left 0.625rem center; }
.results__note { margin-block-end: 0.75rem; }
.results .rooms { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-block-start: 0; }
.results .room { grid-template-rows: none; grid-template-columns: 1fr; }
.results .room__body { grid-template-rows: none; gap: 1rem; padding: 1rem 1.25rem 1.25rem; }
.results .room__info { display: grid; gap: 0.375rem; align-content: start; }
.room__hotel { font-size: 0.875rem; font-weight: 700; color: var(--brand); }
.results .room__foot { margin-block-start: 0; align-items: end; border-block-start: 1px solid rgb(0 0 0 / 0.08); padding-block-start: 0.875rem; }
.results .room__text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.results .price { align-items: baseline; }
@media (min-width: 48rem) {
  .results .room { grid-template-columns: 15rem minmax(0, 1fr); }
  .results .room__media { aspect-ratio: auto; min-height: 100%; }
  .results .room__body { grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; }
  .results .room__foot { flex-direction: column; align-items: end; justify-content: end; border-block-start: 0; border-inline-start: 1px solid rgb(0 0 0 / 0.08); padding-block-start: 0; padding-inline-start: 1.25rem; min-width: 11rem; }
  .results .price { flex-direction: column; align-items: end; gap: 0; }
  .results .price__label { display: none; }
}
.results .room--skeleton { min-height: 10rem; }

/* home: hotel starting price */
.hotel__from { color: rgb(0 0 0 / 0.65); }
.hotel__from strong { color: #111; font-size: 1.25rem; }

/* the three search fields share one row style: icon, small label, value */
.search__field { position: relative; padding-inline-start: 3.5rem; }
.search__icon { position: absolute; inset-inline-start: 1rem; inset-block-start: 50%; translate: 0 -50%; color: rgb(0 0 0 / 0.62); pointer-events: none; }
.search__field--guests .search__value { font-weight: 700; }
@container (min-width: 44rem) {
  .search { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr) auto; }
}

/* rooms and guests sheet */
.steps { display: grid; gap: 0; padding-block-end: 0.5rem; }
.step { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; border-block-end: 1px solid rgb(0 0 0 / 0.08); }
.step:last-child { border-block-end: 0; }
.step__name { display: grid; gap: 0.125rem; min-width: 0; }
.step__name strong { font-size: 1.0625rem; font-weight: 700; }
.step__ctl { display: inline-flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.step__btn { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--brand); border-radius: 0.75rem; background: #fff; color: var(--brand); cursor: pointer; transition: background-color 150ms ease, color 150ms ease, transform 120ms var(--ease-out); }
.step__btn:hover:not(:disabled) { background: var(--brand); color: #fff; }
.step__btn:active:not(:disabled) { transform: scale(0.95); }
.step__btn:disabled { border-color: rgb(0 0 0 / 0.18); color: rgb(0 0 0 / 0.3); cursor: default; }
.step__n { min-width: 2ch; text-align: center; font-weight: 800; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .step__btn { transition: none; } }