/*
 * 3.25.272 -- Pediatric People modern booking widget skin.
 *
 * Loaded only when cs_booking_widget_design === 'modern' (or the URL
 * has ?cs_design=modern). Selectors target the actual classes that
 * public/js/booking-widget.js emits, including BEM modifiers like
 * cs-booking__time-slot--selected.
 */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,400;9..144,500;9..144,600;9..144,700&family=Geist:wght@400;500;600;700&display=swap');

.cs-booking--modern {
  --cm-cy: #00AEEF;
  --cm-cy-2: #00C8FF;
  --cm-mg: #EC008C;
  --cm-ink: #0a1628;
  --cm-paper: #FAFAF7;
  --cm-paper-2: #f3f4f0;
  --cm-line: #e5e7eb;
  --cm-muted: #6b7280;
  --cm-shadow-ink: 0 6px 20px -8px rgba(10,22,40,.45);
  --cm-shadow-cyan: 0 10px 28px -10px rgba(0,174,239,.55);

  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
  color: var(--cm-ink) !important;
  background: var(--cm-paper) !important;
  border-radius: 22px;
  padding: 22px 26px 26px;
  max-width: 560px;
  margin: 0 auto;
  -webkit-font-smoothing: antialiased;
  box-shadow: 0 20px 60px -28px rgba(10,22,40,.18);
}

/* ===== Typography ===== */
.cs-booking--modern h1,
.cs-booking--modern h2,
.cs-booking--modern h3 {
  font-family: 'Fraunces', 'Newsreader', Georgia, serif !important;
  font-weight: 500 !important;
  letter-spacing: -.022em !important;
  color: var(--cm-ink) !important;
  font-variation-settings: "opsz" 80, "SOFT" 30, "WONK" 0;
  margin: 4px 0 10px !important;
}
.cs-booking--modern h1 { font-size: clamp(28px, 6.5vw, 38px) !important; line-height: 1.06; }
.cs-booking--modern h2 { font-size: clamp(24px, 5.5vw, 32px) !important; line-height: 1.1; }
.cs-booking--modern h3 { font-size: 18px !important; line-height: 1.25; }
.cs-booking--modern h1 em,
.cs-booking--modern h2 em,
.cs-booking--modern h3 em {
  font-style: italic;
  color: var(--cm-mg);
  font-variation-settings: "opsz" 80, "SOFT" 100, "WONK" 1;
}
.cs-booking--modern p { color: var(--cm-muted); line-height: 1.55; font-size: 14.5px; }
.cs-booking--modern strong { color: var(--cm-ink); font-weight: 600; }
.cs-booking--modern .cs-modern-eyebrow {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cm-cy); font-weight: 600; margin: 4px 0 6px;
}

/* ===== Header / nav / step indicator ===== */
.cs-booking--modern .cs-booking__header {
  background: transparent !important;
  padding: 4px 0 14px !important;
  border-bottom: none !important;
  margin-bottom: 4px;
  display: flex !important;
  align-items: center !important;
  gap: 12px;
}
.cs-booking--modern .cs-booking__nav-btn,
.cs-booking--modern .cs-booking__navigation button {
  background: var(--cm-paper-2) !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 0 !important;
  width: 40px;
  height: 40px;
  color: var(--cm-ink) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none !important;
  transition: background .18s;
}
.cs-booking--modern .cs-booking__nav-btn:hover { background: #e9eae5 !important; }

.cs-booking--modern .cs-booking__step-indicator {
  display: flex !important;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: center;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  margin: 0 !important;
}
.cs-booking--modern .cs-booking__step-indicator > * { background: transparent !important; }
.cs-booking--modern .cs-booking__step-dot,
.cs-booking--modern .cs-booking__step-dot-circle {
  width: 22px !important;
  height: 4px !important;
  border-radius: 100px !important;
  background: var(--cm-line) !important;
  border: none !important;
  display: inline-block !important;
  padding: 0 !important;
  font-size: 0 !important;
  color: transparent !important;
  box-shadow: none !important;
  flex: 0 0 auto !important;
  transition: all .25s;
}
.cs-booking--modern .cs-booking__step-dot--completed,
.cs-booking--modern .cs-booking__step-dot--completed .cs-booking__step-dot-circle {
  background: var(--cm-cy) !important;
}
.cs-booking--modern .cs-booking__step-dot--active,
.cs-booking--modern .cs-booking__step-dot--active .cs-booking__step-dot-circle {
  background: var(--cm-cy) !important;
  width: 32px !important;
  box-shadow: 0 0 0 2px rgba(0,174,239,.18) !important;
}
.cs-booking--modern .cs-booking__step-label { display: none !important; }

/* ===== Steps ===== */
.cs-booking--modern .cs-booking__step {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* ===== Form inputs ===== */
.cs-booking--modern .cs-step1__card {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.cs-booking--modern .cs-step1__name-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cs-booking--modern .cs-booking__form-field {
  margin-bottom: 12px !important;
  position: relative;
}
.cs-booking--modern .cs-booking__form-label {
  display: block !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--cm-cy) !important;
  font-weight: 600 !important;
  margin: 0 0 6px 4px !important;
}
.cs-booking--modern .cs-booking__required { color: var(--cm-mg); }
.cs-booking--modern .cs-booking__form-input,
.cs-booking--modern .cs-booking__form-field input,
.cs-booking--modern .cs-booking__form-field textarea,
.cs-booking--modern .cs-booking__form-field select {
  width: 100% !important;
  background: var(--cm-paper-2) !important;
  border: 1.5px solid var(--cm-line) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--cm-ink) !important;
  outline: none !important;
  font-family: inherit !important;
  box-shadow: none !important;
  transition: border-color .2s, background .2s !important;
  -webkit-appearance: none;
}
.cs-booking--modern .cs-booking__form-input:focus,
.cs-booking--modern .cs-booking__form-field input:focus,
.cs-booking--modern .cs-booking__form-field textarea:focus,
.cs-booking--modern .cs-booking__form-field select:focus {
  border-color: var(--cm-cy) !important;
  background: #fff !important;
}
.cs-booking--modern .cs-booking__form-input::placeholder { color: #9ca3af; }
.cs-booking--modern .cs-booking__form-error {
  display: block;
  font-size: 12.5px;
  color: var(--cm-mg) !important;
  margin-top: 4px;
}

/* ===== Buttons ===== */
.cs-booking--modern .cs-booking__button,
.cs-booking--modern button.cs-booking__button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  width: 100%;
  padding: 16px 22px !important;
  min-height: 56px;
  border-radius: 14px !important;
  font-family: 'Geist', sans-serif !important;
  font-size: 15.5px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border: none !important;
  cursor: pointer;
  transition: transform .12s, box-shadow .2s, opacity .2s !important;
  margin-top: 8px;
  text-shadow: none !important;
}
.cs-booking--modern .cs-booking__button:disabled { opacity: .4; cursor: not-allowed; }
.cs-booking--modern .cs-booking__button:not(:disabled):active { transform: scale(.98); }
.cs-booking--modern .cs-booking__button--primary {
  background: var(--cm-ink) !important;
  color: #fff !important;
  box-shadow: var(--cm-shadow-ink) !important;
}
.cs-booking--modern .cs-booking__button--primary:hover:not(:disabled) {
  background: var(--cm-ink) !important;
  box-shadow: 0 10px 28px -8px rgba(10,22,40,.55) !important;
}
.cs-booking--modern .cs-booking__button--secondary,
.cs-booking--modern .cs-booking__button--new-patient,
.cs-booking--modern .cs-booking__button--try-again,
.cs-booking--modern .cs-booking__button--start-over {
  background: transparent !important;
  color: var(--cm-cy) !important;
  border: 1.5px solid var(--cm-cy) !important;
  box-shadow: none !important;
}
.cs-booking--modern .cs-booking__button--book-another,
.cs-booking--modern .cs-booking__button--pick-new-time {
  background: transparent !important;
  color: var(--cm-cy) !important;
  border: none !important;
  font-weight: 600 !important;
  min-height: auto !important;
}
.cs-booking--modern .cs-booking__navigation {
  display: flex !important;
  gap: 10px;
  margin-top: 14px;
}

/* ===== Triage greeting + chips ===== */
.cs-booking--modern .cs-triage__greeting,
.cs-booking--modern .cs-triage__greeting-text {
  font-family: 'Fraunces', serif !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  letter-spacing: -.015em;
  color: var(--cm-ink) !important;
  margin: 6px 0 16px !important;
}
.cs-booking--modern .cs-triage__chips {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 8px 0 14px;
}
.cs-booking--modern .cs-triage__chip {
  background: var(--cm-paper-2) !important;
  border: 1.5px solid transparent !important;
  border-radius: 14px !important;
  padding: 14px !important;
  display: flex !important;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-family: inherit !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--cm-ink) !important;
  transition: all .18s !important;
  min-height: 70px;
  text-align: left;
  line-height: 1.25;
  box-shadow: none !important;
  text-shadow: none !important;
}
.cs-booking--modern .cs-triage__chip:hover {
  background: #e9eae5 !important;
  border-color: rgba(0,174,239,.3) !important;
}
.cs-booking--modern .cs-triage__chip-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #fff !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: var(--cm-cy) !important;
  flex-shrink: 0;
  font-size: 18px;
}

/* ===== Triage chat ===== */
.cs-booking--modern .cs-triage__chat {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0 14px;
}
.cs-booking--modern .cs-triage__bubble,
.cs-booking--modern .cs-triage__bubble--assistant {
  background: var(--cm-paper-2) !important;
  color: var(--cm-ink) !important;
  border-radius: 18px 18px 18px 6px !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  max-width: 84%;
}
.cs-booking--modern .cs-triage__reply-group {
  display: flex !important;
  gap: 8px;
  margin-top: 8px;
}
.cs-booking--modern .cs-triage__reply-input {
  flex: 1;
  background: var(--cm-paper-2) !important;
  border: 1.5px solid var(--cm-line) !important;
  border-radius: 14px !important;
  padding: 12px 16px !important;
  font-size: 14.5px !important;
  color: var(--cm-ink) !important;
  outline: none !important;
}
.cs-booking--modern .cs-triage__reply-input:focus {
  border-color: var(--cm-cy) !important;
  background: #fff !important;
}
.cs-booking--modern .cs-triage__reply-btn {
  background: var(--cm-ink) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 12px 20px !important;
  font-weight: 600 !important;
  cursor: pointer;
  box-shadow: var(--cm-shadow-ink) !important;
}
.cs-booking--modern .cs-triage__skip-link {
  color: var(--cm-muted) !important;
  text-decoration: none !important;
  font-size: 13.5px !important;
}
.cs-booking--modern .cs-triage__skip-link:hover { color: var(--cm-cy) !important; }
.cs-booking--modern .cs-triage__error-banner {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  color: #b91c1c !important;
  margin-bottom: 12px;
}

/* ===== Triage option cards (after AI matching) ===== */
.cs-booking--modern .cs-triage__options-cards {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
}
.cs-booking--modern .cs-triage__options-message {
  font-family: 'Fraunces', serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: var(--cm-ink) !important;
  margin: 4px 0 10px !important;
  line-height: 1.3;
}
.cs-booking--modern .cs-triage__option-card {
  background: #fff !important;
  border: 1.5px solid var(--cm-line) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  cursor: pointer;
  transition: all .18s !important;
  text-align: left;
  font-family: inherit !important;
  box-shadow: none !important;
}
.cs-booking--modern .cs-triage__option-card:hover {
  border-color: var(--cm-cy) !important;
  background: #fafdff !important;
}
.cs-booking--modern .cs-triage__option-card--selected,
.cs-booking--modern .cs-triage__option-card--recommended.cs-triage__option-card--selected {
  border-color: var(--cm-cy) !important;
  background: #fff !important;
  box-shadow: var(--cm-shadow-cyan) !important;
}
.cs-booking--modern .cs-triage__option-card--recommended { border-color: var(--cm-cy) !important; }
.cs-booking--modern .cs-triage__option-badge {
  font-size: 10px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--cm-cy) !important;
  font-weight: 700 !important;
  background: rgba(0,174,239,.1);
  padding: 2px 8px;
  border-radius: 6px;
  display: inline-block;
  margin-bottom: 6px;
}
.cs-booking--modern .cs-triage__option-name {
  font-family: 'Fraunces', serif !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  color: var(--cm-ink) !important;
  margin: 4px 0 2px !important;
}
.cs-booking--modern .cs-triage__option-description,
.cs-booking--modern .cs-triage__option-explanation {
  font-size: 12.5px !important;
  color: var(--cm-muted) !important;
  line-height: 1.45;
}

/* ===== Qualifying question ===== */
.cs-booking--modern .cs-qualifying__header { margin-bottom: 14px; }
.cs-booking--modern .cs-qualifying__question {
  font-family: 'Fraunces', serif !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  letter-spacing: -.018em !important;
  color: var(--cm-ink) !important;
  margin-bottom: 14px !important;
}
.cs-booking--modern .cs-qualifying__options {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
}
.cs-booking--modern .cs-qualifying__option-btn {
  background: var(--cm-paper-2) !important;
  border: 1.5px solid transparent !important;
  border-radius: 14px !important;
  padding: 18px !important;
  cursor: pointer;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--cm-ink) !important;
  width: 100%;
  text-align: left;
  min-height: 60px;
  transition: all .18s;
  box-shadow: none !important;
  text-shadow: none !important;
}
.cs-booking--modern .cs-qualifying__option-btn:hover {
  background: #e9eae5 !important;
  border-color: var(--cm-cy) !important;
}

