/*
 * Панель фільтрів (Хвиля 2, п. 21). Підключається лише коли увімкнено
 * хоч один шар (inc/twins-filter-panel.php).
 *
 * Вигляд мінімальний, у стилі теми. Остаточний дизайн — питання клієнту,
 * тому кольори й розміри винесено в змінні нижче.
 */

#filter,
.catalog_sort {
	/* Кружечки кольорів — ЧЕРНЕТКА, чекає клієнта/дизайнера */
	--twins-cg-beige: #d9c3a3;
	--twins-cg-white: #ffffff;
	--twins-cg-grey: #9b9b9b;
	--twins-cg-black: #1f1f1f;
	--twins-cg-brown: #7b5534;
	--twins-cg-pink: #eab3c2;
	--twins-cg-blue: #3e5f9f;
	--twins-cg-green: #6c7d4b;
	--twins-cg-purple: #8e6fb3;
	--twins-cg-yellow: #e9c46a;
	--twins-cg-red: #c0392b;
	--twins-cg-other: conic-gradient(#e9c46a, #e76f51, #c2185b, #8e6fb3, #3e5f9f, #2a9d8f, #e9c46a);
	--twins-cg-fallback: #c9c9c9;

	/* Рядок кольору — як рядок «Розмір» (main.css, input[type=checkbox] + label):
	   маркер 15 px + рамка 1 px = квадрат чекбокса, відступ до назви 15 px
	   (до 767 px — 5 px), між рядками 16 px, дві колонки — як сітка списків
	   панелі (.bapf_body ul) */
	--twins-cg-dot: 15px;           /* діаметр кружечка без рамки */
	--twins-cg-gap: 15px;           /* кружечок → назва */
	--twins-cg-row-gap: 16px;       /* між рядками */
	--twins-cg-col-gap: 32px;       /* між колонками */
	--twins-cg-ring: var(--black, #252525);
	--twins-cg-focus: var(--black, #252525); /* рамка фокуса з клавіатури (№81) */
	--twins-cg-edge: rgba(0, 0, 0, .15); /* контур світлих кружечків */
	--twins-cg-inset: 3px;          /* біле кільце «вибрано» — як у чекбокса (15 px / 5) */

	/* Ціна: діаметр кружечка повзунка (main.css, --dots__size) і де закінчується
	   текст «до … грн» (BeRocket: .bapf_from / .bapf_to по 49 % → 2 % праворуч) */
	--twins-price-dot: 16px;
	--twins-price-text-end: 2%;

	/* Згорнуті блоки */
	--twins-fcol-tap: 44px;         /* мінімальна висота заголовка-кнопки */
	--twins-fcol-line: 1.25em;      /* висота рядка заголовка в темі (17,5 px при 14 px) */
	--twins-fcol-focus: var(--black, #252525);
	--twins-fcol-arrow: 8px;
}

@media only screen and (max-width: 767px) {
	#filter,
	.catalog_sort {
		--twins-cg-gap: 5px;
	}
}


/*-----------------------------------------------------------------------------------*/
/* Кольори групами */
/*-----------------------------------------------------------------------------------*/

/* Рідні кольорові підфільтри ховає лише клас, який JS ставить після успішної
   ініціалізації. Немає класу — видно рідну панель, а блок груп схований. */
#filter.twins-cg-on .berocket_single_filter_widget.group-color {
	display: none !important;
}

.twins-cg {
	display: none;
}

#filter.twins-cg-on .twins-cg {
	display: block;
}

.twins-cg_list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--twins-cg-row-gap) var(--twins-cg-col-gap);
	margin: 15px 0 0;
	padding: 0;
	list-style: none;
}

/* Відступ від заголовка вже дає порожня рідна обгортка кольорових фільтрів
   (.filter_block_list_wrapper, margin-top 15 / 30 px) — так само, як у «Розмір» */
.filter_block_list_wrapper + .twins-cg .twins-cg_list {
	margin-top: 0;
}

/* Зона тапу — увесь рядок колонки разом із проміжком до сусідніх рядків
   (поле зверху й знизу компенсоване від'ємним margin, як у №84), тож між
   рядками немає «мертвих» смуг, а крок рядків — як у «Розмір» */
.twins-cg_item {
	display: flex;
	align-items: center;
	gap: var(--twins-cg-gap);
	width: 100%;
	padding: calc(var(--twins-cg-row-gap) / 2) 0;
	margin: calc(var(--twins-cg-row-gap) / -2) 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--medium, 12px); /* як підпис чекбокса */
	line-height: 1.25;
	letter-spacing: inherit;
	text-align: left;
	color: inherit;
	cursor: pointer;
}

