/* Moka Rangers - registration widget.
 *
 * EVERY selector is prefixed with `.mrsc-widget` so this CSS file can be
 * concatenated into a WordPress theme without overriding the host site,
 * and so the host site's `.entry-content button {...}` style rules cannot
 * beat ours (we have higher specificity).
 *
 * The widget itself is full-bleed by default - no max-width, no outer
 * margin, no border. It fills whatever container it's dropped into.
 *
 * Fonts: Open Sans + Roboto, matching mokarangers.mu (loaded via Google
 * Fonts <link> in index.html).
 */

/* Standalone-only body reset for the localhost preview.
 * In a WP embed the host theme owns body styling - but our widget is
 * scoped underneath so this rule cannot affect anything outside it. */
html, body { margin: 0; padding: 0; min-height: 100vh; }
body { display: flex; flex-direction: column; }

/* ---------- Root / design tokens / inheritance reset ----------
 * Visual system aligned to mokarangers.mu brand kit.
 *
 * TYPE  - 6 sizes only: 12 / 14 / 16 / 20 / 40 / 72
 * SPACE - 4 / 8 / 16 / 24 / 32 / 48
 * RADII - 12.5px on fields/buttons/chips, 16px on cards/callouts
 */
.mrsc-widget {
  /* Brand colours (from site CSS, post-7.css) */
  --mrsc-primary: #E81F76;
  --mrsc-primary-dark: #C81862;
  --mrsc-ink: #1D252C;          /* body copy, matches site --e-global-color-text */
  --mrsc-ink-strong: #101820;   /* headings + strong */
  --mrsc-ink-soft: #5C6470;
  --mrsc-muted: #9A9A9A;
  --mrsc-accent: #96DAEA;       /* light cyan, reserved for info accents */
  --mrsc-line: #E0DED7;
  --mrsc-bg: #FAFAF7;
  --mrsc-error: #B3261E;

  /* Type scale */
  --mrsc-fs-eyebrow: 12px;
  --mrsc-fs-meta:    14px;
  --mrsc-fs-body:    16px;
  --mrsc-fs-lead:    20px;
  --mrsc-fs-h2:      40px;
  --mrsc-fs-hero:    72px;

  /* Spacing scale */
  --mrsc-sp-1: 4px;
  --mrsc-sp-2: 8px;
  --mrsc-sp-3: 16px;
  --mrsc-sp-4: 24px;
  --mrsc-sp-5: 32px;
  --mrsc-sp-6: 48px;

  /* Form-field tokens */
  --mrsc-field-bg: #EAEAE9;
  --mrsc-field-bg-hover: #E3E2E0;
  --mrsc-field-bg-focus: #D9D8D6;
  --mrsc-field-bg-disabled: #F3F2EC;
  --mrsc-field-radius: 12.5px;
  --mrsc-field-padding-y: 16px;
  --mrsc-field-padding-x: 16px;
  --mrsc-btn-padding-y: 16px;
  --mrsc-btn-padding-x: 32px;
  --mrsc-grid-gap: 24px;
  --mrsc-block-radius: 16px;

  --mrsc-font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --mrsc-font-display: 'Roboto', 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Body inheritance - matches brand 16/26 with 0.25px tracking */
  font-family: var(--mrsc-font-body);
  font-size: var(--mrsc-fs-body);
  font-weight: 400;
  line-height: 1.625;
  letter-spacing: 0.25px;
  text-transform: none;
  text-align: left;
  color: var(--mrsc-ink);
  background: var(--mrsc-bg);

  /* Full-bleed: fill whatever container we're dropped into. The widget
   * is a flex column so .mrsc-main can flex-grow and the form fills the
   * viewport even on short steps (intro / done). */
  width: 100%;
  min-height: 100vh;
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
  position: relative;
  display: flex;
  flex-direction: column;
}
.mrsc-widget .mrsc-main { flex: 1 1 auto; }

.mrsc-widget,
.mrsc-widget *,
.mrsc-widget *::before,
.mrsc-widget *::after {
  box-sizing: border-box;
}

/* ---------- Stepper: hairline rail + dots ---------- */
.mrsc-widget .mrsc-stepper {
  background: #fff;
  border-bottom: 1px solid var(--mrsc-line);
  padding: 0 24px;
}
.mrsc-widget .mrsc-stepper ol {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: 64px;
  margin: 0;
  padding: 0;
}
.mrsc-widget .mrsc-stepper li {
  display: flex;
  align-items: center;
  color: var(--mrsc-ink-soft);
  font-family: var(--mrsc-font-body);
  font-size: var(--mrsc-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0;
}
.mrsc-widget .mrsc-stepper li.active {
  color: var(--mrsc-ink-strong);
}
/* hidden attribute on flex children needs an explicit reset */
.mrsc-widget .mrsc-stepper li[hidden] {
  display: none !important;
}
.mrsc-widget .mrsc-stepper li::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #D8D6D0;
  margin-right: 10px;
  transition: background .15s;
}
.mrsc-widget .mrsc-stepper li.active::before {
  background: var(--mrsc-primary);
}
.mrsc-widget .mrsc-stepper li.done {
  color: var(--mrsc-ink-soft);
}
.mrsc-widget .mrsc-stepper li.done::before {
  background: var(--mrsc-ink);
}
.mrsc-widget .mrsc-stepper li + li {
  margin-left: 24px;
  position: relative;
}
.mrsc-widget .mrsc-stepper li + li::after {
  content: "";
  position: absolute;
  left: -16px;
  top: 50%;
  width: 8px;
  height: 1px;
  background: var(--mrsc-line);
}

