/*
 Theme Name: Listeo Child
 Theme URI: https://mylistocean.com
 Description: Child theme for Listeo
 Author: MyListOcean
 Template: listeo
 Version: 1.0
*/

/* Titre (catégorie) */
.full-page-container .filters-container h1.page-title{
  display:block !important;
}

/* Map : desktop */
@media (min-width: 993px){
  .full-page-map-container.map-fixed{
    margin-right:54px !important;
    height:420px !important;
  }
}

/* Mobile : map avant résultats */
@media (max-width: 992px){
  .full-page-container{
    display:flex !important;
    flex-direction:column !important;
  }

  .full-page-map-container{
    order:1 !important;
    height:320px !important;
  }

  .full-page-content-container{
    order:2 !important;
  }
}

/* ===============================
   LISTEO – BOUTON FILTRES (FINAL)
   Rond bleu + SVG AU-DESSUS
   Zéro ombre / zéro fond parasite
   Décalage à droite
   =============================== */

/* 0) Texte OFF */
.full-page-container .filters-container .show-text,
.full-page-container .filters-container .hide-text{
  display:none !important;
}

/* 1) Le <button> = vraie pastille (surface cliquable = surface visible) */
.full-page-container .filters-container .filter-button-container button.enable-filters-button{
  width:64px !important;
  height:64px !important;
  min-width:64px !important;

  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  background:#005F66 !important;
  box-shadow:none !important;
  filter:none !important;
  text-shadow:none !important;

  position:relative !important;
  left:auto !important;
  top:auto !important;

  margin-left:28px !important; /* décale à droite */
  overflow:hidden !important;  /* coupe tout fond/pseudo qui dépasserait */
}

/* 2) Le <i> = juste un conteneur (aucun fond, aucune ombre) */
.full-page-container .filters-container button.enable-filters-button i.enable-filters-button-icon{
  position:relative !important;
  width:24px !important;
  height:24px !important;

  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  filter:none !important;

  display:block !important;
  z-index:2 !important;
  pointer-events:none !important; /* clic géré par le button */
}

/* 3) On force l’affichage DU SVG via :before/:after (Listeo) */
.full-page-container .filters-container button.enable-filters-button i.enable-filters-button-icon::before,
.full-page-container .filters-container button.enable-filters-button i.enable-filters-button-icon::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
  box-shadow:none !important;
  filter:none !important;
}

/* état fermé = icône filtre */
.full-page-container .filters-container button.enable-filters-button i.enable-filters-button-icon::before{
  background-image:url(/wp-content/themes/listeo/images/filters.svg) !important;
  opacity:1 !important;
}
/* état ouvert = icône close */
.full-page-container .filters-container button.enable-filters-button i.enable-filters-button-icon::after{
  background-image:url(/wp-content/themes/listeo/images/close.svg) !important;
  opacity:0 !important;
}

/* 4) Hover = corail */
.full-page-container .filters-container .filter-button-container button.enable-filters-button:hover{
  background:#FF8A7A !important;
}

/* 5) Ouvert (active) = corail + switch icônes */
.full-page-container .filters-container .filter-button-container button.enable-filters-button.active{
  background:#FF8A7A !important;
}
.full-page-container .filters-container .filter-button-container button.enable-filters-button.active
i.enable-filters-button-icon::before{
  opacity:0 !important;
}
.full-page-container .filters-container .filter-button-container button.enable-filters-button.active
i.enable-filters-button-icon::after{
  opacity:1 !important;
}
/* ===============================
   LISTEO – RECOVER SVG ICON (OVERRIDE)
   =============================== */

/* 1) On vide toute "typo icône" potentielle (font icon) */
.full-page-container .filters-container button.enable-filters-button i,
.full-page-container .filters-container button.enable-filters-button i::before,
.full-page-container .filters-container button.enable-filters-button i::after{
  font-family: inherit !important;
}

/* 2) Cas A : Listeo met les SVG sur i::before / i::after */
.full-page-container .filters-container button.enable-filters-button i.enable-filters-button-icon::before{
  content:"" !important;
  opacity:1 !important;
  position:absolute !important;
  inset:0 !important;
  background:url(/wp-content/themes/listeo/images/filters.svg) no-repeat center / 22px 22px !important;
}
.full-page-container .filters-container button.enable-filters-button.active i.enable-filters-button-icon::before{
  opacity:0 !important;
}
.full-page-container .filters-container button.enable-filters-button i.enable-filters-button-icon::after{
  content:"" !important;
  opacity:0 !important;
  position:absolute !important;
  inset:0 !important;
  background:url(/wp-content/themes/listeo/images/close.svg) no-repeat center / 22px 22px !important;
}
.full-page-container .filters-container button.enable-filters-button.active i.enable-filters-button-icon::after{
  opacity:1 !important;
}

