/* =========================================================================
   SBW × WPFORMS — print-derived restyle
   The State of Black Wealth in Sacramento

   Visual target: css/form.css (the prototype's bespoke #register form).
   Square corners, 1px rules, uppercase tracked labels, 2px red focus with a
   blush wash, red selectable cards, 45° corner notches.

   SCOPE — every selector starts with `.sbw-page`. The working prefix is
   `.sbw-page .wpforms-container .wpforms-form`: four classes, which
   out-specifies WPForms' own `div.wpforms-container-full .wpforms-form .x`
   (three classes + one element). That is what keeps `!important` rare here.

   MARKUP MODES — WPForms renders "classic" or "modern" markup. Blocks are
   tagged [both] / [classic] / [modern]. Classes tagged ASSUMED could not be
   confirmed in the public docs; those rules are additive only, so nothing
   breaks if the class turns out not to exist.

   Properties are packed onto shared lines to keep the file compact.
   ========================================================================= */

/* --- 1. Container + box model  [both] ----------------------------------- */

.sbw-page .wpforms-container {
  --sbw-notch: 0.85rem;                            /* depth of the 45° cut */
  max-width: 100%; margin: 0;
  color: var(--ink); font-family: var(--font-body);
}
.sbw-page .wpforms-container, .sbw-page .wpforms-container *,
.sbw-page .wpforms-container *::before,
.sbw-page .wpforms-container *::after { box-sizing: border-box; }

.sbw-page .wpforms-container .wpforms-form .wpforms-title {
  margin: 0 0 0.75rem; color: var(--ink);
  font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: 1; text-transform: uppercase; letter-spacing: 0.01em;
}
.sbw-page .wpforms-container .wpforms-form .wpforms-description {
  margin: 0 0 2rem; max-width: 62ch;
  font-size: 1rem; line-height: 1.6; color: var(--ink-soft);
}

/* --- 2. Field rhythm  [both] ------------------------------------------- */

.sbw-page .wpforms-container .wpforms-form .wpforms-field {
  padding: 0; margin: 0 0 clamp(1.15rem, 2.4vw, 1.35rem);
  min-width: 0; clear: both;
}
.sbw-page .wpforms-container .wpforms-form .wpforms-field:last-of-type { margin-bottom: 0; }

/* --- 3. Labels, sublabels, descriptions, required mark  [both] --------- */

/* !important on size/weight/colour: WPForms' block style controls (Label
   Size, Label Colour) emit ID-scoped rules like
   `#wpforms-123 .wpforms-field-label{…}` that no class selector can beat. */
.sbw-page .wpforms-container .wpforms-form .wpforms-field-label {
  display: block; margin: 0 0 0.5rem; font-family: var(--font-body);
  font-size: 0.76rem !important; font-weight: 700 !important;
  color: var(--ink) !important;
  line-height: 1.35; text-transform: uppercase; letter-spacing: 0.1em;
}

/* Inline label (single checkbox / GDPR) reads as sentence text, not a label. */
.sbw-page .wpforms-container .wpforms-form .wpforms-field-label-inline {
  display: inline-block; color: var(--ink);
  font-size: 0.92rem; font-weight: 600; line-height: 1.45;
  text-transform: none; letter-spacing: 0;
}
.sbw-page .wpforms-container .wpforms-form .wpforms-field-sublabel {
  display: block; margin: 0.4rem 0 0; color: var(--ink-soft);
  font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
}
/* Sub-labels positioned above render before the input. */
.sbw-page .wpforms-container .wpforms-form .wpforms-field-sublabel.before { margin: 0 0 0.35rem; }

.sbw-page .wpforms-container .wpforms-form .wpforms-field-description {
  margin: 0.5rem 0 0; max-width: 62ch;
  font-size: 0.82rem; line-height: 1.55; color: var(--ink-soft);
}
.sbw-page .wpforms-container .wpforms-form .wpforms-required-label { color: var(--red); font-weight: 700; }

/* --- 4. Inputs, textarea, select  [both] ------------------------------- */
/* font-size is a hard 16px so iOS Safari never zooms on focus. */

.sbw-page .wpforms-container .wpforms-form input[type="text"],
.sbw-page .wpforms-container .wpforms-form input[type="email"],
.sbw-page .wpforms-container .wpforms-form input[type="tel"],
.sbw-page .wpforms-container .wpforms-form input[type="url"],
.sbw-page .wpforms-container .wpforms-form input[type="number"],
.sbw-page .wpforms-container .wpforms-form input[type="password"],
.sbw-page .wpforms-container .wpforms-form input[type="date"],
.sbw-page .wpforms-container .wpforms-form textarea,
.sbw-page .wpforms-container .wpforms-form select {
  width: 100%; max-width: 100%; min-height: 48px; padding: 0.8rem 0.95rem;
  border: 1px solid var(--rule);
  /* !important: the block editor's "Field Border Radius" control writes an
     ID-scoped rule plus a --wpforms-field-border-radius custom property. */
  border-radius: 0 !important;
  background-color: var(--white); color: var(--ink);
  font-family: var(--font-body); font-size: 16px; line-height: 1.35;
  box-shadow: none;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}
