/*
  Eds Estate direct booking: the stay page's "Book direct" panel (Stays.dc.html), the checkout and
  return pages (Book.dc.html) and the staff direct-booking pages. Uses the tokens and components of
  eds.css; loaded only on these pages ({% booking_assets %}).

  Contrast: slate on white/paper is 6:1 or better; selected days are paper on ink; taken days are
  slate on paper with a strike-through (never colour alone). Every target is at least 44 px.
*/

/* ---------- the panel (stay page) ---------- */
.booking-panel { background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius-card); padding: clamp(20px, 2.2vw, 28px); min-width: 0; }
.booking-panel__title { font-size: 28px; line-height: 1.15; font-variation-settings: 'opsz' 72, 'SOFT' 0, 'WONK' 0; }
.booking-panel__lede { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--slate); }
.booking-panel__form { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.booking-panel__dates { display: flex; flex-wrap: wrap; gap: 12px; }
.booking-panel__dates > .booking-panel__field { flex: 1 1 140px; }
.booking-panel__field { display: flex; flex-direction: column; min-width: 0; }
.booking-panel__label { margin-bottom: 6px; font-size: 15px; font-weight: 500; color: var(--ink); }
.booking-panel__input { min-height: 48px; padding-block: 8px; font-size: 16px; }
.booking-panel__note { margin-top: 6px; font-size: 15px; color: var(--slate); }
.booking-panel__status { margin-top: 4px; padding: 14px 16px; border-radius: var(--radius-control); background: var(--paper); }
.booking-panel__muted { font-size: 16px; line-height: 1.5; color: var(--slate); }
.booking-panel__stay { margin-top: 6px; font-size: 17px; line-height: 1.4; font-weight: 600; color: var(--ink); }
.booking-panel__sub { margin-top: 2px; font-size: 16px; color: var(--slate); }
.booking-panel__total { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.booking-panel__total-value { font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.booking-panel__problem { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hairline); font-size: 16px; line-height: 1.5; color: var(--red); }
.booking-panel__cta { margin-top: 8px; min-height: 52px; }
.booking-panel__secure { margin-top: 12px; display: flex; align-items: flex-start; gap: 8px; font-size: 16px; line-height: 1.5; color: var(--slate); }
.booking-panel__secure svg { flex-shrink: 0; margin-top: 4px; }
.booking-panel__also { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hairline); font-size: 16px; line-height: 1.5; color: var(--slate); }
.booking-panel__also a, .booking-panel__questions a { display: inline-block; min-height: 24px; }
.booking-panel__questions { margin-top: 6px; font-size: 16px; line-height: 1.5; color: var(--slate); }

/* ---------- the booking pages ---------- */
.booking-page { padding-block: 28px 96px; }
.booking-page__notice { margin-top: 24px; }
.booking-page__back { margin-top: 28px; }
.booking-page__rebook { margin-top: 32px; }
.booking-back {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none;
  font-size: 16px; font-weight: 500; color: var(--ink); text-decoration: none; cursor: pointer;
}
.booking-back span { text-decoration: underline; text-underline-offset: 3px; }
.booking-back:hover { color: var(--green-deep); }
.booking-header { margin-top: 16px; max-width: 760px; }
.booking-header__title { margin-top: 10px; font-size: clamp(38px, 6vw, 56px); }
.booking-header__lede { margin-top: 16px; font-size: 18px; color: var(--slate); }

.booking-progress { margin-top: 36px; }
.booking-progress__list { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.booking-progress__step { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.booking-progress__bar { display: block; height: 3px; border-radius: 2px; background: var(--hairline); }
.booking-progress__step.is-done .booking-progress__bar { background: var(--green); }
.booking-progress__label {
  display: flex; align-items: flex-start; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none;
  font-size: 15px; line-height: 1.35; font-weight: 500; color: var(--slate); text-align: left; text-decoration: none;
}
.booking-progress__label.is-current { font-weight: 600; color: var(--ink); }
.booking-progress__label--link { color: var(--ink); cursor: pointer; }
.booking-progress__label--link svg { flex-shrink: 0; color: var(--green); margin-top: 1px; }
.booking-progress__label--link span { text-decoration: underline; text-underline-offset: 3px; }
.booking-progress__text { min-width: 0; overflow-wrap: anywhere; }

.booking-layout { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 40px 48px; }
.booking-layout__main { flex: 1 1 560px; min-width: 0; }

.booking-step__title { font-size: clamp(28px, 4vw, 36px); line-height: 1.15; outline: none; }
.booking-step__lead { margin-top: 8px; font-size: 17px; color: var(--slate); }
.booking-step__lead--ink { color: var(--ink); font-size: 18px; }
.booking-step__note { margin-top: 4px; font-size: 16px; color: var(--slate); }
.booking-step__long { margin-top: 20px; }
.booking-step--narrow { margin-top: 40px; max-width: 760px; }
.booking-step__foot { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }

.booking-card { background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius-card); min-width: 0; }
.booking-card--calendar { margin-top: 24px; padding: 20px clamp(8px, 2.5vw, 20px); }
.booking-unavailable { display: flex; flex-direction: column; gap: 8px; font-size: 16px; }

.booking-dates { margin-top: 20px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.booking-dates__item { padding: 16px 18px; }
.booking-dates__value { margin-top: 4px; font-size: 18px; font-weight: 600; }
.booking-dates__note { font-size: 16px; color: var(--slate); }

.booking-guests { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.booking-guests__text { flex: 1 1 260px; min-width: 0; }
.booking-guests__title { font-size: 20px; }
.stepper { display: inline-flex; align-items: center; gap: 12px; }
.stepper__btn {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--slate); border-radius: var(--radius-control); background: var(--white); color: var(--ink); text-decoration: none;
}
.stepper__btn:hover { background: var(--paper); color: var(--ink); }
.stepper__btn.is-disabled { border-color: var(--hairline); color: var(--slate); opacity: 0.55; }
.stepper__value { min-width: 88px; text-align: center; font-size: 18px; font-weight: 600; }

.booking-total { min-width: 0; }
.booking-total__label { font-size: 16px; color: var(--slate); }
.booking-total__value { font-family: var(--font-display); font-weight: 600; font-size: 32px; line-height: 1.2; }
.booking-total__problem { margin-top: 4px; font-size: 16px; color: var(--red); }

.booking-alert { margin-top: 24px; padding: 14px 16px; border-left: 4px solid var(--red); border-radius: var(--radius-control); background: var(--red-tint); color: var(--ink); font-size: 16px; outline: none; }
.booking-alert > * + * { margin-top: 6px; }
.booking-alert__title { font-weight: 600; }
.booking-alert ul { padding-left: 20px; }
.booking-alert a { color: var(--ink); }
.booking-alert__link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }

/* ---------- step 1: the calendar ---------- */
.stay-calendar { display: flex; flex-direction: column; }
.stay-calendar__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stay-calendar__title { font-family: var(--font-sans); font-size: 20px; }
.stay-calendar__nav {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  border: 1px solid var(--slate); border-radius: var(--radius-control); background: var(--white); color: var(--ink);
}
.stay-calendar__nav:hover { background: var(--paper); color: var(--ink); }
.stay-calendar__nav.is-disabled { border-color: var(--hairline); color: var(--hairline); }
.stay-calendar__weekdays, .stay-calendar__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(1px, 0.5vw, 4px); }
.stay-calendar__weekdays { margin-top: 16px; text-align: center; font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); }
.stay-calendar__grid { margin-top: 8px; }
.stay-calendar__blank { display: block; min-height: 52px; }
.stay-day {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 52px; padding: 4px 0;
  border: 1px solid var(--hairline); border-radius: var(--radius-control); background: var(--white); color: var(--ink);
  font-size: 16px; line-height: 1.2; font-weight: 500; font-variant-numeric: tabular-nums lining-nums; text-decoration: none;
}
a.stay-day:hover { border-color: var(--ink); color: var(--ink); }
a.stay-day:focus-visible { z-index: 1; }
.stay-day--past { border-color: transparent; background: transparent; color: var(--slate); font-weight: 400; }
.stay-day--taken { border-color: transparent; background: var(--paper); color: var(--slate); font-weight: 400; text-decoration: line-through; }
.stay-day.is-disabled:not(.stay-day--past):not(.stay-day--taken) { color: var(--slate); font-weight: 400; }
.stay-day--checkout-only { background: var(--white); }
.stay-day.is-range { border-color: var(--green-tint); background: var(--green-tint); color: var(--ink); text-decoration: none; }
.stay-day.is-selected { border-color: var(--ink); background: var(--ink); color: var(--paper); font-weight: 600; text-decoration: none; }
a.stay-day.is-selected:hover { color: var(--paper); }
.stay-day__sub { font-size: 13px; font-weight: 500; }
.stay-calendar__foot { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; }
.stay-calendar__hint { font-size: 16px; color: var(--ink); }
.stay-calendar__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 15px; color: var(--slate); }
.stay-calendar__legend > span { display: inline-flex; align-items: center; gap: 8px; }
.stay-calendar__swatch { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--hairline); background: var(--paper); }
.stay-calendar__swatch--stay { border-color: var(--green); background: var(--green-tint); }