/* ---------- Main content area ----------
 * Edge-to-edge content. Small fixed gutters keep field borders from
 * touching the host container's edge but never carve a centred column. */
.mrsc-widget .mrsc-main {
  background: #fff;
  padding: 48px 24px 64px;
  max-width: none;
  margin: 0;
}

.mrsc-widget .mrsc-step h2 {
  font-family: var(--mrsc-font-display);
  margin: 0 0 8px;
  color: var(--mrsc-ink-strong);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.mrsc-widget .mrsc-eyebrow {
  font-family: var(--mrsc-font-body);
  font-size: var(--mrsc-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mrsc-ink-soft);
  margin: 0 0 8px;
}
.mrsc-widget .mrsc-help {
  color: var(--mrsc-ink-soft);
  margin: 0 0 32px;
  font-size: var(--mrsc-fs-body);
  line-height: 1.5;
  max-width: 60ch;
}

/* ---------- Intro step ----------
 * Welcome splash: content centred horizontally and vertically in the
 * available page area, but never constrained to a fixed reading column —
 * the hero spans the full viewport width. */
.mrsc-widget [hidden] { display: none !important; }
.mrsc-widget .mrsc-step-hero {
  min-height: calc(100vh - 64px - 48px - 64px); /* viewport minus stepper + main paddings */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 0;
}
.mrsc-widget .mrsc-step-hero .mrsc-eyebrow {
  margin: 0 0 16px;
  color: var(--mrsc-ink-soft);
}
.mrsc-widget .mrsc-step-hero h2 {
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  max-width: none;
  color: var(--mrsc-ink-strong);
}
.mrsc-widget .mrsc-step-hero .mrsc-help {
  font-size: var(--mrsc-fs-body);
  color: var(--mrsc-ink-soft);
  margin: 0 0 32px;
  max-width: none;
}
.mrsc-widget .mrsc-step-hero .mrsc-actions-hero { justify-content: center; }
.mrsc-widget .mrsc-btn-large {
  font-size: var(--mrsc-fs-meta);
  padding: 20px 44px;
}
@media (max-width: 600px) {
  .mrsc-widget .mrsc-step-hero h2 { font-size: 32px; }
  .mrsc-widget .mrsc-btn-large { padding: 16px 32px; }
}

/* ---------- Mode chooser - pill cards ---------- */
.mrsc-widget .mrsc-mode {
  border: 0;
  padding: 0;
  margin: 0 0 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.mrsc-widget .mrsc-mode legend {
  grid-column: 1 / -1;
  font-family: var(--mrsc-font-body);
  font-size: var(--mrsc-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mrsc-ink-soft);
  padding: 0;
  margin-bottom: 4px;
}
.mrsc-widget .mrsc-mode .mrsc-radio {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 20px;
  cursor: pointer;
  margin: 0;
  background: var(--mrsc-field-bg);
  border-radius: var(--mrsc-block-radius);
  font-family: var(--mrsc-font-body);
  font-size: var(--mrsc-fs-body);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mrsc-ink);
  transition: background .12s, box-shadow .12s;
}
.mrsc-widget .mrsc-mode .mrsc-radio:hover { background: var(--mrsc-field-bg-hover); }
.mrsc-widget .mrsc-mode .mrsc-radio.selected {
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--mrsc-primary);
}
.mrsc-widget .mrsc-mode .mrsc-radio input { width: 18px; height: 18px; accent-color: var(--mrsc-primary); }
.mrsc-widget .mrsc-mode .mrsc-radio > div { display: flex; flex-direction: column; gap: 2px; }
.mrsc-widget .mrsc-mode .mrsc-radio strong {
  font-weight: 700;
  font-size: var(--mrsc-fs-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--mrsc-ink);
}
.mrsc-widget .mrsc-mode .mrsc-radio small {
  font-weight: 400;
  font-size: var(--mrsc-fs-meta);
  letter-spacing: 0;
  text-transform: none;
  color: var(--mrsc-ink-soft);
}

/* ---------- Form rows ---------- */
.mrsc-widget .mrsc-form .mrsc-row,
.mrsc-widget .mrsc-member-card .mrsc-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mrsc-grid-gap);
  margin-bottom: var(--mrsc-grid-gap);
}
.mrsc-widget .mrsc-row-stack { grid-template-columns: 1fr; }

.mrsc-widget label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--mrsc-font-body);
  font-size: var(--mrsc-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mrsc-ink-soft);
}
/* Generic input style only applies to text/number/email/date/etc - NOT to
 * radios or checkboxes, which keep their native (system-drawn) appearance
 * so the user can see their ticked state. */