/* ===== Calendar (Step 4 date picker) ===== */
.cs-booking--modern .cs-booking__calendar-section {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
.cs-booking--modern .cs-booking__calendar {
  background: var(--cm-paper-2) !important;
  border-radius: 16px !important;
  padding: 14px !important;
  border: none !important;
}
.cs-booking--modern .cs-booking__calendar-header,
.cs-booking--modern .cs-booking__month-nav {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.cs-booking--modern .cs-booking__month-display {
  font-family: 'Fraunces', serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: var(--cm-ink) !important;
}
.cs-booking--modern .cs-booking__calendar-days {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cs-booking--modern .cs-booking__calendar-day-header {
  font-size: 10.5px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--cm-muted) !important;
  font-weight: 600 !important;
  text-align: center;
  padding: 6px 0 !important;
}
.cs-booking--modern .cs-booking__calendar-day {
  aspect-ratio: 1;
  background: #fff !important;
  border: 2px solid transparent !important;
  border-radius: 10px !important;
  font-family: 'Fraunces', serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--cm-ink) !important;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: all .18s;
  padding: 0 !important;
  box-shadow: none !important;
}
.cs-booking--modern .cs-booking__calendar-day--empty {
  background: transparent !important;
  cursor: default;
  pointer-events: none;
}
.cs-booking--modern .cs-booking__calendar-day--available:hover {
  border-color: var(--cm-cy) !important;
}
.cs-booking--modern .cs-booking__calendar-day--selected {
  background: var(--cm-cy) !important;
  color: #fff !important;
  border-color: var(--cm-cy) !important;
  box-shadow: var(--cm-shadow-cyan) !important;
  transform: translateY(-1px);
}
.cs-booking--modern .cs-booking__calendar-day--today {
  border-color: var(--cm-mg) !important;
  color: var(--cm-mg) !important;
}
.cs-booking--modern .cs-booking__calendar-day--today.cs-booking__calendar-day--selected {
  color: #fff !important;
  border-color: var(--cm-cy) !important;
}
.cs-booking--modern .cs-booking__calendar-day--disabled,
.cs-booking--modern .cs-booking__calendar-day--medical-only {
  opacity: .35;
  cursor: not-allowed;
}
.cs-booking--modern .cs-booking__date-banner,
.cs-booking--modern .cs-booking__medical-only-notice {
  background: #fef3c7 !important;
  border: 1px solid #fde68a !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  color: #92400e !important;
  font-size: 13px;
  margin: 10px 0;
}

/* ===== Time of Day picker ===== */
.cs-booking--modern .cs-booking__tod-picker {
  display: flex !important;
  gap: 6px;
  margin: 14px 0 10px;
  flex-wrap: wrap;
}
.cs-booking--modern .cs-booking__tod-btn {
  background: var(--cm-paper-2) !important;
  border: 1.5px solid transparent !important;
  color: var(--cm-ink) !important;
  border-radius: 100px !important;
  padding: 8px 16px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer;
  font-family: inherit !important;
  transition: all .18s;
  box-shadow: none !important;
  text-shadow: none !important;
}
.cs-booking--modern .cs-booking__tod-btn:hover { background: #e9eae5 !important; }
.cs-booking--modern .cs-booking__tod-btn.cs-booking__tod-btn--selected,
.cs-booking--modern .cs-booking__tod-btn[aria-selected="true"] {
  background: var(--cm-cy) !important;
  color: #fff !important;
  border-color: var(--cm-cy) !important;
}

/* ===== Time slots (Step 4) -- FIX: honor --selected modifier ===== */
.cs-booking--modern .cs-booking__time-slots-section {
  margin-top: 12px;
}
.cs-booking--modern .cs-booking__time-group {
  margin-bottom: 14px;
}
.cs-booking--modern .cs-booking__time-slots {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.cs-booking--modern .cs-booking__time-slot {
  background: var(--cm-paper-2) !important;
  border: 2px solid transparent !important;
  border-radius: 14px !important;
  padding: 14px 6px !important;
  font-family: 'Fraunces', serif !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  color: var(--cm-ink) !important;
  cursor: pointer !important;
  transition: all .18s !important;
  text-align: center;
  min-height: 60px;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.1;
  box-shadow: none !important;
  text-shadow: none !important;
}
.cs-booking--modern .cs-booking__time-slot:hover:not(:disabled):not(.cs-booking__time-slot--selected) {
  background: #e9eae5 !important;
}
.cs-booking--modern .cs-booking__time-slot--selected {
  background: var(--cm-cy) !important;
  color: #fff !important;
  border-color: var(--cm-cy) !important;
  box-shadow: var(--cm-shadow-cyan) !important;
  transform: translateY(-2px);
}
.cs-booking--modern .cs-booking__time-slot--selected .cs-booking__slot-provider { color: rgba(255,255,255,.85) !important; }
.cs-booking--modern .cs-booking__slot-time {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  font-weight: 500;
  display: block;
}
.cs-booking--modern .cs-booking__slot-provider {
  font-family: 'Geist', sans-serif !important;
  font-size: 10.5px !important;
  letter-spacing: .04em;
  color: var(--cm-muted) !important;
  margin-top: 3px;
  display: block;
}
.cs-booking--modern .cs-booking__time-slot--more {
  background: transparent !important;
  border: 1.5px dashed var(--cm-cy) !important;
  color: var(--cm-cy) !important;
  font-family: 'Geist', sans-serif !important;
  font-size: 12.5px !important;
}

/* ===== Sibling question + context banner ===== */
.cs-booking--modern .cs-booking__sibling-q {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
.cs-booking--modern .cs-booking__sibling-q h2 {
  font-family: 'Fraunces', serif !important;
}
.cs-booking--modern .cs-booking__sibling-ctx {
  background: var(--cm-paper-2) !important;
  border: none !important;
  border-radius: 100px !important;
  padding: 6px 14px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-size: 12.5px !important;
  color: var(--cm-muted) !important;
  font-weight: 500;
  margin-bottom: 12px;
}
.cs-booking--modern .cs-booking__sibling-ctx-body,
.cs-booking--modern .cs-booking__sibling-ctx-meta { color: var(--cm-muted) !important; }
.cs-booking--modern .cs-booking__sibling-ctx-close {
  background: transparent !important;
  border: none !important;
  color: var(--cm-muted) !important;
  cursor: pointer;
  padding: 0 0 0 4px !important;
}

/* ===== New patient sub-flow ===== */
.cs-booking--modern .cs-booking__new-patient {
  background: transparent !important;
}
.cs-booking--modern .cs-booking__new-patient h2,
.cs-booking--modern .cs-booking__new-patient h1 {
  font-family: 'Fraunces', serif !important;
  text-align: left !important;
}
.cs-booking--modern .cs-booking__new-patient ul {
  font-size: 14px;
  color: var(--cm-muted);
  line-height: 1.7;
}
.cs-booking--modern .cs-booking__new-patient ul strong { color: var(--cm-ink); }

/* ===== Verify error + help strip ===== */
.cs-booking--modern .cs-booking__verify-error {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  color: #b91c1c !important;
  font-size: 13px !important;
}
.cs-booking--modern .cs-booking__verify-help {
  background: #fff !important;
  border: 1px solid var(--cm-line) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  margin-top: 12px !important;
  box-shadow: none !important;
}

/* ===== Confirmation (Step 5) ===== */
.cs-booking--modern .cs-booking__confirmation-success {
  text-align: center;
  padding-top: 4px;
}
.cs-booking--modern .cs-booking__checkmark {
  width: 76px !important;
  height: 76px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--cm-cy), var(--cm-cy-2)) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 4px auto 14px !important;
  font-size: 40px !important;
  font-weight: 400 !important;
  line-height: 1;
  box-shadow: 0 16px 36px -10px rgba(0,174,239,.55) !important;
  text-shadow: none !important;
}
.cs-booking--modern .cs-booking__confirmation-success h2 {
  text-align: center;
  margin-bottom: 14px !important;
}
.cs-booking--modern .cs-booking__confirmation-summary {
  background: var(--cm-paper-2) !important;
  border-radius: 16px !important;
  padding: 14px !important;
  margin: 14px 0 12px !important;
  border: none !important;
  text-align: left;
}
.cs-booking--modern .cs-booking__summary-item {
  display: flex !important;
  flex-direction: column !important;
  padding: 8px 4px !important;
  border-bottom: 1px solid rgba(229,231,235,.7) !important;
  background: transparent !important;
}
.cs-booking--modern .cs-booking__summary-item:last-child { border-bottom: none !important; }
.cs-booking--modern .cs-booking__summary-label {
  font-size: 10px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--cm-cy) !important;
  font-weight: 700 !important;
  margin-bottom: 2px !important;
}
.cs-booking--modern .cs-booking__summary-value {
  font-size: 14.5px !important;
  font-weight: 500 !important;
  color: var(--cm-ink) !important;
}
.cs-booking--modern .cs-booking__confirmation-instructions,
.cs-booking--modern .cs-booking__fee-notice {
  background: #fff !important;
  border: 1px solid var(--cm-line) !important;
  border-radius: 14px !important;
  padding: 14px !important;
  margin-top: 10px !important;
  text-align: left;
  box-shadow: none !important;
}
.cs-booking--modern .cs-booking__instructions-header,
.cs-booking--modern .cs-booking__fee-notice-header {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--cm-ink) !important;
  margin-bottom: 6px !important;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cs-booking--modern .cs-booking__instructions-icon,
.cs-booking--modern .cs-booking__fee-notice-icon { color: var(--cm-cy) !important; }
.cs-booking--modern .cs-booking__instructions-body {
  font-size: 13px !important;
  color: var(--cm-muted) !important;
  line-height: 1.55;
}
.cs-booking--modern .cs-booking__fee-notice p {
  font-size: 13px !important;
  color: var(--cm-muted) !important;
  margin: 0 0 8px !important;
}
.cs-booking--modern .cs-booking__fee-notice strong { color: var(--cm-ink) !important; }
.cs-booking--modern .cs-booking__fee-notice-sub {
  font-size: 10px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--cm-cy) !important;
  font-weight: 700 !important;
  margin: 8px 0 6px !important;
}
.cs-booking--modern .cs-booking__fee-notice-methods {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cs-booking--modern .cs-booking__fee-notice-method {
  display: flex !important;
  align-items: center;
  gap: 10px;
  font-size: 12.5px !important;
  color: var(--cm-ink) !important;
}

/* ===== Add to calendar widget ===== */
.cs-booking--modern .cs-booking__add-to-calendar {
  background: #fff !important;
  border: 1px solid var(--cm-line) !important;
  border-radius: 14px !important;
  padding: 12px !important;
  margin-top: 10px;
  text-align: left;
}
.cs-booking--modern .cs-booking__calendar-toggle {
  background: transparent !important;
  border: none !important;
  color: var(--cm-cy) !important;
  font-weight: 600 !important;
  cursor: pointer;
}
.cs-booking--modern .cs-booking__calendar-options {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.cs-booking--modern .cs-booking__calendar-option {
  background: var(--cm-paper-2) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  color: var(--cm-ink) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  text-decoration: none !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ===== Spinners / loading / error ===== */
.cs-booking--modern .cs-booking__spinner {
  border-top-color: var(--cm-cy) !important;
}
.cs-booking--modern .cs-booking__loading {
  text-align: center;
  padding: 24px 0;
  color: var(--cm-muted);
}
.cs-booking--modern .cs-booking__error,
.cs-booking--modern .cs-booking__confirmation-error {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  color: #b91c1c !important;
}
.cs-booking--modern .cs-booking__error-icon { color: #b91c1c !important; }
.cs-booking--modern .cs-booking__no-items,
.cs-booking--modern .cs-booking__no-slots {
  background: var(--cm-paper-2) !important;
  border-radius: 14px !important;
  padding: 24px !important;
  text-align: center;
  color: var(--cm-muted) !important;
  font-size: 14px;
}

/* ===== Progress summary breadcrumb ===== */
.cs-booking--modern .cs-booking__progress-summary {
  background: var(--cm-paper-2) !important;
  border: none !important;
  border-radius: 100px !important;
  padding: 6px 14px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-size: 12px !important;
  color: var(--cm-muted) !important;
  margin-bottom: 12px;
}

/* ===== Avatar initials ===== */
.cs-booking--modern .cs-booking__avatar-initials {
  background: linear-gradient(135deg, var(--cm-cy), var(--cm-mg)) !important;
  color: #fff !important;
  font-family: 'Geist', sans-serif !important;
  font-weight: 700 !important;
}

/* ===== Mobile breakpoints ===== */
@media (max-width: 480px) {
  .cs-booking--modern {
    padding: 18px 18px 22px;
    border-radius: 0;
  }
  .cs-booking--modern .cs-triage__chips { grid-template-columns: 1fr; }
  .cs-booking--modern .cs-booking__time-slots { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}


/* ===================================================================
 * 3.25.273 additions
 * =================================================================== */

/* --- Brand wordmark line above the widget --- */
.cs-booking--modern .cs-modern-brand {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -.005em;
  color: var(--cm-muted);
  text-align: center;
  margin-bottom: 14px;
  display: block;
}

/* --- Floating labels (after modern.js reorders input->label) --- */
.cs-booking--modern .cs-booking__form-field {
  position: relative;
  padding-top: 0;
}
.cs-booking--modern .cs-booking__form-field input.cs-modern-floated,
.cs-booking--modern .cs-booking__form-field textarea.cs-modern-floated {
  padding: 22px 16px 8px !important;
}
.cs-booking--modern .cs-booking__form-field textarea.cs-modern-floated {
  padding-top: 26px !important;
  min-height: 84px;
}
.cs-booking--modern .cs-booking__form-field input.cs-modern-floated + label.cs-modern-floated,
.cs-booking--modern .cs-booking__form-field textarea.cs-modern-floated + label.cs-modern-floated {
  position: absolute !important;
  left: 17px;
  top: 18px;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  color: var(--cm-muted) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  pointer-events: none;
  margin: 0 !important;
  transition: top .18s, font-size .18s, color .18s, letter-spacing .18s;
}
.cs-booking--modern .cs-booking__form-field input.cs-modern-floated:focus + label.cs-modern-floated,
.cs-booking--modern .cs-booking__form-field input.cs-modern-floated:not(:placeholder-shown) + label.cs-modern-floated,
.cs-booking--modern .cs-booking__form-field textarea.cs-modern-floated:focus + label.cs-modern-floated,
.cs-booking--modern .cs-booking__form-field textarea.cs-modern-floated:not(:placeholder-shown) + label.cs-modern-floated {
  top: 6px;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: var(--cm-cy) !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

/* --- Provider avatar gradient (after modern.js tags them) --- */
.cs-booking--modern .cs-modern-avatar {
  background: linear-gradient(135deg, #1a2e4f, #0a1628) !important;
  color: #fff !important;
  border: none !important;
  font-family: 'Fraunces', serif !important;
  font-weight: 600 !important;
}
.cs-booking--modern .cs-modern-avatar--first {
  background: linear-gradient(135deg, var(--cm-cy), var(--cm-mg)) !important;
  font-family: 'Geist', sans-serif !important;
}

/* --- Welcome overlay (injected by modern.js once per session) --- */
.cs-modern-welcome {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: radial-gradient(ellipse at top, #1a2e4f, #0a1628 60%);
  color: #fff;
  display: flex;
  flex-direction: column;
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  overflow: hidden;
  animation: cs-mw-fade 0.4s ease;
}
@keyframes cs-mw-fade { 0% { opacity: 0; } 100% { opacity: 1; } }
.cs-modern-welcome::before {
  content: "";
  position: absolute;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,174,239,.42), transparent 70%);
  top: -260px;
  left: -260px;
  filter: blur(80px);
  pointer-events: none;
}
.cs-modern-welcome::after {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236,0,140,.32), transparent 70%);
  bottom: -220px;
  right: -220px;
  filter: blur(80px);
  pointer-events: none;
}
.cs-modern-welcome-logo {
  padding: 36px 28px 0;
  position: relative;
  z-index: 2;
  text-align: center;
}
.cs-modern-welcome-brand {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -.01em;
  color: #fff;
  opacity: 0.92;
}
.cs-modern-welcome-hero {
  flex: 1;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.cs-modern-welcome-orb {
  width: 168px;
  height: 168px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cm-cy, #00AEEF);
}
.cs-modern-welcome-orb svg { width: 76px; height: 76px; }
.cs-modern-welcome-content {
  padding: 24px 28px calc(36px + env(safe-area-inset-bottom));
  position: relative;
  z-index: 2;
  max-width: 540px;
  margin: 0 auto;
  width: 100%;
}
.cs-modern-welcome-content h1 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(34px, 9vw, 44px);
  line-height: 1.04;
  letter-spacing: -.024em;
  margin: 0 0 14px;
  color: #fff;
}
.cs-modern-welcome-content h1 em {
  font-style: italic;
  color: var(--cm-cy, #00AEEF);
}
.cs-modern-welcome-content p {
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(255,255,255,.78);
  margin: 0 0 22px;
}
.cs-modern-welcome-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}
.cs-modern-welcome-meta div {
  font-size: 13.5px;
  color: rgba(255,255,255,.65);
  display: flex;
  align-items: center;
  gap: 8px;
}
.cs-modern-welcome-meta svg {
  width: 14px;
  height: 14px;
  color: var(--cm-cy, #00AEEF);
  flex-shrink: 0;
}
.cs-modern-welcome-btn {
  width: 100%;
  background: linear-gradient(135deg, #00AEEF, #00C8FF);
  color: #0a1628;
  border: none;
  padding: 18px 22px;
  border-radius: 16px;
  font-size: 17px;
  font-weight: 700;
  font-family: 'Geist', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 22px 50px -18px rgba(0,174,239,.7);
  transition: transform .2s;
  min-height: 60px;
}
.cs-modern-welcome-btn:active { transform: scale(.98); }
.cs-modern-welcome-btn svg { width: 20px; height: 20px; color: #0a1628; flex-shrink: 0; }
.cs-modern-welcome-skip {
  background: none;
  border: none;
  color: rgba(255,255,255,.6);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  margin-top: 12px;
  width: 100%;
  text-align: center;
  text-decoration: underline;
}
@media (max-width: 420px) {
  .cs-modern-welcome-logo { padding: 24px 18px 0; }
  .cs-modern-welcome-content { padding-left: 18px; padding-right: 18px; }
  .cs-modern-welcome-content h1 { font-size: 34px; }
}


/* ===================================================================
 * 3.25.274 overrides
 *   - kill floating labels (revert to clean stacked eyebrow)
 *   - brand line inside widget at top
 *   - strong dark ink primary button (#id-qualified to beat theme)
 *   - transparent step indicator container
 * =================================================================== */

/* Brand line -- as first child of the widget root */
#cs-booking-widget.cs-booking--modern .cs-modern-brand-inside {
  font-family: 'Fraunces', serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: .01em !important;
  color: var(--cm-muted) !important;
  text-align: center !important;
  margin: -6px 0 12px !important;
  display: block !important;
}

/* Hide the page-margin brand line from 3.25.273 (if present) */
body > .cs-modern-brand { display: none !important; }

/* Drop floating-label state -- reset to clean stacked labels */
#cs-booking-widget.cs-booking--modern .cs-booking__form-field {
  position: static !important;
}
#cs-booking-widget.cs-booking--modern .cs-booking__form-field input.cs-modern-floated,
#cs-booking-widget.cs-booking--modern .cs-booking__form-field textarea.cs-modern-floated {
  padding: 14px 16px !important;
}
#cs-booking-widget.cs-booking--modern .cs-booking__form-field input.cs-modern-floated + label.cs-modern-floated,
#cs-booking-widget.cs-booking--modern .cs-booking__form-field textarea.cs-modern-floated + label.cs-modern-floated,
#cs-booking-widget.cs-booking--modern .cs-booking__form-label,
#cs-booking-widget.cs-booking--modern .cs-booking__form-label.cs-modern-floated {
  position: static !important;
  display: block !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--cm-cy) !important;
  font-weight: 700 !important;
  margin: 0 0 6px 4px !important;
  top: auto !important;
  left: auto !important;
  pointer-events: auto;
}

/* Force primary button dark ink with very strong specificity */
#cs-booking-widget.cs-booking--modern .cs-booking__button.cs-booking__button--primary,
#cs-booking-widget.cs-booking--modern button.cs-booking__button--primary,
#cs-booking-widget.cs-booking--modern a.cs-booking__button--primary {
  background-color: #0a1628 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 6px 20px -8px rgba(10,22,40,.45) !important;
  text-shadow: none !important;
}
#cs-booking-widget.cs-booking--modern .cs-booking__button.cs-booking__button--primary:disabled {
  background-color: #0a1628 !important;
  opacity: .4 !important;
  color: #ffffff !important;
}
#cs-booking-widget.cs-booking--modern .cs-booking__button.cs-booking__button--primary:hover:not(:disabled) {
  background-color: #0a1628 !important;
  box-shadow: 0 10px 28px -8px rgba(10,22,40,.55) !important;
}