/* Кружечок — розміром і посадкою як квадрат чекбокса (margin-top: -2px) */
.twins-cg_dot {
	flex: none;
	box-sizing: content-box;
	width: var(--twins-cg-dot);
	height: var(--twins-cg-dot);
	margin-top: -2px;
	border: 1px solid var(--twins-cg-edge);
	border-radius: 50%;
	background: var(--twins-cg-color, var(--twins-cg-fallback));
	transition: box-shadow .3s, border-color .3s, transform .2s;
}

.twins-cg_name {
	min-width: 0;
}

/* №81: видимий фокус з клавіатури; мишка й палець рамки не отримують */
.twins-cg_item:focus {
	outline: none;
}

.twins-cg_item:focus-visible {
	outline: 1px solid var(--twins-cg-focus);
	outline-offset: 3px;
}

/* №81: ховер на десктопі — кружечок трохи більшає */
@media (hover: hover) and (pointer: fine) {
	.twins-cg_item:hover .twins-cg_dot {
		transform: scale(1.08);
	}
}

.twins-cg_item[data-group="beige"] { --twins-cg-color: var(--twins-cg-beige); }
.twins-cg_item[data-group="white"] { --twins-cg-color: var(--twins-cg-white); }
.twins-cg_item[data-group="grey"] { --twins-cg-color: var(--twins-cg-grey); }
.twins-cg_item[data-group="black"] { --twins-cg-color: var(--twins-cg-black); }
.twins-cg_item[data-group="brown"] { --twins-cg-color: var(--twins-cg-brown); }
.twins-cg_item[data-group="pink"] { --twins-cg-color: var(--twins-cg-pink); }
.twins-cg_item[data-group="blue"] { --twins-cg-color: var(--twins-cg-blue); }
.twins-cg_item[data-group="green"] { --twins-cg-color: var(--twins-cg-green); }
.twins-cg_item[data-group="purple"] { --twins-cg-color: var(--twins-cg-purple); }
.twins-cg_item[data-group="yellow"] { --twins-cg-color: var(--twins-cg-yellow); }
.twins-cg_item[data-group="red"] { --twins-cg-color: var(--twins-cg-red); }
.twins-cg_item[data-group="other"] { --twins-cg-color: var(--twins-cg-other); }

/* Вибрано — як вибраний чекбокс теми: темна рамка, біле кільце всередині,
   колір групи в центрі (лишається видно, який це колір). Плюс жирна назва */
