/**
 * ================================================================================
 * LOCOTO DESIGN SYSTEM - GOOGLE MAPS AUTOCOMPLETE STYLES
 * ================================================================================
 * Version: 1.0.0
 * Date: 2025-11-01
 * Description: Styles harmonisés pour l'autocomplétion Google Maps
 * Compatible avec: système LDS, interactions harmonisées
 * ================================================================================
 */

/* ===== CHAMPS D'ADRESSE AVEC AUTOCOMPLÉTION ===== */

.lds-address-field {
    /* Hérite des styles LDS input par défaut */
    transition: border-color var(--lds-transition-base) var(--lds-ease-in-out),
                box-shadow var(--lds-transition-base) var(--lds-ease-in-out);
}

/* État actif de l'autocomplétion */
.lds-address-field.lds-autocomplete-active {
    position: relative;
}

/* État validé (adresse sélectionnée) */
.lds-address-field.lds-address-validated {
    border-color: var(--lds-success) !important;
    box-shadow: 0 0 0 1px var(--lds-success) !important;
    background-color: #f0fdf4;
}

/* Animation de validation */
.lds-address-field.lds-address-validated {
    animation: lds-address-validate-pulse 0.5s ease-out;
}

@keyframes lds-address-validate-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
    }
    70% {
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

/* ===== DROPDOWN GOOGLE MAPS (PAC CONTAINER) ===== */

/* Personnalisation du dropdown d'autocomplétion Google Maps */
.pac-container {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: var(--lds-radius-lg);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    margin-top: 4px;
    font-family: inherit;
    z-index: 9999 !important; /* Au-dessus des modals */
}

.pac-container:after {
    display: none; /* Masquer le logo Google Maps dans le dropdown */
}

.pac-item {
    padding: 0.75rem 1rem;
    cursor: pointer;
    border-top: 1px solid #f3f4f6;
    transition: background-color var(--lds-transition-fast) var(--lds-ease-in-out);
}

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

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

.pac-item-query {
    font-size: var(--lds-text-sm);
    color: #111827;
    font-weight: var(--lds-font-weight-medium);
}

.pac-matched {
    font-weight: var(--lds-font-weight-bold);
    color: var(--lds-primary, var(--lds-primary));
}

.pac-icon {
    background-image: none !important;
    width: 20px;
    height: 20px;
    margin-top: 2px;
}

.pac-icon:before {
    content: "\f3c5"; /* Font Awesome map-marker-alt */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #6b7280;
    font-size: 14px;
}

/* ===== CONTAINER DE CARTE GOOGLE MAPS ===== */

.lds-map-wrapper {
    transition: all var(--lds-transition-base) var(--lds-ease-in-out);
    animation: lds-map-slide-down 0.3s ease-out;
}

@keyframes lds-map-slide-down {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.lds-map-wrapper.hidden {
    display: none !important;
}

.lds-map-element {
    background-color: #f3f4f6;
    position: relative;
}

/* Loader pendant le chargement de la carte */
.lds-map-element:empty:before {
    content: "Chargement de la carte...";
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #6b7280;
    font-size: var(--lds-text-sm);
}

/* ===== INDICATEUR D'ÉTAT API GOOGLE MAPS ===== */

.lds-gmaps-status {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: var(--lds-radius-full);
    font-size: var(--lds-text-xs);
    font-weight: var(--lds-font-weight-medium);
}

.lds-gmaps-status.success {
    background-color: #d1fae5;
    color: #065f46;
}

.lds-gmaps-status.error {
    background-color: #fee2e2;
    color: #991b1b;
}

.lds-gmaps-status.loading {
    background-color: #e0e7ff;
    color: #3730a3;
}

/* ===== ICÔNE DE VALIDATION DANS LE CHAMP ===== */

.lds-address-field-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.lds-address-field-wrapper .lds-address-field {
    padding-right: 2.5rem; /* Espace pour l'icône */
}

.lds-address-validation-icon {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--lds-success);
    font-size: var(--lds-text-xl);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--lds-transition-base) var(--lds-ease-in-out);
}

.lds-address-field.lds-address-validated ~ .lds-address-validation-icon {
    opacity: 1;
}

/* ===== CONTRÔLES DE LA CARTE ===== */

.gm-style-iw-c,
.gm-style-iw-d {
    border-radius: var(--lds-radius-lg) !important;
}

.gm-style .gm-style-iw-c {
    padding: 0.75rem !important;
}

.gm-style .gm-style-iw-d {
    overflow: auto !important;
}

/* Boutons de contrôle de la carte */
.gm-style button {
    border-radius: var(--lds-radius-md) !important;
}

.gm-style button:hover {
    background-color: #f3f4f6 !important;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 768px) {
    .lds-map-element {
        height: 400px !important; /* Hauteur réduite sur mobile */
    }

    .pac-container {
        width: 100% !important;
        max-width: 100vw;
    }
}

/* ===== ACCESSIBILITÉ ===== */

.lds-address-field:focus {
    outline: 2px solid var(--lds-primary, var(--lds-primary));
    outline-offset: 2px;
}

.pac-item:focus {
    outline: 2px solid var(--lds-primary, var(--lds-primary));
    outline-offset: -2px;
}

/* ===== DARK MODE (si implémenté dans le futur) ===== */

@media (prefers-color-scheme: dark) {
    .pac-container {
        background-color: #1f2937;
        border-color: #374151;
    }

    .pac-item {
        border-top-color: #374151;
    }

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

    .pac-item-query {
        color: #f9fafb;
    }

    .pac-matched {
        color: #60a5fa;
    }

    .pac-icon:before {
        color: #9ca3af;
    }
}

/* ===== INTÉGRATION AVEC LES MODALS HARMONISÉS ===== */

/* Assurer que le dropdown apparaît au-dessus des modals */
[data-lds-modal="harmonized"] .pac-container {
    z-index: 10000 !important;
}

/* Ajustement pour les champs dans les modals */
[data-lds-modal="harmonized"] .lds-map-wrapper {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* ===== LOADING STATE ===== */

.lds-address-field.loading {
    background-image: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: lds-loading-shimmer 1.5s infinite;
}

@keyframes lds-loading-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}