/* Secondary / new-patient: clean cyan outline */
#cs-booking-widget.cs-booking--modern .cs-booking__button.cs-booking__button--secondary,
#cs-booking-widget.cs-booking--modern a.cs-booking__button--new-patient {
  background: transparent !important;
  background-image: none !important;
  color: #00AEEF !important;
  border: 1.5px solid #00AEEF !important;
  box-shadow: none !important;
}

/* Step indicator -- transparent container, true pill dots */
#cs-booking-widget.cs-booking--modern .cs-booking__step-indicator {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 0 14px !important;
  border: none !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
#cs-booking-widget.cs-booking--modern .cs-booking__step-dot {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  height: auto !important;
  font-size: 0 !important;
  color: transparent !important;
}
#cs-booking-widget.cs-booking--modern .cs-booking__step-dot-circle {
  width: 22px !important;
  height: 4px !important;
  border-radius: 100px !important;
  background: #e5e7eb !important;
  border: none !important;
  display: inline-block !important;
  box-shadow: none !important;
  transition: all .25s;
}
#cs-booking-widget.cs-booking--modern .cs-booking__step-dot--completed .cs-booking__step-dot-circle {
  background: #00AEEF !important;
}
#cs-booking-widget.cs-booking--modern .cs-booking__step-dot--active .cs-booking__step-dot-circle {
  background: #00AEEF !important;
  width: 32px !important;
  box-shadow: 0 0 0 2px rgba(0,174,239,.18) !important;
}


/* ===================================================================
 * 3.25.275 -- final overrides (highest specificity, end-of-cascade)
 * =================================================================== */

/* --- Navigation row: equal-width buttons with no width:100% conflict --- */
#cs-booking-widget.cs-booking--modern .cs-booking__navigation {
  display: flex !important;
  gap: 10px !important;
  margin-top: 16px !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
}
#cs-booking-widget.cs-booking--modern .cs-booking__navigation > .cs-booking__button,
#cs-booking-widget.cs-booking--modern .cs-booking__navigation > a.cs-booking__button {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}

/* --- Primary button: dark ink, white text --- */
#cs-booking-widget.cs-booking--modern .cs-booking__button.cs-booking__button--primary,
#cs-booking-widget.cs-booking--modern button.cs-booking__button.cs-booking__button--primary,
#cs-booking-widget.cs-booking--modern a.cs-booking__button.cs-booking__button--primary,
#cs-booking-widget.cs-booking--modern .cs-booking__navigation > .cs-booking__button.cs-booking__button--primary {
  background-color: #0a1628 !important;
  background-image: none !important;
  background: #0a1628 !important;
  color: #ffffff !important;
  border: 1.5px solid #0a1628 !important;
  box-shadow: 0 6px 20px -8px rgba(10,22,40,.45) !important;
  text-shadow: none !important;
}
#cs-booking-widget.cs-booking--modern .cs-booking__button.cs-booking__button--primary:hover:not(:disabled) {
  background: #1a2e4f !important;
  background-color: #1a2e4f !important;
  border-color: #1a2e4f !important;
  box-shadow: 0 10px 28px -8px rgba(10,22,40,.55) !important;
}
#cs-booking-widget.cs-booking--modern .cs-booking__button.cs-booking__button--primary:disabled,
#cs-booking-widget.cs-booking--modern .cs-booking__button.cs-booking__button--primary[disabled] {
  background: #0a1628 !important;
  background-color: #0a1628 !important;
  color: #ffffff !important;
  opacity: .35 !important;
  cursor: not-allowed !important;
}

/* --- Secondary button: transparent fill, cyan outline, cyan text --- */
#cs-booking-widget.cs-booking--modern .cs-booking__button.cs-booking__button--secondary,
#cs-booking-widget.cs-booking--modern button.cs-booking__button.cs-booking__button--secondary,
#cs-booking-widget.cs-booking--modern a.cs-booking__button.cs-booking__button--secondary,
#cs-booking-widget.cs-booking--modern a.cs-booking__button--new-patient,
#cs-booking-widget.cs-booking--modern .cs-booking__navigation > .cs-booking__button.cs-booking__button--secondary {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #00AEEF !important;
  border: 1.5px solid #00AEEF !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
#cs-booking-widget.cs-booking--modern .cs-booking__button.cs-booking__button--secondary:hover:not(:disabled) {
  background: rgba(0,174,239,.06) !important;
  background-color: rgba(0,174,239,.06) !important;
}

/* --- Sibling Yes / No buttons --- */
#cs-booking-widget.cs-booking--modern .cs-sibling-yes,
#cs-booking-widget.cs-booking--modern .cs-sibling-no {
  background: transparent !important;
  color: #00AEEF !important;
  border: 1.5px solid #00AEEF !important;
  border-radius: 14px !important;
  padding: 16px 22px !important;
  min-height: 54px !important;
  font-family: 'Geist', sans-serif !important;
  font-size: 15.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  flex: 1 1 0 !important;
  width: auto !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
#cs-booking-widget.cs-booking--modern .cs-sibling-yes:hover,
#cs-booking-widget.cs-booking--modern .cs-sibling-no:hover {
  background: rgba(0,174,239,.06) !important;
}
#cs-booking-widget.cs-booking--modern .cs-sibling-back {
  color: #6b7280 !important;
  text-decoration: underline !important;
  font-size: 13px !important;
  background: none !important;
  border: none !important;
}

/* --- Combo provider warning (yellow callout) -> modern amber card --- */
#cs-booking-widget.cs-booking--modern .cs-combo__provider-warning {
  background: #fef3c7 !important;
  border: 1px solid #fde68a !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  color: #92400e !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  margin-bottom: 12px !important;
  display: flex !important;
  gap: 10px;
  align-items: flex-start;
}
#cs-booking-widget.cs-booking--modern .cs-combo__provider-warning strong {
  color: #92400e !important;
  font-weight: 600;
}

/* --- Combo provider acknowledgment row --- */
#cs-booking-widget.cs-booking--modern .cs-combo__provider-ack {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  font-size: 13px !important;
  color: #0a1628 !important;
  margin-bottom: 12px !important;
}
#cs-booking-widget.cs-booking--modern .cs-combo__provider-ack input[type="checkbox"] {
  accent-color: #00AEEF;
}

/* --- Combo billing notice (long copay/coinsurance card) --- */
#cs-booking-widget.cs-booking--modern .cs-combo__billing-notice {
  background: #fef3c7 !important;
  border: 1px solid #fde68a !important;
  border-radius: 14px !important;
  padding: 14px !important;
  margin: 12px 0 !important;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: #78350f !important;
}
#cs-booking-widget.cs-booking--modern .cs-combo__billing-notice .cs-combo__billing-icon {
  font-size: 20px;
  color: #b45309 !important;
  flex-shrink: 0;
}
#cs-booking-widget.cs-booking--modern .cs-combo__billing-notice .cs-combo__billing-text {
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: #78350f !important;
}
#cs-booking-widget.cs-booking--modern .cs-combo__billing-notice strong {
  color: #78350f !important;
  font-weight: 600;
}

/* --- Combo: toggles, reason, acknowledge --- */
#cs-booking-widget.cs-booking--modern .cs-combo__toggle {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  background: #fff !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 14px !important;
  padding: 14px !important;
  margin-bottom: 10px !important;
  cursor: pointer;
  font-size: 14px !important;
  color: #0a1628 !important;
  line-height: 1.45;
}
#cs-booking-widget.cs-booking--modern .cs-combo__toggle input[type="checkbox"] {
  accent-color: #00AEEF;
  width: 18px;
  height: 18px;
  margin-top: 2px;
}
#cs-booking-widget.cs-booking--modern .cs-combo__toggle-label {
  flex: 1;
}
#cs-booking-widget.cs-booking--modern .cs-combo__reason-label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #0a1628 !important;
  margin: 14px 0 6px !important;
}
#cs-booking-widget.cs-booking--modern .cs-combo__reason-input {
  width: 100% !important;
  background: var(--cm-paper-2) !important;
  border: 1.5px solid var(--cm-line) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  font-size: 14.5px !important;
  color: #0a1628 !important;
  outline: none !important;
  font-family: inherit !important;
  min-height: 80px;
  resize: vertical;
}
#cs-booking-widget.cs-booking--modern .cs-combo__reason-input:focus {
  border-color: #00AEEF !important;
  background: #fff !important;
}
#cs-booking-widget.cs-booking--modern .cs-combo__acknowledge {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  background: #fff !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: 14px !important;
  padding: 14px !important;
  margin-top: 10px !important;
  cursor: pointer;
  font-size: 13px !important;
  color: #0a1628 !important;
}
#cs-booking-widget.cs-booking--modern .cs-combo__acknowledge input[type="checkbox"] {
  accent-color: #00AEEF;
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

/* --- Calendar month nav buttons --- */
#cs-booking-widget.cs-booking--modern .cs-booking__month-nav button,
#cs-booking-widget.cs-booking--modern .cs-booking__calendar-header button {
  background: var(--cm-paper-2) !important;
  border: none !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  color: #0a1628 !important;
  cursor: pointer !important;
  font-size: 18px !important;
  box-shadow: none !important;
}
#cs-booking-widget.cs-booking--modern .cs-booking__month-nav button:hover,
#cs-booking-widget.cs-booking--modern .cs-booking__calendar-header button:hover {
  background: #e9eae5 !important;
}

/* --- Time slot section: tighten --- */
#cs-booking-widget.cs-booking--modern .cs-booking__time-slots-section {
  margin-top: 14px !important;
}

/* --- Date banner (Change Date) --- */
#cs-booking-widget.cs-booking--modern .cs-booking__date-banner {
  background: #f0f9ff !important;
  border: 1px solid #bae6fd !important;
  color: #075985 !important;
}
#cs-booking-widget.cs-booking--modern .cs-booking__change-date-btn,
#cs-booking-widget.cs-booking--modern .cs-booking__change-tod-btn {
  background: transparent !important;
  border: none !important;
  color: #00AEEF !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  font-size: 13.5px !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* --- Progress summary (PATIENT chip) --- */
#cs-booking-widget.cs-booking--modern .cs-booking__progress-summary {
  background: var(--cm-paper-2) !important;
  border-radius: 100px !important;
  padding: 6px 14px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  font-size: 12px !important;
  color: #6b7280 !important;
  margin-bottom: 14px !important;
}
#cs-booking-widget.cs-booking--modern .cs-booking__progress-summary strong {
  color: #0a1628 !important;
  font-weight: 600;
}


/* ===================================================================
 * 3.25.278 -- Mobile lockdown + progress meter cleanup
 * =================================================================== */

/* --- KILL the classic ::before connecting line on the step indicator --- */
#cs-booking-widget.cs-booking--modern .cs-booking__step-indicator::before,
#cs-booking-widget.cs-booking--modern .cs-booking__step-indicator::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  border: none !important;
  height: 0 !important;
  width: 0 !important;
}

/* --- Step indicator: clean horizontal pill row --- */
#cs-booking-widget.cs-booking--modern .cs-booking__header {
  background: transparent !important;
  border: none !important;
  padding: 0 0 14px !important;
  margin: 0 0 4px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}
#cs-booking-widget.cs-booking--modern .cs-booking__step-indicator {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  position: static !important;
}

