/**
 * Fluent Forms restyle — slice `forms`.
 *
 * The statics forms are hand-written markup (`.quote-form` on product pages and
 * in the brochure dialog, `.contact-form` on /contact/); Fluent Forms renders its
 * own markup instead, so this file maps Fluent's classes onto those designs.
 * Every value below is copied from the corresponding statics rule in
 * `assets/styles.css` (same custom properties, same numbers) so the computed
 * styles match; nothing here restyles the site outside a form.
 *
 * Scope: `.fluentform` inside the three regions that carry a form —
 *   .pp-quote        → statics `.quote-form`        (product quote form)
 *   .brochure-dialog → statics `.quote-form`        (brochure request dialog)
 *   .contact-section → statics `.contact-form`      (contact page)
 *
 * Fluent's own CSS/JS is only enqueued on pages where a form renders, and its
 * stylesheet is printed after this one; selectors here therefore carry one class
 * more than Fluent's `.fluentform .x` rules so they win on specificity.
 *
 * Fluent markup contract used below (Fluent Forms 6.2.15):
 *   .fluentform > form.frm-fluent-form > fieldset
 *     .ff-el-group                       → field wrapper (also submit + consent)
 *     .ff-el-group.el-field-section      → statics `<fieldset><legend>` heading
 *       .ff-el-section-title             → legend text
 *     .ff-el-input--label label          → label (+ `asterisk-right` required mark)
 *     .ff-el-input--content              → control + help + error
 *     .ff-el-tc .ff_tc_label            → consent checkbox + sentence
 *     .ff_submit_btn_wrapper .ff-btn-submit → submit button
 *     .error.text-danger                 → per-field validation message
 *   .ff-message-success                  → confirmation (form resets after send)
 *
 * @package etchlab
 */

/* -------------------------------------------------------------------------
 * 1 · Form box, grid and section headings (quote form + brochure dialog)
 * ---------------------------------------------------------------------- */

/*
 * Align Fluent's own palette with the statics one, so the parts this file does
 * not set by hand (focus tint, error border, required mark, select arrow) use
 * the design colours. Fluent's theme sets these on `.ff-default`; one class more
 * here wins regardless of stylesheet order.
 */
.pp-quote .fluentform,
.brochure-dialog .fluentform,
.contact-section .fluentform {
  --fluentform-primary: #2051da;
  --fluentform-border-color: #80868b;
  --fluentform-border-radius: 0;
  --fluentform-danger: #b42318;
  --fluentform-secondary: #212226;
  --fluentform-input-select-height: 48px;
}

.contact-section .fluentform {
  --fluentform-input-select-height: 50px;
}

/*
 * statics: .quote-form { margin-top:32px; padding:24px 20px; border:1px solid
 * #e6eaf0; border-top:3px solid #0b38d5; background:#fff }
 *         @media (min-width:640px) { padding:40px }
 *         .quote-form__grid { gap:20px } · @media 768px { 2 cols, column-gap:24px }
 * Fluent wraps its flat field list in a direct-child fieldset. That fieldset,
 * not the form box, owns the responsive grid; full-width fields span both columns.
 */
