/* ==========================================================================
   Wego Autocomplete - Liste de suggestions sous un champ texte
   Styles pour le wrapper, la liste de résultats et le survol
   ========================================================================== */

/* ========== CONTENEUR PRINCIPAL ========== */
/* Utilisé pour positionner la liste en absolu */
.wego-autocomplete-wrapper {
    position: relative; /* Le ul sera positionné par rapport à ce wrapper */
}

/* ========== LISTE DES SUGGESTIONS ========== */
.autocomplete-list {
    position: absolute; /* Permet de positionner la liste juste sous le champ */
    z-index: 1000; /* Assure que la liste est au-dessus des autres éléments */
    background-color: var(--wego-light, #fff); /* Fond clair ou couleur personnalisée */
    list-style: none; /* Supprime les puces */
    margin: 0;
    padding: 0;
    border: 1px solid var(--wego-dark, #ccc); /* Bordure fine personnalisée */
    width: 100%; /* Doit suivre la largeur du champ parent */
    border-radius: 0.5rem; /* Coins arrondis pour effet doux */
    max-height: 200px; /* Limite la hauteur totale */
    overflow-y: auto; /* Active le scroll si trop de résultats */
}
/* ========== ÉLÉMENTS DE LA LISTE ========== */
.autocomplete-list li {
    padding: 0.5rem 1rem; /* Espacement interne pour lisibilité */
    cursor: pointer;      /* Curseur clic pour interaction */
}

/* ========== EFFET HOVER & ÉLÉMENT ACTIF ========== */
.autocomplete-list li:hover,
.autocomplete-list li.active {
    background-color: var(--wego-primary, #FF7A00); /* Couleur d’arrière-plan sélectionnée */
    color: #fff; /* Texte blanc sur fond orange */
}

/* ========== LABEL INITIAL (visible dans le champ) ========== */
/* Affiche une étoile rouge pour les champs obligatoires */
label.required::after {
    content: ' *';
    color: var(--wego-danger); /* Ou --wego-danger si tu veux */
}

.has-counter {
    position: relative;
}

.trailing.clear {
    cursor: pointer;

    &:focus {
        color: #3b71ca;
        outline: none;
    }
}