/* ============================================================
   /book shell redesign — book.html only.
   Scope: page-hero copy, step-pill nav, and the shared visual
   vocabulary every step-content render function (js/book/*.js)
   emits via class names. Zero JS changes — every class name
   below is a stable contract the booking engine already targets;
   this file only changes how those classes look.

   Register: product (earned familiarity, consistent component
   vocabulary, restrained color, 150-250ms state-driven motion).
   The hero above stays brand (navy/teal/gold/serif), same as the
   homepage and every other page-hero instance site-wide.
   ============================================================ */

/* ── Local scale (booking wizard only) ────────────────────── */
.booking-wrap{
  --book-radius-lg:14px;
  --book-radius-md:10px;
  --book-radius-sm:7px;
  --book-border:1.5px solid var(--border-mid);
  --book-ease:cubic-bezier(.16,1,.3,1);
  max-width:680px;margin:0 auto;padding:0 1rem;box-sizing:border-box;width:100%
}
/* .section already supplies the horizontal gutter (2rem → 1.25rem @820 →
   1rem @400 — see main.v3.css). Stacking booking-wrap's own 1rem on top of
   that double-pads every step at the widths that need the room most (the
   7-col calendar grid, service/slot grids). Drop the extra gutter ≤820 so
   the wizard gets the full house-standard gutter instead of gutter×2. */
@media(max-width:820px){.booking-wrap{padding:0}}

/* ── Hero trust line ───────────────────────────────────────── */
.book-hero-trust{
  margin:1rem auto 0;font-size:.78rem;font-weight:600;letter-spacing:.02em;
  color:var(--teal-pale);opacity:.85
}

/* ── Step nav — a real stepper (badge + connecting line), not a
   flat segmented bar. Connector color is driven by sibling state
   via ~ (no JS needed): the segment leading into any done/active
   pill turns teal, so the line fills as you progress. ────────── */
.booking-steps{
  display:flex;justify-content:space-between;gap:0;
  margin-bottom:2.25rem;border:none;background:none;border-radius:0;overflow:visible
}
.step-pill{
  position:relative;flex:1;min-width:0;cursor:default;
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  padding:0;background:none;border:none;overflow:visible;
  font-size:inherit;color:inherit;white-space:normal;text-overflow:clip
}
.step-pill:not(:first-child)::before{
  content:'';position:absolute;top:13px;left:-50%;width:100%;height:2px;
  background:var(--border-mid);z-index:0;
  transition:background-color .25s var(--book-ease)
}
.step-pill.active::before,.step-pill.done::before{background:var(--teal)}
.step-num{
  position:relative;z-index:1;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-size:.75rem;font-weight:700;color:var(--muted);
  background:#fff;border:1.5px solid var(--border-mid);
  transition:background-color .2s var(--book-ease),border-color .2s var(--book-ease),color .2s var(--book-ease)
}
.step-pill.active .step-num{background:var(--navy);border-color:var(--navy);color:#fff}
.step-pill.done .step-num{background:var(--teal);border-color:var(--teal);color:transparent}
.step-pill.done .step-num::after{
  content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:.75rem;font-weight:700
}
.step-label{
  font-size:.7rem;font-weight:600;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%
}
.step-pill.active .step-label{color:var(--navy)}
.step-pill.done .step-label{color:var(--teal-dark)}
/* 6 pills in one row is tight at the smallest phones; ellipsis already
   guards against ugly wrapping, this just buys the label a little more
   breathing room before it has to truncate. */
@media(max-width:380px){
  .step-num{width:22px;height:22px;font-size:.68rem}
  .step-pill:not(:first-child)::before{top:11px}
  .step-label{font-size:.62rem}
}

/* ── Card container ────────────────────────────────────────── */
.booking-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--book-radius-lg);
  padding:1.75rem;box-shadow:var(--shadow)
}
@media(max-width:400px){.booking-card{padding:1.1rem .9rem;border-radius:var(--book-radius-md)}}

/* ── Shared "selection option" vocabulary ─────────────────────
   Seven render functions across core.js/consultant-flow.js used to emit
   seven near-identical but subtly inconsistent card recipes (2px vs 1.5px
   borders, 8/10px radii, different hover treatments). One recipe now;
   the per-class rules below only carry genuine content-shape differences
   (avatar layout, icon+price badge, space-between name/price). ────── */