.mrsc-widget input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.mrsc-widget select,
.mrsc-widget textarea {
  font-family: var(--mrsc-font-body);
  font-size: var(--mrsc-fs-body);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  padding: var(--mrsc-field-padding-y) var(--mrsc-field-padding-x);
  border: 0;
  border-radius: var(--mrsc-field-radius);
  background: var(--mrsc-field-bg);
  color: var(--mrsc-ink);
  transition: background-color .15s, box-shadow .15s;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
}
.mrsc-widget input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
.mrsc-widget select:hover,
.mrsc-widget textarea:hover {
  background: var(--mrsc-field-bg-hover);
}

/* Native radios + checkboxes - visible state, branded accent. */
.mrsc-widget input[type="radio"],
.mrsc-widget input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
  accent-color: var(--mrsc-primary);
}

/* Native date picker icon - make sure it's visible on all browsers. */
.mrsc-widget input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 12px;
  min-height: 48px;
}
.mrsc-widget input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.7;
}
.mrsc-widget select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%235C6470' d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
.mrsc-widget input::placeholder {
  color: var(--mrsc-muted);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.mrsc-widget input:not([type="checkbox"]):not([type="radio"]):focus,
.mrsc-widget select:focus,
.mrsc-widget textarea:focus {
  outline: 0;
  background: var(--mrsc-field-bg-focus);
  box-shadow: inset 0 0 0 2px var(--mrsc-primary);
}
.mrsc-widget input[type="radio"]:focus,
.mrsc-widget input[type="checkbox"]:focus {
  outline: 2px solid var(--mrsc-primary);
  outline-offset: 2px;
}
.mrsc-widget select:disabled,
.mrsc-widget input:disabled {
  background-color: var(--mrsc-field-bg-disabled);
  color: var(--mrsc-muted);
  cursor: not-allowed;
}
.mrsc-widget select:disabled:hover,
.mrsc-widget input:disabled:hover {
  background-color: var(--mrsc-field-bg-disabled);
}
.mrsc-widget .mrsc-meta {
  font-size: var(--mrsc-fs-meta);
  color: var(--mrsc-ink-soft);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.mrsc-widget .mrsc-meta-error {
  color: var(--mrsc-error);
}

/* Phone-with-prefix */
.mrsc-widget .mrsc-phone-wrap {
  display: flex;
  align-items: stretch;
  border: 0;
  border-radius: var(--mrsc-field-radius);
  background: var(--mrsc-field-bg);
  transition: background-color .15s, box-shadow .15s;
  overflow: hidden;
}
.mrsc-widget .mrsc-phone-wrap:hover {
  background: var(--mrsc-field-bg-hover);
}
.mrsc-widget .mrsc-phone-wrap:focus-within {
  background: var(--mrsc-field-bg-focus);
  box-shadow: inset 0 0 0 2px var(--mrsc-primary);
}
.mrsc-widget .mrsc-phone-wrap > .mrsc-phone-prefix {
  display: flex;
  align-items: center;
  padding: 0 4px 0 18px;
  color: var(--mrsc-ink-soft);
  font-size: var(--mrsc-fs-body);
  font-weight: 500;
}
.mrsc-widget .mrsc-phone-wrap > input {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding-left: 12px;
  flex: 1;
}
.mrsc-widget .mrsc-phone-wrap > input:hover,
.mrsc-widget .mrsc-phone-wrap > input:focus {
  background: transparent;
  box-shadow: none;
  border-color: transparent;
}

.mrsc-widget .mrsc-checkbox {
  display: flex;
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
  font-weight: 400;
  font-size: var(--mrsc-fs-meta);
  letter-spacing: 0;
  text-transform: none;
  color: var(--mrsc-ink);
  cursor: pointer;
  margin: 14px 0;
}
.mrsc-widget .mrsc-checkbox input { width: 18px; height: 18px; accent-color: var(--mrsc-primary); }

/* ---------- Member cards ---------- */
.mrsc-widget .mrsc-members { display: flex; flex-direction: column; gap: 24px; }

.mrsc-widget .mrsc-member-card {
  border: 1px solid var(--mrsc-line);
  border-radius: var(--mrsc-block-radius);
  padding: 24px;
  background: #fff;
  margin: 0;
}
.mrsc-widget .mrsc-member-card legend {
  font-family: var(--mrsc-font-body);
  font-weight: 700;
  padding: 0;
  margin-bottom: 16px;
  color: var(--mrsc-ink-soft);
  font-size: var(--mrsc-fs-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.mrsc-widget .mrsc-member-label {
  text-transform: uppercase;
}
/* Secondary text link - not an eyebrow, so no uppercase / heavy weight.
   Sits in the legend bar opposite the "Member N" label. */
.mrsc-widget .mrsc-remove {
  font-family: var(--mrsc-font-body);
  font-size: var(--mrsc-fs-meta);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mrsc-ink-soft);
  background: none;
  border: 0;
  padding: 4px 8px;
  cursor: pointer;
}
.mrsc-widget .mrsc-remove:hover {
  color: var(--mrsc-error);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Holder toggle chip */
.mrsc-widget .mrsc-holder-toggle {
  margin: 0 0 16px;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid var(--mrsc-line);
  border-radius: var(--mrsc-block-radius);
  font-size: var(--mrsc-fs-meta);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mrsc-ink);
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.mrsc-widget .mrsc-holder-toggle.checked {
  background: var(--mrsc-bg);
  border-color: var(--mrsc-primary);
}
.mrsc-widget .mrsc-holder-toggle small {
  color: var(--mrsc-ink-soft);
  font-size: var(--mrsc-fs-meta);
}

/* Price preview */
.mrsc-widget .mrsc-price-preview {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--mrsc-line);
  font-size: var(--mrsc-fs-body);
  color: var(--mrsc-ink-soft);
  font-variant-numeric: tabular-nums;
}
.mrsc-widget .mrsc-price-preview .mrsc-price-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
}
.mrsc-widget .mrsc-price-preview .mrsc-price-row strong {
  color: var(--mrsc-ink);
  font-weight: 700;
}
.mrsc-widget .mrsc-price-preview .mrsc-price-annual strong { color: var(--mrsc-primary); }

/* ---------- Callouts - shared base for warning/info/error blocks ---------- */
.mrsc-widget .mrsc-callout,
.mrsc-widget .mrsc-waitlist-hint,
.mrsc-widget .mrsc-done-waitlist {
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: var(--mrsc-block-radius);
  font-size: var(--mrsc-fs-meta);
  line-height: 1.5;
}
.mrsc-widget .mrsc-callout--warn,
.mrsc-widget .mrsc-waitlist-hint,
.mrsc-widget .mrsc-done-waitlist {
  background: #FFF7E8;
  border: 1px solid #F0C200;
  color: #5C3F00;
}
.mrsc-widget .mrsc-callout strong,
.mrsc-widget .mrsc-waitlist-hint strong,
.mrsc-widget .mrsc-done-waitlist strong {
  display: block;
  font-size: var(--mrsc-fs-meta);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8A5A00;
  margin-bottom: 4px;
}

/* ---------- Uniforms ---------- */
.mrsc-widget .mrsc-uniforms-section { margin-bottom: 24px; }
.mrsc-widget .mrsc-uniforms-section h3 {
  font-family: var(--mrsc-font-body);
  margin: 0 0 10px;
  font-size: var(--mrsc-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mrsc-ink-soft);
}
.mrsc-widget .mrsc-uniforms {
  display: flex;
  flex-direction: column;
}
.mrsc-widget .mrsc-uniform-line {
  display: grid;
  grid-template-columns: 1.6fr .8fr 90px 110px;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--mrsc-line);
}
.mrsc-widget .mrsc-uniform-line:last-child { border-bottom: 1px solid var(--mrsc-line); }
.mrsc-widget .mrsc-uniform-line.readonly { color: var(--mrsc-ink); }
.mrsc-widget .mrsc-uniform-name { font-weight: 600; font-size: var(--mrsc-fs-body); color: var(--mrsc-ink); }
.mrsc-widget .mrsc-uniform-type { font-size: var(--mrsc-fs-meta); color: var(--mrsc-ink-soft); }
.mrsc-widget .mrsc-uniform-line input { width: 76px; font-size: var(--mrsc-fs-meta); padding: 8px 10px; text-align: center; }
.mrsc-widget .mrsc-uniform-price { font-size: var(--mrsc-fs-meta); text-align: right; color: var(--mrsc-ink); font-variant-numeric: tabular-nums; }
.mrsc-widget .mrsc-uniform-static { font-size: var(--mrsc-fs-meta); text-align: right; color: var(--mrsc-ink-soft); }

.mrsc-widget .mrsc-footnote {
  margin: 18px 0 0;
  font-size: var(--mrsc-fs-meta);
  color: var(--mrsc-ink-soft);
  font-style: italic;
  line-height: 1.5;
}

/* ---------- Review ---------- */
.mrsc-widget .mrsc-review { margin-bottom: 20px; }
.mrsc-widget .mrsc-review h3 {
  font-family: var(--mrsc-font-body);
  margin: 32px 0 12px;
  font-size: var(--mrsc-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mrsc-ink-soft);
}
/* ---------- Review page — Shopify-checkout summary pattern ---------- */

/* Order summary card. White, single hairline border, no tints. Line
   items stack with a thin divider between them; totals sit at the
   foot with one accent on the final due-today row. */
.mrsc-widget .mrsc-summary {
  margin: 0 0 32px;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--mrsc-line);
  border-radius: var(--mrsc-block-radius);
}
.mrsc-widget .mrsc-summary-title {
  font-family: var(--mrsc-font-display);
  margin: 0 0 20px;
  font-size: var(--mrsc-fs-lead);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--mrsc-ink-strong);
}

