/*
 * Postcode NL — frontend layout
 * Compatible with: Orbital theme, Gravity Forms 2.5 theme, legacy markup
 *
 * Row 1: Postcode (50%) | Huisnr + Toev. (50%)
 * Row 2: Straat (50%)   | Plaats (50%)
 */

.gfield_address_nl .ginput_container--address-nl {
	--gfpnl-gap-x: 16px;
	--gfpnl-gap-y: 8px;
	width: 100%;
	box-sizing: border-box;
}

/* Orbital: inherit theme spacing */
.gform-theme--framework .gfield_address_nl .ginput_container--address-nl {
	--gfpnl-gap-x: var(--gf-field-gap-x, 16px);
	--gfpnl-gap-y: var(--gf-field-gap-y, 8px);
}

/* ------------------------------------------------------------------
   Modern markup — Orbital + GF 2.5 theme (grid)
   ------------------------------------------------------------------ */
.gform_wrapper:not(.gform_legacy_markup_wrapper) .gfield_address_nl .ginput_container--address-nl {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--gfpnl-gap-x) !important;
	row-gap: var(--gfpnl-gap-y) !important;
	align-items: stretch;
	float: none !important;
	overflow: visible;
}

.gform_wrapper:not(.gform_legacy_markup_wrapper) .gfield_address_nl .ginput_container--address-nl > span {
	float: none !important;
	width: 100% !important;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
}

.gform_wrapper:not(.gform_legacy_markup_wrapper) .gfield_address_nl .ginput_container--address-nl .field_postcode {
	grid-column: 1;
	grid-row: 1;
}

.gform_wrapper:not(.gform_legacy_markup_wrapper) .gfield_address_nl .ginput_container--address-nl .field_huisnummer {
	grid-column: 2;
	grid-row: 1;
	display: flex !important;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: calc(var(--gfpnl-gap-x) * 0.5);
	width: 100%;
}

.gform_wrapper:not(.gform_legacy_markup_wrapper) .gfield_address_nl .ginput_container--address-nl .field_straat {
	grid-column: 1;
	grid-row: 2;
}

.gform_wrapper:not(.gform_legacy_markup_wrapper) .gfield_address_nl .ginput_container--address-nl .field_plaats {
	grid-column: 2;
	grid-row: 2;
}

.gform_wrapper:not(.gform_legacy_markup_wrapper) .gfield_address_nl .ginput_container--address-nl .field_bouwjaar,
.gform_wrapper:not(.gform_legacy_markup_wrapper) .gfield_address_nl .ginput_container--address-nl .field_oppervlakte,
.gform_wrapper:not(.gform_legacy_markup_wrapper) .gfield_address_nl .ginput_container--address-nl .field_gebruikstype {
	grid-column: 1 / -1;
}

.gform_wrapper:not(.gform_legacy_markup_wrapper) .gfield_address_nl .ginput_container--address-nl .field_huisnummer .input_huisnummer {
	flex: 3 1 0;
	min-width: 0;
}

.gform_wrapper:not(.gform_legacy_markup_wrapper) .gfield_address_nl .ginput_container--address-nl .field_huisnummer .input_toevoeging {
	flex: 2 1 0;
	min-width: 0;
}

