.mumbo-aa-status {
	display: block;
	margin-top: 4px;
	font-size: 0.85em;
	line-height: 1.3;
	min-height: 1.2em;
}

.mumbo-aa-status.is-loading {
	color: #777;
}

.mumbo-aa-status.is-loading::before {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 6px;
	border: 2px solid #ccc;
	border-top-color: #555;
	border-radius: 50%;
	animation: mumbo-aa-spin 0.7s linear infinite;
	vertical-align: -1px;
}

.mumbo-aa-status.is-success {
	color: #1e7e34;
}

.mumbo-aa-status.is-error {
	color: #b32d2e;
}

/*
 * Locked (readonly) fields keep the theme's own styling on purpose.
 * The class is only used by JS; no visual override here.
 */
input.mumbo-aa-locked {
	cursor: default;
}

/* Make sure the row after the street/number pair clears the floats. */
.woocommerce form .form-row.mumbo-aa-number + .form-row {
	clear: both;
}

@keyframes mumbo-aa-spin {
	to { transform: rotate(360deg); }
}

/*
 * Optie "postcode en huisnummer op één regel": dwing de kolomindeling ook af
 * in thema's die form-row-first/last negeren (o.a. grid-layouts).
 */
body.mumbo-aa-inline .woocommerce form .form-row.mumbo-aa-postcode {
	float: left;
	width: 55%;
	clear: both;
}
body.mumbo-aa-inline .woocommerce form .form-row.mumbo-aa-number {
	float: right;
	width: 42%;
	clear: none;
}

/* =========================================================================
 * Indeling postcode | nr. | toev.
 *
 * De velden worden door de plugin in een eigen container (.mumbo-aa-row)
 * gezet. Die container is van ons, dus geen enkel thema bepaalt hier de
 * indeling — daarmee werkt het overal hetzelfde, ongeacht of het thema
 * float, flex of grid gebruikt.
 * ========================================================================= */

.mumbo-aa-row {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	clear: both;
	/* In grid-layouts de volle breedte innemen in plaats van één kolom. */
	grid-column: 1 / -1;
	/* In flex-layouts niet meekrimpen met de andere velden. */
	flex: 0 0 100%;
}

/* Binnen onze container hebben themabreedtes geen zeggenschap meer. */
.mumbo-aa-row > .form-row {
	float: none !important;
	clear: none !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	box-sizing: border-box;
}

.mumbo-aa-row > .form-row input,
.mumbo-aa-row > .form-row select {
	width: 100%;
	box-sizing: border-box;
}

/* Verhoudingen: postcode het breedst, nr. en toev. compact. */
.mumbo-aa-row-3 > .mumbo-aa-postcode { flex: 1 1 36%; }
.mumbo-aa-row-3 > .mumbo-aa-number   { flex: 1 1 38%; }
.mumbo-aa-row-3 > .mumbo-aa-suffix   { flex: 1 1 26%; }

/* Labels mogen afbreken in plaats van het veld op te rekken. */
.mumbo-aa-row > .form-row label { overflow-wrap: break-word; hyphens: auto; }

.mumbo-aa-row-2 > .mumbo-aa-postcode { flex: 1 1 58%; }
.mumbo-aa-row-2 > .mumbo-aa-number   { flex: 1 1 42%; }

/* Smalle schermen: postcode op een eigen regel, nr. en toev. eronder. */
@media (max-width: 480px) {
	.mumbo-aa-row-3 {
		flex-wrap: wrap;
	}
	.mumbo-aa-row-3 > .mumbo-aa-postcode {
		flex: 1 1 100%;
	}
	.mumbo-aa-row-3 > .mumbo-aa-number,
	.mumbo-aa-row-3 > .mumbo-aa-suffix {
		flex: 1 1 calc(50% - 6px);
	}
}

/*
 * Zorg dat alles ná de adresvelden weer netjes op een eigen regel begint.
 * Onze container is een blok-element; zonder deze regels kan een kop of
 * vinkje (zoals "Verzenden naar een ander adres") naast een zwevend veld
 * belanden in thema's die met floats werken.
 */
.woocommerce-shipping-fields,
.woocommerce-additional-fields,
.woocommerce-account-fields,
.woocommerce form .form-row.mumbo-aa-street,
.woocommerce-checkout-review-order,
#order_review_heading {
	clear: both !important;
}

/* De adresvelden zelf sluiten hun eigen zwevende rijen af. */
.woocommerce-billing-fields__field-wrapper::after,
.woocommerce-shipping-fields__field-wrapper::after,
.woocommerce-address-fields__field-wrapper::after {
	content: "";
	display: table;
	clear: both;
}

/* =========================================================================
 * Terugval zonder JavaScript
 *
 * Zolang de velden nog niet gegroepeerd zijn (JS uitgeschakeld of nog niet
 * uitgevoerd), krijgen ze de volle breedte. Ze staan dan onder elkaar in
 * plaats van scheef naast elkaar; functioneel verandert er niets.
 * ========================================================================= */
.form-row.mumbo-aa-postcode:not(.mumbo-aa-row > *),
.form-row.mumbo-aa-number:not(.mumbo-aa-row > *),
.form-row.mumbo-aa-suffix:not(.mumbo-aa-row > *) {
	clear: both;
}