/**
 * ProDrivers Address Field Styles
 *
 * Styles for the address field layout with search box and progressive enablement.
 *
 * Structure:
 * - Search box at top (with map pin icon, autocomplete enabled)
 * - Street address (plain input, populated from search)
 * - Unit/Apt (full width, optional, initially disabled)
 * - City/State/ZIP (inline row, initially disabled)
 * - Status display (verified indicator, error messages)
 * - Hidden data fields (lat, lng, formatted, verified flag)
 *
 * @package ProDrivers_Quote_Calculator
 * @since 1.0.0
 */

/* ============================================
   Container Styles
   ============================================ */

.prodrivers-address-field {
	position: relative;
	margin-bottom: 1rem;
}

.ginput_container_prodrivers_address {
	position: relative;
}

/* ============================================
   Search Box Styles
   ============================================ */

.prodrivers-address-search {
	margin-bottom: 1rem;
}

.prodrivers-address-search-wrapper {
	position: relative;
}



/* Hide the custom icon - PlaceAutocompleteElement provides its own */
.prodrivers-address-search-icon {
	display: none;
}

/* Hide the original input when PlaceAutocompleteElement is active */
.prodrivers-address-search-input[data-prodrivers-autocomplete="true"] {
	display: none;
}

.prodrivers-address-search-input:focus {
	outline: none;
}

.prodrivers-address-search-input::placeholder {
}

/* Google Places autocomplete dropdown styling */
.pac-container {
	font-family: inherit;
	z-index: 10000 !important;
}

.pac-item {
	cursor: pointer;
}

.pac-item-query {
	font-weight: 500;
}

/* Hide Google's default magnifying glass icon in dropdown */
.pac-icon {
	display: none;
}

/* ============================================
   Street Address Row (Full Width)
   ============================================ */

.prodrivers-address-street {
	margin-bottom: 0.75rem;
}

.prodrivers-address-street-input {
	width: 100%;
}

.prodrivers-address-street-input:focus {
	outline: none;
}

/* ============================================
   Unit/Apt Row (Full Width, Optional)
   ============================================ */

.prodrivers-address-unit {
	margin-bottom: 0.75rem;
}

.prodrivers-address-unit-input {
	width: 100%;
}

.prodrivers-address-unit-input:focus {
	outline: none;
}

/* ============================================
   City/State/ZIP Row (Inline)
   ============================================ */

.prodrivers-address-row {
	display: flex;
	gap: 0.75rem;
	margin-bottom: 0.5rem;
}

.prodrivers-address-city {
	flex: 2;
	min-width: 0;
}

.prodrivers-address-state {
	flex: 1.5;
	min-width: 100px;
	max-width: 180px;
}

.prodrivers-address-zip {
	flex: 1;
	min-width: 80px;
	max-width: 120px;
}

/* Input styles for city/state/zip */
.prodrivers-address-city-input,
.prodrivers-address-state-input,
.prodrivers-address-zip-input {
	width: 100%;
}

.prodrivers-address-city-input:focus,
.prodrivers-address-state-input:focus,
.prodrivers-address-zip-input:focus {
	outline: none;
}

/* ============================================
   Disabled State Styles
   ============================================ */

.prodrivers-address-field input:disabled {
	cursor: not-allowed;
}

.prodrivers-address-field input:disabled::placeholder {
}

/* ============================================
   Read-only State Styles
   ============================================ */

.prodrivers-address-field input:read-only:not(:disabled) {
	cursor: default;
}

.prodrivers-address-field input:read-only:not(:disabled):focus {
	outline: none;
}

/* ============================================
   Status Display (Verified & Error)
   ============================================ */

.prodrivers-address-status {
	min-height: 20px;
	margin-top: 4px;
}

.prodrivers-verified {
	display: inline-block;
	color: #1e7e34; /* Darker green for WCAG AA contrast (4.5:1) */
	font-size: 0.875rem;
	font-weight: 600;
}

.prodrivers-error {
	display: inline-block;
	color: #dc3545;
	font-size: 0.875rem;
	font-weight: 500;
}

/* Error message in search context (directly below search input) */
.prodrivers-address-search .prodrivers-error {
	display: block;
	margin-top: 0.25rem;
	padding-left: 0.25rem;
}

/* ============================================
   PlaceAutocompleteElement Styles
   ============================================ */

