/**
 * Styles for Google Places Autocomplete in Herbalist Registration Form
 */

/* Ensure autocomplete dropdown appears above other elements */
.pac-container {
    z-index: 10000 !important;
    font-family: inherit;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    margin-top: 4px;
}

/* Style the autocomplete items */
.pac-item {
    padding: 10px;
    cursor: pointer;
    font-size: 14px;
    border-top: 1px solid #e9ecef;
}

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

.pac-item:hover {
    background-color: #f8f9fa;
}

/* Highlight the matched text */
.pac-item-query {
    font-weight: 600;
    color: #212529;
}

/* Style the secondary text (address details) */
.pac-matched {
    font-weight: 600;
}

/* Icon styling - Replace default icon with pin marker */
.pac-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    background-size: 20px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="%23e74c3c"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Override Google's default icons */
.pac-icon-marker {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="%23e74c3c"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>') !important;
}

/* Style for when hovering over items */
.pac-item-selected,
.pac-item-selected:hover {
    background-color: #e9ecef;
}

/* Powered by Google logo */
.pac-logo:after {
    padding: 5px;
}

/* Ensure input field has proper focus style */
#autocomplete-address:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Loading animation for when Google API is loading */
#autocomplete-address.loading {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="%23ccc" stroke-width="4" fill="none" stroke-dasharray="31.4 31.4" transform="rotate(0 12 12)"><animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="1s" repeatCount="indefinite"/></circle></svg>') no-repeat right 12px center;
    background-size: 20px;
}