/* Each registered member or uniform sits as a single line: body on the
   left, price column on the right. Borders between lines only. */
.mrsc-widget .mrsc-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--mrsc-line);
}
.mrsc-widget .mrsc-line:first-of-type { border-top: 0; padding-top: 0; }
.mrsc-widget .mrsc-line-name {
  font-weight: 700;
  color: var(--mrsc-ink-strong);
  font-size: var(--mrsc-fs-body);
  line-height: 1.35;
}
.mrsc-widget .mrsc-line-variant {
  margin-top: 4px;
  font-size: var(--mrsc-fs-meta);
  color: var(--mrsc-ink-soft);
  line-height: 1.45;
}
.mrsc-widget .mrsc-line-flag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: var(--mrsc-field-bg);
  color: var(--mrsc-ink-soft);
  border-radius: 999px;
  vertical-align: middle;
  text-transform: lowercase;
}
.mrsc-widget .mrsc-line-flag-warn {
  background: rgba(232, 31, 118, 0.08);
  color: var(--mrsc-primary);
}
.mrsc-widget .mrsc-line-price {
  text-align: right;
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-self: start;
  white-space: nowrap;
}
.mrsc-widget .mrsc-line-amount {
  font-weight: 700;
  color: var(--mrsc-ink-strong);
  font-size: var(--mrsc-fs-body);
}
.mrsc-widget .mrsc-line-cycle {
  font-size: 12px;
  color: var(--mrsc-ink-soft);
}

