/* Hide original input but keep it focusable for validation */
input.data-google-autocomplete-fields {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Wrapper base styles */
.dce-google-autocomplete-wrapper {
	width: 100%;
	position: relative;
	min-height: 40px;
}

/* Color scheme: Light */
.dce-google-autocomplete-wrapper[data-color-scheme="light"] {
	color-scheme: light only;
}

/* Color scheme: Dark */
.dce-google-autocomplete-wrapper[data-color-scheme="dark"] {
	color-scheme: dark only;
}

/* Color scheme: Auto (follows system preference) */
.dce-google-autocomplete-wrapper[data-color-scheme="auto"] {
	color-scheme: light dark;
}

/* Loading placeholder - shown until Google component is ready */
.dce-google-autocomplete-wrapper:empty::before {
	content: attr(data-loading-text);
	display: flex;
	align-items: center;
	padding: 0 12px;
	height: 40px;
	color: #999;
	font-style: italic;
	background: var(--e-form-field-background-color, #fff);
	border: var(--e-form-field-border-width, 1px) solid var(--e-form-field-border-color, #818a91);
	border-radius: var(--e-form-field-border-radius, 3px);
}

/* Google PlaceAutocompleteElement base styles */
.dce-google-autocomplete-wrapper gmp-place-autocomplete {
	display: block;
	width: 100%;
	--gmp-mat-color-outline-decorative: var(--e-form-field-border-color, #818a91);
	--gmp-mat-color-primary: var(--e-global-color-primary, #0073aa);
	border-radius: var(--e-form-field-border-radius, 3px);
}

/* Light mode styles */
.dce-google-autocomplete-wrapper[data-color-scheme="light"] gmp-place-autocomplete {
	color-scheme: light only;
	--gmp-mat-color-surface: #fff;
	--gmp-mat-color-on-surface: #333;
}

/* Dark mode styles */
.dce-google-autocomplete-wrapper[data-color-scheme="dark"] gmp-place-autocomplete {
	color-scheme: dark only;
	--gmp-mat-color-surface: #1e1e1e;
	--gmp-mat-color-on-surface: #e0e0e0;
}

/* Auto mode - inherits from wrapper */
.dce-google-autocomplete-wrapper[data-color-scheme="auto"] gmp-place-autocomplete {
	color-scheme: light dark;
}