/* 3) Cas B : Listeo met les SVG sur button i::before / button i::after */
.full-page-container .filters-container button.enable-filters-button i::before{
  content:"" !important;
  opacity:1 !important;
  position:absolute !important;
  inset:0 !important;
  background:url(/wp-content/themes/listeo/images/filters.svg) no-repeat center / 22px 22px !important;
}
.full-page-container .filters-container button.enable-filters-button.active i::before{
  opacity:0 !important;
}
.full-page-container .filters-container button.enable-filters-button i::after{
  content:"" !important;
  opacity:0 !important;
  position:absolute !important;
  inset:0 !important;
  background:url(/wp-content/themes/listeo/images/close.svg) no-repeat center / 22px 22px !important;
}
.full-page-container .filters-container button.enable-filters-button.active i::after{
  opacity:1 !important;
}
/* ===============================
   LISTEO – BOUTON FILTRES (FINAL)
   Rond bleu + SVG AU-DESSUS (superposés)
   =============================== */

/* Zone cliquable = button natif (JS Listeo) */
.full-page-container .filters-container .filter-button-container button.enable-filters-button{
  position: relative !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;

  width: 105px !important;
  height: 64px !important;
  padding: 0 !important;

  /* décalage à droite */
  margin-left: 23px !important;
}

/* Texte OFF */
.full-page-container .filters-container .show-text,
.full-page-container .filters-container .hide-text{
  display: none !important;
}

/* Le rond bleu = le <i> (surface visuelle) */
.full-page-container .filters-container button.enable-filters-button i.enable-filters-button-icon{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;

  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;

  background: #005F66 !important;
  box-shadow: none !important;
  filter: none !important;

  z-index: 10 !important;
  pointer-events: none !important; /* le clic reste sur le button */
}

/* SVG (filtres) AU-DESSUS du rond */
.full-page-container .filters-container button.enable-filters-button i.enable-filters-button-icon::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: url(https://mylistocean.com/wp-content/themes/listeo/images/filters.svg)
              no-repeat center / 22px 22px !important;
  opacity: 1 !important;
  z-index: 11 !important;
}

/* SVG (close) quand ouvert */
.full-page-container .filters-container button.enable-filters-button i.enable-filters-button-icon::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: url(https://mylistocean.com/wp-content/themes/listeo/images/close.svg)
              no-repeat center / 22px 22px !important;
  opacity: 0 !important;
  z-index: 11 !important;
}

.full-page-container .filters-container button.enable-filters-button.active i.enable-filters-button-icon::before{
  opacity: 0 !important;
}
.full-page-container .filters-container button.enable-filters-button.active i.enable-filters-button-icon::after{
  opacity: 1 !important;
}

/* Hover + ouvert : couleur du rond */
.full-page-container .filters-container button.enable-filters-button:hover i.enable-filters-button-icon,
.full-page-container .filters-container button.enable-filters-button.active i.enable-filters-button-icon{
  background: #FF8A7A !important;
}
.full-page-container .filters-container button.enable-filters-button i::before,
.full-page-container .filters-container button.enable-filters-button i::after{
  background-image: none !important;
}

/* ===============================
   LISTEO – BOUTON FILTRES (FINAL)
   Rond identique (normal/hover/active)
   SVG au-dessus, aucune ombre/fond parasite
   Décalage à droite
   =============================== */

/* Zone cliquable : le button reste le "hit area" Listeo */
.full-page-container .filters-container .filter-button-container button.enable-filters-button{
  position: relative !important;
  width: 105px !important;     /* on garde la zone cliquable */
  height: 64px !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;

  left: auto !important;
  top: auto !important;

  margin-left: 64px !important; /* décalage vers la droite */
}

/* Le rond VISUEL (toujours le même) */
.full-page-container .filters-container .filter-button-container button.enable-filters-button i.enable-filters-button-icon{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;

  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;

  background: #005F66 !important;
  display: block !important;

  box-shadow: none !important;
  filter: none !important;

  z-index: 3 !important;
  pointer-events: none !important; /* clic géré par le button */
}

/* Texte OFF */
.full-page-container .filters-container .filter-button-container button.enable-filters-button .show-text,
.full-page-container .filters-container .filter-button-container button.enable-filters-button .hide-text{
  display: none !important;
}

