/**
 * Стилі фільтрів каталогу — WooCommerce Blocks
 * Файл: your-theme/assets/css/catalog-filters.css
 *
 * Базується на реальній HTML-структурі wp-block-woocommerce-product-filters
 */

/* ══════════════════════════════════════════════════════════════
   ЗОВНІШНІЙ КОНТЕЙНЕР БЛОКУ ФІЛЬТРІВ
══════════════════════════════════════════════════════════════ */

.wp-block-woocommerce-product-filters.wc-block-product-filters {
    background: #F3F4F6;
    border-radius: 14px;
    padding: 20px;
    border: none !important;
    box-shadow: none !important;
    /* Скидаємо inline CSS-змінні кольорів */
    --wc-product-filters-text-color: #111827 !important;
    --wc-product-filters-background-color: #F3F4F6 !important;
}

/* Кнопка "Фільтрувати товари" (мобільна) */
.wc-block-product-filters__open-overlay {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #F3F4F6;
    border: 1.5px solid #E5E7EB;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    cursor: pointer;
    transition: background .18s;
}
.wc-block-product-filters__open-overlay:hover {
    background: #E5E7EB;
}


/* ══════════════════════════════════════════════════════════════
   ЗАГОЛОВКИ СЕКЦІЙ (h2, h3 всередині фільтру)
══════════════════════════════════════════════════════════════ */

.wp-block-woocommerce-product-filters h2.wp-block-heading {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 16px !important;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Іконка "≡" перед заголовком "Фільтри" */
.wp-block-woocommerce-product-filters h2.wp-block-heading::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 13px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 18 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='0' width='18' height='2' rx='1' fill='%23111827'/%3E%3Crect y='5.5' width='13' height='2' rx='1' fill='%23111827'/%3E%3Crect y='11' width='8' height='2' rx='1' fill='%23111827'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

.wp-block-woocommerce-product-filters h3.wp-block-heading {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 10px !important;
    padding: 0;
}


/* ══════════════════════════════════════════════════════════════
   АКТИВНІ ФІЛЬТРИ (chips)
══════════════════════════════════════════════════════════════ */

.wp-block-woocommerce-product-filter-active {
    margin-bottom: 12px;
}

.wc-block-product-filter-removable-chips__items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Кнопка "Очистити фільтри" */
.wc-block-product-filter-clear-button .wp-block-button__link {
    background: transparent !important;
    border: 1.5px solid #E5E7EB !important;
    color: #6B7280 !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    padding: 6px 12px !important;
    transition: border-color .18s, color .18s !important;
    text-decoration: none !important;
}
.wc-block-product-filter-clear-button .wp-block-button__link:hover {
    border-color: #DC2626 !important;
    color: #DC2626 !important;
}


/* ══════════════════════════════════════════════════════════════
   ФІЛЬТР ЗА ЦІНОЮ — слайдер
══════════════════════════════════════════════════════════════ */

.wp-block-woocommerce-product-filter-price {
    margin-bottom: 20px;
}

.wc-block-product-filter-price-slider__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 10px 8px;
    align-items: center;
}

/* Поля введення ціни */
.wc-block-product-filter-price-slider__left,
.wc-block-product-filter-price-slider__right {
    position: relative;
}

.wc-block-product-filter-price-slider__left input[type="text"],
.wc-block-product-filter-price-slider__right input[type="text"] {
    width: 100%;
    height: 40px;
    background: #fff;
    border: 1.5px solid #E5E7EB !important;
    border-radius: 8px !important;
    padding: 0 10px 0 10px !important;
    font-size: 14px !important;
    font-weight: 500;
    color: #111827 !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color .18s;
    box-sizing: border-box;
}
.wc-block-product-filter-price-slider__left input[type="text"]:focus,
.wc-block-product-filter-price-slider__right input[type="text"]:focus {
    border-color: #2563EB !important;
}

/* Знак ₴ після поля (псевдоелемент на обгортці) */
.wc-block-product-filter-price-slider__left::after,
.wc-block-product-filter-price-slider__right::after {
    content: '₴';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: #9CA3AF;
    pointer-events: none;
}

/* Слайдер — займає всю ширину (span обидві колонки) */
.wc-block-product-filter-price-slider__range {
    grid-column: 1 / -1;
    position: relative;
    height: 4px;
    background: #D1D5DB;
    border-radius: 2px;
    order: -1; /* показуємо слайдер ПЕРЕД полями */
}

/* Активна зона між двома бігунками */
.wc-block-product-filter-price-slider__range .range-bar {
    position: absolute;
    height: 100%;
    background: #2563EB;
    border-radius: 2px;
    /* Ширина і позиція керується через --low і --high з JS */
    left: var(--low, 0%);
    right: calc(100% - var(--high, 100%));
}