/* Totals foot of the summary card. */
.mrsc-widget .mrsc-summary-totals {
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--mrsc-line);
  font-variant-numeric: tabular-nums;
}
.mrsc-widget .mrsc-summary-totals .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  font-size: var(--mrsc-fs-body);
}
.mrsc-widget .mrsc-summary-totals .row .label { color: var(--mrsc-ink-soft); }
.mrsc-widget .mrsc-summary-totals .row .value { color: var(--mrsc-ink); font-weight: 500; }
.mrsc-widget .mrsc-summary-totals .row.muted .value { color: var(--mrsc-ink-soft); }
.mrsc-widget .mrsc-summary-totals .row.total {
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--mrsc-line);
}
.mrsc-widget .mrsc-summary-totals .row.total .label {
  color: var(--mrsc-ink-strong);
  font-weight: 600;
  font-size: var(--mrsc-fs-body);
}
.mrsc-widget .mrsc-summary-totals .row.total .value {
  color: var(--mrsc-primary);
  font-family: var(--mrsc-font-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.01em;
  line-height: 1;
}

/* Quiet sections below the summary — account holder + payment details.
   Plain ink headings, no card chrome, generous vertical rhythm. */
.mrsc-widget .mrsc-section { margin: 0 0 32px; }
.mrsc-widget .mrsc-section-title {
  margin: 0 0 8px;
  font-family: var(--mrsc-font-display);
  font-size: var(--mrsc-fs-lead);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--mrsc-ink-strong);
}
.mrsc-widget .mrsc-section-lede {
  margin: 0 0 16px;
  color: var(--mrsc-ink-soft);
  font-size: var(--mrsc-fs-meta);
}
.mrsc-widget .mrsc-kv {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 10px 16px;
  margin: 0;
  font-size: var(--mrsc-fs-meta);
}
.mrsc-widget .mrsc-kv dt { color: var(--mrsc-ink-soft); }
.mrsc-widget .mrsc-kv dd {
  margin: 0;
  color: var(--mrsc-ink);
  font-weight: 500;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.mrsc-widget .mrsc-acct {
  font-family: Menlo, Consolas, monospace;
  background: var(--mrsc-field-bg);
  padding: 6px 12px;
  border-radius: var(--mrsc-field-radius);
  font-size: var(--mrsc-fs-meta);
  display: inline-block;
}

/* Compact KV grid on narrow viewports. */
@media (max-width: 560px) {
  .mrsc-widget .mrsc-kv { grid-template-columns: 1fr; gap: 4px; }
  .mrsc-widget .mrsc-kv dt { color: var(--mrsc-ink-soft); margin-top: 8px; font-size: 12px; }
  .mrsc-widget .mrsc-kv dt:first-of-type { margin-top: 0; }
  .mrsc-widget .mrsc-summary { padding: 20px; }
}

.mrsc-widget .mrsc-tcs {
  margin: 24px 0 12px;
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.mrsc-widget .mrsc-tcs summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--mrsc-ink-soft);
  font-size: var(--mrsc-fs-meta);
  list-style: none;
  text-decoration: underline;
  text-decoration-color: var(--mrsc-line);
  text-underline-offset: 4px;
}
.mrsc-widget .mrsc-tcs summary::-webkit-details-marker { display: none; }
.mrsc-widget .mrsc-tcs summary::before {
  content: "›";
  display: inline-block;
  margin-right: 8px;
  color: var(--mrsc-muted);
  transition: transform .15s;
}
.mrsc-widget .mrsc-tcs[open] summary::before {
  transform: rotate(90deg);
}
.mrsc-widget .mrsc-tcs h4 { margin: 14px 0 4px; font-size: var(--mrsc-fs-meta); color: var(--mrsc-ink); }
.mrsc-widget .mrsc-tcs p { margin: 0 0 8px; font-size: var(--mrsc-fs-meta); color: var(--mrsc-ink-soft); line-height: 1.55; }

/* ---------- Buttons ---------- */
.mrsc-widget .mrsc-actions {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
}
.mrsc-widget .mrsc-actions-stack { justify-content: flex-start; margin-top: 16px; }

