/* ==========================================================================
   Component: Webform node pages (body.page-node-type-webform)
   Applies to every "webform" content type node (event scanner/app
   registration forms, etc.) — same pill-input, red-CTA design language as
   the rest of the theme's forms (manage-quotes.css, scanner-numbers.css).
   ========================================================================== */

/* --- Hide leaked backend/config fields --------------------------------------
   The "webform" content type has several custom fields (Stripe currency,
   VAT reversal toggle, event/collection dates, pricing, help URL, onsite
   person) that power the form and its payment logic, but were never meant
   to render as plain unstyled text below it — every webform node was
   showing these raw to every visitor.
   NOTE: field_wf_optn2 is deliberately NOT in this list — node--webform.html.twig
   reuses that exact field's rendered output as the "Handheld Scanners" tab's
   actual visible content (same field--name-field-wf-optn2 wrapper class),
   so hiding it here was blanking out that whole tab. */
body.page-node-type-webform .field--name-field-strp-currency,
body.page-node-type-webform .field--name-field-wbfrm-reversal,
body.page-node-type-webform .field--name-field-event-date,
body.page-node-type-webform .field--name-field-collection-date,
body.page-node-type-webform .field--name-field-adnl-scnr-chrgs,
body.page-node-type-webform .field--name-field-scnr-prc,
body.page-node-type-webform .field--name-field-scnrs-hlp-url,
body.page-node-type-webform .field--name-field-scnrs-onst-prsn {
  display: none;
}

/* CAPTCHA admin notice — informational only (shown to users who can bypass
   CAPTCHA), not part of the actual form. Not useful here. */
body.page-node-type-webform .captcha-admin-links {
  display: none;
}

/* --- Layout / spacing -------------------------------------------------------*/
body.page-node-type-webform .cm-container {
  padding-block: 32px 88px;
}

body.page-node-type-webform .field--name-body {
  max-width: 680px;
  margin-bottom: 40px;
  color: var(--cm-muted);
  line-height: 1.6;
}

body.page-node-type-webform .field--name-webform {
  max-width: 760px;
  margin-inline: auto;
}

/* The intro content above the form ("Easily collect attendee data" /
   "Make notes in real time") was authored with Bootstrap 3-style grid
   classes (.row / .col-xs-12 .col-md-6) left over from this site's old
   theme — cm26 doesn't define what those classes do, so both ended up as
   plain display:block and stacked instead of sitting side by side.
   Scoped to .appDtls specifically so it can't affect any other .row/.col-*
   markup elsewhere on the page. */
body.page-node-type-webform .appDtls .row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: -10px;
}

body.page-node-type-webform .appDtls .row > [class*="col-"] {
  width: 100%;
  padding-inline: 10px;
  box-sizing: border-box;
  float: none;
}

@media (min-width: 768px) {
  body.page-node-type-webform .appDtls .row > .col-md-6 {
    width: 50%;
  }
}

body.page-node-type-webform .js-form-item,
body.page-node-type-webform .js-form-wrapper {
  margin-bottom: 20px;
}

/* --- Lead retrieval capture tabs (node--webform.html.twig .gsc-tabs) --------
   The "Mobile App" tab reuses content.body, which the rule above caps at
   680px for the plain intro-text pages — inside the tabs that same cap
   left content stranded in the left half of <main>, so it's lifted here. */
body.page-node-type-webform .gsc-tabs .field--name-body {
  max-width: none;
  margin-bottom: 0;
}

body.page-node-type-webform .gsc-tabs .nav-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  border-bottom: 0;
  margin-bottom: 32px;
}

body.page-node-type-webform .gsc-tabs .nav-tabs h3 {
  flex: 1 1 auto;
  min-width: 200px;
}

/* Pill-style tabs instead of the plain underlined/bordered default —
   matches the radio-toggle pill pattern used for the form fields below. */
body.page-node-type-webform .gsc-tabs .nav-link {
  border: 1.5px solid var(--cm-hairline);
  border-radius: var(--cm-radius-pill);
  margin: 0;
  padding: 9px 22px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cm-ink);
  background: #fff;
  transition: background var(--cm-dur) var(--cm-ease), border-color var(--cm-dur) var(--cm-ease),
    color var(--cm-dur) var(--cm-ease), box-shadow var(--cm-dur) var(--cm-ease),
    transform var(--cm-dur) var(--cm-ease);
}

body.page-node-type-webform .gsc-tabs .nav-link:hover {
  border-color: var(--cm-red);
  color: var(--cm-red);
  transform: translateY(-1px);
}

body.page-node-type-webform .gsc-tabs .nav-link.active {
  color: #fff;
  border-color: var(--cm-red);
  background: var(--cm-red);
  box-shadow: 0 10px 20px -10px rgba(203, 19, 19, 0.55);
}

body.page-node-type-webform .gsc-tabs .nav-link.active:hover {
  transform: none;
}

/* Product photos (scanner / phone mockup) were sitting on bare white with
   no visual frame — give them a soft raised panel, same treatment as
   .cm-platform-card__mark elsewhere. */
