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

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

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

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

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

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

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

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

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

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

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

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

.se-form-field input[type="text"],
.se-form-field input[type="email"],
.se-form-field input[type="tel"],
.se-form-field input[type="url"],
.se-form-field input[type="number"],
.se-form-field input[type="date"],
.se-form-field input[type="time"],
.se-form-field textarea,
.se-form-field select {
  display: block;
  width: 100%;
  padding: var(--se-input-padding, 10px 12px);
  border: 1px solid var(--se-border, #d1d5db);
  border-radius: var(--se-radius, 6px);
  font-family: inherit;
  font-size: var(--se-input-font-size, inherit);
  /* Input text and background are intentionally decoupled from --se-text and
     --se-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 --se-input-text / --se-input-bg to theme
     inputs explicitly. */
  color: var(--se-input-text, #1f2937);
  background: var(--se-input-bg, #ffffff);
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  line-height: 1.5;
}

.se-form-field input::placeholder,
.se-form-field textarea::placeholder,
.se-form-field select:invalid {
  color: var(--se-placeholder-color, #9ca3af);
  font-size: var(--se-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. */
.se-form-wrapper input[type="radio"],
.se-form-wrapper input[type="checkbox"] {
  accent-color: var(--se-btn-bg, #111827);
}

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

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

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

.se-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. */
.se-form-html { line-height: 1.6; }
.se-form-html > :first-child { margin-top: 0; }
.se-form-html > :last-child { margin-bottom: 0; }
.se-form-html img { max-width: 100%; height: auto; }

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

/* Typically the marketing-consent line, whose text is a full sentence and so
   nearly always wraps. Host themes style `label` heavily (Bricks and friends set
   display, font-weight and line-height on every label), and a single class loses
   to that — the box then drops out of the flex row and the second line of text
   runs underneath it. Prefix with .se-form-wrapper and pin the layout properties
   so the row cannot be taken apart, the same guard the custom radio/checkbox
   boxes below already use. */
.se-form-wrapper .se-checkbox-label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px;
  cursor: pointer;
  font-weight: 400 !important;
  line-height: 1.45;
  text-align: left;
  user-select: none;
  -webkit-user-select: none;
}

/* The text is its own flex item, so wrapped lines stay in a column beside the
   box instead of flowing under it. */
.se-form-wrapper .se-checkbox-label__text {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.45;
}

/* The box sits on the first line rather than centred against the whole block.
   Nudge it down by half the leading so it optically centres on that first line;
   max() keeps it safe if the computed line box is ever shorter than the box.
   font-size:inherit is what makes the calc trustworthy — a form control does not
   inherit font-size by default, so without it 1.45em would resolve against the
   browser's (or a theme's) input font-size instead of the label's line box. The
   box itself is unaffected: its dimensions and padding are pinned below. */
.se-form-wrapper .se-checkbox-label input[type="checkbox"] {
  font-size: inherit !important;
  margin: max(0px, calc((1.45em - 18px) / 2)) 0 0 0 !important;
  flex-shrink: 0;
  accent-color: var(--se-btn-bg, #111827);
}

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

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

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


.se-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;
}

.se-group-option input[type="checkbox"],
.se-group-option input[type="radio"] {
  width: 16px;
  height: 16px;
  margin: 0 6px 0 0;
  flex-shrink: 0;
  accent-color: var(--se-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. */
.se-form-wrapper .se-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
     .se-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(--se-border, #d1d5db);
  border-radius: 50%;
  background: var(--se-input-bg, #ffffff);
  position: relative;
}

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

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

.se-group-option input[type="radio"]:focus-visible {
  outline: 2px solid var(--se-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). */
.se-form-wrapper .se-group-option input[type="checkbox"],
.se-form-wrapper .se-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(--se-border, #d1d5db);
  border-radius: 4px;
  background: var(--se-input-bg, #ffffff);
  position: relative;
  cursor: pointer;
  vertical-align: middle;
}
.se-group-option input[type="checkbox"]:checked,
.se-checkbox-label input[type="checkbox"]:checked {
  border-color: var(--se-btn-bg, #111827);
  background: var(--se-btn-bg, #111827);
}
.se-group-option input[type="checkbox"]:checked::after,
.se-checkbox-label input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: solid var(--se-btn-text, #ffffff);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.se-group-option input[type="checkbox"]:focus-visible,
.se-checkbox-label input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--se-btn-bg, #111827);
  outline-offset: 2px;
}

.se-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 se-form.js for older
 * browsers without :has() support.
 */
.se-group-options--pills {
  gap: 10px;
}

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

.se-group-options--pills .se-group-option {
  position: relative;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--se-border, #d1d5db);
  border-radius: 999px;
  background: var(--se-input-bg, #ffffff);
  color: var(--se-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. */
.se-group-options--pills .se-group-option input[type="radio"],
.se-group-options--pills .se-group-option input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

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

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

/* Selected state. The .is-selected class (toggled by se-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. */
.se-group-options--pills .se-group-option.is-selected {
  border-color: var(--se-btn-bg, #111827);
  background: var(--se-btn-bg, #111827);
  color: var(--se-btn-text, #ffffff);
}

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

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

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

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

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

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

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

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

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

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

.se-form-btn {
  position: relative;
  display: inline-block;
  padding: var(--se-btn-padding, 10px 28px);
  background: var(--se-btn-bg, #111827);
  color: var(--se-btn-text, #fff);
  border: none;
  border-radius: var(--se-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;
}

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

.se-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. */
.se-form-btn.is-loading,
.se-form-btn.is-success {
  color: transparent !important;
  opacity: 1;
  cursor: default;
  pointer-events: none;
}

.se-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(--se-btn-text, #fff);
  border-radius: 50%;
  animation: se-btn-spin 0.6s linear infinite;
}

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

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

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

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

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

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

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

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

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

.se-form--multistep .se-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. */
.se-form-step:focus,
.se-form-step:focus-visible {
  outline: none;
}

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

/* Navigation row — Back sits left, Next/Submit sit right. */
.se-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). */
.se-form-step__nav .se-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) {
  .se-form-step__nav {
    flex-wrap: wrap;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.se-form-field .se-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
 * se-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:
 *   [smileengine_form id=1]                              -> light/light
 *   [smileengine_form id=1 theme=dark]                   -> dark/dark (immersive)
 *   [smileengine_form id=1 theme=dark inputs=light]      -> dark labels, white inputs
 */
/* Selectors are doubled (.class.class) to give them higher specificity than
 * the .se-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. */
.se-form-wrapper.se-form-wrapper--theme-dark {
  --se-text: #f9fafb;
  --se-border: rgba(255, 255, 255, 0.25);
  --se-placeholder-color: rgba(255, 255, 255, 0.55);
}

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

.se-form-wrapper.se-form-wrapper--theme-dark .se-form-field input:focus,
.se-form-wrapper.se-form-wrapper--theme-dark .se-form-field textarea:focus,
.se-form-wrapper.se-form-wrapper--theme-dark .se-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 ────────────────────────────────────────── */

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

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

/* Placeholder colour is driven by the admin's "Placeholder Colour" setting
 * (--se-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. */
.se-form-wrapper.se-form-wrapper .se-form-field input::placeholder,
.se-form-wrapper.se-form-wrapper .se-form-field textarea::placeholder {
  color: var(--se-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. */
.se-form-wrapper.se-form-wrapper--inputs-dark .se-form-field input[type="date"]::-webkit-calendar-picker-indicator,
.se-form-wrapper.se-form-wrapper--inputs-dark .se-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. */
.se-form-field--se_appointment .se-appointment { margin-top: 10px; }
.se-form-field--se_appointment .se-appointment__hint,
.se-form-field--se_appointment .se-appointment__empty {
  margin: 0;
  padding: 12px 14px;
  font-size: 0.9em;
  color: var(--se-placeholder-color);
  border: 1px dashed var(--se-border);
  border-radius: var(--se-radius);
}
.se-form-field--se_appointment .se-appointment__status {
  margin: 0;
  padding: 12px 14px;
  font-size: 0.9em;
  color: var(--se-placeholder-color);
}
/* The column count follows the CONTAINER, not the viewport. This form is
   routinely embedded in a sidebar, a popup or a half-width column, where a
   viewport media query happily reports "desktop" while the field itself is only
   a couple of hundred pixels wide — which is exactly when the old fixed 4-up
   grid crushed each slot until "9:00 am" broke across two lines.

   The track minimum is expressed in em so it tracks the form's own type scale:
   what decides whether a time fits is the font size, not the screen. A site
   running large body copy therefore gets fewer, wider slots automatically.
   min(…, 100%) keeps a single track from overflowing a container that is
   narrower than the minimum itself. Override --se-slot-min per site to trade
   density against slot width. */
.se-form-field--se_appointment .se-appointment__slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--se-slot-min, 9em), 100%), 1fr));
  /* em so the gutter keeps its proportion as type scales (0.65em ≈ the 10px
     this was at the default 15px, so the default layout is unchanged). */
  gap: 0.65em;
}
.se-appointment__slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  /* Grid items default to min-width:auto, which lets a long provider name or a
     wide time push the track past its share and blow the grid out sideways.
     Zero lets the track keep control of the width. */
  min-width: 0;
  /* A <button> does not inherit font-size, so without this the slot sat at the
     browser's ~13px form-control default and its "1.2em" time never tracked the
     form's type at all — except on themes that happen to ship `button { font:
     inherit }`, which is why the same slot looked different from site to site.
     The "Load more" button below already does this; the slot was the outlier. */
  font: inherit;
  /* em for the same reason as the gutter: fixed px padding is a shrinking share
     of the tile as type grows, so large-type sites ended up with cramped slots.
     At the default 15px these resolve to the 12px / 8px they always were. */
  padding: 0.8em 0.55em;
  cursor: pointer;
  background: transparent;
  color: var(--se-text);
  border: 1px solid var(--se-border);
  border-radius: var(--se-radius);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.se-appointment__slot:hover { border-color: var(--se-btn-bg); }
.se-appointment__slot.is-selected {
  border-color: var(--se-btn-bg);
  box-shadow: inset 0 0 0 1px var(--se-btn-bg);
}
/* A time and a date each read as one unit — "9:00 am" must never wrap to
   "9:00" over "am", which is what made a tight slot look broken rather than
   merely narrow. */
.se-appointment__slot-time,
.se-appointment__slot-date {
  white-space: nowrap;
  line-height: 1.25;
}
.se-appointment__slot-time { font-size: 1.2em; }
/* Secondary to the time, and the smaller size is what buys the date room to
   stay on one line in a narrow track. */
.se-appointment__slot-date { font-size: 0.9em; color: var(--se-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 ".se-form-field select" padding + background shorthands. */
.se-form-field select.se-appointment__treatment {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-color: var(--se-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;
}
.se-appointment__more {
  margin-top: 10px;
  width: 100%;
  padding: 9px 12px;
  font: inherit;
  font-size: 0.9em;
  cursor: pointer;
  color: var(--se-text);
  background: transparent;
  border: 1px solid var(--se-border);
  border-radius: var(--se-radius);
}
.se-appointment__more:hover { border-color: var(--se-btn-bg); }
.se-appointment__more:disabled { opacity: 0.6; cursor: default; }
/* When the appointment field fails validation, tint its treatment select. */
.se-form-field--se_appointment.se-field-error .se-appointment__slots { outline: none; }