/* --- Dots: hide the number/check text, hide labels, force pill shape --- */
#cs-booking-widget.cs-booking--modern .cs-booking__step-dot {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;
  position: static !important;
  z-index: 1;
}
#cs-booking-widget.cs-booking--modern .cs-booking__step-dot-circle {
  width: 22px !important;
  height: 4px !important;
  min-width: 22px !important;
  min-height: 4px !important;
  border-radius: 100px !important;
  background: #e5e7eb !important;
  border: none !important;
  display: inline-block !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  box-shadow: none !important;
  transition: width .25s, background .25s, box-shadow .25s !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
}
#cs-booking-widget.cs-booking--modern .cs-booking__step-dot--completed .cs-booking__step-dot-circle {
  width: 22px !important;
  height: 4px !important;
  min-width: 22px !important;
  background: #00AEEF !important;
  border: none !important;
}
#cs-booking-widget.cs-booking--modern .cs-booking__step-dot--active .cs-booking__step-dot-circle {
  width: 32px !important;
  height: 4px !important;
  min-width: 32px !important;
  background: #00AEEF !important;
  border: none !important;
  box-shadow: 0 0 0 2px rgba(0,174,239,.20) !important;
}
#cs-booking-widget.cs-booking--modern .cs-booking__step-dot--upcoming .cs-booking__step-dot-circle {
  width: 22px !important;
  height: 4px !important;
  min-width: 22px !important;
  background: #e5e7eb !important;
}
#cs-booking-widget.cs-booking--modern .cs-booking__step-label {
  display: none !important;
}

/* --- Lock max-width to 540px across all steps (matches registration) --- */
#cs-booking-widget.cs-booking--modern {
  max-width: 540px !important;
  margin: 0 auto !important;
  width: 100% !important;
  box-sizing: border-box;
}

/* --- Tap target floor: every button at 44px+ --- */
#cs-booking-widget.cs-booking--modern button,
#cs-booking-widget.cs-booking--modern .cs-booking__button,
#cs-booking-widget.cs-booking--modern .cs-triage__chip,
#cs-booking-widget.cs-booking--modern .cs-triage__option-card,
#cs-booking-widget.cs-booking--modern .cs-triage__reply-btn,
#cs-booking-widget.cs-booking--modern .cs-booking__time-slot,
#cs-booking-widget.cs-booking--modern .cs-booking__calendar-day,
#cs-booking-widget.cs-booking--modern .cs-qualifying__option-btn,
#cs-booking-widget.cs-booking--modern .cs-booking__tod-btn {
  -webkit-tap-highlight-color: rgba(0,174,239,.15) !important;
}

/* --- Bottom action area: pick up safe-area-inset on notch phones --- */
#cs-booking-widget.cs-booking--modern .cs-booking__navigation {
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

/* ===================================================================
 * @media (max-width: 480px) -- tablet/phone landscape down
 * =================================================================== */
@media (max-width: 480px) {
  #cs-booking-widget.cs-booking--modern {
    padding: 14px 16px 18px !important;
    border-radius: 16px !important;
    box-shadow: none !important;
  }
  /* Headings */
  #cs-booking-widget.cs-booking--modern h1 {
    font-size: 26px !important;
    line-height: 1.08 !important;
  }
  #cs-booking-widget.cs-booking--modern h2 {
    font-size: 24px !important;
    line-height: 1.1 !important;
  }
  #cs-booking-widget.cs-booking--modern h3 {
    font-size: 17px !important;
  }
  /* Triage chips: single column on phones */
  #cs-booking-widget.cs-booking--modern .cs-triage__chips {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  /* Time slots: stay 3 cols but scale text */
  #cs-booking-widget.cs-booking--modern .cs-booking__time-slot {
    font-size: 15px !important;
    min-height: 52px !important;
    padding: 12px 4px !important;
  }
  /* Calendar day cells: tighter font */
  #cs-booking-widget.cs-booking--modern .cs-booking__calendar-day {
    font-size: 13px !important;
    border-radius: 8px !important;
  }
  #cs-booking-widget.cs-booking--modern .cs-booking__calendar {
    padding: 10px !important;
  }
  #cs-booking-widget.cs-booking--modern .cs-booking__month-display {
    font-size: 16px !important;
  }
  /* Provider cards stack */
  #cs-booking-widget.cs-booking--modern .cs-triage__options-cards {
    grid-template-columns: 1fr !important;
  }
  /* Form inputs */
  #cs-booking-widget.cs-booking--modern .cs-booking__form-input,
  #cs-booking-widget.cs-booking--modern .cs-booking__form-field input,
  #cs-booking-widget.cs-booking--modern .cs-booking__form-field textarea {
    font-size: 16px !important; /* prevent iOS zoom on focus */
    padding: 13px 14px !important;
  }
  /* Step-1 name row: keep side-by-side */
  #cs-booking-widget.cs-booking--modern .cs-step1__name-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  /* Navigation buttons: tighter padding */
  #cs-booking-widget.cs-booking--modern .cs-booking__navigation {
    gap: 8px !important;
    margin-top: 12px !important;
  }
  #cs-booking-widget.cs-booking--modern .cs-booking__button {
    padding: 14px 18px !important;
    min-height: 50px !important;
    font-size: 15px !important;
  }
  /* Welcome overlay text scaling */
  .cs-modern-welcome-content h1 {
    font-size: 34px !important;
  }
  .cs-modern-welcome-orb {
    width: 130px !important;
    height: 130px !important;
  }
  .cs-modern-welcome-orb svg {
    width: 60px !important;
    height: 60px !important;
  }
  /* Brand line tighter */
  #cs-booking-widget.cs-booking--modern .cs-modern-brand-inside {
    font-size: 12px !important;
    margin: -4px 0 8px !important;
  }
  /* Choice rows tighter */
  #cs-booking-widget.cs-booking--modern .cs-triage__option-card,
  #cs-booking-widget.cs-booking--modern .cs-qualifying__option-btn {
    padding: 14px !important;
    font-size: 14.5px !important;
  }
  /* Provider card name */
  #cs-booking-widget.cs-booking--modern .cs-triage__option-name {
    font-size: 15.5px !important;
  }
  /* Sub copy */
  #cs-booking-widget.cs-booking--modern p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  /* Combo callouts */
  #cs-booking-widget.cs-booking--modern .cs-combo__provider-warning,
  #cs-booking-widget.cs-booking--modern .cs-combo__billing-notice,
  #cs-booking-widget.cs-booking--modern .cs-combo__toggle,
  #cs-booking-widget.cs-booking--modern .cs-combo__acknowledge {
    padding: 12px !important;
    font-size: 12.5px !important;
  }
  /* Summary card on confirmation */
  #cs-booking-widget.cs-booking--modern .cs-booking__confirmation-summary {
    padding: 12px !important;
  }
  #cs-booking-widget.cs-booking--modern .cs-booking__summary-value {
    font-size: 13.5px !important;
  }
  /* Confirmation check disc */
  #cs-booking-widget.cs-booking--modern .cs-booking__checkmark {
    width: 64px !important;
    height: 64px !important;
    font-size: 34px !important;
  }
}

/* ===================================================================
 * @media (max-width: 380px) -- small phones
 * =================================================================== */
@media (max-width: 380px) {
  #cs-booking-widget.cs-booking--modern {
    padding: 12px 12px 16px !important;
    border-radius: 14px !important;
  }
  #cs-booking-widget.cs-booking--modern h1 {
    font-size: 24px !important;
  }
  #cs-booking-widget.cs-booking--modern h2 {
    font-size: 22px !important;
  }
  /* Time slots: 3 cols but smaller still */
  #cs-booking-widget.cs-booking--modern .cs-booking__time-slot {
    font-size: 14px !important;
    min-height: 48px !important;
    padding: 10px 2px !important;
    border-radius: 12px !important;
  }
  /* Calendar */
  #cs-booking-widget.cs-booking--modern .cs-booking__calendar {
    padding: 8px !important;
  }
  #cs-booking-widget.cs-booking--modern .cs-booking__calendar-day {
    font-size: 12.5px !important;
    border-radius: 7px !important;
  }
  #cs-booking-widget.cs-booking--modern .cs-booking__calendar-days {
    gap: 3px !important;
  }
  #cs-booking-widget.cs-booking--modern .cs-booking__calendar-day-header {
    font-size: 9.5px !important;
    padding: 4px 0 !important;
  }
  #cs-booking-widget.cs-booking--modern .cs-booking__month-nav button,
  #cs-booking-widget.cs-booking--modern .cs-booking__calendar-header button {
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
  }
  #cs-booking-widget.cs-booking--modern .cs-booking__month-display {
    font-size: 15px !important;
  }
  /* Nav buttons */
  #cs-booking-widget.cs-booking--modern .cs-booking__button {
    padding: 13px 14px !important;
    font-size: 14.5px !important;
    min-height: 48px !important;
  }
  /* Step indicator dots: keep visible but tighter gap */
  #cs-booking-widget.cs-booking--modern .cs-booking__step-indicator {
    gap: 4px !important;
  }
  #cs-booking-widget.cs-booking--modern .cs-booking__step-dot-circle {
    width: 18px !important;
    min-width: 18px !important;
  }
  #cs-booking-widget.cs-booking--modern .cs-booking__step-dot--active .cs-booking__step-dot-circle {
    width: 26px !important;
    min-width: 26px !important;
  }
  /* Welcome */
  .cs-modern-welcome-content h1 {
    font-size: 30px !important;
  }
  .cs-modern-welcome-orb {
    width: 110px !important;
    height: 110px !important;
  }
  /* Provider name */
  #cs-booking-widget.cs-booking--modern .cs-triage__option-name {
    font-size: 14.5px !important;
  }
  /* Summary cards on confirmation */
  #cs-booking-widget.cs-booking--modern .cs-booking__confirmation-instructions,
  #cs-booking-widget.cs-booking--modern .cs-booking__fee-notice {
    padding: 12px !important;
  }
}

/* ===================================================================
 * Very small phones / portrait keyboard (max-height tweaks)
 * =================================================================== */
@media (max-height: 640px) {
  .cs-modern-welcome-hero {
    padding: 10px !important;
  }
  .cs-modern-welcome-orb {
    width: 100px !important;
    height: 100px !important;
  }
  .cs-modern-welcome-orb svg {
    width: 48px !important;
    height: 48px !important;
  }
  .cs-modern-welcome-content {
    padding-top: 16px !important;
    padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
  }
  .cs-modern-welcome-meta {
    margin-bottom: 14px !important;
  }
}

/* ===================================================================
 * Tap-friendly default for the entire widget on touch devices
 * =================================================================== */
@media (hover: none) {
  #cs-booking-widget.cs-booking--modern * {
    -webkit-tap-highlight-color: rgba(0,174,239,.15);
  }
}


/* ===================================================================
 * 3.25.279 -- Progress summary breadcrumb always on one line
 * =================================================================== */

#cs-booking-widget.cs-booking--modern .cs-booking__progress-summary {
  display: flex !important;
  flex-wrap: nowrap !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  white-space: nowrap !important;
  padding: 8px 14px !important;
  border-radius: 100px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
#cs-booking-widget.cs-booking--modern .cs-booking__progress-summary::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
#cs-booking-widget.cs-booking--modern .cs-booking__progress-summary > span {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* Smaller font on phones so it usually fits without scrolling */
@media (max-width: 480px) {
  #cs-booking-widget.cs-booking--modern .cs-booking__progress-summary {
    font-size: 11px !important;
    gap: 8px !important;
    padding: 7px 12px !important;
  }
  #cs-booking-widget.cs-booking--modern .cs-booking__progress-summary > span > span:first-child {
    font-size: 9px !important;
  }
}
@media (max-width: 380px) {
  #cs-booking-widget.cs-booking--modern .cs-booking__progress-summary {
    font-size: 10.5px !important;
    gap: 6px !important;
    padding: 6px 10px !important;
  }
}


/* ===================================================================
 * 3.25.280 -- Triage chat UI (mobile-first)
 * =================================================================== */

/* Chat container: scrollable, max-height so it doesn't push the input
   off-screen. Tap targets keep working as the bubbles aren't buttons. */
#cs-booking-widget.cs-booking--modern .cs-triage__chat {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 4px 0 12px !important;
  max-height: 50vh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  margin-bottom: 12px !important;
}

/* Bot bubble: left aligned, paper-2 background, tail bottom-left */
#cs-booking-widget.cs-booking--modern .cs-triage__bubble,
#cs-booking-widget.cs-booking--modern .cs-triage__bubble--assistant {
  background: var(--cm-paper-2) !important;
  color: var(--cm-ink) !important;
  border-radius: 18px 18px 18px 4px !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  max-width: 86% !important;
  align-self: flex-start !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* User bubble: right aligned, dark ink, white text, tail bottom-right */
#cs-booking-widget.cs-booking--modern .cs-triage__bubble--user {
  background: var(--cm-ink) !important;
  color: #ffffff !important;
  border-radius: 18px 18px 4px 18px !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  max-width: 86% !important;
  align-self: flex-end !important;
  margin: 0 !important;
  box-shadow: 0 4px 14px -6px rgba(10,22,40,.35) !important;
}

/* Reply input row: input grows, send button stays narrow */
#cs-booking-widget.cs-booking--modern .cs-triage__reply-group {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  align-items: stretch !important;
  margin: 0 0 10px !important;
  width: 100% !important;
}
#cs-booking-widget.cs-booking--modern .cs-triage__reply-input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  background: var(--cm-paper-2) !important;
  border: 1.5px solid var(--cm-line) !important;
  border-radius: 100px !important;
  padding: 12px 18px !important;
  font-size: 15px !important;
  color: var(--cm-ink) !important;
  outline: none !important;
  font-family: inherit !important;
  -webkit-appearance: none;
  min-height: 48px;
}
#cs-booking-widget.cs-booking--modern .cs-triage__reply-input:focus {
  border-color: var(--cm-cy) !important;
  background: #fff !important;
}

/* Send button: narrow cyan pill (NOT flex-1) */
#cs-booking-widget.cs-booking--modern .cs-triage__reply-btn,
#cs-booking-widget.cs-booking--modern .cs-triage__reply-btn.cs-booking__button,
#cs-booking-widget.cs-booking--modern .cs-triage__reply-btn.cs-booking__button--primary {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 80px !important;
  max-width: 110px !important;
  background: var(--cm-cy) !important;
  background-color: var(--cm-cy) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 100px !important;
  padding: 12px 18px !important;
  min-height: 48px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer;
  box-shadow: 0 8px 20px -8px rgba(0,174,239,.55) !important;
  text-shadow: none !important;
  margin: 0 !important;
}
#cs-booking-widget.cs-booking--modern .cs-triage__reply-btn:hover:not(:disabled) {
  background: #00C8FF !important;
  background-color: #00C8FF !important;
}
#cs-booking-widget.cs-booking--modern .cs-triage__reply-btn:disabled {
  background: var(--cm-line) !important;
  background-color: var(--cm-line) !important;
  color: var(--cm-muted) !important;
  box-shadow: none !important;
  cursor: not-allowed;
  opacity: 1 !important;
}

/* Triage skip link */
#cs-booking-widget.cs-booking--modern .cs-triage__skip-link {
  display: inline-block !important;
  color: var(--cm-muted) !important;
  text-decoration: none !important;
  font-size: 13px !important;
  padding: 6px 0 !important;
  cursor: pointer;
}
#cs-booking-widget.cs-booking--modern .cs-triage__skip-link:hover {
  color: var(--cm-cy) !important;
}

/* --- Lonely Back button (triage's renderTriageBackOnly) --
       Detect by being the ONLY child of cs-booking__navigation and
       being secondary. Render as a small centered link instead of
       full-width. */
