/* OM Autocomplete Field Styles */

.om-ai-autocomplete-field {
    position: relative;
}

#billing_address_search_field,
#shipping_address_search_field {
    position: relative;
}

#billing_address_search,
#shipping_address_search {
    padding-left: 35px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px center;
}

#billing_address_search:focus,
#shipping_address_search:focus {
    border-color: #4caf50;
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}

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

.pac-item {
    padding: 10px 12px;
    border-top: 1px solid #eee;
    cursor: pointer;
    font-size: 14px;
}

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

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

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

.pac-icon {
    display: none;
}

.pac-item-query {
    font-size: 14px;
    color: #333;
}

.pac-matched {
    font-weight: 600;
}

/* Loading state */
.om-ai-loading {
    position: relative;
}

.om-ai-loading::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid #ddd;
    border-top-color: #4caf50;
    border-radius: 50%;
    animation: om-ai-spin 0.8s linear infinite;
}

@keyframes om-ai-spin {
    to { transform: translateY(-50%) rotate(360deg); }
}

/* Helper text */
.om-ai-helper {
    font-size: 12px;
    color: #666;
    margin-top: 5px;
    font-style: italic;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .pac-container {
        width: calc(100% - 30px) !important;
        left: 15px !important;
    }

    .pac-item {
        padding: 12px;
    }
}

/* ------------------------------------------------------------------ */
/* Geolocation icon — overlays the address-1 input where WC's search  */
/* lens would normally sit. Hides itself when the input is focused so */
/* the customer can type freely.                                      */
/* ------------------------------------------------------------------ */

.aieo-geo-locate-host {
    position: relative;
}

/*
 * Pill button: text-only label, transparent fill so WC's
 * autocomplete-lens (which sits at the input's right edge) shows
 * through inside the pill's right-padding area and reads as the
 * pill's own icon. Right-padding reserves enough space for the lens.
 */
.aieo-geo-locate-btn {
    position: absolute;
    top: 10px;
    bottom: 10px;
    right: 10px;
    padding: 0 32px 0 12px;
    margin: 0;
    border: 1px solid #f46767;
    background: transparent;
    color: #f46767;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
    z-index: 5;
    white-space: nowrap;
}

.aieo-geo-locate-btn__label {
    display: inline-block;
    text-align: left;
}

.aieo-geo-locate-btn:hover,
.aieo-geo-locate-btn:focus {
    border-color: #f46767;
    background: rgba(244, 103, 103, 0.08);
    outline: none;
}

.aieo-geo-locate-btn:focus-visible {
    box-shadow: 0 0 0 2px rgba(244, 103, 103, 0.35);
}

.aieo-geo-locate-btn[disabled] {
    cursor: progress;
    opacity: 0.85;
}

.aieo-geo-locate-btn.is-busy {
    background: rgba(244, 103, 103, 0.12);
}

.aieo-geo-locate-btn.is-error {
    color: #b91c1c;
    background: rgba(185, 28, 28, 0.08);
    border-color: rgba(185, 28, 28, 0.35);
}

/* Hide the icon as soon as the user touches the input — they're
   about to type. Re-appears on blur. */
.aieo-geo-locate-host:focus-within .aieo-geo-locate-btn {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

@keyframes aieo-geo-spin {
    to { transform: rotate(360deg); }
}
