/* The guest picker (S13): G-03's sheet and its page without JavaScript, G-01's dates field and bottom bar, G-04 */

/* Day cells (PickerDay): 44 px at least, the date and its price; the states as the design system draws them */
.bh-cal { width: 100%; border-collapse: collapse; table-layout: fixed; }
.bh-cal th { padding-bottom: var(--space-1); color: var(--ink-2); font-size: var(--text-label); line-height: var(--leading-label); font-weight: var(--weight-regular); text-align: center; }
.bh-cal td { padding: 2px 0; }
.bh-day {
  -webkit-appearance: none; appearance: none;
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; min-width: var(--target-min); min-height: var(--target-min); margin: 0; padding: var(--space-1) 0;
  border: 0; border-radius: var(--radius-control); background-color: transparent; color: var(--ink-1);
  font-family: inherit; font-variant-numeric: tabular-nums; cursor: pointer;
}
.bh-day-num { font-size: var(--text-small); line-height: var(--leading-cal); font-weight: var(--weight-bold); }
.bh-day-price { font-size: var(--text-cal); line-height: var(--leading-cal); color: var(--ink-2); }
button.bh-day:hover { background-color: var(--sunken); }
.bh-day.is-today { box-shadow: inset 0 0 0 1px var(--ink-1); }
.bh-day.is-unavailable { cursor: default; background-image: repeating-linear-gradient(135deg, var(--hatch-unavailable) 0 3px, transparent 3px 7px); }
.bh-day.is-unavailable .bh-day-num { font-weight: var(--weight-regular); color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 2px; }
.bh-day.is-checkout-only { background-image: linear-gradient(to bottom right, var(--bh-day-ground, var(--card)) 0 50%, transparent 50% 100%), repeating-linear-gradient(135deg, var(--hatch-unavailable) 0 3px, transparent 3px 7px); }
.bh-day.is-checkout-only .bh-day-num, .bh-day.is-loading .bh-day-num { font-weight: var(--weight-regular); }
.bh-day.is-no-checkin .bh-day-num { font-weight: var(--weight-regular); text-decoration: underline dotted 2px; text-underline-offset: 3px; }
.bh-day.is-past { cursor: default; }
.bh-day.is-past .bh-day-num, .bh-day.is-loading .bh-day-num { font-weight: var(--weight-regular); color: var(--ink-3); }
.bh-day.is-unavailable:hover, .bh-day.is-past:hover { background-color: transparent; }
.bh-day.is-in-range { border-radius: 0; background-color: var(--primary-soft); background-image: none; }
.bh-day.is-in-range .bh-day-price { color: var(--primary); }
.bh-day.is-start, .bh-day.is-end, .bh-day.is-start:hover, .bh-day.is-end:hover { background-color: var(--primary); background-image: none; color: var(--on-primary); }
.bh-day.is-start .bh-day-price, .bh-day.is-end .bh-day-price { color: var(--on-primary); }
.bh-day.is-start .bh-day-num, .bh-day.is-end .bh-day-num { font-weight: var(--weight-bold); text-decoration: none; }
.bh-day:focus-visible { z-index: 1; outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--focus-ring); }
.bh-day.is-today:focus-visible { box-shadow: inset 0 0 0 1px var(--ink-1), var(--focus-ring); }
.bh-day--mini { width: 32px; min-width: 32px; min-height: 32px; padding: 0; flex: none; cursor: default; }