body.page-node-type-webform .gsc-tabs .appImgWrp {
  background: var(--cm-paper-2);
  border-radius: var(--cm-radius-card);
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.page-node-type-webform .gsc-tabs .appImgWrp img {
  max-width: 100%;
  max-height: 380px;
  width: auto;
  height: auto;
}

/* --- Tab content: image + details row (.row > .appImgWrp / .appDtls) -------
   Bootstrap's real grid (loaded via the bootstrap_cdn library) already
   places these side by side via col-md-5/col-md-7, it just had no gap and
   the details column had nothing telling it to fill the same height as the
   image next to it. */
/* Scoped to .gsc-tabs .row generally (not just .field--name-body), since the
   Handheld Scanners tab renders the identical .row/.appImgWrp/.appDtls
   markup from field_wf_optn2 instead — both tabs need the same spacing. */
body.page-node-type-webform .gsc-tabs .row {
  gap: 32px 40px;
  align-items: stretch;
}

/* Bootstrap's col-md-5/col-md-7 widths are fixed percentages that already
   sum to 100% — adding the gap above without shrinking them would push
   their combined width over 100% and force an unwanted wrap. */
@media (min-width: 768px) {
  body.page-node-type-webform .gsc-tabs .appImgWrp.col-md-5 {
    width: calc(41.6667% - 20px);
  }

  body.page-node-type-webform .gsc-tabs .appDtls.col-md-7 {
    width: calc(58.3333% - 20px);
  }
}

body.page-node-type-webform .gsc-tabs .appDtls {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 24px;
  align-content: space-between;
}

body.page-node-type-webform .gsc-tabs .appDtls > h2,
body.page-node-type-webform .gsc-tabs .appDtls > p {
  grid-column: 1 / -1;
}

/* Match the size/weight/spacing other pages use for a real content heading
   (see body.page-node-type-page .field--name-body h2 in legacy-page.css) —
   this one was rendering at the browser's plain default (500 weight, muted
   colour, no margin). */
body.page-node-type-webform .gsc-tabs .appDtls > h2 {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.4px;
  line-height: 1.25;
  color: var(--cm-ink);
  margin: 0 0 16px;
}

/* Each "Easily collect attendee data" / "Make notes in real time" bullet:
   icon-in-a-box beside its title+text, instead of a small icon stacked
   awkwardly above a full-width heading. */
/* The description under each title is an unwrapped text node straight from
   the WYSIWYG source (no <p>), so flexbox would treat it as its own item
   sitting beside the icon — floating the icon instead lets the title and
   that text run wrap underneath it normally, no markup changes needed. */
body.page-node-type-webform .gsc-tabs .appDtls .blts {
  position: relative;
  /* Bootstrap's .p-0 utility class on this element sets padding:0 !important,
     so the icon's reserved space needs !important too to win. */
  padding-left: 46px !important;
  min-height: 34px;
  width: auto;
}

body.page-node-type-webform .gsc-tabs .appDtls .blts .blue,
body.page-node-type-webform .gsc-tabs .appDtls .blts .green {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
}

/* The source tik.png/target.png images were low-res and hard to make out at
   this size — swap them for crisp Font Awesome glyphs (already loaded via
   the font_awesome library) coloured with the brand accents instead. */
body.page-node-type-webform .gsc-tabs .appDtls .blts .blue img,
body.page-node-type-webform .gsc-tabs .appDtls .blts .green img {
  display: none;
}

body.page-node-type-webform .gsc-tabs .appDtls .blts .blue::before,
body.page-node-type-webform .gsc-tabs .appDtls .blts .green::before {
  font-family: "FontAwesome";
  font-size: 30px;
}

body.page-node-type-webform .gsc-tabs .appDtls .blts .blue::before {
  content: "\f058"; /* fa-check-circle */
  color: #1c9a5b;
}

body.page-node-type-webform .gsc-tabs .appDtls .blts .green::before {
  content: "\f0e7"; /* fa-bolt */
  color: var(--cm-navy);
}

body.page-node-type-webform .gsc-tabs .appDtls .blts h5 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 4px;
}

/* Cost line — back to the bordered block (icon + left accent + padding),
   just on a quieter neutral background instead of a colour tint. */
body.page-node-type-webform .gsc-tabs .appDtls .cst {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--cm-paper-2);
  border-left: 4px solid var(--cm-ink);
  color: var(--cm-ink);
  border-radius: var(--cm-radius-insert);
  /* .p-0 (Bootstrap utility) sets padding:0 !important — must match. */
  padding: 16px 22px !important;
  font-size: 17px;
  font-weight: 700;
  width: auto;
}

body.page-node-type-webform .gsc-tabs .appDtls .cst::before {
  font-family: "FontAwesome";
  content: "\f02b"; /* fa-tag */
  font-size: 18px;
  color: var(--cm-ink);
}

body.page-node-type-webform .gsc-tabs .appDtls .cst strong {
  color: inherit;
}

