/*
 * Forminator forms (design style "None") in the design system's form card (#11).
 * pbu_form_markup() adds pku-form, pku-field, pku-input and the pku-i--* icon
 * classes, so bundle.css styles most of it. This file covers Forminator's own
 * structure. Values match bundle.css (.pku-control, .pku-seg, .pku-check, .pku-notice).
 */
.forminator-ui.pku-form { --pbu-alert: var(--i); }
.forminator-ui.pku-form .forminator-row { display: contents; }
.forminator-ui.pku-form .forminator-col { position: relative; min-width: 0; }
.pku-form .pku-field { position: relative; }
.pku-form .forminator-required { display: none; }
.pku-form .pku-field > .forminator-label { padding: 0; font: 600 15px/1.2 var(--font-sans); color: var(--ink); }
.pku-form .pku-field > div:has(.forminator-description) { order: 1; }
.pku-form .forminator-description { display: block; margin: 0; font-size: 14px; line-height: 1.4; color: var(--mute); }

/* Icon inside the input, and the chevron on selects (input top = 18px label + 10px gap) */
.pku-form .forminator-col:has(input.pku-input, select.pku-input)::before,
.pku-form .pku-field:has(> select)::after { content: ""; position: absolute; z-index: 1; top: 44px; left: 14px; width: 20px; height: 20px; background: var(--body); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; pointer-events: none; }
.pku-form .pku-field:has(> select)::after { left: auto; right: 14px; }

/* Errors: danger border, alert icon and words */
.pku-form .forminator-has_error .pku-input { border-color: var(--danger); }
.pku-form .forminator-error-message { order: 2; display: flex; gap: 6px; align-items: center; margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--danger); }
.pku-form .forminator-error-message::before { content: ""; flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--pbu-alert) center / contain no-repeat; mask: var(--pbu-alert) center / contain no-repeat; }

/* "I want to": equal tiles, rows under 460px */
.pbu-want .pku-field { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.pbu-want .forminator-label { grid-column: 1 / -1; }
.pku-event .pbu-want .forminator-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pbu-want .forminator-radio { position: relative; display: grid; margin: 0; }
.pbu-want .forminator-radio input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pbu-want .forminator-radio-bullet { display: none; }
.pbu-want .forminator-radio-label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 84px; padding: 14px 12px; border: 2px solid var(--ink); border-radius: var(--radius-md); font: 600 15px/1.25 var(--font-sans); text-align: center; }
.pbu-want .forminator-radio-label::before { content: ""; flex: none; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.pbu-want input:checked ~ .forminator-radio-label { background: var(--ink); color: var(--ball); }
.pbu-want input:not(:checked):hover ~ .forminator-radio-label { background: var(--canvas); }
.pbu-want input:focus-visible ~ .forminator-radio-label { outline: 3px solid var(--focus); outline-offset: 3px; }
@container formcard (max-width: 459px) {
	.pbu-want .pku-field { grid-template-columns: 1fr; }
	.pbu-want .forminator-radio-label { flex-direction: row; justify-content: flex-start; min-height: 52px; text-align: left; gap: 12px; }
}

/* Consent sits apart from the fields, under a court line */
.forminator-ui.pku-form .pbu-consent { grid-column: 1 / -1; padding-top: 24px; background: linear-gradient(90deg, var(--line) 62%, transparent 0) left top / 16px 2px repeat-x; }
.pbu-consent .forminator-label, .pbu-consent .forminator-checkbox-box { display: none; }
.pbu-consent .forminator-checkbox { display: grid; font-weight: 400; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 15px; line-height: 1.45; color: var(--body); }
.pbu-consent .forminator-checkbox input { width: 24px; height: 24px; margin: 0; accent-color: var(--ink); }
.pbu-consent .forminator-checkbox input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Submit */
.forminator-ui.pku-form .forminator-row-last .forminator-col { grid-column: 1 / -1; padding-top: 4px; }
.pku-form .forminator-row-last .pku-field { justify-items: center; }
.pku-form .forminator-button-submit { min-width: min(100%, 280px); }
.pku-form .forminator-button-submit::after { content: ""; flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; transition: transform .15s ease; }
.pku-form .forminator-button-submit:hover::after { transform: translateX(3px); }
.pku-form .forminator-button-submit:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Notices: the confirmation replaces the form */
.pku-form .forminator-response-message:not(.forminator-show) { display: none; }
.pku-form .forminator-response-message.forminator-show { grid-column: 1 / -1; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; padding: 16px 18px; border: 2px solid currentColor; border-radius: var(--radius-md); background: var(--white); font-size: 15px; line-height: 1.5; color: var(--ink); }
.pku-form .forminator-response-message.forminator-show::before { content: ""; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--pbu-alert) center / contain no-repeat; mask: var(--pbu-alert) center / contain no-repeat; }
.pku-form .forminator-response-message p { margin: 0; color: var(--ink); }
.pku-form .forminator-response-message:focus { outline: none; }
.pku-form .forminator-response-message strong { display: block; color: inherit; }
.pku-form .forminator-response-message.forminator-error { color: var(--danger); }
.pku-form .forminator-response-message.forminator-success { color: var(--success); }
.pku-form .forminator-response-message.forminator-success::before { -webkit-mask-image: var(--i); mask-image: var(--i); }
.pku-form:has(.forminator-success.forminator-show) > :not(.forminator-response-message) { display: none; }