/* The chrome both booking pages are built out of: the card, the form, and the
   controls inside it.
 *
 * These rules used to be written twice, once in BookingNewPage.vue and once in
 * BookingShowPage.vue, which is how the two pages came to disagree about which
 * elements a rule applied to — the booking form styled `input, textarea,
 * select` and the reservation page styled only `input`, with the same
 * declarations, so a textarea on one page and a textarea on the other were
 * different-looking fields for no reason anybody chose.
 *
 * Served rather than inlined, for the reason the form's script is: it is
 * fetched once and cached, instead of being sent again with every month a guest
 * browses. It is linked before the pages' own <style> blocks, so a page that
 * needs a different measure or a different gutter still overrides it.
 *
 * The palette, radii, shadows and type scale come from /site.css, which every
 * public page links. Nothing here declares a colour of its own. */

.booking-page { display: grid; gap: var(--nyland-gap); margin: 0 auto; padding-top: var(--nyland-header-clearance); }
.booking-checkout .navigation .links, .booking-checkout .navigation .menu-button, .booking-checkout #site-mobile-menu { display: none; }
.booking-checkout .navigation { max-width: 1180px; margin-inline: auto; }
.booking-card { background: var(--nyland-paper); border: 1px solid var(--nyland-border-strong); border-radius: var(--nyland-radius-md); box-shadow: var(--nyland-elevation-1); min-width: 0; padding: clamp(1rem, 3vw, 1.5rem); }
.booking-card__header { align-items: start; display: flex; gap: var(--nyland-gap); justify-content: space-between; margin-bottom: var(--nyland-gap); }
.booking-eyebrow { color: var(--nyland-muted); font-size: var(--nyland-eyebrow-size); font-weight: var(--nyland-eyebrow-weight); letter-spacing: var(--nyland-eyebrow-tracking); margin: 0; text-transform: uppercase; }
.booking-muted { color: var(--nyland-muted); line-height: var(--nyland-body-leading); margin: 0; }
.booking-form { display: grid; gap: var(--nyland-gap); }
.booking-form__grid { display: grid; gap: .8rem; grid-template-columns: 1fr 1fr; }

/* The controls. Bare element selectors, as they were in both pages: these
   sheets only ever reach a booking page. */
label { display: grid; gap: .35rem; }
label span { color: var(--nyland-muted); font-size: .9rem; font-weight: 700; }
label em { color: var(--nyland-muted); font-style: normal; font-weight: 500; }
input, textarea, select { background: var(--nyland-paper); border: 1px solid var(--nyland-border-strong); border-radius: var(--nyland-radius-xs); color: var(--nyland-ink); font: inherit; min-width: 0; padding: .8rem; width: 100%; }
.booking-field--checkbox label { align-items: center; display: flex; gap: .65rem; min-height: 44px; }
.booking-field--checkbox input { block-size: 1.15rem; inline-size: 1.15rem; margin: 0; min-height: 0; padding: 0; width: auto; }
button { background: var(--nyland-pine); border: 0; border-radius: var(--nyland-radius-pill); color: var(--nyland-on-pine); cursor: pointer; font: inherit; font-weight: 900; padding: .9rem 1.25rem; }