/* ==========================================================
   AUTOCOMPLÉTION ADRESSE POSTALE
   ========================================================== */



.postal-address-fields input:hover,
.postal-address-fields select:hover,
.postal-address-fields textarea:hover {
    border-color: #94a3b8;
}

.postal-address-fields input:focus,
.postal-address-fields select:focus,
.postal-address-fields textarea:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgb(37 99 235 / 14%);
}

/* Le conteneur sert de référence au menu absolu. */
.autocomplete-field {
    position: relative;
}

/* ==========================================================
   MENU DE RÉSULTATS
   ========================================================== */

.autocomplete-results {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    left: 0;
    z-index: 1000;

    box-sizing: border-box;
    width: 100%;
    max-height: 320px;
    margin: 0;
    padding: 0.35rem;

    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;

    background: #ffffff;
    border: 1px solid #d8e0ea;
    border-radius: 10px;
    box-shadow:
        0 16px 40px rgb(15 23 42 / 14%),
        0 3px 10px rgb(15 23 42 / 8%);
}

.autocomplete-results[hidden] {
    display: none !important;
}

/*
 * Très important :
 * les styles natifs de button imposent parfois une largeur ou empêchent
 * correctement le retour à la ligne.
 */
.autocomplete-result {
    appearance: none;
    display: block;

    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 0.7rem 0.8rem;

    color: #263548;
    background: transparent;
    border: 0;
    border-radius: 7px;

    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;

    /* Empêche le texte de sortir du bouton. */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;

    cursor: pointer;

    transition:
        color 120ms ease,
        background-color 120ms ease;
}

.autocomplete-result:hover,
.autocomplete-result:focus,
.autocomplete-result.is-active {
    color: #174ea6;
    background: #eef5ff;
    outline: none;
}

.autocomplete-result:active {
    background: #dceaff;
}

/* Séparateur discret entre les propositions. */
.autocomplete-result + .autocomplete-result {
    border-top: 1px solid #edf1f5;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* ==========================================================
   ÉTATS
   ========================================================== */

.autocomplete-results.is-loading::before {
    display: block;
    padding: 0.8rem;

    color: #64748b;
    content: "Recherche en cours…";
    font-size: 0.875rem;
}

.autocomplete-empty,
.autocomplete-error {
    padding: 0.85rem;

    color: #64748b;
    font-size: 0.875rem;
    line-height: 1.4;
}

.autocomplete-error {
    color: #b42318;
    background: #fff4f2;
    border-radius: 7px;
}

.postal-address-fields .form-error-message,
.postal-address-fields .invalid-feedback {
    display: block;
    margin-top: 0.4rem;

    color: #b42318;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Classes Symfony fréquentes pour un champ invalide. */
.postal-address-fields .is-invalid,
.postal-address-fields input[aria-invalid="true"] {
    border-color: #dc2626;
}

.postal-address-fields .is-invalid:focus,
.postal-address-fields input[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px rgb(220 38 38 / 12%);
}

/* ==========================================================
   BARRE DE DÉFILEMENT
   ========================================================== */

.autocomplete-results {
    scrollbar-width: thin;
    scrollbar-color: #b8c3d1 transparent;
}

.autocomplete-results::-webkit-scrollbar {
    width: 8px;
}

.autocomplete-results::-webkit-scrollbar-track {
    background: transparent;
}

.autocomplete-results::-webkit-scrollbar-thumb {
    background: #b8c3d1;
    border: 2px solid #ffffff;
    border-radius: 99px;
}

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

@media (max-width: 1000px) {
    .postal-address-fields {
        grid-template-columns: minmax(120px, 160px) minmax(240px, 1fr);
    }

    .postal-address-fields .field:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 680px) {
    .postal-address-fields {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .postal-address-fields .field:last-child {
        grid-column: auto;
    }

    .autocomplete-results {
        max-height: 260px;
    }
}