/* --- ZÉRO-RÉINITIALISATION POUR ÉVITER L'HÉRITAGE DU THÈME --- */

.sayimmo-filter-form * {
    /* Règle générique pour annuler les marges et padding du thème */
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    font-size: 100% !important; /* Pour conserver la taille définie ici */
    /* line-height: 1.5 !important; */
}

/* --- SÉLECTEUR PRINCIPAL DU FORMULAIRE (GRILLE) --- */

.sayimmo-filter-form {
    display: grid !important;
    /* grid-template-columns: repeat(5, 1fr) !important;  */
    grid-template-columns: 2fr 2fr 1fr 1fr 1fr 1fr;
    gap: 20px !important; 
    /* padding: 30px !important; */
    /* background-color: #f8f8f8 !important; */
    /* border-radius: 8px !important; */
    /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important; */
    /* Rétablir la police de base */
    font-family: Arial, sans-serif !important; 
}

/* Titre du formulaire */
.sayimmo-filter-form h3 {
    grid-column: 1 / -1 !important;
    margin-bottom: 15px !important;
    font-size: 1.5em !important;
    color: #333 !important;
    /* Annuler la remise à zéro précédente pour le padding/margin pour le titre */
    padding: 0 !important;
    margin-bottom: 15px !important;
}

/* Conteneurs de champs (non-checklist) */
.sayimmo-filter-form .filter-field-button {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important; /* Assuré par la réinitialisation * */
    margin: 0 !important;
}

/* Étiquettes (pour les champs Surface, Prix, Pièces) */
.sayimmo-filter-form label {
    font-weight: bold !important;
    margin-bottom: 5px !important;
    color: #555 !important;
    font-size: 0.9em !important;
    padding: 0 !important; /* Assuré par la réinitialisation * */
}

/* Champs de texte et nombres (forcés) */
.sayimmo-filter-form input[type="number"],
.sayimmo-filter-form select {
    padding: 10px !important;
    border: 1px solid #ddd !important;
    border-radius: 5px !important;
    font-size: 1em !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background-color: white !important; 
    height: auto !important; /* Annuler toute hauteur fixée par le thème */
}

/* Prix Min / Max */
.sayimmo-filter-form .price-range {
    grid-column: span 2 !important;
}
.sayimmo-filter-form .price-range-inputs {
    display: flex !important;
    gap: 10px !important;
}
.sayimmo-filter-form .price-range-inputs input {
    width: 50% !important;
}

/* Bouton SUBMIT */
.sayimmo-filter-form button[type="submit"] {
    grid-column: span 1 !important;
    width: 100% !important;
    padding: 10px !important;
    background-color: #0771AC !important;
    color: white !important;
    border: none !important;
    border-radius: 5px !important;
    font-size: 1em !important;
    cursor: pointer !important;
    transition: background-color 0.2s !important;
    align-self: flex-end !important;
}
.sayimmo-filter-form button[type="submit"]:hover {
    background-color: #055987 !important;
}

/* Bouton RESET*/
.sayimmo-filter-form .button-reset {
    grid-column: span 1 !important;
    width: 100% !important;
    padding: 10px !important;
    background-color: inherit !important;
    color: white !important;
    border: none !important;
    border-radius: 5px !important;
    font-size: 1em !important;
    cursor: pointer !important;
    transition: background-color 0.2s !important;
    align-self: flex-end !important;
}
.sayimmo-filter-form .button-reset:hover {
    background-color: inherit !important;
}
/* Bouton FILTER*/
.sayimmo-filter-form .button-filter {
    grid-column: span 1 !important;
    width: 100% !important;
    padding: 10px !important;
    background-color: #555 !important;
    color: white !important;
    border: none !important;
    border-radius: 5px !important;
    font-size: 1em !important;
    cursor: pointer !important;
    transition: background-color 0.2s !important;
    align-self: flex-end !important;
}
.sayimmo-filter-form .button-filter:hover {
    background-color: inherit !important;
}
/* --- Style spécifique aux Checklists Déroulantes (forcées) --- */
.checklist-dropdown {
    position: relative !important;
    padding: 0 !important; /* IMPORTANT : annule le padding-top si nécessaire */
    margin: 0 !important;
}

.dropdown-button {
    width: 100% !important;
    padding: 10px 15px !important;
    border: 1px solid #ccc !important; 
    border-radius: 5px !important;
    background-color: #fff !important;
    text-align: left !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 1em !important;
    height: auto !important;
}

.checklist-dropdown .main-label {
    /* Style pour le texte du bouton */
    font-weight: 700 !important; 
    color: #333 !important;
    font-size: 0.9em !important;
    padding: 0 !important;
    margin: 0 !important;
    /* text-transform:uppercase; */
}

