/* ============================================
   GOOGLE MAPS & AUTOCOMPLETE STYLES
   ============================================ */

/* Autocomplete Dropdown */
.autocomplete-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: var(--space-xs);
    background: #FFFFFF;
    border: 1px solid #E5E5E7;
    border-radius: var(--radius-md);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    max-height: 300px;
    overflow-y: auto;
    z-index: var(--z-dropdown);
}

.autocomplete-dropdown.visible {
    display: block;
    animation: dropdownFadeIn var(--transition-base) ease;
}

@keyframes dropdownFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.suggestion-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    cursor: pointer;
    transition: background var(--transition-fast);
    border-bottom: 1px solid #F2F2F7;
}

.suggestion-item:last-child { border-bottom: none; }
.suggestion-item:hover,
.suggestion-item.highlighted { background: #F2F2F7; }

.suggestion-icon {
    font-size: var(--font-base);
    color: #FF9500;
}

.suggestion-text { flex: 1; }

.suggestion-main {
    font-weight: var(--font-medium);
    color: #1C1C1E;
    font-size: var(--font-sm);
}

.suggestion-secondary {
    font-size: var(--font-xs);
    color: #8E8E93;
    margin-top: 2px;
}

/* Loading and no-results states for autocomplete */
.loading-results,
.no-results {
    padding: var(--space-md);
    text-align: center;
    color: #8E8E93;
    font-size: var(--font-sm);
}

/* Google Maps specific overrides (if needed) */
.pac-container {
    z-index: var(--z-dropdown) !important;
}