.twins-cg_item._active .twins-cg_dot,
.twins-cg_item._partial .twins-cg_dot {
	border-color: var(--twins-cg-ring);
	box-shadow: inset 0 0 0 var(--twins-cg-inset) var(--bg, #fff);
}

/* Частково — та сама рамка, але пунктиром; назва звичайна,
   у чипі «(частково)» */
.twins-cg_item._partial .twins-cg_dot {
	border-style: dashed;
}

.twins-cg_item._active .twins-cg_name {
	font-weight: 500;
}


/*-----------------------------------------------------------------------------------*/
/* Сортування кнопкою */
/*-----------------------------------------------------------------------------------*/

/* Клас ставить front/js/twins-sort-button.js після того, як переписав підпис.
   Немає класу — рідний сірий напис. */
.catalog_sort.twins-sort-on {
	--twins-sort-color: var(--black, #252525);
	--twins-sort-icon: 1.25em;
}

.catalog_sort.twins-sort-on ._select .current {
	color: var(--twins-sort-color);
	font-weight: 300;
	letter-spacing: normal;
	padding-right: calc(var(--twins-sort-icon) + .625em) !important;
}

/* №84: зона тапу ≥ 44 px по висоті без зсуву верстки — поле зверху й знизу
   (padding) компенсоване від'ємним margin. Псевдоелемент не підходить:
   у .current overflow: hidden, а :before зайнятий іконкою. !important —
   бо рідний padding .current у main.css теж з !important. */
.catalog_sort.twins-sort-on {
	--twins-sort-tap: 15px;
}

.catalog_sort.twins-sort-on ._select .current {
	padding-top: var(--twins-sort-tap) !important;
	padding-bottom: var(--twins-sort-tap) !important;
	margin: calc(var(--twins-sort-tap) * -1) 0;
}

.catalog_sort.twins-sort-on ._select .current span:before {
	content: ' (';
}

.catalog_sort.twins-sort-on ._select .current span:after {
	content: ')';
}

/* Замість стрілки селекта — іконка сортування, як «+» у «ФІЛЬТР» */
.catalog_sort.twins-sort-on ._select .current:before {
	width: var(--twins-sort-icon);
	height: var(--twins-sort-icon);
	background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 4V16M7 16L4 13M7 16L10 13' stroke='%23252525' stroke-linecap='square'/%3E%3Cpath d='M13 16V4M13 4L10 7M13 4L16 7' stroke='%23252525' stroke-linecap='square'/%3E%3C/svg%3E%0A");
}

.catalog_sort.twins-sort-on ._select .current.active:before {
	transform: translate3d(0, -50%, 0px);
}

/* №60: обраний пункт у списку — крапка, як у теми при наведенні */
.catalog_sort.twins-sort-on .select_dropdown li.selected:before {
	--size: 5px;
}

.catalog_sort.twins-sort-on .select_dropdown li.selected {
	padding-left: calc(var(--selcet_inner_l, 20px) + 15px);
}


/*-----------------------------------------------------------------------------------*/
/* Категорії по групах */
/*-----------------------------------------------------------------------------------*/

/* Список «Категорії» — сітка на 2 колонки (main.css, .bapf_body ul);
   підзаголовок займає весь рядок */
.twins-fc_head {
	grid-column: 1 / -1;
	margin-top: 14px;
	color: var(--gray, #8b8b8b);
	font-size: .75em;
	letter-spacing: .05em;
	text-transform: uppercase;
	list-style: none;
}

.twins-fc_head:first-child {
	margin-top: 0;
}


/*-----------------------------------------------------------------------------------*/
/* Згорнуті блоки */
/*-----------------------------------------------------------------------------------*/

/* Блоки ховає лише клас, який front/js/twins-filter-collapse.js ставить після
   успішної ініціалізації. Немає класу — усі блоки розгорнуті, як без шару. */
#filter.twins-fcol-on .twins-fcol_body._closed {
	display: none;
}

.twins-fcol_btn {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: var(--twins-fcol-tap);
	/* Зона тапу 44 px без зсуву верстки: зайве над і під рядком компенсоване
	   від'ємним margin (як у №84) — розгорнутий блок стоїть там, де рідний */
	margin: calc((var(--twins-fcol-line) - var(--twins-fcol-tap)) / 2) 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-align: left;
	text-transform: inherit;
	cursor: pointer;
}

.twins-fcol_btn:focus {
	outline: none;
}

.twins-fcol_btn:focus-visible {
	outline: 1px solid var(--twins-fcol-focus);
	outline-offset: 3px;
}

.twins-fcol_count {
	white-space: pre;
}

/* Стрілка: згорнуто — вниз, розгорнуто — вгору */
.twins-fcol_arrow {
	flex: none;
	width: var(--twins-fcol-arrow);
	height: var(--twins-fcol-arrow);
	margin-left: auto;
	margin-right: 4px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translate3d(0, -25%, 0) rotate(45deg);
	transition: transform .25s;
}

.twins-fcol_head._open .twins-fcol_arrow {
	transform: translate3d(0, 25%, 0) rotate(-135deg);
}

@keyframes twins-fcol-in {
	from {
		opacity: 0;
		transform: translate3d(0, -6px, 0);
	}
}

#filter.twins-fcol-on .twins-fcol_body._in {
	animation: twins-fcol-in .25s ease-out;
}

@media (prefers-reduced-motion: reduce) {
	#filter.twins-fcol-on .twins-fcol_body._in {
		animation: none;
	}

	.twins-fcol_arrow {
		transition: none;
	}
}


/*-----------------------------------------------------------------------------------*/
/* Ціна: повзунок у межах тексту */
/*-----------------------------------------------------------------------------------*/

/* Рідна вада (є й на проді): кружечок зсунутий двічі — jQuery UI у BeRocket
   (fullmain.min.css: .ui-slider-horizontal .ui-slider-handle { margin-left: -.6em })
   і тема (main.css: translate3d(-50%, …)). На 0 % лівий кружечок виходив
   за лівий край «від» на 16 px. Знімаємо зайвий зсув і звужуємо доріжку на
   півкружечка з кожного боку: на 0 % лівий край кружечка = початок «від»,
   на 100 % правий край = кінець «… грн». Значення повзунків — у відсотках
   ширини доріжки, тож перетягування й AJAX не змінюються. */
#filter .bapf_slidr_main .ui-slider-handle {
	margin-left: 0;
}

#filter .bapf_slidr_main {
	margin-left: calc(var(--twins-price-dot) / 2);
	margin-right: calc(var(--twins-price-text-end) + var(--twins-price-dot) / 2);
}