/* Grille de la barre */
/*.bg-recipe-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: .75rem;
  align-items: stretch;
  padding: .75rem 0;
}*/


/* Dropdown */
.bg-filter { position: relative; }

.bg-filter__button{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.65rem .9rem;
  border:0;
  background:var(--nv-secondary-accent); color:#fff;
  font-weight:700; text-transform:uppercase; letter-spacing:.02em;
  cursor:pointer;
  font-family: 'Cocoon';
}
.bg-filter__icon {        
  color: var(--nv-text-color, #0e2245);
}
.bg-filter__icon svg{ 
	display:inline-block;
	vertical-align:middle;
	width:25px; height:25px;
	fill: currentColor;   
}
.bg-filter__label{ flex:1 1 auto; text-align:left; }
.bg-filter__carret{ margin-left:.5rem; }

.bg-filter__panel{
  position:absolute; left:0;
  min-width:220px; z-index:40;
  background:var(--nv-text-color, #0e2245); color:#fff;
  padding:.6rem;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
  transform-origin:top; transform:scaleY(.98);
  opacity:0; pointer-events:none;
  transition:opacity 120ms ease, transform 120ms ease;
}
.bg-filter.is-open .bg-filter__panel{
  opacity:1; transform:scaleY(1); pointer-events:auto;
}

.bg-filter__panel .search-filter-input-checkbox__control {
	max-width: 25px;
}

/* Items */
.bg-filter__panel .search-filter-input-checkbox{
  display:flex; align-items:center; padding:.35rem .5rem;
}
.bg-filter__panel .search-filter-input-checkbox:hover{
  background:rgba(255,255,255,.06);
}
.bg-filter__panel .search-filter-input-checkbox__container{
  display:flex; 
  cursor:pointer;
  align-items:center;
  gap:.6rem;
  position:relative;
  padding-left:32px;                /* place pour la case custom */
  line-height:1.2;
}

/* Masquer à 100% le contrôle SVG du plugin */
.bg-filter__panel .search-filter-input-checkbox__control,
.bg-filter__panel .search-filter-input-checkbox__control svg {
  display: none !important;
}

/* On ne cache les labels natifs que quand JS est prêt */
.bg-recipe-filters.js-ready .search-filter-label{ display:none !important; }

/* L’input occupe toute la ligne pour cliquer partout */
.bg-filter__panel .search-filter-input-checkbox__input{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* Case custom : état par défaut = contour blanc, fond transparent */
.bg-filter__panel .search-filter-input-checkbox__container::before{
  content:"";
  position:absolute;
  left:0; top:50%; transform:translateY(-50%);
  width:22px; height:22px;
  max-width:25px; max-height:25px;
  border:2px solid #fff;
  border-radius:4px;
  background:transparent;  
  box-sizing:border-box;
}

/* Coche bleue plus visible, rendue uniquement quand coché */
.bg-filter__panel .search-filter-input-checkbox__container::after{
  content:"";
  position:absolute;
  left:6px; top:50%;
  width:8px; height:12px;
  border:2px solid var(--color, #0e2245); /* bleu marine */
  border-top:0; border-left:0;
  transform:translateY(-62%) rotate(45deg);
  opacity:0;                                  /* ← invisible par défaut */
}

/* État coché: fond blanc + coche bleue marine */
.bg-filter__panel .search-filter-input-checkbox__input:checked
+ .search-filter-input-checkbox__container::before{
  background:#fff;
}

.bg-filter__panel .search-filter-input-checkbox__container::after{
  content:"";
  position:absolute;
  left:7px; top:50%;
  width:8px; height:14px;
  border:2px solid var(--nv-text-color, #0e2245);
  border-top:0; border-left:0;     /* on garde seulement droite + bas */
  transform: translateY(-62%) rotate(45deg);  /* ✓ dans le bon sens */
  opacity:0;                        /* visible seulement quand coché */
}

/* Libellé item */
.bg-filter__panel .search-filter-input-checkbox__label{
  color: var(--nv-c-2) !important;
  font-weight:600;
  text-transform:none;
}

/* Hover item */
.bg-filter__panel .search-filter-input-checkbox:hover{
  background:rgba(255,255,255,.06);
  border-radius:6px;
}

/* 1) Neutraliser tout fond/icone hérités dans la case */
.bg-filter__panel .search-filter-input-checkbox__container,
.bg-filter__panel .search-filter-input-checkbox__container * {
  background: none !important;
}

/* 2) S'assurer que nos pseudo-éléments passent au-dessus */
.bg-filter__panel .search-filter-input-checkbox__container::before,
.bg-filter__panel .search-filter-input-checkbox__container::after{
  z-index: 1;
}


/* 4) État coché : montrer la coche */
.bg-filter__panel .search-filter-input-checkbox__input:checked
+ .search-filter-input-checkbox__container::after{
  opacity:1;
}



/* Responsive */
@media (max-width: 768px){  .bg-filter { width: 100%; } }