/* Months: one on phones, two side by side from 768 px (CSS only); the month buttons move the first month by one */
.bh-picker-months { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
.bh-picker-months > .bh-month + .bh-month { display: none; }
.bh-month { display: grid; align-content: start; gap: var(--space-2); min-width: 0; }
.bh-month-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: var(--target-min); }
.bh-month-title { font-size: var(--text-h3); line-height: var(--leading-h3); font-weight: var(--weight-bold); text-align: center; }
.bh-month-nav {
  -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; gap: var(--space-1);
  min-width: 72px; min-height: var(--target-min); padding: 0 var(--space-2); border: 1px solid var(--primary); border-radius: var(--radius-control);
  background: var(--card); color: var(--primary); font: inherit; font-size: var(--text-small); font-weight: var(--weight-bold); cursor: pointer;
}
.bh-month-nav--next { justify-content: flex-end; }
.bh-month-nav:hover { background: var(--primary-soft); }
.bh-month-nav[aria-disabled="true"] { border-color: var(--disabled-bg); background: var(--disabled-bg); color: var(--disabled-ink); cursor: not-allowed; }
@media (min-width: 768px) {
  .bh-picker-months { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bh-picker-months > .bh-month + .bh-month { display: grid; }
  .bh-picker-months > .bh-month:first-child .bh-month-nav--next,
  .bh-picker-months > .bh-month + .bh-month .bh-month-nav--prev { visibility: hidden; }
}

/* The legend: every pattern in words */
.bh-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2) var(--space-4); color: var(--ink-2); font-size: var(--text-label); line-height: var(--leading-label); }
.bh-legend li { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.bh-legend-click { display: none; }
@media (hover: hover) and (pointer: fine) {
  .bh-legend-tap { display: none; }
  .bh-legend-click { display: inline; }
}

/* G-03's sheet: full screen on phones, a centred dialog from 768 px */
.bh-picker { inset: 0; height: 100dvh; max-height: none; border-radius: 0; }
.bh-picker-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.bh-picker .bh-sheet-head { justify-content: space-between; padding-block: var(--space-3); }
.bh-picker-titles { display: grid; min-width: 0; }
.bh-picker-meta { color: var(--ink-3); font-size: var(--text-label); line-height: var(--leading-label); }
.bh-picker .bh-sheet-body { gap: var(--space-6); }
.bh-picker-guests { display: grid; gap: var(--space-3); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.bh-picker-max { display: flex; gap: var(--space-2); align-items: flex-start; color: var(--ink-1); }
.bh-picker-max[hidden] { display: none; }
.bh-picker-foot { display: grid; gap: var(--space-3); box-shadow: var(--shadow-overlay); }
.bh-picker-status { display: flex; gap: var(--space-2); align-items: flex-start; min-height: var(--leading-small); font-size: var(--text-small); line-height: var(--leading-small); }
.bh-picker-status .bh-icon { flex: none; color: var(--info-ink); }
.bh-picker-status .bh-btn { margin-top: var(--space-2); }
.bh-picker-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.bh-picker-sum { display: grid; flex: 1 1 100px; min-width: 0; }
.bh-picker-row > .bh-btn { flex: none; white-space: nowrap; }
.bh-picker-sum > .bh-num { font-weight: var(--weight-bold); }
.bh-picker-row > .bh-btn--primary { min-width: 104px; }
.bh-picker-row > [hidden] { display: none; }
@media (min-width: 768px) {
  .bh-picker { inset: 0; width: min(784px, calc(100% - var(--space-12))); height: fit-content; max-height: calc(100dvh - var(--space-16)); border-radius: var(--radius-card); }
  .bh-picker .bh-sheet-body { padding-inline: var(--space-6); }
  .bh-picker-foot { padding-inline: var(--space-6); box-shadow: none; }
}

/* The stepper (Stepper): − and + at 44 px */
.bh-stepper { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--target-min); }
.bh-stepper-text { display: grid; min-width: 0; }
.bh-stepper-name { font-weight: var(--weight-bold); }
.bh-stepper-control { flex: none; display: inline-flex; align-items: center; gap: var(--space-3); }
.bh-stepper-btn {
  -webkit-appearance: none; appearance: none; display: inline-grid; place-items: center;
  width: var(--target-min); height: var(--target-min); margin: 0; padding: 0;
  border: 1px solid var(--border-input); border-radius: var(--radius-pill); background: var(--card); color: var(--ink-1);
  font-family: inherit; font-size: var(--text-h2); line-height: 1; cursor: pointer;
}
.bh-stepper-btn:hover { border-color: var(--ink-1); background: var(--sunken); }
.bh-stepper-btn[aria-disabled="true"] { border-color: var(--disabled-bg); background: var(--disabled-bg); color: var(--disabled-ink); cursor: not-allowed; }
.bh-stepper-value { min-width: 2ch; text-align: center; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }

/* G-01: the dates field, the notes and the phone's bottom bar (gone from 768 px, where the card sticks) */
.bh-stay { display: grid; gap: var(--space-4); scroll-margin-top: var(--space-4); }
.bh-stay-form { display: grid; gap: var(--space-3); }
.bh-datefield {
  -webkit-appearance: none; appearance: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0;
  border: 1px solid var(--border-input); border-radius: var(--radius-control); background: var(--card); color: var(--ink-1);
  font: inherit; text-align: left; cursor: pointer;
}
.bh-datefield:hover { border-color: var(--ink-1); }
.bh-datefield-part { display: grid; min-width: 0; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.bh-datefield-part + .bh-datefield-part { border-left: 1px solid var(--line); }
.bh-datefield-guests { grid-column: 1 / -1; border-bottom: 0; border-left: 0 !important; }
.bh-datefield-key { color: var(--ink-2); font-size: var(--text-label); line-height: var(--leading-label); }
.bh-datefield-value { font-weight: var(--weight-bold); }
.bh-stay-note { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3); border-radius: var(--radius-card); background: var(--info-bg); color: var(--ink-1); font-size: var(--text-small); line-height: var(--leading-small); }
.bh-stay-note > .bh-icon { flex: none; color: var(--info-ink); }
.bh-stay-note.is-warning { background: var(--warning-bg); }
.bh-stay-note.is-warning > .bh-icon { color: var(--warning-ink); }
.bh-stay-note .bh-btn { margin-left: var(--space-1); }
.bh-pickbar {
  position: fixed; inset: auto 0 0 0; z-index: 10; display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--page-pad) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-overlay);
}
.bh-pickbar-main { display: grid; flex: 1 1 auto; min-width: 0; }
.bh-pickbar .bh-picker-meta { color: var(--ink-2); }
html:has(.bh-pickbar) { scroll-padding-bottom: 96px; }
body:has(.bh-pickbar) { padding-bottom: 88px; }
@media (min-width: 768px) {
  .bh-pickbar { display: none; }
  body:has(.bh-pickbar) { padding-bottom: 0; }
}

