/* Elementor Pro Form in the Nazenprint look (Figma NZ/Form field, NZ/Chip,
   NZ/Checkbox). Applies to forms with the CSS class "nz-form"; colours and
   sizes that have a Form widget control are set in the widget, this file
   covers what the widget cannot style. Selectors carry the widget class so
   they outrank the per-widget rules Elementor prints for the same parts. */

/* Text fields: 48 px tall (12 + 24 + 12), 16/24 text. */
.elementor-widget-form.nz-form .elementor-form .elementor-field-group .elementor-field-textual {
	min-height: 48px;
	padding: 11px 16px;
	font-size: var(--nz-font-size-body);
	line-height: var(--nz-line-height-body);
}

.elementor-widget-form.nz-form .elementor-form .elementor-field-group textarea.elementor-field-textual {
	min-height: 120px;
	resize: vertical;
}

.elementor-widget-form.nz-form .elementor-form .elementor-field-textual::placeholder {
	color: var(--nz-color-text-muted);
	opacity: 1;
}

.elementor-widget-form.nz-form .elementor-form .elementor-select-wrapper select {
	padding-inline-end: 44px;
}

/* Checkbox groups shown as chips (field CSS class "nz-chips", which Pro
   puts on the options wrapper). The real
   checkbox stays in the page for keyboard and screen readers. */
.elementor-widget-form.nz-form .elementor-form .elementor-field-group:has(> .nz-chips) > .elementor-field-label {
	padding-bottom: 12px;
}

.elementor-widget-form.nz-form .elementor-form .elementor-field-group .elementor-field-subgroup.nz-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.elementor-widget-form.nz-form .elementor-form .elementor-field-group .elementor-field-subgroup.nz-chips .elementor-field-option {
	position: relative;
	margin: 0;
	padding: 0;
}

.elementor-widget-form.nz-form .elementor-form .elementor-field-group .elementor-field-subgroup.nz-chips .elementor-field-option input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.elementor-widget-form.nz-form .elementor-form .elementor-field-group .elementor-field-subgroup.nz-chips .elementor-field-option label {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 34px;
	margin: 0;
	padding: 6px 12px;
	border: 1px solid var(--nz-color-border-default);
	border-radius: var(--nz-radius-pill, 999px);
	background-color: var(--nz-color-surface-page);
	font-family: var(--nz-font-family);
	font-size: var(--nz-font-size-small);
	font-weight: 600;
	line-height: var(--nz-line-height-small);
	color: var(--nz-color-text-secondary);
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s;
}

.elementor-widget-form.nz-form .elementor-form .elementor-field-group .elementor-field-subgroup.nz-chips .elementor-field-option input:hover + label {
	border-color: var(--nz-color-border-strong);
}

.elementor-widget-form.nz-form .elementor-form .elementor-field-group .elementor-field-subgroup.nz-chips .elementor-field-option input:checked + label {
	border-color: var(--nz-color-surface-accent);
	background-color: var(--nz-color-surface-accent);
	color: var(--nz-color-text-on-accent);
}

.elementor-widget-form.nz-form .elementor-form .elementor-field-group .elementor-field-subgroup.nz-chips .elementor-field-option input:focus-visible + label {
	outline: 3px solid rgba(20, 113, 115, 0.45);
	outline-offset: 2px;
}

/* Consent checkbox: 20 px teal box (NZ/Checkbox). */
.elementor-widget-form.nz-form .elementor-form .elementor-field-type-acceptance .elementor-field-subgroup {
	display: block;
}

.elementor-widget-form.nz-form .elementor-form .elementor-field-type-acceptance .elementor-field-option {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.elementor-widget-form.nz-form .elementor-form .elementor-field-type-acceptance input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--nz-color-surface-brand);
}

.elementor-widget-form.nz-form .elementor-form .elementor-field-type-acceptance label {
	font-family: var(--nz-font-family);
	font-size: var(--nz-font-size-small);
	line-height: var(--nz-line-height-small);
	color: var(--nz-color-text-secondary);
}

/* Submit button keeps its arrow in the label colour. */
.elementor-widget-form.nz-form .elementor-form .elementor-button .elementor-button-icon svg {
	width: 20px;
	height: 20px;
}

.elementor-widget-form.nz-form .elementor-form .elementor-button .elementor-button-icon svg path[fill="none"] {
	fill: none;
}

/* Select arrow: the Figma chevron (Icon/chevron-down) instead of the caret. */
.elementor-widget-form.nz-form .elementor-form .select-caret-down-wrapper {
	inset-inline-end: 16px;
	width: 20px;
	height: 20px;
	background-color: var(--nz-color-text-primary);
	-webkit-mask: url("../icons/chevron-down.svg") center / 20px 20px no-repeat;
	mask: url("../icons/chevron-down.svg") center / 20px 20px no-repeat;
}

.elementor-widget-form.nz-form .elementor-form .select-caret-down-wrapper svg {
	display: none;
}