#booking-dialog {
  --booking-bg: var(--modal-surface, var(--surface, #fff5e7));
  --booking-text: var(--text, #20201e);
  --booking-muted: var(--text-secondary, #62594e);
  --booking-line: var(--line, #20201e26);
  --booking-accent: var(--accent, #ca2348);
  --booking-focus: var(--focus, #087f8c);
  width: min(860px, calc(100% - 32px));
  max-height: 90svh;
  padding: 0;
  margin: auto;
  border: 0;
  border-radius: 22px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  color: var(--booking-text);
  background: var(--booking-bg);
  box-shadow: 0 24px 80px rgb(0 0 0 / .3);
  scroll-padding-block: 24px;
  color-scheme: inherit;
}
#booking-dialog [hidden] { display: none !important; }
#booking-dialog .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
#booking-dialog::backdrop { background: rgb(8 14 13 / .62); backdrop-filter: blur(9px); }
#booking-dialog .booking-shell { padding: clamp(25px, 4vw, 48px); }
#booking-dialog .dialog-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 11px;
  background: var(--field-surface, rgb(32 32 30 / .06));
  color: var(--booking-text);
  border-radius: 50%;
}
#booking-dialog .dialog-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
#booking-dialog h2 {
  margin: 5px 44px 16px 0;
  max-width: 620px;
  font-size: clamp(29px, 3.5vw, 46px);
  line-height: 1.06;
  letter-spacing: -.035em;
  color: var(--booking-text);
  text-wrap: balance;
}
#booking-dialog .booking-intro { margin: 0; max-width: 65ch; font-size: 15px; line-height: 1.65; color: var(--booking-muted); }
#booking-dialog .booking-intent { margin-top: 14px; font-size: 14px; font-weight: 700; color: var(--booking-text); }
#booking-dialog .booking-step-count { margin: 26px 0 12px; font-size: 13px; font-weight: 700; color: var(--booking-text); }
#booking-dialog .form-progress { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; padding: 0; margin: 0 0 32px; list-style: none; }
#booking-dialog .form-progress li { min-width: 0; padding: 9px 0 0; border-top: 2px solid var(--booking-line); color: var(--booking-muted); transition: border-color .2s, color .2s; }
#booking-dialog .form-progress li.is-current { border-color: var(--booking-accent); color: var(--booking-text); font-weight: 700; }
#booking-dialog .form-progress li.is-complete { border-color: var(--booking-accent); }
#booking-dialog .form-progress span { font-size: 11px; line-height: 1.3; }
#booking-form { display: block; margin: 0; }
#booking-form > fieldset { padding: 0; margin: 0; border: 0; min-width: 0; }
#booking-form > fieldset > legend {
  display: block;
  width: 100%;
  margin: 0 0 20px;
  padding: 0;
  font-size: clamp(21px, 2.5vw, 29px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--booking-text);
}
#booking-dialog .booking-help { margin: -8px 0 20px; font-size: 14px; line-height: 1.6; color: var(--booking-muted); max-width: 65ch; }
#booking-dialog label { display: block; font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--booking-text); }
#booking-dialog label small { display: block; margin-top: 3px; color: var(--booking-muted); font-size: 12px; line-height: 1.45; font-weight: 400; }
#booking-dialog input:not([type="radio"]):not([type="checkbox"]):not([type="range"]),
#booking-dialog textarea {
  display: block;
  width: 100%;
  margin-top: 8px;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--booking-line);
  border-radius: 10px;
  background: var(--field-surface, var(--surface, #fffaf2));
  color: var(--booking-text);
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  caret-color: var(--booking-accent);
}
#booking-dialog textarea { min-height: 110px; resize: vertical; }
#booking-dialog input::placeholder,#booking-dialog textarea::placeholder { color: var(--booking-muted); opacity: 1; }
#booking-dialog input[type="radio"],#booking-dialog input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: auto;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 3px 0 0;
  padding: 0;
  accent-color: var(--booking-accent);
}
#booking-dialog .booking-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#booking-dialog .booking-choice {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 16px;
  min-height: 82px;
  border: 1px solid var(--booking-line);
  border-radius: 12px;
  cursor: pointer;
  background: transparent;
  transition: background .18s, border-color .18s;
}
#booking-dialog .booking-choice:has(input:checked) { border-color: var(--booking-accent); background: var(--accent-soft, rgb(202 35 72 / .08)); }
#booking-dialog .booking-choice > span { display: block; padding: 0; background: none; color: var(--booking-text); }
#booking-dialog .booking-choice strong { display: block; font-size: 14px; line-height: 1.4; }
#booking-dialog .booking-choice small { margin-top: 4px; font-size: 12px; line-height: 1.45; }
#booking-dialog .booking-fields { display: grid; gap: 22px; }
#booking-dialog .booking-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
#booking-dialog .booking-other { margin-top: 22px; }
#booking-dialog .booking-subgroup { border: 0; padding: 0; margin: 22px 0 0; min-width: 0; }
#booking-dialog .booking-subgroup > legend { display: block; margin-bottom: 10px; padding: 0; font-size: 14px; font-weight: 700; color: var(--booking-text); }
#booking-dialog .booking-options-inline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
#booking-dialog .booking-options-inline .booking-choice { min-height: 52px; padding: 13px 10px; }
#booking-dialog .booking-options-inline .booking-choice > span { font-size: 13px; }
#booking-dialog .booking-guests { max-width: 400px; }
#booking-dialog #booking-guests { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
#booking-dialog input[type="range"] { width: 100%; margin: 24px 0 12px; accent-color: var(--booking-accent); cursor: pointer; min-height: 36px; padding: 0; background: none; }
#booking-dialog .booking-guest-options { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; }
#booking-dialog .booking-guest-options button {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--booking-line);
  border-radius: 24px;
  background: transparent;
  color: var(--booking-text);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
#booking-dialog .booking-guest-options button[aria-pressed="true"] { border-color: var(--booking-accent); background: var(--accent-soft, rgb(202 35 72 / .08)); }
#booking-dialog .booking-flavour-count { margin: 0 0 22px; font-size: 14px; font-weight: 700; color: var(--booking-text); }
#booking-dialog .booking-flavour-group { margin-bottom: 24px; }
#booking-dialog .booking-flavour-group h3 { margin: 0 0 12px; font-family: inherit; font-size: 17px; font-weight: 700; letter-spacing: 0; line-height: 1.4; color: var(--booking-text); }
#booking-dialog .booking-flavours { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#booking-dialog .booking-flavours .booking-choice { align-items: center; min-height: 54px; padding: 12px; }
#booking-dialog .booking-flavours .booking-choice > span { font-size: 13px; }
#booking-dialog .booking-service { grid-template-columns: 1fr 1fr; }
#booking-dialog .booking-service .booking-choice { min-height: 120px; }
#booking-dialog .booking-review { margin-top: 30px; padding-top: 25px; border-top: 1px solid var(--booking-line); }
#booking-dialog .booking-review h3 { margin: 0 0 18px; font-family: inherit; font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -.02em; color: var(--booking-text); }
#booking-dialog .booking-summary { display: grid; grid-template-columns: minmax(100px, .5fr) minmax(0, 1.5fr); gap: 9px 22px; margin: 0; font-size: 13px; line-height: 1.6; }
#booking-dialog .booking-summary dt { color: var(--booking-muted); font-weight: 400; }
#booking-dialog .booking-summary dd { margin: 0; color: var(--booking-text); overflow-wrap: anywhere; white-space: pre-line; }
#booking-dialog .booking-consent { display: flex; align-items: flex-start; gap: 11px; margin-top: 25px; font-weight: 400; font-size: 13px; }
#booking-dialog .booking-consent a,#booking-dialog .booking-mailto { text-decoration: underline; text-underline-offset: 3px; color: var(--accent-link, var(--booking-text)); }
#booking-dialog .booking-note { margin: 18px 0 0; max-width: 65ch; color: var(--booking-muted); font-size: 13px; line-height: 1.65; }
#booking-dialog .booking-actions {
  position: sticky;
  z-index: 2;
  bottom: -1px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
  padding: 18px 0 3px;
  border-top: 1px solid var(--booking-line);
  background: var(--booking-bg);
}
#booking-dialog .booking-actions button {
  min-height: 48px;
  padding: 13px 23px;
  border-radius: 26px;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 700;
}
#booking-dialog .booking-back { margin-right: auto; border: 1px solid var(--booking-line); background: transparent; color: var(--booking-text); }
#booking-dialog .booking-next,#booking-dialog .booking-submit { background: var(--booking-accent); color: var(--on-accent, #fff); }
#booking-dialog .booking-next:hover,#booking-dialog .booking-submit:hover { background: var(--accent-hover, #a91a3a); }
#booking-dialog .booking-back:hover,#booking-dialog .booking-guest-options button:hover { background: var(--accent-soft, rgb(202 35 72 / .08)); }
#booking-dialog .booking-error { margin: 16px 0 0; color: var(--danger, var(--booking-accent)); font-size: 14px; font-weight: 700; line-height: 1.5; }
#booking-dialog .booking-status { margin-top: 18px; font-size: 14px; color: var(--booking-text); line-height: 1.6; }
#booking-dialog .booking-status:empty { display: none; }
#booking-dialog .booking-mailto { display: inline-flex; min-height: 44px; align-items: center; font-size: 14px; font-weight: 700; }
#booking-dialog .booking-completion-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
#booking-dialog .booking-new-request { min-height: 44px; padding: 8px 0; background: transparent; color: var(--booking-text); font: inherit; font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
#booking-dialog .booking-new-request:hover { color: var(--accent-link, var(--booking-text)); }
#booking-dialog .booking-live-review { min-width: 0; margin-bottom: 26px; padding: 13px 0; border-block: 1px solid var(--booking-line); }
#booking-dialog .booking-live-review summary { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 16px; color: var(--booking-text); font-size: 15px; font-weight: 700; cursor: pointer; list-style: none; }
#booking-dialog .booking-live-review summary::-webkit-details-marker { display: none; }
#booking-dialog .booking-review-show,#booking-dialog .booking-review-hide { color: var(--accent-link, var(--booking-text)); font-size: 12px; font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }
#booking-dialog .booking-live-review[open] .booking-review-show,#booking-dialog .booking-live-review:not([open]) .booking-review-hide { display: none; }
#booking-dialog .booking-live-review .booking-summary { margin: 12px 0 4px; font-variant-numeric: tabular-nums; }
#booking-dialog :is(button,input,textarea,a,summary):focus-visible { outline: 3px solid var(--booking-focus); outline-offset: 4px; }
#booking-dialog input[aria-invalid="true"] { border-color: var(--danger, var(--booking-accent)); }
#booking-dialog legend:focus { outline: none; }
#booking-dialog ::selection { background: var(--booking-accent); color: var(--on-accent, #fff); }
@media (min-width: 1000px) {
  #booking-dialog { width: min(1100px, calc(100% - 48px)); }
  #booking-form:not(.is-final-step) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 260px); column-gap: 32px; align-items: start; }
  #booking-form:not(.is-final-step) > fieldset { grid-column: 1; grid-row: 1; }
  #booking-dialog .booking-live-review { position: sticky; top: 20px; grid-column: 2; grid-row: 1; margin: 0; padding-top: 0; border-top: 0; }
  #booking-dialog .booking-live-review .booking-summary { grid-template-columns: minmax(66px, .4fr) minmax(0, 1fr); gap: 10px 12px; font-size: 12px; }
  #booking-form:not(.is-final-step) > :is(.booking-actions,.booking-error,.booking-status,.booking-completion-actions) { grid-column: 1 / -1; }
}
@media (max-width: 650px) {
  #booking-dialog { width: calc(100% - 20px); max-height: 90svh; border-radius: 17px; }
  #booking-dialog .booking-shell { padding: 30px 20px 22px; }
  #booking-dialog .dialog-close { top: 12px; right: 12px; width: 40px; height: 40px; }
  #booking-dialog h2 { font-size: 29px; margin-right: 36px; }
  #booking-dialog .booking-intro { font-size: 14px; }
  #booking-dialog .booking-step-count { margin-top: 22px; font-size: 12px; }
  #booking-dialog .form-progress { gap: 5px; margin-bottom: 26px; }
  #booking-dialog .form-progress span { font-size: 11px; overflow-wrap: anywhere; }
  #booking-dialog .booking-choices { grid-template-columns: 1fr 1fr; }
  #booking-dialog .booking-choice { padding: 12px; gap: 9px; min-height: 88px; }
  #booking-dialog .booking-choice strong { font-size: 13px; }
  #booking-dialog .booking-choice small { font-size: 11px; }
  #booking-dialog .booking-options-inline { grid-template-columns: 1fr 1fr; }
  #booking-dialog .booking-options-inline .booking-choice { min-height: 48px; }
  #booking-dialog .booking-flavours { grid-template-columns: 1fr 1fr; }
  #booking-dialog .booking-flavours .booking-choice { min-height: 56px; padding: 10px; gap: 9px; }
  #booking-dialog .booking-flavours .booking-choice > span { font-size: 12px; }
  #booking-dialog .booking-service { grid-template-columns: 1fr; }
  #booking-dialog .booking-service .booking-choice { min-height: 90px; }
  #booking-dialog .booking-field-grid { grid-template-columns: 1fr; gap: 20px; }
  #booking-dialog .booking-summary { grid-template-columns: 90px minmax(0, 1fr); gap: 9px 14px; font-size: 12px; }
  #booking-dialog .booking-actions { gap: 9px; }
  #booking-dialog .booking-actions button { padding: 12px 18px; font-size: 13px; }
  #booking-dialog .booking-submit { max-width: 190px; }
}
@media (prefers-reduced-motion: reduce) {
  #booking-dialog .form-progress li,#booking-dialog .booking-choice { transition: none; }
}
#booking-dialog .booking-choice > span { min-width: 0; overflow-wrap: break-word; }
@media(max-width:650px) {
  #booking-dialog .booking-choices,#booking-dialog .booking-flavours { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #booking-dialog .form-progress span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media(max-width:380px) {
  #booking-dialog .booking-choices,#booking-dialog .booking-flavours { grid-template-columns: minmax(0,1fr); }
}