/* Override Google's default styles on the host element */
gmp-place-autocomplete,
gmp-place-autocomplete.prodrivers-place-autocomplete {
	width: 100%;
	box-sizing: border-box;
	border-radius: 0 !important;
	border: 1px solid #fff !important;
	outline: none !important;
	box-shadow: none !important;
	background: transparent !important;
}

/* Hide Google's focus ring */
.focus-ring {
	display: none !important;
}

/* Focus state to match other inputs - border changes to light blue */
gmp-place-autocomplete:focus-within {
	border-color: var(--light-blue) !important;
}

/* Target the internal input within PlaceAutocompleteElement */
.prodrivers-place-autocomplete input {
	width: 100%;
}

.prodrivers-place-autocomplete input:focus {
	outline: none;
}

/* Hide the original input when autocomplete is active */
.prodrivers-address-street-input[data-prodrivers-autocomplete="true"] {
	display: none !important;
}

/* Ensure proper spacing */
.gfield .ginput_container_prodrivers_address .prodrivers-place-autocomplete {
	margin-top: 0;
}

/* ============================================
   Responsive Adjustments
   ============================================ */

@media screen and (max-width: 640px) {
	/* Stack city/state/zip on small screens */
	.prodrivers-address-row {
		flex-wrap: wrap;
	}

	.prodrivers-address-city {
		flex: 1 1 100%;
		margin-bottom: 0.5rem;
	}

	.prodrivers-address-state,
	.prodrivers-address-zip {
		flex: 1 1 calc(50% - 0.375rem);
		max-width: none;
	}

	/* Larger touch targets on mobile */
	.prodrivers-address-search-input {
		padding: 12px 12px 12px 40px;
		font-size: 16px; /* Prevents zoom on iOS */
	}

	.prodrivers-address-street-input,
	.prodrivers-address-unit-input,
	.prodrivers-address-city-input,
	.prodrivers-address-state-input,
	.prodrivers-address-zip-input,
	.prodrivers-place-autocomplete input {
		padding: 10px 12px;
		font-size: 16px; /* Prevents zoom on iOS */
	}
}

/* ============================================
   Validation Error Override
   ============================================

   Gravity Forms applies .gfield_error to fields that fail validation,
   which adds red borders to all inputs within. For address fields,
   we don't want sub-fields (street, city, state, zip) to show red
   because they are either disabled or read-only - the user can only
   interact with the search field.

   The address field validates as a whole (street is the required component),
   so individual sub-fields should not show validation error styling.
   ============================================ */

.gfield_error .prodrivers-address-field input:disabled,
.gfield_error .prodrivers-address-field input:read-only,
.gfield_error .prodrivers-address-street-input,
.gfield_error .prodrivers-address-unit-input,
.gfield_error .prodrivers-address-city-input,
.gfield_error .prodrivers-address-state-input,
.gfield_error .prodrivers-address-zip-input {
	border-color: #c3c4c7 !important;
	box-shadow: none !important;
}

/* Disabled fields in error state keep their disabled styling */
.gfield_error .prodrivers-address-field input:disabled {
}

/* Only the search input can show validation error styling */
/* Commenting this out - let the parent field handle error display
.gfield_error .prodrivers-address-search-input:not(:disabled):not([data-prodrivers-autocomplete="true"]) {
	border-color: #dc3545 !important;
}
*/

/* ============================================
   State Classes (Applied to .gfield by JS)
   ============================================

   These classes are applied to the parent .gfield element by
   address-field.js based on the current field state.

   States:
   - .prodrivers-state-empty     : No address, all fields empty
   - .prodrivers-state-populated : Fields have values (not verified via autocomplete)
   - .prodrivers-state-verified  : Address verified via autocomplete selection
   - .prodrivers-state-error     : Validation error active

   Only one state class is present at a time (mutual exclusion).

   Example usage:
   .gfield.prodrivers-state-empty .prodrivers-address-details {
       display: none;
   }
   ============================================ */

/* Optional: Hide details when empty (uncomment to enable)
.gfield.prodrivers-state-empty .prodrivers-address-details {
	display: none;
}
*/

/* Optional: Visual indicator for verified state (uncomment to enable)
.gfield.prodrivers-state-verified .prodrivers-address-search-input {
	border-color: #28a745;
}
*/

/* Optional: Visual indicator for error state (uncomment to enable)
.gfield.prodrivers-state-error .prodrivers-address-search-input {
	border-color: #dc3545;
}
*/