/**
 * Supple Autosuggest Styles
 * Styling for Google Places autocomplete dropdown
 */

/* Google Places Autocomplete Container */
.pac-container {
    z-index: 999999 !important;
    font-family: inherit;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    border: 1px solid #ddd;
    margin-top: 2px;
}

/* Autocomplete items */
.pac-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.4;
    border-top: 1px solid #eee;
}

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

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

/* Main text (street address) */
.pac-item-query {
    font-size: 14px;
    color: #333;
}

/* Secondary text (city, state) */
.pac-item span:not(.pac-item-query) {
    font-size: 13px;
    color: #666;
}

/* Icons */
.pac-icon {
    margin-right: 8px;
}

/* Hide powered by Google logo (optional - keep if you want to show it) */
.pac-logo::after {
    display: none;
}

/* Ensure dropdown appears above modals */
.pac-container.pac-logo {
    z-index: 999999 !important;
}

/* Input field styling when autocomplete is active */
input[data-supple-autosuggest="initialized"] {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23999" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px 16px;
    padding-right: 36px;
}

/* WooCommerce Blocks specific styling */
.wc-block-components-text-input input[data-supple-autosuggest="initialized"] {
    padding-right: 36px;
}

/* Loading state (when fetching place details) */
input[data-supple-autosuggest="initialized"].loading {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="%23ddd" stroke-width="3" fill="none"/><path d="M12 2a10 10 0 0 1 10 10" stroke="%23666" stroke-width="3" fill="none"><animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="1s" repeatCount="indefinite"/></path></svg>');
}

/* Mobile responsive */
@media (max-width: 768px) {
    .pac-container {
        width: calc(100% - 20px) !important;
        left: 10px !important;
        right: 10px !important;
    }

    .pac-item {
        padding: 12px;
        font-size: 15px;
    }
}