/* IMPORTANT : on tue les "fonds" / formes Listeo sur before/after (ils ne doivent JAMAIS dessiner une pastille) */
.full-page-container .filters-container .filter-button-container button.enable-filters-button::before,
.full-page-container .filters-container .filter-button-container button.enable-filters-button::after{
  content: none !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Les pseudo-éléments de l’icône : UNIQUEMENT les SVG (taille fixe), pas de fond, pas de border-radius */
.full-page-container .filters-container .filter-button-container button.enable-filters-button i.enable-filters-button-icon::before,
.full-page-container .filters-container .filter-button-container button.enable-filters-button i.enable-filters-button-icon::after{
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;

  width: 22px !important;
  height: 22px !important;

  background-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;

  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

/* SVG filtres (état fermé) */
.full-page-container .filters-container .filter-button-container button.enable-filters-button i.enable-filters-button-icon::before{
  background-image: url("https://mylistocean.com/wp-content/themes/listeo/images/filters.svg") !important;
  opacity: 1 !important;
}

/* SVG croix (état ouvert) */
.full-page-container .filters-container .filter-button-container button.enable-filters-button i.enable-filters-button-icon::after{
  background-image: url("https://mylistocean.com/wp-content/themes/listeo/images/close.svg") !important;
  opacity: 0 !important;
}

/* Hover = même rond, juste couleur */
.full-page-container .filters-container .filter-button-container button.enable-filters-button:hover i.enable-filters-button-icon{
  background: #FF8A7A !important;
}

/* Ouvert (Listeo met .active) = même rond + swap icône */
.full-page-container .filters-container .filter-button-container button.enable-filters-button.active i.enable-filters-button-icon{
  background: #FF8A7A !important;
}
.full-page-container .filters-container .filter-button-container button.enable-filters-button.active i.enable-filters-button-icon::before{
  opacity: 0 !important;
}
.full-page-container .filters-container .filter-button-container button.enable-filters-button.active i.enable-filters-button-icon::after{
  opacity: 1 !important;
}
/* === KILL la "pilule" Listeo en hover/active/focus (forme allongée) === */
.full-page-container .filters-container .filter-button-container button.enable-filters-button,
.full-page-container .filters-container .filter-button-container button.enable-filters-button:hover,
.full-page-container .filters-container .filter-button-container button.enable-filters-button:active,
.full-page-container .filters-container .filter-button-container button.enable-filters-button:focus,
.full-page-container .filters-container .filter-button-container button.enable-filters-button.active{
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  border: 0 !important;
  border-radius: 0 !important;   /* <- empêche la forme "pilule" */
  outline: none !important;
}

/* Si Listeo met le fond sur des spans internes */
.full-page-container .filters-container .filter-button-container button.enable-filters-button span,
.full-page-container .filters-container .filter-button-container button.enable-filters-button:hover span,
.full-page-container .filters-container .filter-button-container button.enable-filters-button.active span{
  background: transparent !important;
  box-shadow: none !important;
}
/* Icône LISTEO = seule couche visible */
.enable-filters-button-icon,
.enable-filters-button-icon::before,
.enable-filters-button-icon::after{
  border-radius:50% !important;
}

/* Décaler le slider catégories vers la gauche (loin de la carte) */
.full-page-container .filters-container .slider-container{
  margin-right: 40px !important; /* ajuste la valeur si besoin */
}
/* Desktop only – marge à droite de la map */
@media (min-width: 1025px) {
  .full-page-map-container{
    margin-right: 13px !important;
  }
}
@media (min-width: 1025px) {
  .full-page-map-container{
    padding-right: 13px !important;
    box-sizing: border-box;
  }
}
body.tax-classifieds_category .full-page-container {
    display: flex;
}

body.tax-classifieds_category .full-page-map-container {
    display: block;
}

body.tax-classifieds_category .full-page-sidebar {
    display: block;
}
document.addEventListener('DOMContentLoaded', function () {
  if (document.body.classList.contains('tax-classifieds_category')) {
    document.body.classList.add('post-type-archive-listing');
  }
});

/* === TAXONOMY categories : garder la map a droite, supprimer le scroll interne === */
@media (min-width: 993px) {

  /* 1) On interdit le scroll interne des colonnes */
  body.tax-classifieds_category.halfsidebar-archive-listings-layout .full-page-container,
  body.tax-classifieds_category.halfsidebar-archive-listings-layout .full-page-content-container,
  body.tax-classifieds_category.halfsidebar-archive-listings-layout .full-page-sidebar,
  body.tax-classifieds_category.halfsidebar-archive-listings-layout .full-page-content-inner {
    height: auto !important;
    overflow: visible !important;
  }

  /* 2) La map reste a droite et suit le scroll (sticky), sans scrollbar entre les deux */
  body.tax-classifieds_category.halfsidebar-archive-listings-layout .full-page-map-container {
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    overflow: hidden !important;
  }

  /* 3) On s'assure que c'est bien le document (la page) qui scrolle */
  html, body.tax-classifieds_category.halfsidebar-archive-listings-layout {
    overflow-y: auto !important;
  }
}