/* ============================================================================
   DMB Widget Admin — surface-specific styles that don't belong in the shared
   cx-management.css. Ported 2026-04-24 from legacy .wa- / .dmb- / .rw- / --rw-
   prefixes to the .cxm-wa-* namespace using --cxm-* tokens. Form-card,
   filter-bar, input, empty-hero, pill, chip, modal come from cx-management.css.
   ========================================================================= */

/* ── Toolbar — title styling inside the shared .cxm-filter-bar--flat ───
   Layout (single row, no wrap) comes from .cxm-filter-bar--flat itself.
   This block only adds title typography + spacing for the count pill. */
.cxm-wa-bar__title {
  font-size: var(--cxm-fs-16);
  font-weight: var(--cxm-fw-800);
  color: var(--cxm-g100);
  letter-spacing: -0.2px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--cxm-sp-2);
  white-space: nowrap;
  flex-shrink: 0;
}
.cxm-wa-bar__title i { color: var(--cxm-b60); }

/* ── Card grid ───────────────────────────────────────────────────────── */
.cxm-wa-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--cxm-sp-4);
}
@media (max-width: 1200px) { .cxm-wa-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .cxm-wa-grid { grid-template-columns: 1fr; } }

.cxm-wa-card {
  background: #fff;
  border: 1px solid var(--cxm-g30);
  border-radius: var(--cxm-rl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--cxm-dur, 0.15s) var(--cxm-ease),
              box-shadow var(--cxm-dur, 0.15s) var(--cxm-ease);
}
.cxm-wa-card:hover {
  border-color: var(--cxm-g40);
  box-shadow: var(--cxm-sh);
}

.cxm-wa-card__head {
  display: flex;
  align-items: center;
  gap: var(--cxm-sp-3);
  padding: var(--cxm-sp-3) var(--cxm-sp-4);
  border-bottom: 1px solid var(--cxm-g20);
}
.cxm-wa-flow-bubble {
  width: 40px; height: 40px;
  border-radius: var(--cxm-r);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: var(--cxm-fs-16);
  color: #fff;
}
.cxm-wa-flow-bubble--media    { background: linear-gradient(135deg, var(--cxm-b60), var(--cxm-p60)); }
.cxm-wa-flow-bubble--menu     { background: linear-gradient(135deg, var(--cxm-s60), #49B6E4); }
.cxm-wa-flow-bubble--text     { background: linear-gradient(135deg, var(--cxm-w60), var(--cxm-o60)); }
.cxm-wa-flow-bubble--textmenu { background: linear-gradient(135deg, var(--cxm-p60), var(--cxm-b60)); }
.cxm-wa-flow-bubble--offer    { background: linear-gradient(135deg, var(--cxm-o60), var(--cxm-e60)); }
.cxm-wa-flow-bubble--utility  { background: linear-gradient(135deg, var(--cxm-g60), var(--cxm-g80)); }

.cxm-wa-card__name  { flex: 1; min-width: 0; }
.cxm-wa-card__label {
  font-size: var(--cxm-fs-14);
  font-weight: var(--cxm-fw-700);
  color: var(--cxm-g100);
  letter-spacing: -0.1px;
  line-height: 1.3;
}
.cxm-wa-card__meta {
  display: flex;
  align-items: center;
  gap: var(--cxm-sp-2);
  margin-top: 3px;
  font-size: var(--cxm-fs-11);
  color: var(--cxm-g70);
}
.cxm-wa-card__meta code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--cxm-g10);
  border: 1px solid var(--cxm-g30);
  color: var(--cxm-g80);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: var(--cxm-fs-10);
}
.cxm-wa-card__meta-cat {
  color: var(--cxm-g60);
  text-transform: capitalize;
}

.cxm-wa-card__body {
  padding: var(--cxm-sp-3) var(--cxm-sp-4);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--cxm-sp-3);
}
.cxm-wa-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--cxm-sp-2);
}
.cxm-wa-spec { display: flex; flex-direction: column; gap: 3px; }
.cxm-wa-spec__label {
  font-size: var(--cxm-fs-10);
  font-weight: var(--cxm-fw-700);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--cxm-g60);
}
.cxm-wa-spec__value {
  font-size: var(--cxm-fs-12);
  font-weight: var(--cxm-fw-600);
  color: var(--cxm-g90);
  font-variant-numeric: tabular-nums;
}
.cxm-wa-flow-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--cxm-rf);
  font-size: var(--cxm-fs-10);
  font-weight: var(--cxm-fw-700);
  text-transform: capitalize;
  letter-spacing: 0.3px;
  align-self: flex-start;
}
.cxm-wa-flow-chip--media    { background: var(--cxm-b10); color: var(--cxm-b70); }
.cxm-wa-flow-chip--menu     { background: var(--cxm-s10); color: var(--cxm-s70); }
.cxm-wa-flow-chip--text     { background: var(--cxm-w10); color: var(--cxm-w80); }
.cxm-wa-flow-chip--textmenu { background: var(--cxm-p10); color: var(--cxm-p70); }
.cxm-wa-flow-chip--offer    { background: var(--cxm-o10); color: var(--cxm-o80); }
.cxm-wa-flow-chip--utility  { background: var(--cxm-g20); color: var(--cxm-g80); }

.cxm-wa-card__description {
  font-size: var(--cxm-fs-12);
  color: var(--cxm-g80);
  line-height: var(--cxm-lh-relaxed, 1.5);
}