.service-btn,.staff-btn,.type-btn,.md-mode-btn,.con-btn,.svc-btn,.mode-btn{
  background:#fff;border:var(--book-border);border-radius:var(--book-radius-md);
  cursor:pointer;font-family:inherit;width:100%;
  transition:border-color .18s var(--book-ease),background-color .18s var(--book-ease),transform .12s var(--book-ease)
}
.service-btn:hover,.staff-btn:hover,.type-btn:hover,.md-mode-btn:hover,.con-btn:hover,.svc-btn:hover,.mode-btn:hover,
.service-btn.selected,.staff-btn.selected,.type-btn.selected,.md-mode-btn.selected{
  border-color:var(--teal);background:var(--teal-pale)
}
.service-btn.selected,.staff-btn.selected,.type-btn.selected,.md-mode-btn.selected{
  box-shadow:0 0 0 1px var(--teal) inset
}
.service-btn:active,.staff-btn:active,.type-btn:active,.md-mode-btn:active,.con-btn:active,.svc-btn:active,.mode-btn:active{
  transform:scale(.98)
}

.service-grid{display:grid;grid-template-columns:repeat(2,minmax(130px,1fr));gap:.75rem}
@media(max-width:500px){.service-grid{grid-template-columns:1fr}}
.service-btn{text-align:left;padding:1rem}
.service-btn strong{display:block;font-size:.9rem;color:var(--navy);margin-bottom:.2rem}
.service-btn span{font-size:.78rem;color:var(--muted)}

.staff-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem}
.staff-btn{text-align:center;padding:.85rem .5rem}
.staff-btn img{width:52px;height:52px;border-radius:50%;object-fit:cover;margin-bottom:.5rem;background:var(--cream)}
.staff-btn strong{display:block;font-size:.82rem;color:var(--navy)}
.staff-btn span{font-size:.72rem;color:var(--muted)}

/* ── Calendar ──────────────────────────────────────────────── */
.cal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}
.cal-nav{
  background:none;border:var(--book-border);border-radius:var(--book-radius-sm);padding:.35rem .75rem;
  cursor:pointer;font-family:inherit;font-size:.82rem;color:var(--navy);
  transition:border-color .15s var(--book-ease),background-color .15s var(--book-ease)
}
.cal-nav:hover{border-color:var(--teal);background:var(--teal-pale)}
/* Month prev/next: bare padding leaves it ~31px tall on its own — under the
   44px touch-target floor. Bump to the floor at mobile/tablet widths only,
   so desktop's compact look is untouched. */