#cs-booking-widget.cs-booking--modern .cs-booking__navigation:has(> .cs-booking__button:only-child) {
  justify-content: center !important;
  background: transparent !important;
  padding: 0 !important;
}
#cs-booking-widget.cs-booking--modern .cs-booking__navigation > .cs-booking__button.cs-booking__button--secondary:only-child {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 120px !important;
  background: transparent !important;
  border: none !important;
  color: var(--cm-muted) !important;
  text-decoration: underline !important;
  font-size: 13px !important;
  min-height: 36px !important;
  padding: 8px 14px !important;
  box-shadow: none !important;
}
#cs-booking-widget.cs-booking--modern .cs-booking__navigation > .cs-booking__button.cs-booking__button--secondary:only-child:hover {
  color: var(--cm-cy) !important;
  background: transparent !important;
}

/* Typing indicator (if triage loading state shows it) */
#cs-booking-widget.cs-booking--modern .cs-triage__loading {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 16px !important;
  background: var(--cm-paper-2) !important;
  border-radius: 18px 18px 18px 4px !important;
  align-self: flex-start !important;
  max-width: 60% !important;
  color: var(--cm-muted) !important;
  font-size: 13px !important;
}
#cs-booking-widget.cs-booking--modern .cs-triage__loading .cs-booking__spinner {
  width: 14px !important;
  height: 14px !important;
  border-width: 2px !important;
  border-color: var(--cm-line) !important;
  border-top-color: var(--cm-cy) !important;
}
#cs-booking-widget.cs-booking--modern .cs-triage__loading p {
  margin: 0 !important;
  font-size: 13px !important;
}

@media (max-width: 480px) {
  #cs-booking-widget.cs-booking--modern .cs-triage__chat { max-height: 44vh !important; }
  #cs-booking-widget.cs-booking--modern .cs-triage__bubble,
  #cs-booking-widget.cs-booking--modern .cs-triage__bubble--user,
  #cs-booking-widget.cs-booking--modern .cs-triage__bubble--assistant {
    font-size: 14px !important;
    padding: 10px 14px !important;
    max-width: 84% !important;
  }
  #cs-booking-widget.cs-booking--modern .cs-triage__reply-input {
    padding: 11px 16px !important;
    font-size: 16px !important; /* iOS no zoom */
  }
  #cs-booking-widget.cs-booking--modern .cs-triage__reply-btn {
    min-width: 72px !important;
    padding: 11px 14px !important;
    font-size: 14px !important;
  }
}


/* ===================================================================
 * 3.25.281 -- Brand size, icon alignment, font family audit
 * =================================================================== */

/* --- Brand wordmark: bigger and prouder --- */
#cs-booking-widget.cs-booking--modern .cs-modern-brand-inside {
  font-family: 'Fraunces', 'Newsreader', Georgia, serif !important;
  font-weight: 500 !important;
  font-size: 19px !important;
  letter-spacing: -.005em !important;
  color: var(--cm-ink) !important;
  text-align: center !important;
  margin: 0 0 14px !important;
  display: block !important;
  font-variation-settings: "opsz" 80, "SOFT" 30, "WONK" 0;
}

/* --- Visit type chip icons: same size, same baseline --- */
#cs-booking-widget.cs-booking--modern .cs-triage__chip {
  align-items: center !important;
  gap: 12px !important;
}
#cs-booking-widget.cs-booking--modern .cs-triage__chip-icon {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border-radius: 11px !important;
  background: #ffffff !important;
  color: var(--cm-cy) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  font-size: 22px !important;
  line-height: 1 !important;
  text-align: center !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: 0 1px 2px rgba(10,22,40,.04);
}

/* --- Universal font family: Geist body, Fraunces display --- */
/* Body / sans for everything that isn't a display heading */
#cs-booking-widget.cs-booking--modern,
#cs-booking-widget.cs-booking--modern p,
#cs-booking-widget.cs-booking--modern button,
#cs-booking-widget.cs-booking--modern input,
#cs-booking-widget.cs-booking--modern textarea,
#cs-booking-widget.cs-booking--modern select,
#cs-booking-widget.cs-booking--modern a,
#cs-booking-widget.cs-booking--modern span,
#cs-booking-widget.cs-booking--modern div,
#cs-booking-widget.cs-booking--modern label,
#cs-booking-widget.cs-booking--modern li {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
}

/* Display / serif for editorial headings + numeric chrome */
#cs-booking-widget.cs-booking--modern h1,
#cs-booking-widget.cs-booking--modern h2,
#cs-booking-widget.cs-booking--modern h3,
#cs-booking-widget.cs-booking--modern .cs-triage__greeting-text,
#cs-booking-widget.cs-booking--modern .cs-triage__options-message,
#cs-booking-widget.cs-booking--modern .cs-triage__option-name,
#cs-booking-widget.cs-booking--modern .cs-qualifying__question,
#cs-booking-widget.cs-booking--modern .cs-booking__time-slot,
#cs-booking-widget.cs-booking--modern .cs-booking__slot-time,
#cs-booking-widget.cs-booking--modern .cs-booking__calendar-day,
#cs-booking-widget.cs-booking--modern .cs-booking__month-display,
#cs-booking-widget.cs-booking--modern .cs-modern-brand-inside,
#cs-booking-widget.cs-booking--modern .cs-modern-welcome-brand,
#cs-booking-widget.cs-booking--modern .cs-booking__provider-photo,
#cs-booking-widget.cs-booking--modern .cs-booking__provider-avatar,
#cs-booking-widget.cs-booking--modern .cs-booking__provider-initials,
#cs-booking-widget.cs-booking--modern .cs-modern-avatar {
  font-family: 'Fraunces', 'Newsreader', Georgia, serif !important;
  font-variation-settings: "opsz" 80, "SOFT" 30, "WONK" 0;
}

/* The slot-provider sub-label inside time slots stays in Geist */
#cs-booking-widget.cs-booking--modern .cs-booking__slot-provider {
  font-family: 'Geist', sans-serif !important;
}

/* Italic emphasis: Fraunces with SOFT/WONK accent */
#cs-booking-widget.cs-booking--modern h1 em,
#cs-booking-widget.cs-booking--modern h2 em,
#cs-booking-widget.cs-booking--modern h3 em {
  font-family: 'Fraunces', serif !important;
  font-style: italic !important;
  color: var(--cm-mg) !important;
  font-variation-settings: "opsz" 80, "SOFT" 100, "WONK" 1;
}

/* The confirmation checkmark glyph should not become a serif character */
#cs-booking-widget.cs-booking--modern .cs-booking__checkmark {
  font-family: 'Geist', sans-serif !important;
}

/* --- Mobile sizing for brand --- */
@media (max-width: 480px) {
  #cs-booking-widget.cs-booking--modern .cs-modern-brand-inside {
    font-size: 17px !important;
    margin: 0 0 10px !important;
  }
}
@media (max-width: 380px) {
  #cs-booking-widget.cs-booking--modern .cs-modern-brand-inside {
    font-size: 16px !important;
    margin: 0 0 8px !important;
  }
}

/* ===================================================================
 * 3.25.284 -- Force triage chip content to left-align
 * =================================================================== */
#cs-booking-widget.cs-booking--modern .cs-triage__chip {
  justify-content: flex-start !important;
  text-align: left !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
}
#cs-booking-widget.cs-booking--modern .cs-triage__chip-icon {
  margin-right: 4px !important;
}

/* ===================================================================
 * 3.25.285 -- Flip time pills to Geist (calendar dates stay Fraunces)
 * =================================================================== */
#cs-booking-widget.cs-booking--modern .cs-booking__time-slot,
#cs-booking-widget.cs-booking--modern .cs-booking__slot-time {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 600 !important;
  font-variation-settings: normal !important;
  letter-spacing: -.01em !important;
}

/* ===================================================================
 * 3.25.286 -- Breadcrumb pill collapses to stacked card on mobile
 * (Overrides prior 3.25.279 horizontal-scroll attempt at <=540px.)
 * =================================================================== */

/* Desktop: keep horizontal pill (already styled). Just ensure no scroll
   needed at >540 widths -- shrink font slightly so it fits. */
@media (min-width: 541px) {
  #cs-booking-widget.cs-booking--modern .cs-booking__progress-summary {
    font-size: 12px !important;
    padding: 7px 14px !important;
  }
}

/* Mobile / narrow: stacked card layout */
@media (max-width: 540px) {
  #cs-booking-widget.cs-booking--modern .cs-booking__progress-summary {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    white-space: normal !important;
    background: var(--cm-paper-2) !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 0 !important;
    gap: 0 !important;
    margin-bottom: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Hide pipe separators */
  #cs-booking-widget.cs-booking--modern .cs-booking__progress-summary > span[aria-hidden="true"] {
    display: none !important;
  }
  /* Each data row */
  #cs-booking-widget.cs-booking--modern .cs-booking__progress-summary > span:not([aria-hidden="true"]) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 9px 14px !important;
    border-bottom: 1px solid rgba(229,231,235,.7) !important;
    background: transparent !important;
    white-space: normal !important;
    font-size: 13px !important;
    flex-shrink: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #cs-booking-widget.cs-booking--modern .cs-booking__progress-summary > span:not([aria-hidden="true"]):last-child {
    border-bottom: none !important;
  }
  /* Eyebrow label -- fixed width column for alignment */
  #cs-booking-widget.cs-booking--modern .cs-booking__progress-summary > span:not([aria-hidden="true"]) > span:first-child {
    flex: 0 0 78px !important;
    font-size: 9.5px !important;
    color: var(--cm-cy) !important;
    text-transform: uppercase !important;
    letter-spacing: .09em !important;
    font-weight: 700 !important;
  }
  /* Value -- fills remaining space, ellipsis if too long */
  #cs-booking-widget.cs-booking--modern .cs-booking__progress-summary > span:not([aria-hidden="true"]) > span:last-child {
    flex: 1 1 auto !important;
    font-size: 13.5px !important;
    color: var(--cm-ink) !important;
    font-weight: 500 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }
}

@media (max-width: 380px) {
  #cs-booking-widget.cs-booking--modern .cs-booking__progress-summary > span:not([aria-hidden="true"]) {
    padding: 8px 12px !important;
    gap: 10px !important;
  }
  #cs-booking-widget.cs-booking--modern .cs-booking__progress-summary > span:not([aria-hidden="true"]) > span:first-child {
    flex: 0 0 70px !important;
    font-size: 9px !important;
  }
  #cs-booking-widget.cs-booking--modern .cs-booking__progress-summary > span:not([aria-hidden="true"]) > span:last-child {
    font-size: 13px !important;
  }
}

/* ===================================================================
 * 3.25.291 -- Modern design polish: animations, focus, micro-interactions
 * =================================================================== */

/* --- Reduced motion respect --- */
@media (prefers-reduced-motion: reduce) {
  #cs-booking-widget.cs-booking--modern *,
  #cs-booking-widget.cs-booking--modern *::before,
  #cs-booking-widget.cs-booking--modern *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Smooth step transitions --- */
@keyframes cs-step-in {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
#cs-booking-widget.cs-booking--modern .cs-booking__step {
  animation: cs-step-in .35s cubic-bezier(.16,1,.3,1);
}

/* --- Confirmation checkmark celebrate --- */
@keyframes cs-check-pop {
  0%   { transform: scale(0); opacity: 0; }
  50%  { transform: scale(1.15); opacity: 1; }
  75%  { transform: scale(.95); }
  100% { transform: scale(1); }
}
@keyframes cs-check-glow {
  0%, 100% { box-shadow: 0 16px 36px -10px rgba(0,174,239,.55); }
  50%      { box-shadow: 0 20px 48px -8px rgba(0,174,239,.75); }
}
#cs-booking-widget.cs-booking--modern .cs-booking__checkmark {
  animation: cs-check-pop .6s cubic-bezier(.34,1.56,.64,1) both,
             cs-check-glow 2.4s ease-in-out infinite .6s;
}

/* --- Focus rings: visible on keyboard nav, invisible on mouse --- */
#cs-booking-widget.cs-booking--modern button:focus-visible,
#cs-booking-widget.cs-booking--modern a:focus-visible,
#cs-booking-widget.cs-booking--modern input:focus-visible,
#cs-booking-widget.cs-booking--modern textarea:focus-visible,
#cs-booking-widget.cs-booking--modern select:focus-visible,
#cs-booking-widget.cs-booking--modern [role="button"]:focus-visible {
  outline: 2px solid #00AEEF !important;
  outline-offset: 2px !important;
  border-radius: 14px;
}
#cs-booking-widget.cs-booking--modern button:focus:not(:focus-visible),
#cs-booking-widget.cs-booking--modern a:focus:not(:focus-visible) {
  outline: none !important;
}

/* --- Hover lift on choice cards / chips / provider cards --- */
#cs-booking-widget.cs-booking--modern .cs-triage__chip:hover:not(:disabled),
#cs-booking-widget.cs-booking--modern .cs-triage__option-card:hover,
#cs-booking-widget.cs-booking--modern .cs-qualifying__option-btn:hover {
  transform: translateY(-1px);
  transition: transform .18s, background .18s, border-color .18s, box-shadow .18s;
}
#cs-booking-widget.cs-booking--modern .cs-triage__chip:active:not(:disabled),
#cs-booking-widget.cs-booking--modern .cs-triage__option-card:active,
#cs-booking-widget.cs-booking--modern .cs-qualifying__option-btn:active {
  transform: translateY(0);
}

/* --- Time slot select feedback: subtle scale --- */
#cs-booking-widget.cs-booking--modern .cs-booking__time-slot:active:not(:disabled) {
  transform: scale(.97) translateY(0);
}
#cs-booking-widget.cs-booking--modern .cs-booking__calendar-day--available:active:not(.cs-booking__calendar-day--selected) {
  transform: scale(.95);
}

/* --- Button press feedback --- */
@keyframes cs-button-press {
  0%   { transform: scale(1); }
  50%  { transform: scale(.96); }
  100% { transform: scale(1); }
}
#cs-booking-widget.cs-booking--modern .cs-booking__button:not(:disabled):active {
  transform: scale(.98);
}

/* --- Loading spinner upgrade --- */
@keyframes cs-spinner-spin {
  to { transform: rotate(360deg); }
}
#cs-booking-widget.cs-booking--modern .cs-booking__spinner {
  display: inline-block !important;
  width: 28px !important;
  height: 28px !important;
  border: 3px solid var(--cm-paper-2) !important;
  border-top-color: var(--cm-cy) !important;
  border-radius: 50% !important;
  animation: cs-spinner-spin .8s linear infinite !important;
}
#cs-booking-widget.cs-booking--modern .cs-booking__loading {
  text-align: center;
  padding: 32px 0 !important;
}
#cs-booking-widget.cs-booking--modern .cs-booking__loading p {
  margin: 14px 0 0 !important;
  color: var(--cm-muted) !important;
  font-size: 14px !important;
}

/* --- Skeleton shimmer for slot loading (if widget ever emits .skel) --- */
@keyframes cs-skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
#cs-booking-widget.cs-booking--modern .cs-booking__skel {
  background: linear-gradient(90deg, var(--cm-paper-2) 0%, #e8ebe5 50%, var(--cm-paper-2) 100%);
  background-size: 200% 100%;
  animation: cs-skel-shimmer 1.4s linear infinite;
  border-radius: 14px;
}

