/* ════════════════════════════════════════════════════════════════════════════
   EXISTING-CUSTOMER CHECKBOX · the one question both request forms open with
   Shared by /demo/ and /support/, loaded from each page's extra_css block so it
   never touches base_public.html and mobile-2027.css stays the last sheet.

   Every value is an h27 token. This file introduces no colour of its own — the
   row has to read as the first field of the form card it sits in, not as a
   widget bolted onto it.
   ════════════════════════════════════════════════════════════════════════════ */

/* Some of the older layers set `display` on generic selectors; the customer /
   prospect swap depends on [hidden] actually hiding, so it is stated once here. */
.h27 .cx [hidden],
.h27 [data-cx-when][hidden] { display: none !important; }

.h27 .cx { margin: 0 0 18px; }

.h27 .cx-toggle {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 15px 17px; border-radius: 5px; cursor: pointer;
  background: var(--h27-ice);
  box-shadow: inset 0 0 0 1px var(--h27-hair);
  transition: box-shadow .18s ease, background .18s ease;
}
.h27 .cx-toggle:hover { box-shadow: inset 0 0 0 1px var(--h27-sky); }
.h27 .cx-toggle input[type=checkbox] {
  flex: 0 0 auto; width: 19px; height: 19px; margin: 1px 0 0;
  accent-color: var(--h27-sky); cursor: pointer;
}
.h27 .cx-toggle input[type=checkbox]:focus-visible { outline: 2px solid var(--h27-coral); outline-offset: 2px; }
.h27 .cx-toggle__title { display: block; font-size: 14.5px; font-weight: 700; color: var(--h27-navy); }
.h27 .cx-toggle__note { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.55; color: var(--h27-mute); }
/* Ticked: the row goes from "a field" to "a stated fact". */
.h27 .cx-toggle--on { background: var(--h27-paper); box-shadow: inset 0 0 0 1px var(--h27-sage); }

/* Helper copy under a field the checkbox has changed the meaning of. */
.h27 .cx-note { margin: 9px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--h27-mute); }
.h27 .cx-note--warn { color: var(--h27-coral-dk); }

@media (max-width: 480px) {
  .h27 .cx-toggle__note { font-size: 13px; }
}