.sbw-page .wpforms-container .wpforms-form textarea { min-height: 8.5rem; resize: vertical; }
.sbw-page .wpforms-container .wpforms-form input::placeholder,
.sbw-page .wpforms-container .wpforms-form textarea::placeholder { color: var(--ink-soft); opacity: 0.65; }

/* Classic <select>: strip platform chrome, draw the design's red chevron. */
.sbw-page .wpforms-container .wpforms-form select {
  appearance: none; -webkit-appearance: none; padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M0 0h12L6 8z' fill='%23a60404'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
  background-size: 11px 7px;
}

/* Modern dropdown (Choices.js wrapper). [modern]
   !important: same border-radius control noted above. */
.sbw-page .wpforms-container .wpforms-form .choices__inner {
  min-height: 48px; padding: 0.55rem 0.95rem; border: 1px solid var(--rule);
  border-radius: 0 !important; background: var(--white); font-size: 16px;
}
.sbw-page .wpforms-container .wpforms-form .choices__list--dropdown { border: 1px solid var(--ink); border-radius: 0; }

/* Focus: reads as a 2px red border + blush wash, with no layout shift.
   !important: modern markup applies --wpforms-field-border-color through
   ID-scoped `:focus` rules that would otherwise win. */
.sbw-page .wpforms-container .wpforms-form input:focus-visible,
.sbw-page .wpforms-container .wpforms-form textarea:focus-visible,
.sbw-page .wpforms-container .wpforms-form select:focus-visible,
.sbw-page .wpforms-container .wpforms-form .choices.is-focused .choices__inner {
  outline: none;
  border-color: var(--red) !important;
  box-shadow: inset 0 0 0 1px var(--red) !important;
  background-color: var(--blush) !important;
}

/* Fallback for engines that fire :focus but not :focus-visible when WPForms
   programmatically focuses the first invalid field. Never left bare. */
.sbw-page .wpforms-container .wpforms-form input:focus,
.sbw-page .wpforms-container .wpforms-form textarea:focus,
.sbw-page .wpforms-container .wpforms-form select:focus { outline: none; border-color: var(--red); }

.sbw-page .wpforms-container .wpforms-form input:disabled,
.sbw-page .wpforms-container .wpforms-form textarea:disabled,
.sbw-page .wpforms-container .wpforms-form select:disabled {
  background-color: var(--blush); color: var(--ink-soft);
  border-style: dashed; cursor: not-allowed;
}

/* WPForms width classes may size the field, but never overflow the column. */
.sbw-page .wpforms-container .wpforms-form .wpforms-field-small,
.sbw-page .wpforms-container .wpforms-form .wpforms-field-medium,
.sbw-page .wpforms-container .wpforms-form .wpforms-field-large { max-width: 100%; }

/* --- 5. Radio / checkbox lists  [both] --------------------------------- */
/* Native controls stay in the flow and focusable (accent-color carries the
   brand red), so WPForms' validation JS and screen readers keep working. */

.sbw-page .wpforms-container .wpforms-form .wpforms-field-radio ul,
.sbw-page .wpforms-container .wpforms-form .wpforms-field-checkbox ul,
.sbw-page .wpforms-container .wpforms-form .wpforms-field-payment-checkbox ul,
.sbw-page .wpforms-container .wpforms-form .wpforms-field-gdpr-checkbox ul { list-style: none; margin: 0; padding: 0; }

/* !important on padding/border-bottom: WPForms' own stylesheet carries
   `div.wpforms-container-full .wpforms-form ul, … ul li { background:none
   !important; border:0 !important; margin:0 !important; padding:0
   !important; }` — a blanket reset aimed at ul/li specifically (not just the
   unscoped `*` reset in §1, which normal specificity already beats). Every
   background/border/padding declared on a `ul`/`ul li` selector in this file
   needs `!important` to survive it; declarations on other elements don't. */
.sbw-page .wpforms-container .wpforms-form .wpforms-field-radio ul li,
.sbw-page .wpforms-container .wpforms-form .wpforms-field-checkbox ul li,
.sbw-page .wpforms-container .wpforms-form .wpforms-field-payment-checkbox ul li,
.sbw-page .wpforms-container .wpforms-form .wpforms-field-gdpr-checkbox ul li {
  display: flex; align-items: flex-start; gap: 0.7rem;
  min-height: 44px;                                        /* tap target */
  margin: 0; padding: 0.35rem 0 !important; border-bottom: 1px solid var(--rule) !important;
}
.sbw-page .wpforms-container .wpforms-form .wpforms-field-radio ul li:last-child,
.sbw-page .wpforms-container .wpforms-form .wpforms-field-checkbox ul li:last-child,
.sbw-page .wpforms-container .wpforms-form .wpforms-field-payment-checkbox ul li:last-child,
.sbw-page .wpforms-container .wpforms-form .wpforms-field-gdpr-checkbox ul li:last-child { border-bottom: 0; }

.sbw-page .wpforms-container .wpforms-form input[type="radio"],
.sbw-page .wpforms-container .wpforms-form input[type="checkbox"] {
  flex: 0 0 auto; width: 20px; height: 20px; min-height: 0;
  margin: 0.6rem 0 0; padding: 0; accent-color: var(--red); cursor: pointer;
}
.sbw-page .wpforms-container .wpforms-form input[type="radio"]:focus-visible,
.sbw-page .wpforms-container .wpforms-form input[type="checkbox"]:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

.sbw-page .wpforms-container .wpforms-form .wpforms-field-radio ul li label,
.sbw-page .wpforms-container .wpforms-form .wpforms-field-checkbox ul li label,
.sbw-page .wpforms-container .wpforms-form .wpforms-field-gdpr-checkbox ul li label {
  display: block; padding: 0.5rem 0; color: var(--ink); cursor: pointer;
  font-size: 0.95rem; font-weight: 600; line-height: 1.45;
  text-transform: none; letter-spacing: 0;
}

/* Icon / image choices. [modern] `.wpforms-icon-choices` and
   `.wpforms-image-choices` are ASSUMED; only `.wpforms-image-choices-item`
   and `li.wpforms-selected` are confirmed in the docs. Additive only. */
.sbw-page .wpforms-container .wpforms-form .wpforms-icon-choices .wpforms-icon-choices-item label,
.sbw-page .wpforms-container .wpforms-form .wpforms-image-choices .wpforms-image-choices-item label {
  border-radius: 0; border-color: var(--rule); background: var(--white);
}
.sbw-page .wpforms-container .wpforms-form .wpforms-icon-choices .wpforms-selected label,
.sbw-page .wpforms-container .wpforms-form .wpforms-image-choices .wpforms-selected label {
  border-color: var(--red); background: var(--blush); color: var(--red-deep);
}

/* --- 6. Payment "Multiple Items" → selectable tier cards  [both] ------- */
/* Modelled on .tier-chip / .reg-pkg. The <li> carries the card; the radio
   stays visible so the control never loses its semantics. */

.sbw-page .wpforms-container .wpforms-form .wpforms-field-payment-multiple ul {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem; list-style: none; margin: 0; padding: 0;
}
/* Overrides the shared list-item rule in §5.
   !important on padding/border/background: see the §5 note — WPForms'
   `ul, ul li { background:none!important; border:0!important;
   padding:0!important; }` reset otherwise leaves every one of these cards
   borderless, backgroundless, and unpadded regardless of this selector's
   specificity, since `!important` beats specificity outright. */
.sbw-page .wpforms-container .wpforms-form .wpforms-field-payment-multiple ul li {
  position: relative; display: flex; align-items: flex-start; gap: 0.7rem;
  min-width: 0; padding: 1.05rem 1.15rem !important;
  border: 1px solid var(--rule) !important; border-radius: 0; background: var(--white) !important;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.sbw-page .wpforms-container .wpforms-form .wpforms-field-payment-multiple ul li:hover { border-color: var(--ink) !important; }

.sbw-page .wpforms-container .wpforms-form .wpforms-field-payment-multiple ul li label {
  display: block; flex: 1 1 auto; min-width: 0; padding: 0.25rem 0;
  font-family: var(--font-display); font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 400; line-height: 1.15; letter-spacing: 0.01em;
  text-transform: uppercase; color: var(--ink);
  cursor: pointer; overflow-wrap: break-word;
}

/* WPForms appends the formatted amount inside the label. The class name is
   ASSUMED; the bare `span` selector is the classic-markup fallback. */
.sbw-page .wpforms-container .wpforms-form .wpforms-field-payment-multiple ul li label .wpforms-payment-price,
.sbw-page .wpforms-container .wpforms-form .wpforms-field-payment-multiple ul li label span {
  display: block; margin-top: 0.3rem; font-family: var(--font-display);
  font-size: clamp(1.3rem, 3vw, 1.7rem); line-height: 1; color: var(--red-deep);
}

/* Selected: `:has()` covers both markup modes; `li.wpforms-selected` is the
   confirmed class WPForms' JS toggles on choice items. */
.sbw-page .wpforms-container .wpforms-form .wpforms-field-payment-multiple ul li:has(input:checked),
.sbw-page .wpforms-container .wpforms-form .wpforms-field-payment-multiple ul li.wpforms-selected {
  border-color: var(--red) !important; border-width: 2px !important; background: var(--blush) !important;
  padding: calc(1.05rem - 1px) calc(1.15rem - 1px) !important;      /* no layout shift */
}

/* 45° corner flag on the selected card — the design's signature mark. */
.sbw-page .wpforms-container .wpforms-form .wpforms-field-payment-multiple ul li:has(input:checked)::after,
.sbw-page .wpforms-container .wpforms-form .wpforms-field-payment-multiple ul li.wpforms-selected::after {
  content: ""; position: absolute; top: 0; right: 0; width: 26px; height: 26px;
  background: var(--red); clip-path: polygon(100% 0, 100% 100%, 0 0);
}
/* Focus ring on the whole card when its radio takes keyboard focus. */
.sbw-page .wpforms-container .wpforms-form .wpforms-field-payment-multiple ul li:has(input:focus-visible) { outline: 3px solid var(--red); outline-offset: 3px; }

/* Payment total  [both] */
.sbw-page .wpforms-container .wpforms-form .wpforms-field-payment-total {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 0.75rem; padding: 1.05rem 1.25rem;
  border-top: 2px solid var(--ink); background: var(--blush);
}
.sbw-page .wpforms-container .wpforms-form .wpforms-field-payment-total .wpforms-payment-total {
  font-family: var(--font-display); font-size: clamp(1.5rem, 3.5vw, 2rem);
  line-height: 1; color: var(--red-deep); white-space: nowrap;
}

/* --- 7. HTML / Content / Divider / Page indicator  [both] -------------- */

/* The design's "note" treatment: blush block with a red left rule. */
.sbw-page .wpforms-container .wpforms-form .wpforms-field-html,
.sbw-page .wpforms-container .wpforms-form .wpforms-field-content {
  padding: 1.1rem 1.25rem; background: var(--blush);
  border-left: 4px solid var(--red);
  font-size: 0.95rem; line-height: 1.55; color: var(--ink-soft);
}
.sbw-page .wpforms-container .wpforms-form .wpforms-field-html strong,
.sbw-page .wpforms-container .wpforms-form .wpforms-field-content strong { color: var(--ink); }

/* Section divider — the numbered-legend treatment: heavy ink rule + caps. */
.sbw-page .wpforms-container .wpforms-form .wpforms-field-divider {
  margin-top: clamp(2rem, 4vw, 2.75rem); padding-top: 1.4rem;
  border-top: 2px solid var(--ink);
}
/* !important: same ID-scoped label rules described in §3. */
.sbw-page .wpforms-container .wpforms-form .wpforms-field-divider .wpforms-field-label {
  font-family: var(--font-display) !important; font-weight: 400 !important;
  font-size: clamp(1.05rem, 2.4vw, 1.4rem) !important;
  color: var(--red) !important; letter-spacing: 0.02em; line-height: 1;
}
.sbw-page .wpforms-container .wpforms-form .wpforms-page-indicator {
  margin: 0 0 2rem; padding-bottom: 1rem;
  border-bottom: 2px solid var(--ink); background: none;
  font-size: 0.74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-soft);
}
.sbw-page .wpforms-container .wpforms-form .wpforms-page-indicator-page-title,
.sbw-page .wpforms-container .wpforms-form .wpforms-page-indicator-steps { color: var(--red-deep); }

/* --- 8. Submit + page buttons → .btn.btn--primary  [both] -------------- */

.sbw-page .wpforms-container .wpforms-form .wpforms-submit-container {
  margin-top: clamp(1.75rem, 3vw, 2.5rem); padding-top: 1.5rem;
  border-top: 2px solid var(--ink); text-align: left;
}

/* !important on colour/border/radius: WPForms' block "Button" controls emit
   ID-scoped background/border/colour rules, and its own stylesheet sets a
   radius on `div.wpforms-container-full .wpforms-form button[type=submit]`. */
.sbw-page .wpforms-container .wpforms-form button.wpforms-submit,
.sbw-page .wpforms-container .wpforms-form button[type="submit"],
.sbw-page .wpforms-container .wpforms-form input[type="submit"],
.sbw-page .wpforms-container .wpforms-form .wpforms-page-button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.7rem; width: 100%; min-height: 56px; padding: 0.95rem 1.9rem;
  border: 2px solid var(--red) !important; border-radius: 0 !important;
  background-color: var(--red) !important; color: var(--white) !important;
  font-family: var(--font-body); font-size: 0.9375rem; font-weight: 700;
  line-height: 1.25; letter-spacing: 0.06em;
  text-transform: uppercase; text-align: center; cursor: pointer;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease),
    transform 0.18s var(--ease);
  /* Signature bottom-right corner notch, matching .btn. */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--sbw-notch)),
    calc(100% - var(--sbw-notch)) 100%, 0 100%);
}
@media (min-width: 620px) {
  .sbw-page .wpforms-container .wpforms-form button[type="submit"],
  .sbw-page .wpforms-container .wpforms-form input[type="submit"] { width: auto; min-width: 320px; }
}

/* !important: pairs with the base button rule above. */
.sbw-page .wpforms-container .wpforms-form button[type="submit"]:hover,
.sbw-page .wpforms-container .wpforms-form input[type="submit"]:hover,
.sbw-page .wpforms-container .wpforms-form .wpforms-page-button:hover {
  transform: translateY(-2px);
  background-color: var(--red-deep) !important; border-color: var(--red-deep) !important;
}

/* clip-path clips any outline, so the focus indicator has to be inset. */
.sbw-page .wpforms-container .wpforms-form button[type="submit"]:focus-visible,
.sbw-page .wpforms-container .wpforms-form input[type="submit"]:focus-visible,
.sbw-page .wpforms-container .wpforms-form .wpforms-page-button:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--white), inset 0 0 0 6px var(--red-deep);
}
.sbw-page .wpforms-container .wpforms-form button[type="submit"]:disabled { opacity: 0.55; transform: none; cursor: not-allowed; }

/* Previous-page button reads as the ghost variant.
   !important: pairs with the base button rule above. */
.sbw-page .wpforms-container .wpforms-form .wpforms-page-button.wpforms-page-prev { background-color: transparent !important; color: var(--red) !important; }

/* --- 9. Error states -------------------------------------------------- */
/* `label.wpforms-error` is classic; `em.wpforms-error` is modern.  [both]
   !important on colour: WPForms hardcodes `color:#d63637` on
   `div.wpforms-container-full .wpforms-form label.wpforms-error`. */
.sbw-page .wpforms-container .wpforms-form label.wpforms-error,
.sbw-page .wpforms-container .wpforms-form em.wpforms-error {
  display: block; margin: 0.45rem 0 0; padding-left: 0.85rem;
  border-left: 3px solid var(--red); font-family: var(--font-body);
  font-size: 0.82rem; font-style: normal; font-weight: 600; line-height: 1.4;
  text-transform: none; letter-spacing: 0; color: var(--red-deep) !important;
}

/* !important: overrides WPForms' own #d63637 error border on the control. */
.sbw-page .wpforms-container .wpforms-form input.wpforms-error,
.sbw-page .wpforms-container .wpforms-form textarea.wpforms-error,
.sbw-page .wpforms-container .wpforms-form select.wpforms-error,
.sbw-page .wpforms-container .wpforms-form .wpforms-has-error input,
.sbw-page .wpforms-container .wpforms-form .wpforms-has-error textarea,
.sbw-page .wpforms-container .wpforms-form .wpforms-has-error select {
  border-color: var(--red) !important; box-shadow: inset 3px 0 0 var(--red);
}

/* Top-of-form error summary / alert. */
.sbw-page .wpforms-container .wpforms-error-container,
.sbw-page .wpforms-container .wpforms-form .wpforms-error-alert {
  padding: 1.1rem 1.25rem; margin-bottom: 1.75rem;
  border: 1px solid var(--red); border-left: 6px solid var(--red);
  background: var(--blush); color: var(--red-deep);
  font-size: 0.9rem; line-height: 1.55;
}

/* --- 10. Confirmation message  [both] --------------------------------- */
/* Rendered inside .wpforms-container on AJAX submit, as a sibling otherwise
   — hence the second, container-free selector. */
.sbw-page .wpforms-container .wpforms-confirmation-container-full,
.sbw-page .wpforms-confirmation-container-full {
  margin: 0; padding: clamp(1.5rem, 4vw, 2.75rem);
  border: 1px solid var(--ink); border-left: 6px solid var(--red);
  border-radius: 0; background: var(--blush); color: var(--ink);
  font-family: var(--font-body); font-size: 1rem; line-height: 1.6;
}
.sbw-page .wpforms-confirmation-container-full > :first-child { margin-top: 0; }
.sbw-page .wpforms-confirmation-container-full h2,
.sbw-page .wpforms-confirmation-container-full h3 {
  font-family: var(--font-display); font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.01em; color: var(--ink);
}

/* --- 11. Form sitting on a var(--blush) section ----------------------- */
/* White inputs still read, but the blush note/total/selected blocks would
   disappear into the background, so they flip to white. */
.sbw-page .sbw-section--blush .wpforms-container .wpforms-form .wpforms-field-html,
.sbw-page .sbw-section--blush .wpforms-container .wpforms-form .wpforms-field-content,
.sbw-page .sbw-section--blush .wpforms-container .wpforms-form .wpforms-field-payment-total,
.sbw-page .sbw-section--blush .wpforms-container .wpforms-error-container,
.sbw-page .sbw-section--blush .wpforms-confirmation-container-full { background: var(--white); }

/* !important: must outrank the (also-!important, see §6) selected-card
   background above; the extra `.sbw-section--blush` class keeps this one
   more specific, so !important-vs-!important still resolves correctly. */
.sbw-page .sbw-section--blush .wpforms-container .wpforms-form .wpforms-field-payment-multiple ul li:has(input:checked),
.sbw-page .sbw-section--blush .wpforms-container .wpforms-form .wpforms-field-payment-multiple ul li.wpforms-selected { background: var(--white) !important; }

/* !important: pairs with the focus rule in §4. */
.sbw-page .sbw-section--blush .wpforms-container .wpforms-form input:focus-visible,
.sbw-page .sbw-section--blush .wpforms-container .wpforms-form textarea:focus-visible,
.sbw-page .sbw-section--blush .wpforms-container .wpforms-form select:focus-visible { background-color: var(--white) !important; }

/* --- 12. Responsive — no horizontal overflow down to 320px ------------ */

@media (max-width: 560px) {
  /* Cards single-column; also neutralises WPForms' inline / multi-column
     choice layouts, which float list items. */
  .sbw-page .wpforms-container .wpforms-form .wpforms-field-payment-multiple ul { grid-template-columns: minmax(0, 1fr); }
  .sbw-page .wpforms-container .wpforms-form .wpforms-field-radio ul li,
  .sbw-page .wpforms-container .wpforms-form .wpforms-field-checkbox ul li,
  .sbw-page .wpforms-container .wpforms-form .wpforms-field-payment-multiple ul li { display: flex; float: none; width: 100%; }
}
@media (max-width: 380px) {
  .sbw-page .wpforms-container .wpforms-form .wpforms-field-payment-multiple ul li { padding: 0.9rem; }
  .sbw-page .wpforms-container .wpforms-form .wpforms-field-payment-total { padding: 0.9rem 1rem; }
  .sbw-page .wpforms-container .wpforms-form button[type="submit"] { padding-inline: 1.1rem; letter-spacing: 0.04em; }
}

/* --- 13. Reduced motion ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .sbw-page .wpforms-container .wpforms-form input,
  .sbw-page .wpforms-container .wpforms-form textarea,
  .sbw-page .wpforms-container .wpforms-form select,
  .sbw-page .wpforms-container .wpforms-form .wpforms-field-payment-multiple ul li,
  .sbw-page .wpforms-container .wpforms-form button[type="submit"],
  .sbw-page .wpforms-container .wpforms-form .wpforms-page-button { transition: none; }

  .sbw-page .wpforms-container .wpforms-form button[type="submit"]:hover,
  .sbw-page .wpforms-container .wpforms-form .wpforms-page-button:hover { transform: none; }
}

/* --- 15. Multi-column rows  [both] ---------------------------------------
   The Name / Address fields wrap their inputs in .wpforms-field-row with
   .wpforms-field-row-block children that WPForms lays out using floats and
   percentage widths. Grid is steadier and matches .reg-field-row in the
   prototype's own form CSS. auto-fit collapses empty tracks, so a one-block
   row stays single-column without needing :has(). */

.sbw-page .wpforms-container .wpforms-form .wpforms-field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: 0 clamp(0.75rem, 2vw, 1.25rem);
}

/* WPForms' own stylesheet adds `.wpforms-field-row::before { content:"";
   display:table; }` — a clearfix hack for its native float-based layout.
   In a grid container that generated box becomes a real grid item (grid,
   like flex, lays out ::before/::after same as any other child), so the row
   silently gets 3 items instead of 2 and the auto-placement algorithm wraps
   the second field block onto its own line. Grid doesn't use floats, so the
   clearfix serves no purpose here — drop it from layout entirely. */
.sbw-page .wpforms-container .wpforms-form .wpforms-field-row::before { display: none; }

.sbw-page .wpforms-container .wpforms-form .wpforms-field-row-block {
  /* !important x4: WPForms sets float + width + padding-right inline-ish on
     these blocks to build its own two-up layout. Grid owns the columns now. */
  float: none !important;
  width: auto !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
}

/* Sublabels sit under their own input, not the row */
.sbw-page .wpforms-container .wpforms-form .wpforms-field-row-block .wpforms-field-sublabel {
  margin-bottom: 0;
}

/* NOTE: the CSS-class layout helpers (.wpforms-one-half, .wpforms-two-thirds,
   …) that you can add per-field in the builder are deliberately left to
   WPForms' own stylesheet — they wrap whole fields, not row blocks, and
   overriding them here would fight the builder. */

/* -------------------------------------------------------------------------
   16-21. Progressive-enhancement layer (sbw-registration.js)
   --------------------------------------------------------------------------
   The blocks below style DOM the plugin injects at runtime — a segmented
   tab bar for Registration Type, numbered "01/02/03" sections, a ticket
   quantity stepper, and a live Order Summary sidebar — rebuilding the
   prototype's bespoke #register form (see css/form.css and
   partials/registration.html in the "chamber event page" project) on top
   of the real WPForms fields. Everything here is scoped under `#register`,
   which is a stable ID from templates/landing-page.php — no need to repeat
   the longer `.sbw-page .wpforms-container .wpforms-form` prefix.

   With JS disabled none of this DOM exists, so the form falls back to the
   plain WPForms skin above — nothing here is required for the form to work.
   ------------------------------------------------------------------------- */

/* --- 16. Registration Type radios restyled as a segmented tab bar ----- */

#register [hidden] { display: none !important; }

#register .wpforms-field-radio > .wpforms-field-label {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
#register .wpforms-field-radio { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
/* !important throughout this block: WPForms' own `ul, ul li {
   background:none!important; border:0!important; }` reset (see §5) beats
   even this ID-scoped selector on specificity alone — only !important
   survives it. */
/* Grid, not flex: with flex, the two tabs' natural content heights differ
   by a few px (font metrics on "Individual Tickets" vs "Sponsorship
   Package" at this width), and neither `align-items: stretch` on the row
   nor `align-self: stretch` on the items closed that gap in testing — the
   shorter tab's `<li>` (and so its background) stayed short, leaving a
   sliver of the row's own background showing under it. A grid row's track
   height is the max of its cells and every cell fills that track height by
   default — the standard, reliable way to get equal-height columns. */
#register .wpforms-field-radio > ul {
  /* minmax(0, 1fr) here would be degenerate: auto-fit has no real minimum to
     divide the row by, so it generates hundreds of near-zero implicit
     columns instead of 2. 10rem is comfortably under either choice's
     natural width, so this still adapts if a 3rd choice is ever added. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  align-items: stretch;                    /* explicit: see the §16 note on li below */
  list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--ink) !important; background: var(--white) !important;
}
/* Not `display:flex` here (a li nested inside the grid, itself stretching
   its own flex child): the two choices' labels differ in natural content
   height by a few px, and that gap survived every combination of
   align-items/align-self:stretch tried on the flex/grid item itself — the
   item kept sizing to its own content instead of the row's full height.
   `height: 100%` on the label below (a plain, non-flex li has a definite
   stretched height from the grid, and percentage heights resolve against
   that) sidesteps the nested-stretch question entirely. */
/* `display: block !important` — not an omission: §5's generic
   `.wpforms-field-radio ul li { display:flex; align-items:flex-start;
   gap:.7rem; padding:.35rem 0!important; }` still matches this element too,
   and without an explicit, equally-!important override here it quietly
   reasserts itself (that's exactly what caused the height bug above — the
   li silently went back to flex-start/no-stretch the moment this rule
   stopped naming `display` itself). Pin every property §5 also sets. */
#register .wpforms-field-radio > ul > li {
  position: relative; min-width: 0; min-height: 56px; align-self: stretch;
  display: block !important; gap: 0 !important; margin: 0; padding: 0 !important;
  border: 0 !important; border-right: 1px solid var(--ink) !important; background: transparent !important;
  transition: background-color .2s var(--ease);
  margin-bottom: 0 !important;
}
#register .wpforms-field-radio > ul > li:last-child { border-right: 0 !important; }
#register .wpforms-field-radio > ul > li:hover { background: var(--blush) !important; }

/* `.wpforms-selected` alongside `:has(input:checked)`: WPForms' own JS
   already toggles this class on the checked `<li>` (confirmed in the
   rendered DOM), and empirically it's the one that reliably wins here —
   `:has()` matches this element fine (verified via `element.matches()`) but
   its declaration doesn't end up winning the cascade in practice. Don't
   drop the `:has()` variant: it's what keeps this working with JS off,
   since `.wpforms-selected` is added by WPForms' own frontend script. */
#register .wpforms-field-radio > ul > li:has(input:checked),
#register .wpforms-field-radio > ul > li.wpforms-selected { background: var(--red) !important; }
#register .wpforms-field-radio > ul > li:has(input:checked):hover,
#register .wpforms-field-radio > ul > li.wpforms-selected:hover { background: var(--red-bright) !important; }

#register .wpforms-field-radio input[type="radio"] {
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; pointer-events: none;
}
/* No `height: 100%` here: with li's height only established via JS
   equalization (see equalizeTabHeights in sbw-registration.js — every
   CSS-only stretch approach tried left the two tabs at visibly different
   heights), `height:100%` on this label resolves against li's own auto
   (indefinite) height, which per spec falls back to `auto` — but percentage
   `auto`  landed on this element's `min-height` (56px) rather than its
   actual content need, squashing both labels down to 56px instead of their
   natural ~61–66px. Left plain, the label sizes to its real content, and
   the JS equalizer measures and equalizes those real heights afterward. */
#register .wpforms-field-radio label.wpforms-field-label-inline {
  display: flex; flex-direction: column; justify-content: center; gap: .2rem;
  width: 100%; box-sizing: border-box;
  padding: .8rem clamp(1rem, 3vw, 2.25rem); margin: 0;
  font-family: var(--font-display); text-transform: uppercase; font-weight: 400;
  font-size: clamp(.95rem, 2.2vw, 1.2rem); line-height: 1.05; letter-spacing: .02em;
  color: var(--ink); cursor: pointer;
}
#register .wpforms-field-radio > ul > li:has(input:checked) label,
#register .wpforms-field-radio > ul > li.wpforms-selected label { color: #fff; }

/* Per-choice meta subtext ("$200 per person" / "From $2,500"). Fragile to
   reordering choices in the WPForms builder — update these nth-child
   indexes if "Individual Tickets" / "Sponsorship Package" stop being
   choices 1 and 2. */
#register .wpforms-field-radio label::after {
  display: block; font-family: var(--font-body); font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft);
}
#register .wpforms-field-radio > ul > li:nth-child(1) label::after { content: "$200 per person"; }
#register .wpforms-field-radio > ul > li:nth-child(2) label::after { content: "From $2,500"; }
#register .wpforms-field-radio > ul > li:has(input:checked) label::after,
#register .wpforms-field-radio > ul > li.wpforms-selected label::after { color: rgba(255, 255, 255, .82); }

#register .wpforms-field-radio input:focus-visible + label {
  outline: 3px solid var(--red); outline-offset: -3px; position: relative; z-index: 1;
}

@media (max-width: 560px) {
  #register .wpforms-field-radio > ul { grid-template-columns: 1fr; }
  #register .wpforms-field-radio > ul > li { border-right: 0 !important; border-bottom: 1px solid var(--ink) !important; }
  #register .wpforms-field-radio > ul > li:last-child { border-bottom: 0 !important; }
}

/* --- 17. Numbered fieldsets -------------------------------------------- */

/* Force First/Last (and any other paired row) side by side above a narrow
   phone breakpoint, regardless of how much width the form column has left
   once it's sharing the page with the order-summary sidebar (§20). The
   generic `.wpforms-field-row` in §15 uses `auto-fit, minmax(10rem, 1fr)`,
   which was fine at full container width but can wrap to one column once
   that column narrows — this is more specific (ID) so it always wins. */