/* Range input — скидаємо і стилізуємо */
.wc-block-product-filter-price-slider__range input[type="range"] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 4px;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    border: none !important;
    margin: 0;
    padding: 0;
}

/* Бігунок */
.wc-block-product-filter-price-slider__range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #2563EB;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1.5px #2563EB, 0 2px 6px rgba(37,99,235,.3);
    cursor: grab;
    pointer-events: all;
    transition: box-shadow .15s;
}
.wc-block-product-filter-price-slider__range input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #2563EB;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1.5px #2563EB, 0 2px 6px rgba(37,99,235,.3);
    cursor: grab;
    pointer-events: all;
}
.wc-block-product-filter-price-slider__range input[type="range"]:active::-webkit-slider-thumb {
    cursor: grabbing;
    box-shadow: 0 0 0 3px rgba(37,99,235,.25), 0 2px 6px rgba(37,99,235,.3);
}

/* Мітки мін/макс під слайдером */
.wc-block-product-filter-price-slider__left.text,
.wc-block-product-filter-price-slider__right.text {
    /* клас .text — текстові поля (не мітки) */
}


/* ══════════════════════════════════════════════════════════════
   СПИСОК ЧЕКБОКСІВ — категорії, статус
   Клас: .wc-block-product-filter-checkbox-list
══════════════════════════════════════════════════════════════ */

.wp-block-woocommerce-product-filter-taxonomy,
.wp-block-woocommerce-product-filter-status {
    margin-bottom: 20px;
}

/* Прибираємо стандартні стилі fieldset */
.wc-block-product-filter-checkbox-list fieldset {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Список елементів */
.wc-block-product-filter-checkbox-list__items {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Один пункт */
.wc-block-product-filter-checkbox-list__item {
    display: flex;
    align-items: center;
}

/* Label */
.wc-block-product-filter-checkbox-list__label {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 5px 4px;
    cursor: pointer;
    border-radius: 6px;
    transition: background .15s;
    font-size: 13px;
    color: #374151;
    line-height: 1.4;
    user-select: none;
}
.wc-block-product-filter-checkbox-list__label:hover {
    background: rgba(37, 99, 235, .07);
    color: #2563EB;
}

/* Обгортка input + SVG галочка */
.wc-block-product-filter-checkbox-list__input-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

/* Ховаємо нативний checkbox */
.wc-block-product-filter-checkbox-list__input {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    z-index: 1;
}

/* Кастомний чекбокс — малюємо через ::before на обгортці */
.wc-block-product-filter-checkbox-list__input-wrapper::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    border: 1.5px solid #D1D5DB;
    border-radius: 5px;
    background: #fff;
    transition: background .15s, border-color .15s;
    flex-shrink: 0;
}

/* Відмічений стан */
.wc-block-product-filter-checkbox-list__input:checked
~ .wc-block-product-filter-checkbox-list__input-wrapper::before,
.wc-block-product-filter-checkbox-list__input-wrapper:has(
    .wc-block-product-filter-checkbox-list__input:checked
)::before {
    background: #2563EB;
    border-color: #2563EB;
}

/* SVG галочка */
.wc-block-product-filter-checkbox-list__mark {
    position: absolute;
    width: 10px;
    height: 8px;
    color: #fff;
    opacity: 0;
    transition: opacity .15s;
    pointer-events: none;
    z-index: 2;
}
.wc-block-product-filter-checkbox-list__input:checked
+ .wc-block-product-filter-checkbox-list__mark,
.wc-block-product-filter-checkbox-list__input-wrapper:has(
    .wc-block-product-filter-checkbox-list__input:checked
) .wc-block-product-filter-checkbox-list__mark {
    opacity: 1;
}

/* Текст пункту */
.wc-block-product-filter-checkbox-list__text-wrapper {
    flex: 1;
    min-width: 0;
}
.wc-block-product-filter-checkbox-list__text {
    display: block;
    font-size: 13px;
    line-height: 1.4;
    color: inherit;
}

/* Активний (вибраний) пункт */
.wc-block-product-filter-checkbox-list__label:has(
    .wc-block-product-filter-checkbox-list__input:checked
) {
    color: #2563EB;
    font-weight: 600;
}

/* Кількість товарів — ховаємо */
.wc-block-product-filter-checkbox-list__count {
    display: none;
}


/* ══════════════════════════════════════════════════════════════
   OVERLAY (мобільний попап)
══════════════════════════════════════════════════════════════ */

.wc-block-product-filters__overlay {
    background: rgba(0, 0, 0, .5);
}

.wc-block-product-filters__overlay-dialog {
    background: #fff;
    border-radius: 14px 14px 0 0;
    padding: 20px;
    max-height: 90vh;
    overflow-y: auto;
}

.wc-block-product-filters__overlay-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.wc-block-product-filters__close-overlay {
    background: none;
    border: none;
    cursor: pointer;
    color: #6B7280;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    padding: 4px;
    border-radius: 6px;
    transition: background .15s;
}
.wc-block-product-filters__close-overlay:hover {
    background: #F3F4F6;
}

/* Кнопка "Застосувати" */
.wc-block-product-filters__apply.wp-element-button {
    width: 100%;
    background: #2563EB !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background .18s !important;
}
.wc-block-product-filters__apply.wp-element-button:hover {
    background: #1D4ED8 !important;
}


/* ══════════════════════════════════════════════════════════════
   FALLBACK: браузери без підтримки :has()
   (Firefox < 121, старі Safari)
══════════════════════════════════════════════════════════════ */

@supports not (selector(:has(a))) {
    /* Показуємо галочку через суміжний селектор */
    .wc-block-product-filter-checkbox-list__input:checked
    + .wc-block-product-filter-checkbox-list__mark {
        opacity: 1;
    }
    /* Синій чекбокс через фільтр на обгортці */
    .wc-block-product-filter-checkbox-list__input:checked {
        accent-color: #2563EB;
    }
}


/* ══════════════════════════════════════════════════════════════
   АДАПТИВ
══════════════════════════════════════════════════════════════ */



@media (max-width: 768px) {
    .wp-block-woocommerce-product-filters.wc-block-product-filters {
        border-radius: 10px;
        padding: 16px;
    }
}


.wc-block-product-filter-price-slider__content {
    grid-template-areas:         "left-input middle-input right-input"        "price-slider price-slider price-slider" !important;
}



/* .wc-block-product-filter-price-slider__content {
    display: revert !important;
    grid-template-columns: revert !important;
    grid-template-rows: revert !important;
    gap: revert !important;
}

.wc-block-product-filter-price-slider__range {
    grid-column: revert !important;
    order: revert !important;
    position: revert !important;
    height: revert !important;
    background: revert !important;
} */
 
.wc-block-product-filter-price-slider__range .range-bar {
    display: none !important;
}
 
/* .wc-block-product-filter-price-slider__range input[type="range"] {
    position: revert !important;
    top: revert !important;
    transform: revert !important;
    height: revert !important;
    background: revert !important;
}  */
 
/* 2. Змінюємо колір через CSS-змінні які WC Blocks реально читає */
 
.wc-block-product-filter-price-slider__range {
    --range-color: #4d82c2 !important;
}
 
/* 3. Стилізуємо лише бігунки (не чіпаємо трек — WC Blocks малює його сам) */

 .wc-block-product-filter-price-slider__range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: #4d82c2 !important;
    border: 2.5px solid #fff !important;
    box-shadow: 0 1px 4px rgba(37,99,235,.3) !important;
    cursor: grab !important;
    margin-top: -8px !important;
	 z-index: 10;
}
 