/* G-04 (PriceBreakdown) */
.bh-g04 { display: grid; gap: var(--space-3); }
.bh-breakdown { display: grid; gap: var(--space-2); margin: 0; font-variant-numeric: tabular-nums; }
.bh-breakdown-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.bh-breakdown-row > dt { min-width: 0; overflow-wrap: anywhere; }
.bh-breakdown-row > dd { flex: none; margin: 0; text-align: right; white-space: nowrap; }
.bh-breakdown-row.is-sub, .bh-breakdown-row.is-strong { font-weight: var(--weight-bold); }
.bh-breakdown-row.is-discount > dd { color: var(--success-ink); }
.bh-breakdown-row.is-total { padding-top: var(--space-3); border-top: 1px solid var(--line); font-size: var(--text-h3); line-height: var(--leading-h3); font-weight: var(--weight-bold); }
.bh-breakdown-detail { display: block; color: var(--ink-2); font-size: var(--text-small); line-height: var(--leading-small); font-weight: var(--weight-regular); }
.bh-paysplit { padding: var(--space-3) var(--space-4); border-radius: var(--radius-card); background: var(--sunken); }

/* G-03 without JavaScript */
.bh-dates { --bh-day-ground: var(--page); display: grid; gap: var(--space-4); max-width: 784px; margin: 0 auto; padding: var(--space-2) var(--page-pad) var(--space-8); }
.bh-dates-back { display: inline-flex; align-items: center; gap: var(--space-2); justify-self: start; min-height: var(--target-min); font-weight: var(--weight-bold); }
.bh-dates-form { display: grid; gap: var(--space-6); }
.bh-dates-guests { display: grid; gap: var(--space-3); min-width: 0; margin: 0; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-card); }
.bh-dates-guests.is-error { border: 2px solid var(--danger-ink); }
.bh-dates-guests > legend { padding: 0 var(--space-1); }
.bh-dates-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }