/* ==========================================================================
   Pawsitive Salon — booking.css
   Styles for the appointment builder (booking.html). Builds on tokens.css
   and the shared component classes; nothing here hard-codes a brand color.
   ========================================================================== */

/* --- Layout: flow on the left, sticky summary on the right --------------- */
.booking__layout { display: grid; gap: var(--space-l); align-items: start; }
@media (min-width: 980px) {
  .booking__layout { grid-template-columns: minmax(0, 1fr) 340px; }
}

/* --- Stepper ------------------------------------------------------------- */
.stepper {
  list-style: none; display: flex; flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-s); padding: 0;
  margin: 0 0 var(--space-m);
}
.stepper__item {
  display: flex; align-items: center; gap: var(--space-2xs);
  font-size: var(--step--1); color: var(--ink-faint);
}
.stepper__num {
  width: 27px; height: 27px; border-radius: var(--radius-pill);
  display: grid; place-items: center; font-weight: 800; font-size: 0.85rem;
  background: var(--cream); color: var(--ink-soft); border: 1px solid var(--line);
}
.stepper__item[data-state="current"] { color: var(--ink); font-weight: 700; }
.stepper__item[data-state="current"] .stepper__num { background: var(--tang); color: #fff; border-color: var(--tang); }
.stepper__item[data-state="done"] .stepper__num { background: var(--gold-soft); color: var(--tang-deep); border-color: var(--gold); }

/* --- Panel --------------------------------------------------------------- */
.booking__panel { padding: var(--space-l); }
.panel__title { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); margin: 0 0 var(--space-3xs); }
.panel__hint { color: var(--ink-soft); margin: 0 0 var(--space-m); font-size: var(--step--1); }
.panel__sub { font-weight: 800; font-size: var(--step--1); color: var(--ink-soft); margin: var(--space-m) 0 var(--space-2xs); }

/* --- Selectable option cards (services) ---------------------------------- */
.opt-grid { display: grid; gap: var(--space-s); grid-template-columns: 1fr; }
@media (min-width: 560px) { .opt-grid { grid-template-columns: 1fr 1fr; } }
.opt {
  position: relative; width: 100%; text-align: left; font: inherit; cursor: pointer;
  display: flex; gap: var(--space-s); align-items: flex-start;
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--radius-s); padding: var(--space-s) var(--space-s) var(--space-s);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.opt:hover { border-color: var(--gold); }
.opt:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.opt[aria-pressed="true"] { border-color: var(--tang); box-shadow: 0 0 0 1.5px var(--tang); }
.opt__icon { font-size: 1.7rem; line-height: 1; }
.opt__body { flex: 1; }
.opt__name { font-weight: 700; }
.opt__blurb { color: var(--ink-soft); font-size: var(--step--1); margin: 2px 0 6px; }
.opt__meta { display: flex; align-items: center; gap: var(--space-s); }
.opt__price { font-family: var(--font-display); color: var(--tang-deep); font-weight: 600; font-size: var(--step-1); }
.opt__check {
  position: absolute; top: var(--space-2xs); right: var(--space-2xs);
  width: 22px; height: 22px; border-radius: var(--radius-pill);
  background: var(--tang); color: #fff; display: grid; place-items: center;
  font-size: 0.8rem; opacity: 0; transform: scale(0.6); transition: var(--dur) var(--ease);
}
.opt[aria-pressed="true"] .opt__check { opacity: 1; transform: scale(1); }

/* --- Chips (size, add-ons, days, times) ---------------------------------- */
.choice-row { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.chip {
  font: inherit; cursor: pointer; border: 1.5px solid var(--line);
  background: var(--surface); color: var(--ink-soft);
  border-radius: var(--radius-pill); padding: 0.5rem 0.95rem; text-align: center;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
  line-height: 1.25;
}
.chip:hover { border-color: var(--gold); }
.chip:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.chip small { display: block; font-size: 0.72rem; color: var(--ink-faint); font-weight: 400; }
.chip[aria-pressed="true"] { border-color: var(--tang); background: var(--tang-soft); color: var(--tang-deep); font-weight: 700; }
.chip[aria-pressed="true"] small { color: var(--tang-deep); }
.chip[disabled] { opacity: 0.4; cursor: not-allowed; }

/* --- Details form -------------------------------------------------------- */
.field--row { display: grid; gap: var(--space-s); }
@media (min-width: 560px) { .field--row { grid-template-columns: 1fr 1fr; } }
.field__error { color: var(--tang-deep); font-size: var(--step--1); font-weight: 700; margin-top: 2px; min-height: 1.1em; }
.field input[aria-invalid="true"] { border-color: var(--tang-deep); }

/* --- Review list --------------------------------------------------------- */
.review-list { display: grid; gap: var(--space-2xs); margin: 0 0 var(--space-m); }
.review-row { display: flex; justify-content: space-between; gap: var(--space-s); padding: var(--space-2xs) 0; border-bottom: 1px solid var(--line); }
.review-row:last-child { border-bottom: 0; }
.review-row span { color: var(--ink-soft); }
.review-row b { color: var(--ink); text-align: right; }

/* --- Summary rail -------------------------------------------------------- */
.booking__summary { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-m); box-shadow: var(--shadow-s); }
@media (min-width: 980px) { .booking__summary { position: sticky; top: calc(var(--header-h) + var(--space-s)); } }
.sum__head { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); margin: 0 0 var(--space-s); }
.sum__row { display: flex; justify-content: space-between; gap: var(--space-s); font-size: var(--step--1); padding: 3px 0; color: var(--ink-soft); }
.sum__row b { color: var(--ink); font-weight: 700; }
.sum__divider { height: 1px; background: var(--line); margin: var(--space-2xs) 0; }
.sum__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--space-2xs); }
.sum__total .amt { font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); color: var(--ink); }
.sum__deposit { display: flex; justify-content: space-between; gap: var(--space-s); background: var(--gold-soft); border-radius: var(--radius-s); padding: var(--space-2xs) var(--space-s); margin-top: var(--space-s); font-size: var(--step--1); color: var(--ink-soft); }
.sum__deposit b { color: var(--ink); }
.sum__empty { color: var(--ink-faint); font-size: var(--step--1); }

/* --- Nav ----------------------------------------------------------------- */
.booking__nav { display: flex; justify-content: space-between; gap: var(--space-s); margin-top: var(--space-m); }
.booking__nav [hidden] { display: none; }

/* --- Confirmation -------------------------------------------------------- */
.confirm { text-align: center; padding: var(--space-xl) var(--space-l); }
.confirm__badge { width: 66px; height: 66px; border-radius: var(--radius-pill); background: var(--gold-soft); color: var(--tang-deep); display: grid; place-items: center; font-size: 2rem; margin: 0 auto var(--space-s); }
.confirm h2 { font-family: var(--font-display); font-weight: 600; margin: 0 0 var(--space-2xs); }
.confirm p { color: var(--ink-soft); max-width: 48ch; margin: 0 auto var(--space-s); }
.confirm__ref { display: inline-block; background: var(--cream); border-radius: var(--radius-pill); padding: 0.35rem 1rem; font-weight: 800; color: var(--ink); margin-bottom: var(--space-m); }

/* Capacity: a day with no remaining slots for the chosen groomer */
.chip--full { opacity: .5; cursor: not-allowed; text-decoration: line-through; }
.chip--full small { text-decoration: none; }

/* Multi-pet booking rows (v1.2.0) */
.bk-petrow { border:1px solid var(--line); border-radius:var(--radius-m); padding:var(--space-s) var(--space-m); margin-bottom:var(--space-s); background:var(--surface,#fff); }
.bk-petrow__head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-s); }
.bk-petrow__head b { font-family:var(--font-display); font-size:var(--step-1); }
.bk-x { border:none; background:transparent; font-size:1.3rem; line-height:1; cursor:pointer; color:var(--ink-faint); padding:0 .25rem; }
.bk-x:hover { color:var(--tang,#ec6a2e); }
.bk-select { width:100%; padding:.55rem .7rem; border:1px solid var(--line); border-radius:var(--radius-m); font:inherit; background:#fff; }
.bk-existing { margin-bottom:var(--space-s); }

/* One-pet-at-a-time service slider (v1.4.1) */
.svc-progress { display:flex; align-items:center; justify-content:space-between; margin:0 0 var(--space-s); }
.svc-count { font-weight:800; color:var(--ink-soft); font-size:var(--step--1); letter-spacing:.01em; }
.svc-dots { display:inline-flex; gap:6px; align-items:center; }
.svc-dot { width:8px; height:8px; border-radius:999px; background:var(--line); transition:transform .15s ease, background .15s ease; }
.svc-dot.done { background:var(--gold); }
.svc-dot.on { background:var(--tang); transform:scale(1.3); }
.svc-stage { overflow:hidden; }
.svc-slide[data-dir="fwd"] { animation:svc-in-fwd .28s ease both; }
.svc-slide[data-dir="back"] { animation:svc-in-back .28s ease both; }
@keyframes svc-in-fwd { from { transform:translateX(48px); opacity:0; } to { transform:none; opacity:1; } }
@keyframes svc-in-back { from { transform:translateX(-48px); opacity:0; } to { transform:none; opacity:1; } }
.svc-nav { display:flex; align-items:center; justify-content:space-between; gap:var(--space-s); margin-top:var(--space-m); }
.svc-done-note { color:var(--ink-faint); font-size:var(--step--1); font-weight:700; }
@media (prefers-reduced-motion: reduce) { .svc-slide { animation:none !important; } }