.mrsc-widget .mrsc-btn {
  font-family: var(--mrsc-font-body);
  font-weight: 700;
  font-size: var(--mrsc-fs-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--mrsc-btn-padding-y) var(--mrsc-btn-padding-x);
  border-radius: var(--mrsc-field-radius);
  border: 1px solid var(--mrsc-line);
  background: #fff;
  color: var(--mrsc-ink);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
/* Default (secondary) button - slightly lighter than primary so Back/Skip
   reads as secondary, not equal-weight, in action rows. */
.mrsc-widget .mrsc-btn:not(.mrsc-btn-primary):not(.mrsc-btn-ghost) {
  padding: 14px 24px;
}
.mrsc-widget .mrsc-btn:hover { background: var(--mrsc-bg); }
.mrsc-widget .mrsc-btn-primary {
  background: var(--mrsc-primary);
  color: #fff;
  border-color: var(--mrsc-primary);
}
.mrsc-widget .mrsc-btn-primary:hover { background: var(--mrsc-primary-dark); border-color: var(--mrsc-primary-dark); color: #fff; }
.mrsc-widget .mrsc-btn-primary:disabled {
  background: var(--mrsc-muted);
  border-color: var(--mrsc-muted);
  color: #fff;
  cursor: not-allowed;
}
.mrsc-widget .mrsc-btn-ghost {
  background: transparent;
  color: var(--mrsc-primary);
  border-color: var(--mrsc-primary);
}
.mrsc-widget .mrsc-btn-ghost:hover { background: var(--mrsc-primary); color: #fff; }

/* ---------- Errors (banner fallback) ---------- */
.mrsc-widget .mrsc-error {
  margin: 16px 0;
  padding: 14px 18px;
  background: #FDF2F1;
  border: 1px solid #F1C7C5;
  border-radius: var(--mrsc-block-radius);
  font-size: var(--mrsc-fs-meta);
  color: var(--mrsc-error);
}
/* Soft variant for non-blocking informational messages like "still loading…" */
.mrsc-widget .mrsc-error.mrsc-error-soft {
  background: var(--mrsc-bg);
  border-color: var(--mrsc-line);
  color: var(--mrsc-ink-soft);
}

/* ---------- Spinner - used on disabled CTAs while in-flight ---------- */
.mrsc-widget .mrsc-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: mrsc-spin .7s linear infinite;
  vertical-align: -2px;
}
@keyframes mrsc-spin { to { transform: rotate(360deg); } }
/* Screen-reader-only text - accompanies the spinner so assistive tech still
   hears "Loading" / "Sending" while sighted users see just the icon. */
.mrsc-widget .mrsc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.mrsc-widget .mrsc-field-error {
  color: var(--mrsc-error);
  font-size: var(--mrsc-fs-meta);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  margin-top: 4px;
}
/* Flash highlight applied for ~1.4s when validation focuses an offending field. */
.mrsc-widget .mrsc-flash {
  outline: 2px solid var(--mrsc-primary);
  outline-offset: 2px;
  animation: mrsc-flash-pulse 1.4s ease-out;
}
@keyframes mrsc-flash-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(232, 31, 118, 0.4); }
  50%  { box-shadow: 0 0 0 6px rgba(232, 31, 118, 0.1); }
  100% { box-shadow: 0 0 0 0 rgba(232, 31, 118, 0); }
}

/* ---------- Done page ---------- */
.mrsc-widget .mrsc-done {
  padding: 0 0 40px;
}
.mrsc-widget .mrsc-done .mrsc-eyebrow { margin-bottom: 16px; }
.mrsc-widget .mrsc-done h2 {
  font-family: var(--mrsc-font-display);
  color: var(--mrsc-ink-strong);
  margin: 0 0 16px;
  font-size: var(--mrsc-fs-h2);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.mrsc-widget .mrsc-done p {
  color: var(--mrsc-ink-soft);
  font-size: var(--mrsc-fs-lead);
  line-height: 1.5;
  max-width: 60ch;
  margin: 0 0 12px;
}
.mrsc-widget .mrsc-done-recap {
  margin: 40px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--mrsc-line);
}
.mrsc-widget .mrsc-done-recap h3 {
  font-family: var(--mrsc-font-body);
  font-size: var(--mrsc-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mrsc-ink-soft);
  margin: 0 0 12px;
}