/* ---------- step 2: the details form ---------- */
.booking-form { margin-top: 24px; }
.booking-form__grid { display: grid; gap: 20px 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.booking-form__wide { grid-column: 1 / -1; }
.booking-consent { margin-top: 24px; display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border: 1px solid var(--slate); border-radius: var(--radius-card); background: var(--white); }
.booking-consent.is-invalid { border: 2px solid var(--red); }
.booking-consent input { flex: none; width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--green); }
.booking-consent label { font-size: 17px; line-height: 1.5; cursor: pointer; }
.booking-consent__error { display: block; margin-top: 4px; }

/* ---------- step 3: the hand-off to Stripe ---------- */
.booking-authorise { margin-top: 24px; display: flex; align-items: flex-start; gap: 16px; padding: 20px 22px; border-radius: var(--radius-card); background: var(--mist); }
.booking-authorise svg { flex: none; margin-top: 2px; }
.booking-authorise__line { font-size: 18px; line-height: 1.45; font-weight: 600; }
.booking-authorise__detail { margin-top: 6px; font-size: 16px; }
.booking-amount { margin-top: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--hairline); }
.booking-amount__value { margin-top: 6px; font-family: var(--font-display); font-weight: 600; font-size: clamp(44px, 6vw, 56px); line-height: 1; }
.booking-amount__basis { margin-top: 10px; font-size: 16px; color: var(--slate); }
.booking-for { margin-top: 24px; }
.booking-for__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.booking-for__title { font-size: 20px; }
.booking-linkbtn { min-height: 44px; padding: 0; border: 0; background: none; font-size: 16px; font-weight: 500; color: var(--green); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.booking-linkbtn:hover { color: var(--green-deep); }
.booking-for__list { margin-top: 8px; display: grid; gap: 12px 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.booking-for__list dt { font-size: 15px; color: var(--slate); }
.booking-for__list dd { margin-top: 2px; font-size: 17px; overflow-wrap: anywhere; }
.booking-voucher { margin-top: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--hairline); }
.booking-voucher__title { font-size: 20px; }
.booking-voucher__form { margin-top: 10px; }
.booking-voucher__form .field { display: grid; gap: 6px; }
.booking-voucher__row { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: stretch; }
.booking-voucher__input { flex: 1 1 200px; max-width: 320px; text-transform: uppercase; letter-spacing: 0.04em; }
.booking-voucher__applied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; padding: 10px 16px; border-radius: var(--radius-control); background: var(--green-tint); }
.booking-voucher__line { display: flex; align-items: center; gap: 10px; font-size: 17px; overflow-wrap: anywhere; outline: none; }
.booking-voucher__line:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.booking-voucher__line svg { flex: none; color: var(--green-deep); }
.booking-voucher__applied .booking-linkbtn { color: var(--green-deep); }
.booking-voucher__notice { margin-top: 10px; font-size: 16px; outline: none; }
.booking-voucher__notice:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* ---------- step 4: the return page ---------- */
.booking-done-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 16px; border-radius: 50%; border: 1px solid var(--hairline); background: var(--paper); color: var(--ink); }
.booking-done-icon.is-ok { border-color: var(--green-tint); background: var(--green-tint); color: var(--green-deep); }
.booking-ref { margin-top: 28px; padding: 22px 24px; border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--white); }
.booking-ref__value { margin-top: 6px; font-family: var(--font-display); font-weight: 600; font-size: 40px; line-height: 1.1; letter-spacing: 0.01em; overflow-wrap: anywhere; }
.booking-ref__facts { margin-top: 20px; border-top: 1px solid var(--hairline); }
.booking-ref__facts > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding-block: 12px; border-bottom: 1px solid var(--hairline); font-size: 16px; }
.booking-ref__facts > div:last-child { border-bottom: 0; }
.booking-ref__facts dt { color: var(--slate); }
.booking-ref__facts dd { font-weight: 500; text-align: right; }
.booking-ref__facts .is-total dd { font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
.booking-next__title { margin-top: 40px; font-size: 22px; }
.booking-next { margin-top: 16px; list-style: none; display: flex; flex-direction: column; gap: 18px; }
.booking-next li { display: flex; align-items: flex-start; gap: 16px; }
.booking-next p { margin-top: 3px; font-size: 17px; }
.booking-next__n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--ink); border-radius: 50%; font-size: 15px; font-weight: 600; }
.booking-contact { margin-top: 36px; padding: 22px 24px; border-radius: var(--radius-card); background: var(--mist); }
.booking-contact__title { font-size: 20px; }
.booking-contact > p { margin-top: 6px; font-size: 16px; }
.booking-contact__actions { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px 12px; }
.booking-contact__actions .btn { border-color: var(--ink); font-weight: 500; }
.booking-contact__email { overflow-wrap: anywhere; }

