/**
 * Google Maps Address Autocomplete Styling
 * 
 * Enhanced styling for the address autocomplete functionality
 * to provide better user experience and visual feedback.
 * 
 * @package    LOS
 * @subpackage LOS/public/css
 * @since      3.0.4
 */

/* Address field with autocomplete enabled */
.los-autocomplete-enabled {
  position: relative;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="%23666"><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>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
  padding-right: 35px !important;
}

/* Google's autocomplete dropdown styling */
.pac-container {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  font-family: inherit;
  z-index: 9999; /* Ensure it appears above other elements */
}

.pac-item {
  border-bottom: 1px solid #e6e6e6;
  cursor: pointer;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.4;
}

.pac-item:last-child {
  border-bottom: none;
}

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

.pac-item-selected {
  background-color: #e8f4f8;
}

/* Main text styling in autocomplete results */
.pac-item-query {
  color: #333;
  font-weight: 500;
}

/* Secondary text styling */
.pac-matched {
  font-weight: 700;
  color: #1a73e8;
}

/* Loading state for address fields */
.los-autocomplete-loading {
  position: relative;
}

.los-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 #1a73e8;
  border-radius: 50%;
  animation: los-spinner 1s linear infinite;
}

@keyframes los-spinner {
  0% {
    transform: translateY(-50%) rotate(0deg);
  }
  100% {
    transform: translateY(-50%) rotate(360deg);
  }
}

/* Success state after address is populated */
.los-address-populated {
  border-color: #28a745 !important;
  background-color: #f8fff9;
}

/* Error state for autocomplete issues */
.los-autocomplete-error {
  border-color: #dc3545 !important;
  background-color: #fff5f5;
}

/* Accessibility improvements */
.los-autocomplete-enabled:focus {
  outline: 2px solid #1a73e8;
  outline-offset: 2px;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .pac-container {
    max-width: 90vw;
    left: 5vw !important;
  }

  .pac-item {
    padding: 12px 16px;
    font-size: 16px; /* Prevent zoom on mobile */
  }
}

/* FluentForm specific adjustments */
.fluent-address .los-autocomplete-enabled {
  transition: all 0.3s ease;
}

.fluent-address .ff-el-form-control.los-autocomplete-enabled:focus {
  border-color: #1a73e8;
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
}

/* Help text for autocomplete fields */
.los-autocomplete-help {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
  font-style: italic;
}

/* Powered by Google logo positioning */
.pac-container::after {
  content: "";
  display: block;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAXCAYAAACh0qOvAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAJrSURBVHgB7VlLaxNBFL1Jkz5oi1WwVkWlILZgF+0PUFApCi5cuBBcuHThQheCOxeCO3HhQnDhwgVFcePChUtBcOdCcCe4cOdCsCi4ELdCF4IL6zt49wZm5k7mMZNJk2l6YMjMu/+7595779w5AQiCgBWEy4gNOmCDDtig/x+1tbWZLrALgiAkLkVfX5+U3d3dTaVSKTBTqZRaLhazQ0NDskwPDAyY+v1/gGDyEBAABXf9FcnsdwzwExKU7c3t1pSECNgm5ufne0CbO8bGxtZTqVSezWaDYrEYLC4uBgsLCw3Nzc2Zx8fHX8Xa2tpCNptlYmJix+bmZnZ4eLg8OTmp1NXVQS6Xk2VJmJ6eZmJiYsfGxsa29vb2dGtrq9Le3i7LMru6uiQZJ07a3t7eZmJjY2NbU1OTl/zp6Wnb8vJyMDEx0dHe3p5vbGxsADIi5XJZlUol+7W19f8DtARpXB8dHX1aWVkJ1tbW4Pj4GCqVChSLRcjn87C/vw9HR0ews7MDk5OT1ba2Nslms2xvby9fLBab8/m8XFdXVz86OlJgamq/t7fX0dnZyYRCIScSNjY2Zuzs7GA+n1fq6uqgVCoFyLQGgwMDAPi4DgAAZGVlZVlXV1cXmUwGNjc34eDgAA4PD+Hw8BD29vZgdnYW5ubmYGdnp/b6+voWkMnJSU4PDw+3gWBzcxOOjo6AIhEOh4Ojo6N+AAAAAAAAAIA7du3atZu7u7t3BM/Pz8/r6+s39/b2nohEIlAql2FhYQGmpqZU+/v7PQAAAAAAAEDs/7BmZmY6QP8A9G7QgL31t7YAAAAASUVORK5CYII=");
  background-size: contain;
  background-repeat: no-repeat;
  height: 15px;
  margin: 8px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .pac-container {
    border: 2px solid #000;
  }

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

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .los-autocomplete-enabled,
  .fluent-address .los-autocomplete-enabled {
    transition: none;
  }

  .los-autocomplete-loading::after {
    animation: none;
  }
}