/* ==========================================================================
   Quality Products – Gravity Forms (formulierklasse qp-gf), zoals het offerteformulier in Figma
   ========================================================================== */
body.qp .qp-gf .gform_fields, body.qp .gform_wrapper.qp-gf_wrapper .gform_fields { grid-column-gap: 23px !important; grid-row-gap: clamp(18px, 1.8vw, 31px) !important; }
body.qp .gform_wrapper.qp-gf_wrapper .gfield_label, body.qp .gform_wrapper.qp-gf_wrapper legend.gfield_label {
	font-family: var(--qp-font) !important; font-weight: 500 !important; font-size: var(--qp-tekst) !important; line-height: 1.5 !important; color: var(--qp-grijs) !important; margin: 0 0 13px !important; padding: 0 !important;
}
body.qp .gform_wrapper.qp-gf_wrapper .gfield_required { color: var(--qp-rood) !important; font-size: .8em; }
body.qp .gform_wrapper.qp-gf_wrapper .gfield_required .gfield_required_text { display: none; }
body.qp .gform_wrapper.qp-gf_wrapper .gfield_required::after { content: "*"; }
body.qp .gform_wrapper.qp-gf_wrapper .gform_required_legend { display: none; }
body.qp .gform_wrapper.qp-gf_wrapper input:not([type=checkbox]):not([type=radio]):not([type=submit]),
body.qp .gform_wrapper.qp-gf_wrapper textarea {
	width: 100% !important; background: var(--qp-bg) !important; border: 1px solid var(--qp-beige) !important; border-radius: 0 !important; box-shadow: none !important;
	font-family: var(--qp-font) !important; font-weight: 500 !important; font-size: var(--qp-tekst) !important; line-height: 1.5 !important; color: var(--qp-navy) !important;
	padding: 14px 18px !important; min-height: clamp(52px, 3.53vw, 61px); margin: 0 !important;
}
body.qp .gform_wrapper.qp-gf_wrapper textarea { height: clamp(150px, 10.94vw, 189px) !important; min-height: 0; resize: vertical; }
body.qp .gform_wrapper.qp-gf_wrapper input::placeholder, body.qp .gform_wrapper.qp-gf_wrapper textarea::placeholder { color: var(--qp-grijs); opacity: .5; }
body.qp .gform_wrapper.qp-gf_wrapper input:focus, body.qp .gform_wrapper.qp-gf_wrapper textarea:focus { border-color: var(--qp-blauw) !important; outline: none; background: #fff !important; }

/* Keuzes als knoppen ("Een vraag over?") */
body.qp .gform_wrapper.qp-gf_wrapper .qp-keuzes .gfield_radio { display: flex !important; flex-wrap: wrap; gap: 11px 12px; }
body.qp .gform_wrapper.qp-gf_wrapper .qp-keuzes .gchoice { position: relative; margin: 0 !important; padding: 0 !important; display: block; }
body.qp .gform_wrapper.qp-gf_wrapper .qp-keuzes .gchoice input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
body.qp .gform_wrapper.qp-gf_wrapper .qp-keuzes .gchoice label {
	display: inline-flex !important; align-items: center; min-height: clamp(52px, 3.53vw, 61px); padding: 10px clamp(16px, 1.22vw, 21px) !important; margin: 0 !important; max-width: none !important;
	background: #fff; border: 1px solid var(--qp-grijs); color: var(--qp-grijs); cursor: pointer;
	font-family: var(--qp-font) !important; font-weight: 500 !important; font-size: var(--qp-tekst) !important; line-height: 1.2 !important;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
body.qp .gform_wrapper.qp-gf_wrapper .qp-keuzes .gchoice label::before, body.qp .gform_wrapper.qp-gf_wrapper .qp-keuzes .gchoice label::after { display: none !important; }
body.qp .gform_wrapper.qp-gf_wrapper .qp-keuzes .gchoice label:hover { border-color: var(--qp-rood); color: var(--qp-rood); }
body.qp .gform_wrapper.qp-gf_wrapper .qp-keuzes .gchoice input:checked + label { background: var(--qp-rood); border-color: var(--qp-rood); color: #fff; }
body.qp .gform_wrapper.qp-gf_wrapper .qp-keuzes .gchoice input:focus-visible + label { outline: 2px solid var(--qp-blauw); outline-offset: 2px; }

/* Toestemming */
body.qp .gform_wrapper.qp-gf_wrapper .ginput_container_consent { display: flex; gap: 10px; align-items: flex-start; }
body.qp .gform_wrapper.qp-gf_wrapper .ginput_container_consent input { margin-top: 5px !important; accent-color: var(--qp-rood); width: 18px; height: 18px; flex: 0 0 18px; }
body.qp .gform_wrapper.qp-gf_wrapper .ginput_container_consent label { font-size: 15px !important; line-height: 1.5 !important; color: var(--qp-grijs) !important; font-weight: 500 !important; }
body.qp .gform_wrapper.qp-gf_wrapper .gfield--type-consent > .gfield_label, body.qp .gform_wrapper.qp-gf_wrapper .gfield--type-consent > legend { display: none !important; }

/* Verzendknop */
body.qp .gform_wrapper.qp-gf_wrapper .gform_footer { margin: clamp(20px, 1.56vw, 27px) 0 0 !important; padding: 0 !important; }
body.qp .gform_wrapper.qp-gf_wrapper .gform_footer .qp-knop { min-width: clamp(180px, 12.04vw, 208px); }
body.qp .gform_wrapper.qp-gf_wrapper .gform_ajax_spinner { margin-left: 12px; }

/* Meldingen */
body.qp .gform_wrapper.qp-gf_wrapper .gfield_validation_message, body.qp .gform_wrapper.qp-gf_wrapper .validation_message { background: transparent !important; border: 0 !important; padding: 6px 0 0 !important; color: var(--qp-rood) !important; font-size: 14px !important; }
body.qp .gform_wrapper.qp-gf_wrapper .gform_validation_errors { background: #fff5f4 !important; border: 1px solid var(--qp-rood) !important; border-radius: 0 !important; box-shadow: none !important; }
body.qp .gform_wrapper.qp-gf_wrapper .gform_validation_errors h2 { font-family: var(--qp-font) !important; font-size: 15px !important; color: var(--qp-rood) !important; }
body.qp .gform_confirmation_message { font-family: var(--qp-font); font-weight: 700; font-size: var(--qp-h3); color: var(--qp-navy); }

@media (max-width: 640px) {
	body.qp .gform_wrapper.qp-gf_wrapper .gform_fields { grid-template-columns: minmax(0, 1fr) !important; }
	body.qp .gform_wrapper.qp-gf_wrapper .gfield { grid-column: 1 / -1 !important; }
	body.qp .gform_wrapper.qp-gf_wrapper .gform_footer .qp-knop { width: 100%; }
}

/* Salient zet labels standaard in hoofdletters; het design niet */
body.qp .gform_wrapper.qp-gf_wrapper .gfield_label, body.qp .gform_wrapper.qp-gf_wrapper legend.gfield_label { text-transform: none !important; letter-spacing: 0 !important; }
body.qp .gform_wrapper.qp-gf_wrapper .qp-keuzes .gfield_radio { gap: 10px; }
body.qp .gform_wrapper.qp-gf_wrapper .qp-keuzes .gchoice label { padding: 10px clamp(12px, 1.1vw, 19px) !important; }
@media (min-width: 1000px) {
	body.qp .gform_wrapper.qp-gf_wrapper .qp-keuzes .gfield_radio { flex-wrap: nowrap; gap: 10px; }
	body.qp .gform_wrapper.qp-gf_wrapper .qp-keuzes .gchoice label { padding: 10px clamp(10px, .9vw, 19px) !important; font-size: clamp(15px, 1.1vw, 19px) !important; white-space: nowrap; }
}