/* Row actions — icon-only buttons sitting in the card head, after the pill. */
.cxm-wa-card__actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: var(--cxm-sp-1);
  flex-shrink: 0;
}
.cxm-wa-iconbtn {
  width: 30px;
  height: 30px;
  border-radius: var(--cxm-r);
  border: 1px solid transparent;
  background: transparent;
  color: var(--cxm-g70);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: var(--cxm-fs-12);
  transition: background var(--cxm-dur, 0.15s) var(--cxm-ease),
              color var(--cxm-dur, 0.15s) var(--cxm-ease),
              border-color var(--cxm-dur, 0.15s) var(--cxm-ease);
}
.cxm-wa-iconbtn:hover {
  background: var(--cxm-g20);
  color: var(--cxm-g100);
  border-color: var(--cxm-g30);
}
.cxm-wa-iconbtn:focus-visible {
  outline: none;
  border-color: var(--cxm-b60);
  box-shadow: 0 0 0 3px rgba(65, 133, 244, 0.18);
}
.cxm-wa-iconbtn--danger:hover {
  background: var(--cxm-e10);
  color: var(--cxm-e70);
  border-color: var(--cxm-e10);
}

/* (Form-section title styling moved to .cxm-wa-section__title — see the
   "Section cards" block near the bottom of this file. The old top-level
   `.cxm-wa-section-title` class was removed when the form was restructured
   into proper card sections.) */

/* ── Image upload ────────────────────────────────────────────────────── */
.cxm-wa-image-upload {
  display: flex;
  gap: var(--cxm-sp-3);
  align-items: center;
  flex-wrap: wrap;
}
.cxm-wa-image-preview {
  position: relative;
  width: 96px; height: 96px;
  border: 1px solid var(--cxm-g30);
  border-radius: var(--cxm-r);
  overflow: hidden;
  background: var(--cxm-g10);
  flex-shrink: 0;
}
.cxm-wa-image-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cxm-wa-image-preview__remove {
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  border: none;
  border-radius: 50%;
  background: rgba(4,9,17,0.6);
  color: #fff;
  font-size: 10px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--cxm-dur, 0.15s);
}
.cxm-wa-image-preview__remove:hover { background: var(--cxm-e60); }

.cxm-wa-image-dropzone {
  flex: 1;
  min-width: 180px;
  position: relative;
  border: 2px dashed var(--cxm-g40);
  border-radius: var(--cxm-r);
  padding: var(--cxm-sp-4);
  background: var(--cxm-g10);
  color: var(--cxm-g70);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cxm-sp-1);
  cursor: pointer;
  transition: border-color var(--cxm-dur, 0.15s),
              background var(--cxm-dur, 0.15s),
              color var(--cxm-dur, 0.15s);
}
.cxm-wa-image-dropzone:hover {
  border-color: var(--cxm-b60);
  background: var(--cxm-b10);
  color: var(--cxm-b70);
}
.cxm-wa-image-dropzone i      { font-size: 20px; }
.cxm-wa-image-dropzone span   { font-size: var(--cxm-fs-12); font-weight: var(--cxm-fw-500); }
.cxm-wa-image-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* ── Constraint card (landscape / portrait) ──────────────────────────── */
.cxm-wa-constraint-card {
  background: var(--cxm-g10);
  border: 1px solid var(--cxm-g30);
  border-radius: var(--cxm-r);
  padding: var(--cxm-sp-3) var(--cxm-sp-4);
  margin-bottom: var(--cxm-sp-3);
}
.cxm-wa-constraint-card__label {
  font-size: var(--cxm-fs-12);
  font-weight: var(--cxm-fw-700);
  color: var(--cxm-g90);
  margin-bottom: var(--cxm-sp-2);
  display: flex;
  align-items: center;
  gap: var(--cxm-sp-2);
}
.cxm-wa-constraint-card__label i { color: var(--cxm-b60); }

/* ── Status toggle card ──────────────────────────────────────────────── */
.cxm-wa-status-card {
  border: 1px solid var(--cxm-g30);
  border-radius: var(--cxm-r);
  padding: var(--cxm-sp-3) var(--cxm-sp-4);
  background: #fff;
  cursor: pointer;
  transition: border-color var(--cxm-dur, 0.15s),
              background var(--cxm-dur, 0.15s);
}
.cxm-wa-status-card:hover { border-color: var(--cxm-g40); background: var(--cxm-g10); }
.cxm-wa-status-card--on {
  border-color: var(--cxm-b60);
  background: var(--cxm-b10);
}
.cxm-wa-status-card:focus-visible {
  outline: none;
  border-color: var(--cxm-b60);
  box-shadow: 0 0 0 3px rgba(65,133,244,0.12);
}
.cxm-wa-status-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cxm-sp-2);
  margin-bottom: 4px;
}
.cxm-wa-status-card__label {
  font-size: var(--cxm-fs-13);
  font-weight: var(--cxm-fw-700);
  color: var(--cxm-g100);
}
.cxm-wa-status-card__hint {
  font-size: var(--cxm-fs-11);
  color: var(--cxm-g70);
  margin: 0;
  line-height: var(--cxm-lh-relaxed, 1.4);
}

/* Flat toggle — purely visual; the card is the interactive element. */
.cxm-wa-toggle {
  position: relative;
  width: 36px; height: 20px;
  border-radius: 20px;
  background: var(--cxm-g40);
  flex-shrink: 0;
  transition: background var(--cxm-dur, 0.2s);
}
.cxm-wa-toggle__dot {
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(4,9,17,0.12);
  transition: left var(--cxm-dur, 0.2s);
}
.cxm-wa-toggle--on                     { background: var(--cxm-b60); }
.cxm-wa-toggle--on .cxm-wa-toggle__dot { left: 18px; }

