/* Reservation form, preview, and confirmation components. */
.booking-section {
  padding:60px 0 110px;
}
.booking-layout {
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:38px;
  align-items:start;
}
.booking-card {
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:22px;
  padding:36px;
}
.booking-progress {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  padding:0;
  margin:0 0 34px;
  list-style:none;
}
.booking-progress button {
  width:100%;
  display:flex;
  gap:8px;
  align-items:center;
  text-align:left;
  padding:0 0 18px;
  border-bottom:2px solid var(--line);
  min-height:48px;
  font-size:14px;
}
.booking-progress button>span {
  color:var(--muted);
  font-size:14px;
}
.booking-progress button>strong {
  font-weight:400;
}
.booking-progress li.is-active button {
  border-color:var(--terracotta);
  color:var(--terracotta);
}
.booking-progress li.is-complete button {
  border-color:var(--olive);
}
.booking-progress button:disabled {
  opacity:.6;
}
.booking-step {
  margin:0;
  padding:0;
  border:0;
  min-width:0;
}
.js .booking-step:not(.is-active) {
  display:none;
}
.step-title {
  margin-bottom:28px;
}
.step-title>.eyebrow {
  font-size:14px;
  color:var(--olive);
  margin-bottom:13px;
}
.step-title h3 {
  font-size:33px;
  line-height:1.2;
}
.step-title p {
  font-size:14px;
  margin-top:14px;
  line-height:1.7;
}
.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 22px;
}
.field {
  margin-bottom:22px;
  min-width:0;
}
.field label,.field-label {
  display:flex;
  align-items:center;
  gap:4px;
  line-height:1.4;
  font-size:14px;
  margin-bottom:11px;
}
.field label>span[aria-hidden],.field-label>span {
  color:var(--terracotta);
}
.field input,.field select,.field textarea {
  display:block;
  width:100%;
  border:1px solid #cdd1c2;
  border-radius:10px;
  padding:13px 15px;
  background:#fffefb;
  color:var(--ink);
  min-height:49px;
  min-width:0;
  line-height:1.5;
  font-size:14px;
}
.field textarea {
  resize:vertical;
  min-height:110px;
}
.field select {
  appearance:none;
  background-image:url('../assets/icons/chevron-down.svg');
  background-repeat:no-repeat;
  background-position:calc(100% - 14px) 50%;
  background-size:14px;
  padding-right:35px;
}
.field input[aria-invalid=true],.field select[aria-invalid=true],.field textarea[aria-invalid=true] {
  border-color:#a83729;
  background:#fff9f7;
}
.field-note {
  font-size:14px;
  line-height:1.7;
  margin-top:8px;
}
.field-error {
  font-size:14px;
  line-height:1.5;
  color:#a83729;
  margin-top:7px;
}
.field-error:empty {
  display:none;
}
.quick-service-options {
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin:-8px 0 26px;
}
.quick-service-options button {
  min-height:38px;
  border:1px solid var(--line);
  border-radius:999px;
  padding:9px 12px;
  font-size:14px;
  line-height:1.3;
}
.quick-service-options button[aria-pressed=true] {
  background:var(--sage);
  border-color:var(--olive);
}
.duration-options {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.duration-options label {
  position:relative;
  display:block;
  margin:0;
}
.duration-options input {
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
  height:100%;
  margin:0;
}
.duration-options label>span {
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:5px;
  background:var(--canvas);
  border:1px solid var(--line);
  border-radius:12px;
  padding:19px 8px;
  font-size:14px;
  color:var(--muted);
  transition:background .2s,border-color .2s;
}
.duration-options strong {
  font-size:24px;
  font-weight:400;
  color:var(--ink);
}
.duration-options input:checked+span {
  background:var(--sage);
  border-color:var(--olive);
}
.duration-options input:focus-visible+span {
  outline:3px solid var(--terracotta);
  outline-offset:4px;
}
.schedule-note {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:5px;
  margin:-5px 0 25px;
  font-size:14px;
}
.schedule-note .icon {
  width:14px;
  height:14px;
  margin-right:4px;
}
.step-actions {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-top:35px;
  padding-top:25px;
  border-top:1px solid var(--line);
}
.step-actions>span {
  font-size:14px;
  color:var(--muted);
  max-width:170px;
}
.step-actions .button {
  font-size:14px;
  gap:20px;
  padding-inline:20px;
  min-height:48px;
}
.step-actions .text-link {
  font-size:14px;
  white-space:nowrap;
}
.booking-aside {
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  position:sticky;
  top:128px;
  background:var(--canvas);
}
.booking-preview {
  position:relative;
  height:225px;
}
.booking-preview>img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:65% 65%;
}
.booking-preview>.image-tag {
  font-size:14px;
  letter-spacing:.12em;
}
.booking-aside-copy {
  padding:30px;
}
.booking-aside-copy>.eyebrow {
  font-size:14px;
  color:var(--olive);
  margin-bottom:13px;
}
.booking-aside-copy h3 {
  font-size:30px;
  line-height:1.2;
}
.booking-aside-copy>p {
  font-size:14px;
  line-height:1.7;
  margin-top:15px;
  margin-bottom:22px;
}
.aside-summary {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  border-top:1px solid var(--line);
  padding-top:14px;
  margin-top:14px;
  font-size:14px;
}
.aside-summary strong {
  font-weight:400;
  font-size:14px;
}
.booking-aside-copy>.small {
  font-size:14px;
  margin-top:12px;
}
.booking-aside-copy .check-list {
  margin-bottom:0;
  gap:12px;
}
.booking-aside-copy .check-list li {
  font-size:14px;
}
.booking-aside-copy .check-list .icon {
  width:15px;
  height:15px;
}
.review-card {
  border:1px solid var(--line);
  background:var(--canvas);
  border-radius:14px;
  padding:20px;
  margin-top:8px;
  margin-bottom:25px;
}
.review-card>div {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.review-card h3 {
  font-size:18px;
  letter-spacing:-.01em;
}
.review-card .text-link {
  font-size:14px;
  gap:7px;
}
.review-card .text-link .icon {
  width:12px;
  height:12px;
}
.review-card dl {
  margin:10px 0 0;
  display:grid;
  grid-template-columns:110px 1fr;
  gap:10px 15px;
  font-size:14px;
  line-height:1.6;
}
.review-card dt {
  color:var(--muted);
}
.review-card dd {
  margin:0;
  text-align:right;
  overflow-wrap:anywhere;
}
.consent-control {
  display:flex;
  align-items:start;
  gap:12px;
  font-size:14px;
  line-height:1.8;
  color:var(--muted);
}
.consent-control input {
  width:17px;
  height:17px;
  flex:0 0 17px;
  accent-color:var(--olive);
  margin:3px 0 0;
}
.consent-control a {
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:3px;
}
.honeypot {
  position:absolute;
  left:-10000px;
  width:1px;
  height:1px;
  overflow:hidden;
}
.final-note {
  margin-top:20px;
  font-size:14px;
}
.form-alert {
  padding:14px 18px;
  border:1px solid #c89b8f;
  background:#fff4ef;
  border-radius:10px;
  color:#8c3326;
  font-size:14px;
  line-height:1.7;
  margin-bottom:25px;
}
.booking-success {
  text-align:center;
  padding:30px 0 0;
}
.success-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--sage);
  width:64px;
  height:64px;
  border-radius:50%;
  margin:0 auto 24px;
}
.success-icon .icon {
  width:30px;
  height:30px;
}
.booking-success>.eyebrow {
  font-size:14px;
  color:var(--olive);
  margin-bottom:18px;
}
.booking-success h3 {
  font-size:46px;
  line-height:1.1;
}
.booking-success>p {
  font-size:14px;
  margin:24px auto;
  max-width:420px;
  line-height:1.7;
}
.booking-success textarea {
  display:block;
  width:100%;
  resize:vertical;
  min-height:260px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:18px;
  background:var(--canvas);
  font-size:14px;
  line-height:1.8;
  color:var(--ink);
  text-align:left;
}
.success-actions {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  margin:26px 0 20px;
}
.success-actions .button {
  font-size:14px;
  gap:14px;
  padding:15px 20px;
}

@media(max-width:959px) { .step-actions>span { max-width:100px; font-size:14px; } }
@media(max-width:679px) {
  .field input,.field select,.field textarea { font-size:16px; min-height:50px; }
  .info-callout p { font-size:14px; }
  .review-card dl { grid-template-columns:82px minmax(0,1fr); gap:11px 12px; }
  .success-actions { flex-direction:column; align-items:stretch; }
  .duration-options label>span { padding:19px 8px; font-size:14px; }
}