/* =========================================================================
   Aurelia Medical Aesthetics - booking pages (contact.html, thank-you.html and
   manage.html). Everything here uses the :root tokens from css/style.css
   (espresso / gold / ivory) so a palette change there carries over.
   ========================================================================= */

/* ---------- the booking form: numbered steps ---------- */
.form-step{ display:grid; gap:1.15rem; padding-top:1.5rem; border-top:1px solid var(--line-soft); }
.form-step:first-of-type{ padding-top:0; border-top:0; }
.step-title{ display:flex; align-items:baseline; gap:.8rem; margin:0; font-size:1.35rem; }
.step-title b{ font-family:var(--font-body); font-size:.66rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); border:1px solid var(--line); border-radius:999px; padding:.15rem .6rem; }
.step-hint{ font-size:.86rem; color:var(--ink-soft); margin:-.6rem 0 0; }

/* ---------- number of people ---------- */
.people-row{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; }
.people-stepper{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); overflow:hidden; }
.people-stepper button{ width:44px; height:44px; border:0; background:transparent; font-size:1.35rem; line-height:1;
  color:var(--accent); cursor:pointer; transition:background .2s var(--ease); }
.people-stepper button:hover{ background:var(--surface-2); }
.people-stepper button:disabled{ color:var(--line); cursor:default; background:transparent; }
.field .people-stepper input{ width:3.6rem; text-align:center; border:0; border-inline:1px solid var(--line); border-radius:0;
  padding:.6rem .25rem; font-weight:500; -moz-appearance:textfield; appearance:textfield; }
.people-stepper input::-webkit-outer-spin-button,.people-stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.field .people-stepper input:focus{ box-shadow:none; border-color:var(--line); }
.people-note{ font-size:.85rem; color:var(--ink-soft); margin:0; }

/* ---------- where: studio / on location / video ---------- */
.loc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); gap:.5rem; }
.field .loc-opt{ display:flex; gap:.7rem; align-items:flex-start; margin:0; padding:.8rem 1rem; border:1px solid var(--line);
  border-radius:12px; background:var(--surface); cursor:pointer; font-size:.88rem; font-weight:400; text-transform:none;
  letter-spacing:0; line-height:1.4; color:var(--ink-soft); transition:border-color .2s var(--ease); }
.field .loc-opt:hover{ border-color:var(--accent); }
.field .loc-opt input{ width:auto; height:auto; min-height:0; padding:0; margin:.25rem 0 0; flex:none; accent-color:var(--accent); }
.field .loc-opt strong{ display:block; color:var(--ink); font-weight:500; }
.field .loc-opt small{ display:block; font-size:.8rem; color:var(--ink-soft); }
.field .loc-opt .loc-fee{ color:var(--accent); font-weight:500; }
.field .loc-opt:has(input:checked), .field .loc-opt.is-picked{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.field .loc-opt:has(input:focus-visible){ outline:2px solid var(--accent); outline-offset:2px; }

/* ---------- free times: early-start badge and ready-by highlighting ---------- */
.slot-badge{ display:block; font-size:.6rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-top:.15rem; }
.slot input:checked + span .slot-badge{ color:var(--on-ink); }
.slots.has-ready .slot.is-late span{ opacity:.45; }
.slots.has-ready .slot.is-fits span{ border-color:var(--accent); background:var(--surface-2); }
.slots.has-ready .slot.is-fits input:checked + span{ background:var(--accent); color:#fff; }
.slot-legend{ display:flex; flex-wrap:wrap; gap:.35rem 1.1rem; margin:.6rem 0 0; font-size:.8rem; color:var(--ink-soft); }
.slot-legend i{ display:inline-block; width:.8rem; height:.8rem; border:1px solid var(--accent); background:var(--surface-2);
  border-radius:3px; vertical-align:-.1rem; margin-right:.35rem; }
.ready-note{ font-size:.85rem; color:var(--ink-soft); margin:.35rem 0 0; }
.ready-note.is-warn{ color:var(--accent-2); }
.field .ready-row{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; }
.field .ready-row input[type="time"]{ width:auto; min-width:9rem; }

/* ---------- live price summary ---------- */
.quote-box{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.15rem; }
.quote-box h3{ font-size:1.2rem; margin:0 0 .6rem; }
.quote-rows{ display:grid; gap:.35rem; margin:0; }
.quote-rows > div{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; font-size:.92rem; color:var(--ink-soft); }
.quote-rows dt{ flex:1; }
.quote-rows dd{ margin:0; font-variant-numeric:tabular-nums; color:var(--ink); white-space:nowrap; }
.quote-rows .quote-minus dd{ color:#2f7d55; }
.quote-rows .quote-total{ margin-top:.35rem; padding-top:.55rem; border-top:1px solid var(--line); color:var(--ink); font-weight:500; }
.quote-rows .quote-total dd{ font-family:var(--font-display); font-weight:600; font-size:1.4rem; }
.quote-rows .quote-sub{ font-size:.86rem; }
.quote-foot{ margin:.6rem 0 0; font-size:.82rem; color:var(--ink-soft); }

/* ---------- details on the confirmation and manage pages ---------- */
.booked-list{ list-style:none; margin:1rem auto 0; padding:0; display:grid; gap:.4rem; text-align:left; max-width:26rem; }
.booked-list--left{ margin-inline:0; max-width:none; margin-top:.75rem; }
.booked-list li{ display:grid; grid-template-columns:5.5rem 1fr; gap:.75rem; font-size:.92rem; color:var(--ink); }
.booked-list .k{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); padding-top:.25rem; }
.booked-list small{ display:block; color:var(--ink-soft); font-size:.82rem; }

/* ---------- bridal balance (manage.html) ---------- */
.balance-box{ background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:1rem 1.15rem; margin-top:1.25rem; }
.balance-box.is-overdue{ border-color:var(--accent-2); }
.balance-box .deposit-title{ margin-bottom:.35rem; }
.balance-box .deposit-list{ margin-top:.75rem; }
.balance-text{ font-size:.9rem; color:var(--ink-soft); margin:0 0 .5rem; }

/* ---------- side cards on the Book page ---------- */
.zone-list li{ align-items:baseline; }
.zone-list .k{ flex:1; }
.zone-list .fee{ color:var(--accent); font-weight:500; white-space:nowrap; }

@media (max-width:520px){
  .booked-list li{ grid-template-columns:4.6rem 1fr; }
  .quote-rows .quote-total dd{ font-size:1.25rem; }
}