/**
 * Google Places Autocomplete Styles
 * Estilos para el autocomplete de Google Maps y validación de ubicación
 *
 * @package OneClickShuttles
 */

/* Contenedor de sugerencias de Google Maps */
.pac-container {
	z-index: 99999 !important;
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
	background-color: #ffffff !important;
	border: 1px solid #ddd !important;
	border-top: none !important;
	border-radius: 0 0 8px 8px !important;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
	min-width: 360px !important;
	max-height: 400px !important;
	overflow-y: auto !important;
}

.pac-container::after {
	padding: 4px 8px;
	font-size: 11px;
}

.pac-item {
	padding: 12px 16px !important;
	border-bottom: 1px solid #f0f0f0 !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	color: #333 !important;
	background-color: #fff !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	z-index: 100000 !important;
}

.pac-item:hover,
.pac-item.pac-item-selected {
	background-color: #f5f5f5 !important;
	color: #000 !important;
}

.pac-item:last-child {
	border-bottom: none !important;
}

.pac-item-query {
	font-weight: 600 !important;
	color: #1a73e8 !important;
}

.pac-matched {
	font-weight: 600 !important;
	color: #1a73e8 !important;
}

.pac-icon {
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>') no-repeat 0 0;
	background-size: 18px;
	background-position: 0 2px;
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-right: 8px;
	vertical-align: middle;
}

/* Indicador de ubicación (feedback) */
.ocs-location-hint {
	margin-top: 6px;
	font-size: 13px;
	padding: 8px 12px;
	border-radius: 4px;
	line-height: 1.4;
	animation: fadeIn 0.3s ease-in;
}

.ocs-location-hint .ocs-loading {
	color: #ffb81c;
	display: flex;
	align-items: center;
	gap: 8px;
}

.ocs-location-hint .ocs-loading::before {
	content: '';
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid #ffb81c;
	border-right-color: transparent;
	border-radius: 50%;
	animation: spin 0.6s linear infinite;
}

.ocs-location-hint .ocs-success {
	color: #28a745;
	background-color: #f0f9ff;
	border-left: 3px solid #28a745;
	display: block;
	padding: 8px 12px;
	border-radius: 2px;
}

.ocs-location-hint .ocs-info {
	color: #1a73e8;
	background-color: #f0f9ff;
	border-left: 3px solid #1a73e8;
	display: block;
	padding: 8px 12px;
	border-radius: 2px;
}

.ocs-location-hint .ocs-error {
	color: #d32f2f;
	background-color: #ffebee;
	border-left: 3px solid #d32f2f;
	display: block;
	padding: 8px 12px;
	border-radius: 2px;
}

/* Animaciones */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* Responsive */
@media (max-width: 768px) {
	.pac-container {
		min-width: 280px !important;
		max-height: 300px;
	}

	.pac-item {
		padding: 10px 12px !important;
		font-size: 13px !important;
	}
}