/* Filtre véhicule (marque → modèle) — barre de sélection + état de chargement */

.vfilter{margin:0 0 24px}

/* ── Barre : tout sur une ligne, le reset à droite ───── */
.vfilter-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding:12px 16px;
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
}

/* Liseré jaune : rattache visuellement le bloc au reste du thème. */
.vfilter-bar::before{
  content:"";width:4px;height:22px;flex:0 0 auto;
  background:var(--y);border-radius:2px;
}

.vfilter-label{
  display:inline-flex;align-items:center;gap:8px;margin-right:4px;
  font-size:12px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--navy);white-space:nowrap;
}
.vfilter-label svg{color:var(--slate)}

/* ── Selects ────────────────────────────────────────────────── */
.vfilter-bar select{
  /* grow + max : tient sur une ligne dans la colonne etroite d'une page
     categorie comme sur la pleine largeur d'une page redigee. */
  flex:1 1 190px;max-width:280px;min-width:0;
  height:44px;padding:0 38px 0 14px;
  font-size:15px;font-weight:600;color:var(--navy);
  background-color:var(--gray-bg);border:1.5px solid var(--border);border-radius:var(--r);
  cursor:pointer;transition:border-color .15s,background-color .15s,box-shadow .15s;
  /* chevron maison : les flèches natives diffèrent trop d'un OS à l'autre */
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:18px;
}
.vfilter-bar select:hover:not(:disabled){border-color:var(--y);background-color:var(--white)}
.vfilter-bar select:focus-visible{
  outline:none;border-color:var(--y);background-color:var(--white);
  box-shadow:0 0 0 3px var(--y-soft);
}
/* Désactivé mais toujours lisible : un champ fantôme passe pour un bug. */
.vfilter-bar select:disabled{color:var(--slate);background-color:var(--gray-bg2);cursor:not-allowed}

/* Marque choisie : le champ se distingue des champs encore vides. */
.vfilter-bar select.is-set{
  border-color:var(--navy);background-color:var(--white);color:var(--navy);
}

.vfilter-reset{
  margin-left:auto;padding:8px 14px;
  font-size:13px;font-weight:700;color:var(--slate);
  background:transparent;border:1px solid transparent;border-radius:var(--r);
  cursor:pointer;transition:color .15s,background .15s,border-color .15s;
}
.vfilter-reset:hover:not(:disabled){color:var(--navy);background:var(--y-pale);border-color:var(--y)}
.vfilter-reset:disabled{opacity:0;pointer-events:none}

/* ── Séparateur + compteur entre le filtre et les produits ──── */
.vfilter-count{
  display:flex;align-items:center;gap:14px;
  margin:22px 0 18px;
  font-size:14px;font-weight:700;color:var(--slate);
}
.vfilter-count::after{content:"";flex:1 1 auto;height:1px;background:var(--border)}

/* ── Chargement : le spinner apparaît, les résultats s'estompent ── */
.vfilter-spinner{
  width:18px;height:18px;flex:0 0 auto;opacity:0;
  border:2px solid var(--border);border-top-color:var(--navy);border-radius:50%;
  transition:opacity .15s;
}
.vfilter.is-loading .vfilter-spinner{opacity:1;animation:vfilter-spin .7s linear infinite}
.products-grid.is-loading,.wc-archive-products.is-loading{opacity:.45;pointer-events:none}
.products-grid,.wc-archive-products{transition:opacity .15s}

/* Le "aucun produit" occupe toute la largeur de la grille */
.products-grid>.no-results,.wc-archive-products>.no-results{grid-column:1/-1}

@keyframes vfilter-spin{to{transform:rotate(360deg)}}

@media(max-width:780px){
  .vfilter-bar{padding:12px 14px}
  .vfilter-label{flex:0 0 100%;margin-right:0}
  .vfilter-bar::before{display:none}
  .vfilter-bar select{flex:1 1 100%}
  .vfilter-reset{margin-left:0}
  .vfilter-count{margin:18px 0 14px}
}

@media(prefers-reduced-motion:reduce){
  .vfilter-spinner,.products-grid,.wc-archive-products,.vfilter-bar select{transition:none}
  .vfilter.is-loading .vfilter-spinner{animation-duration:1.6s}
}

/* Diagnostic réservé aux administrateurs (voir inc/filtre-vehicule.php) */
.vfilter-notice{
  margin:16px 0;padding:12px 16px;border:1px dashed #F59E0B;border-radius:var(--r);
  background:var(--y-pale);color:#92400E;font-size:14px;line-height:1.5;
}