/* Builder forms. They take the site's own field styles (.field, .form-grid,
   .button); a form's design sets the --mqf-* properties below. */
.mqf { --mqf-gap: 16px; font-family: var(--mqf-font, inherit); color: var(--mqf-text, inherit); background: var(--mqf-bg, transparent); padding: var(--mqf-pad, 0); border-radius: var(--mqf-radius, 0); max-width: var(--mqf-max, none); box-shadow: var(--mqf-shadow, none); }
.mqf .mqf__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--mqf-gap); }
.mqf .mqf__grid > .mqf__cell { grid-column: span 6; min-width: 0; }
.mqf .mqf__grid > .mqf-w-half { grid-column: span 3; }
.mqf .mqf__grid > .mqf-w-third { grid-column: span 2; }
.mqf .mqf__grid > .mqf-w-two-thirds { grid-column: span 4; }
.mqf .mqf__grid > .mqf__cell[hidden], .mqf [data-mqf-if][hidden] { display: none; }
.mqf .mqf__cell > .field { height: 100%; }
.mqf .field > span, .mqf .field legend > span { color: var(--mqf-label, var(--muted)); font-size: var(--mqf-label-size, 9px); font-weight: var(--mqf-label-weight, 800); text-transform: var(--mqf-label-case, uppercase); letter-spacing: var(--mqf-label-spacing, .11em); }
.mqf .field input, .mqf .field select, .mqf .field textarea { background-color: var(--mqf-input-bg, color-mix(in srgb, var(--surface-solid) 64%, transparent)); border-color: var(--mqf-input-border, var(--line)); color: var(--mqf-input-text, var(--heading)); border-radius: var(--mqf-input-radius, 15px); }
.mqf .field input:not([type=checkbox]):not([type=radio]):not([type=file]), .mqf .field select { min-height: var(--mqf-input-h, 53px); }
.mqf .field input:focus, .mqf .field select:focus, .mqf .field textarea:focus { border-color: var(--mqf-focus, var(--blue)); }
.mqf .field__hint, .mqf small { color: var(--mqf-help, var(--muted-2)); font-size: 11px; }
.mqf fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.mqf fieldset.field legend { padding: 0; margin-bottom: 9px; }
.mqf__choice { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; cursor: pointer; color: var(--text); font-size: 13px; line-height: 1.45; }
.mqf__choice input { width: 18px; height: 18px; min-height: 0 !important; margin-top: 1px; accent-color: var(--mqf-accent, var(--blue)); flex: none; }
.mqf__heading { margin: 8px 0 0; color: var(--mqf-heading, var(--heading)); font-size: var(--mqf-heading-size, 20px); text-transform: var(--mqf-heading-case, none); }
.mqf__paragraph { margin: 0; color: var(--muted-2); font-size: 12px; line-height: 1.6; }
.mqf__section .mqf__paragraph { font-size: 11px; }
.mqf__snippet :where(p) { margin: 0 0 .6em; }
.mqf__section { margin-top: 16px; }
.mqf__section:not(.contact-form__more) { border: 0; padding: 0; }
.mqf__section-title { list-style: none; cursor: default; color: var(--heading); font-weight: 700; font-size: 14px; margin-bottom: 12px; }
.mqf__section-title::-webkit-details-marker { display: none; }
.mqf__section > .form-grid { padding-bottom: 16px; }
.mqf__scale-row { display: flex; flex-wrap: wrap; gap: 6px; }
.mqf__scale-row label { position: relative; flex: 1 1 36px; max-width: 56px; }
.mqf__scale-row input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; min-height: 0 !important; }
.mqf__scale-row span { display: grid; place-items: center; height: 44px; border: 1px solid var(--mqf-input-border, var(--line)); border-radius: 12px; color: var(--heading); font-weight: 700; font-size: 13px; transition: background .2s, border-color .2s, color .2s; }
.mqf__scale-row input:checked + span { background: var(--mqf-accent, var(--blue)); border-color: var(--mqf-accent, var(--blue)); color: #fff; }
.mqf__scale-row input:focus-visible + span { outline: 2px solid var(--mqf-accent, var(--blue)); outline-offset: 2px; }
.mqf__scale--rating .mqf__scale-row label { flex: 0 0 44px; }
.mqf__scale-ends { display: flex; justify-content: space-between; margin-top: 6px; }
.mqf__matrix-wrap { overflow-x: auto; }
.mqf__matrix table { width: 100%; border-collapse: collapse; font-size: 12px; }
.mqf__matrix th, .mqf__matrix td { padding: 9px 8px; border-bottom: 1px solid var(--line); text-align: center; color: var(--text); }
.mqf__matrix tbody th { text-align: start; font-weight: 600; }
.mqf__matrix input { min-height: 0 !important; width: 18px; height: 18px; accent-color: var(--mqf-accent, var(--blue)); }
.mqf__repeat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) 40px; gap: 10px; align-items: end; margin-bottom: 10px; }
.mqf__repeat-remove { height: 44px; border: 1px solid var(--line); border-radius: 12px; background: none; color: var(--muted); cursor: pointer; font-size: 18px; }
.mqf__signature canvas { width: 100%; height: 160px; border: 1px dashed var(--mqf-input-border, var(--line-strong)); border-radius: var(--mqf-input-radius, 15px); background: var(--mqf-input-bg, color-mix(in srgb, var(--surface-solid) 64%, transparent)); touch-action: none; color: var(--heading); }
.mqf__sig-clear { justify-self: start; border: 0; background: none; color: var(--muted); font-size: 12px; cursor: pointer; text-decoration: underline; padding: 0; }
.mqf__progress { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 20px; counter-reset: s; flex-wrap: wrap; }
.mqf__progress li { display: flex; align-items: center; gap: 8px; flex: 1 1 0; min-width: 110px; padding: 8px 0; border-top: 3px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 700; }
.mqf__progress li span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--line); color: var(--heading); font-size: 11px; }
.mqf__progress li.is-current, .mqf__progress li.is-done { border-color: var(--mqf-accent, var(--blue)); color: var(--heading); }
.mqf__progress li.is-current span, .mqf__progress li.is-done span { background: var(--mqf-accent, var(--blue)); color: #fff; }
.mqf__step-title { margin: 0 0 14px; color: var(--heading); font-size: 18px; }
.mqf__nav { display: flex; gap: 10px; justify-content: space-between; margin-top: 20px; }
.mqf__nav [data-mqf-next] { margin-inline-start: auto; }
.mqf__submit { background: var(--mqf-btn-bg, var(--blue)); color: var(--mqf-btn-text, #fff); border-radius: var(--mqf-btn-radius, 999px); width: var(--mqf-btn-w, auto); min-height: var(--mqf-btn-h, 0); justify-content: center; }
.mqf--inline .mqf__grid { display: flex; flex-wrap: wrap; align-items: end; }
.mqf--inline .mqf__grid > .mqf__cell { flex: 1 1 180px; }
.mqf--horizontal .field:not(fieldset) { grid-template-columns: minmax(120px, 30%) 1fr; align-items: center; }
.mqf-page__card { max-width: 760px; margin: 0 auto; padding: clamp(22px, 4vw, 44px); border: 1px solid var(--line); border-radius: 26px; background: color-mix(in srgb, var(--surface-solid) 72%, transparent); }
.mqf-page__title { margin: 0 0 10px; font-size: clamp(28px, 4vw, 42px); }
.mqf-page__intro { margin: 0 0 26px; color: var(--muted); }
.mqf .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mqf .mqf-req[hidden] { display: none; }
@media (max-width: 720px) {
  .mqf .mqf__grid > .mqf__cell { grid-column: 1 / -1 !important; }
  .mqf--horizontal .field:not(fieldset) { grid-template-columns: 1fr; }
}

/* Design → Button → Text size, only when a form sets it. */
.mqf[style*="--mqf-btn-size"] .mqf__submit { font-size: var(--mqf-btn-size); }
/* The form's title and intro, when the form shows them (Settings: show title). */
.mqf__title { margin: 0 0 8px; color: var(--mqf-title, var(--heading)); font-size: var(--mqf-title-size, 1.5em); line-height: 1.2; }
.mqf__intro { margin: 0 0 18px; color: var(--mqf-help, var(--muted)); }
/* Design → Choices → Style "card": each checkbox or radio is a bordered card, in the set number of columns. */
.mqf--choice-cards .mqf__choices { display: grid; grid-template-columns: repeat(var(--mqf-choice-cols, 1), minmax(0, 1fr)); gap: 10px; }
.mqf--choice-cards .mqf__choices > legend { grid-column: 1 / -1; }
.mqf--choice-cards .mqf__choices > .field__hint { grid-column: 1 / -1; }
.mqf--choice-cards .mqf__choice { align-items: center; min-height: 54px; padding: 12px 14px; border: 1px solid var(--mqf-choice-border, var(--mqf-input-border, var(--line))); border-radius: var(--mqf-choice-radius, var(--mqf-input-radius, 14px)); background: var(--mqf-choice-bg, transparent); font-weight: 600; transition: border-color .2s, background .2s, box-shadow .2s; }
.mqf--choice-cards .mqf__choice:has(input:checked) { border-color: var(--mqf-accent, var(--blue)); box-shadow: inset 0 0 0 1px var(--mqf-accent, var(--blue)); background: color-mix(in srgb, var(--mqf-accent, var(--blue)) 6%, var(--mqf-choice-bg, transparent)); }
.mqf--choice-cards .mqf__choice input { margin-top: 0; }
/* Design → Headings → Numbered: each heading gets its step number. */
.mqf--numbered { counter-reset: mqf-heading; }
.mqf--numbered .mqf__heading { counter-increment: mqf-heading; display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 22px; border-top: 1px solid var(--line); }
.mqf--numbered .mqf__step > .mqf__grid:first-of-type > .mqf__cell:first-of-type .mqf__heading { margin-top: 0; padding-top: 6px; border-top: 0; }
.mqf--numbered .mqf__heading::before { content: counter(mqf-heading); display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--mqf-accent, var(--blue)); color: #fff; font-size: 13px; letter-spacing: 0; }
@media (max-width: 600px) {
  .mqf .mqf__grid > .mqf__cell { grid-column: span 6; }
  .mqf--choice-cards .mqf__choices { grid-template-columns: minmax(0, 1fr); }
}