.pp-quote .fluentform .frm-fluent-form,
.brochure-dialog .fluentform .frm-fluent-form {
  display: block;
  margin-top: 32px;
  padding: 24px 20px;
  border: 1px solid var(--border-subtle, #e6eaf0);
  border-top: 3px solid #0b38d5;
  background: var(--color-white, #fff);
}

.pp-quote .fluentform .frm-fluent-form > fieldset,
.brochure-dialog .fluentform .frm-fluent-form > fieldset,
.contact-section .fluentform .frm-fluent-form > fieldset {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  min-width: 0;
}

.fluentform .frm-fluent-form > fieldset > .ff_screen_reader_title {
  position: absolute;
}

@media (min-width: 640px) {
  .pp-quote .fluentform .frm-fluent-form,
  .brochure-dialog .fluentform .frm-fluent-form {
    padding: 40px;
  }
}

@media (min-width: 768px) {
  .pp-quote .fluentform .frm-fluent-form > fieldset {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }
}

/* Fluent spaces fields with margin-bottom; the grid above owns the spacing. */
.pp-quote .fluentform .ff-el-group,
.brochure-dialog .fluentform .ff-el-group {
  margin-bottom: 0;
}

.pp-quote .fluentform .ff-el-group.el-field-full,
.pp-quote .fluentform .ff-el-section-break,
.pp-quote .fluentform .ff_submit_btn_wrapper,
.contact-section .fluentform .ff-el-group.el-field-full,
.contact-section .fluentform .ff_submit_btn_wrapper {
  grid-column: 1 / -1;
}

/* statics: .quote-form__group legend { margin-bottom:16px; font-size:18px;
 * line-height:1.4; font-weight:700; color:#212226 } — Fluent renders the group
 * heading as a section break with a rule, which the statics design does not have. */
.pp-quote .fluentform .ff-el-section-break,
.brochure-dialog .fluentform .ff-el-section-break {
  padding: 0;
  border: 0;
  margin: 0 0 -4px;
}

.pp-quote .fluentform .ff-el-section-break .ff-el-section-title,
.brochure-dialog .fluentform .ff-el-section-break .ff-el-section-title {
  margin: 0;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--color-line-ink, #212226);
}

.pp-quote .fluentform .ff-el-section-break .ff-section_break_desk,
.pp-quote .fluentform .ff-el-section-break hr,
.brochure-dialog .fluentform .ff-el-section-break .ff-section_break_desk,
.brochure-dialog .fluentform .ff-el-section-break hr {
  display: none;
}

/* A separate statics hint is a full grid row, not help inside the width field. */
.pp-quote .fluentform .el-field-hint .quote-form__hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-secondary, #5f6368);
}

/* -------------------------------------------------------------------------
 * 2 · Labels, required mark, controls, help and errors
 * ---------------------------------------------------------------------- */

/* statics: .quote-form__field > label { font-size:14px; line-height:1.4;
 * font-weight:600; color:#212226 } and .quote-form__req { color:#b42318 } */
.pp-quote .fluentform .ff-el-input--label,
.brochure-dialog .fluentform .ff-el-input--label {
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.4;
  display: block;
  float: none;
  margin: 0 0 8px;
  text-align: left;
}

.pp-quote .fluentform .ff-el-input--label label,
.brochure-dialog .fluentform .ff-el-input--label label {
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.4;
  font-weight: 600;
  color: var(--color-line-ink, #212226);
}

.pp-quote .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label:after,
.brochure-dialog .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label:after {
  content: " *";
  margin-left: 3px;
  color: #b42318;
}

/* statics: .quote-form :is(input,select,textarea) { width:100%; min-height:48px;
 * padding:10px 12px; border:1px solid #80868b; border-radius:0; background:#fff;
 * font-size:1rem; line-height:1.5; color:#212226 } */
.pp-quote .fluentform .ff-el-input--content .ff-el-form-control,
.brochure-dialog .fluentform .ff-el-input--content .ff-el-form-control {
  width: 100%;
  max-width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid #80868b;
  border-radius: 0;
  background-color: var(--color-white, #fff);
  color: var(--color-line-ink, #212226);
  font-size: var(--text-base, 1rem);
  line-height: 1.5;
  box-shadow: none;
}

.pp-quote .fluentform .ff-el-input--content select.ff-el-form-control,
.brochure-dialog .fluentform .ff-el-input--content select.ff-el-form-control {
  appearance: auto;
}

.pp-quote .fluentform .ff-el-input--content textarea.ff-el-form-control,
.brochure-dialog .fluentform .ff-el-input--content textarea.ff-el-form-control {
  min-height: 120px;
  resize: vertical;
}

.pp-quote .fluentform .ff-el-input--content .ff-el-form-control:focus,
.brochure-dialog .fluentform .ff-el-input--content .ff-el-form-control:focus {
  border-color: #2051da;
  background-color: var(--color-white, #fff);
  outline: 2px solid #2051da;
  outline-offset: 1px;
  box-shadow: none;
}

/* statics: .quote-form :is(input,select,textarea)[aria-invalid="true"] */
.pp-quote .fluentform .ff-el-is-error .ff-el-form-control,
.pp-quote .fluentform .ff-el-form-control[aria-invalid="true"],
.brochure-dialog .fluentform .ff-el-is-error .ff-el-form-control,
.brochure-dialog .fluentform .ff-el-form-control[aria-invalid="true"] {
  border-color: #b42318;
  box-shadow: inset 0 0 0 1px #b42318;
}

/* statics: .input::placeholder, .textarea::placeholder { color:#bdc1c6 } */
.pp-quote .fluentform .ff-el-form-control::placeholder,
.contact-section .fluentform .ff-el-form-control::placeholder,
.brochure-dialog .fluentform .ff-el-form-control::placeholder {
  color: #bdc1c6;
  opacity: 1;
}

/* statics: .quote-form__hint { font-size:13px; line-height:1.5; color:#5f6368 } */
.pp-quote .fluentform .ff-el-help-message,
.brochure-dialog .fluentform .ff-el-help-message {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-secondary, #5f6368);
}

/* statics: .quote-form__error:not(:empty) — Fluent messages are per field, so
 * they carry the same colour/weight without the alert box. */
.pp-quote .fluentform .error.text-danger,
.brochure-dialog .fluentform .error.text-danger,
.contact-section .fluentform .error.text-danger {
  display: block;
  margin-top: 8px;
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.5;
  font-weight: 600;
  color: #b42318;
}

.pp-quote .fluentform .error.text-danger .error-clear,
.brochure-dialog .fluentform .error.text-danger .error-clear,
.contact-section .fluentform .error.text-danger .error-clear {
  margin-right: 6px;
  cursor: pointer;
}

/* -------------------------------------------------------------------------
 * 3 · Consent row (statics .quote-form__consent)
 * ---------------------------------------------------------------------- */

/* statics: display:flex; align-items:flex-start; gap:12px; font-size:14px;
 * line-height:1.6; checkbox 20×20, margin-top:2px, accent-color:#2051da;
 * link #2051da underlined. */
.pp-quote .fluentform .ff-el-tc label.ff_tc_label,
.brochure-dialog .fluentform .ff-el-tc label.ff_tc_label,
.contact-section .fluentform .ff-el-tc label.ff_tc_label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.6;
  font-weight: 400;
  color: var(--color-line-ink, #212226);
  cursor: pointer;
}

.pp-quote .fluentform .ff-el-tc .ff_t_c,
.brochure-dialog .fluentform .ff-el-tc .ff_t_c,
.contact-section .fluentform .ff-el-tc .ff_t_c {
  display: block;
  padding: 0;
}

.pp-quote .fluentform .ff-el-tc .ff_t_c a,
.brochure-dialog .fluentform .ff-el-tc .ff_t_c a,
.contact-section .fluentform .ff-el-tc .ff_t_c a {
  color: #2051da;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The required mark sits after the consent sentence, as in statics. */
.pp-quote .fluentform .ff-el-tc .ff_t_c:after,
.brochure-dialog .fluentform .ff-el-tc .ff_t_c:after,
.contact-section .fluentform .ff-el-tc .ff_t_c:after {
  content: " *";
  margin-left: 3px;
  color: #b42318;
}

.pp-quote .fluentform .ff-el-tc .ff_tc_checkbox,
.brochure-dialog .fluentform .ff-el-tc .ff_tc_checkbox,
.contact-section .fluentform .ff-el-tc .ff_tc_checkbox {
  display: flex;
  flex: none;
  width: 20px;
  padding: 0;
}

.pp-quote .fluentform .ff-el-tc .ff_tc_checkbox input,
.brochure-dialog .fluentform .ff-el-tc .ff_tc_checkbox input,
.contact-section .fluentform .ff-el-tc .ff_tc_checkbox input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: #2051da;
}

/* -------------------------------------------------------------------------
 * 4 · Submit button (statics `.button button--green`)
 * ---------------------------------------------------------------------- */

/* statics: display:inline-flex; align-items:center; justify-content:center;
 * padding:11px 20px; font-size:14px; line-height:21px; font-weight:600; gap:8px;
 * white-space:nowrap; border-radius:0; box-shadow:none; background:#2051da;
 * color:#fff; clip-path:polygon(0 0,100% 0,100% 100%,12px 100%,0 calc(100% - 12px));
 * hover #1f3b9b; focus-visible outline-offset:-5px; .quote-form__actions .button
 * { min-height:48px }.
 */
.pp-quote .fluentform .ff_submit_btn_wrapper .ff-btn-submit,
.brochure-dialog .fluentform .ff_submit_btn_wrapper .ff-btn-submit,
.contact-section .fluentform .ff_submit_btn_wrapper .ff-btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 11px 20px;
  border: 0;
  border-radius: 0;
  background-color: #2051da;
  background-image: none;
  color: var(--color-white, #fff);
  font-size: 14px;
  line-height: 21px;
  font-weight: 600;
  text-transform: none;
  white-space: nowrap;
  box-shadow: none;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  cursor: pointer;
}

.pp-quote .fluentform .ff_submit_btn_wrapper .ff-btn-submit:hover,
.brochure-dialog .fluentform .ff_submit_btn_wrapper .ff-btn-submit:hover,
.contact-section .fluentform .ff_submit_btn_wrapper .ff-btn-submit:hover {
  background-color: #1f3b9b;
  color: var(--color-white, #fff);
}

.pp-quote .fluentform .ff_submit_btn_wrapper .ff-btn-submit:focus-visible,
.brochure-dialog .fluentform .ff_submit_btn_wrapper .ff-btn-submit:focus-visible,
.contact-section .fluentform .ff_submit_btn_wrapper .ff-btn-submit:focus-visible {
  outline: 2px solid #2051da;
  outline-offset: -5px;
}

@media (max-width: 639px) {
  .pp-quote .fluentform .ff_submit_btn_wrapper .ff-btn-submit {
    width: 100%;
  }
}

/* Fluent leaves a hidden submit button while it initialises; keep it out of the
 * grid so the layout does not jump. */
.pp-quote .fluentform .ff-btn-submit[disabled],
.brochure-dialog .fluentform .ff-btn-submit[disabled] {
  opacity: 0.75;
}

/* -------------------------------------------------------------------------
 * 5 · Confirmation and AJAX feedback
 * ---------------------------------------------------------------------- */

/* statics: .quote-form__status:not(:empty) / .contact-status — Fluent keeps
 * `.ff-message-success` visible while resetting the form for another request. */
.pp-quote .fluentform .ff-message-success,
.brochure-dialog .fluentform .ff-message-success,
.contact-section .fluentform .ff-message-success {
  margin-top: 0;
  padding: 12px 16px;
  border: 0;
  border-left: 2px solid #2051da;
  border-radius: 0;
  background: transparent;
  color: var(--color-line-ink, #212226);
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.6;
  font-weight: 600;
  box-shadow: none;
}

.pp-quote .fluentform .ff-message-success:focus-visible,
.brochure-dialog .fluentform .ff-message-success:focus-visible,
.contact-section .fluentform .ff-message-success:focus-visible {
  outline: 2px solid #2051da;
  outline-offset: 2px;
}

/* The uploader progress placeholder (Fluent renders it even before upload). */
.pp-quote .fluentform .ff-el-input--content .ff_uploading,
.brochure-dialog .fluentform .ff-el-input--content .ff_uploading {
  min-height: 48px;
}

/* -------------------------------------------------------------------------
 * 6 · Brochure dialog specifics
 * ---------------------------------------------------------------------- */

/* statics: .brochure-dialog .quote-form { margin-top:24px; padding:0; border:0 }
 *         .brochure-dialog .quote-form__grid { 1 column }
 *         .brochure-dialog .quote-form__actions .button { min-height:43px } */
.brochure-dialog .fluentform .frm-fluent-form {
  display: block;
  margin-top: 24px;
  padding: 0;
  border: 0;
  border-top: 0;
  background: transparent;
}

.brochure-dialog .fluentform .ff_submit_btn_wrapper .ff-btn-submit {
  min-height: 43px;
  width: auto;
}

.brochure-dialog .fluentform .ff-el-input--label {
  margin-bottom: 7px;
}

@media (max-width: 639px) {
  .brochure-dialog .fluentform .ff_submit_btn_wrapper .ff-btn-submit {
    width: 100%;
  }
}

/* -------------------------------------------------------------------------
 * 7 · Contact form (statics .contact-form — underline fields, blue accents)
 * ---------------------------------------------------------------------- */

/* statics: .contact-form { max-width:980px; margin-inline:auto; padding:0 }
 *         .contact-form__fields { display:grid; column-gap:28px; row-gap:28px }
 *         @media 768px { 2 cols } · @media 1024px { column-gap:20px; row-gap:40px }
 *         @media max-639px { row-gap:32px } */
.contact-section .fluentform .frm-fluent-form {
  display: block;
  max-width: 980px;
  margin-inline: auto;
  padding: 0;
  background-color: var(--color-white, #fff);
  box-shadow: none;
}

.contact-section .fluentform .frm-fluent-form > fieldset {
  column-gap: 28px;
  row-gap: 28px;
}

.contact-section .fluentform .ff-el-group {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .contact-section .fluentform .frm-fluent-form > fieldset {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .contact-section .fluentform .frm-fluent-form > fieldset {
    column-gap: 20px;
    row-gap: 40px;
  }
}

@media (max-width: 639px) {
  .contact-section .fluentform .frm-fluent-form > fieldset {
    row-gap: 32px;
  }
}

/* statics: .contact-field { display:grid; align-content:flex-start }
 *         .contact-field label { margin-bottom:12px; font-size:1rem; font-weight:600 }
 *         @media max-639px { label font-size:14px }
 *         .contact-field.is-required label { color:#2051da } */
.contact-section .fluentform .ff-el-input--label {
  display: block;
  float: none;
  margin: 0 0 12px;
  text-align: left;
}

.contact-section .fluentform .ff-el-input--label label {
  font-size: var(--text-base, 1rem);
  line-height: 1.5;
  font-weight: 600;
  color: var(--color-line-ink, #212226);
}

.contact-section .fluentform .ff-el-input--label.ff-el-is-required label {
  color: var(--color-line-green, #2051da);
}

.contact-section .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label:after {
  content: " *";
  margin-left: 3px;
  color: #b42318;
}

@media (max-width: 639px) {
  .contact-section .fluentform .ff-el-input--label label {
    font-size: var(--text-sm, 0.875rem);
  }
}

/* statics: .contact-field input, .contact-field select { height:50px; padding-inline:0;
 * border:0; border-bottom:1px solid #80868b; border-radius:0; background:#fff }
 *         .contact-field.is-required input { border-color:#2051da } */
.contact-section .fluentform .ff-el-input--content input.ff-el-form-control,
.contact-section .fluentform .ff-el-input--content select.ff-el-form-control {
  width: 100%;
  height: 50px;
  min-height: 50px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #80868b;
  border-radius: 0;
  background-color: var(--color-white, #fff);
  color: var(--color-line-ink, #212226);
  font-size: var(--text-base, 1rem);
  line-height: 1.5;
  box-shadow: none;
}

.contact-section .fluentform .ff-el-input--content select.ff-el-form-control {
  appearance: auto;
}

.contact-section .fluentform .ff-el-is-required input.ff-el-form-control {
  border-bottom-color: var(--color-line-green, #2051da);
}

/* statics: .contact-field textarea { border:1px solid #2051da; min-height:185px;
 * padding:20px; resize:vertical } */
.contact-section .fluentform .ff-el-input--content textarea.ff-el-form-control {
  width: 100%;
  min-height: 185px;
  padding: calc(var(--spacing, 0.25rem) * 5);
  border: 1px solid var(--color-line-green, #2051da);
  border-radius: 0;
  background-color: var(--color-white, #fff);
  color: var(--color-line-ink, #212226);
  font-size: var(--text-base, 1rem);
  line-height: 1.5;
  resize: vertical;
  box-shadow: none;
}

.contact-section .fluentform .ff-el-input--content .ff-el-form-control:focus {
  border-color: #2051da;
  background-color: var(--color-white, #fff);
  outline: 2px solid #2051da;
  outline-offset: 1px;
  box-shadow: none;
}

/* statics: .contact-field :is(input,select,textarea)[aria-invalid=true] */
.contact-section .fluentform .ff-el-is-error .ff-el-form-control,
.contact-section .fluentform .ff-el-form-control[aria-invalid="true"] {
  border-color: #b42318;
  box-shadow: none;
}

.contact-section .fluentform .ff-el-is-error textarea.ff-el-form-control {
  border-color: #b42318;
}

.contact-section .fluentform .ff-el-help-message {
  margin-top: 8px;
  font-size: var(--text-xs, 0.75rem);
  line-height: 1.5;
  color: #5f6368;
}

.contact-section .fluentform .ff-el-tc .ff_t_c:after {
  font-size: 8px;
  vertical-align: middle;
}

/* statics: .contact-submit { background:#2051da; color:#fff; margin-top:24px }
 *         @media max-639px { width:100% } */
.contact-section .fluentform .ff_submit_btn_wrapper {
  margin-top: 0;
  text-align: left;
}

.contact-section .fluentform .ff_submit_btn_wrapper .ff-btn-submit {
  background-color: #2051da;
}

@media (max-width: 639px) {
  .contact-section .fluentform .ff_submit_btn_wrapper .ff-btn-submit {
    width: 100%;
  }
}

/* The character counter under the contact inquiry field (statics `.contact-count`)
 * is not rendered by Fluent; the maxlength attribute still enforces the limit. */

/* -------------------------------------------------------------------------
 * 8 · Quote form: `product_type` radio + conditional family blocks
 * ---------------------------------------------------------------------- */

/* statics radio/option look (`assets/styles.css` .gallery-filter__option):
 * display:flex; align-items:center; gap:12px; min-height:44px; font-size:14px;
 * line-height:1.4; color:#212226; cursor:pointer; input 18×18 margin:0
 * accent-color:#2051da; checked row font-weight:600. */
.pp-quote .fluentform .ff-el-form-check label.ff-el-form-check-label {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin: 0;
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.4;
  font-weight: 400;
  color: var(--color-line-ink, #212226);
  cursor: pointer;
}

.pp-quote .fluentform .ff-el-form-check .ff-el-form-check-input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #2051da;
  cursor: pointer;
}

.pp-quote .fluentform .ff-el-form-check label.ff-el-form-check-label:has(.ff-el-form-check-input:checked) {
  font-weight: var(--font-weight-semibold, 600);
}

.pp-quote .fluentform .ff-el-group.el-product-type .ff-el-form-check label.ff-el-form-check-label {
  justify-content: center;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #80868b;
  background: var(--color-white, #fff);
  font-weight: var(--font-weight-semibold, 600);
  text-align: center;
  overflow-wrap: anywhere;
}

/* statics: .pp-option__choice input:checked + span { border-color:#2051da;
 * background:var(--brand-surface); color:#0b38d5; box-shadow:inset 0 0 0 1px #2051da } */
.pp-quote .fluentform .ff-el-group.el-product-type .ff-el-form-check label.ff-el-form-check-label:has(.ff-el-form-check-input:checked) {
  border-color: #2051da;
  background: var(--brand-surface, #dcf1ff);
  color: #0b38d5;
  box-shadow: inset 0 0 0 1px #2051da;
}

.pp-quote .fluentform .ff-el-group.el-product-type .ff-el-form-check label.ff-el-form-check-label:hover,
.pp-quote .fluentform .ff-el-group.el-product-type .ff-el-form-check label.ff-el-form-check-label:has(.ff-el-form-check-input:focus-visible) {
  border-color: #2051da;
}

.pp-quote .fluentform .ff-el-group.el-product-type .ff-el-form-check label.ff-el-form-check-label:has(.ff-el-form-check-input:focus-visible) {
  outline: 2px solid #2051da;
  outline-offset: 2px;
}

.pp-quote .fluentform .ff-el-group.el-product-type .ff-el-input--content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.pp-quote .fluentform .ff-el-group.el-product-type .ff-el-form-check {
  min-width: 0;
}

/* The hidden radio keeps its box inside the tile, like statics
 * .pp-option__choice input { position:absolute; inset:0; opacity:0 }. */
.pp-quote .fluentform .ff-el-group.el-product-type .ff-el-form-check-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.pp-quote .fluentform .ff-el-group.el-product-type .ff-el-form-check {
  position: relative;
}

/* -------------------------------------------------------------------------
 * 10 · File upload widget (includes/fluent-form-files.php)
 * ---------------------------------------------------------------------- */

/* The native file input stays focusable for keyboards, but out of the layout;
 * the statics look is the bordered control it sits behind. */
:is(.pp-quote, .contact-section) .fluentform .el-upload {
  display: grid;
  gap: 8px;
}

:is(.pp-quote, .contact-section) .fluentform .el-upload__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

:is(.pp-quote, .contact-section) .fluentform .el-upload__input:focus-visible + .el-upload__button {
  outline: 2px solid #2051da;
  outline-offset: 2px;
}

:is(.pp-quote, .contact-section) .fluentform .el-upload__button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid #80868b;
  border-radius: 0;
  background: var(--color-white, #fff);
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.5;
  color: var(--color-line-ink, #212226);
  cursor: pointer;
  text-align: left;
}

:is(.pp-quote, .contact-section) .fluentform .el-upload__button:hover {
  border-color: #2051da;
}

/* statics: .quote-form__files — one bordered row per accepted file. */
:is(.pp-quote, .contact-section) .fluentform .el-upload__files {
  display: grid;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border-subtle, #e6eaf0);
  background: var(--color-white, #fff);
  list-style: none;
}

:is(.pp-quote, .contact-section) .fluentform .el-upload__files:empty {
  display: none;
}

:is(.pp-quote, .contact-section) .fluentform .el-upload__file {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border-subtle, #e6eaf0);
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.5;
}

:is(.pp-quote, .contact-section) .fluentform .el-upload__file:last-child {
  border-bottom: 0;
}

:is(.pp-quote, .contact-section) .fluentform .el-upload__name {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-line-ink, #212226);
}

:is(.pp-quote, .contact-section) .fluentform .el-upload__size {
  margin-left: auto;
  flex: none;
  color: var(--ink-secondary, #5f6368);
}

:is(.pp-quote, .contact-section) .fluentform .el-upload__file--busy .el-upload__size {
  font-style: italic;
}

:is(.pp-quote, .contact-section) .fluentform .el-upload__remove {
  flex: none;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-subtle, #e6eaf0);
  border-radius: 0;
  background: var(--color-white, #fff);
  font-size: 18px;
  line-height: 1;
  color: var(--color-line-ink, #212226);
  cursor: pointer;
}

:is(.pp-quote, .contact-section) .fluentform .el-upload__remove:hover {
  border-color: #b42318;
  color: #b42318;
}

:is(.pp-quote, .contact-section) .fluentform .el-upload__error {
  margin: 0;
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.5;
  font-weight: 600;
  color: #b42318;
}