/* ==========================================================================
   NorthShoreXpress — booking wizard
   ========================================================================== */

.booking-shell {
  display: grid;
  grid-template-columns: 1fr 372px;
  gap: 34px;
  align-items: start;
  padding: 44px 0 80px;
}

/* ---------- Progress rail ------------------------------------------------ */
.wizard-progress {
  display: flex;
  gap: 6px;
  margin-bottom: 30px;
  counter-reset: wstep;
}
.wstep {
  flex: 1;
  min-width: 0;
  padding-top: 12px;
  border-top: 4px solid var(--line);
  transition: border-color 0.25s;
}
.wstep .wnum {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.74rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}
.wstep .wnum b {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--line); color: var(--ink-2);
  display: grid; place-items: center; font-size: 0.7rem; flex: none;
}
.wstep .wlabel {
  display: block; margin-top: 4px; font-size: 0.93rem;
  font-weight: 750; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wstep.is-active { border-top-color: var(--teal-600); }
.wstep.is-active .wnum { color: var(--teal-700); }
.wstep.is-active .wnum b { background: var(--teal-600); color: #fff; }
.wstep.is-active .wlabel { color: var(--navy-900); }
.wstep.is-done { border-top-color: var(--ok); }
.wstep.is-done .wnum b { background: var(--ok); color: #fff; }
.wstep.is-done .wnum { color: var(--ok); }

/* ---------- Panels ------------------------------------------------------- */
.wizard-panel { display: none; }
.wizard-panel.is-active { display: block; animation: fadeUp 0.24s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.panel-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 30px;
}
.panel-card + .panel-card { margin-top: 18px; }
.panel-card > h2 { font-size: 1.35rem; margin-bottom: 4px; }
.panel-card > .panel-sub { font-size: 0.92rem; color: var(--muted); margin-bottom: 24px; }

.fieldset-title {
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--muted);
  margin: 26px 0 14px; padding-top: 22px; border-top: 1px solid var(--line-2);
}
.fieldset-title:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }

.wizard-nav {
  display: flex; justify-content: space-between; gap: 14px;
  margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line-2);
}
.wizard-nav .spacer { flex: 1; }

/* ---------- Summary sidebar --------------------------------------------- */
.summary {
  position: sticky; top: calc(var(--nav-h) + 18px);
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
.summary-head {
  background: var(--navy-800); color: #fff; padding: 20px 22px;
}
.summary-head h3 { color: #fff; font-size: 1.08rem; margin-bottom: 2px; }
.summary-head p { font-size: 0.82rem; color: #9db9cf; margin: 0; }

.summary-body { padding: 20px 22px; }
.sum-row {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 10px 0; border-bottom: 1px dashed var(--line-2);
  font-size: 0.89rem; align-items: baseline;
}
.sum-row:last-child { border-bottom: 0; }
.sum-row dt { color: var(--muted); font-weight: 600; flex: none; }
.sum-row dd {
  margin: 0; text-align: right; color: var(--ink);
  font-weight: 700; word-break: break-word;
}
.sum-row dd.empty { color: #7c8e9d; font-weight: 500; font-style: italic; }

.summary-total {
  background: var(--surface-2); border-top: 1px solid var(--line);
  padding: 18px 22px;
}
.summary-total .tot-row {
  display: flex; justify-content: space-between; align-items: baseline;
}
.summary-total .tot-row strong { font-size: 1.5rem; color: var(--navy-900); letter-spacing: -0.03em; }
.summary-total .tot-row span { font-size: 0.84rem; font-weight: 750; color: var(--ink-2); }
.summary-total .tot-note { font-size: 0.76rem; color: var(--muted); margin-top: 8px; }

.summary-help {
  padding: 16px 22px; border-top: 1px solid var(--line);
  font-size: 0.83rem; color: var(--muted);
}

/* ---------- Review step -------------------------------------------------- */
.review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
.review-item { padding: 13px 0; border-bottom: 1px solid var(--line-2); }
.review-item dt {
  font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 3px;
}
.review-item dd { margin: 0; font-size: 0.96rem; font-weight: 650; color: var(--ink); }

.edit-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 0.82rem; font-weight: 750; color: var(--teal-700);
  text-decoration: underline;
}

/* ---------- Success ------------------------------------------------------ */
.success-card { text-align: center; padding: 52px 34px; }
.success-mark {
  width: 74px; height: 74px; border-radius: 50%;
  background: var(--ok-bg); color: var(--ok);
  display: grid; place-items: center; margin: 0 auto 22px;
}
.success-mark svg { width: 38px; height: 38px; }
.ref-code {
  display: inline-block; font-family: var(--font-mono);
  font-size: 1.3rem; font-weight: 700; letter-spacing: 0.08em;
  background: var(--surface-3); color: var(--navy-900);
  padding: 11px 22px; border-radius: var(--r); margin: 6px 0 22px;
}

@media (max-width: 1000px) {
  .booking-shell { grid-template-columns: 1fr; }
  .summary { position: static; order: -1; }
}
@media (max-width: 700px) {
  .panel-card { padding: 22px 18px; }
  .review-grid { grid-template-columns: 1fr; }
  .wstep .wlabel { display: none; }
  .wizard-progress { gap: 4px; }
  .wizard-nav { flex-direction: column-reverse; }
  .wizard-nav .btn { width: 100%; }
  .wizard-nav .spacer { display: none; }
}