/* -----------------------------------------------------------------
 * BRAND TOKENS — v0.4.45
 * One palette for every plugin-owned block: add-on options, the select
 * rotator, the appointment picker, the location picker, the package
 * picker and the book button.
 *
 * Before this, the appointment picker and book button were blue/slate
 * (#2563EB / #cbd5e1) while everything else was MedEx purple/pink — two
 * plugin blocks on the same form disagreeing about the brand. Every hex
 * below now flows from here, so retuning the palette is a one-place edit
 * and no block can drift again.
 *
 * Fonts: every block uses `font-family: inherit`, so all of this adopts
 * the site's own typefaces rather than shipping its own.
 * ----------------------------------------------------------------- */
:root {
  --mmt-purple:        #9b1cbf;   /* primary accent / selected state      */
  --mmt-purple-deep:   #910cb9;
  --mmt-purple-dark:   #7a1596;   /* text on light purple                 */
  --mmt-purple-wash:   #faf0ff;   /* selected tint background             */
  --mmt-pink:          #e0197f;   /* prices, fees, committed upcharges    */
  --mmt-orange:        #ff8a63;   /* gradient tail (MedEx brand)          */
  --mmt-pink-bright:   #ff4c88;   /* gradient head (MedEx brand)          */
  --mmt-grad:          linear-gradient(122deg, #ff4c88 12%, #ff8a63 71%);
  --mmt-ink:           #2a0f3a;   /* headings / primary text              */
  --mmt-ink-2:         #5c4470;   /* body text                            */
  --mmt-muted:         #8c6ea5;   /* secondary / hint text                */
  --mmt-line:          #ede0f2;   /* default border                       */
  --mmt-line-strong:   #d9b6e8;   /* hover border                         */
  --mmt-card-tint:     #fdf6ff;   /* selected card gradient tail          */
  --mmt-disabled-bg:   #f7f2fa;
  --mmt-disabled-fg:   #b49dc4;
  --mmt-ink-fallback:  #4a1a5c;

  /* Spacing rhythm — shared so the blocks stack evenly. */
  --mmt-gap:      10px;
  --mmt-gap-lg:   18px;
  --mmt-radius:   12px;
  --mmt-radius-lg:16px;
}

/*
 * MedEx Metform Toolkit — add-on option styles.
 *
 * v0.3.18: Compact vertical rows. Each option renders as a single row with
 * a short title + price on the same line, and an optional <details> element
 * below for the long description. The layout uses CSS grid so the price
 * always sits in its own column and never word-breaks vertically (the visible
 * bug in v0.3.17).
 *
 * All selectors use data-mmt-* attributes rather than class names, so the
 * styles still apply if Metform's React/JSX pipeline converts our `class`
 * attributes into `className` (which browsers ignore on unrecognized props).
 *
 * v0.4.28 — hardened against theme interference. Every text element in
 * every plugin-owned block now sets its own explicit color, opacity,
 * text-shadow, filter, and font-family. Some client themes inherit
 * near-white / semi-transparent colors from wrappers, making our labels
 * invisible on top of the light backgrounds. The defensive reset below
 * neutralizes that at the block level with high specificity + !important.
 */

/* -----------------------------------------------------------------
 * DEFENSIVE RESET
 * Applies to every text-carrying descendant of every plugin block.
 * Forces visibility properties that themes commonly override, without
 * touching layout properties (which our specific rules below set).
 * ----------------------------------------------------------------- */
[data-mmt-addon-block],
[data-mmt-addon-block] *,
.mf-input-select.mmt-rotator-active,
.mf-input-select.mmt-rotator-active *,
.medex-appt-picker,
.medex-appt-picker *,
.medex-loc,
.medex-loc *,
.medex-book-btn {
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
  -webkit-text-fill-color: currentColor !important;   /* Safari sometimes uses this to hide text */
  visibility: visible !important;
}
/* Extra safety: any descendant that isn't a specifically-styled block
 * of ours falls back to a legible dark purple on transparent. Specific
 * rules below override with the correct per-element color. */
[data-mmt-addon-block],
.mf-input-select.mmt-rotator-active,
.medex-appt-picker {
  color: var(--mmt-ink-fallback, #4a1a5c) !important;
}

/* v0.4.41 — REMOVED all broad kill switches on `.mf-input-wrapper` /
 * `.mf-input` / `.mf-input-label`. Those affected every text input, label,
 * and wrapper on every Metform form site-wide — the theme's grey #fafafa
 * intent leaked through, other plugins that use these classes got side-
 * effects, and we couldn't reliably control what would light up.
 *
 * All plugin-owned styling now lives ONLY inside our own containers:
 *   - `[data-mmt-addon-block]`   — add-on options
 *   - `.mf-input-select.mmt-rotator-active`  — rotator
 *   - `.medex-appt-picker`       — appointment picker
 *   - `.medex-book-btn`          — book button
 * Everything outside those is left to the theme as intended. */

/* v0.4.41 — rotator container transparency ONLY on our own container
 * class. No `.mf-input-wrapper` targeting — that class isn't ours.
 * Adjacent-item cards' own explicit backgrounds still win below. */
html body .mf-input-select.mmt-rotator-active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}
/* Rotator's own react-select hidden-input transparency. Scoped to
 * `.mmt-rotator-active` so no other .mf-input elsewhere is touched. */
html body .mf-input-select.mmt-rotator-active input.mf-input,
html body .mf-input-select.mmt-rotator-active input.mf-input:focus {
  background: transparent !important;
  background-color: transparent !important;
}

/* v0.4.35 → v0.4.37 → v0.4.39 → v0.4.41 — dropdown animation.
 * v0.4.37's `transition: opacity 100ms` didn't work because a transition
 * needs a starting state to animate FROM. React-select renders the menu
 * with opacity:1 already, so there was nothing to transition from →
 * still flickered. Replaced with a keyframe animation that forces a
 * 0→1 fade every time the element mounts, regardless of computed
 * starting opacity. Also disable any theme-provided animation so ours
 * isn't stacked with a slower/laggy competitor. */
@keyframes medex-mmt-menu-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
html body .mf_select__menu,
html body .mf_select__menu-portal,
html body .mf_select__menu-list {
  animation: medex-mmt-menu-fade-in 120ms ease-out !important;
  transition: none !important;
  transform: none !important;
}

/* v0.4.41 — while the rotator is programmatically opening + picking an
 * option (adjacent-item click, arrow button), the menu briefly appears
 * — with the fade animation running — before we click and close it.
 * That short window IS the visible flicker users see. Suppress it by
 * hiding the menu and killing its animation whenever `body.mmt-selecting`
 * is set (JS adds this class for ~120ms during selectOptionByIndex).
 *
 * The body-level marker is required because the site's custom CSS
 * portals `.mf_select__menu` out of the `.mf-input-select` container
 * to `document.body`, so container-scoped selectors miss it. */
html body.mmt-selecting .mf_select__menu,
html body.mmt-selecting .mf_select__menu-portal,
html body.mmt-selecting .mf_select__menu-list {
  visibility: hidden !important;
  opacity: 0 !important;
  animation: none !important;
  pointer-events: none !important;
}

/* ---- Block container ---- */

[data-mmt-addon-block] {
  border: 1px solid #e0d0ff;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 16px 0;
  background: linear-gradient(135deg, #FDEA7212 0%, #FF07D710 50%, var(--mmt-purple-deep, #910cb9)0c 100%);
  box-shadow: 0 1px 4px rgba(145, 12, 185, 0.04);
  font-family: inherit;
}

[data-mmt-addon-block] > *:first-child,
[data-mmt-addon-label] {
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--mmt-ink-fallback, #4a1a5c) !important;
  margin-bottom: 8px !important;
  padding-bottom: 6px !important;
  border-bottom: 1px dashed rgba(145, 12, 185, 0.2) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

[data-mmt-addon-options] {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

/* ---- Option item wrapper ---- */

[data-mmt-addon-item] {
  background: #fff;
  border: 1px solid #dcd5e9;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
[data-mmt-addon-item]:hover {
  border-color: #b378d1;
  box-shadow: 0 1px 4px rgba(145, 12, 185, 0.06);
}
/* Selected states — both button-mode (data-mmt-selected) and input-mode (:has) */
[data-mmt-addon-item]:has(button[data-mmt-selected="1"]),
[data-mmt-addon-item]:has(input:checked) {
  border-color: var(--mmt-purple-deep, #910cb9);
  background: linear-gradient(135deg, #fdea7215 0%, #ffe25915 100%);
}

/* ---- The option row itself (button or label) ---- */

button[data-mmt-group],
label[data-mmt-group] {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  margin: 0;
}
button[data-mmt-group]:focus,
label[data-mmt-group]:focus-within {
  outline: 2px solid var(--mmt-purple-deep, #910cb9);
  outline-offset: -2px;
}

/* Circle indicator (unchecked) via ::before pseudo-element */
button[data-mmt-group]::before,
label[data-mmt-group]::before {
  content: '○';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 20px;
  color: #b8a8d1;
  font-weight: 700;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
/* Checked/selected indicator */
button[data-mmt-group][data-mmt-selected="1"]::before,
label[data-mmt-group]:has(input:checked)::before {
  content: '✓';
  color: #fff;
  background: var(--mmt-purple-deep, #910cb9);
  border-radius: 50%;
  font-size: 12px;
  width: 20px;
  height: 20px;
  box-shadow: 0 1px 3px rgba(145, 12, 185, 0.4);
}

/* Hide the real input in input mode — the ::before pseudo does the visual */
label[data-mmt-group] input[type="radio"],
label[data-mmt-group] input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  margin: 0;
}

/* ---- Title (short label, clamped to 2 lines) ---- */

/* v0.4.30 — nuclear override for addon title visibility.
 * Some themes apply .mmt-addon-title or [data-mmt-addon-title] rules with
 * !important AND higher specificity. Match on BOTH class and attribute at
 * the block level so we tie/beat any conceivable theme rule short of an
 * inline style. Covers every level a theme might target. */
[data-mmt-addon-block] .mmt-addon-title,
[data-mmt-addon-block] [data-mmt-addon-title],
[data-mmt-addon-block] .mmt-addon-option .mmt-addon-title,
[data-mmt-addon-block] .mmt-addon-option [data-mmt-addon-title],
[data-mmt-addon-block] label.mmt-addon-option .mmt-addon-title,
[data-mmt-addon-block] label.mmt-addon-option [data-mmt-addon-title],
[data-mmt-addon-block] button.mmt-addon-option .mmt-addon-title,
[data-mmt-addon-block] button.mmt-addon-option [data-mmt-addon-title] {
  color: var(--mmt-ink-fallback, #4a1a5c) !important;
  -webkit-text-fill-color: var(--mmt-ink-fallback, #4a1a5c) !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-shadow: none !important;
  filter: none !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  background: transparent !important;
  text-indent: 0 !important;
}
[data-mmt-addon-block] .mmt-addon-option[data-mmt-selected="1"] .mmt-addon-title,
[data-mmt-addon-block] .mmt-addon-option[data-mmt-selected="1"] [data-mmt-addon-title],
[data-mmt-addon-block] .mmt-addon-option:has(input:checked) .mmt-addon-title,
[data-mmt-addon-block] .mmt-addon-option:has(input:checked) [data-mmt-addon-title] {
  color: #2a0a3a !important;
  -webkit-text-fill-color: #2a0a3a !important;
  font-weight: 700 !important;
}

[data-mmt-addon-title] {
  min-width: 0;                 /* allow the grid cell to shrink for ellipsis */
  font-weight: 500 !important;
  /* v0.4.28 — WAS `color: inherit`, but some page/theme styles inherit
   * a near-white color that made the addon-option labels invisible.
   * Explicit dark purple wins regardless of theme. */
  color: var(--mmt-ink-fallback, #4a1a5c) !important;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  text-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
}
button[data-mmt-group][data-mmt-selected="1"] [data-mmt-addon-title],
[data-mmt-addon-item]:has(input:checked) [data-mmt-addon-title] {
  font-weight: 600 !important;
  color: var(--mmt-ink-fallback, #4a1a5c) !important;
}

/* ---- Price badge — nowrap keeps "4,499" on one line ---- */

[data-mmt-price-badge] {
  white-space: nowrap;
  color: var(--mmt-purple-deep, #910cb9);
  font-weight: 700 !important;
  font-size: 12px !important;
  padding-left: 8px;
  text-transform: none !important;
  letter-spacing: normal !important;
}
button[data-mmt-group][data-mmt-selected="1"] [data-mmt-price-badge],
[data-mmt-addon-item]:has(input:checked) [data-mmt-price-badge] {
  color: var(--mmt-ink-fallback, #4a1a5c);
}

/* ---- Expandable details (<details>/<summary>) ---- */

[data-mmt-addon-details] {
  border-top: 1px dashed rgba(145, 12, 185, 0.15);
  background: rgba(255, 255, 255, 0.5);
}

[data-mmt-addon-toggle] {
  display: block;
  padding: 6px 14px 6px 40px;    /* 40px left-aligns with the title */
  font-size: 12px;
  color: #7a4a8a;
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: background 0.15s;
}
[data-mmt-addon-toggle]::-webkit-details-marker {
  display: none;
}
[data-mmt-addon-toggle]::before {
  content: '▸ ';
  display: inline-block;
  margin-right: 4px;
  transition: transform 0.15s;
}
[data-mmt-addon-details][open] > [data-mmt-addon-toggle]::before {
  content: '▾ ';
}
[data-mmt-addon-toggle]:hover {
  background: rgba(145, 12, 185, 0.05);
  color: var(--mmt-ink-fallback, #4a1a5c);
}

[data-mmt-addon-desc] {
  padding: 4px 14px 12px 40px;
  font-size: 12px;
  line-height: 1.55;
  color: #555;
  word-break: break-word;
}

/* ---- Summary panel (runtime updates via characterData mutations only) ---- */

[data-mmt-summary] {
  margin-top: 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 8px;
  border: 1px solid rgba(145, 12, 185, 0.15);
  font-size: 13px;
  min-height: 1.5em;
  color: var(--mmt-ink-fallback, #4a1a5c);
  font-weight: 500;
  line-height: 1.5;
  word-break: break-word;
}

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

@media (max-width: 640px) {
  [data-mmt-addon-block] {
    padding: 12px 12px;
  }
  button[data-mmt-group],
  label[data-mmt-group] {
    grid-template-columns: 20px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 10px 12px;
    font-size: 13px;
  }
  [data-mmt-addon-title] {
    -webkit-line-clamp: 3;
  }
  [data-mmt-price-badge] {
    font-size: 12px;
    padding-left: 4px;
  }
  [data-mmt-addon-toggle],
  [data-mmt-addon-desc] {
    padding-left: 36px;
    font-size: 11.5px;
  }
}

/* ============================================================
 * v0.3.20 — Metform select-widget enhancement.
 *
 * Applied by select-enhance.js: parses the pipe-delimited text of
 * .mf_select__single-value and .mf_select__option, replaces innerHTML
 * with a structured layout, and marks with data-mmt-enhanced="1".
 * All rules scoped to [data-mmt-enhanced] so we don't disturb Metform
 * selects on pages without our block.
 * ============================================================ */

/* ---- Selected display (always visible, above the dropdown) ---- */

.mf_select__single-value[data-mmt-enhanced] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: normal !important;
  line-height: 1.4 !important;
  overflow: visible !important;
  position: static !important;   /* react-select sets position: absolute — override */
  transform: none !important;    /* and translateY — override so our content flows normally */
  top: auto !important;
}

/* Give the containing control room for our multi-row content */
.mf_select__control:has(.mf_select__single-value[data-mmt-enhanced]) {
  min-height: auto !important;
  padding: 6px 8px !important;
  align-items: stretch !important;
}
.mf_select__value-container:has(.mf_select__single-value[data-mmt-enhanced]) {
  padding: 0 !important;
  display: block !important;
}

/* "✓ Currently selected" badge */
.mf_select__single-value[data-mmt-enhanced] [data-mmt-inline-badge] {
  display: inline-block;
  background: var(--mmt-purple-deep, #910cb9);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  margin-bottom: 6px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.4;
  vertical-align: middle;
}

/* Title + price row */
.mf_select__single-value[data-mmt-enhanced] [data-mmt-inline-row] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.mf_select__single-value[data-mmt-enhanced] [data-mmt-inline-title] {
  min-width: 0;
  flex: 1 1 auto;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  color: var(--mmt-ink-fallback, #4a1a5c);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.mf_select__single-value[data-mmt-enhanced] [data-mmt-inline-price] {
  flex: 0 0 auto;
  white-space: nowrap;
  font-weight: 700 !important;
  font-size: 18px !important;
  color: var(--mmt-purple-deep, #910cb9);
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Details block sits below the title/price row */
.mf_select__single-value[data-mmt-enhanced] [data-mmt-inline-details] {
  margin-top: 4px;
  border-top: 1px dashed rgba(145, 12, 185, 0.15);
  padding-top: 4px;
}

/* ---- Dropdown option rows ---- */

.mf_select__option[data-mmt-enhanced] {
  padding: 12px 14px !important;
  white-space: normal;
  line-height: 1.4;
  border-bottom: 1px solid rgba(145, 12, 185, 0.08);
}
.mf_select__option[data-mmt-enhanced]:last-child {
  border-bottom: none;
}

.mf_select__option[data-mmt-enhanced] [data-mmt-inline-row] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.mf_select__option[data-mmt-enhanced] [data-mmt-inline-title] {
  min-width: 0;
  flex: 1 1 auto;
  font-weight: 500;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.mf_select__option[data-mmt-enhanced] [data-mmt-inline-price] {
  flex: 0 0 auto;
  white-space: nowrap;
  font-weight: 700;
  color: var(--mmt-purple-deep, #910cb9);
  font-size: 13px;
}

/* --is-selected = the user's current pick (persistent, painted with the
 * deep coral). White text reads clearly against that background.
 *
 * --is-focused = mouse-hovered OR keyboard-focused option (transient,
 * lighter/pinker background from the theme). We intentionally do NOT
 * force white here — the user wants hover to keep the default title/
 * price/description colors so the hover feedback stays subtle and the
 * text stays readable in its usual palette. */
.mf_select__option--is-selected[data-mmt-enhanced] [data-mmt-inline-title] {
  color: #fff !important;
  font-weight: 600;
}
.mf_select__option--is-selected[data-mmt-enhanced] [data-mmt-inline-price] {
  color: #fff !important;
}
.mf_select__option--is-selected[data-mmt-enhanced] > [data-mmt-inline-desc] {
  color: #fff !important;
}

/* Option description — always visible, wraps to as many lines as needed.
 * The dropdown menu itself has max-height: 80vh (from theme CSS) and
 * scrolls internally, so long lists remain browsable even if individual
 * options are tall. */
.mf_select__option[data-mmt-enhanced] > [data-mmt-inline-desc] {
  margin-top: 4px;
  padding: 0;
  border-top: none;
  font-size: 12px;
  line-height: 1.5;
  color: #666;
  word-break: break-word;
}

/* Expandable details inside the option */
[data-mmt-inline-details] {
  margin-top: 6px;
}
[data-mmt-inline-toggle] {
  display: inline-block;
  font-size: 12px;
  color: #7a4a8a;
  cursor: pointer;
  user-select: none;
  list-style: none;
  padding: 2px 0;
}
[data-mmt-inline-toggle]::-webkit-details-marker {
  display: none;
}
[data-mmt-inline-toggle]::before {
  content: '▸ ';
  margin-right: 2px;
}
[data-mmt-inline-details][open] > [data-mmt-inline-toggle]::before {
  content: '▾ ';
}
[data-mmt-inline-desc] {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.55;
  color: #555;
  word-break: break-word;
}

/* Mobile refinements */
@media (max-width: 640px) {
  .mf_select__single-value[data-mmt-enhanced] [data-mmt-inline-title] {
    font-size: 13px;
    -webkit-line-clamp: 2;
  }
  .mf_select__single-value[data-mmt-enhanced] [data-mmt-inline-price] {
    font-size: 12px;
  }
  .mf_select__option[data-mmt-enhanced] {
    padding: 10px 12px !important;
  }
  .mf_select__option[data-mmt-enhanced] [data-mmt-inline-title] {
    font-size: 13px;
  }
  .mf_select__option[data-mmt-enhanced] [data-mmt-inline-price] {
    font-size: 12px;
  }
}

/* =============================================================
 * v0.3.40 — Select-clinic rotator (compact iPhone-picker style)
 * Adjacent options stack tightly around the react-select control.
 * Items use div-with-role (not <button>) to escape theme button
 * styling. Buttons + hint share one line below the card.
 * ============================================================= */

.mf-input-select.mmt-rotator-active {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 4px 0;
  margin: 0;
  position: relative;
  /* v0.4.25 added `background: #fafafa` to prevent page-color bleed
   * into the adjacent-item cards. v0.4.38 reverts to transparent to
   * match v0.4.23's baseline — the user preferred the natural page
   * background showing through here. If bleed becomes a problem on
   * some page, address it at the item level (make adjacent items
   * fully opaque) instead of tinting the whole container. */
  background: transparent;
  border-radius: 0;
  border: 0;
}

/* Hide the react-select menu while we open it programmatically for
 * option-cache building or programmatic selection. */
.mf-input-select.mmt-programmatic .mf_select__menu,
.mf-input-select.mmt-programmatic .mf_select__menu-portal {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Kill any inherited margin on the react-select control itself so the
 * next-item flows tight against it. Solid white background + soft
 * shadow makes the current card pop above the faded adjacent items.
 * Coral-pink border is preserved across ALL react-select states —
 * react-select's default `--is-focused` styling would otherwise turn
 * the border blue on focus, breaking the theme's aesthetic. */
.mf-input-select.mmt-rotator-active .mf_select__control,
.mf-input-select.mmt-rotator-active .mf_select__control:hover,
.mf-input-select.mmt-rotator-active .mf_select__control--is-focused {
  order: 0;
  margin: 4px 0 !important;
  background: #fff !important;
  box-shadow: 0 6px 20px rgba(145, 12, 185, 0.14), 0 2px 6px rgba(145, 12, 185, 0.08) !important;
  border: 2px solid #ea6d8b !important;
  border-radius: 12px !important;
}

/* Adjacent items (prev/next). Compact clickable rows with text-transform
 * forced off — WordPress themes commonly uppercase everything with a
 * `role="button"` in a form context, so we override defensively. */
.mmt-r-item {
  order: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 5px 14px !important;
  margin: 1px 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: 34px;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--mmt-ink-fallback, #4a1a5c) !important;
  background: rgba(255, 255, 255, 0.4) !important;
  border: 1px solid rgba(145, 12, 185, 0.1) !important;
  border-radius: 6px !important;
  cursor: pointer;
  transition: opacity 0.2s ease, background 0.15s, border-color 0.15s;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-family: inherit !important;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  line-height: 1.3 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
.mmt-r-item:hover,
.mmt-r-item:focus-visible {
  opacity: 1 !important;
  background: #fff !important;
  border-color: rgba(145, 12, 185, 0.45) !important;
  box-shadow: 0 1px 4px rgba(145, 12, 185, 0.15) !important;
  color: var(--mmt-ink-fallback, #4a1a5c) !important;
}
.mmt-r-item .mmt-r-item-name {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500 !important;
  color: inherit !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
}
.mmt-r-item .mmt-r-item-price {
  flex: 0 0 auto;
  color: var(--mmt-purple-deep, #910cb9) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1.3 !important;
}

/* Distance-based fade. Kept high enough that all items are legible on
 * the pink theme background — the picker's job is to show adjacent
 * options, not to hide them. */
.mmt-r-dprev2 { order: -4; opacity: 0.7; }
.mmt-r-dprev1 { order: -3; opacity: 0.9; }
.mmt-r-dnext1 { order:  1; opacity: 0.9; }
.mmt-r-dnext2 { order:  2; opacity: 0.7; }

/* Controls + hint share a single flex row directly under the next
 * items — no big gap, no floating in space. */
.mmt-r-controls {
  order: 3;
  display: inline-flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
  margin: 6px auto 0 auto;
  padding: 0;
}
.mmt-r-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 24px;
  border: 1px solid #d4b8dc !important;
  background: linear-gradient(180deg, #fff 0%, #fafafa 100%) !important;
  color: var(--mmt-ink-fallback, #4a1a5c) !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(145, 12, 185, 0.08) !important;
  transition: all 0.15s;
  padding: 0 !important;
  text-transform: none !important;
  font-family: inherit !important;
  user-select: none;
}
.mmt-r-btn:hover:not(.mmt-r-btn-disabled) {
  background: linear-gradient(180deg, #f9f3fc 0%, #f3e5f8 100%) !important;
  border-color: var(--mmt-purple-deep, #910cb9) !important;
  color: var(--mmt-purple-deep, #910cb9) !important;
}
.mmt-r-btn:active:not(.mmt-r-btn-disabled) { transform: scale(0.94); }
.mmt-r-btn-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.mmt-r-btn:focus-visible {
  outline: 2px solid var(--mmt-purple-deep, #910cb9);
  outline-offset: 2px;
}

.mmt-r-hint {
  order: 4;
  text-align: center;
  /* v0.4.28 — was #666 which some themes overrode. Force explicit tone. */
  color: #5a3a72 !important;
  font-size: 12px !important;
  padding: 4px 12px 2px 12px;
  font-style: italic !important;
  letter-spacing: 0.02em !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  font-family: inherit;
  text-decoration: none !important;
  background: transparent !important;
}
.mmt-r-hint strong {
  font-style: normal !important;
  font-weight: 700 !important;
  color: var(--mmt-ink-fallback, #4a1a5c) !important;
  font-size: inherit !important;
}

/* Mobile: bigger tap targets on both items and buttons */
@media (max-width: 640px) {
  .mmt-r-item {
    padding: 8px 12px !important;
    font-size: 12px !important;
    max-height: 40px;
  }
  .mmt-r-item .mmt-r-item-price { font-size: 12px !important; }
  .mmt-r-btn { width: 40px; height: 30px; font-size: 13px !important; }
  .mmt-r-hint { font-size: 10px; }
}

/* v0.3.38 — badge state variants (rotator-aware) */
.mf_select__single-value[data-mmt-enhanced] [data-mmt-inline-badge] {
  text-transform: none !important;
  letter-spacing: normal !important;
}
.mf_select__single-value[data-mmt-enhanced] [data-mmt-inline-badge][data-mmt-badge-state="default"] {
  background: linear-gradient(90deg, #d4b8dc 0%, #a679b8 100%);
  color: #fff;
  font-size: 11px;
  padding: 3px 10px;
}
.mf_select__single-value[data-mmt-enhanced] [data-mmt-inline-badge][data-mmt-badge-state="selected"] {
  background: var(--mmt-purple-deep, #910cb9);
  color: #fff;
}

/* Also cover portal-rendered react-select menus during programmatic ops */
body > .mf_select__menu-portal.mmt-hide-portal { visibility: hidden !important; pointer-events: none !important; }

/* v0.4.0 — Sale-price display: strikethrough regular + special */
.mmt-addon-price-sale { display: inline-flex; align-items: baseline; gap: 6px; }
.mmt-price-regular {
  text-decoration: line-through;
  color: #888 !important;
  font-weight: 500 !important;
  font-size: 11px !important;
}
.mmt-price-special {
  color: #d63384 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}
button[data-mmt-group][data-mmt-selected="1"] .mmt-price-regular,
[data-mmt-addon-item]:has(input:checked) .mmt-price-regular { color: #a67 !important; }
button[data-mmt-group][data-mmt-selected="1"] .mmt-price-special,
[data-mmt-addon-item]:has(input:checked) .mmt-price-special { color: var(--mmt-ink-fallback, #4a1a5c) !important; }

/* v0.4.0 — Options hidden by a matched condition */
[data-mmt-addon-item].mmt-cond-hidden,
.mmt-cond-hidden { display: none !important; }

/* =============================================================
 * v0.4.2 — Variation pills (shared: addons + package rotator)
 * ============================================================= */

/* The wrapper around all variation groups for one addon or package */
[data-mmt-variations-ui], .mmt-r-pkg-variations {
  padding: 8px 12px 4px 12px;
  background: rgba(255, 255, 255, 0.35);
  border-top: 1px dashed rgba(145, 12, 185, 0.15);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mmt-r-pkg-variations {
  border-top: none;
  padding: 4px 6px 2px 6px;
  background: transparent;
  margin: 2px 0;
}

/* One variation group (e.g. "Duration: [pill] [pill] [pill]") */
.mmt-var-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.mmt-var-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--mmt-ink-fallback, #4a1a5c) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  flex: 0 0 auto;
  min-width: 60px;
}
.mmt-var-options {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1 1 auto;
}

/* Individual pill (single-select radio behavior) */
.mmt-var-pill {
  appearance: none;
  border: 1px solid #d4b8dc !important;
  background: #fff !important;
  color: var(--mmt-ink-fallback, #4a1a5c) !important;
  padding: 4px 10px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
  cursor: pointer;
  font-weight: 500 !important;
  transition: all 0.15s;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-family: inherit !important;
  white-space: nowrap;
  box-shadow: none !important;
}
.mmt-var-pill:hover {
  border-color: var(--mmt-purple-deep, #910cb9) !important;
  background: #fbf5fd !important;
}
.mmt-var-pill[data-selected="1"] {
  background: var(--mmt-purple-deep, #910cb9) !important;
  color: #fff !important;
  border-color: var(--mmt-purple-deep, #910cb9) !important;
  font-weight: 600 !important;
}
.mmt-var-pill:focus-visible {
  outline: 2px solid var(--mmt-purple-deep, #910cb9);
  outline-offset: 2px;
}

/* =============================================================
 * v0.4.9 — Book Button feature
 * ============================================================= */
.medex-book-btn {
  display: inline-block;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  line-height: 1.4;
  transition: all 0.15s ease;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  letter-spacing: normal;
  text-transform: none;
  vertical-align: middle;
}
.medex-book-btn:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.5);
  outline-offset: 2px;
}
.medex-book-btn.medex-book-btn-loading {
  opacity: 0.7;
  pointer-events: none;
  cursor: wait;
}

/* Primary — solid blue */
.medex-book-btn-primary {
  background: var(--mmt-purple, #9b1cbf);
  color: #fff;
}
.medex-book-btn-primary:hover {
  background: #1D4ED8;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* Secondary — outlined */
.medex-book-btn-secondary {
  background: transparent;
  color: var(--mmt-purple, #9b1cbf);
  border: 2px solid var(--mmt-purple, #9b1cbf);
  padding: 10px 22px; /* compensate for border */
}
.medex-book-btn-secondary:hover {
  background: var(--mmt-purple, #9b1cbf);
  color: #fff;
}

/* Pill — brand-gradient */
.medex-book-btn-pill {
  background: linear-gradient(135deg, var(--mmt-purple-deep, #910cb9), #d63384);
  color: #fff;
  border-radius: 100px;
  padding: 12px 32px;
}
.medex-book-btn-pill:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(145, 12, 185, 0.35);
}

/* Text — link style, minimal chrome */
.medex-book-btn-text {
  background: transparent;
  color: var(--mmt-purple, #9b1cbf);
  padding: 6px 8px;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.medex-book-btn-text:hover {
  color: #1D4ED8;
  background: rgba(37, 99, 235, 0.06);
}

/* =============================================================
 * v0.4.12 — Appointment Picker (merged date + time)
 * ============================================================= */
.medex-appt-picker {
  margin: 18px 0;
  padding: 16px;
  background: #f8fafc;
  border: 1px solid var(--mmt-line, #ede0f2);
  border-radius: 12px;
  font-family: inherit;
}
.medex-appt-label {
  font-size: 14px;
  font-weight: 600 !important;
  color: var(--mmt-ink, #2a0f3a) !important;
  margin-bottom: 10px;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.medex-appt-dates {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 14px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.medex-appt-dates::-webkit-scrollbar { height: 6px; }
.medex-appt-dates::-webkit-scrollbar-thumb { background: var(--mmt-line-strong, #d9b6e8); border-radius: 3px; }

.medex-appt-date {
  flex: 0 0 auto;
  padding: 10px 14px !important;
  border: 1.5px solid var(--mmt-line, #ede0f2) !important;
  background: #fff !important;
  border-radius: 10px !important;
  cursor: pointer;
  font-family: inherit !important;
  font-size: 13px !important;
  min-width: 84px;
  text-align: center;
  line-height: 1.3;
  transition: all 0.15s;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--mmt-ink, #2a0f3a) !important;
  box-shadow: none !important;
}
.medex-appt-date:hover { border-color: var(--mmt-line-strong, #d9b6e8) !important; }
.medex-appt-date.is-selected {
  border-color: var(--mmt-purple, #9b1cbf) !important;
  background: var(--mmt-purple-wash, #faf0ff) !important;
  color: var(--mmt-purple, #9b1cbf) !important;
  font-weight: 600 !important;
}
.medex-appt-date-day {
  display: block;
  font-size: 11px !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  font-weight: 500 !important;
}
.medex-appt-date.is-selected .medex-appt-date-day { color: var(--mmt-purple, #9b1cbf) !important; }
.medex-appt-date-num {
  display: block;
  font-size: 15px !important;
  font-weight: 600 !important;
  margin-top: 2px;
}

.medex-appt-times {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.medex-appt-time {
  padding: 10px 4px !important;
  border: 1.5px solid var(--mmt-line, #ede0f2) !important;
  background: #fff !important;
  border-radius: 8px !important;
  cursor: pointer;
  font-family: inherit !important;
  font-size: 13px !important;
  text-align: center;
  transition: all 0.15s;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--mmt-ink, #2a0f3a) !important;
  box-shadow: none !important;
  font-weight: 500 !important;
}
.medex-appt-time:hover { border-color: var(--mmt-line-strong, #d9b6e8) !important; }
.medex-appt-time.is-selected {
  border-color: var(--mmt-purple, #9b1cbf) !important;
  background: var(--mmt-purple-wash, #faf0ff) !important;
  color: var(--mmt-purple, #9b1cbf) !important;
  font-weight: 600 !important;
}
.medex-appt-time:focus-visible,
.medex-appt-date:focus-visible {
  outline: 2px solid var(--mmt-purple, #9b1cbf);
  outline-offset: 2px;
}

@media (max-width: 520px) {
  .medex-appt-times { grid-template-columns: repeat(3, 1fr); }
  .medex-appt-picker { padding: 12px; }
}

/* v0.4.13 — Appointment picker disabled states */
.medex-appt-date.is-disabled,
.medex-appt-time.is-disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
  background: var(--mmt-disabled-bg, #f7f2fa) !important;
  color: var(--mmt-disabled-fg, #b49dc4) !important;
  border-color: var(--mmt-line, #ede0f2) !important;
  text-decoration: line-through;
}
.medex-appt-date.is-disabled:hover,
.medex-appt-time.is-disabled:hover {
  border-color: var(--mmt-line, #ede0f2) !important;
  background: var(--mmt-disabled-bg, #f7f2fa) !important;
  color: var(--mmt-disabled-fg, #b49dc4) !important;
}
.medex-appt-date.is-disabled .medex-appt-date-day,
.medex-appt-date.is-disabled .medex-appt-date-num {
  color: var(--mmt-disabled-fg, #b49dc4) !important;
}

/* v0.4.14 — Appointment picker: hide-source + calendar-pill */
.medex-appt-hidden-source {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}
.medex-appt-hidden-picker {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  overflow: hidden !important;
}
.medex-appt-date-pick {
  background: #fff !important;
  border-style: dashed !important;
  color: var(--mmt-purple, #9b1cbf) !important;
  font-weight: 600 !important;
}
.medex-appt-date-pick:hover {
  background: var(--mmt-purple-wash, #faf0ff) !important;
  border-style: solid !important;
}
.medex-appt-date-pick .medex-appt-date-day {
  color: var(--mmt-purple, #9b1cbf) !important;
}
.medex-appt-date-custom {
  /* Custom-picked (out-of-range) date pill — same as the standard pill but
     with a subtle blue outline so it's visually distinguishable. */
  border-color: #93c5fd !important;
}

/* v0.4.16 — flatpickr modal styling (used by appointment picker when
   Metform's own flatpickr is available on the date input). Overrides
   flatpickr's default absolute positioning so it renders as a centered
   modal above a dim backdrop. */
.flatpickr-calendar.medex-appt-fp-modal {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  z-index: 100000 !important;
  box-shadow: 0 20px 50px -10px rgba(15, 23, 42, 0.35) !important;
  animation: none !important;
  max-width: 95vw !important;
  max-height: 90vh !important;
  overflow: auto !important;
}
/* flatpickr adds .arrowTop/.arrowBottom for the little tick pointing at
   the input — meaningless in modal mode, hide it. */
.flatpickr-calendar.medex-appt-fp-modal:before,
.flatpickr-calendar.medex-appt-fp-modal:after {
  display: none !important;
}
.medex-appt-fp-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(15, 23, 42, 0.45) !important;
  z-index: 99999 !important;
  animation: medexApptFadeIn 0.15s ease-out;
}
@keyframes medexApptFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* =========================================================================
 * PATIENT LIST WITH SMART CONTACT — v0.4.42
 * =========================================================================
 * Injected UI that replaces the primary patient_name / email_address /
 * patient-tel wrapper with a card-based list. Auto-syncs to hidden
 * total_persons + booking_namelist fields.
 *
 * All selectors scoped under `.medex-plist` (or `[data-medex-plist]`) so
 * these rules NEVER leak to other Metform fields on the page. Palette
 * matches the site's pink/purple aesthetic.
 * ========================================================================= */

/* Hide the original wrappers of fields we've adopted. */
.medex-plist-hidden-source {
  display: none !important;
}

.medex-plist {
  font-family: inherit;
  color: var(--mmt-ink, #2a0f3a);
  margin: 0 0 20px 0;
}

/* Section head */
.medex-plist .mmt-plist-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 14px;
}
.medex-plist .mmt-plist-eyebrow {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  color: var(--mmt-purple, #9b1cbf) !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
  display: block !important;
}
.medex-plist .mmt-plist-title {
  font-weight: 600 !important;
  font-size: 18px !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
  color: var(--mmt-ink, #2a0f3a) !important;
  line-height: 1.3 !important;
}
.medex-plist .mmt-plist-hint {
  font-size: 12px;
  color: var(--mmt-muted, #8c6ea5);
  font-style: italic;
}

/* Patient list */
.medex-plist .mmt-plist-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* Individual card */
.medex-plist .mmt-plist-card {
  background: linear-gradient(180deg, #fff 0%, #fdfaff 100%) !important;
  border: 1px solid var(--mmt-line, #ede0f2) !important;
  border-radius: 10px !important;
  padding: 18px 20px !important;
  animation: medex-plist-card-in 0.28s ease-out;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}
.medex-plist .mmt-plist-card:focus-within {
  border-color: var(--mmt-purple, #9b1cbf) !important;
  box-shadow: 0 0 0 3px rgba(155, 28, 191, 0.08) !important;
}
@keyframes medex-plist-card-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Card head — number + name + remove */
.medex-plist .mmt-plist-card-head {
  display: grid !important;
  grid-template-columns: 32px 1fr auto !important;
  gap: 14px !important;
  align-items: center !important;
  margin-bottom: 10px !important;
}
.medex-plist .mmt-plist-num {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: var(--mmt-purple, #9b1cbf) !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
.medex-plist .mmt-plist-name {
  border: 0 !important;
  background: transparent !important;
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--mmt-ink, #2a0f3a) !important;
  padding: 4px 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  height: auto !important;
  line-height: 1.4 !important;
}
.medex-plist .mmt-plist-name::placeholder {
  color: var(--mmt-muted, #8c6ea5) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}
.medex-plist .mmt-plist-name:focus {
  outline: none !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.medex-plist .mmt-plist-remove {
  border: 0 !important;
  background: transparent !important;
  color: var(--mmt-muted, #8c6ea5) !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  font-size: 18px !important;
  line-height: 1 !important;
  transition: color 0.15s, background 0.15s;
  cursor: pointer;
  font-family: inherit;
  height: auto !important;
}
.medex-plist .mmt-plist-remove:hover {
  color: #b31d3e !important;
  background: rgba(179, 29, 62, 0.08) !important;
}
.medex-plist .mmt-plist-remove-spacer {
  width: 32px;
  display: inline-block;
}

/* Field grid (email + phone side by side) */
.medex-plist .mmt-plist-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}
@media (max-width: 500px) {
  .medex-plist .mmt-plist-grid { grid-template-columns: 1fr !important; }
}

.medex-plist .mmt-plist-fld {
  display: block;
  margin-top: 10px;
}
.medex-plist .mmt-plist-fld label {
  display: block !important;
  font-size: 11px !important;
  color: #5a3872 !important;
  margin-bottom: 4px !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  background: transparent !important;
  padding: 0 !important;
}
.medex-plist .mmt-plist-fld input {
  width: 100% !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  border: 1px solid var(--mmt-line, #ede0f2) !important;
  background: #fafafa !important;
  font-size: 14px !important;
  color: var(--mmt-ink, #2a0f3a) !important;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  font-family: inherit !important;
  height: auto !important;
  box-sizing: border-box !important;
  line-height: 1.4 !important;
}
.medex-plist .mmt-plist-fld input:focus {
  border-color: var(--mmt-purple, #9b1cbf) !important;
  box-shadow: 0 0 0 3px rgba(155, 28, 191, 0.08) !important;
  background: #fff !important;
  outline: none !important;
}
.medex-plist .mmt-plist-fld input::placeholder {
  color: var(--mmt-muted, #8c6ea5) !important;
  opacity: 1 !important;
}

/* Primary contact badge */
.medex-plist .mmt-plist-primary-badge {
  margin-top: 12px !important;
  padding: 8px 12px !important;
  background: #f5eafa !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  color: var(--mmt-purple, #9b1cbf) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.medex-plist .mmt-plist-primary-badge::before {
  content: "✓";
  font-weight: 700;
  font-size: 11px;
  background: var(--mmt-purple, #9b1cbf);
  color: #fff;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Contact preference (cards 2+) */
.medex-plist .mmt-plist-contact-pref {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--mmt-line, #ede0f2);
}
.medex-plist .mmt-plist-pref-label {
  font-size: 12px !important;
  color: #5a3872 !important;
  margin-bottom: 8px !important;
  font-weight: 500 !important;
  background: transparent !important;
  padding: 0 !important;
}
.medex-plist .mmt-plist-pref-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.medex-plist .mmt-plist-pref-option {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  border: 1px solid var(--mmt-line, #ede0f2) !important;
  background: #fff !important;
  cursor: pointer;
  font-size: 13.5px !important;
  transition: border-color 0.15s, background 0.15s;
  color: var(--mmt-ink, #2a0f3a) !important;
}
.medex-plist .mmt-plist-pref-option:hover {
  border-color: #b83db4 !important;
}
.medex-plist .mmt-plist-pref-option[aria-checked="true"] {
  border-color: var(--mmt-purple, #9b1cbf) !important;
  background: #f5eafa !important;
}
.medex-plist .mmt-plist-pref-radio {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--mmt-line, #ede0f2);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s;
}
.medex-plist .mmt-plist-pref-option[aria-checked="true"] .mmt-plist-pref-radio {
  border-color: var(--mmt-purple, #9b1cbf);
}
.medex-plist .mmt-plist-pref-option[aria-checked="true"] .mmt-plist-pref-radio::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mmt-purple, #9b1cbf);
}
.medex-plist .mmt-plist-pref-text {
  min-width: 0;
  flex: 1;
}
.medex-plist .mmt-plist-pref-primary {
  color: var(--mmt-ink, #2a0f3a) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
}
.medex-plist .mmt-plist-pref-detail {
  color: var(--mmt-muted, #8c6ea5) !important;
  font-size: 12px !important;
  margin-top: 1px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400 !important;
}

/* Height-animated separate fields */
.medex-plist .mmt-plist-pref-fields {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.25s ease, opacity 0.2s ease, margin-top 0.25s ease;
  margin-top: 0;
}
.medex-plist .mmt-plist-pref-fields[aria-hidden="false"] {
  max-height: 220px;
  opacity: 1;
  margin-top: 10px;
}

/* Add-patient button */
.medex-plist .mmt-plist-add {
  margin-top: 14px !important;
  padding: 14px 16px !important;
  background: transparent !important;
  color: var(--mmt-purple, #9b1cbf) !important;
  border: 1.5px dashed #b83db4 !important;
  border-radius: 10px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  width: 100% !important;
  text-align: center !important;
  transition: background 0.15s, border-color 0.15s;
  cursor: pointer;
  height: auto !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
}
.medex-plist .mmt-plist-add:hover:not(:disabled) {
  background: #f5eafa !important;
  border-color: var(--mmt-purple, #9b1cbf) !important;
}
.medex-plist .mmt-plist-add:disabled {
  color: var(--mmt-muted, #8c6ea5) !important;
  border-color: var(--mmt-line, #ede0f2) !important;
  cursor: not-allowed;
  opacity: 0.7;
}
.medex-plist .mmt-plist-plus {
  margin-right: 6px;
  font-weight: 600;
}
.medex-plist .mmt-plist-add-hint {
  display: block;
  font-size: 11.5px;
  color: var(--mmt-muted, #8c6ea5);
  text-align: center;
  margin-top: 8px;
  font-style: italic;
}

/* =========================================================================
 * COMBINED LOCATION PICKER — v0.4.43
 * =========================================================================
 * Injected UI that replaces the `select-city` (province toggle-select) and
 * `select-site` (test-center / home-visit radios) widgets with one block:
 * a clinic-vs-home segmented toggle, clinic cards, an inline province
 * drawer, and the home/hotel address field (`odt_details`).
 *
 * All selectors scoped under `.medex-loc` so nothing leaks to other Metform
 * fields. Palette matches the patient-list block (pink/purple).
 * ========================================================================= */

/* Hide the original wrappers of the fields we've adopted. */
.medex-loc-hidden-source {
  display: none !important;
}

.medex-loc {
  font-family: inherit;
  color: var(--mmt-ink, #2a0f3a);
  margin: 0 0 22px 0;
}

/* Themes routinely set `text-transform: uppercase` + wide letter-spacing on
 * every <button>. Our cards and chips ARE buttons (deliberately — buttons
 * don't serialize into the form and Preact ignores them), so without this
 * every clinic name and address renders SHOUTED AND SPACED OUT. Reset it,
 * then re-apply uppercase only on the few labels that actually want it. */
.medex-loc button,
.medex-loc .mmt-loc-name,
.medex-loc .mmt-loc-addr,
.medex-loc .mmt-loc-hours,
.medex-loc .mmt-loc-chip,
.medex-loc .mmt-loc-seg-btn,
.medex-loc .mmt-loc-fee {
  text-transform: none !important;
  letter-spacing: normal !important;
  font-variant: normal !important;
  text-decoration: none !important;
}

/* ---- section head ---- */
.medex-loc .mmt-loc-head {
  margin-bottom: 14px;
}
.medex-loc .mmt-loc-eyebrow {
  display: block !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--mmt-purple, #9b1cbf) !important;
  margin-bottom: 4px !important;
}
.medex-loc .mmt-loc-title {
  font-weight: 600 !important;
  font-size: 18px !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  color: var(--mmt-ink, #2a0f3a) !important;
}
.medex-loc .mmt-loc-sub {
  font-size: 13.5px !important;
  color: var(--mmt-muted, #8c6ea5) !important;
  margin: 5px 0 0 0 !important;
  line-height: 1.45 !important;
}

/* ---- segmented clinic / home toggle ---- */
.medex-loc .mmt-loc-seg {
  position: relative;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: #faf5ff !important;
  border: 1px solid var(--mmt-line, #ede0f2) !important;
  border-radius: 999px !important;
  padding: 5px !important;
  margin: 0 0 16px 0 !important;
}
.medex-loc .mmt-loc-seg:has(> .mmt-loc-seg-btn:only-of-type) {
  grid-template-columns: 1fr;
}
.medex-loc .mmt-loc-seg-thumb {
  position: absolute;
  top: 5px;
  left: 5px;
  height: calc(100% - 10px);
  width: calc(50% - 5px);
  background: #fff !important;
  border-radius: 999px !important;
  box-shadow: 0 1px 2px rgba(42, 15, 58, 0.06), 0 6px 16px -10px rgba(42, 15, 58, 0.3);
  transition: transform 0.32s cubic-bezier(0.4, 1.3, 0.5, 1);
  pointer-events: none;
}
.medex-loc .mmt-loc-seg[data-mode="home"] .mmt-loc-seg-thumb {
  transform: translateX(100%);
}
.medex-loc .mmt-loc-seg-btn {
  position: relative;
  z-index: 1;
  appearance: none;
  -webkit-appearance: none;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  padding: 12px 10px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  color: var(--mmt-ink-2, #5c4470) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: color 0.2s;
}
.medex-loc .mmt-loc-seg-btn[aria-pressed="true"] {
  color: var(--mmt-purple-dark, #7a1596) !important;
  font-weight: 600 !important;
}
.medex-loc .mmt-loc-fee {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  border: 1px solid var(--mmt-line, #ede0f2) !important;
  color: var(--mmt-muted, #8c6ea5) !important;
  background: transparent !important;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
  white-space: nowrap;
}
.medex-loc .mmt-loc-seg[data-mode="home"] .mmt-loc-fee {
  background: var(--mmt-pink, #e0197f) !important;
  border-color: var(--mmt-pink, #e0197f) !important;
  color: #fff !important;
}

/* ---- panels ---- */
.medex-loc .mmt-loc-panel[hidden] { display: none !important; }

/* ---- clinic cards ---- */
.medex-loc .mmt-loc-cards {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.medex-loc .mmt-loc-card,
.medex-loc .mmt-loc-card-btn {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  appearance: none;
  -webkit-appearance: none;
  background: #fff !important;
  border: 1px solid var(--mmt-line, #ede0f2) !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
  margin: 0 !important;
  cursor: pointer;
  font-family: inherit !important;
  box-shadow: 0 1px 2px rgba(42, 15, 58, 0.03), 0 8px 24px -18px rgba(42, 15, 58, 0.2);
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
.medex-loc .mmt-loc-card:hover,
.medex-loc .mmt-loc-card-btn:hover { border-color: var(--mmt-line-strong, #d9b6e8) !important; }
.medex-loc .mmt-loc-card.is-selected,
.medex-loc .mmt-loc-card-btn.is-selected {
  border-color: var(--mmt-purple, #9b1cbf) !important;
  background: linear-gradient(180deg, #fff 0%, var(--mmt-card-tint, #fdf6ff) 100%) !important;
  box-shadow: 0 2px 4px rgba(155, 28, 191, 0.07), 0 14px 34px -20px rgba(155, 28, 191, 0.4);
}
.medex-loc .mmt-loc-card:focus-visible,
.medex-loc .mmt-loc-card-btn:focus-visible,
.medex-loc .mmt-loc-seg-btn:focus-visible,
.medex-loc .mmt-loc-chip:focus-visible {
  outline: 2px solid var(--mmt-purple, #9b1cbf) !important;
  outline-offset: 2px;
}

/* "Somewhere else" is a wrapper card holding a button + drawer, so it must
 * not carry the button chrome itself. */
.medex-loc .mmt-loc-card--other {
  padding: 0 !important;
  cursor: default;
  overflow: hidden;
}
.medex-loc .mmt-loc-card--other .mmt-loc-card-btn {
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  background: transparent !important;
}
.medex-loc .mmt-loc-card--other.is-open {
  border-color: var(--mmt-purple, #9b1cbf) !important;
  background: linear-gradient(180deg, #fff 0%, var(--mmt-card-tint, #fdf6ff) 100%) !important;
}

.medex-loc .mmt-loc-card-top {
  display: flex !important;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.medex-loc .mmt-loc-card-main { display: block !important; }
.medex-loc .mmt-loc-name {
  display: block !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  letter-spacing: -0.01em !important;
  color: var(--mmt-ink, #2a0f3a) !important;
  line-height: 1.3 !important;
}
.medex-loc .mmt-loc-addr {
  display: block !important;
  font-size: 14px !important;
  color: var(--mmt-muted, #8c6ea5) !important;
  margin-top: 3px !important;
  line-height: 1.45 !important;
}
.medex-loc .mmt-loc-tag {
  flex: none;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--mmt-purple-dark, #7a1596) !important;
  background: var(--mmt-purple-wash, #faf0ff) !important;
  border: 1px solid var(--mmt-line, #ede0f2) !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  white-space: nowrap;
}
.medex-loc .mmt-loc-hours {
  display: inline-block !important;
  margin-top: 10px !important;
  padding-top: 9px !important;
  border-top: 1px dashed var(--mmt-line, #ede0f2) !important;
  font-size: 12.5px !important;
  color: var(--mmt-ink-2, #5c4470) !important;
}

/* ---- province drawer inside the "somewhere else" card ---- */
.medex-loc .mmt-loc-drawer {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding: 0 18px;
  transition: max-height 0.36s cubic-bezier(0.3, 0.9, 0.3, 1), opacity 0.26s, padding 0.36s;
}
.medex-loc .mmt-loc-card--other.is-open .mmt-loc-drawer {
  max-height: 520px;
  opacity: 1;
  padding: 0 18px 18px 18px;
}
.medex-loc .mmt-loc-drawer-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--mmt-muted, #8c6ea5) !important;
  margin: 0 0 10px 0 !important;
}

/* ---- province chips ---- */
.medex-loc .mmt-loc-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.medex-loc .mmt-loc-chip {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background: #fff !important;
  border: 1px solid var(--mmt-line, #ede0f2) !important;
  border-radius: 9px !important;
  padding: 9px 14px !important;
  margin: 0 !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  color: var(--mmt-ink-2, #5c4470) !important;
  box-shadow: none !important;
  transition: background 0.16s, border-color 0.16s, color 0.16s;
}
.medex-loc .mmt-loc-chip:hover { border-color: var(--mmt-line-strong, #d9b6e8) !important; color: var(--mmt-ink, #2a0f3a) !important; }
.medex-loc .mmt-loc-chip.is-selected {
  background: var(--mmt-purple, #9b1cbf) !important;
  border-color: var(--mmt-purple, #9b1cbf) !important;
  color: #fff !important;
}
.medex-loc .mmt-loc-chip--more {
  border-style: dashed !important;
  color: var(--mmt-purple, #9b1cbf) !important;
}
.medex-loc .mmt-loc-chip[hidden] { display: none !important; }

.medex-loc .mmt-loc-note {
  margin-top: 14px !important;
  padding: 12px 14px !important;
  border-radius: 10px !important;
  background: #fff !important;
  border: 1px solid var(--mmt-line, #ede0f2) !important;
  font-size: 13.5px !important;
  color: var(--mmt-ink-2, #5c4470) !important;
  line-height: 1.5 !important;
}
.medex-loc .mmt-loc-note[hidden] { display: none !important; }
.medex-loc .mmt-loc-note b { color: var(--mmt-ink, #2a0f3a) !important; font-weight: 600 !important; }

/* ---- home / hotel panel ---- */
.medex-loc .mmt-loc-field { margin-bottom: 14px; }
.medex-loc .mmt-loc-flabel {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--mmt-muted, #8c6ea5) !important;
  margin-bottom: 7px !important;
}
.medex-loc .mmt-loc-addr-input {
  width: 100% !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  color: var(--mmt-ink, #2a0f3a) !important;
  background: #fff !important;
  border: 1px solid var(--mmt-line, #ede0f2) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  margin: 0 !important;
  resize: vertical;
  box-shadow: none !important;
}
.medex-loc .mmt-loc-addr-input::placeholder { color: var(--mmt-disabled-fg, #b49dc4) !important; }
.medex-loc .mmt-loc-addr-input:focus {
  outline: none !important;
  border-color: var(--mmt-purple, #9b1cbf) !important;
  box-shadow: 0 0 0 3px rgba(155, 28, 191, 0.12) !important;
}
.medex-loc .mmt-loc-hint {
  font-size: 13px !important;
  color: var(--mmt-muted, #8c6ea5) !important;
  margin: 6px 0 0 0 !important;
  line-height: 1.45 !important;
}

/* ---- running summary ---- */
.medex-loc .mmt-loc-summary {
  display: flex !important;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--mmt-line, #ede0f2) !important;
}
.medex-loc .mmt-loc-sum-txt {
  font-size: 14.5px !important;
  color: var(--mmt-ink-2, #5c4470) !important;
  line-height: 1.45 !important;
}
.medex-loc .mmt-loc-sum-txt b { color: var(--mmt-ink, #2a0f3a) !important; font-weight: 600 !important; }
.medex-loc .mmt-loc-sum-fee {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--mmt-pink, #e0197f) !important;
  white-space: nowrap;
}

/* ---- two-column shell: cards | map ---- */
.medex-loc .mmt-loc-grid {
  display: block;
}
/* Only splits once a map has actually been moved into the second column. */
.medex-loc.is-split .mmt-loc-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 20px;
  align-items: start;
}
.medex-loc .mmt-loc-col-main { min-width: 0; }
.medex-loc .mmt-loc-col-map { display: none; }
.medex-loc.is-split .mmt-loc-col-map {
  display: block;
  position: sticky;
  top: 20px;
  min-width: 0;
}

/* The relocated #mf-map node. Height has to be forced: the map ships with
 * inline positioning styles and takes its height from the widget it used to
 * live in, so in a grid column it would otherwise collapse to zero. */
.medex-loc .medex-loc-map {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 420px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid var(--mmt-line, #ede0f2) !important;
  box-shadow: 0 1px 2px rgba(42, 15, 58, 0.03), 0 8px 24px -18px rgba(42, 15, 58, 0.2);
}
/* Google Maps' own children are height:100% — make sure nothing clamps them. */
.medex-loc .medex-loc-map > div { min-height: 420px; }

/* The widget the map was moved out of is now an empty padded box. */
.medex-loc-map-vacated {
  display: none !important;
}

/* ---- mobile ---- */
@media (max-width: 1024px) {
  /* Two columns get cramped before phone width — the clinic addresses are
   * long single lines. Stack earlier, map underneath. */
  .medex-loc.is-split .mmt-loc-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .medex-loc.is-split .mmt-loc-col-map { position: static; }
  .medex-loc .medex-loc-map,
  .medex-loc .medex-loc-map > div {
    min-height: 280px !important;
    height: 280px !important;
  }
}

@media (max-width: 560px) {
  .medex-loc .mmt-loc-seg {
    grid-template-columns: 1fr;
    border-radius: 14px !important;
  }
  .medex-loc .mmt-loc-seg-thumb {
    width: calc(100% - 10px);
    height: calc(50% - 5px);
    border-radius: 10px !important;
  }
  .medex-loc .mmt-loc-seg[data-mode="home"] .mmt-loc-seg-thumb {
    transform: translateY(100%);
  }
  .medex-loc .mmt-loc-card-top { flex-direction: column; gap: 6px; }
  .medex-loc .mmt-loc-summary { flex-direction: column; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .medex-loc .mmt-loc-seg-thumb,
  .medex-loc .mmt-loc-drawer,
  .medex-loc .mmt-loc-card,
  .medex-loc .mmt-loc-chip { transition-duration: 0.01ms !important; }
}

/* =========================================================================
 * PACKAGE PICKER — v0.4.45
 * =========================================================================
 * The merged category + package block. Category tabs (select-cat /
 * select-cat1 / …) render here and the visible package-select widget is
 * seamed onto the bottom of the same card via `.medex-pkg-attached`.
 *
 * This is the main event of the form, so it's the one block allowed to be
 * loud: brand-gradient hairline on top, 25px heading, gradient active tab.
 * Everything else on the form stays quiet by comparison.
 * ========================================================================= */

.medex-pkg-hidden-source,
.medex-pkg-hidden-label {
  display: none !important;
}

.medex-pkg {
  font-family: inherit;
  color: var(--mmt-ink, #2a0f3a);
  margin: 0 0 0 0;
}

.medex-pkg .mmt-pkg-card {
  position: relative;
  background: linear-gradient(180deg, #fff 0%, var(--mmt-card-tint, #fdf6ff) 100%) !important;
  border: 1px solid var(--mmt-line, #ede0f2) !important;
  border-bottom: 0 !important;
  border-radius: var(--mmt-radius-lg, 16px) var(--mmt-radius-lg, 16px) 0 0 !important;
  padding: 22px 24px 18px 24px !important;
  overflow: hidden;
}
/* Brand hairline — the one flash of the full MedEx gradient on the form. */
.medex-pkg .mmt-pkg-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--mmt-grad, linear-gradient(122deg, #ff4c88 12%, #ff8a63 71%));
}

.medex-pkg .mmt-pkg-head { margin-bottom: 16px; }
.medex-pkg .mmt-pkg-eyebrow {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--mmt-pink, #e0197f) !important;
  margin-bottom: 6px !important;
}
.medex-pkg .mmt-pkg-title {
  font-weight: 700 !important;
  font-size: 25px !important;
  line-height: 1.22 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
  color: var(--mmt-ink, #2a0f3a) !important;
  text-transform: none !important;
}

/* ---- category tabs ---- */
.medex-pkg .mmt-pkg-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.medex-pkg .mmt-pkg-tab {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background: #fff !important;
  border: 1px solid var(--mmt-line, #ede0f2) !important;
  border-radius: 10px !important;
  padding: 11px 16px !important;
  margin: 0 !important;
  font-family: inherit !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--mmt-ink-2, #5c4470) !important;
  box-shadow: none !important;
  transition: border-color 0.16s, color 0.16s, background 0.16s, transform 0.16s;
}
.medex-pkg .mmt-pkg-tab:hover {
  border-color: var(--mmt-line-strong, #d9b6e8) !important;
  color: var(--mmt-ink, #2a0f3a) !important;
}
.medex-pkg .mmt-pkg-tab.is-active {
  background: var(--mmt-grad, linear-gradient(122deg, #ff4c88 12%, #ff8a63 71%)) !important;
  border-color: transparent !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: 0 6px 18px -10px rgba(224, 25, 127, 0.65) !important;
}
.medex-pkg .mmt-pkg-tab:focus-visible {
  outline: 2px solid var(--mmt-purple, #9b1cbf) !important;
  outline-offset: 2px;
}

.medex-pkg .mmt-pkg-help {
  font-size: 13px !important;
  color: var(--mmt-muted, #8c6ea5) !important;
  line-height: 1.5 !important;
  margin: 14px 0 0 0 !important;
  font-style: italic;
}
.medex-pkg .mmt-pkg-help[hidden] { display: none !important; }

/* ---- the seam: visible package widget becomes the card's lower half ---- */
.medex-pkg-attached {
  background: linear-gradient(180deg, var(--mmt-card-tint, #fdf6ff) 0%, #fff 100%) !important;
  border: 1px solid var(--mmt-line, #ede0f2) !important;
  border-top: 1px dashed var(--mmt-line, #ede0f2) !important;
  border-radius: 0 0 var(--mmt-radius-lg, 16px) var(--mmt-radius-lg, 16px) !important;
  padding: 18px 24px 22px 24px !important;
  margin: 0 0 22px 0 !important;
  box-shadow: 0 1px 2px rgba(42, 15, 58, 0.03), 0 14px 34px -26px rgba(42, 15, 58, 0.3);
}
/* Metform/Elementor put their own margins on the select inside; collapse the
 * top one so the seam reads as a single continuous card. */
.medex-pkg-attached > .mf-input-wrapper { margin-top: 0 !important; }

@media (max-width: 560px) {
  .medex-pkg .mmt-pkg-card { padding: 18px 16px 14px 16px !important; }
  .medex-pkg .mmt-pkg-title { font-size: 21px !important; }
  .medex-pkg .mmt-pkg-tab { padding: 10px 13px !important; font-size: 13.5px !important; }
  .medex-pkg-attached { padding: 14px 16px 18px 16px !important; }
}

/* =========================================================================
 * SHARED RHYTHM — v0.4.45
 * Even vertical spacing between plugin blocks so the form reads as one
 * document rather than a stack of independently-margined widgets.
 * ========================================================================= */
.medex-loc,
.medex-plist { margin-bottom: var(--mmt-gap-lg, 18px) !important; }
.medex-loc .mmt-loc-cards { gap: var(--mmt-gap, 10px) !important; }
.medex-loc .mmt-loc-summary { margin-top: var(--mmt-gap-lg, 18px) !important; }

/* =========================================================================
 * MULTI-PACKAGE BOOKING — v0.4.46
 * =========================================================================
 * The "Packages in this booking" basket, injected under the package select
 * on forms where the feature is switched on in Metform Toolkit → Tools.
 * Reads as a receipt hanging off the bottom of the package card, so it's
 * quieter than the card above it.
 * ========================================================================= */

.medex-mp {
  font-family: inherit;
  color: var(--mmt-ink, #2a0f3a);
  background: #fff !important;
  border: 1px solid var(--mmt-line, #ede0f2);
  border-radius: var(--mmt-radius, 12px);
  padding: 16px 18px;
  margin: 0 0 22px 0;
}
.medex-mp.is-multi {
  border-color: var(--mmt-line-strong, #d9b6e8);
  box-shadow: 0 1px 2px rgba(42, 15, 58, 0.03), 0 12px 30px -22px rgba(42, 15, 58, 0.3);
}

.medex-mp .mmt-mp-head {
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.medex-mp .mmt-mp-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--mmt-muted, #8c6ea5) !important;
}
.medex-mp .mmt-mp-sum {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--mmt-pink, #e0197f) !important;
  text-align: right;
}

.medex-mp .mmt-mp-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.medex-mp .mmt-mp-row {
  display: grid !important;
  grid-template-columns: 22px 1fr auto 26px;
  align-items: center;
  gap: 10px;
  padding: 9px 10px !important;
  background: var(--mmt-purple-wash, #faf0ff) !important;
  border-radius: 9px !important;
}
.medex-mp .mmt-mp-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--mmt-purple, #9b1cbf) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.medex-mp .mmt-mp-name {
  font-size: 14px !important;
  color: var(--mmt-ink, #2a0f3a) !important;
  line-height: 1.35 !important;
  min-width: 0;
}
.medex-mp .mmt-mp-price {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--mmt-purple-dark, #7a1596) !important;
  white-space: nowrap;
}
.medex-mp .mmt-mp-remove {
  appearance: none;
  -webkit-appearance: none;
  width: 26px; height: 26px;
  border-radius: 50% !important;
  border: 1px solid var(--mmt-line, #ede0f2) !important;
  background: #fff !important;
  color: var(--mmt-muted, #8c6ea5) !important;
  font-size: 16px !important;
  line-height: 1 !important;
  cursor: pointer;
  padding: 0 !important;
  transition: border-color 0.16s, color 0.16s;
}
.medex-mp .mmt-mp-remove:hover {
  border-color: var(--mmt-pink, #e0197f) !important;
  color: var(--mmt-pink, #e0197f) !important;
}
.medex-mp .mmt-mp-remove-spacer { display: block; width: 26px; }

.medex-mp .mmt-mp-empty {
  font-size: 13.5px !important;
  color: var(--mmt-muted, #8c6ea5) !important;
  font-style: italic;
  padding: 4px 0;
}

.medex-mp .mmt-mp-add {
  appearance: none;
  -webkit-appearance: none;
  display: block !important;
  width: 100% !important;
  margin: 12px 0 0 0 !important;
  padding: 11px 14px !important;
  background: #fff !important;
  border: 1px dashed var(--mmt-line-strong, #d9b6e8) !important;
  border-radius: 10px !important;
  cursor: pointer;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: var(--mmt-purple, #9b1cbf) !important;
  transition: border-color 0.16s, background 0.16s, color 0.16s;
}
.medex-mp .mmt-mp-add:hover:not(:disabled) {
  border-style: solid !important;
  border-color: var(--mmt-purple, #9b1cbf) !important;
  background: var(--mmt-purple-wash, #faf0ff) !important;
}
.medex-mp .mmt-mp-add:disabled {
  color: var(--mmt-disabled-fg, #b49dc4) !important;
  border-color: var(--mmt-line, #ede0f2) !important;
  cursor: not-allowed;
}
.medex-mp .mmt-mp-add:focus-visible {
  outline: 2px solid var(--mmt-purple, #9b1cbf) !important;
  outline-offset: 2px;
}

.medex-mp .mmt-mp-hint {
  font-size: 12px !important;
  color: var(--mmt-muted, #8c6ea5) !important;
  font-style: italic;
  margin-top: 8px;
  text-align: center;
}
.medex-mp .mmt-mp-flash {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--mmt-purple-wash, #faf0ff) !important;
  border: 1px solid var(--mmt-line-strong, #d9b6e8) !important;
  font-size: 13px !important;
  color: var(--mmt-ink-2, #5c4470) !important;
  line-height: 1.45 !important;
}
.medex-mp .mmt-mp-flash[hidden] { display: none !important; }

@media (max-width: 560px) {
  .medex-mp { padding: 14px 14px; }
  .medex-mp .mmt-mp-head { flex-direction: column; gap: 4px; }
  .medex-mp .mmt-mp-sum { text-align: left; }
  .medex-mp .mmt-mp-row { grid-template-columns: 20px 1fr auto; }
  .medex-mp .mmt-mp-remove-spacer { display: none; }
}

/* =========================================================================
 * v0.4.47 ADJUSTMENTS
 * ========================================================================= */

/* ---- Compact appointment time slots -------------------------------------
 * 34 half-hour slots at the old size pushed everything below the fold. Six
 * columns on desktop with tighter cells fits the same grid in roughly a
 * third of the height, without shrinking the tap target below ~40px.
 * ----------------------------------------------------------------------- */
.medex-appt-picker .medex-appt-times {
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 6px !important;
}
.medex-appt-picker .medex-appt-time {
  padding: 10px 4px !important;
  font-size: 13.5px !important;
  border-radius: 8px !important;
  min-height: 40px;
}
.medex-appt-picker .medex-appt-dates { gap: 6px !important; }
.medex-appt-picker .medex-appt-date {
  padding: 8px 12px !important;
  border-radius: 9px !important;
}
.medex-appt-picker .medex-appt-date-day { font-size: 10.5px !important; }
.medex-appt-picker .medex-appt-date-num { font-size: 14px !important; }
.medex-appt-picker .medex-appt-label { margin-bottom: 10px !important; }
.medex-appt-picker { padding: 16px !important; }

@media (max-width: 1024px) {
  .medex-appt-picker .medex-appt-times { grid-template-columns: repeat(5, 1fr) !important; }
}
@media (max-width: 782px) {
  .medex-appt-picker .medex-appt-times { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 480px) {
  .medex-appt-picker .medex-appt-times { grid-template-columns: repeat(3, 1fr) !important; }
  .medex-appt-picker .medex-appt-time { font-size: 13px !important; padding: 10px 2px !important; }
}

/* ---- Package block: full width ------------------------------------------
 * The card and the select seamed under it sat in Elementor columns of
 * different widths, so the heading stopped short of the select below it.
 * Force both to the full row and give them identical horizontal padding so
 * the seam lines up.
 * ----------------------------------------------------------------------- */
.medex-pkg,
.medex-pkg-attached {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.medex-pkg .mmt-pkg-card { box-sizing: border-box !important; }

/* The Elementor column/section hosting either half of the card must not
 * constrain it — these forms put the category and the select in separate
 * columns of different widths. */
.elementor-column:has(> .elementor-widget-wrap > .elementor-element > .medex-pkg),
.elementor-column:has(.medex-pkg-attached) {
  width: 100% !important;
  max-width: 100% !important;
}
.medex-pkg + .elementor-element,
.medex-pkg-attached > .elementor-widget-container { padding-left: 0 !important; padding-right: 0 !important; }

/* ---- Category tab rows (select-test-type → select-cat hierarchy) -------- */
.medex-pkg .mmt-pkg-tabs {
  display: block !important;
}
.medex-pkg .mmt-pkg-tabrow + .mmt-pkg-tabrow {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--mmt-line, #ede0f2);
}
.medex-pkg .mmt-pkg-rowlabel {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--mmt-muted, #8c6ea5) !important;
  margin-bottom: 8px !important;
}
.medex-pkg .mmt-pkg-tabset {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

/* =========================================================================
 * PATIENT LIST — v0.4.48 field consistency
 * =========================================================================
 * The name used to be a borderless input in the card header, so there was
 * no visible box to type into — it read as a heading. It's now a labelled
 * field in the same grid as email and phone, and all three are styled to
 * match the form's other Metform inputs (white, 1px hairline, 5px radius,
 * 15px text, roomy padding) instead of the tinted boxes they had.
 * ========================================================================= */

.medex-plist .mmt-plist-card-head {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px !important;
}
.medex-plist .mmt-plist-cardtitle {
  flex: 1 1 auto;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  color: var(--mmt-ink, #2a0f3a) !important;
  text-transform: none !important;
}

/* Field grid: name + email + phone side by side, stacking on narrow screens. */
.medex-plist .mmt-plist-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px !important;
}
.medex-plist .mmt-plist-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 860px) {
  .medex-plist .mmt-plist-grid,
  .medex-plist .mmt-plist-grid--3 { grid-template-columns: minmax(0, 1fr); }
}

.medex-plist .mmt-plist-fld { min-width: 0; }
.medex-plist .mmt-plist-fld label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--mmt-muted, #8c6ea5) !important;
  margin-bottom: 6px !important;
}

/* Match the form's own inputs rather than inventing a second look. */
.medex-plist .mmt-plist-fld input,
.medex-plist .mmt-plist-card input[type="text"],
.medex-plist .mmt-plist-card input[type="email"],
.medex-plist .mmt-plist-card input[type="tel"] {
  width: 100% !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.4 !important;
  color: var(--mmt-ink, #2a0f3a) !important;
  background: #fff !important;
  border: 1px solid #f0f0f0 !important;
  border-radius: 5px !important;
  padding: 15px 18px !important;
  margin: 0 !important;
  box-shadow: none !important;
  transition: border-color 0.16s, box-shadow 0.16s;
}
.medex-plist .mmt-plist-card input::placeholder {
  color: #9c8aa8 !important;
  font-style: normal !important;
  opacity: 1 !important;
}
.medex-plist .mmt-plist-card input:hover {
  border-color: var(--mmt-line, #ede0f2) !important;
}
.medex-plist .mmt-plist-card input:focus {
  outline: none !important;
  border-color: var(--mmt-purple, #9b1cbf) !important;
  box-shadow: 0 0 0 3px rgba(155, 28, 191, 0.12) !important;
}

/* The old borderless header input is gone; neutralise its rule if any
 * cached stylesheet still carries it. */
.medex-plist .mmt-plist-name { display: none !important; }

/* =========================================================================
 * LAYOUT TIDY + CHECKOUT BLOCK — v0.4.49
 * ========================================================================= */

/* Wrappers whose entire subtree renders nothing (every widget inside is
 * conditionally hidden, or is a source field this toolkit has adopted).
 * Without this the column/section keeps its padding and the form is full of
 * unexplained gaps. */
.medex-collapsed {
  display: none !important;
}

/* Metform's own hidden widgets: make sure they take no space either. Some
 * themes only set visibility, which still reserves the box. */
.mf-form-wrapper .elementor-widget.mf-condition--hidden {
  display: none !important;
}

/* ---- checkout card ---- */
.medex-co-source-hidden { display: none !important; }

.medex-checkout {
  font-family: inherit;
  color: var(--mmt-ink, #2a0f3a);
  margin: 0 0 24px 0;
}
.medex-checkout .mmt-co-card {
  position: relative;
  background: linear-gradient(180deg, #fff 0%, var(--mmt-card-tint, #fdf6ff) 100%) !important;
  border: 1px solid var(--mmt-line, #ede0f2) !important;
  border-radius: var(--mmt-radius-lg, 16px) !important;
  padding: 24px !important;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(42, 15, 58, 0.03), 0 18px 40px -28px rgba(42, 15, 58, 0.35);
}
.medex-checkout .mmt-co-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--mmt-grad, linear-gradient(122deg, #ff4c88 12%, #ff8a63 71%));
}
.medex-checkout .mmt-co-eyebrow {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--mmt-pink, #e0197f) !important;
  margin-bottom: 14px !important;
}

/* summary rows */
.medex-checkout .mmt-co-rows { display: block; }
.medex-checkout .mmt-co-row {
  display: grid !important;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 12px;
  padding: 7px 0 !important;
  border-bottom: 1px dashed var(--mmt-line, #ede0f2);
}
.medex-checkout .mmt-co-row:last-child { border-bottom: 0; }
.medex-checkout .mmt-co-k {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--mmt-muted, #8c6ea5) !important;
  padding-top: 3px;
}
.medex-checkout .mmt-co-v {
  font-size: 14.5px !important;
  line-height: 1.45 !important;
  color: var(--mmt-ink, #2a0f3a) !important;
  min-width: 0;
  word-break: break-word;
}

/* total */
.medex-checkout .mmt-co-total-row {
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--mmt-line, #ede0f2) !important;
}
.medex-checkout .mmt-co-total-label {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--mmt-muted, #8c6ea5) !important;
}
.medex-checkout .mmt-co-total {
  font-size: 30px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  color: var(--mmt-pink, #e0197f) !important;
  white-space: nowrap;
}

/* adopted widgets sit flush inside the card */
.medex-checkout .mmt-co-slot { margin-top: 16px; }
.medex-checkout .mmt-co-slot:empty { margin-top: 0; }
.medex-checkout .medex-co-adopted,
.medex-checkout .medex-co-adopted > .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
.medex-checkout .mmt-co-slot .mf-input-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--mmt-muted, #8c6ea5) !important;
  margin-bottom: 6px !important;
}
.medex-checkout .mmt-co-slot textarea.mf-input {
  width: 100% !important;
  box-sizing: border-box !important;
  background: #fff !important;
  border: 1px solid #f0f0f0 !important;
  border-radius: 5px !important;
  padding: 14px 16px !important;
  font-family: inherit !important;
  font-size: 15px !important;
  color: var(--mmt-ink, #2a0f3a) !important;
  min-height: 84px;
}
.medex-checkout .mmt-co-slot textarea.mf-input:focus {
  outline: none !important;
  border-color: var(--mmt-purple, #9b1cbf) !important;
  box-shadow: 0 0 0 3px rgba(155, 28, 191, 0.12) !important;
}

/* terms link */
.medex-checkout [data-mmt-co-slot="terms"] {
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--mmt-muted, #8c6ea5) !important;
}
.medex-checkout [data-mmt-co-slot="terms"] a {
  color: var(--mmt-purple, #9b1cbf) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

/* submit — the one full-strength brand button on the page */
/* v0.9.44 — was `text-align: stretch`, which is not a valid value, so the
   whole declaration was dropped by every browser. The intent is for the
   button wrapper to fill the slot, which is a layout concern, not a text
   one. Firefox reported: "Error in parsing value for 'text-align'". */
.medex-checkout [data-mmt-co-slot="submit"] .mf-btn-wraper {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}
.medex-checkout .metform-btn {
  display: block !important;
  width: 100% !important;
  background: var(--mmt-grad, linear-gradient(122deg, #ff4c88 12%, #ff8a63 71%)) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 18px 28px !important;
  font-family: inherit !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  cursor: pointer;
  box-shadow: 0 10px 26px -12px rgba(224, 25, 127, 0.7) !important;
  transition: transform 0.14s, box-shadow 0.14s, filter 0.14s;
}
.medex-checkout .metform-btn:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -12px rgba(224, 25, 127, 0.8) !important;
}
.medex-checkout .metform-btn:active { transform: translateY(0); }
.medex-checkout .metform-btn:focus-visible {
  outline: 3px solid var(--mmt-purple, #9b1cbf) !important;
  outline-offset: 3px;
}

/* ---- required / optional markers + inline validation (patient list) ---- */
.medex-plist .mmt-plist-req  { color: var(--mmt-pink, #e0197f) !important; font-weight: 700 !important; }
.medex-plist .mmt-plist-opt  {
  color: var(--mmt-muted, #8c6ea5) !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}
.medex-plist .mmt-plist-err {
  display: none;
  font-size: 12.5px !important;
  color: var(--mmt-pink, #e0197f) !important;
  margin-top: 5px !important;
  line-height: 1.4 !important;
}
.medex-plist .mmt-plist-fld.is-invalid .mmt-plist-err { display: block; }
.medex-plist .mmt-plist-fld.is-invalid input {
  border-color: var(--mmt-pink, #e0197f) !important;
  box-shadow: 0 0 0 3px rgba(224, 25, 127, 0.10) !important;
}

@media (max-width: 560px) {
  .medex-checkout .mmt-co-card { padding: 18px 16px !important; }
  .medex-checkout .mmt-co-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .medex-checkout .mmt-co-total { font-size: 26px !important; }
}

/* =========================================================================
 * v0.4.50 — checkout width + leftover sections
 * ========================================================================= */

/* The card took the width of whichever Elementor column it landed in, so it
 * rendered at a different width on every form. Pin it to the row. */
.medex-checkout {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.elementor-column:has(> .elementor-widget-wrap > .medex-checkout),
.elementor-column:has(> .elementor-widget-wrap > .elementor-element > .medex-checkout),
.elementor-widget-wrap:has(> .medex-checkout) {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}
/* Some themes constrain the inner container instead of the column. */
.medex-checkout .mmt-co-card { width: 100% !important; max-width: 100% !important; }

/* Metform's submit button carries theme styling that outranks ours on
 * specificity in some forms (the checkup form kept its navy fill). Match
 * the widget-scoped selectors the theme uses. */
.medex-checkout .mf-btn-wraper .metform-btn,
.medex-checkout .elementor-widget-container .metform-btn,
.medex-checkout button.metform-btn,
.medex-checkout button.metform-submit-btn,
html body .medex-checkout .metform-btn {
  background-image: var(--mmt-grad, linear-gradient(122deg, #ff4c88 12%, #ff8a63 71%)) !important;
  background-color: transparent !important;
  color: #fff !important;
  border: 0 !important;
  width: 100% !important;
  border-radius: 12px !important;
  padding: 18px 28px !important;
  font-size: 17px !important;
  font-weight: 700 !important;
}

/* An empty Elementor section still paints its background. Once collapsed
 * these take no space at all, but belt-and-braces for any wrapper that
 * slips past the tidy pass with nothing but hidden inputs inside. */
.mf-form-wrapper .elementor-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap:empty),
.mf-form-wrapper .elementor-widget-wrap:empty {
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  min-height: 0 !important;
}

/* v0.4.52 — a react-select we still need to operate can't be display:none.
 * Clip it out of view instead: react-select can open and measure its menu
 * (which the site portals to the middle of the screen), and select-rotator
 * suppresses that menu while it drives the control, so nothing flashes. */
.medex-plist-clipped-source {
  position: absolute !important;
  left: -9999px !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* =========================================================================
 * v0.4.54
 * ========================================================================= */

/* ---- item 3: contact-preference options side by side ------------------
 * Two full-width stacked cards per extra patient ate a lot of height once
 * you had three or four of them. They're short, mutually exclusive choices
 * — a two-column row reads the same and halves the space. */
.medex-plist .mmt-plist-pref-options {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px !important;
  align-items: stretch;
}
.medex-plist .mmt-plist-pref-option {
  margin: 0 !important;
  min-width: 0;
}
@media (max-width: 700px) {
  .medex-plist .mmt-plist-pref-options { grid-template-columns: minmax(0, 1fr); }
}

/* ---- item 4: the date row uses the width it has --------------------- */
.medex-appt-picker .medex-appt-dates {
  scrollbar-width: thin;
  padding-bottom: 4px;
}
.medex-appt-picker .medex-appt-date { flex: 0 0 auto; }

/* ---- item 1: add-ons row in the checkout summary --------------------- */
.medex-checkout .mmt-co-row .mmt-co-v br + * { margin-top: 2px; }

/* v0.4.55 — basket picking mode */
.medex-mp.is-picking {
  border-color: var(--mmt-purple, #9b1cbf) !important;
  box-shadow: 0 0 0 3px rgba(155, 28, 191, 0.10),
              0 14px 34px -22px rgba(42, 15, 58, 0.35) !important;
}
.medex-mp .mmt-mp-confirm {
  background: var(--mmt-grad, linear-gradient(122deg, #ff4c88 12%, #ff8a63 71%)) !important;
  border: 0 !important;
  color: #fff !important;
  border-style: solid !important;
}
.medex-mp .mmt-mp-confirm:hover:not(:disabled) {
  filter: brightness(1.04);
  background: var(--mmt-grad, linear-gradient(122deg, #ff4c88 12%, #ff8a63 71%)) !important;
}
.medex-mp .mmt-mp-confirm:disabled {
  background: none !important;
  color: var(--mmt-disabled-fg, #b49dc4) !important;
  border: 1px dashed var(--mmt-line, #ede0f2) !important;
}
.medex-mp .mmt-mp-cancel {
  appearance: none;
  -webkit-appearance: none;
  display: block !important;
  width: 100% !important;
  margin: 8px 0 0 0 !important;
  padding: 9px 14px !important;
  background: none !important;
  border: 0 !important;
  cursor: pointer;
  font-family: inherit !important;
  font-size: 13px !important;
  color: var(--mmt-muted, #8c6ea5) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  letter-spacing: normal !important;
  text-transform: none !important;
}
.medex-mp .mmt-mp-add[hidden],
.medex-mp .mmt-mp-confirm[hidden],
.medex-mp .mmt-mp-cancel[hidden] { display: none !important; }

/* v0.4.56 — struck-through "was" price pulled out of the option label */
[data-mmt-inline-was] {
  text-decoration: line-through !important;
  color: var(--mmt-muted, #8c6ea5) !important;
  font-size: 0.85em !important;
  font-weight: 500 !important;
  margin-right: 6px;
  white-space: nowrap;
}

/* =========================================================================
 * iOS ZOOM ON FOCUS — v0.4.59
 * =========================================================================
 * Safari on iOS zooms the whole page when a focused input's font-size is
 * under 16px. Our fields were 15px, so tapping any of them jumped the
 * viewport. 16px is the threshold, not a preference — anything smaller
 * brings the zoom back.
 *
 * Scoped to coarse-pointer/narrow screens so desktop keeps the tighter
 * 15px scale.
 * ========================================================================= */
@media (max-width: 1024px) {
  .medex-plist input[type="text"],
  .medex-plist input[type="email"],
  .medex-plist input[type="tel"],
  .medex-plist textarea,
  .medex-loc textarea,
  .medex-loc input[type="text"],
  .medex-checkout textarea,
  .medex-checkout input[type="text"],
  .medex-mp input,
  .medex-mp textarea {
    font-size: 16px !important;
  }
}
@supports (-webkit-touch-callout: none) {
  .medex-plist input,
  .medex-plist textarea,
  .medex-loc input,
  .medex-loc textarea,
  .medex-checkout input,
  .medex-checkout textarea,
  .medex-mp input,
  .medex-mp textarea,
  .mf-form-wrapper .mf-input,
  .mf-form-wrapper textarea.mf-input {
    font-size: 16px !important;
  }
}


/* ------------------------------------------------------------------ */
/* v0.4.68 — Lab tests row in Review & Confirm                          */
/* Only ever rendered when the bulk-booking cart has items, so there is  */
/* nothing to hide on pages without the tool.                           */
/* ------------------------------------------------------------------ */
.mmt-co-labhead{
  font-weight:600;
  color:var(--mmt-purple);
}
.mmt-co-row .mmt-co-v .mmt-co-labhead + br + *{ margin-top:2px; }


/* ------------------------------------------------------------------ */
/* v0.4.71/0.4.73 — stop iOS zooming when a field is focused             */
/*                                                                     */
/* Safari zooms whenever a focused control is under 16px. The first     */
/* attempt used plain selectors and lost the cascade: Elementor and     */
/* Metform ship rules like                                             */
/*   .elementor-widget-container input.mf-input { font-size:14px!important }  */
/* which are more specific, so !important alone was not enough.        */
/*                                                                     */
/* The :not(#mmt-never) suffix adds ID-level specificity without        */
/* changing what is matched — no element has that id. It is a blunt     */
/* instrument, but the alternative is losing to whichever theme rule    */
/* happens to be more specific this month.                             */
/* ------------------------------------------------------------------ */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 991px) {
    html body input[type="text"]:not(#mmt-never),
    html body input[type="email"]:not(#mmt-never),
    html body input[type="tel"]:not(#mmt-never),
    html body input[type="url"]:not(#mmt-never),
    html body input[type="number"]:not(#mmt-never),
    html body input[type="search"]:not(#mmt-never),
    html body input[type="password"]:not(#mmt-never),
    html body input[type="date"]:not(#mmt-never),
    html body input[type="datetime-local"]:not(#mmt-never),
    html body input[type="month"]:not(#mmt-never),
    html body input[type="time"]:not(#mmt-never),
    html body input[type="week"]:not(#mmt-never),
    html body input:not([type]):not(#mmt-never),
    html body select:not(#mmt-never),
    html body textarea:not(#mmt-never),
    html body .mf_select__input input:not(#mmt-never),
    html body .mf-input:not(#mmt-never),
    html body .form-control:not(#mmt-never),
    html body .mf_select__control:not(#mmt-never),
    html body .mf_select__single-value:not(#mmt-never),
    html body .mf_select__placeholder:not(#mmt-never) {
      font-size: 16px !important;
    }
  }
}

/* v0.4.71/0.4.74 — edit / clear controls on the Review rows            */
/*                                                                     */
/* The controls were rendering (6 of them, confirmed by                */
/* MedExMMTCheckout.controls()) but were invisible on the live site.   */
/* This theme styles buttons globally — Elementor's                    */
/* `.elementor-widget-container button`, ElementsKit's `.ekit-btn`     */
/* family and the theme's own `button` rules all set background,       */
/* colour and padding, several with !important and higher specificity. */
/* A 0,1,0 selector like `.mmt-co-act` never stood a chance.           */
/*                                                                     */
/* So: a full reset, at ID-level specificity via :not(#mmt-never), so  */
/* these look the same wherever they are dropped.                      */
/* ------------------------------------------------------------------ */
html body .mmt-co-actions:not(#mmt-never){
  display:inline-flex !important;
  gap:6px !important;
  margin-left:8px !important;
  vertical-align:middle !important;
  float:none !important;
  width:auto !important;
}

html body .mmt-co-act:not(#mmt-never){
  /* reset anything the theme applies to buttons */
  all:unset;
  box-sizing:border-box !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:5px 12px !important;
  border:1.5px solid rgba(155,28,191,.35) !important;
  border-radius:999px !important;
  background:#fff !important;
  background-image:none !important;
  color:#9b1cbf !important;
  font-family:inherit !important;
  font-size:11px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  letter-spacing:.3px !important;
  text-transform:uppercase !important;
  text-decoration:none !important;
  text-shadow:none !important;
  box-shadow:none !important;
  cursor:pointer !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  transition:background .15s ease, border-color .15s ease, color .15s ease !important;
  -webkit-appearance:none !important;
          appearance:none !important;
}

html body .mmt-co-act:not(#mmt-never):hover{
  background:#9b1cbf !important;
  border-color:#9b1cbf !important;
  color:#fff !important;
}
html body .mmt-co-act:not(#mmt-never):focus-visible{
  outline:2px solid #9b1cbf !important;
  outline-offset:2px !important;
}

html body .mmt-co-clearpkg:not(#mmt-never),
html body .mmt-co-clearaddons:not(#mmt-never){
  border-color:rgba(224,25,127,.4) !important;
  color:#e0197f !important;
}
html body .mmt-co-clearpkg:not(#mmt-never):hover,
html body .mmt-co-clearaddons:not(#mmt-never):hover{
  background:#e0197f !important;
  border-color:#e0197f !important;
  color:#fff !important;
}

html body .mmt-co-restore:not(#mmt-never){
  background:#fff3ec !important;
  border-color:#ff8a63 !important;
  color:#a8480f !important;
}

/* Brief highlight, used by MedExMMTCheckout.controls() to point them out. */
html body .mmt-co-act.mmt-co-flash:not(#mmt-never){
  animation:mmtCoFlash 1.1s ease 2;
}
/* v0.9.44 — !important is not permitted inside a @keyframes declaration; the
   spec says such declarations are ignored, so both of these were dropped and
   the flash never animated. The rule that starts it is already specificity-
   armoured (html body … :not(#mmt-never)), so nothing is needed here. */
@keyframes mmtCoFlash{
  0%,100%{ box-shadow:0 0 0 0 rgba(155,28,191,0); }
  50%    { box-shadow:0 0 0 6px rgba(155,28,191,.35); }
}

/* On a phone the actions sit under the value rather than beside it. */
@media (max-width:600px){
  html body .mmt-co-actions:not(#mmt-never){
    display:flex !important;
    margin:8px 0 0 !important;
  }
  html body .mmt-co-act:not(#mmt-never){
    padding:7px 14px !important;
    font-size:12px !important;
  }
}

/* The 0 THB tag shown when packages have been removed. */
html body .mmt-co-zero:not(#mmt-never){
  display:inline-block !important;
  margin-left:8px !important;
  padding:2px 8px !important;
  border-radius:999px !important;
  background:rgba(155,28,191,.10) !important;
  color:#9b1cbf !important;
  font-size:12px !important;
  font-weight:700 !important;
  white-space:nowrap !important;
}

/* Basket row shown when packages have been removed from the Review card. */
html body .mmt-mp-row--cleared:not(#mmt-never){
  opacity:.8 !important;
}
html body .mmt-mp-row--cleared .mmt-mp-name:not(#mmt-never){
  font-style:italic !important;
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:anywhere !important;
  min-width:0 !important;
}
html body .mmt-mp-row--cleared .mmt-mp-num:not(#mmt-never){
  opacity:.5 !important;
  background:transparent !important;
  color:inherit !important;
}


/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */
/* v0.5.3 — booking bar, in the site's own purple                       */
/*                                                                     */
/* Modelled on the existing brand bar: deep purple ground, pink count   */
/* badge, uppercase letter-spaced labels, actions as text rather than   */
/* filled buttons. The detail sheet stays capped at 25vh.               */
/* ------------------------------------------------------------------ */
html body .mmt-bar:not(#mmt-never){
  position:fixed !important;
  left:0 !important; right:0 !important; bottom:0 !important;
  z-index:9995 !important;
  background:linear-gradient(90deg,#3d1552 0%,#4a1a5f 50%,#3d1552 100%) !important;
  border-top:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 -6px 24px rgba(45,10,60,.34) !important;
  padding-bottom:env(safe-area-inset-bottom) !important;
  font-family:inherit !important;
  color:#fff !important;
  transition:transform .28s ease, opacity .28s ease !important;
}
html body .mmt-bar[hidden]:not(#mmt-never){ display:none !important; }
html body .mmt-bar.is-tucked:not(#mmt-never){
  transform:translateY(110%) !important; opacity:0 !important; pointer-events:none !important;
}

html body .mmt-bar__row:not(#mmt-never){
  max-width:1280px !important;
  margin:0 auto !important;
  min-height:60px !important;
  padding:0 20px !important;
  display:flex !important;
  align-items:center !important;
  gap:18px !important;
}
html body .mmt-bar__spacer:not(#mmt-never){ flex:1 1 auto !important; }

/* --- the toggle: badge + "YOUR BOOKING" + chevron --- */
html body .mmt-bar__toggle:not(#mmt-never){
  all:unset;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  cursor:pointer !important;
  flex:0 0 auto !important;
}
html body .mmt-bar__badge:not(#mmt-never){
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:30px !important;
  height:30px !important;
  padding:0 9px !important;
  border-radius:999px !important;
  background:linear-gradient(122deg,#ff4c88 12%,#ff6f8f 71%) !important;
  color:#fff !important;
  font-size:14px !important;
  font-weight:800 !important;
  line-height:1 !important;
}
html body .mmt-bar__badge.is-empty:not(#mmt-never){
  background:rgba(255,255,255,.16) !important;
  color:rgba(255,255,255,.75) !important;
}
html body .mmt-bar__title:not(#mmt-never){
  font-size:13px !important;
  font-weight:700 !important;
  letter-spacing:1.4px !important;
  text-transform:uppercase !important;
  color:#fff !important;
  white-space:nowrap !important;
}
html body .mmt-bar__chev:not(#mmt-never){
  font-size:10px !important;
  color:rgba(255,255,255,.8) !important;
  transition:transform .2s ease !important;
}
html body .mmt-bar.is-open .mmt-bar__chev:not(#mmt-never){ transform:rotate(180deg) !important; }

/* --- "Packages: 1 + Tests: 2" --- */
html body .mmt-bar__counts:not(#mmt-never){
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  min-width:0 !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  font-size:14px !important;
  color:rgba(255,255,255,.78) !important;
}
html body .mmt-bar__grp-l:not(#mmt-never){
  letter-spacing:.4px !important;
  color:rgba(255,255,255,.72) !important;
}
html body .mmt-bar__grp b:not(#mmt-never){ color:#fff !important; font-weight:800 !important; }
html body .mmt-bar__counts i:not(#mmt-never){
  font-style:normal !important; color:rgba(255,255,255,.4) !important;
}
html body .mmt-bar__hint:not(#mmt-never){
  color:rgba(255,255,255,.6) !important; font-size:14px !important;
}

/* --- TOTAL 9,499 THB --- */
html body .mmt-bar__total:not(#mmt-never){
  display:inline-flex !important;
  align-items:baseline !important;
  gap:7px !important;
  flex:0 0 auto !important;
  white-space:nowrap !important;
}
html body .mmt-bar__total i:not(#mmt-never){
  font-style:normal !important;
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:1.3px !important;
  text-transform:uppercase !important;
  color:rgba(255,255,255,.68) !important;
}
html body .mmt-bar__total b:not(#mmt-never){
  font-size:21px !important;
  font-weight:800 !important;
  color:#fff !important;
  letter-spacing:.2px !important;
}

/* --- actions, as text --- */
html body .mmt-bar__link:not(#mmt-never){
  all:unset;
  cursor:pointer !important;
  flex:0 0 auto !important;
  font-size:12px !important;
  font-weight:700 !important;
  letter-spacing:1.3px !important;
  text-transform:uppercase !important;
  color:rgba(255,255,255,.82) !important;
  padding:10px 4px !important;
  transition:color .15s ease !important;
}
html body .mmt-bar__link:not(#mmt-never):hover{ color:#fff !important; }
html body .mmt-bar__link[hidden]:not(#mmt-never){ display:none !important; }
html body .mmt-bar__link--go:not(#mmt-never){
  color:#fff !important;
  padding:10px 18px !important;
  border-radius:999px !important;
  background:linear-gradient(122deg,#ff4c88 12%,#ff8a63 71%) !important;
  box-shadow:0 4px 14px rgba(255,76,136,.34) !important;
}
html body .mmt-bar__link:focus-visible:not(#mmt-never){
  outline:2px solid #ff8a63 !important; outline-offset:2px !important;
}

/* --- outstanding fields --- */
html body .mmt-bar__missing:not(#mmt-never){
  max-width:1280px !important;
  margin:0 auto !important;
  padding:8px 20px !important;
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:.3px !important;
  color:#ffd9a8 !important;
  background:rgba(255,138,99,.14) !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
}
html body .mmt-bar__missing[hidden]:not(#mmt-never){ display:none !important; }

/* --- the detail sheet --- */
html body .mmt-bar__sheet:not(#mmt-never){
  max-height:25vh !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch !important;
  background:rgba(30,8,42,.97) !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
}
html body .mmt-bar__sheet[hidden]:not(#mmt-never){ display:none !important; }
html body .mmt-bar__sheet-inner:not(#mmt-never){
  max-width:1280px !important; margin:0 auto !important; padding:14px 20px !important;
}
html body .mmt-bar__group:not(#mmt-never){
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  gap:10px !important;
  margin:10px 0 5px !important;
  font-size:10px !important; font-weight:800 !important;
  letter-spacing:1.2px !important; text-transform:uppercase !important;
  color:#ff8fb0 !important;
}
html body .mmt-bar__group:first-child:not(#mmt-never){ margin-top:0 !important; }
html body .mmt-bar__line:not(#mmt-never){
  font-size:13px !important; line-height:1.5 !important; color:rgba(255,255,255,.88) !important;
}
html body .mmt-bar__gacts:not(#mmt-never){ display:inline-flex !important; gap:6px !important; }
html body .mmt-bar__gact:not(#mmt-never){
  all:unset;
  display:inline-flex !important; align-items:center !important;
  padding:3px 10px !important;
  border:1px solid rgba(255,255,255,.28) !important;
  border-radius:999px !important;
  color:#fff !important;
  font-size:10px !important; font-weight:700 !important;
  letter-spacing:.6px !important; text-transform:uppercase !important;
  cursor:pointer !important;
}
html body .mmt-bar__gact:not(#mmt-never):hover{ background:rgba(255,255,255,.14) !important; }
html body .mmt-bar__gact--rm:not(#mmt-never){
  border-color:rgba(255,140,170,.5) !important; color:#ff9ab4 !important;
}

@media (max-width:767px){
  html body .mmt-bar__row:not(#mmt-never){
    min-height:54px !important; padding:0 12px !important; gap:10px !important;
  }
  html body .mmt-bar__title:not(#mmt-never){ display:none !important; }
  html body .mmt-bar__counts:not(#mmt-never){ font-size:13px !important; gap:7px !important; }
  html body .mmt-bar__grp-l:not(#mmt-never){ display:none !important; }
  html body .mmt-bar__total i:not(#mmt-never){ display:none !important; }
  html body .mmt-bar__total b:not(#mmt-never){ font-size:17px !important; }
  html body .mmt-bar__link:not(#mmt-never){ font-size:11px !important; letter-spacing:.8px !important; }
  html body .mmt-bar__link--go:not(#mmt-never){ padding:9px 13px !important; }
}

@media (prefers-reduced-motion: reduce){
  html body .mmt-bar:not(#mmt-never){ transition:none !important; }
  html body .mmt-bar__chev:not(#mmt-never){ transition:none !important; }
}

/* v0.4.77 — bar search button, old footer, notification stacking       */
/* ------------------------------------------------------------------ */
html body .mmt-bar__search:not(#mmt-never){
  all:unset;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:38px !important;
  height:38px !important;
  border-radius:999px !important;
  border:1.5px solid rgba(106,41,122,.25) !important;
  background:#fff !important;
  color:#6a297a !important;
  cursor:pointer !important;
  flex:0 0 auto !important;
  transition:background .15s ease, border-color .15s ease, color .15s ease !important;
}
html body .mmt-bar__search:not(#mmt-never):hover{
  background:#6a297a !important; border-color:#6a297a !important; color:#fff !important;
}
html body .mmt-bar__search[hidden]:not(#mmt-never){ display:none !important; }
html body .mmt-bar__search:focus-visible:not(#mmt-never){
  outline:2px solid #9b1cbf !important; outline-offset:2px !important;
}
@media (max-width:767px){
  html body .mmt-bar__search:not(#mmt-never){ width:36px !important; height:36px !important; }
}

/* The bulk-booking tool's own sticky footer is superseded by the bar —
   two fixed bars stacked at the bottom is not usable on a phone. */
html body #lab-dos .sticky-footer:not(#mmt-never){ display:none !important; }

/* Lab-dos achievement toasts must sit above the bar and its sheet.
   The bar is 9995; these were 1100 and were being covered. */
html body .achievement-notification:not(#mmt-never),
html body .cart-notification:not(#mmt-never){
  z-index:2147483000 !important;
}
/* Keep them clear of the bar itself so they never overlap it. */
@media (max-width:767px){
  html body .achievement-notification:not(#mmt-never){
    bottom:auto !important;
    top:16px !important;
    left:12px !important;
    right:12px !important;
    max-width:none !important;
  }
  html body .achievement-notification.show:not(#mmt-never){ top:16px !important; }
}


/* ------------------------------------------------------------------ */
/* v0.4.77 — branch map embeds                                          */
/*                                                                     */
/* Display-only on purpose: pointer-events:none blocks every link       */
/* inside the iframe, so nothing can open a new tab, and the map cannot */
/* swallow a scroll gesture on a phone. Google's own controls are part  */
/* of the embed and can't be configured away from outside, so a compact */
/* frame plus no interaction is the tidiest result available.           */
/* ------------------------------------------------------------------ */
html body .medex-loc-embed:not(#mmt-never){
  position:relative !important;
  width:100% !important;
  aspect-ratio:16 / 10 !important;
  max-height:230px !important;
  border-radius:12px !important;
  overflow:hidden !important;
  background:#eef0f4 !important;
  box-shadow:0 2px 10px rgba(106,41,122,.10) !important;
}
html body .medex-loc-embed iframe:not(#mmt-never){
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  border:0 !important;
  display:block !important;
  pointer-events:none !important;   /* no links, no new tabs, no scroll trap */
}

/* Older browsers without aspect-ratio */
@supports not (aspect-ratio: 1 / 1){
  html body .medex-loc-embed:not(#mmt-never){ height:200px !important; }
}

@media (max-width:600px){
  html body .medex-loc-embed:not(#mmt-never){
    aspect-ratio:16 / 9 !important;
    max-height:170px !important;
  }
}

/* While a branch embed is showing, the form's geocoded map is redundant —
   without this the visitor sees two maps stacked. */
html body .medex-loc-map-suppressed:not(#mmt-never){
  display:none !important;
}


/* ------------------------------------------------------------------ */
/* v0.4.82 — bar: outstanding fields + per-group controls               */
/* ------------------------------------------------------------------ */
html body .mmt-bar__missing:not(#mmt-never){
  max-width:1200px !important;
  margin:0 auto !important;
  padding:7px 16px !important;
  font-size:12px !important;
  font-weight:600 !important;
  color:#a8480f !important;
  background:rgba(255,138,99,.13) !important;
  border-bottom:1px solid rgba(255,138,99,.28) !important;
}
html body .mmt-bar__missing[hidden]:not(#mmt-never){ display:none !important; }

html body .mmt-bar__group:not(#mmt-never){
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
}
html body .mmt-bar__gacts:not(#mmt-never){ display:inline-flex !important; gap:6px !important; }
html body .mmt-bar__gact:not(#mmt-never){
  all:unset;
  display:inline-flex !important;
  align-items:center !important;
  padding:3px 9px !important;
  border:1px solid rgba(155,28,191,.32) !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#9b1cbf !important;
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:.3px !important;
  text-transform:uppercase !important;
  cursor:pointer !important;
}
html body .mmt-bar__gact--rm:not(#mmt-never){
  border-color:rgba(224,25,127,.35) !important;
  color:#e0197f !important;
}
html body .mmt-bar__gact:focus-visible:not(#mmt-never){
  outline:2px solid #9b1cbf !important; outline-offset:2px !important;
}

/* The phantom form must never be visible or focusable. */
/* Revealed phantom: a normal form again. */
html body #medex-mmt-phantom.medex-mmt-phantom--visible:not(#mmt-never){
  position:static !important;
  left:auto !important; top:auto !important;
  width:auto !important; height:auto !important;
  overflow:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

html body #medex-mmt-phantom:not(.medex-mmt-phantom--visible):not(#mmt-never){
  position:absolute !important;
  left:-9999px !important;
  top:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

@media (max-width:767px){
  html body .mmt-bar__missing:not(#mmt-never){ padding:6px 12px !important; font-size:11px !important; }
}


/* ------------------------------------------------------------------ */
/* v0.5.3 — "how would you like to check out?"                          */
/*                                                                     */
/* Shown only when the visitor has BOTH a package and lab tests, where  */
/* "Checkout" is genuinely ambiguous. Each option carries its own       */
/* figures, so the choice is made against numbers rather than wording.  */
/* ------------------------------------------------------------------ */
html body .mmt-choice:not(#mmt-never){
  position:fixed !important;
  inset:0 !important;
  z-index:2147483001 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:20px !important;
}
html body .mmt-choice__scrim:not(#mmt-never){
  position:absolute !important; inset:0 !important;
  background:rgba(30,8,42,.72) !important;
  -webkit-backdrop-filter:blur(3px) !important;
          backdrop-filter:blur(3px) !important;
}
html body .mmt-choice__box:not(#mmt-never){
  position:relative !important;
  width:100% !important;
  max-width:720px !important;
  max-height:86vh !important;
  overflow-y:auto !important;
  background:#fff !important;
  border-radius:18px !important;
  padding:26px 26px 22px !important;
  box-shadow:0 24px 70px rgba(45,10,60,.42) !important;
}
html body .mmt-choice__x:not(#mmt-never){
  all:unset;
  position:absolute !important; top:12px !important; right:16px !important;
  width:32px !important; height:32px !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  border-radius:999px !important;
  font-size:22px !important; line-height:1 !important;
  color:#6a297a !important; cursor:pointer !important;
}
html body .mmt-choice__x:not(#mmt-never):hover{ background:rgba(155,28,191,.10) !important; }

html body .mmt-choice__h:not(#mmt-never){
  margin:0 0 6px !important;
  font-size:21px !important; font-weight:800 !important;
  color:#3d1552 !important; letter-spacing:-.2px !important;
}
html body .mmt-choice__sub:not(#mmt-never){
  margin:0 0 18px !important;
  font-size:14px !important; line-height:1.5 !important; color:#6b5b75 !important;
}

html body .mmt-choice__opts:not(#mmt-never){
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:14px !important;
}
@media (max-width:640px){
  html body .mmt-choice__opts:not(#mmt-never){ grid-template-columns:1fr !important; }
  html body .mmt-choice__box:not(#mmt-never){ padding:22px 18px 18px !important; }
}

html body .mmt-choice__opt:not(#mmt-never){
  all:unset;
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  padding:18px 16px 16px !important;
  border:2px solid rgba(155,28,191,.20) !important;
  border-radius:14px !important;
  background:linear-gradient(180deg,#fff 0%,#fdf7ff 100%) !important;
  cursor:pointer !important;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease !important;
}
html body .mmt-choice__opt:not(#mmt-never):hover{
  border-color:#9b1cbf !important;
  transform:translateY(-2px) !important;
  box-shadow:0 10px 26px rgba(106,41,122,.16) !important;
}
html body .mmt-choice__opt:focus-visible:not(#mmt-never){
  outline:2px solid #9b1cbf !important; outline-offset:3px !important;
}

html body .mmt-choice__tag:not(#mmt-never){
  position:absolute !important; top:-11px !important; left:14px !important;
  padding:3px 10px !important;
  border-radius:999px !important;
  background:linear-gradient(122deg,#ff4c88 12%,#ff8a63 71%) !important;
  color:#fff !important;
  font-size:10px !important; font-weight:800 !important;
  letter-spacing:.9px !important; text-transform:uppercase !important;
}
html body .mmt-choice__t:not(#mmt-never){
  font-size:15px !important; font-weight:800 !important; color:#3d1552 !important;
}
html body .mmt-choice__p:not(#mmt-never){
  font-size:24px !important; font-weight:800 !important; color:#e0197f !important;
  letter-spacing:-.3px !important;
}
html body .mmt-choice__list:not(#mmt-never){
  margin:2px 0 0 !important; padding:0 0 0 2px !important; list-style:none !important;
}
html body .mmt-choice__list li:not(#mmt-never){
  font-size:12.5px !important; line-height:1.55 !important; color:#4b3a57 !important;
  padding-left:12px !important; position:relative !important;
}
html body .mmt-choice__list li:not(#mmt-never)::before{
  content:'' !important; position:absolute !important; left:0 !important; top:8px !important;
  width:4px !important; height:4px !important; border-radius:999px !important;
  background:#c77dd8 !important;
}
html body .mmt-choice__more:not(#mmt-never){ color:#8b7a95 !important; font-style:italic !important; }
html body .mmt-choice__note:not(#mmt-never){
  margin-top:2px !important;
  font-size:11.5px !important; color:#8b7a95 !important; line-height:1.45 !important;
}


/* ---------------------------------------------------------------- *
 * "Nothing to book" — shown when a submit is refused because the
 * booking is empty. Scoped under .medex-checkout like everything else
 * this plugin styles, so it cannot leak into the theme.
 * ---------------------------------------------------------------- */
.medex-checkout .mmt-co-zero-note {
  margin: 10px 0 0 !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  background: #fff3f6 !important;
  border: 1px solid rgba(255, 76, 136, .35) !important;
  color: #b3175a !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: center !important;
}

.medex-checkout .mmt-co-zero-note.mmt-co-flash {
  animation: mmt-co-flash-kf .9s ease-out 2;
}

@keyframes mmt-co-flash-kf {
  0%   { box-shadow: 0 0 0 0 rgba(255, 76, 136, .45); }
  70%  { box-shadow: 0 0 0 10px rgba(255, 76, 136, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 76, 136, 0); }
}


/* ---- nearest clinic (v0.9.24) -------------------------------------------
 * Distance sits under the address, in the same muted tone as the opening
 * hours: it is a fact about the clinic, not a call to action. The "nearest
 * to you" suffix is the only part that earns emphasis, and only on the one
 * card the toolkit chose.
 */
.medex-loc .mmt-loc-dist {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: #1c6b46;
}
.medex-loc .mmt-loc-geo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  padding: 7px 12px;
  font: inherit;
  font-size: 13px;
  color: #5b2d8e;
  background: #efe8f8;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
}
.medex-loc .mmt-loc-geo:hover { background: #e5daf5; }
.medex-loc .mmt-loc-geo:disabled { opacity: .6; cursor: default; }
.medex-loc .mmt-loc-geo-note {
  display: block;
  margin: 0 0 10px;
  font-size: 12.5px;
  color: #7d7290;
}

/* Province chips carry their distance inline, dimmer than the name: the
   province is what you are choosing, the number is only how you decide. */
.medex-loc .mmt-loc-chip-km {
  margin-left: 6px;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  opacity: .65;
}


/* ---- provincial area ring (v0.9.30) --------------------------------------
 * A provincial centre is positioned to the town, not the doorstep. The ring
 * says "around here" without putting a number on it.
 *
 * v0.9.32: the map underneath is NO LONGER draggable. The ring is anchored to
 * the centre of the frame, so panning would leave it circling somewhere the
 * clinic is not — and looking just as confident. See .is-area below.
 */
.medex-loc .medex-loc-embed { position: relative; }
.medex-loc .medex-loc-embed.is-area iframe {
  /* Static on purpose — see renderEmbed(). The ring is anchored to the frame,
     so a map that can be dragged would put it somewhere the clinic is not. */
  pointer-events: none;
}
.medex-loc .medex-loc-pin {
  /* Anchored exactly as the ring is, so the two always agree. The tip of the
     pin — not its middle — sits on the coordinate. */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
  line-height: 0;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3));
}
.medex-loc .medex-loc-openmap {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  font: 500 12px/1 Inter, system-ui, sans-serif;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  color: #223a66;
  text-decoration: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}
.medex-loc .medex-loc-openmap:hover { background: #fff; }
.medex-loc .medex-loc-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(226, 74, 106, .16);
  border: 1px solid rgba(226, 74, 106, .38);
  pointer-events: none;
}


/* The address is the answer; the caveat is a footnote to it (v0.9.34). */
.medex-loc .mmt-loc-note-sub {
  display: inline-block;
  margin-top: 4px;
  font-size: 12.5px;
  color: #7d7290;
  line-height: 1.45;
}


/* Nearest-clinic override notice (v0.9.37). Informational, not an error: it
   reports something helpful that happened and offers it back. */
.medex-loc .mmt-loc-swapped {
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #eef4ff;
  color: #274060;
  font-size: 13px;
  line-height: 1.45;
}
.medex-loc .mmt-loc-undo {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: #223a66;
  text-decoration: underline;
  cursor: pointer;
}