#register .sbw-reg-fieldset .wpforms-field-row { grid-template-columns: 1fr; }
@media (min-width: 480px) {
  #register .sbw-reg-fieldset .wpforms-field-row { grid-template-columns: 1fr 1fr; }
}

#register .sbw-reg-fieldset {
  border: 0; border-top: 2px solid var(--ink);
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem); padding: 1.5rem 0 0; min-width: 0;
}
#register .sbw-reg-legend {
  display: flex; align-items: baseline; gap: .6rem; padding: 0; margin: 0 0 1.35rem;
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(1.05rem, 2.4vw, 1.4rem); line-height: 1; letter-spacing: .02em; color: var(--ink);
}
#register .sbw-reg-legend__num { font-size: .72em; color: var(--red); letter-spacing: .08em; }

/* --- 18. General-admission note ---------------------------------------- */

#register .sbw-reg-note {
  padding: 1.1rem 1.25rem; margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--blush); border-left: 4px solid var(--red);
}
#register .sbw-reg-note__text { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--ink-soft); }
#register .sbw-reg-note__text strong { color: var(--ink); }

/* --- 19. Quantity stepper ------------------------------------------------ */

#register .sbw-reg-qty__control { display: flex; flex-wrap: wrap; align-items: center; }
#register .sbw-reg-qty__btn {
  flex: 0 0 auto; width: 48px; height: 48px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--ink); border-radius: 0; background: var(--white); color: var(--ink);
  font-family: var(--font-body); font-size: 1.35rem; line-height: 1; cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
#register .sbw-reg-qty__btn:hover:not(:disabled) { background: var(--red); color: #fff; border-color: var(--red); }
#register .sbw-reg-qty__btn:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; position: relative; z-index: 1; }
#register .sbw-reg-qty__btn:disabled { color: var(--ink-soft); opacity: .4; cursor: not-allowed; }

/* Must out-specify the generic number-input rule in section 4 above, which
   would otherwise force width:100% and wrap the stepper. */
#register input.sbw-reg-qty__input {
  flex: 0 0 auto; width: 84px; min-height: 48px; margin: 0 -1px; padding: 0 .5rem;
  text-align: center; font-family: var(--font-display); font-size: 1.25rem;
  border-color: var(--ink); -moz-appearance: textfield; appearance: textfield;
}
#register .sbw-reg-qty__input::-webkit-outer-spin-button,
#register .sbw-reg-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }

/* --- 20. Form + order-summary grid --------------------------------------- */

#register .sbw-reg-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
#register .sbw-reg-col-form { min-width: 0; }
@media (min-width: 901px) {
  #register .sbw-reg-grid { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); }
  #register .sbw-reg-summary-col { position: sticky; top: 2rem; }
}

/* --- 21. Order-summary sidebar -------------------------------------------- */

#register .sbw-reg-summary { border: 1px solid var(--ink); background: var(--white); }
#register .sbw-reg-summary__head {
  display: flex; align-items: center; gap: .65rem; padding: 1.05rem 1.35rem 1.15rem;
  background: var(--red); color: #fff;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
#register .sbw-reg-summary__title {
  margin: 0; font-family: var(--font-display); text-transform: uppercase;
  font-size: 1.15rem; letter-spacing: .04em; line-height: 1; color: #fff;
}
#register .sbw-reg-summary__body { padding: 1.35rem; }
#register .sbw-reg-summary__items { list-style: none; margin: 0; padding: 0; }
#register .sbw-reg-summary__item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem .75rem;
  padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--rule);
}
#register .sbw-reg-summary__item:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
#register .sbw-reg-summary__item-name {
  font-family: var(--font-display); text-transform: uppercase; font-size: 1rem; line-height: 1.15; color: var(--ink);
}
#register .sbw-reg-summary__item-amount {
  font-family: var(--font-display); font-size: 1rem; line-height: 1.15; text-align: right;
  white-space: nowrap; color: var(--ink);
}
#register .sbw-reg-summary__item-meta { grid-column: 1 / -1; font-size: .78rem; letter-spacing: .04em; color: var(--ink-soft); }
#register .sbw-reg-summary__empty { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--ink-soft); }
#register .sbw-reg-summary__total {
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
  padding: 1.1rem 1.35rem; border-top: 2px solid var(--ink); background: var(--blush);
}
#register .sbw-reg-summary__total-label {
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--ink);
}
#register .sbw-reg-summary__total-value {
  font-family: var(--font-display); font-size: clamp(1.5rem, 3.5vw, 2rem); line-height: 1;
  color: var(--red-deep); white-space: nowrap;
}
#register .sbw-reg-summary__note {
  margin: 0; padding: 1.1rem 1.35rem; border-top: 1px solid var(--rule);
  font-size: .76rem; line-height: 1.6; letter-spacing: .02em; color: var(--ink-soft);
}

@media (prefers-reduced-motion: reduce) {
  #register .sbw-reg-qty__btn,
  #register .wpforms-field-radio > ul > li { transition: none; }
}