@media(max-width:820px){.cal-nav{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:1rem}
.cal-day-head{text-align:center;font-size:.75rem;font-weight:600;color:var(--muted);padding:.25rem 0}
.cal-day{
  text-align:center;padding:.4rem .2rem;border-radius:var(--book-radius-sm);font-size:.82rem;cursor:pointer;
  border:1px solid transparent;transition:border-color .15s var(--book-ease),background-color .15s var(--book-ease),color .15s var(--book-ease);
  min-height:44px;display:flex;align-items:center;justify-content:center
}
.cal-day.empty{cursor:default}
.cal-day.past{color:var(--border);cursor:not-allowed}
.cal-day.available:hover{border-color:var(--teal);background:var(--teal-pale);color:var(--navy)}
.cal-day.selected{background:var(--navy);color:#fff}

/* ── Time slots ────────────────────────────────────────────── */
.slots-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:.5rem;margin-top:.75rem}
.slot-btn{
  padding:.5rem;background:#fff;border:var(--book-border);border-radius:var(--book-radius-sm);font-size:.8rem;
  cursor:pointer;font-family:inherit;font-weight:500;color:var(--navy);min-height:44px;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .15s var(--book-ease),background-color .15s var(--book-ease),color .15s var(--book-ease)
}
.slot-btn:hover,.slot-btn.selected{border-color:var(--teal);background:var(--teal);color:#fff}

/* ── Forms (two parallel systems: .form-row is the older/simpler one,
   .field is the richer one with error states — both kept, harmonized) ── */
.form-row{margin-bottom:.9rem}
.form-row label{display:block;font-size:.8rem;font-weight:600;color:var(--navy);margin-bottom:.3rem}
.form-row input,.form-row textarea{
  width:100%;padding:.7rem .9rem;border:var(--book-border);border-radius:var(--book-radius-sm);font-size:1rem;
  font-family:inherit;outline:none;box-sizing:border-box;transition:border-color .18s var(--book-ease),box-shadow .18s var(--book-ease)
}
.form-row input:focus,.form-row textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(13,122,110,.12);outline:none}

.field{margin-bottom:1.1rem}
.field label{display:block;font-size:.82rem;font-weight:600;color:var(--navy);margin-bottom:.35rem;letter-spacing:.01em}
.field input,.field textarea,.field select{
  width:100%;padding:.75rem .9rem;border:var(--book-border);border-radius:var(--book-radius-sm);font-size:1rem;
  font-family:inherit;outline:none;box-sizing:border-box;transition:border-color .18s var(--book-ease),box-shadow .18s var(--book-ease);
  background:#fff;color:var(--navy);-webkit-appearance:none;appearance:none
}
/* Radio/checkbox inputs must NOT inherit the full-width, padded, appearance:none
   text-input styling above — that stretched the boxing-medical payment radios
   to full width and stripped their dot. Restore native controls everywhere a
   booking form uses them. */
.field input[type=radio],.field input[type=checkbox],.form-row input[type=radio],.form-row input[type=checkbox]{
  width:auto;min-height:0;padding:0;border:0;border-radius:0;background:none;
  -webkit-appearance:auto;appearance:auto;box-shadow:none;flex:0 0 auto;flex-shrink:0;accent-color:var(--teal)
}
.field input[type=radio]:focus,.field input[type=checkbox]:focus,.form-row input[type=radio]:focus,.form-row input[type=checkbox]:focus{box-shadow:none}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(13,122,110,.12)}
.field input::placeholder,.field textarea::placeholder{color:#7a8896}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234a5568' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .85rem center;padding-right:2.5rem
}
.field.error input,.field.error textarea,.field.error select{border-color:#e53e3e;box-shadow:0 0 0 3px rgba(229,62,62,.1)}
.field.error .field-error{display:block;font-size:.75rem;color:#e53e3e;margin-top:.3rem;font-weight:500}
.field-error{display:none}

/* ── Summary, payment, confirm ─────────────────────────────── */
.booking-summary{
  background:var(--cream);border:1px solid var(--border);border-radius:var(--book-radius-sm);
  padding:1rem;margin-bottom:1.25rem;font-size:.875rem;line-height:1.9
}
.booking-summary strong{color:var(--navy)}
.payment-element-wrap{background:#fff;border:var(--book-border);border-radius:var(--book-radius-sm);padding:1.1rem;margin-bottom:1rem}
.amount-badge{display:inline-block;background:var(--navy);color:#fff;border-radius:var(--book-radius-sm);padding:.3rem .85rem;font-size:.82rem;font-weight:600;margin-bottom:1rem}
.secure-badge{font-size:.72rem;color:var(--muted);text-align:center;margin-top:.6rem}
.secure-badge span{color:var(--teal);font-weight:600}

.btn-book-confirm{
  width:100%;padding:.9rem;background:var(--teal);color:#fff;border:none;border-radius:var(--book-radius-sm);
  font-size:1rem;font-weight:600;cursor:pointer;font-family:inherit;
  transition:background-color .18s var(--book-ease),transform .12s var(--book-ease)
}
.btn-book-confirm:hover{background:var(--teal-dark)}
.btn-book-confirm:active:not(:disabled){transform:scale(.98)}
.btn-book-confirm:disabled{background:var(--muted);cursor:wait}

.back-link{
  font-size:.85rem;color:var(--teal);cursor:pointer;text-decoration:none;margin-bottom:1.25rem;
  display:inline-flex;align-items:center;gap:.35rem;padding:.3rem 0;min-height:44px;line-height:1;
  transition:gap .15s var(--book-ease)
}
.back-link:hover{gap:.5rem}

/* ── Status / feedback ─────────────────────────────────────── */
.error-msg{
  background:#fee;border:1px solid #fbb;border-radius:var(--book-radius-sm);padding:.85rem 1rem;font-size:.875rem;
  color:#c00;margin-bottom:1rem;display:flex;align-items:flex-start;gap:.6rem;line-height:1.5
}
.error-msg::before{content:"";flex-shrink:0;font-size:1rem}
.ha-cal-day:hover,.unified-date-btn:hover{opacity:.85;cursor:pointer}
.ha-slot-btn,.unified-slot-btn{min-height:44px;display:flex;align-items:center;justify-content:center}
.ha-slot-btn:hover:not([disabled]),.unified-slot-btn:hover:not([disabled]){border-color:var(--teal)!important;background:var(--teal-pale)!important;color:var(--teal-dk)!important}
.loading-dots{display:inline-block}
.loading-dots::after{content:'...';animation:dots 1.2s steps(4,end) infinite}
@keyframes dots{0%,20%{content:'.'}40%{content:'..'}60%,100%{content:'...'}}
@keyframes spin{to{transform:rotate(360deg)}}
.spin{animation:spin 1s linear infinite;transform-origin:center}
.success-check{font-size:2.5rem;text-align:center;margin-bottom:.75rem}

/* ── Appointment "type" tiles (imaging/vaccination/etc. choice grid) ── */
.type-grid{display:grid;grid-template-columns:1fr;gap:.75rem;margin-top:1rem;align-items:stretch}
@media(min-width:580px){.type-grid{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.type-grid{grid-template-columns:1fr 1fr 1fr}}
.type-btn{
  text-align:left;padding:1.25rem 1.1rem;height:100%;box-sizing:border-box;min-width:0;overflow-wrap:anywhere
}
.type-btn .type-icon{font-size:1.6rem;margin-bottom:.5rem;display:block}
.type-btn strong{display:block;font-size:.95rem;color:var(--navy);margin-bottom:.25rem}
.type-btn span{font-size:.78rem;color:var(--muted);line-height:1.5}
.type-btn .type-price{display:inline-block;margin-top:.5rem;font-size:.75rem;font-weight:600;color:var(--teal);background:var(--teal-pale);padding:.15rem .5rem;border-radius:4px}
.type-btn--featured{border-color:var(--teal);border-width:2px;box-shadow:0 0 0 4px var(--teal-pale),var(--shadow-md)}
.type-group-label{font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin:1.1rem 0 .5rem}
.type-external-cue{display:block;margin-top:.35rem;font-size:.72rem;color:var(--muted);font-weight:600}

/* ── Medesk browse (mode choice + item list + iframe) ─────────── */
.md-mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:.75rem}
@media(max-width:480px){.md-mode-grid{grid-template-columns:1fr}}
.md-mode-btn{padding:1rem;text-align:left}
.md-mode-btn strong{display:block;font-size:.875rem;color:var(--navy);margin-bottom:.2rem}
.md-mode-btn span{font-size:.78rem;color:var(--muted)}
.md-item-grid{display:grid;grid-template-columns:1fr;gap:.5rem;margin-top:.75rem;max-height:420px;overflow-y:auto}
.md-item-btn{
  display:flex;align-items:center;justify-content:space-between;padding:.85rem 1rem;background:#fff;
  border:var(--book-border);border-radius:var(--book-radius-md);cursor:pointer;font-family:inherit;width:100%;text-align:left;
  transition:border-color .18s var(--book-ease),background-color .18s var(--book-ease)
}
.md-item-btn:hover{border-color:var(--teal);background:var(--teal-pale)}
.md-item-btn .md-name{font-size:.88rem;font-weight:600;color:var(--navy)}
.md-item-btn .md-sub{font-size:.76rem;color:var(--muted);margin-top:.15rem}
.md-item-btn .md-arrow{font-size:.9rem;color:var(--teal);flex-shrink:0;margin-left:.75rem}
.md-iframe-wrap{margin-top:1rem;border-radius:var(--book-radius-md);overflow:hidden;border:1px solid var(--border);background:#f8fafc;position:relative;min-height:640px}
.md-iframe-wrap iframe{display:block;width:100%;height:640px;border:0}
@media(max-width:540px){
  /* Mobile: shrink the iframe container so the Setmore widget fills the
     viewport without forcing 2× scroll height; users still get a clear
     CTA + 1–2 dates in view, and the widget itself scrolls internally. */
  .md-iframe-wrap{min-height:520px}
  .md-iframe-wrap iframe{height:520px}
}
.md-loader{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;background:#f8fafc;z-index:1;transition:opacity .3s}
.md-loader svg{animation:stm-spin 1s linear infinite}
@keyframes stm-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ── Catalogue browse (search + list) ──────────────────────── */
.cat-search{
  width:100%;padding:.65rem .9rem;border:var(--book-border);border-radius:var(--book-radius-md);font-size:.9rem;
  font-family:inherit;color:var(--navy);margin-bottom:.85rem;outline:none;box-sizing:border-box;
  transition:border-color .18s var(--book-ease)
}
.cat-search:focus{border-color:var(--teal)}
.cat-list{display:flex;flex-direction:column;gap:.5rem;max-height:480px;overflow-y:auto}
.cat-item{
  display:flex;align-items:center;justify-content:space-between;padding:.8rem 1rem;background:#fff;
  border:var(--book-border);border-radius:var(--book-radius-md);cursor:pointer;text-decoration:none;
  transition:border-color .15s var(--book-ease),background-color .15s var(--book-ease)
}
.cat-item:hover{border-color:var(--teal);background:var(--teal-pale)}
.cat-item-name{font-size:.875rem;font-weight:600;color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.cat-item-price{font-size:.8rem;color:var(--teal);font-weight:500;white-space:nowrap;margin-left:.75rem}
.cat-item-arrow{font-size:.9rem;color:var(--teal);margin-left:.5rem;flex-shrink:0}
.cat-info{
  position:relative;flex-shrink:0;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--teal);
  background:#fff;color:var(--teal);font-size:.85rem;font-weight:700;font-style:italic;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;font-family:Georgia,serif;padding:0;
  -webkit-tap-highlight-color:transparent;transition:background-color .15s var(--book-ease),color .15s var(--book-ease)
}
.cat-info:hover,.cat-info:focus{background:var(--teal);color:#fff;outline:none}
/* 28px visual size is deliberate (inline "i" affordance next to the item
   name) but that's under the 44px touch floor. Extend the hit area with an
   invisible pseudo-element rather than growing the circle — biased right/
   top/bottom since the left edge sits only .45rem from the item name's own
   tap target and must not steal its clicks. */
.cat-info::after{content:'';position:absolute;top:-8px;right:-16px;bottom:-8px;left:0}
.cat-empty{font-size:.85rem;color:var(--muted);padding:1rem 0;text-align:center}

/* ── Consultant booking ────────────────────────────────────── */
.con-avail{font-size:.72rem;color:var(--teal);font-weight:600;white-space:nowrap;margin-left:.75rem}
.con-avatar{
  position:relative;flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:var(--teal-pale);
  display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;color:var(--teal);
  overflow:hidden;line-height:1
}
.con-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.con-id{display:flex;align-items:center;gap:.7rem;min-width:0}
.con-id-text{display:flex;flex-direction:column;min-width:0}
.con-btn{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;padding:.85rem 1rem;text-align:left}
.con-cal-day{border:none;cursor:pointer;font-family:inherit}
.con-list{display:flex;flex-direction:column;gap:.6rem}
.con-name{font-weight:600;font-size:.9rem;color:var(--navy)}
.con-role{font-size:.78rem;color:var(--muted);margin-top:.15rem}
.con-slot-btn{cursor:pointer;transition:all .12s var(--book-ease)}
.con-unavail{font-size:.72rem;color:var(--muted);white-space:nowrap;margin-left:.75rem}

.enquire-actions{display:flex;flex-direction:column;gap:.75rem;margin-top:1.5rem}
.enquire-box{text-align:center;padding:1.5rem 0}
.enquire-btn{
  display:flex;align-items:center;justify-content:center;gap:.6rem;padding:.85rem 1.25rem;border-radius:var(--book-radius-sm);
  font-family:inherit;font-size:.9rem;font-weight:600;cursor:pointer;text-decoration:none;border:none;
  transition:transform .12s var(--book-ease),box-shadow .12s var(--book-ease)
}
.enquire-btn:hover{transform:translateY(-1px)}
.enquire-btn-green{background:#25D366;color:#fff}
.enquire-btn-navy{background:var(--navy);color:#fff}
.enquire-btn-outline{background:#fff;color:var(--navy);border:var(--book-border)}

.mode-btn{padding:1.1rem 1rem;text-align:left}
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:1.25rem}
.svc-btn{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;padding:.85rem 1rem;text-align:left}
.svc-desc{font-size:.78rem;color:var(--muted);margin-top:.2rem;line-height:1.5}
.svc-list{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.25rem}
.svc-name{font-weight:600;font-size:.9rem;color:var(--navy)}
.svc-price{font-weight:700;color:var(--teal);white-space:nowrap;font-size:.95rem}

/* ── Mobile-specific fixes for HA booking flow ───────────────
   Functional touch-target/layout fixes, not a look-and-feel issue —
   left as-is, just relocated out of the single dumping-ground block. */
@media(max-width:540px){
  .ha-slot-grid-am,.ha-slot-grid-pm{grid-template-columns:repeat(2,1fr) !important}
  .ha-slot-btn,.unified-slot-btn{min-height:48px !important;font-size:.9rem !important}
  .ha-cal-day,.unified-date-btn{min-height:52px !important}
  #ha-pay-btn,.btn-book-confirm{font-size:1rem !important;padding:1rem !important}
  .ha-next-cols{flex-direction:column !important;gap:.6rem !important}
  .ha-next-day{min-width:100% !important}
  .ha-next-day-slots{display:flex;flex-wrap:wrap;gap:.35rem}
  .boxing-pay-label{padding:.6rem .75rem !important}
  .boxing-pay-inner{font-size:.82rem !important}
  .ha-cal-day{min-height:36px;display:flex;align-items:center;justify-content:center}
  .ha-form-summary{flex-direction:column !important;gap:.35rem}
  .ha-form-price{margin-left:0 !important}
  .mode-grid{grid-template-columns:1fr}
  .con-list .con-btn{flex-wrap:wrap}
}

/* ── Reduced motion ────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .booking-wrap *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}