/* --- Selected state ring pulse on triage option card --- */
@keyframes cs-select-pulse {
  0%   { box-shadow: 0 8px 24px -10px rgba(0,174,239,.4), 0 0 0 0 rgba(0,174,239,.4); }
  100% { box-shadow: 0 8px 24px -10px rgba(0,174,239,.4), 0 0 0 8px rgba(0,174,239,0); }
}
#cs-booking-widget.cs-booking--modern .cs-triage__option-card--selected {
  animation: cs-select-pulse .65s ease-out;
}

/* --- iOS: scroll input into view on focus, prevent zoom --- */
#cs-booking-widget.cs-booking--modern input,
#cs-booking-widget.cs-booking--modern textarea,
#cs-booking-widget.cs-booking--modern select {
  font-size: max(16px, 1em) !important; /* prevents iOS Safari from auto-zooming */
  scroll-margin-top: 16px;
  scroll-margin-bottom: 80px;
}

/* --- Smooth scroll inside the widget container --- */
#cs-booking-widget.cs-booking--modern {
  scroll-behavior: smooth;
}

/* --- Disabled buttons feel less dead: keep some color --- */
#cs-booking-widget.cs-booking--modern .cs-booking__button:disabled {
  opacity: .55 !important;
  filter: saturate(.7);
}

/* --- Confirmation summary value: subtle gradient underline on hover (for editability cue if ever interactive) --- */
#cs-booking-widget.cs-booking--modern .cs-booking__summary-item {
  transition: background .18s;
}

/* --- Welcome screen button: gentle nudge animation to draw attention --- */
@keyframes cs-welcome-nudge {
  0%, 88%, 100% { transform: translateX(0); }
  92% { transform: translateX(3px); }
  96% { transform: translateX(-1px); }
}
.cs-modern-welcome-btn svg {
  animation: cs-welcome-nudge 5s ease-in-out infinite;
  animation-delay: 2.5s;
}

/* --- Provider card hover: lift and shadow --- */
#cs-booking-widget.cs-booking--modern .cs-triage__option-card:hover:not(.cs-triage__option-card--selected) {
  box-shadow: 0 8px 20px -10px rgba(10,22,40,.18) !important;
}

/* --- Selected provider card: ring stays after pulse --- */
#cs-booking-widget.cs-booking--modern .cs-triage__option-card--selected {
  box-shadow: 0 10px 28px -10px rgba(0,174,239,.55), 0 0 0 2px rgba(0,174,239,.2) !important;
}

/* --- Triage chip hover: brighter icon background --- */
#cs-booking-widget.cs-booking--modern .cs-triage__chip:hover .cs-triage__chip-icon {
  background: var(--cm-cy) !important;
  color: #ffffff !important;
  transition: background .18s, color .18s;
}
#cs-booking-widget.cs-booking--modern .cs-triage__chip:hover .cs-triage__chip-icon svg {
  color: #ffffff !important;
}

/* --- Print: clean confirmation card --- */
@media print {
  body * { visibility: hidden; }
  #cs-booking-widget.cs-booking--modern,
  #cs-booking-widget.cs-booking--modern * {
    visibility: visible;
  }
  #cs-booking-widget.cs-booking--modern {
    position: absolute;
    top: 0; left: 0; right: 0;
    box-shadow: none !important;
    border: none !important;
    background: #fff !important;
    padding: 12px !important;
  }
  #cs-booking-widget.cs-booking--modern .cs-booking__navigation,
  #cs-booking-widget.cs-booking--modern .cs-booking__step-indicator,
  #cs-booking-widget.cs-booking--modern .cs-modern-brand-inside,
  #cs-booking-widget.cs-booking--modern .cs-booking__header {
    display: none !important;
  }
  #cs-booking-widget.cs-booking--modern .cs-booking__checkmark {
    background: #00AEEF !important;
    color: #fff !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
    animation: none !important;
  }
}

/* --- Welcome dismiss: brief fade-out --- */
@keyframes cs-welcome-out {
  to { opacity: 0; transform: scale(.98); }
}

/* --- Subtle ink-button shadow lift on hover --- */
#cs-booking-widget.cs-booking--modern .cs-booking__button--primary:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 32px -8px rgba(10,22,40,.55) !important;
  transition: transform .18s, box-shadow .18s, background-color .18s;
}
#cs-booking-widget.cs-booking--modern .cs-booking__button--primary:not(:disabled):active {
  transform: translateY(0);
}


/* ===================================================================
 * 3.25.297 -- Prominent headings, header back arrow
 * =================================================================== */

/* --- Triage greeting reads as the page's H1 --- */
#cs-booking-widget.cs-booking--modern .cs-triage__greeting-text,
#cs-booking-widget.cs-booking--modern .cs-qualifying__question,
#cs-booking-widget.cs-booking--modern .cs-triage__options-message {
  font-family: 'Fraunces', 'Newsreader', Georgia, serif !important;
  font-weight: 500 !important;
  font-size: clamp(24px, 6vw, 32px) !important;
  line-height: 1.12 !important;
  letter-spacing: -.022em !important;
  color: var(--cm-ink) !important;
  margin: 18px 0 18px !important;
  text-align: center !important;
  font-variation-settings: "opsz" 80, "SOFT" 30, "WONK" 0;
}
#cs-booking-widget.cs-booking--modern .cs-triage__greeting-text em,
#cs-booking-widget.cs-booking--modern .cs-qualifying__question em,
#cs-booking-widget.cs-booking--modern .cs-triage__options-message em {
  font-style: italic !important;
  color: var(--cm-mg) !important;
  font-variation-settings: "opsz" 80, "SOFT" 100, "WONK" 1;
}

/* Slightly bump step H1/H2 prominence too (was clamped on the low side) */
#cs-booking-widget.cs-booking--modern .cs-booking__step h1 {
  font-size: clamp(28px, 6.8vw, 36px) !important;
  line-height: 1.08 !important;
}
#cs-booking-widget.cs-booking--modern .cs-booking__step h2 {
  font-size: clamp(24px, 6vw, 32px) !important;
  line-height: 1.12 !important;
}

/* --- Header back arrow (top-left, registration-widget style) --- */
#cs-booking-widget.cs-booking--modern {
  position: relative !important;
}
#cs-booking-widget.cs-booking--modern .cs-modern-back-arrow {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  border: 1px solid var(--cm-line) !important;
  color: var(--cm-ink) !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 10 !important;
  box-shadow: 0 1px 2px rgba(10,22,40,.06) !important;
  transition: background-color .15s ease, transform .12s ease, box-shadow .15s ease !important;
}
#cs-booking-widget.cs-booking--modern .cs-modern-back-arrow:hover {
  background: #f4f6f8 !important;
  box-shadow: 0 2px 6px rgba(10,22,40,.08) !important;
}
#cs-booking-widget.cs-booking--modern .cs-modern-back-arrow:active {
  transform: scale(.96) !important;
}
#cs-booking-widget.cs-booking--modern .cs-modern-back-arrow:focus-visible {
  outline: 2px solid var(--cm-cy) !important;
  outline-offset: 2px !important;
}

/* Push the brand wordmark down so it clears the arrow */
#cs-booking-widget.cs-booking--modern.cs-modern-has-back .cs-modern-brand-inside {
  padding-top: 6px !important;
}

/* --- Hide the bottom Back button only when our arrow is present ---
   We keep the original navigation block but visually collapse the Back
   button. Continue / Next stays in place. */
#cs-booking-widget.cs-booking--modern.cs-modern-has-back .cs-booking__navigation .cs-booking__button--secondary {
  display: none !important;
}
/* If the nav contained ONLY the Back button, collapse the whole nav row
   so we don't leave an empty strip at the bottom. */
#cs-booking-widget.cs-booking--modern.cs-modern-has-back .cs-booking__navigation:not(:has(.cs-booking__button--primary)) {
  display: none !important;
}

/* --- Mobile arrow sizing --- */
@media (max-width: 480px) {
  #cs-booking-widget.cs-booking--modern .cs-modern-back-arrow {
    top: 10px !important;
    left: 10px !important;
    width: 36px !important;
    height: 36px !important;
  }
  #cs-booking-widget.cs-booking--modern .cs-triage__greeting-text,
  #cs-booking-widget.cs-booking--modern .cs-qualifying__question,
  #cs-booking-widget.cs-booking--modern .cs-triage__options-message {
    font-size: clamp(22px, 6vw, 26px) !important;
    margin: 14px 0 16px !important;
  }
}


/* ===================================================================
 * 3.25.298 -- Aggressive pp-registration design language port
 *
 * This block is END-OF-CASCADE and intentionally heavy-handed.
 * All values mirror the pp-registration distribution CSS variables
 * (--ppr-cyan, --ppr-magenta, --ppr-ink, etc.).
 * =================================================================== */

/* --- Italic emphasis: MAGENTA, not cyan (registration's signature) --- */
#cs-booking-widget.cs-booking--modern h1 em,
#cs-booking-widget.cs-booking--modern h2 em,
#cs-booking-widget.cs-booking--modern h3 em,
#cs-booking-widget.cs-booking--modern .cs-triage__greeting-text em,
#cs-booking-widget.cs-booking--modern .cs-qualifying__question em,
#cs-booking-widget.cs-booking--modern .cs-triage__options-message em,
#cs-booking-widget.cs-booking--modern .cs-modern-welcome-content h1 em {
  color: #EC008C !important;
  font-style: italic !important;
  font-variation-settings: "opsz" 80, "SOFT" 100, "WONK" 1 !important;
}

/* --- Eyebrow label (above each step's heading) --- */
#cs-booking-widget.cs-booking--modern .cs-modern-eyebrow {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--cm-cy) !important;
  margin: 12px 0 8px !important;
  text-align: center !important;
  display: block !important;
}

/* --- Screen-entrance animation (translateX slide) --- */
@keyframes cs-modern-screen-in {
  0%   { opacity: 0; transform: translateX(28px); }
  100% { opacity: 1; transform: translateX(0); }
}
#cs-booking-widget.cs-booking--modern .cs-modern-screen-in {
  animation: cs-modern-screen-in .36s cubic-bezier(.16, 1, .3, 1) both;
}

/* --- Header row: re-style back arrow as rounded-square (12px), not circle --- */
/* Registration uses 44x44 with 12px border-radius and paper-2 fill. */
#cs-booking-widget.cs-booking--modern .cs-modern-back-arrow {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: var(--cm-paper-2) !important;
  border: none !important;
  color: var(--cm-ink) !important;
  box-shadow: none !important;
  top: 18px !important;
  left: 18px !important;
}
#cs-booking-widget.cs-booking--modern .cs-modern-back-arrow:hover {
  background: #e9eae5 !important;
  box-shadow: none !important;
}
#cs-booking-widget.cs-booking--modern .cs-modern-back-arrow svg {
  width: 20px !important;
  height: 20px !important;
}

/* --- Triage chips: full registration ".ppr-choice" treatment --- */
/* paper-2 fill, 1.5px transparent border, becomes white + cyan border on
   hover/active. The white-bg icon container is dropped to a transparent
   cyan glyph to remove the "selected checkbox" visual. */
#cs-booking-widget.cs-booking--modern .cs-triage__chip {
  background: var(--cm-paper-2) !important;
  border: 1.5px solid transparent !important;
  border-radius: 14px !important;
  padding: 18px !important;
  min-height: 64px !important;
  gap: 14px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--cm-ink) !important;
  box-shadow: none !important;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease !important;
}
#cs-booking-widget.cs-booking--modern .cs-triage__chip:hover {
  background: #ffffff !important;
  border-color: var(--cm-cy) !important;
  box-shadow: 0 8px 24px -10px rgba(0,174,239,.30) !important;
}
#cs-booking-widget.cs-booking--modern .cs-triage__chip:active {
  transform: scale(.985) !important;
}
#cs-booking-widget.cs-booking--modern .cs-triage__chip-icon {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--cm-cy) !important;
  box-shadow: none !important;
}
#cs-booking-widget.cs-booking--modern .cs-triage__chip-icon svg {
  width: 24px !important;
  height: 24px !important;
}

/* --- Primary button: dark-ink fill with registration's exact shadow --- */
#cs-booking-widget.cs-booking--modern .cs-booking__button--primary,
#cs-booking-widget.cs-booking--modern button.cs-booking__button--primary,
#cs-booking-widget.cs-booking--modern a.cs-booking__button--primary {
  background: var(--cm-ink) !important;
  background-color: var(--cm-ink) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 14px !important;
  min-height: 56px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-family: 'Geist', -apple-system, sans-serif !important;
  box-shadow: 0 6px 20px -8px rgba(10,22,40,.4) !important;
  transition: box-shadow .2s ease, transform .12s ease !important;
}
#cs-booking-widget.cs-booking--modern .cs-booking__button--primary:hover:not(:disabled) {
  background: var(--cm-ink) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 28px -8px rgba(10,22,40,.5) !important;
}
#cs-booking-widget.cs-booking--modern .cs-booking__button--primary:active:not(:disabled) {
  transform: scale(.98) !important;
}

/* --- Secondary button: transparent + cyan border + cyan text --- */
#cs-booking-widget.cs-booking--modern .cs-booking__button--secondary {
  background: transparent !important;
  color: var(--cm-cy) !important;
  border: 1.5px solid var(--cm-cy) !important;
  border-radius: 14px !important;
  min-height: 52px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: none !important;
}

/* --- Bottom actions: gradient fade from transparent to paper --- */
#cs-booking-widget.cs-booking--modern .cs-booking__navigation {
  position: relative !important;
  padding-top: 18px !important;
  margin-top: 8px !important;
}
#cs-booking-widget.cs-booking--modern .cs-booking__navigation::before {
  content: '' !important;
  position: absolute !important;
  left: 0;
  right: 0;
  top: -20px;
  height: 24px;
  background: linear-gradient(180deg, transparent, var(--cm-paper) 90%) !important;
  pointer-events: none;
}

/* --- PATIENT pill: child-context style with cyan numbered dot --- */
#cs-booking-widget.cs-booking--modern .cs-booking__progress-summary {
  background: var(--cm-paper-2) !important;
  color: var(--cm-muted) !important;
  border-radius: 100px !important;
  padding: 6px 14px 6px 6px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}
#cs-booking-widget.cs-booking--modern .cs-booking__progress-summary::before {
  content: '\002714' !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: var(--cm-cy) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
#cs-booking-widget.cs-booking--modern .cs-booking__progress-summary strong {
  color: var(--cm-ink) !important;
  font-weight: 600 !important;
}

/* --- Welcome screen: registration's dark radial gradient + orbs --- */
.cs-modern-welcome {
  background: radial-gradient(ellipse at top, #1a2e4f, #0a1628 60%) !important;
  position: relative !important;
  overflow: hidden !important;
}
.cs-modern-welcome::before {
  content: '' !important;
  position: absolute !important;
  width: 600px !important;
  height: 600px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(0,174,239,.4), transparent 70%) !important;
  top: -200px !important;
  left: -200px !important;
  filter: blur(80px) !important;
  pointer-events: none !important;
}
.cs-modern-welcome::after {
  content: '' !important;
  position: absolute !important;
  width: 500px !important;
  height: 500px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(236,0,140,.3), transparent 70%) !important;
  bottom: -180px !important;
  right: -180px !important;
  filter: blur(80px) !important;
  pointer-events: none !important;
}
.cs-modern-welcome-brand,
.cs-modern-welcome-content,
.cs-modern-welcome-hero {
  position: relative !important;
  z-index: 2 !important;
}
.cs-modern-welcome-content h1 em {
  color: var(--cm-cy) !important;
}