/* Done page - payment block (reference + total + bank) */
.mrsc-widget .mrsc-done-payment {
  margin: 32px 0 0;
  padding: 24px;
  background: var(--mrsc-bg);
  border: 1px solid var(--mrsc-line);
  border-radius: var(--mrsc-block-radius);
  text-align: left;
}
.mrsc-widget .mrsc-done-payment h3 {
  font-family: var(--mrsc-font-body);
  font-size: var(--mrsc-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mrsc-ink-soft);
  margin: 0 0 14px;
}
.mrsc-widget .mrsc-done-payment dl {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 8px 16px;
  margin: 0 0 18px;
  font-size: var(--mrsc-fs-meta);
}
.mrsc-widget .mrsc-done-payment dt { color: var(--mrsc-ink-soft); }
.mrsc-widget .mrsc-done-payment dd { margin: 0; color: var(--mrsc-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.mrsc-widget .mrsc-done-payment .mrsc-reference {
  color: var(--mrsc-primary);
  font-size: var(--mrsc-fs-lead);
  letter-spacing: 0.02em;
}
.mrsc-widget .mrsc-done-payment .mrsc-acct {
  font-family: Menlo, Consolas, monospace;
  background: var(--mrsc-field-bg);
  border: 0;
  padding: 6px 12px;
  border-radius: var(--mrsc-field-radius);
  font-size: var(--mrsc-fs-meta);
  font-weight: 400;
  display: inline-block;
  user-select: all;
  cursor: text;
}
.mrsc-widget .mrsc-done-payment .mrsc-payment-note {
  font-size: var(--mrsc-fs-meta);
  color: var(--mrsc-ink-soft);
  font-style: italic;
  margin: 0;
}
/* Done-page waitlist callout - base styles come from .mrsc-callout above.
   This block only overrides text-alignment (the done page is centered). */
.mrsc-widget .mrsc-done-waitlist {
  text-align: left;
}

/* Inline "tag" spans used in review and done summaries. Replaces inline
   style= attributes so the CSP can drop 'unsafe-inline' on style-src. */
.mrsc-widget .mrsc-tag,
.mrsc-widget .mrsc-tag-muted,
.mrsc-widget .mrsc-tag-accent,
.mrsc-widget .mrsc-tag-bold { font-style: normal; }
.mrsc-widget .mrsc-tag-muted  { color: var(--mrsc-muted); font-weight: 400; }
.mrsc-widget .mrsc-tag-accent { color: var(--mrsc-primary); }
.mrsc-widget .mrsc-tag-bold   { font-weight: 600; }
.mrsc-widget .mrsc-acct.mrsc-acct-accent { color: var(--mrsc-primary); }
.mrsc-widget .mrsc-bank-note  { margin-top: 0.75rem; }

/* "Copy" buttons on the Done page bank/reference rows. Compact + outline-only
   so they don't dominate the layout. */
.mrsc-widget .mrsc-copy {
  margin-left: 10px;
  padding: 6px 14px;
  font: inherit;
  font-size: var(--mrsc-fs-meta);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  color: var(--mrsc-ink);
  border: 1px solid var(--mrsc-line);
  border-radius: var(--mrsc-field-radius);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  vertical-align: middle;
}
.mrsc-widget .mrsc-copy:hover {
  background: var(--mrsc-ink);
  color: #fff;
  border-color: var(--mrsc-ink);
}
.mrsc-widget .mrsc-copy.copied {
  background: var(--mrsc-primary);
  color: #fff;
  border-color: var(--mrsc-primary);
}

/* ---------- Auto-save indicator ---------- */
.mrsc-widget .mrsc-save-indicator {
  position: fixed;
  bottom: 18px;
  right: 18px;
  background: var(--mrsc-ink);
  color: #fff;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: var(--mrsc-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s, transform .18s;
  pointer-events: none;
  z-index: 9999;
}
.mrsc-widget .mrsc-save-indicator.show {
  opacity: .95;
  transform: translateY(0);
}

/* ---------- DEV: skip-step floating button (remove before production) ---------- */
.mrsc-widget .mrsc-dev-skip {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 9999;
  background: var(--mrsc-ink);
  color: #fff;
  font-family: var(--mrsc-font-body);
  font-size: var(--mrsc-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity .15s;
}
.mrsc-widget .mrsc-dev-skip:hover { opacity: 1; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .mrsc-widget *,
  .mrsc-widget *::before,
  .mrsc-widget *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Print (for parents who print the done page) ---------- */
@media print {
  .mrsc-widget {
    background: #fff;
    color: #000;
    border: 0;
    max-width: 100%;
  }
  .mrsc-widget .mrsc-stepper,
  .mrsc-widget .mrsc-save-indicator,
  .mrsc-widget .mrsc-actions,
  .mrsc-widget .mrsc-dev-skip,
  .mrsc-widget [data-step]:not([data-step="done"]) {
    display: none !important;
  }
  .mrsc-widget .mrsc-main { padding: 16px 24px; }
  .mrsc-widget .mrsc-done-payment {
    background: #fff;
    border: 1px solid #000;
  }
  .mrsc-widget .mrsc-done-payment .mrsc-acct {
    background: #fff;
    border: 0;
    padding: 0;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .mrsc-widget .mrsc-main { padding: 40px 6% 60px; }
  .mrsc-widget .mrsc-stepper { padding: 0 6%; }
}
@media (max-width: 600px) {
  .mrsc-widget .mrsc-main { padding: 32px 20px 56px; }
  .mrsc-widget .mrsc-stepper { padding: 0 14px; }
  .mrsc-widget .mrsc-step h2 { font-size: 28px; }
  .mrsc-widget .mrsc-done h2 { font-size: 30px; }
  /* Mode chooser stacks vertically - 2 pill cards side-by-side gets too
     cramped under ~520px and the strong/small lines wrap weirdly. */
  .mrsc-widget .mrsc-mode { grid-template-columns: 1fr; gap: 12px; }
  .mrsc-widget .mrsc-form .mrsc-row,
  .mrsc-widget .mrsc-member-card .mrsc-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .mrsc-widget .mrsc-member-card { padding: 20px 16px; }
  .mrsc-widget .mrsc-uniform-line {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name  price"
      "type  qty";
    column-gap: 14px;
    row-gap: 4px;
  }
  .mrsc-widget .mrsc-uniform-name { grid-area: name; }
  .mrsc-widget .mrsc-uniform-type { grid-area: type; }
  .mrsc-widget .mrsc-uniform-line input { grid-area: qty; justify-self: end; }
  .mrsc-widget .mrsc-uniform-static,
  .mrsc-widget .mrsc-uniform-price { grid-area: price; }
  /* Stepper: horizontal scroll fallback at very narrow widths, with the
     scrollbar hidden so it doesn't look broken. The active step stays in
     view via auto-scroll (JS already calls scrollIntoView on goTo). */
  .mrsc-widget .mrsc-stepper { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .mrsc-widget .mrsc-stepper::-webkit-scrollbar { display: none; }
  .mrsc-widget .mrsc-stepper ol { height: 48px; min-width: max-content; justify-content: flex-start; padding: 0 8px; }
  .mrsc-widget .mrsc-stepper li { font-size: var(--mrsc-fs-eyebrow); }
  .mrsc-widget .mrsc-stepper li + li { margin-left: 14px; }
  .mrsc-widget .mrsc-stepper li + li::after { left: -10px; width: 6px; }
  .mrsc-widget .mrsc-actions { flex-direction: column-reverse; align-items: stretch; }
  .mrsc-widget .mrsc-actions .mrsc-btn { width: 100%; text-align: center; }
  /* Default secondary button (Back/Skip) takes full width too - override
     the desktop 14/24 padding to match the standard btn padding scale. */
  .mrsc-widget .mrsc-actions .mrsc-btn:not(.mrsc-btn-primary):not(.mrsc-btn-ghost) { padding: 14px 24px; }
  .mrsc-widget .mrsc-review-item { grid-template-columns: 1fr; gap: 6px; }
  .mrsc-widget .mrsc-review-item .price { text-align: left; }
  .mrsc-widget .mrsc-bank dl { grid-template-columns: 1fr; }
  /* Done payment block tightens up - 24px padding eats real estate on small phones */
  .mrsc-widget .mrsc-done-payment { padding: 20px 16px; margin-top: 24px; }
  .mrsc-widget .mrsc-done-payment dl { grid-template-columns: 1fr; gap: 4px 0; }
  .mrsc-widget .mrsc-done-payment dt { margin-top: 8px; }
  .mrsc-widget .mrsc-bank { padding: 20px 16px; }
  /* Copy buttons stack below the value on narrow widths so they don't get pushed off-screen */
  .mrsc-widget .mrsc-bank .mrsc-acct + .mrsc-copy,
  .mrsc-widget .mrsc-done-payment .mrsc-acct + .mrsc-copy {
    margin-left: 0;
    margin-top: 6px;
  }
  .mrsc-widget .mrsc-bank dd,
  .mrsc-widget .mrsc-done-payment dd { display: flex; flex-wrap: wrap; align-items: center; }
  /* Skip button doesn't overlap content as much - it floats over the action row */
  /* Move the dev-skip pill to top-right on mobile so it doesn't overlap the
     full-width action buttons that stack column-reverse at the bottom. */
  .mrsc-widget .mrsc-dev-skip {
    font-size: var(--mrsc-fs-eyebrow);
    padding: 8px 12px;
    top: 80px; bottom: auto; right: 12px; left: auto;
  }
}

/* ---------- Overflow guards - keep long content from breaking the layout ---------- */
.mrsc-widget .mrsc-acct {
  word-break: break-all;
  max-width: 100%;
}
.mrsc-widget .mrsc-review-item .name,
.mrsc-widget .mrsc-review-item .meta { word-break: break-word; }
.mrsc-widget select,
.mrsc-widget input { min-width: 0; }   /* lets grid children shrink below content size */

/* Programmatic focus (we move focus on goTo for screen readers) shouldn't
   show a visible outline — only keyboard nav should. Applied to any
   element with explicit tabindex=-1, plus headings. */
.mrsc-widget h2:focus:not(:focus-visible),
.mrsc-widget h3:focus:not(:focus-visible),
.mrsc-widget [tabindex="-1"]:focus:not(:focus-visible) {
  outline: none;
}

/* Explicit focus indicators for elements whose native ring CSS suppresses. */
.mrsc-widget .mrsc-tcs summary:focus-visible,
.mrsc-widget .mrsc-copy:focus-visible,
.mrsc-widget .mrsc-dev-skip:focus-visible,
.mrsc-widget .mrsc-remove:focus-visible {
  outline: 2px solid var(--mrsc-primary);
  outline-offset: 2px;
}
.mrsc-widget .mrsc-dev-skip:focus-visible { opacity: 1; }

/* High-contrast / Windows forced-colors fallback. Brand pinks resolve to
   system colours; keep the dots + focus rings perceivable via system
   tokens. */
@media (forced-colors: active) {
  .mrsc-widget .mrsc-stepper li::before { forced-color-adjust: none; background: CanvasText; }
  .mrsc-widget .mrsc-stepper li.active::before { background: Highlight; }
  .mrsc-widget .mrsc-mode .mrsc-radio.selected { box-shadow: inset 0 0 0 2px Highlight; }
  .mrsc-widget .mrsc-btn-primary:disabled { background: GrayText; border-color: GrayText; }
  .mrsc-widget :focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
}