/**
 | Name/naam input field
 |
 */
.enquiry-section [ data-name = "naam" ] input:focus {
	border-color: rgba( var( --light ), var( --tw-bg-opacity, 1 ) );
}
.enquiry-section [ data-name = "naam" ] input::placeholder {
	color: rgba( var( --off-dark ), var( --tw-bg-opacity, 1 ) );
}
.enquiry-section [ data-name = "naam" ] input:disabled {
	color: rgba( var( --off-dark ), var( --tw-bg-opacity, 1 ) );
}

/**
 | Phone country region code input field
 |
 */
.enquiry-section [ data-name = "phone_region_code_label" ] {
	position: static;
}
.enquiry-section [ data-name = "phone_region_code_label" ]:has(:focus) + input {
	/*
	 | On focusing on the country region code `select` element,
	 | make the adjacent `input` element appear as if it is the one being focused
	 |
	 */
	color: rgba( var( --light ), var( --tw-bg-opacity, 1 ) );
	border-color: rgba( var( --light ), var( --tw-bg-opacity, 1 ) );
}

/**
 | Phone subscriber number input field
 |
 */
.enquiry-section [ data-name = "phone_subscriber_number" ] {
	width: auto;
	flex-grow: 1;
}
.enquiry-section [ data-name = "phone_subscriber_number" ] input:focus {
	border-color: rgba( var( --light ), var( --tw-bg-opacity, 1 ) );
}
.enquiry-section [ data-name = "phone_subscriber_number" ] input::placeholder {
	color: rgba( var( --off-dark ), var( --tw-bg-opacity, 1 ) );
}
.enquiry-section [ data-name = "phone_subscriber_number" ] input:disabled {
	color: rgba( var( --off-dark ), var( --tw-bg-opacity, 1 ) );
}

/**
 | Email address input field
 |
 */
.enquiry-section [ data-name = "email_address" ] input:focus {
	border-color: rgba( var( --light ), var( --tw-bg-opacity, 1 ) );
}
.enquiry-section [ data-name = "email_address" ] input::placeholder {
	color: rgba( var( --off-dark ), var( --tw-bg-opacity, 1 ) );
}
.enquiry-section [ data-name = "email_address" ] input:disabled {
	color: rgba( var( --off-dark ), var( --tw-bg-opacity, 1 ) );
}

/**
 | Budget input field
 |
 */
/* .enquiry-section [ data-name = "budget" ] select:valid { */
.enquiry-section [ data-name = "budget" ] select:not( [ value = "" ] ) {
	color: rgba( var( --off-dark ), var( --tw-bg-opacity, 1 ) );
}
/* .enquiry-section [ data-name = "budget" ] select:invalid { */
.enquiry-section [ data-name = "budget" ] select[ value = "" ] {
	color: rgba( var( --light ), var( --tw-bg-opacity, 1 ) );
}
.enquiry-section [ data-name = "budget" ] select:focus {
	color: rgba( var( --light ), var( --tw-bg-opacity, 1 ) );
}
.enquiry-section [ data-name = "budget" ] select:disabled {
	color: rgba( var( --off-dark ), var( --tw-bg-opacity, 1 ) );
}