/* Welcome button: cyan -> brighter-cyan gradient with dark-ink text */
.cs-modern-welcome-btn {
  background: linear-gradient(135deg, #00AEEF, #00C8FF) !important;
  color: #0a1628 !important;
  border: none !important;
  font-weight: 700 !important;
  border-radius: 16px !important;
  padding: 20px 24px !important;
  min-height: 60px !important;
  box-shadow: 0 20px 50px -16px rgba(0,174,239,.7) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  transition: transform .2s ease !important;
}
.cs-modern-welcome-btn:active {
  transform: scale(.98) !important;
}
.cs-modern-welcome-btn svg {
  color: #0a1628 !important;
}

/* --- Mobile tightenings to match pp-registration breakpoints --- */
@media (max-width: 480px) {
  #cs-booking-widget.cs-booking--modern .cs-modern-back-arrow {
    width: 40px !important;
    height: 40px !important;
    top: 14px !important;
    left: 14px !important;
  }
  #cs-booking-widget.cs-booking--modern .cs-modern-eyebrow {
    font-size: 11px !important;
    margin: 10px 0 6px !important;
  }
  #cs-booking-widget.cs-booking--modern .cs-triage__chip {
    padding: 16px !important;
    min-height: 60px !important;
    font-size: 14.5px !important;
  }
}
@media (max-width: 380px) {
  #cs-booking-widget.cs-booking--modern .cs-modern-eyebrow {
    font-size: 10.5px !important;
  }
}


/* ===================================================================
 * 3.25.299 -- Mobile optimization audit fixes
 *
 * P0/P1/P2 fixes. END-OF-CASCADE so each rule beats any earlier
 * declaration in the same file.
 * =================================================================== */

/* --- P0: restore full-screen welcome overlay (3.25.298 regression) --- */
/* The 3.25.298 block had `position: relative` here which collapsed the
   welcome overlay into the document flow. The screen must always be a
   full-viewport takeover. */
.cs-modern-welcome {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  overflow: hidden !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  /* P1: iOS browser-chrome correction. 100dvh follows the visible area;
     100vh is the fallback for browsers that don't support dvh. */
  min-height: 100vh !important;
  min-height: 100dvh !important;
  height: 100% !important;
}

/* Welcome content honors the safe-area top/bottom inset on notched phones */
.cs-modern-welcome-content {
  padding-top: calc(8px + env(safe-area-inset-top)) !important;
  padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important;
  max-width: 100% !important;
}
.cs-modern-welcome-logo {
  padding-top: calc(24px + env(safe-area-inset-top)) !important;
}

/* --- P1: header back arrow meets iOS HIG 44pt touch-target minimum --- */
#cs-booking-widget.cs-booking--modern .cs-modern-back-arrow {
  min-width: 44px !important;
  min-height: 44px !important;
  width: 44px !important;
  height: 44px !important;
}
@media (max-width: 480px) {
  #cs-booking-widget.cs-booking--modern .cs-modern-back-arrow {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    top: 12px !important;
    left: 12px !important;
  }
}
@media (max-width: 380px) {
  #cs-booking-widget.cs-booking--modern .cs-modern-back-arrow {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    top: 10px !important;
    left: 10px !important;
  }
}

/* --- P2: eyebrow label keeps a legible 11px floor on small phones --- */
@media (max-width: 380px) {
  #cs-booking-widget.cs-booking--modern .cs-modern-eyebrow {
    font-size: 11px !important;
    letter-spacing: .12em !important;
  }
}
#cs-booking-widget.cs-booking--modern .cs-modern-eyebrow {
  max-width: 100% !important;
  word-break: break-word !important;
}

/* --- P2: horizontal-overflow guard on widget root + welcome screen --- */
#cs-booking-widget.cs-booking--modern {
  overflow-x: hidden !important;
  overscroll-behavior-x: none !important;
  -webkit-overflow-scrolling: touch !important;
}
.cs-modern-welcome,
.cs-modern-welcome-hero,
.cs-modern-welcome-content {
  overflow-x: hidden !important;
}

/* --- P2: transparent tap-highlight on tappable surfaces (was default blue) --- */
#cs-booking-widget.cs-booking--modern .cs-triage__chip,
#cs-booking-widget.cs-booking--modern .cs-booking__button,
#cs-booking-widget.cs-booking--modern .cs-booking__time-slot,
#cs-booking-widget.cs-booking--modern .cs-booking__calendar-day,
#cs-booking-widget.cs-booking--modern .cs-booking__provider-card,
#cs-booking-widget.cs-booking--modern .cs-triage__option-card,
#cs-booking-widget.cs-booking--modern .cs-modern-back-arrow,
.cs-modern-welcome-btn {
  -webkit-tap-highlight-color: rgba(0,174,239,.15) !important;
}

/* --- P2: clip bottom-actions gradient inside the rounded mobile root --- */
@media (max-width: 480px) {
  #cs-booking-widget.cs-booking--modern .cs-booking__navigation {
    overflow: visible !important;
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
  }
  #cs-booking-widget.cs-booking--modern .cs-booking__navigation::before {
    left: 0 !important;
    right: 0 !important;
  }
}

/* --- P3: chip hover only on devices that actually hover --- */
@media (hover: hover) and (pointer: fine) {
  #cs-booking-widget.cs-booking--modern .cs-triage__chip:hover {
    background: #ffffff !important;
    border-color: var(--cm-cy) !important;
    box-shadow: 0 8px 24px -10px rgba(0,174,239,.30) !important;
  }
}
@media (hover: none) {
  /* Disable the lingering hover state on touch devices */
  #cs-booking-widget.cs-booking--modern .cs-triage__chip:hover {
    background: var(--cm-paper-2) !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
  /* Touch press feedback: use :active instead, restored on lift */
  #cs-booking-widget.cs-booking--modern .cs-triage__chip:active {
    background: #ffffff !important;
    border-color: var(--cm-cy) !important;
  }
}

/* --- P3: reduce welcome orb size on small phones to avoid GPU strain --- */
@media (max-width: 480px) {
  .cs-modern-welcome::before {
    width: 460px !important;
    height: 460px !important;
    top: -180px !important;
    left: -180px !important;
    filter: blur(60px) !important;
  }
  .cs-modern-welcome::after {
    width: 380px !important;
    height: 380px !important;
    bottom: -140px !important;
    right: -140px !important;
    filter: blur(60px) !important;
  }
}

/* --- P3: welcome content readable text scale on phones --- */
@media (max-width: 480px) {
  .cs-modern-welcome-content h1 {
    font-size: clamp(32px, 9vw, 40px) !important;
    margin-bottom: 12px !important;
  }
  .cs-modern-welcome-content p {
    font-size: 15px !important;
    margin-bottom: 18px !important;
  }
  .cs-modern-welcome-btn {
    padding: 18px 22px !important;
    min-height: 58px !important;
    border-radius: 14px !important;
  }
}

/* --- P3: eyebrow + back-arrow stacking on the smallest phones ---
   At 380px the back arrow can sit too close to the brand wordmark.
   Bump the wordmark off the arrow with a left margin when both present. */
@media (max-width: 380px) {
  #cs-booking-widget.cs-booking--modern.cs-modern-has-back .cs-modern-brand-inside {
    padding-top: 12px !important;
  }
}

/* --- P3: prefer-reduced-motion respect for screen-in animation --- */
@media (prefers-reduced-motion: reduce) {
  #cs-booking-widget.cs-booking--modern .cs-modern-screen-in {
    animation: none !important;
  }
  #cs-booking-widget.cs-booking--modern .cs-modern-back-arrow,
  #cs-booking-widget.cs-booking--modern .cs-triage__chip,
  #cs-booking-widget.cs-booking--modern .cs-booking__button {
    transition: none !important;
  }
}


/* ===================================================================
 * 3.25.300 -- Welcome restore, breadcrumb pill, headings -4pt,
 *             qualifying-page back button cleanup.
 * =================================================================== */

/* --- #2: Less drastic radius on the PATIENT/Visit/Provider breadcrumb pill --- */
/* --- #4: Hide the cyan "checkmark in a circle" ::before from 3.25.298 --- */
#cs-booking-widget.cs-booking--modern .cs-booking__progress-summary {
  border-radius: 10px !important;
  padding: 8px 12px !important;
  background: var(--cm-paper-2) !important;
  color: var(--cm-muted) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}
#cs-booking-widget.cs-booking--modern .cs-booking__progress-summary::before {
  display: none !important;
  content: none !important;
}
#cs-booking-widget.cs-booking--modern .cs-booking__progress-summary strong {
  color: var(--cm-ink) !important;
  font-weight: 600 !important;
}

/* --- #3: Headings step down ~4pt under the breadcrumb --- */
#cs-booking-widget.cs-booking--modern .cs-triage__greeting-text,
#cs-booking-widget.cs-booking--modern .cs-qualifying__question,
#cs-booking-widget.cs-booking--modern .cs-triage__options-message {
  font-size: clamp(20px, 5vw, 28px) !important;
  line-height: 1.14 !important;
}
#cs-booking-widget.cs-booking--modern .cs-booking__step h1 {
  font-size: clamp(24px, 5.8vw, 32px) !important;
  line-height: 1.1 !important;
}
#cs-booking-widget.cs-booking--modern .cs-booking__step h2 {
  font-size: clamp(20px, 5vw, 28px) !important;
  line-height: 1.14 !important;
}
/* Small-phone variant of -4pt */
@media (max-width: 480px) {
  #cs-booking-widget.cs-booking--modern .cs-triage__greeting-text,
  #cs-booking-widget.cs-booking--modern .cs-qualifying__question,
  #cs-booking-widget.cs-booking--modern .cs-triage__options-message {
    font-size: clamp(18px, 5vw, 22px) !important;
  }
  #cs-booking-widget.cs-booking--modern h1 {
    font-size: 22px !important;
  }
  #cs-booking-widget.cs-booking--modern h2 {
    font-size: 20px !important;
  }
}

/* --- #5: "One Quick Question" page -- aggressively hide bottom Back &
       give the heading enough top room to clear the absolute arrow --- */
#cs-booking-widget.cs-booking--modern.cs-modern-has-back
  .cs-booking__step-qualifying .cs-booking__navigation {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 0 !important;
}
#cs-booking-widget.cs-booking--modern.cs-modern-has-back
  .cs-booking__step-qualifying .cs-booking__navigation::before {
  display: none !important;
}
#cs-booking-widget.cs-booking--modern .cs-booking__step-qualifying {
  padding-top: 56px !important;
}
#cs-booking-widget.cs-booking--modern .cs-booking__step-qualifying
  .cs-qualifying__header {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* On very small phones the arrow is at top:10px; the heading needs slightly
   less clearance. */
@media (max-width: 380px) {
  #cs-booking-widget.cs-booking--modern .cs-booking__step-qualifying {
    padding-top: 50px !important;
  }
}

/* --- #5 (extra safety): if the arrow is NOT present (which can happen
       briefly during the runAll observer race), still keep the bottom
       Back button properly sized and positioned. --- */
#cs-booking-widget.cs-booking--modern:not(.cs-modern-has-back)
  .cs-booking__step-qualifying .cs-booking__navigation {
  display: flex !important;
  justify-content: flex-start !important;
  padding: 12px 0 0 !important;
}


/* ===================================================================
 * 3.25.301 -- AI options message is body text, not a heading.
 * The 3.25.297-298 prominence pass swept it into the H1/H2 group,
 * which is wrong: it's the AI's conversational reply above the
 * service cards, not the page title. Force it to Geist 15px.
 * =================================================================== */
#cs-booking-widget.cs-booking--modern .cs-triage__options-message {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  color: var(--cm-muted) !important;
  text-align: left !important;
  margin: 4px 0 12px !important;
  font-variation-settings: normal !important;
}
#cs-booking-widget.cs-booking--modern .cs-triage__options-message em {
  color: var(--cm-ink) !important;
  font-style: normal !important;
  font-weight: 600 !important;
}
@media (max-width: 480px) {
  #cs-booking-widget.cs-booking--modern .cs-triage__options-message {
    font-size: 14.5px !important;
    margin: 4px 0 10px !important;
  }
}


/* ===================================================================
 * 3.25.302 -- Brand +8pt, numbers to sans-serif, kill iOS sticky-focus
 *             button look, sibling back-arrow alignment.
 * =================================================================== */

/* --- #3: CareScheduler wordmark +8pt widget-wide --- */
#cs-booking-widget.cs-booking--modern .cs-modern-brand-inside {
  font-size: 27px !important;   /* was 19px */
  margin: 0 0 16px !important;
}
@media (max-width: 480px) {
  #cs-booking-widget.cs-booking--modern .cs-modern-brand-inside {
    font-size: 25px !important; /* was 17px */
    margin: 0 0 12px !important;
  }
}
@media (max-width: 380px) {
  #cs-booking-widget.cs-booking--modern .cs-modern-brand-inside {
    font-size: 24px !important; /* was 16px */
    margin: 0 0 10px !important;
  }
}

/* --- #5: All numeric chrome reads as Geist sans-serif --- */
/* Calendar day cells, month display, time slots, slot times, step circle
   numbers, the breadcrumb's numeric segments, slot-provider sublabel. */
#cs-booking-widget.cs-booking--modern .cs-booking__calendar-day,
#cs-booking-widget.cs-booking--modern .cs-booking__month-display,
#cs-booking-widget.cs-booking--modern .cs-booking__time-slot,
#cs-booking-widget.cs-booking--modern .cs-booking__slot-time,
#cs-booking-widget.cs-booking--modern .cs-booking__slot-provider,
#cs-booking-widget.cs-booking--modern .cs-booking__step-dot,
#cs-booking-widget.cs-booking--modern .cs-booking__step-dot-circle,
#cs-booking-widget.cs-booking--modern .cs-booking__progress-summary,
#cs-booking-widget.cs-booking--modern .cs-booking__progress-summary strong,
#cs-booking-widget.cs-booking--modern .cs-booking__calendar-header,
#cs-booking-widget.cs-booking--modern .cs-booking__calendar-nav,
#cs-booking-widget.cs-booking--modern .cs-modern-eyebrow,
#cs-booking-widget.cs-booking--modern input[type="tel"],
#cs-booking-widget.cs-booking--modern input[type="date"],
#cs-booking-widget.cs-booking--modern input[type="number"] {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif !important;
  font-variation-settings: normal !important;
  font-feature-settings: "tnum" 1 !important;
}

/* --- #4: kill iOS sticky-focus visual on buttons ---
   Show outline ONLY when the focus comes from keyboard navigation. Any
   tap-induced :focus inherits no styles. */
