/* ============================================================
   booking.css — appointment booking widget

   EVERY selector in this file is prefixed `.rb-`. That is not cosmetic:
   styles.css's @media (max-width: 768px) block overrides desktop rules with
   !important throughout, and a two-column card that has to collapse is exactly
   the thing that gets caught in that fight. Nothing here shares a class name
   with the shared system, so nothing here can be overridden by it, and this
   file is loaded AFTER styles.css on every page that uses it.

   It deliberately does NOT restyle .form-group / .custom-form — the widget's
   form reuses those from styles.css so the floating-label behaviour and focus
   treatment match the rest of the site exactly.

   Tokens come from :root in styles.css. Never a literal where a token exists.
   ============================================================ */

/* ---------- Card shell ---------- */

/* The flip host owns the perspective. Without it the rotation is a flat
   squash rather than a card turning over. */
.rb-flip-host { perspective: 1600px; }

.rb-card {
  background: var(--bg-primary);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  max-width: 940px;
  margin: 0 auto;
  transform-origin: center;
  transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mid-flip. Rather than stacking two absolutely-positioned faces — which
   would force a fixed height on a card whose height changes with the number
   of slots — we rotate to edge-on, swap the content while it is invisible,
   then rotate back. Same effect, no layout compromise. */
.rb-card.rb-flipping { transform: rotateY(90deg); }

/* ---------- Traffic lights ---------- */

.rb-lights {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 3;
}

.rb-light {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.55;
  transition: var(--transition-fast);
  position: relative;
}

.rb-light:hover { opacity: 1; transform: scale(1.15); }
.rb-light:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; opacity: 1; }

