.bne-embedded-form {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 1.25rem;
	width: 100%;
	max-width: 100%;
}

.bne-form-field {
	display: grid;
	grid-column: span var(--bne-grid-span, 12);
	gap: 0.45rem;
	min-width: 0;
}

.bne-form-required { 
	color: red;
	margin-left: 0.2em;
}

.bne-form-label {
	font-weight: bold;
}

.bne-embedded-form input:not([type="checkbox"]):not([type="radio"]),
.bne-embedded-form select,
.bne-embedded-form textarea,
.bne-embedded-form button {
	box-sizing: border-box;
	max-width: 100%;
}

.bne-embedded-form input:not([type="checkbox"]):not([type="radio"]),
.bne-embedded-form select,
.bne-embedded-form textarea {
	width: 100%;
}

.bne-form-compound {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: 0.85rem;
}

.bne-form-subfield {
	display: grid;
	gap: 0.35rem;
}

.bne-form-choices,
.bne-form-choice-list {
	display: grid;
	grid-template-columns: repeat(var(--bne-choice-columns, 1), minmax(0, 1fr));
	gap: 0.55rem 1rem;
}

.bne-form-choice-list--down {
	display: block;
	column-count: var(--bne-choice-columns, 1);
	column-gap: 1rem;
}

.bne-form-choice-list--down .bne-form-choice {
	break-inside: avoid;
	margin-bottom: 0.55rem;
}

.bne-form-choice {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
}

.bne-form-choice input {
	margin-top: 0.2em;
}

.bne-form-field--multiselect select {
	min-height: 8rem;
}

.bne-embedded-form > .bne-form-actions,
.bne-embedded-form > .bne-form-status,
.bne-embedded-form > .bne-form-confirmation,
.bne-embedded-form > .bne-form-honeypot {
	grid-column: 1 / -1;
}

.bne-form-honeypot {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

[hidden] {
	display: none !important;
}

/*
 * Optional basic preset.
 *
 * Add data-style="basic" to the embed container to enable these styles.
 * CSS variables may be overridden on the child site.
 */
.bne-embedded-form--basic {
	--bne-form-accent: #1d4ed8;
	--bne-form-background: #ffffff;
	--bne-form-text: #0f172a;
	--bne-form-muted: #475569;
	--bne-form-border: #cbd5e1;
	--bne-form-error: #b91c1c;
	--bne-form-radius: 0.375rem;
	--bne-form-control-padding: 0.75rem;
	max-width: 46rem;
	color: var(--bne-form-text);
}

.bne-embedded-form--basic .bne-form-label,
.bne-embedded-form--basic .bne-form-subfield > span {
	font-weight: 600;
}

.bne-embedded-form--basic .bne-form-required,
.bne-embedded-form--basic .bne-form-error {
	color: var(--bne-form-error);
}

.bne-embedded-form--basic input:not([type="checkbox"]):not([type="radio"]),
.bne-embedded-form--basic select,
.bne-embedded-form--basic textarea {
	padding: var(--bne-form-control-padding);
	border: 1px solid var(--bne-form-border);
	border-radius: var(--bne-form-radius);
	background: var(--bne-form-background);
	color: var(--bne-form-text);
	box-shadow: none;
}

.bne-embedded-form--basic textarea {
	min-height: 8rem;
	resize: vertical;
}

.bne-embedded-form--basic input:focus,
.bne-embedded-form--basic select:focus,
.bne-embedded-form--basic textarea:focus {
	outline: 2px solid color-mix(in srgb, var(--bne-form-accent) 35%, transparent);
	outline-offset: 1px;
	border-color: var(--bne-form-accent);
}

.bne-embedded-form--basic .bne-form-description {
	color: var(--bne-form-muted);
	font-size: 0.9em;
}

.bne-embedded-form--basic .bne-form-field.has-error input,
.bne-embedded-form--basic .bne-form-field.has-error select,
.bne-embedded-form--basic .bne-form-field.has-error textarea {
	border-color: var(--bne-form-error);
}

.bne-embedded-form--basic .bne-form-actions button {
	padding: 0.75rem 1.25rem;
	border: 1px solid var(--bne-form-accent);
	border-radius: var(--bne-form-radius);
	background: var(--bne-form-accent);
	color: #ffffff;
	font-weight: 600;
	cursor: pointer;
}

.bne-embedded-form--basic .bne-form-actions button:hover {
	filter: brightness(0.92);
}

.bne-embedded-form--basic .bne-form-actions button:disabled {
	cursor: wait;
	opacity: 0.7;
}

.bne-embedded-form--basic .bne-form-confirmation {
	padding: 1rem;
	border: 1px solid var(--bne-form-border);
	border-radius: var(--bne-form-radius);
	background: var(--bne-form-background);
}

@media (max-width: 640px) {
	.bne-form-field {
		grid-column: 1 / -1;
	}

	.bne-form-choice-list,
	.bne-form-choice-list--down {
		display: grid;
		grid-template-columns: 1fr;
		column-count: auto;
	}
}


.bne-embedded-form button,
.bne-embedded-form input[type="submit"],
.bne-embedded-form input[type="button"] {
	cursor: pointer;
}

/*
 * Native required-field highlighting is activated only after the user
 * attempts to submit the form.
 */
.bne-embedded-form.bne-form-was-submitted
	input:not([type="checkbox"]):not([type="radio"]):required:invalid,
.bne-embedded-form.bne-form-was-submitted
	select:required:invalid,
.bne-embedded-form.bne-form-was-submitted
	textarea:required:invalid {
	border-color: #b91c1c;
}

/*
 * Checkbox and radio groups receive the error border on their field wrapper.
 */
.bne-embedded-form.bne-form-was-submitted
	.bne-form-field:has(input[type="checkbox"]:required:invalid),
.bne-embedded-form.bne-form-was-submitted
	.bne-form-field:has(input[type="radio"]:required:invalid) {
	outline: 1px solid #b91c1c;
	outline-offset: 0.35rem;
}