.checklist-dropdown .selected-count {
    font-weight: normal !important; 
    color: #333 !important;
    font-size: 0.8em !important;
    padding: 0 !important;
    margin: 0 0 0 4px !important;
}
.dropdown-button i{
    fill: #055987;
    color: #055987;
}
/* .dropdown-button::after {
    content: '▼' !important;
    content: '\25BC' !important;
    font-size: 0.8em !important;
    margin-left: 10px !important;
    color: #0771AC !important;
} */

.checklist-content {
    display: none !important; 
    position: absolute !important;
    /* top: calc(100% + 5px) !important;  */
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important; /* Très important pour être au-dessus de tout */
    background-color: #fff !important;
    border: 1px solid #ccc !important;
    border-radius: 5px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    padding: 10px !important;
    max-height: 200px !important; 
    overflow-y: auto !important;
}

.checklist-dropdown.open .checklist-content {
    display: block !important;
}

.checkbox-item {
    display: flex !important;
    align-items: center !important;
    padding: 0px 0 2px 0 !important;
    margin: 0 !important;
}

.checkbox-item label {
    flex-grow: 1 !important;
    margin: 0 0 0 8px !important;
    font-size: 0.95em !important;
    font-weight: normal !important;
    padding: 0 0 0 0!important;
}

.checkbox-item input[type="checkbox"] {
    /* Force l'apparence des cases à cocher */
    accent-color: #055987 !important; 
    cursor: pointer !important;
}