.rb-light-red    { background: #ff5f57; }
.rb-light-yellow { background: #febc2e; }
.rb-light-green  { background: #28c840; }

/* The whole cluster lifts on hover — the tell that they are actually live. */
.rb-lights:hover .rb-light { opacity: 1; }

/* Top-left, as on a real window — which also keeps them clear of the modal's
   close button in the opposite corner, so no offset is needed. */

/* ---------- Step indicator ---------- */

.rb-steps {
  position: relative; /* anchors .rb-lights */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 14px 20px;
  min-height: 58px; /* kept in step with .rb-contact-head */
  box-sizing: border-box;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
  background: var(--bg-secondary);
}

.rb-step {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  transition: var(--transition-fast);
}

/* Numbered badge. Big enough to read as a step marker rather than a bullet,
   and it carries the state: outlined = pending, filled blue = current,
   filled green with a tick = done. */
.rb-step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 2px solid rgba(15, 23, 42, 0.13);
  background: var(--bg-primary);
  color: var(--text-muted);
  transition: var(--transition-smooth);
}

.rb-step-num i { width: 15px; height: 15px; }

.rb-step-label {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: var(--transition-fast);
}

/* Each step owns a brand colour for its whole life — step one orange, step two
   blue — echoing the panel's orange-top / blue-bottom rules. State is carried
   by FILL, not by hue: outlined = not there yet, solid = you are here or done.
   That keeps the colour coding stable while still showing progress. */

.rb-step[data-step='time'] .rb-step-num {
  border-color: rgba(255, 107, 0, 0.3);
  background: rgba(255, 107, 0, 0.05);
  color: var(--accent-orange);
}
.rb-step[data-step='time'] .rb-step-label { color: var(--accent-orange); }

.rb-step[data-step='info'] .rb-step-num {
  border-color: rgba(0, 98, 255, 0.3);
  background: rgba(0, 98, 255, 0.05);
  color: var(--accent-blue);
}
.rb-step[data-step='info'] .rb-step-label { color: var(--accent-blue); }

/* Step one stays OUTLINED throughout — never a solid orange disc. It reads as
   active through a heavier border and the pulsing ring rather than a fill. */
.rb-step[data-step='time'][aria-current='step'] .rb-step-num {
  background: rgba(255, 107, 0, 0.08);
  border-color: var(--accent-orange);
  color: var(--accent-orange);
  animation: rbPulseOrange 2.4s ease-in-out infinite;
}

/* Step two is the one that fills, marking the end of the journey. */
.rb-step[data-step='info'][aria-current='step'] .rb-step-num {
  background: var(--grad-primary);
  border-color: transparent;
  color: #ffffff;
  animation: rbPulseBlue 2.4s ease-in-out infinite;
}

/* Completed — still outlined, tick in orange */
.rb-step.rb-done .rb-step-num {
  background: rgba(255, 107, 0, 0.08);
  border-color: var(--accent-orange);
  color: var(--accent-orange);
  box-shadow: none;
}
.rb-step.rb-done .rb-step-label { opacity: 0.75; }

@keyframes rbPulseOrange {
  0%, 100% { box-shadow: 0 4px 12px rgba(255, 107, 0, 0.28), 0 0 0 0 rgba(255, 107, 0, 0.24); }
  50%      { box-shadow: 0 4px 12px rgba(255, 107, 0, 0.28), 0 0 0 7px rgba(255, 107, 0, 0); }
}
@keyframes rbPulseBlue {
  0%, 100% { box-shadow: 0 4px 12px rgba(0, 98, 255, 0.28), 0 0 0 0 rgba(0, 98, 255, 0.24); }
  50%      { box-shadow: 0 4px 12px rgba(0, 98, 255, 0.28), 0 0 0 7px rgba(0, 98, 255, 0); }
}

/* The connector runs orange to blue once step one is behind you. */
.rb-step-rule {
  width: 54px;
  height: 2px;
  border-radius: 2px;
  background: rgba(15, 23, 42, 0.1);
  margin: 0 12px;
  transition: var(--transition-smooth);
}

.rb-steps.rb-advanced .rb-step-rule {
  background: linear-gradient(90deg, var(--accent-orange) 0%, var(--accent-blue) 100%);
}

/* ---------- Body grid ---------- */

/* Both halves exactly equal — minmax(0,1fr) rather than a bare 1fr so the slot
   list can't blow the column out past 50% when a long time label appears.
   min-height is shared with .rb-contact-body so both faces of the card are the
   same size; the calendar always renders six week rows, so this number is
   stable across months rather than something that moves under it. */
.rb-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  /* Grows with the viewport so the card fills the screen and the footer stays
     below the fold on tall displays, with a floor so it never collapses on
     short ones. 300px is the page chrome above and below it (header padding,
     badge, title, gap, step bar, fixed footer bar). */
  min-height: max(516px, calc(100vh - 300px));
}

/* ---------- Left panel (light) ----------
   White surface carrying both brand accents as rules: orange along the top,
   blue along the bottom. Those two lines are the only thing separating the
   panel from the pane beside it, so they are structural, not decoration —
   don't drop them and expect the layout to still read as two halves. */

.rb-panel {
  background: var(--bg-primary);
  border-top: 3px solid var(--accent-blue);
  border-bottom: 3px solid var(--accent-orange);
  border-right: 1px solid rgba(15, 23, 42, 0.06);
  padding: 16px;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rb-organiser {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rb-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(0, 98, 255, 0.18);
  background: rgba(0, 98, 255, 0.05);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent-blue);
  flex-shrink: 0;
}

.rb-organiser-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.rb-organiser-role {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.rb-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.25;
}

.rb-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.rb-meta span { display: inline-flex; align-items: center; gap: 6px; }
.rb-meta i { width: 12px; height: 12px; }

/* ---------- Calendar ---------- */

.rb-cal { margin-top: auto; }

.rb-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.rb-cal-month {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.rb-cal-nav {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(15, 23, 42, 0.015);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
}

.rb-cal-nav:hover:not(:disabled) {
  background: rgba(0, 98, 255, 0.06);
  border-color: rgba(0, 98, 255, 0.25);
  color: var(--accent-blue);
}
.rb-cal-nav:disabled { opacity: 0.3; cursor: not-allowed; }
.rb-cal-nav i { width: 15px; height: 15px; }

.rb-cal-dow,
.rb-cal-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.rb-cal-dow {
  margin-bottom: 6px;
}

.rb-cal-dow span {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 4px 0;
}

.rb-day {
  aspect-ratio: 1;
  min-height: 25px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.76rem;
  cursor: pointer;
  transition: var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rb-day:hover:not([aria-disabled='true']) {
  background: rgba(0, 98, 255, 0.06);
  color: var(--accent-blue);
}

.rb-day:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 1px;
}

/* Unavailable days stay focusable so a keyboard user can traverse the month,
   but they are inert and are marked aria-disabled rather than [disabled].
   The strike-through means availability is never signalled by colour alone. */
.rb-day[aria-disabled='true'] {
  color: var(--text-muted);
  cursor: default;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* Selected day inverts to the brand gradient — on a white panel this is the
   only treatment with enough weight to read as "chosen" at a glance. */
.rb-day[aria-selected='true'] {
  background: var(--grad-primary);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 98, 255, 0.15);
}

.rb-day[aria-selected='true']:hover { color: #ffffff; }

.rb-day.rb-empty { visibility: hidden; }

.rb-cal-note {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------- Right pane (light) ---------- */

/* The pane mirrors the panel's rules — orange on top, blue below — so the two
   halves bracket each other rather than repeating. */
.rb-pane {
  border-top: 3px solid var(--accent-orange);
  border-bottom: 3px solid var(--accent-blue);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.rb-field-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.rb-fieldset { border: 0; padding: 0; margin: 0; }
.rb-fieldset legend {
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* Segmented control. Real radios, visually hidden — that buys arrow-key
   navigation, focus management and form semantics for free, where a
   role="radiogroup" of buttons would be all of that hand-rolled. */
.rb-segmented { display: inline-flex; gap: 0; }

.rb-segmented input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* All four buttons are the same size regardless of their label — "30 mins"
   and "Phone" are different lengths, so without a shared min-width the two
   groups would sit at different widths beside each other. */
.rb-segmented label {
  padding: 0 12px;
  min-width: 94px;
  height: 36px;
  box-sizing: border-box;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(15, 23, 42, 0.015);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

/* flex-shrink guards the icon against being squashed by the fixed height. */
.rb-segmented label i,
.rb-segmented label svg { width: 13px; height: 13px; flex-shrink: 0; }
.rb-segmented label:first-of-type {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.rb-segmented label:last-of-type {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  border-left: 0;
}

.rb-segmented input:checked + label {
  background: rgba(0, 98, 255, 0.06);
  border-color: rgba(0, 98, 255, 0.25);
  color: var(--accent-blue);
}

.rb-segmented input:focus-visible + label {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}

.rb-controls { display: flex; flex-wrap: wrap; gap: 18px 24px; }

.rb-tz select {
  width: 100%;
  max-width: 280px;
  padding: 9px 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  color: var(--accent-blue);
  font-family: var(--font-body);
  font-size: 0.82rem;
  cursor: pointer;
  outline: none;
  transition: var(--transition-fast);
}
.rb-tz select:focus { border-color: var(--accent-blue); box-shadow: 0 0 8px rgba(0, 98, 255, 0.1); }

/* ---------- Slots ---------- */

.rb-slots-region {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.rb-slots-head {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.rb-slots-head strong { color: var(--text-primary); font-weight: 600; }

.rb-slots {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  max-height: 316px;
  padding-right: 4px;
}

.rb-slot {
  width: 100%;
  padding: 9px 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  animation: fadeUpIn 0.3s ease both;
}

.rb-slot:hover {
  border-color: rgba(0, 98, 255, 0.25);
  background: rgba(0, 98, 255, 0.03);
  color: var(--accent-blue);
  transform: translateY(-1.5px);
  box-shadow: 0 4px 12px rgba(0, 98, 255, 0.1);
}

.rb-slot:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }

/* "+1 day" when the visitor's zone puts a Melbourne slot on another date. */
.rb-slot-shift {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

/* ---------- Loading / empty / error ---------- */

.rb-shimmer {
  height: 44px;
  border-radius: var(--radius-md);
  background: linear-gradient(90deg,
    rgba(15, 23, 42, 0.03) 25%,
    rgba(15, 23, 42, 0.06) 50%,
    rgba(15, 23, 42, 0.03) 75%);
  background-size: 200% 100%;
  animation: rbShimmer 1.4s ease-in-out infinite;
}

@keyframes rbShimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

.rb-state {
  padding: 24px 0;
  text-align: center;
  animation: fadeUpIn 0.3s ease both;
}

.rb-state-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: 8px;
}

.rb-state-eyebrow.rb-err { color: #ef4444; }

.rb-state p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0 0 14px;
}

.rb-fallback {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 12px;
}
.rb-fallback a { color: var(--accent-blue); text-decoration: none; }
.rb-fallback a:hover { text-decoration: underline; }

/* ---------- Form (step 2) ---------- */

.rb-summary {
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: rgba(0, 98, 255, 0.03);
  border: 1px solid rgba(0, 98, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--text-primary);
}
.rb-summary i { width: 15px; height: 15px; color: var(--accent-blue); flex-shrink: 0; }

/* The honeypot. Off-screen rather than display:none — some bots skip hidden
   fields but happily fill positioned ones. Never focusable by a real user. */
.rb-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.rb-actions { display: flex; gap: 10px; align-items: center; }
.rb-actions .btn { flex: 1; justify-content: center; }

.rb-back {
  background: none;
  border: none;
  padding: 8px 4px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition-fast);
}
.rb-back:hover { color: var(--accent-blue); }
.rb-back i { width: 14px; height: 14px; }

.rb-privacy {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ---------- Confirmation ---------- */

.rb-done-state { text-align: center; padding: 20px 0; animation: fadeUpIn 0.4s ease both; }
.rb-done-state h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 0 0 6px;
}
.rb-done-when {
  font-size: 1rem;
  color: var(--text-primary);
  font-weight: 500;
  margin-bottom: 4px;
}
.rb-done-tz {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 18px;
}
.rb-done-state p { font-size: 0.88rem; color: var(--text-secondary); margin: 0 0 14px; }
.rb-ref {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-top: 16px;
}

/* ---------- Modal shell ----------
   z-index 10000 is deliberate: styles.css:2284 already uses 9999 !important
   for the mobile nav drawer, and the booking modal has to sit above it. */

/* ---------- Contact face (the flip side) ---------- */

/* min-height matches .rb-steps (24px padding + a 30px step badge) so both
   faces have an identically sized header and the card doesn't change height
   when it flips. */
.rb-contact-head {
  position: relative; /* anchors .rb-lights */
  padding: 14px 20px;
  min-height: 58px; /* .rb-steps measures 79px including its border — match exactly */
  box-sizing: border-box;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
}

.rb-contact-head i { width: 17px; height: 17px; color: var(--accent-orange); }

.rb-contact-head span {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-orange);
}

/* Geometry identical to the booking face — same 50/50 split, same 28px
   padding, same hairline divider, same min-height — so the card is exactly the
   same size on both sides and nothing shifts when you flip. Padding lives on
   the columns, never on this grid, or the two faces stop lining up. */
.rb-contact-body {
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  min-height: max(516px, calc(100vh - 300px)); /* must match .rb-body */
}

/* Accent rules per column, mirroring the booking face: this side runs
   orange-top on the left and blue-top on the right — the reverse of the front,
   so turning the card visibly turns the colours over with it. */
.rb-contact-intro {
  padding: 20px;
  min-width: 0;
  border-top: 3px solid var(--accent-orange);
  border-bottom: 3px solid var(--accent-blue);
  border-right: 1px solid rgba(15, 23, 42, 0.06);
}

/* No padding — the chat sits flush in this column. */
.rb-contact-col {
  padding: 0;
  min-width: 0;
  display: flex;
  border-top: 3px solid var(--accent-blue);
  border-bottom: 3px solid var(--accent-orange);
}

/* ---------- Consultation chat ----------
   The same assistant as contact.html — same /api/chat endpoint, same `sales`
   persona, same [PROMPT_DECISION] handshake. Only the shell differs, because
   contact.html's chat styles live in its own inline <style> block and are not
   available on any other page. */

/* Embedded, not a card inside a card: no border, no radius, no inset
   background. It fills its column edge to edge and its own head/log/bar
   supply the padding. */
.rb-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 470px;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: hidden;
}

.rb-chat-head {
  padding: 16px 20px;
  background: transparent;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.rb-chat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 10px var(--accent-green);
  animation: rbChatPulse 2s infinite;
}

@keyframes rbChatPulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }

.rb-chat-log {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
}

.rb-msg { max-width: 88%; animation: fadeUpIn 0.3s ease both; }
.rb-msg.agent { align-self: flex-start; }
.rb-msg.user { align-self: flex-end; }
.rb-msg.system { align-self: center; max-width: 100%; }

.rb-bubble {
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 0.86rem;
  line-height: 1.55;
}

.rb-msg.agent .rb-bubble {
  background: var(--bg-primary);
  border: 1px solid rgba(15, 23, 42, 0.07);
  color: var(--text-primary);
  border-bottom-left-radius: 4px;
}

.rb-msg.user .rb-bubble {
  background: var(--grad-primary);
  color: #ffffff;
  border-bottom-right-radius: 4px;
}

.rb-msg.system .rb-bubble {
  background: rgba(15, 23, 42, 0.03);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  text-align: center;
}

.rb-msg.system .rb-bubble.rb-ok {
  background: rgba(16, 185, 129, 0.07);
  color: var(--accent-green);
}

.rb-typing { display: flex; gap: 4px; padding: 13px 14px; }

.rb-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: rbTyping 1.2s infinite;
}
.rb-typing span:nth-child(2) { animation-delay: 0.15s; }
.rb-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes rbTyping {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-3px); }
}

.rb-chat-bar {
  display: flex;
  gap: 8px;
  padding: 12px;
  background: var(--bg-primary);
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.rb-chat-bar input {
  flex: 1;
  min-width: 0;
  padding: 10px 13px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--radius-md);
  background: rgba(15, 23, 42, 0.015);
  font-family: var(--font-body);
  font-size: 0.86rem;
  color: var(--text-primary);
  outline: none;
  transition: var(--transition-fast);
}

.rb-chat-bar input:focus {
  background: var(--bg-primary);
  border-color: var(--accent-blue);
  box-shadow: 0 0 8px rgba(0, 98, 255, 0.1);
}

.rb-chat-send {
  width: 40px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--grad-primary);
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
  flex-shrink: 0;
}
.rb-chat-send:hover:not(:disabled) { transform: translateY(-1.5px); box-shadow: 0 4px 12px rgba(0, 98, 255, 0.25); }
.rb-chat-send:disabled { opacity: 0.4; cursor: not-allowed; }
.rb-chat-send i { width: 16px; height: 16px; }

.rb-decision { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.rb-decision .btn { width: auto; padding: 9px 15px; }

@media (max-width: 768px) {
  .rb-chat { height: 380px; }
}

.rb-contact-intro h3 {
  font-family: var(--font-display);
  /* Matches .rb-title on the front face — same role, same size. */
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 0 0 10px;
}

.rb-contact-intro p {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 18px;
}

.rb-contact-list { display: flex; flex-direction: column; gap: 10px; }

.rb-contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: var(--transition-fast);
}

.rb-contact-item:hover { color: var(--accent-blue); }
.rb-contact-item i { width: 15px; height: 15px; color: var(--accent-blue); flex-shrink: 0; }

.rb-contact-hint {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.7;
}

@media (max-width: 768px) {
  .rb-contact-body {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  /* Stacked, the two halves set their own height — the viewport maths above
     only makes sense side by side. */
  .rb-body { min-height: 0; }
  /* Stacked, the intro's blue bottom rule is the divider; the chat column's
     own blue top rule would double it, so drop that one. */
  .rb-contact-intro {
    padding: 22px;
    border-right: none;
  }
  .rb-contact-col {
    padding: 0;
    border-top: none;
  }
}

/* ---------- Modal shell ----------
   z-index 10000 is deliberate: styles.css:2284 already uses 9999 !important
   for the mobile nav drawer, and the booking modal has to sit above it. */

.rb-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(7, 10, 19, 0.55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.rb-overlay.rb-open { opacity: 1; pointer-events: auto; }

.rb-modal {
  position: relative;
  width: 100%;
  max-width: 940px;
  max-height: 90dvh;
  overflow-y: auto;
  transform: translateY(12px);
  transition: var(--transition-smooth);
}

.rb-overlay.rb-open .rb-modal { transform: translateY(0); }

.rb-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: var(--bg-primary);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
}
.rb-close:hover { color: var(--text-primary); border-color: rgba(15, 23, 42, 0.2); }
.rb-close i { width: 16px; height: 16px; }

/* ---------- Mobile ---------- */

@media (max-width: 768px) {
  .rb-body { grid-template-columns: 1fr; min-height: 0; }

  /* Keep BOTH accent rules when stacked — the orange bottom border doubles as
     the divider between panel and pane, so it must stay 3px, not thin out. */
  .rb-panel {
    border-right: none;
    border-bottom: 3px solid var(--accent-orange);
    padding: 22px;
  }

  .rb-cal { margin-top: 18px; }

  /* Stacked, the panel's orange bottom rule already divides the two halves —
     the pane's own orange top rule would sit directly on it and read as one
     6px band, so drop it and keep only the blue close. */
  .rb-pane {
    border-top: none;
    padding: 22px;
  }

  /* The page scrolls, not an inner div — an inner scroller inside a bottom
     sheet traps the gesture and feels broken on iOS. */
  .rb-slots {
    max-height: none;
    overflow-y: visible;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .rb-slot { min-height: 44px; }
  .rb-day { min-height: 40px; }
  .rb-controls { gap: 14px; }
  .rb-step-rule { width: 28px; margin: 0 8px; }

  /* Modal becomes a bottom sheet. dvh, not vh — the site's heroes already use
     it for the same reason: mobile browser chrome makes vh lie. */
  .rb-overlay { padding: 0; align-items: flex-end; }
  .rb-modal { max-height: 92dvh; }
  .rb-modal .rb-card { border-radius: 16px 16px 0 0; border-bottom: none; }
}

@media (max-width: 420px) {
  .rb-slots { grid-template-columns: 1fr; }
  .rb-segmented label { padding: 9px 12px; font-size: 0.8rem; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .rb-overlay,
  .rb-modal,
  .rb-slot,
  .rb-state,
  .rb-done-state,
  .rb-step-num,
  .rb-step-rule {
    transition: none;
    animation: none;
  }
  .rb-slot:hover { transform: none; }
  .rb-shimmer { animation: none; }
  /* The pulsing ring is the liveliest thing on the card, so it is also the
     first thing to drop when motion is unwelcome. */
  .rb-step[aria-current='step'] .rb-step-num { animation: none; }
}