/**
 * Styles for Google Places Autocomplete dropdown
 * Dark theme optimized for AI forms
 */

/* Dark theme autocomplete dropdown */
.pac-container {
    background-color: #1f2937 !important;
    border: 1px solid #4b5563 !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2) !important;
    margin-top: 4px !important;
    z-index: 9999 !important;
    padding: 0.25rem 0 !important;
    min-width: 300px !important;
    max-width: 500px !important;
}

/* Style the dropdown items */
.pac-item {
    padding: 0.75rem 1rem !important;
    color: #f3f4f6 !important;
    border-top: 1px solid #374151 !important;
    cursor: pointer !important;
    line-height: 1.5 !important;
    font-size: 0.875rem !important;
    display: block !important;
    transition: background-color 0.15s ease !important;
}

.pac-item:first-child {
    border-top: none !important;
}

/* Hover and selected states */
.pac-item:hover,
.pac-item-selected,
.pac-item.pac-item-selected {
    background-color: #374151 !important;
}

/* Hide all Google Maps icons */
.pac-icon,
.pac-icon-marker,
.pac-icon-search {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    background-image: none !important;
}

/* Remove icon spacing */
.pac-item-query {
    margin-left: 0 !important;
    padding-left: 0 !important;
    color: #f3f4f6 !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    display: block !important;
    margin-bottom: 0.25rem !important;
}

/* Style the address details (secondary text) */
.pac-item > span:not(.pac-item-query) {
    color: #9ca3af !important;
    font-size: 0.75rem !important;
    display: block !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Style matched text */
.pac-matched {
    color: #60a5fa !important;
    font-weight: 600 !important;
}

/* Ensure clean font rendering */
.pac-container,
.pac-item,
.pac-item-query,
.pac-item span {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Scrollbar styling for dropdown */
.pac-container::-webkit-scrollbar {
    width: 6px !important;
}

.pac-container::-webkit-scrollbar-track {
    background: #374151 !important;
}

.pac-container::-webkit-scrollbar-thumb {
    background: #4b5563 !important;
    border-radius: 3px !important;
}

.pac-container::-webkit-scrollbar-thumb:hover {
    background: #6b7280 !important;
}

/* Fix for mobile devices */
@media (max-width: 768px) {
    .pac-container {
        min-width: 280px !important;
        max-width: calc(100vw - 2rem) !important;
        left: 1rem !important;
        right: 1rem !important;
    }
}

/* Ensure proper z-index stacking */
.pac-container-wrapper {
    z-index: 9999 !important;
}

/* Remove any default Google styles that might interfere */
.pac-container:after,
.pac-container:before {
    display: none !important;
    content: none !important;
}

/* Style for the address input field */
.address-autocomplete {
    transition: border-color 0.2s ease-in-out !important;
}

.address-autocomplete:focus {
    outline: none !important;
}

/* Override styles for modern step form */
#step-form .address-autocomplete,
.field-wrapper .address-autocomplete {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Enhanced placeholder styles for modern step form */
#step-form input::placeholder,
#step-form textarea::placeholder,
.field-wrapper input::placeholder,
.field-wrapper textarea::placeholder {
    color: rgba(255, 255, 255, 0.75) !important;
    opacity: 1 !important;
    font-weight: 400 !important;
}

/* Make placeholder text even more visible on hover/focus */
#step-form input:hover::placeholder,
#step-form textarea:hover::placeholder,
#step-form input:focus::placeholder,
#step-form textarea:focus::placeholder,
.field-wrapper input:hover::placeholder,
.field-wrapper textarea:hover::placeholder,
.field-wrapper input:focus::placeholder,
.field-wrapper textarea:focus::placeholder {
    color: rgba(255, 255, 255, 0.85) !important;
}