/* Shared storefront fields. Override variables locally, or use .afv-field-custom. */
:root {
	--afv-field-control-height: 48px;
	--afv-field-padding-block: 10px;
	--afv-field-padding-inline: 12px;
	--afv-field-border-width: 1px;
	--afv-field-border-color: #d7dce1;
	--afv-field-radius: 0;
	--afv-field-background: #fff;
	--afv-field-text-color: #333;
	--afv-field-font-size: 1em;
	--afv-field-focus-color: #c69a00;
	--afv-field-error-color: #d63638;
	--afv-field-disabled-background: #eef1f4;
	--afv-field-disabled-color: #697386;
	--afv-field-readonly-background: #f8f9fa;
}

/*
 * This small, intentional important layer supplies the common appearance even
 * when a widget has older local styling. Geometry such as width, grid, display,
 * visibility and positioning remains with the owning form/widget. Local CSS
 * variables still work normally; .afv-field-custom bypasses this entire skin.
 */
@layer afv-tabla-fields {
	:where(body) :where(
		input:not([type]), input[type="text"], input[type="email"],
		input[type="url"], input[type="password"],
		input[type="tel"], input[type="number"], input[type="date"],
		input[type="time"], input[type="datetime-local"], input[type="month"],
		input[type="week"], select, textarea,
		.select2-container .select2-selection,
		.afv-order-checkout-phone-prefix
	):not(:where(
		input[type="search"], input[name="s"], .search-field,
		.dgwt-wcas-search-input, .elementor-search-form__input, .e-search-input,
		.vp-woo-pont-modal-sidebar-search-field,
		[role="search"] *, .search-form *, .woocommerce-product-search *,
		.elementor-search-form *, .e-search *, .dgwt-wcas-search-wrapp *,
		.afv-search, .afv-search *, .afv-search + .select2-container *,
		.afv-field-custom, .afv-field-custom *,
		.afv-field-custom + .select2-container *,
		.select2-hidden-accessible, .select2-search__field,
		.screen-reader-text, .screen-reader-text *,
		.afv-product-editor, .afv-product-editor *,
		.afv-product-editor__bubble, .afv-product-editor__bubble *,
		.afv-product-editor-debug, .afv-product-editor-debug *,
		#wpadminbar, #wpadminbar *
	)) {
		box-sizing: border-box !important;
		height: var(--afv-field-height, var(--afv-field-control-height)) !important;
		min-height: var(--afv-field-min-height, var(--afv-field-control-height)) !important;
		max-height: none !important;
		padding: var(--afv-field-padding-block) var(--afv-field-padding-inline) !important;
		border: var(--afv-field-border-width) solid var(--afv-field-current-border, var(--afv-field-border-color)) !important;
		border-radius: var(--afv-field-radius) !important;
		background-color: var(--afv-field-current-background, var(--afv-field-background)) !important;
		color: var(--afv-field-current-color, var(--afv-field-text-color)) !important;
		font-family: inherit !important;
		font-size: var(--afv-field-font-size) !important;
		line-height: 1.5 !important;
		box-shadow: none !important;
		outline: var(--afv-field-outline, none) !important;
		outline-offset: 2px !important;
	}

	/* Enhanced select labels and arrows follow the height of their field. */
	:where(body) :where(.select2-container .select2-selection--single):not(:where(
		[role="search"] *, .search-form *, .woocommerce-product-search *,
		.elementor-search-form *, .e-search *, .dgwt-wcas-search-wrapp *,
		.afv-search, .afv-search *, .afv-search + .select2-container *,
		.afv-field-custom, .afv-field-custom *, .afv-field-custom + .select2-container *,
		.afv-product-editor *, .afv-product-editor__bubble *,
		.afv-product-editor-debug *, #wpadminbar *
	)) {
		display: flex !important;
		align-items: center !important;
		margin: 0 !important;
		padding-inline-end: calc(var(--afv-field-padding-inline) + 24px) !important;
	}

	:where(body) :where(.select2-selection--single .select2-selection__rendered):not(:where(
		[role="search"] *, .search-form *, .woocommerce-product-search *,
		.elementor-search-form *, .e-search *, .dgwt-wcas-search-wrapp *,
		.afv-search, .afv-search *, .afv-search + .select2-container *,
		.afv-field-custom, .afv-field-custom *, .afv-field-custom + .select2-container *,
		.afv-product-editor *, .afv-product-editor__bubble *,
		.afv-product-editor-debug *, #wpadminbar *
	)) {
		min-width: 0 !important;
		padding: 0 !important;
		color: inherit !important;
		line-height: 1.5 !important;
	}

	:where(body) :where(.select2-selection--single .select2-selection__arrow):not(:where(
		[role="search"] *, .search-form *, .woocommerce-product-search *,
		.elementor-search-form *, .e-search *, .dgwt-wcas-search-wrapp *,
		.afv-search, .afv-search *, .afv-search + .select2-container *,
		.afv-field-custom, .afv-field-custom *, .afv-field-custom + .select2-container *,
		.afv-product-editor *, .afv-product-editor__bubble *,
		.afv-product-editor-debug *, #wpadminbar *
	)) {
		top: 0 !important;
		height: 100% !important;
	}
}

/* State variables do not affect excluded fields or their native behaviour. */
:where(textarea) {
	--afv-field-height: auto;
	--afv-field-min-height: calc(var(--afv-field-control-height) * 3);
}

:where(select[multiple]) {
	--afv-field-height: auto;
	--afv-field-min-height: calc(var(--afv-field-control-height) * 2);
}

:where(.select2-selection--multiple) {
	--afv-field-height: auto;
}

:where(.afv-order-checkout-phone-prefix) {
	--afv-field-current-background: var(--afv-field-disabled-background);
}

:where(input, select, textarea, .select2-selection):focus,
:where(.select2-container--focus, .select2-container--open) :where(.select2-selection) {
	--afv-field-current-border: var(--afv-field-focus-color);
	--afv-field-outline: 2px solid var(--afv-field-focus-color);
}

:where(input[readonly], textarea[readonly]) {
	--afv-field-current-background: var(--afv-field-readonly-background);
}

:where(input:disabled, select:disabled, textarea:disabled),
:where(.select2-container--disabled) :where(.select2-selection) {
	--afv-field-current-background: var(--afv-field-disabled-background);
	--afv-field-current-color: var(--afv-field-disabled-color);
}

:where(input, select, textarea, .select2-selection)[aria-invalid="true"],
:where(input, select, textarea):user-invalid,
:where(.woocommerce-invalid) :where(input, select, textarea, .select2-selection) {
	--afv-field-current-border: var(--afv-field-error-color);
}

:where(input, select, textarea, .select2-selection)[aria-invalid="true"]:focus,
:where(input, select, textarea):user-invalid:focus,
:where(.woocommerce-invalid) :where(input, select, textarea, .select2-selection):focus {
	--afv-field-outline: 2px solid var(--afv-field-error-color);
}