/* --- Media Query pour les petits écrans (Mobile) --- */
@media (max-width: 768px) {
    .sayimmo-filter-form {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .sayimmo-filter-form .price-range,
    .sayimmo-filter-form .checklist-dropdown,
    .sayimmo-filter-form button[type="submit"] {
        grid-column: 1 / 2 !important;
    }
}


.ic-localisation {
    /* Définir une taille pour l'élément qui contiendra l'icône */
    width: 30px;
    height: 30px; 
    display: inline-block; /* Ou block, selon le besoin */
    
    /* Intégrer le SVG comme background-image */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 1200'%3E%3Cpath fill='red' d='m600 1173.4c-44.145-2.0547-440.18-333.87-468.1-605.19-13.152-89.758-0.21875-181.41 37.262-264.02 37.477-82.613 97.914-152.71 174.12-201.94 76.199-49.227 164.95-75.508 255.66-75.711 90.719-0.19922 179.58 25.688 256 74.574s137.17 118.72 175.01 201.16c37.844 82.449 51.184 174.04 38.434 263.86-37.531 288.79-410.73 590.78-468.38 607.27zm0-1090.6v0.003906c-79.863 0.23438-157.99 23.352-225.12 66.609-67.133 43.258-120.47 104.85-153.68 177.48-33.219 72.633-44.93 153.26-33.746 232.34 22.66 227.89 338.68 505.81 412.55 551.49 74.871-45.801 390.96-325.76 412.55-551.36v0.003906c11.207-79.094-0.48828-159.74-33.695-232.39-33.211-72.652-86.547-134.26-153.69-177.54-67.141-43.277-145.28-66.402-225.16-66.641zm0 679.03v0.003906c-69.445-0.078125-136.02-27.699-185.13-76.805-49.105-49.105-76.727-115.68-76.805-185.13 13.168-347.04 510.75-346.94 523.86 0.003907h0.003906c-0.078125 69.445-27.699 136.02-76.805 185.12-49.105 49.105-115.68 76.727-185.13 76.805zm0-467.63c-54.535 0.0625-106.82 21.758-145.38 60.32s-60.246 90.848-60.309 145.38c9.6562 272.22 401.75 272.15 411.36-0.003906h0.003906c-0.0625-54.531-21.75-106.81-60.312-145.38-38.559-38.562-90.84-60.258-145.37-60.32z'%3E%3C/path%3E%3C/svg%3E");
    
    /* Options pour un affichage correct */
    background-size: contain; /* Ajuste l'icône à la taille de l'élément */
    background-repeat: no-repeat;
    background-position: center;
  }


  /* --- STYLE DE LA POPUP LATÉRALE DE FILTRE --- */

/* L'overlay semi-transparent en arrière-plan */
.sayimmo-popup-overlay {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    z-index: 9998 !important; /* Sous la popup mais au-dessus du site */
    display: none !important; /* Caché par défaut */
    pointer-events: none !important; /* Permet le clic à travers s'il est caché */
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

/* Affichage de l'overlay */
.sayimmo-popup-overlay.is-open {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* La popup elle-même (le panneau latéral) */
.sayimmo-popup-filtre {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 350px !important; /* Largeur de la boite latérale */
    background-color: #ffffff !important;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1) !important;
    z-index: 9999 !important; /* Toujours au-dessus de l'overlay et du site */
    transform: translateX(100%) !important; /* Caché par défaut (déplacé vers la droite) */
    transition: transform 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important; /* Annule le reset de la grille */
}

/* Affichage de la popup */
.sayimmo-popup-filtre.is-open {
    transform: translateX(0) !important; /* Visible (revient à sa position) */
}

/* En-tête de la popup */
.sayimmo-popup-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 15px 20px !important;
    border-bottom: 1px solid #eee !important;
}

.sayimmo-popup-header h3 {
    margin: 0 !important;
    font-size: 1.2em !important;
    font-weight: bold !important;
    color: #333 !important;
}

.sayimmo-close-popup {
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    color: #999 !important;
    font-size: 1.5em !important;
    line-height: 1 !important;
    padding: 5px !important;
}

.sayimmo-close-popup:hover {
    color: #c00 !important;
}

/* Contenu de la popup */
.sayimmo-popup-content {
    flex-grow: 1 !important; /* Prend l'espace restant */
    overflow-y: auto !important; /* Permet le défilement si le contenu est long */
    padding: 20px !important;
}

/* Pied de page de la popup (bouton d'action) */
.sayimmo-popup-footer {
    padding: 15px 20px !important;
    border-top: 1px solid #eee !important;
    text-align: center !important;
}

.button-submit-popup {
    width: 100% !important;
    padding: 10px !important;
    background-color: #0073aa !important; /* Couleur WP standard ou votre couleur principale */
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 1.1em !important;
    transition: background-color 0.2s !important;
}

.button-submit-popup:hover {
    background-color: #005177 !important;
}

/***/
.sayimmo-popup-content .filter-group-title{
    margin: 0 0 4px !important;
    font-size: 1em !important;
    font-weight: bold !important;
    color: #333 !important;
    /* border-bottom: solid 1px #EFEFEF; */
}
.sayimmo-popup-content .filter-separator{
    border-bottom: solid 1px #EFEFEF;
    line-height: 0px;
    margin-top: 10px!important;
}

.sayimmo-popup-content .filter-range {
    display: flex !important;
    gap: 0 !important;
    margin-bottom: 15px !important;
    overflow: hidden !important;
    background-color: #fff !important;
}

.sayimmo-popup-content .filter-range .range-input-wrapper {
    flex: 1 1 50% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 8px 10px !important; 
}

.sayimmo-popup-content .filter-range label {
    order: 1 !important;
    display: block !important;
    font-size: 0.75em !important;
    color: #333!important;
    margin-bottom: 3px !important;
    text-transform: capitalize !important;
    font-weight: 500 !important;
    line-height: 1 !important;
}

.sayimmo-popup-content .filter-range input[type="number"] {
    order: 2 !important;
    width: 100% !important;
    padding: 10px 20px 10px 10px !important;
    border: solid 1px #AEAEAE !important;
    outline: none !important;
    box-shadow: none !important;
    background-color: #F7F7F7 !important;
    line-height: 1.2 !important;
    font-size: 1em !important;
    color: #333 !important; 
}

.sayimmo-popup-content .filter-range input[type="number"]::placeholder {
    color: #bbb !important;
}

/* --- Masquage des flèches des inputs de type number (Chrome/Safari/Edge) --- */
.sayimmo-popup-content input[type="number"]::-webkit-inner-spin-button,
.sayimmo-popup-content input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* --- Masquage des flèches des inputs de type number (Firefox) --- */
.sayimmo-popup-content input[type="number"] {
    -moz-appearance: textfield;
}


/* --- Symbole de devise (€) --- */
.sayimmo-popup-content .with-currency {
    position: relative !important;
}

/* .sayimmo-popup-content .with-currency input[type="number"] {
    padding-right: 25px !important; 
    text-align: right !important; 
} */

.sayimmo-popup-content .with-currency::after {
    content: '€' !important;
    position: absolute !important;
    right: 10px !important; 
    top: 50% !important; 
    transform: translateY(-50%) !important;
    font-size: 1em !important; 
    color: #333 !important; 
    pointer-events: none !important; 
}

.sayimmo-popup-content .filter-range .range-input-wrapper.with-currency::after {
    top: calc(50% + 9px) !important;
    right: 20px!important;
    color: #888 !important;
}

/* --- Symbole de m² --- */
.sayimmo-popup-content .with-surface {
    position: relative !important;
}

/* .sayimmo-popup-content .with-surface input[type="number"] {
    padding-right: 27px !important; 
    text-align: right !important; 
} */

.sayimmo-popup-content .with-surface::after {
    content: 'm²' !important;
    position: absolute !important;
    right: 10px !important; 
    top: 50% !important; 
    transform: translateY(-50%) !important;
    font-size: 0.8em !important; 
    color: #333 !important; 
    pointer-events: none !important; 
}

.sayimmo-popup-content .filter-range .range-input-wrapper.with-surface::after {
    top: calc(50% + 9px) !important;
    right: 20px!important;
    color: #888 !important;
}