.book { max-width: 760px; padding-block: var(--space-6) var(--space-8); }
.book__title { font-size: clamp(30px, 5vw, 42px); text-align: center; margin-block-end: var(--space-5); }

/* ---------- Stepper ---------- */
.stepper {
  list-style: none; margin: 0 0 var(--space-6); padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2);
  counter-reset: step;
}
.stepper li {
  counter-increment: step;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
  font-size: 14px; color: var(--color-text-muted); text-align: center;
  padding-block-start: var(--space-3);
  border-block-start: 3px solid var(--color-line);
}
.stepper li::before { content: counter(step); font-family: var(--font-heading); font-size: 18px; }
.stepper li.is-done { border-color: var(--color-line-strong); color: var(--color-text); }
.stepper li[aria-current="step"] { border-color: var(--flor-yellow); color: var(--color-text); font-weight: 600; }

.panel { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-6); border: 1px solid var(--color-line); }
@media (max-width: 560px) { .panel { padding: var(--space-5) var(--space-4); } }
.panel h2 { font-size: 26px; margin-block-end: var(--space-5); }

.actions { display: flex; justify-content: space-between; gap: var(--space-3); margin-block-start: var(--space-6); flex-wrap: wrap; }
.actions .btn:only-child { margin-inline-start: auto; }

/* ---------- Guest stepper ---------- */
.guests { display: flex; align-items: center; gap: var(--space-3); }
.guests .input { width: 96px; text-align: center; font-size: 20px; }
.guests button {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1.5px solid var(--color-line-strong); background: var(--color-surface);
  font-size: 22px; color: inherit; cursor: pointer;
}
.guests button:disabled { opacity: 0.35; cursor: not-allowed; }

/* ---------- Calendar ---------- */
.cal { border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: var(--space-4); }
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-block-end: var(--space-3); }
.cal__head h3 { font-size: 20px; }
.cal__nav { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--color-line); background: none; cursor: pointer; font-size: 18px; color: inherit; }
.cal__nav:disabled { opacity: 0.3; cursor: not-allowed; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.cal__dow { font-size: 13px; color: var(--color-text-muted); padding-block: var(--space-1); }
.cal__day {
  aspect-ratio: 1; max-height: 52px; width: 100%;
  border: 1px solid transparent; border-radius: var(--radius);
  background: var(--flor-cream); color: inherit; font: inherit; cursor: pointer;
}
.cal__day:hover:not(:disabled) { border-color: var(--flor-brown); }
.cal__day:disabled { background: none; color: var(--color-disabled-text); cursor: default; text-decoration: line-through; text-decoration-color: var(--color-line); }
.cal__day[aria-pressed="true"] { background: var(--flor-brown); color: var(--flor-paper); }

/* ---------- Slots ---------- */
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--space-2); }
.slot { position: relative; }
.slot input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.slot label {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--space-3) var(--space-2);
  border: 1.5px solid var(--color-line-strong); border-radius: var(--radius);
  background: var(--color-surface); cursor: pointer;
}
.slot__time { font-size: 19px; direction: ltr; }
.slot__mode { font-size: 12px; color: var(--color-text-muted); }
.slot input:checked + label { background: var(--flor-brown); color: var(--flor-paper); border-color: var(--flor-brown); }
.slot input:checked + label .slot__mode { color: inherit; }
.slot input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.slot input:disabled + label { border-style: dashed; color: var(--color-disabled-text); background: var(--color-disabled-bg); cursor: not-allowed; }
.slot input:disabled { cursor: not-allowed; }
.slot--approval .slot__mode::before { content: "◔ "; }
.hint { font-size: 14px; color: var(--color-text-muted); margin: var(--space-3) 0 0; }

/* ---------- Summary / conditions ---------- */
.summary { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-5); margin: 0 0 var(--space-5); }
.summary dt { color: var(--color-text-muted); }
.summary dd { margin: 0; }
.conditions { margin: 0 0 var(--space-5); padding-inline-start: var(--space-5); display: grid; gap: var(--space-3); }

.result { text-align: center; }
.result__icon { font-size: 40px; display: block; margin-block-end: var(--space-3); }
.result h2 { font-size: 32px; }
.result .summary { text-align: start; max-width: 420px; margin: var(--space-5) auto; }

/* ---------- Packages (15–30) ---------- */
.packages { display: grid; gap: var(--space-3); }
.package { position: relative; }
.package input { position: absolute; opacity: 0; inset: 0 0 auto 0; height: 1px; margin: 0; }
.package__card {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  border: 1.5px solid var(--color-line-strong); border-radius: var(--radius-lg);
  background: var(--color-surface); cursor: pointer;
}
.package__card:hover { border-color: var(--flor-brown); }
.package input:checked + .package__card { background: var(--flor-cream); border-color: var(--flor-brown); border-width: 2px; }
.package input:focus-visible + .package__card { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.package__price { font-family: var(--font-heading); font-size: 24px; }
.package__title { font-weight: 600; }
.package__desc { font-size: 15px; color: var(--color-text-muted); }
.package__more {
  margin: var(--space-2) var(--space-5) 0; padding: 0;
  background: none; border: 0; font: inherit; font-size: 14px; color: var(--color-text);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.package__details {
  margin: var(--space-2) var(--space-5) 0;
  padding: var(--space-3) var(--space-4);
  background: var(--flor-paper); border-inline-start: 3px solid var(--flor-yellow);
  font-size: 15px; white-space: pre-wrap;
}
.total { margin: var(--space-5) 0 0; font-size: 18px; }
.total strong { font-weight: 600; }
.price-note { display: block; margin-block-start: 2px; font-size: 14px; font-weight: 400; color: var(--color-text-muted); }
.price-note--service { font-size: 15px; font-weight: 600; color: var(--color-text); }