/* ─── PGS Form – Frontend Styles ────────────────────────────── */

.sc-form-wrapper {
  max-width: var(--sc-max-width, 600px);
  margin: 0 auto;
  font-family: var(--sc-font, inherit);
  font-size: var(--sc-font-size, 15px);
  color: var(--sc-text, #1f2937);
}

.sc-form {
  background: var(--sc-bg, #fff);
}

.sc-form-title {
  margin: 0 0 4px;
  font-size: 1.3em;
  font-weight: 700;
  color: var(--sc-text, #1f2937);
}

.sc-form-description {
  margin: 0 0 20px;
  color: #6b7280;
  font-size: 0.92em;
  line-height: 1.5;
}

/* ─── Field layout ──────────────────────────────────────────── */

.sc-form-fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sc-field-gap, 16px);
}

.sc-form-field {
  width: 100%;
  box-sizing: border-box;
}

.sc-form-field--half {
  width: calc(50% - var(--sc-field-gap, 16px) / 2);
}

@media (max-width: 480px) {
  .sc-form-field--half {
    width: 100%;
  }
}

.sc-form-field label {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
  font-size: 0.875em;
  color: var(--sc-text, #1f2937);
}

/* ─── Inputs ────────────────────────────────────────────────── */

.sc-form-field input[type="text"],
.sc-form-field input[type="email"],
.sc-form-field input[type="tel"],
.sc-form-field input[type="url"],
.sc-form-field input[type="number"],
.sc-form-field input[type="date"],
.sc-form-field input[type="time"],
.sc-form-field textarea,
.sc-form-field select {
  display: block;
  width: 100%;
  padding: var(--sc-input-padding, 10px 12px);
  border: 1px solid var(--sc-border, #d1d5db);
  border-radius: var(--sc-radius, 6px);
  font-family: inherit;
  font-size: var(--sc-input-font-size, inherit);
  /* Input text and background are intentionally decoupled from --sc-text and
     --sc-bg so changing the form's overall text colour does not turn the
     value inside an input invisible (e.g., white text on the default white
     input background). Override --sc-input-text / --sc-input-bg to theme
     inputs explicitly. */
  color: var(--sc-input-text, #1f2937);
  background: var(--sc-input-bg, #ffffff);
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  line-height: 1.5;
}

.sc-form-field input::placeholder,
.sc-form-field textarea::placeholder,
.sc-form-field select:invalid {
  color: var(--sc-placeholder-color, #9ca3af);
  font-size: var(--sc-placeholder-size, inherit);
  opacity: 1;
}

/* Radio / checkbox selected fill uses the Button Colour from Settings → Styling
   so the checked dot / tick reads clearly instead of a faint grey. */
.sc-form-wrapper input[type="radio"],
.sc-form-wrapper input[type="checkbox"] {
  accent-color: var(--sc-btn-bg, #111827);
}

.sc-form-field input:focus,
.sc-form-field textarea:focus,
.sc-form-field select:focus {
  outline: none;
  border-color: #6b7280;
  box-shadow: 0 0 0 2px rgba(107, 114, 128, 0.12);
}

.sc-form-field textarea {
  resize: vertical;
  min-height: 90px;
}

.sc-field-error {
  border-color: var(--sc-error, #ef4444) !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.12) !important;
}

.sc-required {
  color: #ef4444;
  font-weight: 600;
}

/* ─── HTML content block ────────────────────────────────────── */
/* A presentational field: the admin's markup renders here and inherits the
   form's typography. Trim the outer margins so it sits flush in the field gap. */
.sc-form-html { line-height: 1.6; }
.sc-form-html > :first-child { margin-top: 0; }
.sc-form-html > :last-child { margin-bottom: 0; }
.sc-form-html img { max-width: 100%; height: auto; }

/* ─── Checkbox (single) ─────────────────────────────────────── */

.sc-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 400;
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
}

.sc-checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0 6px 0 0;
  flex-shrink: 0;
  accent-color: var(--sc-btn-bg, #111827);
  vertical-align: middle;
}

/* ─── Checkbox Group & Radio Group ──────────────────────────── */

.sc-group-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding-top: 2px;
}

.sc-group-options--stacked {
  flex-direction: column;
  gap: 6px;
}


.sc-group-option {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 400;
  font-size: 0.92em;
  padding: 2px 0;
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
}

.sc-group-option input[type="checkbox"],
.sc-group-option input[type="radio"] {
  width: 16px;
  height: 16px;
  margin: 0 6px 0 0;
  flex-shrink: 0;
  accent-color: var(--sc-btn-bg, #111827);
  cursor: pointer;
  vertical-align: middle;
}

/* Custom radio. The browser's native checked radio draws a dark inner ring
   that accent-color cannot recolour, so we draw our own: a themed ring with
   a clean white gap around an accent dot. */
.sc-form-wrapper .sc-group-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  /* Pin the box hard so a host theme's `input { width: … }` cannot stretch the
     custom control into an oval. appearance:none means the plugin owns this box
     entirely. The min/max clamp is orthogonal to the theme's `width`, so it
     holds even when a theme rule ties on specificity and loads later; the
     .sc-form-wrapper prefix raises specificity as a further guard. */
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  /* Themes (e.g. Bricks) apply padding to every input; with border-box that
     padding is a hard floor max-width cannot shrink past, so reset it or the
     control still reads as an oval. */
  padding: 0 !important;
  flex: 0 0 auto;
  box-sizing: border-box;
  border: 2px solid var(--sc-border, #d1d5db);
  border-radius: 50%;
  background: var(--sc-input-bg, #ffffff);
  position: relative;
}

.sc-group-option input[type="radio"]:checked {
  border-color: var(--sc-btn-bg, #111827);
}

.sc-group-option input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--sc-btn-bg, #111827);
}

.sc-group-option input[type="radio"]:focus-visible {
  outline: 2px solid var(--sc-btn-bg, #111827);
  outline-offset: 2px;
}

/* Custom checkbox: a themed box that fills with the button (CTA) colour and
   shows a white tick when checked — consistent across browsers and matching the
   custom radios above (native accent-color is unreliable and browser-tinted). */
.sc-form-wrapper .sc-group-option input[type="checkbox"],
.sc-form-wrapper .sc-checkbox-label input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  /* Pinned for the same reason as the custom radio above: a host theme must
     not be able to stretch this appearance:none box. */
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  padding: 0 !important;
  flex: 0 0 auto;
  box-sizing: border-box;
  margin: 0 8px 0 0;
  border: 2px solid var(--sc-border, #d1d5db);
  border-radius: 4px;
  background: var(--sc-input-bg, #ffffff);
  position: relative;
  cursor: pointer;
  vertical-align: middle;
}
.sc-group-option input[type="checkbox"]:checked,
.sc-checkbox-label input[type="checkbox"]:checked {
  border-color: var(--sc-btn-bg, #111827);
  background: var(--sc-btn-bg, #111827);
}
.sc-group-option input[type="checkbox"]:checked::after,
.sc-checkbox-label input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: solid var(--sc-btn-text, #ffffff);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.sc-group-option input[type="checkbox"]:focus-visible,
.sc-checkbox-label input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--sc-btn-bg, #111827);
  outline-offset: 2px;
}

.sc-group-option span {
  line-height: 1.2;
}

/* ─── Pill options (radio / checkbox group) ─────────────────── */
/*
 * Renders each option as a rounded, selectable chip. The native control is
 * kept in the DOM (visually hidden) so the form still submits normally and
 * stays keyboard accessible. The selected state is driven by :has(:checked)
 * with an .is-selected class fallback toggled by sc-form.js for older
 * browsers without :has() support.
 */
.sc-group-options--pills {
  gap: 10px;
}

.sc-group-options--pills.sc-group-options--stacked {
  flex-direction: row;
  flex-wrap: wrap;
}

.sc-group-options--pills .sc-group-option {
  position: relative;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--sc-border, #d1d5db);
  border-radius: 999px;
  background: var(--sc-input-bg, #ffffff);
  color: var(--sc-input-text, #1f2937);
  font-weight: 500;
  transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

/* Keep the native input in the accessibility tree but out of sight. */
.sc-group-options--pills .sc-group-option input[type="radio"],
.sc-group-options--pills .sc-group-option input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.sc-group-options--pills .sc-group-option span {
  line-height: 1.3;
}

.sc-group-options--pills .sc-group-option:hover {
  border-color: var(--sc-btn-bg, #111827);
}

/* Selected state. The .is-selected class (toggled by sc-form.js) and the
 * :has(:checked) rule are kept in SEPARATE blocks on purpose: a browser
 * without :has() discards the whole rule it appears in, so grouping them
 * would take the class fallback down with it. */
.sc-group-options--pills .sc-group-option.is-selected {
  border-color: var(--sc-btn-bg, #111827);
  background: var(--sc-btn-bg, #111827);
  color: var(--sc-btn-text, #ffffff);
}

.sc-group-options--pills .sc-group-option:has(input:checked) {
  border-color: var(--sc-btn-bg, #111827);
  background: var(--sc-btn-bg, #111827);
  color: var(--sc-btn-text, #ffffff);
}

/* Keyboard focus ring on the visible pill. */
.sc-group-options--pills .sc-group-option.is-focused {
  box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.25);
}

.sc-group-options--pills .sc-group-option:has(input:focus-visible) {
  box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.25);
}

/* ─── Conditional fields (hidden by default) ────────────────── */

.sc-form-field[data-show-when-field] {
  display: none;
}

.sc-form-field[data-show-when-field].sc-field-visible {
  display: block;
}

.sc-form-field--half[data-show-when-field].sc-field-visible {
  display: block;
  width: calc(50% - var(--sc-field-gap, 16px) / 2);
}

@media (max-width: 480px) {
  .sc-form-field--half[data-show-when-field].sc-field-visible {
    width: 100%;
  }
}

/* ─── Button ────────────────────────────────────────────────── */

.sc-form-submit {
  margin-top: 8px;
}

.sc-form-btn {
  position: relative;
  display: inline-block;
  padding: var(--sc-btn-padding, 10px 28px);
  background: var(--sc-btn-bg, #111827);
  color: var(--sc-btn-text, #fff);
  border: none;
  border-radius: var(--sc-radius, 6px);
  font-family: inherit;
  font-size: 0.95em;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
  letter-spacing: 0.01em;
  line-height: 1.5;
}

.sc-form-btn:hover {
  background: var(--sc-btn-hover, #374151);
  opacity: 0.95;
}

.sc-form-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Submit states: a spinner while sending, then a tick on success (just before
   the redirect). The label is hidden but keeps the button's width; the spinner
   and tick adopt the button's text colour so they work on any CTA colour. */
.sc-form-btn.is-loading,
.sc-form-btn.is-success {
  color: transparent !important;
  opacity: 1;
  cursor: default;
  pointer-events: none;
}

.sc-form-btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(127, 127, 127, 0.3);
  border-top-color: var(--sc-btn-text, #fff);
  border-radius: 50%;
  animation: sc-btn-spin 0.6s linear infinite;
}

.sc-form-btn.is-success::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 16px;
  margin: -10px 0 0 -5px;
  border: solid var(--sc-btn-text, #fff);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
  transform-origin: center;
  animation: sc-btn-pop 0.22s ease-out;
}

@keyframes sc-btn-spin {
  to { transform: rotate(360deg); }
}

@keyframes sc-btn-pop {
  from { opacity: 0; transform: rotate(45deg) scale(0.4); }
  to   { opacity: 1; transform: rotate(45deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .sc-form-btn.is-loading::after,
  .sc-form-btn.is-success::after {
    animation: none;
  }
}

.sc-form-btn--full,
.sc-form-wrapper.sc-form-wrapper--btn-full .sc-form-btn {
  width: 100%;
  display: block;
  text-align: center;
}

/* Secondary (Back) button — outline style so it reads below the primary action. */
.sc-form-btn--secondary {
  background: transparent;
  color: var(--sc-text, #1f2937);
  border: 1px solid var(--sc-border, #d1d5db);
}

.sc-form-btn--secondary:hover {
  background: rgba(107, 114, 128, 0.08);
  opacity: 1;
}

/* ─── Multi-step forms ──────────────────────────────────────── */

.sc-form--multistep .sc-form-step {
  display: none;
}

.sc-form--multistep .sc-form-step.is-active {
  display: block;
}

/* The step container is given tabindex="-1" and focused on navigation so screen
   readers announce the new step. It is not an interactive control, so suppress
   the browser's focus outline (which would otherwise box the whole step, and
   fire on any click inside it). Focus rings on the real fields are unaffected. */
.sc-form-step:focus,
.sc-form-step:focus-visible {
  outline: none;
}

.sc-form-step__title {
  margin: 0 0 14px;
  font-size: 1.05em;
  font-weight: 700;
  color: var(--sc-text, #1f2937);
}

/* Navigation row — Back sits left, Next/Submit sit right. */
.sc-form-step__nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  justify-content: flex-end;
}

/* The "fields with * are required" note shares the button row, pinned to the
   far left; the buttons stay grouped on the right (Back to the left of the
   primary Next/Submit, natural order). */
.sc-form-step__nav .sc-form-note--nav {
  margin: 0 auto 0 0;
}

/* On mobile the note stacks above the buttons rather than sharing the row,
   where it would wrap awkwardly beside them. */
@media (max-width: 480px) {
  .sc-form-step__nav {
    flex-wrap: wrap;
  }

  .sc-form-step__nav .sc-form-note--nav {
    flex-basis: 100%;
    margin: 0 0 10px 0;
  }
}

.sc-form-wrapper.sc-form-wrapper--btn-full .sc-form-step__nav {
  flex-direction: column-reverse;
}

.sc-form-wrapper.sc-form-wrapper--btn-full .sc-form-step__nav .sc-step-next,
.sc-form-wrapper.sc-form-wrapper--btn-full .sc-form-step__nav .sc-step-submit {
  margin-left: 0;
}

/* ─── Step progress indicator ───────────────────────────────── */

.sc-form-steps-header {
  margin-bottom: 22px;
}

/* Caption above the bar: "Step X of Y · Title". */
.sc-form-steps-caption {
  margin: 0 0 8px;
  font-size: 0.85em;
  font-weight: 500;
  color: var(--sc-placeholder-color, #9ca3af);
}

.sc-form-step-current,
.sc-form-step-total,
.sc-form-steps-title {
  color: var(--sc-text, #1f2937);
  font-weight: 600;
}

/* Segmented progress bar: one rounded segment per step, filled up to the
   current step with the button colour. */
.sc-form-progress {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sc-form-progress__seg {
  flex: 1 1 0;
  height: 7px;
  border-radius: 999px;
  background: var(--sc-border, #d1d5db);
  transition: background-color 0.2s ease;
}

.sc-form-progress__seg.is-filled {
  background: var(--sc-btn-bg, #111827);
}

/* ─── Messages ──────────────────────────────────────────────── */

.sc-form-message {
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: var(--sc-radius, 6px);
  font-size: 0.92em;
  font-weight: 500;
}

.sc-form-success {
  background: #f0fdf4;
  color: var(--sc-success, #15803d);
  border: 1px solid #bbf7d0;
}

.sc-form-error {
  background: #fef2f2;
  color: var(--sc-error, #dc2626);
  border: 1px solid #fecaca;
}

.sc-form-note {
  font-size: 0.82em;
  color: #9ca3af;
  margin-top: 10px;
}

/* Consent line below the required note (abandoned-funnel disclosure). */
.sc-form-consent {
  font-size: 0.78em;
  line-height: 1.5;
  color: var(--sc-placeholder-color, #9ca3af);
  margin-top: 6px;
}

.sc-form-consent a {
  color: inherit;
  text-decoration: underline;
}

/* ─── Honeypot ──────────────────────────────────────────────── */

.sc-form-hp {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ─── Hidden field ──────────────────────────────────────────── */

.sc-form-field--hidden {
  display: none;
}

/* ─── Visually hidden label (kept for screen readers) ───────── */

.sc-form-field .sc-label--sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Theme: wrapper ───────────────────────────────────────── */
/*
 * The wrapper theme controls labels, borders, focus rings, and
 * placeholder colours — i.e. everything around the inputs.
 *
 * The input surface itself is themed separately via
 * sc-form-wrapper--inputs-{light|dark} so a form can have light
 * labels (on a dark hero) but still keep crisp white inputs.
 *
 * Apply via shortcode:
 *   [smileconnect_form id=1]                              -> light/light
 *   [smileconnect_form id=1 theme=dark]                   -> dark/dark (immersive)
 *   [smileconnect_form id=1 theme=dark inputs=light]      -> dark labels, white inputs
 */
/* Selectors are doubled (.class.class) to give them higher specificity than
 * the .sc-form-wrapper{...} block emitted as inline CSS by the admin
 * Settings -> Styling values. Without this the admin's "Text Colour" would
 * silently override the dark theme override since both selectors have the
 * same specificity and the inline block prints after the stylesheet. */
.sc-form-wrapper.sc-form-wrapper--theme-dark {
  --sc-text: #f9fafb;
  --sc-border: rgba(255, 255, 255, 0.25);
  --sc-placeholder-color: rgba(255, 255, 255, 0.55);
}

.sc-form-wrapper.sc-form-wrapper--theme-dark .sc-form-description {
  color: rgba(249, 250, 251, 0.75);
}

.sc-form-wrapper.sc-form-wrapper--theme-dark .sc-form-field input:focus,
.sc-form-wrapper.sc-form-wrapper--theme-dark .sc-form-field textarea:focus,
.sc-form-wrapper.sc-form-wrapper--theme-dark .sc-form-field select:focus {
  border-color: rgba(255, 255, 255, 0.65);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}

/* ─── Theme: inputs ────────────────────────────────────────── */

.sc-form-wrapper.sc-form-wrapper--inputs-light {
  --sc-input-bg: #ffffff;
  --sc-input-text: #1f2937;
  --sc-placeholder-color: #9ca3af;
}

.sc-form-wrapper.sc-form-wrapper--inputs-dark {
  --sc-input-bg: rgba(255, 255, 255, 0.08);
  --sc-input-text: #f9fafb;
  --sc-placeholder-color: rgba(255, 255, 255, 0.55);
}

/* Placeholder colour is driven by the admin's "Placeholder Colour" setting
 * (--sc-placeholder-color, emitted on the wrapper; the input-theme classes
 * above set a sensible default it can still override). The doubled wrapper
 * class lifts specificity, and !important ensures it beats a host page-builder
 * theme's ::placeholder rule (e.g. Bricks) regardless of source order. */
.sc-form-wrapper.sc-form-wrapper .sc-form-field input::placeholder,
.sc-form-wrapper.sc-form-wrapper .sc-form-field textarea::placeholder {
  color: var(--sc-placeholder-color, #9ca3af) !important;
  opacity: 1;
}

/* Native date/time pickers use a built-in calendar/clock icon. On
 * a dark input surface the icon is invisible; invert it. */
.sc-form-wrapper.sc-form-wrapper--inputs-dark .sc-form-field input[type="date"]::-webkit-calendar-picker-indicator,
.sc-form-wrapper.sc-form-wrapper--inputs-dark .sc-form-field input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.4);
}

/* ── Appointment field (CareStack: Appointment) ─────────────────────────────
   The treatment <select> uses the standard select styling above. Below is the
   live availability / slot picker region rendered under it. */
.sc-form-field--cs_appointment .sc-appointment { margin-top: 10px; }
.sc-form-field--cs_appointment .sc-appointment__hint,
.sc-form-field--cs_appointment .sc-appointment__empty {
  margin: 0;
  padding: 12px 14px;
  font-size: 0.9em;
  color: var(--sc-placeholder-color);
  border: 1px dashed var(--sc-border);
  border-radius: var(--sc-radius);
}
.sc-form-field--cs_appointment .sc-appointment__status {
  margin: 0;
  padding: 12px 14px;
  font-size: 0.9em;
  color: var(--sc-placeholder-color);
}
.sc-form-field--cs_appointment .sc-appointment__slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 520px) {
  .sc-form-field--cs_appointment .sc-appointment__slots { grid-template-columns: 1fr 1fr; }
}
.sc-appointment__slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 12px 8px;
  cursor: pointer;
  background: transparent;
  color: var(--sc-text);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.sc-appointment__slot:hover { border-color: var(--sc-btn-bg); }
.sc-appointment__slot.is-selected {
  border-color: var(--sc-btn-bg);
  box-shadow: inset 0 0 0 1px var(--sc-btn-bg);
}
.sc-appointment__slot-time { font-size: 1.2em; }
.sc-appointment__slot-date { font-size: 1em; color: var(--sc-placeholder-color); }

/* The treatment select gets a custom chevron with comfortable right spacing
   (the native arrow sits too close to the edge). Selector is specific enough to
   beat the base ".sc-form-field select" padding + background shorthands. */
.sc-form-field select.sc-appointment__treatment {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-color: var(--sc-input-bg, #ffffff);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%236b7280' stroke-width='1.5'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px;
}
.sc-appointment__more {
  margin-top: 10px;
  width: 100%;
  padding: 9px 12px;
  font: inherit;
  font-size: 0.9em;
  cursor: pointer;
  color: var(--sc-text);
  background: transparent;
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
}
.sc-appointment__more:hover { border-color: var(--sc-btn-bg); }
.sc-appointment__more:disabled { opacity: 0.6; cursor: default; }
/* When the appointment field fails validation, tint its treatment select. */
.sc-form-field--cs_appointment.sc-field-error .sc-appointment__slots { outline: none; }