/**
 * WooCommerce Google Autocomplete Styles
 */

/* Ensure autocomplete dropdown appears above other elements */
.pac-container {
    z-index: 9999 !important;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    margin-top: 2px;
    font-family: inherit;
}

/* Style autocomplete items */
.pac-item {
    padding: 8px 12px;
    cursor: pointer;
    line-height: 1.5;
}

.pac-item:hover {
    background-color: #f5f5f5;
}

.pac-item-selected {
    background-color: #e8e8e8;
}

/* Icon styling */
.pac-icon {
    margin-right: 8px;
}

/* Query text styling */
.pac-item-query {
    font-weight: 600;
    color: #333;
}

/* Match text styling */
.pac-matched {
    font-weight: 700;
}

/* Loading indicator */
.wc-autocomplete-loading::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    animation: wc-autocomplete-spin 1s linear infinite;
}

@keyframes wc-autocomplete-spin {
    0% { transform: translateY(-50%) rotate(0deg); }
    100% { transform: translateY(-50%) rotate(360deg); }
}

/* RTL support */
[dir="rtl"] .pac-icon {
    margin-right: 0;
    margin-left: 8px;
}

[dir="rtl"] .wc-autocomplete-loading::after {
    right: auto;
    left: 10px;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .pac-container {
        width: 100% !important;
        max-width: calc(100vw - 40px);
        left: 20px !important;
    }
    
    .pac-item {
        padding: 10px 12px;
        font-size: 14px;
    }
}

/* Compatibility with common checkout plugins */
.woocommerce-checkout .pac-container,
.checkout-form .pac-container {
    font-family: inherit;
}

/* Google Maps attribution (required by TOS) */
.wc-google-attribution {
    font-size: 11px;
    color: #999;
    margin-top: 5px;
}

.wc-google-attribution a {
    color: #4285f4;
    text-decoration: none;
}