#cs-booking-widget.cs-booking--modern button:focus,
#cs-booking-widget.cs-booking--modern .cs-booking__button:focus,
#cs-booking-widget.cs-booking--modern .cs-triage__chip:focus,
#cs-booking-widget.cs-booking--modern .cs-qualifying__option-btn:focus,
#cs-booking-widget.cs-booking--modern .cs-modern-back-arrow:focus,
.cs-modern-welcome-btn:focus {
  outline: none !important;
}
#cs-booking-widget.cs-booking--modern button:focus:not(:focus-visible),
#cs-booking-widget.cs-booking--modern .cs-booking__button:focus:not(:focus-visible),
#cs-booking-widget.cs-booking--modern .cs-triage__chip:focus:not(:focus-visible),
#cs-booking-widget.cs-booking--modern .cs-qualifying__option-btn:focus:not(:focus-visible),
#cs-booking-widget.cs-booking--modern .cs-modern-back-arrow:focus:not(:focus-visible),
.cs-modern-welcome-btn:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
  /* 3.25.308 -- DO NOT revert background/color here. revert cascaded into
     children (notably .cs-triage__chip-icon) and turned the SVG stroke
     invisible/white on iOS sticky-focus. The :focus state should only
     change the outline; the chip's own background/color rules govern. */
}
#cs-booking-widget.cs-booking--modern button:focus-visible,
#cs-booking-widget.cs-booking--modern .cs-booking__button:focus-visible,
#cs-booking-widget.cs-booking--modern .cs-triage__chip:focus-visible,
#cs-booking-widget.cs-booking--modern .cs-qualifying__option-btn:focus-visible,
#cs-booking-widget.cs-booking--modern .cs-modern-back-arrow:focus-visible,
.cs-modern-welcome-btn:focus-visible {
  outline: 2px solid var(--cm-cy) !important;
  outline-offset: 2px !important;
}

/* --- #1: sibling-page top arrow needs vertical breathing room above the
       sibling question text, just like the qualifying page. The arrow is
       absolutely positioned in the root corner; push the sibling content
       down so it doesn't sit right under the arrow. --- */
#cs-booking-widget.cs-booking--modern.cs-modern-has-back
  .cs-booking__step .cs-sibling-back {
  /* The original underlined Back link is now redundant. Hide it whenever
     the top arrow has been injected. */
  display: none !important;
}
#cs-booking-widget.cs-booking--modern.cs-modern-has-back
  [data-np-action="back"],
#cs-booking-widget.cs-booking--modern.cs-modern-has-back
  [data-np-action="exit"] {
  display: none !important;
}


/* ===================================================================
 * 3.25.304 -- Step 1 first name + last name stacked on their own rows
 * =================================================================== */
#cs-booking-widget.cs-booking--modern .cs-step1__name-row,
.cs-booking--modern .cs-step1__name-row {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}
@media (max-width: 480px) {
  #cs-booking-widget.cs-booking--modern .cs-step1__name-row,
  .cs-booking--modern .cs-step1__name-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}


/* ===================================================================
 * 3.25.305 -- Tighten gap between stacked first/last name fields.
 * The 12px grid gap stacked on top of each form-field's own
 * margin-bottom: 12px, producing 24px of vertical space. Zero the
 * grid gap and let the per-field margin alone govern the spacing.
 * =================================================================== */
#cs-booking-widget.cs-booking--modern .cs-step1__name-row,
.cs-booking--modern .cs-step1__name-row {
  gap: 0 !important;
}
@media (max-width: 480px) {
  #cs-booking-widget.cs-booking--modern .cs-step1__name-row,
  .cs-booking--modern .cs-step1__name-row {
    gap: 0 !important;
  }
}


/* ===================================================================
 * 3.25.306 -- Splash screen brand wordmark much larger.
 * Was 18px; bump to a fluid clamp(34px, 7vw, 48px) so it matches the
 * scale of the headline below it. White on the dark gradient.
 * =================================================================== */
.cs-modern-welcome .cs-modern-welcome-brand,
.cs-modern-welcome-logo .cs-modern-welcome-brand {
  font-family: 'Fraunces', 'Newsreader', Georgia, serif !important;
  font-weight: 500 !important;
  font-size: clamp(34px, 7vw, 48px) !important;
  letter-spacing: -.02em !important;
  line-height: 1.05 !important;
  color: #ffffff !important;
  opacity: 1 !important;
  text-align: center !important;
}
@media (max-width: 480px) {
  .cs-modern-welcome .cs-modern-welcome-brand,
  .cs-modern-welcome-logo .cs-modern-welcome-brand {
    font-size: clamp(30px, 7.5vw, 38px) !important;
  }
}
@media (max-width: 380px) {
  .cs-modern-welcome .cs-modern-welcome-brand,
  .cs-modern-welcome-logo .cs-modern-welcome-brand {
    font-size: 28px !important;
  }
}
/* Logo container: a bit more breathing room since the wordmark is bigger */
.cs-modern-welcome-logo {
  padding-top: calc(40px + env(safe-area-inset-top)) !important;
  padding-bottom: 8px !important;
}
@media (max-width: 480px) {
  .cs-modern-welcome-logo {
    padding-top: calc(28px + env(safe-area-inset-top)) !important;
  }
}


/* ===================================================================
 * 3.25.307 -- iOS sticky chip-focus kill + recommended option stroke
 * =================================================================== */

/* --- Kill sticky :hover/:focus/:active on triage chips (touch devices) ---
   END-OF-CASCADE override: when there's no real hover (touch device),
   the chip's :hover/:focus/:active visual state is forcibly reset to
   the DEFAULT chip appearance. The chip only changes visually during
   a physical press, and even then only via :active inside hover:hover. */
@media (hover: none), (pointer: coarse) {
  #cs-booking-widget.cs-booking--modern .cs-triage__chip,
  #cs-booking-widget.cs-booking--modern .cs-triage__chip:hover,
  #cs-booking-widget.cs-booking--modern .cs-triage__chip:focus,
  #cs-booking-widget.cs-booking--modern .cs-triage__chip:focus-visible,
  #cs-booking-widget.cs-booking--modern .cs-triage__chip:active {
    background: var(--cm-paper-2) !important;
    border-color: transparent !important;
    border: 1.5px solid transparent !important;
    box-shadow: none !important;
    outline: none !important;
    transform: none !important;
    color: var(--cm-ink) !important;
  }
  /* The icon stays muted-cyan in default state */
  #cs-booking-widget.cs-booking--modern .cs-triage__chip .cs-triage__chip-icon,
  #cs-booking-widget.cs-booking--modern .cs-triage__chip:hover .cs-triage__chip-icon,
  #cs-booking-widget.cs-booking--modern .cs-triage__chip:focus .cs-triage__chip-icon,
  #cs-booking-widget.cs-booking--modern .cs-triage__chip:active .cs-triage__chip-icon {
    background: transparent !important;
    color: var(--cm-cy) !important;
    box-shadow: none !important;
  }
}

/* --- Same hardening for option cards on touch devices --- */
@media (hover: none), (pointer: coarse) {
  #cs-booking-widget.cs-booking--modern .cs-triage__option-card:not(.cs-triage__option-card--recommended):not(.cs-triage__option-card--selected),
  #cs-booking-widget.cs-booking--modern .cs-triage__option-card:not(.cs-triage__option-card--recommended):not(.cs-triage__option-card--selected):hover,
  #cs-booking-widget.cs-booking--modern .cs-triage__option-card:not(.cs-triage__option-card--recommended):not(.cs-triage__option-card--selected):focus,
  #cs-booking-widget.cs-booking--modern .cs-triage__option-card:not(.cs-triage__option-card--recommended):not(.cs-triage__option-card--selected):active {
    border-color: var(--cm-line) !important;
    background: #ffffff !important;
    box-shadow: none !important;
    outline: none !important;
  }
}

/* --- #2: Cyan stroke + lift on the FIRST suggested visit type ---
   The --recommended class already gets a cyan border, but it was 1.5px
   with no shadow, which reads as "same as the rest." Upgrade to a 2.5px
   stroke with a soft cyan glow so the suggested option is unmistakable.
   Also belt-and-suspenders: if for some reason --recommended isn't
   applied, target :first-child as a fallback. */
#cs-booking-widget.cs-booking--modern .cs-triage__option-card--recommended,
#cs-booking-widget.cs-booking--modern .cs-triage__options-cards > .cs-triage__option-card:first-child {
  border: 2.5px solid var(--cm-cy) !important;
  background: #ffffff !important;
  box-shadow: 0 12px 28px -10px rgba(0,174,239,.35),
              0 0 0 4px rgba(0,174,239,.08) !important;
  position: relative !important;
}

/* The "Recommended" badge: stronger contrast against the cyan border */
#cs-booking-widget.cs-booking--modern .cs-triage__option-badge {
  background: var(--cm-cy) !important;
  color: #ffffff !important;
  font-size: 10.5px !important;
  letter-spacing: .1em !important;
  font-weight: 700 !important;
  padding: 3px 9px !important;
  border-radius: 100px !important;
  text-transform: uppercase !important;
}

/* When the recommended card is also the selected one, keep the bigger
   stroke but darken the shadow slightly for the press feel. */
#cs-booking-widget.cs-booking--modern .cs-triage__option-card--recommended.cs-triage__option-card--selected {
  border: 2.5px solid var(--cm-cy) !important;
  box-shadow: 0 14px 34px -10px rgba(0,174,239,.45),
              0 0 0 4px rgba(0,174,239,.12) !important;
}


/* ===================================================================
 * 3.25.308 -- Sick / Injury / Other (and every triage chip) icon
 * must render cyan. Earlier `color: revert` on :focus:not(:focus-visible)
 * cascaded into the icon span and made the SVG stroke invisible on
 * iOS sticky-focus. Explicit, end-of-cascade pin.
 * =================================================================== */
#cs-booking-widget.cs-booking--modern .cs-triage__chip .cs-triage__chip-icon,
#cs-booking-widget.cs-booking--modern .cs-triage__chip .cs-triage__chip-icon svg,
#cs-booking-widget.cs-booking--modern .cs-triage__chip:hover .cs-triage__chip-icon,
#cs-booking-widget.cs-booking--modern .cs-triage__chip:hover .cs-triage__chip-icon svg,
#cs-booking-widget.cs-booking--modern .cs-triage__chip:focus .cs-triage__chip-icon,
#cs-booking-widget.cs-booking--modern .cs-triage__chip:focus .cs-triage__chip-icon svg,
#cs-booking-widget.cs-booking--modern .cs-triage__chip:focus-visible .cs-triage__chip-icon,
#cs-booking-widget.cs-booking--modern .cs-triage__chip:focus-visible .cs-triage__chip-icon svg,
#cs-booking-widget.cs-booking--modern .cs-triage__chip:active .cs-triage__chip-icon,
#cs-booking-widget.cs-booking--modern .cs-triage__chip:active .cs-triage__chip-icon svg {
  color: #00AEEF !important;
  stroke: #00AEEF !important;
  fill: none !important;
}
/* Ensure fill="currentColor" sub-paths (the eye-dots in the Behavioral
   icon) still render as solid cyan dots, not as cyan strokes. */
#cs-booking-widget.cs-booking--modern .cs-triage__chip .cs-triage__chip-icon svg [fill="currentColor"],
#cs-booking-widget.cs-booking--modern .cs-triage__chip .cs-triage__chip-icon svg circle[fill="currentColor"] {
  fill: #00AEEF !important;
}


/* ===================================================================
 * 3.25.309 -- Splash top-half redesign
 *
 * New structure inside .cs-modern-welcome:
 *   .cs-modern-welcome-top
 *     .cs-modern-welcome-eyebrow      "Welcome to"
 *     .cs-modern-welcome-brand        "CareScheduler"
 *     .cs-modern-welcome-tagline      "by <em>Pediatric People</em>"
 *     .cs-modern-welcome-pulse        animated cyan heart-pulse line
 *
 * The legacy .cs-modern-welcome-logo and .cs-modern-welcome-hero are
 * suppressed -- the new top div replaces both.
 * =================================================================== */

/* Hide legacy top-half containers in case any cached HTML still has them */
.cs-modern-welcome .cs-modern-welcome-logo,
.cs-modern-welcome .cs-modern-welcome-hero,
.cs-modern-welcome .cs-modern-welcome-orb {
  display: none !important;
}

/* The new top container */
.cs-modern-welcome .cs-modern-welcome-top {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(56px + env(safe-area-inset-top)) 28px 18px;
  flex: 1;
  min-height: 0;
}

/* Eyebrow */
.cs-modern-welcome .cs-modern-welcome-eyebrow {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.72) !important;
  margin: 0 0 12px !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.2);
}

/* Wordmark (overrides 3.25.306 sizing slightly so it reads as the hero) */
.cs-modern-welcome .cs-modern-welcome-brand {
  font-family: 'Fraunces', 'Newsreader', Georgia, serif !important;
  font-weight: 500 !important;
  font-size: clamp(40px, 9vw, 60px) !important;
  letter-spacing: -.025em !important;
  line-height: 1 !important;
  color: #ffffff !important;
  margin: 0 0 14px !important;
  opacity: 1 !important;
  font-variation-settings: "opsz" 80, "SOFT" 30, "WONK" 0;
  text-shadow: 0 2px 30px rgba(0,174,239,.25);
}

/* Tagline with magenta italic em accent */
.cs-modern-welcome .cs-modern-welcome-tagline {
  font-family: 'Geist', -apple-system, sans-serif !important;
  font-size: 15.5px !important;
  font-weight: 400 !important;
  letter-spacing: .01em !important;
  color: rgba(255,255,255,.82) !important;
  margin: 0 0 36px !important;
}
.cs-modern-welcome .cs-modern-welcome-tagline em {
  font-family: 'Fraunces', 'Newsreader', Georgia, serif !important;
  font-style: italic !important;
  color: #EC008C !important;
  font-weight: 500 !important;
  font-size: 1.08em !important;
  letter-spacing: -.01em !important;
  font-variation-settings: "opsz" 80, "SOFT" 100, "WONK" 1;
}

/* Heart-pulse hero element */
.cs-modern-welcome .cs-modern-welcome-pulse {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  position: relative;
  opacity: .96;
}
.cs-modern-welcome .cs-modern-welcome-pulse svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 0 12px rgba(0,174,239,.55))
          drop-shadow(0 0 24px rgba(0,174,239,.25));
}

/* Pulse draw-in animation: stroke-dash sweeps the line into existence */
.cs-modern-welcome-pulse-line {
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  animation: cs-pulse-draw 1.6s cubic-bezier(.16, 1, .3, 1) .15s forwards,
             cs-pulse-glow 2.6s ease-in-out 1.8s infinite;
}
@keyframes cs-pulse-draw {
  0%   { stroke-dashoffset: 700; }
  100% { stroke-dashoffset: 0; }
}
@keyframes cs-pulse-glow {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-modern-welcome-pulse-line {
    animation: none !important;
    stroke-dashoffset: 0 !important;
  }
}

/* --- Mobile tuning --- */
@media (max-width: 480px) {
  .cs-modern-welcome .cs-modern-welcome-top {
    padding: calc(40px + env(safe-area-inset-top)) 22px 12px;
  }
  .cs-modern-welcome .cs-modern-welcome-eyebrow {
    font-size: 11px !important;
    letter-spacing: .2em !important;
    margin: 0 0 10px !important;
  }
  .cs-modern-welcome .cs-modern-welcome-brand {
    font-size: clamp(36px, 11vw, 52px) !important;
    margin: 0 0 10px !important;
  }
  .cs-modern-welcome .cs-modern-welcome-tagline {
    font-size: 14.5px !important;
    margin: 0 0 28px !important;
  }
  .cs-modern-welcome .cs-modern-welcome-pulse {
    max-width: 260px;
  }
}
@media (max-width: 380px) {
  .cs-modern-welcome .cs-modern-welcome-brand {
    font-size: 36px !important;
  }
  .cs-modern-welcome .cs-modern-welcome-tagline {
    font-size: 13.5px !important;
    margin: 0 0 22px !important;
  }
  .cs-modern-welcome .cs-modern-welcome-pulse {
    max-width: 220px;
  }
}