/* Orbital: override theme grid on ginput_complex */
.gform-theme--framework .gfield--type-address_nl .ginput_container--address-nl.ginput_complex {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* ------------------------------------------------------------------
   Legacy markup — float (GF 2.5 classic HTML)
   ------------------------------------------------------------------ */
.gform_legacy_markup_wrapper .gfield_address_nl .ginput_container--address-nl {
	display: block;
	overflow: hidden;
}

.gform_legacy_markup_wrapper .gfield_address_nl .ginput_container--address-nl > span {
	display: block;
}

.gform_legacy_markup_wrapper .gfield_address_nl .ginput_container--address-nl span.ginput_left {
	float: left !important;
	width: 50% !important;
	padding-right: calc(var(--gfpnl-gap-x) / 2) !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
}

.gform_legacy_markup_wrapper .gfield_address_nl .ginput_container--address-nl span.ginput_right {
	float: right !important;
	width: 50% !important;
	padding-left: calc(var(--gfpnl-gap-x) / 2) !important;
	padding-right: 0 !important;
	margin-right: 0 !important;
}

.gform_legacy_markup_wrapper .gfield_address_nl .ginput_container--address-nl .field_straat {
	clear: left;
}

.gform_legacy_markup_wrapper .gfield_address_nl .ginput_container--address-nl .field_huisnummer {
	display: flex !important;
	flex-wrap: nowrap;
	gap: calc(var(--gfpnl-gap-x) * 0.5);
}

.gform_legacy_markup_wrapper .gfield_address_nl .ginput_container--address-nl .field_huisnummer .input_huisnummer {
	flex: 3 1 0;
	min-width: 0;
	width: auto !important;
	margin-right: 0 !important;
}

.gform_legacy_markup_wrapper .gfield_address_nl .ginput_container--address-nl .field_huisnummer .input_toevoeging {
	flex: 2 1 0;
	min-width: 0;
	width: auto !important;
}

.gform_legacy_markup_wrapper .gfield_address_nl .ginput_container--address-nl .field_bouwjaar,
.gform_legacy_markup_wrapper .gfield_address_nl .ginput_container--address-nl .field_oppervlakte,
.gform_legacy_markup_wrapper .gfield_address_nl .ginput_container--address-nl .field_gebruikstype {
	clear: both;
	width: 100% !important;
	float: none !important;
	padding: 0 !important;
}

/* ------------------------------------------------------------------
   Shared input styling (all themes)
   ------------------------------------------------------------------ */
.gfield_address_nl .ginput_container--address-nl input[type="text"] {
	width: 100% !important;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0 !important;
}

.gfield_address_nl .ginput_container--address-nl input[type="text"].input_postcode,
.gfield_address_nl .ginput_container--address-nl input[type="text"].input_huisnummer,
.gfield_address_nl .ginput_container--address-nl input[type="text"].input_toevoeging {
	margin-bottom: 0 !important;
}

.gform_legacy_markup_wrapper .gfield_address_nl .ginput_container--address-nl input[type="text"].input_postcode,
.gform_legacy_markup_wrapper .gfield_address_nl .ginput_container--address-nl input[type="text"].input_huisnummer,
.gform_legacy_markup_wrapper .gfield_address_nl .ginput_container--address-nl input[type="text"].input_toevoeging {
	margin-bottom: 8px !important;
}

.gfield_address_nl .ginput_container--address-nl input[type="text"].readonly {
	opacity: 0.55;
	pointer-events: none;
}

/* ------------------------------------------------------------------
   Mobile
   ------------------------------------------------------------------ */
@media (max-width: 420px) {
	.gform_wrapper:not(.gform_legacy_markup_wrapper) .gfield_address_nl .ginput_container--address-nl {
		grid-template-columns: 1fr !important;
	}

	.gform_wrapper:not(.gform_legacy_markup_wrapper) .gfield_address_nl .ginput_container--address-nl .field_postcode,
	.gform_wrapper:not(.gform_legacy_markup_wrapper) .gfield_address_nl .ginput_container--address-nl .field_huisnummer,
	.gform_wrapper:not(.gform_legacy_markup_wrapper) .gfield_address_nl .ginput_container--address-nl .field_straat,
	.gform_wrapper:not(.gform_legacy_markup_wrapper) .gfield_address_nl .ginput_container--address-nl .field_plaats {
		grid-column: 1 !important;
	}

	.gform_wrapper:not(.gform_legacy_markup_wrapper) .gfield_address_nl .ginput_container--address-nl .field_postcode {
		grid-row: 1 !important;
	}

	.gform_wrapper:not(.gform_legacy_markup_wrapper) .gfield_address_nl .ginput_container--address-nl .field_huisnummer {
		grid-row: 2 !important;
	}

	.gform_wrapper:not(.gform_legacy_markup_wrapper) .gfield_address_nl .ginput_container--address-nl .field_straat {
		grid-row: 3 !important;
	}

	.gform_wrapper:not(.gform_legacy_markup_wrapper) .gfield_address_nl .ginput_container--address-nl .field_plaats {
		grid-row: 4 !important;
	}

	.gform_legacy_markup_wrapper .gfield_address_nl .ginput_container--address-nl span.ginput_left,
	.gform_legacy_markup_wrapper .gfield_address_nl .ginput_container--address-nl span.ginput_right {
		float: none !important;
		width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.gform_legacy_markup_wrapper .gfield_address_nl .ginput_container--address-nl .field_straat {
		clear: none;
	}
}