/* ---------- the summary beside every step ---------- */
.booking-summary { flex: 1 1 340px; max-width: 420px; min-width: 0; padding: 24px; border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--white); }
.booking-summary__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.booking-summary__heading { font-family: var(--font-sans); }
.booking-summary__property { margin-top: 16px; display: flex; align-items: flex-start; gap: 16px; }
.booking-summary__photo { flex: none; width: 104px; height: 128px; border-radius: var(--radius-control); object-fit: cover; background: var(--mist); }
.booking-summary__name-wrap { min-width: 0; }
.booking-summary__name { font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.15; }
.booking-summary__small { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--slate); }
.booking-summary__full { margin-top: 18px; }
.booking-summary__muted { margin-top: 10px; font-size: 16px; color: var(--slate); }
.booking-summary__facts { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hairline); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.booking-summary__facts dt { font-size: 14px; color: var(--slate); }
.booking-summary__facts dd { margin-top: 2px; font-size: 16px; font-weight: 500; }
.booking-summary__price { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.booking-summary__amenities { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hairline); list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; font-size: 15px; }
.booking-summary__amenities li { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.booking-summary__amenities li.is-wide { grid-column: 1 / -1; }
.booking-summary__amenities svg { flex-shrink: 0; margin-top: 3px; color: var(--green); }
@media (max-width: 420px) { .booking-summary { padding: 20px 16px; } }

.price-lines { margin-top: 10px; font-size: 16px; }
.price-lines__row { display: flex; justify-content: space-between; gap: 12px; padding-block: 6px; }
.price-lines__row--rule { padding-bottom: 10px; border-bottom: 1px solid var(--hairline); }
.price-lines__row--discount { color: var(--green-deep); font-weight: 500; }
.price-lines__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 12px; }
.price-lines__total-label { font-weight: 600; }
.price-lines__total-value { position: relative; display: inline-block; font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 1.1; }
.price-lines__ledger { position: absolute; left: 0; right: 0; bottom: -8px; height: 6px; border-top: 2px solid var(--green); border-bottom: 2px solid var(--green); }

