/* TT Booking Wizard — multi-step. Uses theme tokens, falls back gracefully. */

/* --- Two-column layout: wizard + Sticky Price Summary (Milestone 4) --- */
.tt-wiz-layout { max-width: 1140px; margin-inline: auto; display: block; }
@media (min-width: 900px) {
  .tt-wiz-layout { display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: start; }
}
.tt-wiz { max-width: 860px; margin-inline: auto; }
@media (min-width: 900px) { .tt-wiz { max-width: none; margin-inline: 0; } }
.tt-wiz__steps { display:flex; gap:8px; margin-bottom:24px; flex-wrap:wrap; }
.tt-wiz__steps li { flex:1; min-width:90px; font-size:12px; font-weight:600; color:var(--tt-color-text-soft,#6B7280); padding:8px 4px; text-align:center; border-top:3px solid var(--tt-color-border,#E5E7EB); }
.tt-wiz__steps li[aria-current="step"] { color:var(--tt-color-primary,#0F62FE); border-top-color:var(--tt-color-primary,#0F62FE); }
.tt-wiz__steps li.done { color:var(--tt-color-secondary,#22C55E); border-top-color:var(--tt-color-secondary,#22C55E); }
.tt-wiz__panel { display:none; }
.tt-wiz__panel.active { display:block; }
.tt-wiz__nav { display:flex; justify-content:space-between; gap:12px; margin-top:24px; }
.tt-wiz__opts { display:grid; gap:12px; grid-template-columns:1fr; }
@media(min-width:640px){ .tt-wiz__opts { grid-template-columns:1fr 1fr; } }
.tt-wiz__opt { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px; border:2px solid var(--tt-color-border,#E5E7EB); border-radius:12px; cursor:pointer; background:#fff; }
.tt-wiz__opt[aria-pressed="true"] { border-color:var(--tt-color-primary,#0F62FE); box-shadow:0 0 0 3px rgba(15,98,254,.15); }
.tt-wiz__opt b { font-family:var(--tt-font-heading,system-ui); }
.tt-wiz__opt .p { font-weight:700; color:var(--tt-color-primary,#0F62FE); white-space:nowrap; }
.tt-wiz__opt .muted { font-size:13px; color:var(--tt-color-text-soft,#6B7280); }
.tt-wiz__extra { display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--tt-color-border,#E5E7EB); }
.tt-wiz__included { font-size: 12px; font-weight: 600; color: var(--tt-color-secondary,#22C55E); }

/* --- Vehicle Selection: photo-led cards (Milestone 4) ------------------ */
.tt-wiz__opt--photo { flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; text-align: start; }
.tt-wiz__opt-media { aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; background: var(--tt-color-surface,#F8FAFC); }
.tt-wiz__opt-media svg { width: 32px; height: 32px; color: var(--tt-color-text-soft,#6B7280); }
.tt-wiz__opt-body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; }
.tt-wiz__opt-body .p { font-size: 16px; margin-top: 4px; }

/* --- Passenger details: inline validation error text -------------------- */
.tt-wiz__field-error { display: block; font-size: 13px; color: var(--tt-color-danger,#DC2626); min-height: 1em; margin-top: 4px; }
.tt-wiz__field input[aria-invalid="true"] { border-width: 2px; border-color: var(--tt-color-danger,#DC2626); }

/* --- Payment step: card-network marks + loading/disabled state --------- */
.tt-wiz__card-marks { display: flex; gap: 4px; }
.tt-wiz__card-marks span { font-size: 10px; font-weight: 700; letter-spacing: .02em; background: var(--tt-color-surface,#F8FAFC); color: var(--tt-color-text-soft,#6B7280); padding: 3px 6px; border-radius: 4px; }
button[data-next]:disabled, button[data-pay]:disabled { opacity: .6; cursor: wait; }

/* --- Confirmation: next-step timeline ----------------------------------- */
.tt-wiz__timeline { list-style: none; margin: 20px 0; padding: 0; text-align: start; display: flex; flex-direction: column; gap: 12px; }
.tt-wiz__timeline li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; }
.tt-wiz__timeline-num { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--tt-color-surface,#F8FAFC); color: var(--tt-color-text-soft,#6B7280); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.tt-wiz__field { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.tt-wiz__field label { font-size:13px; font-weight:600; }
.tt-wiz__field input, .tt-wiz__field textarea { height:48px; padding:0 14px; border:1px solid var(--tt-color-border,#E5E7EB); border-radius:10px; font-size:15px; }
.tt-wiz__field textarea { height:auto; padding:12px 14px; }
.tt-wiz__grid2 { display:grid; gap:0 16px; grid-template-columns:1fr; }
@media(min-width:560px){ .tt-wiz__grid2 { grid-template-columns:1fr 1fr; } }
.tt-wiz__summary { background:var(--tt-color-surface,#F8FAFC); border-radius:12px; padding:20px; }
.tt-wiz__summary .row { display:flex; justify-content:space-between; padding:6px 0; }
.tt-wiz__summary .total { border-top:1px solid var(--tt-color-border,#E5E7EB); margin-top:8px; padding-top:12px; font-family:var(--tt-font-heading,system-ui); font-weight:700; font-size:20px; }
.tt-wiz__pay { display:flex; flex-direction:column; gap:12px; }
.tt-wiz__coupon { }
.tt-wiz__coupon-row { display:flex; gap:8px; margin-top:6px; }
.tt-wiz__coupon-row .tt-input { flex:1; height:44px; padding:0 12px; border:1px solid var(--tt-color-border,#E5E7EB); border-radius:10px; font-size:15px; }
.tt-wiz__coupon-row .tt-btn { white-space:nowrap; }
#tt-wiz-coupon-msg { display:block; margin-top:6px; font-size:13px; }
.tt-wiz__error { color:var(--tt-color-danger,#DC2626); font-size:14px; min-height:1em; }
.tt-wiz__done { text-align:center; padding:24px; }
.tt-wiz__done .ref { font-family:var(--tt-font-heading,system-ui); font-size:24px; font-weight:700; color:var(--tt-color-primary,#0F62FE); }
#tt-paypal-buttons { margin-top:8px; min-height:48px; }

/* --- Confirmation (Done) step polish --------------------------------- */
.tt-wiz__done { text-align:center; padding:32px 16px; max-width:520px; margin-inline:auto; }
.tt-wiz__done svg { width:34px; height:34px; color:#fff; stroke-width:3; }
.tt-wiz__done .tt-wiz__badge {
  width:72px; height:72px; border-radius:999px; margin:0 auto 16px;
  display:grid; place-items:center;
  background:var(--tt-color-secondary,#22C55E);
  box-shadow:0 8px 24px rgba(34,197,94,.35);
}
.tt-wiz__done h2 { margin-top:4px; }
.tt-wiz__done .ref {
  display:inline-block; margin:12px auto; padding:10px 18px;
  background:var(--tt-color-surface,#F8FAFC); border:1px dashed var(--tt-color-border,#E5E7EB);
  border-radius:12px; font-family:var(--tt-font-heading,system-ui); font-size:22px; font-weight:700;
  color:var(--tt-color-primary,#0F62FE); letter-spacing:.5px;
}