/* #3 – UI Admin (AdminManager, ProductTabManager, CSS/JS, PluginLoader) + Frontend (DynamicFilterWidget, FilterWidgetBase, FrontendManager, SimpleFilterWidget)

/* 🌟 Style des groupes de filtres */
/* .filter-group {
    margin-bottom: 15px;
} */

.filter-group h5 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 8px;
    text-transform: uppercase;
    color: #333;
    border-bottom: 2px solid #e30613; /* Rouge pour un effet visuel */
    padding-bottom: 5px;
}

/* 🌟 Checkboxes et labels */
.filter-group label {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #444;
    cursor: pointer;
    /* margin-bottom: 8px; */
    transition: all 0.3s ease-in-out;
}

/* 🌟 Style des checkbox */
.filter-group input[type="checkbox"] {
    margin-right: 8px;
    width: 16px;
    height: 16px;
    accent-color: #e30613; /* Couleur personnalisée */
}

/* 🌟 Hover effect */
.filter-group label:hover {
    color: #e30613;
    font-weight: bold;
}

/* 🌟 Gamme de prix - Slider */
.filter-group input[type="range"] {
    width: 100%;
    margin-top: 8px;
}

/* 🌟 Style du bouton Appliquer */
.apply-filters {
    background: #e30613;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    border: none;
    padding: 10px;
    width: 100%;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease-in-out;
}

.apply-filters:hover {
    background: #c10010;
}

/* 🌟 Appliquer un fond gris clair à tout le conteneur du widget des filtres */
.sidebar-box.widget_dynamic_product_filter_widget {
    background: #f9f9f9; /* Fond gris clair */
    border-radius: 8px; /* Coins arrondis pour un effet plus doux */
    padding: 15px; /* Ajoute un peu d'espace autour du contenu */
    border: 1px solid #ddd; /* Bordure légère pour bien séparer du reste */
}

.apply-filters {
    position: sticky;
    bottom: -36px;
}

/* ===== Price slider (clean v2) ===== */
.filter-group.price-range { margin-bottom: 24px; }

/* Piste + segment sélectionné */
.range-wrap { position: relative; padding: 10px 0 18px; }
.range-track {
  position: absolute; left: 0; right: 0; top: 20px; height: 4px;
  background: #e6e6e6; border-radius: 999px; overflow: hidden;
}
.range-track::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: var(--start, 0%); right: calc(100% - var(--end, 100%));
  background: #e60000; /* rouge thème */
}

/* Sliders superposés (cache la piste native) */
.range-wrap input[type=range]{
  position: absolute; left: 0; right: 0; top: 20px; width: 100%;
  height: 0; margin: 0; background: transparent;
  pointer-events: none; -webkit-appearance: none; appearance: none;
}
.range-wrap input[type=range]::-webkit-slider-runnable-track {
  height: 0 !important; background: transparent !important;
  border: 0 !important; box-shadow: none !important;
}
.range-wrap input[type=range]::-moz-range-track { height: 0; background: transparent; border: 0; }

/* Poignées */
.range-wrap input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; pointer-events:auto; cursor:pointer;
  height:18px; width:18px; border-radius:50%;
  background:#e60000; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.15);
  margin-top:-9px; /* centre la poignée sur la piste */
}
.range-wrap input[type=range]::-moz-range-thumb{
  pointer-events:auto; cursor:pointer;
  height:18px; width:18px; border-radius:50%;
  background:#e60000; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.15);
}

/* Inputs inline sous la règle */
.inline-inputs{
  display:flex; justify-content:center; align-items:center;
  gap:12px; margin-top:22px;
}
.inline-inputs .dash{ opacity:.6; }
.inline-field{ display:flex; align-items:center; gap:6px; }
.inline-field input{
  width:110px; padding:8px 10px; font-size:14px; text-align:right;
  border:1px solid #ddd; border-radius:6px; background:#fff;
}
.inline-field input:focus{
  outline:none; border-color:#e60000; box-shadow:0 0 0 2px rgba(230,0,0,.12);
}
.inline-field .suffix{ opacity:.75; }

/* Nettoyage flèches des number */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
input[type=number]{ -moz-appearance:textfield; }

/* Mobile */
@media (max-width: 480px){
  .inline-field input{ width:100px; }
}