/* === MP – WC Filters Overlay Styling === */
:root{
  --mp-overlay-bg: #3a404a;   /* ← твій фон */
  --mp-overlay-text: #ffffff;  /* базовий текст */
  --mp-overlay-accent: #caa762;/* акцент/бордери */
}

/* Лише мобільні */
@media (max-width: 782px){
  /* Контейнер діалогу */
  .wc-block-product-filters__overlay .wc-block-product-filters__overlay-dialog{
    background: var(--mp-overlay-bg) !important;
    color: var(--mp-overlay-text);
  }

  /* Заголовки/лейбли/текст */
  .wc-block-product-filters__overlay-dialog .wp-block-heading,
  .wc-block-product-filters__overlay-dialog label,
  .wc-block-product-filters__overlay-dialog .wc-block-product-filter-checkbox-list__text,
  .wc-block-product-filters__overlay-dialog .wc-block-product-filter-chips__item{
    color: var(--mp-overlay-text);
  }

  /* Поля введення у слайдері ціни */
  .wc-block-product-filters__overlay-dialog input[type="text"]{
    background: transparent;
    color: var(--mp-overlay-text);
    border-color: var(--mp-overlay-accent);
  }

  /* Кнопки (Закрити/Застосувати/Очистити) */
  .wc-block-product-filters__overlay-dialog .wp-element-button,
  .wc-block-product-filters__overlay-header button{
    color: var(--mp-overlay-text);
    background: transparent;
    border-color: var(--mp-overlay-accent);
  }
}



/* === Сортування — білий текст і рамка === */
.woocommerce .woocommerce-ordering select,
.wp-block-woocommerce-product-catalog-sorting select,
.wc-block-product-catalog-sorting select {
  color: #fff !important;
}

.woocommerce .woocommerce-ordering select:hover,
.wp-block-woocommerce-product-catalog-sorting select:hover,
.wc-block-product-catalog-sorting select:hover {
  color: #C9AE63 !important;
  border-color: #C9AE63 !important;
}

/* === Мобільна версія: чорний текст і рамка === */
@media (max-width: 782px) {
  .woocommerce .woocommerce-ordering select,
  .wp-block-woocommerce-product-catalog-sorting select,
  .wc-block-product-catalog-sorting select {
    color: #000 !important;
    border-color: #000 !important;
    background-color: #fff !important; /* опціонально, якщо фон темний */
  }
}


/* === Кнопка "Фільтр" у Astra Toolbar === */
.astra-shop-filter-button,
.astra-shop-filter-button .astra-woo-filter-text,
.astra-shop-filter-button .ahfb-svg-iconset svg path {
  color: #fff !important;
  fill: #fff !important;
}

/* При наведенні можна зробити акцент */
.astra-shop-filter-button:hover,
.astra-shop-filter-button:hover .astra-woo-filter-text {
  color: #C9AE63 !important; /* твій акцентний колір */
  fill: #C9AE63 !important;
}

/* === Мобільна версія: чорний текст і іконка === */
@media (max-width: 782px) {
  .astra-shop-filter-button,
  .astra-shop-filter-button .astra-woo-filter-text,
  .astra-shop-filter-button .ahfb-svg-iconset svg path {
    color: #000 !important;
    fill: #000 !important;
  }

  .astra-shop-filter-button:hover,
  .astra-shop-filter-button:hover .astra-woo-filter-text,
  .astra-shop-filter-button:hover .ahfb-svg-iconset svg path {
    color: #000 !important; /* hover теж чорний на мобільному */
    fill: #000 !important;
  }
}


/* === Активні фільтри: контейнер === */
/* Контейнер активного фільтра */
.widget_layered_nav_filters ul li.chosen {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border: 1px solid #C9AE63 !important;   /* золотий бордер */
  border-radius: 20px;
  background: #3A4352 !important;         /* синій фон */
  color: #fff !important;                  /* білий текст */
  transition: all .25s ease;
}

/* Посилання всередині */
.widget_layered_nav_filters ul li.chosen a {
  color: #fff !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ВЖЕ ІСНУЮЧИЙ хрестик від WooCommerce */
.widget_layered_nav_filters ul li.chosen a::before {
  /* залишаємо символ ×, лише міняємо стилі */
  color: #fff !important;                  /* білий хрестик */
  background: transparent !important;      /* без кружечка */
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* Hover: золотий фон, чорний текст/іконка */
.widget_layered_nav_filters ul li.chosen:hover {
  background: #C9AE63 !important;
  border-color: #C9AE63 !important;
  color: #000 !important;
}
.widget_layered_nav_filters ul li.chosen:hover a,
.widget_layered_nav_filters ul li.chosen:hover a::before {
  color: #000 !important;
}