.wc-block-product-filter-price-slider__range input[type="range"]:active::-webkit-slider-thumb {
    cursor: grabbing !important;
    box-shadow: 0 0 0 4px rgba(37,99,235,.15), 0 1px 4px rgba(37,99,235,.3) !important;
}
 
.wc-block-product-filter-price-slider__range input[type="range"]::-moz-range-thumb {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: #4d82c2 !important;
    border: 2.5px solid #fff !important;
    box-shadow: 0 1px 4px rgba(37,99,235,.3) !important;
    cursor: grab !important;
	z-index: 10;
}  


.wc-block-product-filter-price-slider .text input[type=text]{
	max-width: 122px !important;
	border: 1px solid #e0e0e0 !important;
	border-radius: 24px !important; 
}

.wc-block-product-filter-price-slider__range .range-bar{
	background: #4d82c2 !important;
}


.wc-block-product-filter-price-slider__range:before{
	opacity: 1 !important;
}

/* Прибираємо псевдоелемент ::after з обгортки */
.wc-block-product-filter-price-slider__left::after,
.wc-block-product-filter-price-slider__right::after {
    display: none !important;
}

/* Наш span зовні інпута */
.ch-currency-sign {
    font-size: 14px;
    line-height: 157%;
    color: #232325;
    margin-left: 6px;
    flex-shrink: 0;
}

.wc-block-product-filter-price-slider__left.text,
.wc-block-product-filter-price-slider__right.text {
    display: flex !important;
    align-items: center !important;
}

@media (max-width: 1350px){
	.wc-block-product-filter-price-slider .text input[type=text]{
/* 		max-width: 75px !important; */
		width: 90% !important;
    	min-width: 70px !important;
	}
}