/* hps/booking-form */
.booking { background: #fff; border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--shadow-float); overflow: clip; }
.b-head { padding: 18px 22px 14px; border-bottom: 1px solid var(--line); }
.b-head h2 { font-size: 1.6rem; }
.b-head .from { display: block; margin-top: 2px; font-size: 1.05rem; color: var(--ink-soft); }
.b-head ins { color: var(--night); }
.b-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 14px 22px 16px; }
.booking legend { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-weight: 700; font-size: 1.08rem; }
.booking legend .i { color: var(--wood); }
.is-missing { outline: 2px solid var(--lantern-dark); outline-offset: 6px; border-radius: 6px; }
.is-missing legend { color: var(--lantern-dark); }

.cal-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.cal-top b { font-weight: 700; }
.cal-top button { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; transition: background-color .15s; }
.cal-top button:hover:not(:disabled) { background: var(--canvas); }
.cal-top button:disabled { opacity: .3; cursor: default; }
/* Date and Guests: two fields side by side, each with its icon inside; panels open full width below */
.b-pickers { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 8px; }
.pk-field { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 56px; padding: 6px 10px 6px 12px; text-align: left; background: #fff; border: 1.5px solid var(--line-strong); border-radius: var(--r-control); transition: border-color .12s, background-color .12s; }
.pk-field:hover { border-color: var(--night); }
.pk-field[aria-expanded="true"] { border-color: var(--night); background: var(--canvas); }
.pk-field > .i:first-child { flex: none; width: 20px; height: 20px; color: var(--wood); }
.pk-field > .i:last-child { flex: none; width: 18px; height: 18px; margin-left: auto; color: var(--ink-soft); transition: transform .15s; }
.pk-field[aria-expanded="true"] > .i:last-child { transform: rotate(180deg); }
.pk-text { display: grid; min-width: 0; line-height: 1.2; }
.pk-text small { font-size: .88rem; color: var(--ink-soft); }
.pk-text b { overflow: hidden; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.pk-field:not(.is-set) .pk-text b { font-weight: 500; }
.pk-field.is-missing { border-color: var(--lantern-dark); outline-offset: 2px; }
.pk-panel { grid-column: 1 / -1; padding: 8px 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-control); }
.pk-panel.cal { padding-block: 10px; }
/* Phones: the open/closed state shows in the border and fill, so the chevron gives its room to the value */
@media (max-width: 480px) {
  .pk-field { gap: 8px; padding-inline: 10px; }
  .pk-field > .i:last-child { display: none; }
}
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px 0; justify-items: center; }
.cal-grid span { font-size: .92rem; color: var(--ink-soft); padding-bottom: 4px; }
.cal-grid button { position: relative; width: min(100%, 40px); aspect-ratio: 1; font-weight: 500; font-size: 1.05rem; border-radius: 50%; transition: background-color .12s, color .12s; }
.cal-grid button:hover:not(:disabled) { background: var(--canvas); }
.cal-grid button:disabled { color: #b4bac5; cursor: default; }
.cal-grid button.is-today::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--lantern); }
.cal-grid button[aria-pressed="true"] { background: var(--night); color: #fff; font-weight: 700; }

.slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); gap: 6px; }
.slots .hint { grid-column: 1 / -1; }
.slots button { min-height: 48px; padding: 4px 2px; line-height: 1.1; background: #fff; border: 1.5px solid var(--line-strong); border-radius: var(--r-control); font-weight: 700; font-variant-numeric: lining-nums tabular-nums; transition: border-color .12s, background-color .12s, color .12s; }
.slots button small { display: block; font-size: .85rem; font-weight: 500; color: var(--lantern-dark); }
.slots button:hover:not(:disabled) { border-color: var(--night); }
.slots button:disabled { background: #f6f4ef; border-color: transparent; color: #8e96a5; cursor: default; }
.slots button:disabled small { color: inherit; }
.slots button[aria-pressed="true"] { background: var(--night); border-color: var(--night); color: #fff; }
.slots button[aria-pressed="true"] small { color: #fff; }
.slots + .hint { margin-top: 8px; font-size: .98rem; }

/* One line per guest type: name and age on the left, a small stepper on the right */
.g-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding-block: 3px; }
.g-row + .g-row { border-top: 1px solid var(--line); }
.g-name { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; min-width: 0; font-weight: 500; line-height: 1.2; }
.g-name small { font-size: .92rem; font-weight: 400; color: var(--ink-soft); }
.stepper { display: flex; flex: none; align-items: center; justify-content: flex-end; gap: 4px; }
.stepper button { display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--line-strong); border-radius: 50%; transition: border-color .12s; }
.stepper button:hover:not(:disabled) { border-color: var(--night); }
.stepper button:disabled { opacity: .35; cursor: default; }
.stepper output { min-width: 36px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.stepper-sm button { width: 36px; height: 36px; }
.stepper-sm .i { width: 16px; height: 16px; }
.stepper-sm output { min-width: 26px; }

.addons { display: grid; gap: 6px; }
.addon { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 5px 12px; border: 1.5px solid var(--line-strong); border-radius: var(--r-control); cursor: pointer; transition: border-color .12s, background-color .12s; }
.addon:hover { border-color: var(--night); }
.addon:has(input:checked) { border-color: var(--night); background: var(--canvas); }
.addon input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--night); }
.addon .i { width: 22px; height: 22px; color: var(--wood); }
.addon-name { font-weight: 500; line-height: 1.15; }
.addon-name small, .addon-price small { display: block; font-size: .92rem; font-weight: 400; color: var(--ink-soft); }
.addon-price { margin-left: auto; text-align: right; font-weight: 700; line-height: 1.15; }
.addon.is-qty { cursor: default; }
.addon.is-qty:hover { border-color: var(--line-strong); }
.addon.is-qty.is-on { border-color: var(--night); background: var(--canvas); }
.addon.is-qty .stepper { margin-left: auto; }
.addon.is-off { background: #f6f4ef; border-color: transparent; color: #8e96a5; cursor: default; }
.addon.is-off .i { color: inherit; }
.addon.is-off .addon-name small { color: var(--lantern-dark); }
.b-meet { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; font-size: 1.02rem; line-height: 1.3; background: var(--canvas); border-radius: var(--r-control); }
.b-meet .i { flex: none; margin-top: 1px; color: var(--wood); }
.b-sub { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: -2px; font-size: 1.02rem; color: var(--ink-soft); }
.b-cur { display: inline-flex; align-items: center; gap: 8px; }
.b-cur select { min-height: 36px; padding: 2px 30px 2px 10px; font-size: 1rem; font-weight: 700; color: var(--night); background: #fff; border: 1.5px solid var(--line-strong); border-radius: 8px; cursor: pointer; }
.b-cur .select::after { right: 12px; width: 7px; height: 7px; margin-top: -5px; }
.b-usd { font-size: .98rem; color: var(--ink-soft); }

.b-foot { display: grid; gap: 8px; padding: 12px 22px 14px; background: #fff; border-top: 1px solid var(--line); }
.b-pick { font-size: 1.02rem; font-weight: 500; color: var(--ink-soft); line-height: 1.2; }
.b-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.b-total strong { font-size: 1.75rem; font-weight: 700; line-height: 1; }
.b-total del { font-size: 1.1rem; font-weight: 500; }
.b-tip { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: .98rem; line-height: 1.3; color: var(--ink-soft); }
.b-tip .i { flex: none; width: 18px; height: 18px; color: var(--wood); }
.b-perks { display: grid; gap: 4px; }
.b-perks li { display: flex; align-items: flex-start; gap: 8px; font-size: .98rem; line-height: 1.28; color: var(--ink-soft); }
.b-perks .i { flex: none; width: 18px; height: 18px; color: var(--ok); }
.b-perks b { color: var(--night); font-weight: 700; }
.b-calm { font-size: 1.02rem; line-height: 1.25; text-align: center; color: var(--ink-soft); }
.b-calm .link-ask { color: var(--night); font-weight: 500; text-decoration-thickness: 1px; }

/* The panel keeps Book now in view on short laptop screens. */
@media (min-width: 1041px) {
  .pkg-side .booking { display: flex; flex-direction: column; max-height: calc(100vh - var(--head-h) - 24px); }
  .pkg-side .b-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
  .pkg-side .b-foot { position: relative; flex: none; transition: box-shadow .2s; }
  /* When the panel scrolls, a soft edge over Book now says there is more above it. */
  .pkg-side .booking.has-more .b-foot { box-shadow: 0 -12px 18px -14px rgb(26 43 73 / .35); }
}