/* ── Delete-confirm modal extras ─────────────────────────────────────── */
.cxm-wa-modal-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--cxm-e10);
  color: var(--cxm-e70);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--cxm-sp-3);
  font-size: 22px;
}
.cxm-wa-modal-title {
  font-size: var(--cxm-fs-16);
  font-weight: var(--cxm-fw-700);
  color: var(--cxm-g100);
  text-align: center;
  margin: 0 0 var(--cxm-sp-2);
}
.cxm-wa-modal-message {
  font-size: var(--cxm-fs-13);
  color: var(--cxm-g80);
  text-align: center;
  line-height: var(--cxm-lh-relaxed, 1.5);
  margin: 0;
}
.cxm-wa-modal-message code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--cxm-g10);
  border: 1px solid var(--cxm-g30);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: var(--cxm-fs-11);
  color: var(--cxm-g90);
}

/* ── Catalog list (Display Options + Text Levels) ──────────────────────────
   Per-widget catalog of options the admin activates / deactivates. Each row
   = name (text label, not editable) + 1-2 toggles. Inactive rows are muted
   so admins see at a glance which options this widget type supports. */
.cxm-wa-catalog {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--cxm-sp-4, 16px);
  border: 1px solid var(--cxm-g20, #EEF0F4);
  border-radius: var(--cxm-radius-md, 8px);
  background: var(--cxm-surface, #fff);
  overflow: hidden;
}
.cxm-wa-catalog__head,
.cxm-wa-catalog__row {
  display: grid;
  gap: var(--cxm-sp-3, 16px);
  align-items: center;
  padding: 0 var(--cxm-sp-3, 16px);
}
.cxm-wa-catalog__head {
  font-size: var(--cxm-fs-11, 11px);
  font-weight: var(--cxm-fw-700, 700);
  color: var(--cxm-g70, #7F8C8D);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding-top: 10px;
  padding-bottom: 10px;
  background: var(--cxm-g10, #F4F6F9);
  border-bottom: 1px solid var(--cxm-g20, #EEF0F4);
}
.cxm-wa-catalog__row {
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--cxm-g15, #F0F2F5);
  transition: background-color 0.15s, opacity 0.15s;
}
.cxm-wa-catalog__row:last-child { border-bottom: none; }
.cxm-wa-catalog__row:hover { background: var(--cxm-g10, #F4F6F9); }

/* Inactive row: muted name + the row reads as "off". The Default toggle
   inside still renders, but its own --disabled modifier locks interaction. */
.cxm-wa-catalog__row--inactive .cxm-wa-catalog__name { color: var(--cxm-g60, #9DA2AA); }
.cxm-wa-catalog__row--inactive:hover { background: transparent; }

/* Display Options: 3 columns — Name · Default · Active.
   Default is 150px so it can hold a number/text/select input for typed options;
   the boolean toggle just centres within it. Active stays a fixed 70px. */
.cxm-wa-catalog__row--dopts,
.cxm-wa-catalog__head--dopts {
  grid-template-columns: 1fr 150px 70px;
}
/* Text Levels: 2 columns — Name · Active. */
.cxm-wa-catalog__row--levels,
.cxm-wa-catalog__head--levels {
  grid-template-columns: 1fr 70px;
}

.cxm-wa-catalog__col--name {
  font-size: var(--cxm-fs-13, 13px);
  color: var(--cxm-g90, #2C3E50);
}
.cxm-wa-catalog__col--toggle,
.cxm-wa-catalog__col--default {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Centre the column-header labels on top of the toggle columns. */
.cxm-wa-catalog__head .cxm-wa-catalog__col--toggle { justify-content: center; }

/* Typed-default input (number/text/select) inside the Default cell — sized to
   fit the 150px column with breathing room; the toggle path is unaffected. */
.cxm-wa-dopt-input {
  width: 130px;
  max-width: 130px;
  text-align: left;
}

/* Disabled Default toggle (when row is inactive — toggling is irrelevant
   until the option is reactivated). Visual de-emphasis + locked pointer. */
.cxm-wa-toggle.cxm-wa-toggle--disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* ──────────────────────────────────────────────────────────────────────────
   Section cards — used inside the form body to group related fields.
   Each section has an icon header (24px tinted bubble) + title + subtitle,
   followed by a body that holds the actual fields. Cards stack with a 24px
   gap so the form has clear breathing room.
   ────────────────────────────────────────────────────────────────────────── */
.cxm-wa-form-body {
  display: flex;
  flex-direction: column;
  gap: var(--cxm-sp-4, 24px);
  /* The default cxm-form-card__body horizontal padding may already give us
     enough room; this just guarantees consistent vertical rhythm. */
}
.cxm-wa-section {
  background: var(--cxm-surface, #fff);
  border: 1px solid var(--cxm-g20, #EEF0F4);
  border-radius: var(--cxm-radius-md, 8px);
  overflow: hidden;
}
.cxm-wa-section__head {
  display: flex;
  align-items: flex-start;
  gap: var(--cxm-sp-3, 12px);
  padding: 14px 16px;
  background: var(--cxm-g05, #FAFBFC);
  border-bottom: 1px solid var(--cxm-g15, #F0F2F5);
}
.cxm-wa-section__icon {
  flex: 0 0 28px;
  width: 28px; height: 28px;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
  color: var(--cxm-accent, #2D7DD2);
  background: rgba(45,125,210,0.10);
}
/* Section-specific icon tints — different hue per section makes scanning faster. */
.cxm-wa-section__icon--info    { color: #2D7DD2; background: rgba(45,125,210,0.10); }
.cxm-wa-section__icon--preview { color: #8B5CF6; background: rgba(139,92,246,0.10); }
.cxm-wa-section__icon--sizing  { color: #0EA5E9; background: rgba(14,165,233,0.10); }
.cxm-wa-section__icon--display { color: #16A34A; background: rgba(22,163,74,0.10); }
.cxm-wa-section__icon--text    { color: #D97706; background: rgba(217,119,6,0.10); }
.cxm-wa-section__icon--status  { color: #DC2626; background: rgba(220,38,38,0.10); }
.cxm-wa-section__title {
  margin: 0 0 2px;
  font-size: var(--cxm-fs-15, 15px);
  font-weight: var(--cxm-fw-700, 700);
  color: var(--cxm-g100, #2C3E50);
  letter-spacing: -0.1px;
}
.cxm-wa-section__subtitle {
  margin: 0;
  font-size: var(--cxm-fs-12, 12px);
  color: var(--cxm-g60, #9DA2AA);
  line-height: 1.4;
}
.cxm-wa-section__body {
  padding: 16px;
}
.cxm-wa-section__divider {
  height: 1px;
  background: var(--cxm-g15, #F0F2F5);
  margin: 16px -16px;     /* full-bleed within the body's 16px padding */
}
.cxm-wa-constraint-card__grid {
  margin-left: 6px;
  font-weight: var(--cxm-fw-500, 500);
  font-size: var(--cxm-fs-11, 11px);
  color: var(--cxm-g60, #9DA2AA);
  background: var(--cxm-g10, #F4F6F9);
  padding: 1px 6px;
  border-radius: 4px;
}
.cxm-wa-empty-hint {
  margin: 0;
  padding: 14px 12px;
  font-size: var(--cxm-fs-12, 12px);
  color: var(--cxm-g60, #9DA2AA);
  background: var(--cxm-g05, #FAFBFC);
  border: 1px dashed var(--cxm-g20, #EEF0F4);
  border-radius: var(--cxm-radius-md, 8px);
  text-align: center;
}

/* Old per-h5 spacing rules are no longer used in the form body — sections
   provide their own structure. Keep them around in case the list view ever
   reuses .cxm-wa-section-title elsewhere. */

/* Sticky footer — keeps Cancel / Save visible while the long form scrolls. */
.cxm-form-card__footer {
  position: sticky;
  bottom: 0;
  background: var(--cxm-surface, #fff);
  border-top: 1px solid var(--cxm-g15, #F0F2F5);
  padding: 14px 24px;
  display: flex;
  justify-content: flex-end;
  gap: var(--cxm-sp-3, 12px);
  z-index: 2;
}

/* Header refinement — tightens the spacing between the back button and the
   title block so the page header reads as one unit. */
.cxm-form-card__header {
  padding: 18px 24px 16px;
  border-bottom: 1px solid var(--cxm-g15, #F0F2F5);
  background: var(--cxm-surface, #fff);
}
.cxm-form-card__back {
  margin-right: var(--cxm-sp-3, 12px);
}

/* ──────────────────────────────────────────────────────────────────────────
   Capabilities — the new "Step 1" picker that replaces the Stepper-flow
   dropdown. Each card is a toggleable capability; the form below reveals
   only the nested config matching the active set.
   ────────────────────────────────────────────────────────────────────────── */
.cxm-wa-section__icon--caps { color: #4f46e5; background: rgba(79,70,229,0.10); }

.cxm-wa-caps-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--cxm-sp-3, 12px);
}
@media (max-width: 720px) { .cxm-wa-caps-grid { grid-template-columns: 1fr; } }

.cxm-wa-cap-card {
  background: var(--cxm-surface, #fff);
  border: 1px solid var(--cxm-g20, #EEF0F4);
  border-radius: var(--cxm-radius-md, 8px);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  user-select: none;
}
.cxm-wa-cap-card:hover {
  border-color: var(--cxm-g30, #E0E4EA);
  box-shadow: 0 1px 3px rgba(4,9,17,0.04);
}
.cxm-wa-cap-card:focus-visible {
  outline: none;
  border-color: var(--cxm-accent, #2D7DD2);
  box-shadow: 0 0 0 3px rgba(45,125,210,0.15);
}
.cxm-wa-cap-card--on {
  border-color: var(--cxm-accent, #2D7DD2);
  background: rgba(45,125,210,0.04);
}

.cxm-wa-cap-card__head {
  display: flex;
  align-items: center;
  gap: var(--cxm-sp-3, 12px);
}
.cxm-wa-cap-card__icon {
  flex: 0 0 36px;
  width: 36px; height: 36px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px;
}
.cxm-wa-cap-card__icon--menu  { color: #16A34A; background: rgba(22,163,74,0.10); }
.cxm-wa-cap-card__icon--text  { color: #D97706; background: rgba(217,119,6,0.10); }
.cxm-wa-cap-card__icon--media { color: #8B5CF6; background: rgba(139,92,246,0.10); }
.cxm-wa-cap-card__icon--offer { color: #DC2626; background: rgba(220,38,38,0.10); }

.cxm-wa-cap-card__name {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cxm-wa-cap-card__name strong {
  font-size: var(--cxm-fs-14, 14px);
  font-weight: var(--cxm-fw-700, 700);
  color: var(--cxm-g100, #2C3E50);
  line-height: 1.2;
}
.cxm-wa-cap-card__name small {
  font-size: var(--cxm-fs-11, 11px);
  color: var(--cxm-g60, #9DA2AA);
  margin-top: 2px;
}

.cxm-wa-cap-error {
  margin: 12px 0 0;
  padding: 10px 12px;
  background: rgba(220,38,38,0.06);
  border: 1px solid rgba(220,38,38,0.2);
  border-radius: var(--cxm-radius-md, 8px);
  color: var(--cxm-danger, #DC2626);
  font-size: var(--cxm-fs-12, 12px);
  font-weight: var(--cxm-fw-600, 600);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ──────────────────────────────────────────────────────────────────────────
   Stepper — the navigator at the top of the form body, the per-step empty
   placeholder, and the footer with Back/Next/Save.
   ────────────────────────────────────────────────────────────────────────── */

.cxm-wa-stepper {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--cxm-surface, #fff);
  border-bottom: 1px solid var(--cxm-g15, #F0F2F5);
  margin: -16px -16px var(--cxm-sp-4, 24px);
  padding: 14px 18px;
}
.cxm-wa-stepper__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.cxm-wa-stepper__item {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.cxm-wa-stepper__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--cxm-radius-md, 8px);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-align: left;
  min-width: 0;
}
.cxm-wa-stepper__btn:hover { background: var(--cxm-g10, #F4F6F9); }
.cxm-wa-stepper__btn:focus-visible {
  outline: none;
  border-color: var(--cxm-accent, #2D7DD2);
  box-shadow: 0 0 0 3px rgba(45,125,210,0.15);
}
.cxm-wa-stepper__pill {
  flex: 0 0 28px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--cxm-g15, #F0F2F5);
  color: var(--cxm-g60, #9DA2AA);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--cxm-fs-12, 12px);
  font-weight: var(--cxm-fw-700, 700);
  transition: background 0.15s, color 0.15s;
}
.cxm-wa-stepper__item--active .cxm-wa-stepper__pill {
  background: var(--cxm-accent, #2D7DD2);
  color: #fff;
}
.cxm-wa-stepper__item--done .cxm-wa-stepper__pill {
  background: #16A34A;        /* success green */
  color: #fff;
}
.cxm-wa-stepper__labels {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cxm-wa-stepper__title {
  font-size: var(--cxm-fs-13, 13px);
  font-weight: var(--cxm-fw-700, 700);
  color: var(--cxm-g100, #2C3E50);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cxm-wa-stepper__item--active .cxm-wa-stepper__title {
  color: var(--cxm-accent, #2D7DD2);
}
.cxm-wa-stepper__subtitle {
  font-size: var(--cxm-fs-11, 11px);
  color: var(--cxm-g60, #9DA2AA);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cxm-wa-stepper__connector {
  flex: 1 0 24px;
  height: 2px;
  background: var(--cxm-g20, #EEF0F4);
  border-radius: 1px;
  min-width: 24px;
}
.cxm-wa-stepper__item--done + .cxm-wa-stepper__item .cxm-wa-stepper__connector,
.cxm-wa-stepper__item--done .cxm-wa-stepper__connector {
  background: #16A34A;
}

/* Per-step empty placeholder (e.g. Configure step with Media-only). */
.cxm-wa-step-empty {
  background: var(--cxm-surface, #fff);
  border: 1px dashed var(--cxm-g20, #EEF0F4);
  border-radius: var(--cxm-radius-md, 8px);
  padding: 32px 24px;
  text-align: center;
  margin-bottom: var(--cxm-sp-4, 24px);
}
.cxm-wa-step-empty__icon {
  font-size: 28px;
  color: #16A34A;
  margin-bottom: 8px;
}
.cxm-wa-step-empty__title {
  margin: 0 0 6px;
  font-size: var(--cxm-fs-15, 15px);
  font-weight: var(--cxm-fw-700, 700);
  color: var(--cxm-g100, #2C3E50);
}
.cxm-wa-step-empty__hint {
  margin: 0;
  font-size: var(--cxm-fs-12, 12px);
  color: var(--cxm-g60, #9DA2AA);
  line-height: 1.5;
}

/* Stepper footer — replaces the previous Cancel/Save row. Sticks to the
   bottom of the form card. */
.cxm-wa-stepper-footer {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--cxm-sp-3, 12px);
}
.cxm-wa-stepper-footer__left,
.cxm-wa-stepper-footer__right {
  display: flex;
  align-items: center;
  gap: var(--cxm-sp-3, 12px);
}
.cxm-wa-stepper-footer__hint {
  font-size: var(--cxm-fs-12, 12px);
  color: var(--cxm-danger, #DC2626);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cxm-wa-stepper-footer__progress {
  font-size: var(--cxm-fs-12, 12px);
  color: var(--cxm-g60, #9DA2AA);
  font-weight: var(--cxm-fw-600, 600);
}

/* ============================================================================
   Text levels — master / detail (step 3)
   Left rail = list of levels with N/M chip; right pane = focused level's
   typography control grid. Replaces the flat single-table layout.
   ========================================================================= */
.cxm-wa-mdsplit {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--cxm-sp-4, 16px);
  align-items: start;
}
@media (max-width: 920px) {
  .cxm-wa-mdsplit { grid-template-columns: 1fr; }
}

.cxm-wa-toggle--sm {
  width: 28px; height: 16px;
}
.cxm-wa-toggle--sm .cxm-wa-toggle__dot {
  width: 12px; height: 12px; top: 2px; left: 2px;
}
.cxm-wa-toggle--sm.cxm-wa-toggle--on .cxm-wa-toggle__dot { left: 14px; }

/* ── Levels rail ─────────────────────────────────────────────────────── */
.cxm-wa-level-rail {
  display: flex; flex-direction: column;
  list-style: none; margin: 0; padding: 0;
  background: var(--cxm-g05, #F4F6F9);
  border: 1px solid var(--cxm-g30, #E0E4EA);
  border-radius: var(--cxm-rl, 8px);
  overflow: hidden;
  position: sticky; top: var(--cxm-sp-3, 12px);
}
/* Sticky rail makes sense beside the pane; on mobile the rail stacks ABOVE
   the pane and stickiness would shadow content. Drop sticky under 920px. */
@media (max-width: 920px) {
  .cxm-wa-level-rail { position: static; }
}
.cxm-wa-level-rail__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--cxm-sp-3, 12px) var(--cxm-sp-4, 16px);
  font-size: var(--cxm-fs-11, 11px);
  font-weight: var(--cxm-fw-700, 700);
  color: var(--cxm-g70, #6A6F77);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 1px solid var(--cxm-g30, #E0E4EA);
  background: #fff;
}
.cxm-wa-level-rail__count {
  background: var(--cxm-g20, #EBEEF2);
  color: var(--cxm-g80, #4A5158);
  padding: 1px 8px;
  border-radius: 999px;
  font-size: var(--cxm-fs-11, 11px);
}
.cxm-wa-level-rail__row {
  display: flex; align-items: stretch;
  border-bottom: 1px solid var(--cxm-g20, #EBEEF2);
  background: transparent;
  transition: background var(--cxm-dur, 0.2s);
}
.cxm-wa-level-rail__row:last-child { border-bottom: 0; }
.cxm-wa-level-rail__row:hover { background: #fff; }
.cxm-wa-level-rail__row--active {
  background: #fff;
  box-shadow: inset 3px 0 0 var(--cxm-b60, #2D7DD2);
}
.cxm-wa-level-rail__row--active .cxm-wa-level-rail__name {
  color: var(--cxm-g100, #2C3E50);
  font-weight: var(--cxm-fw-700, 700);
}
.cxm-wa-level-rail__row--inactive .cxm-wa-level-rail__name {
  color: var(--cxm-g50, #9DA2AA);
}
.cxm-wa-level-rail__option {
  flex: 1;
  display: flex; align-items: center; gap: var(--cxm-sp-2, 8px);
  padding: var(--cxm-sp-3, 12px) var(--cxm-sp-3, 12px) var(--cxm-sp-3, 12px) var(--cxm-sp-4, 16px);
  cursor: pointer;
  min-width: 0;
}
.cxm-wa-level-rail__option:focus-visible {
  outline: 2px solid var(--cxm-b60, #2D7DD2);
  outline-offset: -2px;
}
.cxm-wa-level-rail__name {
  flex: 1;
  font-size: var(--cxm-fs-13, 13px);
  font-weight: var(--cxm-fw-600, 600);
  color: var(--cxm-g90, #3A434B);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cxm-wa-level-rail__chip {
  font-size: var(--cxm-fs-11, 11px);
  font-weight: var(--cxm-fw-700, 700);
  background: var(--cxm-b10, rgba(45,125,210,0.10));
  color: var(--cxm-b70, #1E5F9F);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.cxm-wa-level-rail__row--inactive .cxm-wa-level-rail__chip {
  background: var(--cxm-g20, #EBEEF2);
  color: var(--cxm-g70, #6A6F77);
}
/* Separate, focusable toggle button (no nested interactives in option). */
.cxm-wa-toggle-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 var(--cxm-sp-3, 12px);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.cxm-wa-toggle-btn:focus-visible {
  outline: 2px solid var(--cxm-b60, #2D7DD2);
  outline-offset: -2px;
}

/* ── Detail pane ─────────────────────────────────────────────────────── */
.cxm-wa-level-pane {
  background: #fff;
  border: 1px solid var(--cxm-g30, #E0E4EA);
  border-radius: var(--cxm-rl, 8px);
  min-height: 320px;
}
.cxm-wa-level-pane__empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: var(--cxm-sp-6, 32px) var(--cxm-sp-4, 16px);
  color: var(--cxm-g60, #7F8C8D);
  min-height: 320px;
}
.cxm-wa-level-pane__empty i {
  font-size: 28px;
  color: var(--cxm-g40, #C7CCD3);
  margin-bottom: var(--cxm-sp-3, 12px);
}
.cxm-wa-level-pane__empty h5 {
  margin: 0 0 6px;
  font-size: var(--cxm-fs-15, 15px);
  font-weight: var(--cxm-fw-700, 700);
  color: var(--cxm-g90, #3A434B);
}
.cxm-wa-level-pane__empty p {
  margin: 0;
  font-size: var(--cxm-fs-12, 12px);
}

.cxm-wa-level-pane__inner {
  padding: var(--cxm-sp-4, 16px);
}
.cxm-wa-level-pane__head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: var(--cxm-sp-3, 12px);
  margin-bottom: var(--cxm-sp-3, 12px);
  border-bottom: 1px solid var(--cxm-g20, #EBEEF2);
}
.cxm-wa-level-pane__title {
  display: flex; align-items: center; gap: var(--cxm-sp-2, 8px);
  font-size: var(--cxm-fs-15, 15px);
  font-weight: var(--cxm-fw-700, 700);
  color: var(--cxm-g100, #2C3E50);
}
.cxm-wa-level-pane__title i { color: var(--cxm-b60, #2D7DD2); }
.cxm-wa-level-pane__active {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--cxm-fs-11, 11px);
  font-weight: var(--cxm-fw-600, 600);
  color: var(--cxm-g70, #6A6F77);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.cxm-wa-level-pane__hint {
  display: flex; align-items: center; gap: var(--cxm-sp-2, 8px);
  background: var(--cxm-w10, rgba(243,156,18,0.10));
  color: var(--cxm-w70, #B47210);
  padding: var(--cxm-sp-2, 8px) var(--cxm-sp-3, 12px);
  border-radius: var(--cxm-rm, 6px);
  font-size: var(--cxm-fs-12, 12px);
  margin: 0 0 var(--cxm-sp-3, 12px);
}

/* ── Controls grid ───────────────────────────────────────────────────── */
.cxm-wa-controls-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--cxm-sp-3, 12px);
}
@media (max-width: 720px) {
  .cxm-wa-controls-grid { grid-template-columns: 1fr; }
}

.cxm-wa-control-card {
  background: #fff;
  border: 1px solid var(--cxm-g30, #E0E4EA);
  border-radius: var(--cxm-rm, 6px);
  padding: var(--cxm-sp-3, 12px);
  display: flex; flex-direction: column; gap: var(--cxm-sp-2, 8px);
  transition: background var(--cxm-dur, 0.2s), border-color var(--cxm-dur, 0.2s);
}
.cxm-wa-control-card--off {
  background: var(--cxm-g05, #F4F6F9);
  border-style: dashed;
}
.cxm-wa-control-card__head {
  display: flex; align-items: center; gap: var(--cxm-sp-2, 8px);
}
.cxm-wa-control-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  background: var(--cxm-b10, rgba(45,125,210,0.10));
  color: var(--cxm-b60, #2D7DD2);
  border-radius: 4px;
  font-size: 11px;
}
.cxm-wa-control-card--off .cxm-wa-control-card__icon {
  background: var(--cxm-g20, #EBEEF2);
  color: var(--cxm-g60, #7F8C8D);
}
.cxm-wa-control-card__label {
  flex: 1;
  font-size: var(--cxm-fs-13, 13px);
  font-weight: var(--cxm-fw-600, 600);
  color: var(--cxm-g100, #2C3E50);
}
.cxm-wa-control-card--off .cxm-wa-control-card__label { color: var(--cxm-g60, #7F8C8D); }

.cxm-wa-control-card__body {
  display: flex; flex-direction: column; gap: var(--cxm-sp-2, 8px);
  padding-top: var(--cxm-sp-2, 8px);
  border-top: 1px dashed var(--cxm-g20, #EBEEF2);
}
.cxm-wa-control-card__deflabel {
  font-size: var(--cxm-fs-10, 10px);
  font-weight: var(--cxm-fw-700, 700);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--cxm-g60, #7F8C8D);
}
.cxm-wa-control-card__row {
  display: flex; align-items: center; gap: 6px;
}
.cxm-wa-control-card__row input[type="number"],
.cxm-wa-control-card__row input[type="text"] {
  flex: 1;
}
.cxm-wa-control-card__unit {
  font-size: var(--cxm-fs-11, 11px);
  color: var(--cxm-g60, #7F8C8D);
  font-weight: var(--cxm-fw-600, 600);
  min-width: 16px;
}
.cxm-wa-control-card__clear {
  background: transparent; border: 0; cursor: pointer;
  color: var(--cxm-g50, #9DA2AA);
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 11px;
}
.cxm-wa-control-card__clear:hover {
  color: var(--cxm-d60, #E74C3C);
  background: var(--cxm-d10, rgba(231,76,60,0.10));
}

/* Segmented control (alignment / decoration / transform / fontStyle) */
.cxm-wa-control-card__seg {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--cxm-g30, #E0E4EA);
  border-radius: var(--cxm-rs, 4px);
  overflow: hidden;
  background: #fff;
}
.cxm-wa-control-card__seg button {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--cxm-g30, #E0E4EA);
  padding: 6px 10px;
  font-size: var(--cxm-fs-12, 12px);
  color: var(--cxm-g80, #4A5158);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px;
}
.cxm-wa-control-card__seg button:last-child { border-right: 0; }
.cxm-wa-control-card__seg button:hover {
  background: var(--cxm-g10, #F8F9FB);
}
.cxm-wa-control-card__seg button:focus-visible {
  outline: 2px solid var(--cxm-b60, #2D7DD2);
  outline-offset: -2px;
  position: relative; z-index: 1;
}
.cxm-wa-control-card__seg--on {
  background: var(--cxm-b60, #2D7DD2) !important;
  color: #fff !important;
}
.cxm-wa-control-card__seg-clear {
  color: var(--cxm-g70, #6A6F77) !important;
}

/* Color swatch — wraps a hidden <input type="color">. The native input remains
   focusable (opacity:0 doesn't strip it from tab order) but has no visible
   ring; bubble a :focus-within ring onto the swatch so it's reachable+visible. */
.cxm-wa-color-swatch {
  position: relative;
  display: inline-block;
  width: 28px; height: 28px;
  border-radius: 4px;
  border: 1px solid var(--cxm-g30, #E0E4EA);
  cursor: pointer;
  flex-shrink: 0;
  background: #fff;
}
.cxm-wa-color-swatch:focus-within {
  outline: 2px solid var(--cxm-b60, #2D7DD2);
  outline-offset: 2px;
}
.cxm-wa-color-swatch input[type="color"] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
  padding: 0;
}
.cxm-wa-color-hex {
  font-family: monospace;
  font-size: 11px;
  flex: 1;
}

.cxm-wa-control-card__off-hint {
  font-size: var(--cxm-fs-11, 11px);
  color: var(--cxm-g60, #7F8C8D);
  font-style: italic;
  padding-top: var(--cxm-sp-2, 8px);
  border-top: 1px dashed var(--cxm-g20, #EBEEF2);
}

.cxm-wa-empty-hint--soft {
  margin-top: var(--cxm-sp-3, 12px);
  display: flex; align-items: center; gap: var(--cxm-sp-2, 8px);
  background: var(--cxm-w10, rgba(243,156,18,0.10));
  color: var(--cxm-w70, #B47210);
  padding: var(--cxm-sp-2, 8px) var(--cxm-sp-3, 12px);
  border-radius: var(--cxm-rm, 6px);
  font-size: var(--cxm-fs-12, 12px);
}

/* ── Predefined templates tab ─────────────────────────────────────────── */
.cxm-wa-tabs {
  display: flex;
  gap: var(--cxm-sp-1, 4px);
  margin-bottom: var(--cxm-sp-4, 16px);
  border-bottom: 1px solid var(--cxm-g30, #E0E4EA);
}
.cxm-wa-tab {
  padding: var(--cxm-sp-2, 8px) var(--cxm-sp-4, 16px);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font: inherit;
  font-size: var(--cxm-fs-14, 14px);
  color: var(--cxm-g70, #7F8C8D);
}
.cxm-wa-tab:hover { color: var(--cxm-g90, #2C3E50); }
.cxm-wa-tab.is-active {
  color: var(--cxm-b60, #2D7DD2);
  border-bottom-color: var(--cxm-b60, #2D7DD2);
  font-weight: 600;
}

/* Inactive status pill — neutral grey (success pill already exists). */
.cxm-pill--muted {
  background: var(--cxm-g30, #E0E4EA);
  color: var(--cxm-g70, #7F8C8D);
  border: 1px solid var(--cxm-g40, #c5cad3);
}

/* Monospace JSON textarea — override .cxm-input's fixed height. */
.cxm-textarea--mono {
  height: auto;
  min-height: 220px;
  max-width: 100%;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: var(--cxm-fs-12, 12px);
  line-height: 1.5;
  resize: vertical;
}
.cxm-wa-pt-desc { color: var(--cxm-g70, #7F8C8D); }
.cxm-wa-pt-actions { white-space: nowrap; text-align: right; }
.cxm-wa-pt-actions .cxm-btn { margin-left: var(--cxm-sp-1, 4px); }

/* ── Page header (Digital Menu Board) ─────────────────────────────────── */
.cxm-wa-pagehead { margin-bottom: var(--cxm-sp-4, 16px); }
.cxm-wa-pagehead__title {
  margin: 0;
  font-size: var(--cxm-fs-22, 22px);
  font-weight: 700;
  color: var(--cxm-g90, #2C3E50);
}
.cxm-wa-pagehead__sub {
  margin: var(--cxm-sp-1, 4px) 0 0;
  font-size: var(--cxm-fs-14, 14px);
  color: var(--cxm-g70, #7F8C8D);
}

/* Predefined Details — compact Status toggle field, aligned to input height. */
.cxm-wa-toggle-field {
  display: flex;
  align-items: center;
  gap: var(--cxm-sp-2, 8px);
  height: 40px;
  cursor: pointer;
}
.cxm-wa-toggle-field__label { font-size: var(--cxm-fs-14, 14px); color: var(--cxm-g90, #2C3E50); }
.cxm-wa-toggle-field:focus-visible { outline: 2px solid var(--cxm-b60, #2D7DD2); outline-offset: 2px; border-radius: var(--cxm-rm, 6px); }

/* Predefined templates list — row preview thumbnail + name. */
.cxm-wa-pt-th-thumb { width: 64px; }
.cxm-wa-pt-thumb {
  width: 56px;
  height: 36px;
  border-radius: var(--cxm-rm, 6px);
  border: 1px solid var(--cxm-g30, #E0E4EA);
  background: var(--cxm-g10, #f4f6f9);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cxm-g60, #9aa3b5);
}
.cxm-wa-pt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cxm-wa-pt-name { font-weight: 600; color: var(--cxm-g90, #2C3E50); }

/* ── Predefined-template form: JSON field header + validation status ──────────
   Label + "Format" action share one line; live validation shows a success
   ("Valid · N widgets") or reuses .cxm-field-error for parse problems. */
.cxm-wa-json-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.cxm-wa-json-head .cxm-field-label { margin-bottom: 0; }
.cxm-wa-json-format { flex: 0 0 auto; }

/* Inline "valid JSON" status — success counterpart of .cxm-field-error. */
.cxm-field-ok { display: block; margin-top: 6px; font-size: var(--cxm-fs-11, 11px); color: var(--cxm-s70, #27AE60); }
.cxm-field-ok .fa,
.cxm-field-error .fa { margin-right: 4px; }

/* Preview-image dropzone while an upload is in flight. */
.cxm-wa-image-dropzone.is-busy { opacity: 0.7; cursor: progress; pointer-events: none; }