/* ---------- cancellation and house rules ---------- */
.booking-policies { margin-top: 56px; }
.booking-policies__heading { margin-bottom: 8px; font-family: var(--font-sans); font-weight: 500; font-size: 13px; }
.booking-policy { border-bottom: 1px solid var(--hairline); }
.booking-policy:first-of-type { border-top: 1px solid var(--hairline); }
.booking-policy__summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding-block: 14px; list-style: none; cursor: pointer; }
.booking-policy__summary::-webkit-details-marker { display: none; }
.booking-policy__head { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.booking-policy__title { font-size: 19px; }
.booking-policy__line { font-size: 16px; color: var(--slate); }
.booking-policy__chevron { flex-shrink: 0; transition: transform 0.15s; }
.booking-policy[open] .booking-policy__chevron { transform: rotate(180deg); }
.booking-policy__points { margin-bottom: 20px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 17px; }
.booking-policy__note { margin-bottom: 20px; font-size: 16px; color: var(--slate); }

/* ---------- staff pages ---------- */
.feed-card { display: flex; flex-direction: column; gap: 8px; }
.feed-card__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.feed-card__input { flex: 1 1 320px; min-width: 0; font-size: 15px; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 8px; }
.filter-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--slate); border-radius: var(--radius-control); background: var(--white); color: var(--ink); font-size: 15px; font-weight: 500; text-decoration: none; }
.filter-chip:hover { background: var(--paper); color: var(--ink); }
.filter-chip[aria-current='page'] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.filter-chip__count { font-weight: 400; }
.direct-table { min-width: 820px; }
.direct-table__ref { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.direct-table__sub { font-size: 14px; color: var(--slate); }
.direct-table__check { max-width: 260px; margin-top: 4px; }
.direct-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.direct-rows > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding-block: 10px; border-bottom: 1px solid var(--hairline); font-size: 15px; }
.direct-rows > div:last-child { border-bottom: 0; }
.direct-rows dt { color: var(--slate); }
.direct-rows dd { font-weight: 500; text-align: right; overflow-wrap: anywhere; min-width: 0; }
.direct-rows dd a { display: inline-flex; align-items: center; min-height: 44px; }
.direct-rows__id { font-size: 14px; }
.direct-note { white-space: pre-line; }
.direct-audit { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.direct-notes { margin: 0; font-family: var(--font-sans); font-size: 14px; white-space: pre-wrap; color: var(--slate); overflow-wrap: anywhere; }
.refund-form { display: flex; flex-direction: column; gap: 8px; }
.refund-form__row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.refund-form__input { max-width: 180px; }

/* Phones: the current step gets the room for its name; the others show their number or tick, and keep
   their names for screen readers (a quarter of 390 px wrapped "Dates and guests" onto three lines). */
@media (max-width: 479.98px) {
  .booking-progress__list { display: flex; }
  .booking-progress__step { flex: 1 1 0; }
  .booking-progress__step[aria-current] { flex: 3 1 0; }
  .booking-progress__step:not([aria-current]) .booking-progress__text,
  .booking-progress__step:not([aria-current]) .booking-progress__label--link span {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}