/* --- Labels ------------------------------------------------------------------*/
body.page-node-type-webform form[id^="webform-submission-"] label {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: var(--cm-ink);
  margin-bottom: 6px;
}

body.page-node-type-webform form[id^="webform-submission-"] .fieldset-legend {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: var(--cm-ink);
  margin-bottom: 10px;
}

body.page-node-type-webform form[id^="webform-submission-"] .description,
body.page-node-type-webform form[id^="webform-submission-"] .form-text {
  font-size: 12.5px;
  color: var(--cm-muted);
  margin-top: 4px;
}

/* --- Text inputs / selects ---------------------------------------------------*/
body.page-node-type-webform form[id^="webform-submission-"] input[type="text"],
body.page-node-type-webform form[id^="webform-submission-"] input[type="email"],
body.page-node-type-webform form[id^="webform-submission-"] input[type="tel"],
body.page-node-type-webform form[id^="webform-submission-"] input[type="number"],
body.page-node-type-webform form[id^="webform-submission-"] input[type="url"],
body.page-node-type-webform form[id^="webform-submission-"] select {
  width: 100%;
  padding: 10px 16px;
  border: 1px solid var(--cm-hairline);
  border-radius: var(--cm-radius-pill);
  font: inherit;
  font-size: 14.5px;
  color: var(--cm-ink);
  background: #fff;
  box-sizing: border-box;
}

body.page-node-type-webform form[id^="webform-submission-"] textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--cm-hairline);
  border-radius: var(--cm-radius-insert);
  font: inherit;
  font-size: 14.5px;
  color: var(--cm-ink);
  background: #fff;
  box-sizing: border-box;
}

body.page-node-type-webform form[id^="webform-submission-"] input[type="text"]:focus,
body.page-node-type-webform form[id^="webform-submission-"] input[type="email"]:focus,
body.page-node-type-webform form[id^="webform-submission-"] input[type="tel"]:focus,
body.page-node-type-webform form[id^="webform-submission-"] input[type="number"]:focus,
body.page-node-type-webform form[id^="webform-submission-"] input[type="url"]:focus,
body.page-node-type-webform form[id^="webform-submission-"] select:focus,
body.page-node-type-webform form[id^="webform-submission-"] textarea:focus {
  outline: none;
  border-color: var(--cm-ink);
}

/* --- Radio / checkbox toggle chips --------------------------------------------
   Same visually-hidden-input + pill-label pattern as the exposed filter
   chips in manage-quotes.css: the native control stays functional and
   keyboard-focusable, its label becomes the clickable pill. */
body.page-node-type-webform form[id^="webform-submission-"] .form-check {
  display: inline-flex;
  align-items: center;
  margin-bottom: 0 !important;
  margin-right: 10px;
}

body.page-node-type-webform form[id^="webform-submission-"] .radios--wrapper .fieldset-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body.page-node-type-webform form[id^="webform-submission-"] .form-check-input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.page-node-type-webform form[id^="webform-submission-"] .js-form-type-radio .form-check-label {
  margin: 0;
  padding: 10px 20px;
  border: 1.5px solid var(--cm-hairline);
  border-radius: var(--cm-radius-pill);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cm-ink);
  background: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--cm-dur) var(--cm-ease), border-color var(--cm-dur) var(--cm-ease),
    color var(--cm-dur) var(--cm-ease);
}

body.page-node-type-webform form[id^="webform-submission-"] .form-check-input[type="radio"]:checked + .form-check-label {
  background: var(--cm-ink);
  border-color: var(--cm-ink);
  color: #fff;
}

body.page-node-type-webform form[id^="webform-submission-"] .form-check-input[type="radio"]:focus-visible + .form-check-label {
  outline: 2px solid var(--cm-red);
  outline-offset: 2px;
}

/* Plain checkboxes (e.g. "VAT Reversal") keep a real, visible checkbox
   rather than becoming a pill — there's no "unchecked" alternative label
   to show instead, unlike the radio groups above. */
body.page-node-type-webform form[id^="webform-submission-"] .form-check-input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0 8px 0 0;
  accent-color: var(--cm-red);
  cursor: pointer;
}

body.page-node-type-webform form[id^="webform-submission-"] .js-form-type-checkbox .form-check-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--cm-ink);
  cursor: pointer;
}

/* --- Submit button -------------------------------------------------------- */
body.page-node-type-webform form[id^="webform-submission-"] .btn-red {
  appearance: none;
  background: var(--cm-red);
  border: 1px solid var(--cm-red);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  padding: 12px 32px;
  border-radius: var(--cm-radius-pill);
  cursor: pointer;
  transition: background var(--cm-dur) var(--cm-ease), border-color var(--cm-dur) var(--cm-ease);
}

body.page-node-type-webform form[id^="webform-submission-"] .btn-red:hover {
  background: var(--cm-red-hover);
  border-color: var(--cm-red-hover);
}

@media (max-width: 640px) {
  body.page-node-type-webform form[id^="webform-submission-"] .btn-red {
    width: 100%;
  }
}