/* Filter på produktarkiv, se functions/archive-filters.php och assets/scripts/archive-filters.js
 * Brytpunkten 1024/1025px måste vara samma som i skriptet. */

/* Bär bara antalet till Visa produkter. BeRocket skriver in nytt antal och sätter display: block, så den måste döljas här */
.knockout-products-total {
	display: none !important;
}

/* Panelens delar och Filter-knappen finns bara på surfplatta/mobil */
.westiro-filter-button,
.westiro-filter-header,
.westiro-filter-footer,
.westiro-filter-overlay {
	display: none;
}


/* =========================================================
   DESKTOP: rad med rullgardiner
   ========================================================= */

@media (min-width: 1025px) {
	.filter-container .filter-item {
		position: relative;
	}

	.filter-container .filter-item > .filter {
		display: none;
	}

	.filter-container .filter-item.active > .filter {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		pointer-events: auto !important;
	}
}


/* =========================================================
   SURFPLATTA/MOBIL: panel från höger
   ========================================================= */

@media (max-width: 1024px) {
	/* Filter-knappen på rubrikraden */
	.westiro-filter-button {
		display: inline-flex;
		align-items: center;
		margin: 0 0 0 auto !important;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		color: #111;
		font-size: 16px;
		font-weight: 500;
		line-height: 1.2;
		text-decoration: underline;
		text-underline-offset: 3px;
		cursor: pointer;
	}

	.filter-container {
		display: block !important;
		position: fixed !important;
		inset: 0 !important;
		z-index: 100001;
		width: 100vw !important;
		height: auto !important;
		max-width: none !important;
		max-height: none !important;
		margin: 0 !important;
		overflow: hidden;
		background: #fff;
		transform: translateX(100%);
		transition: transform 0.3s ease;
	}

	.filter-container.mobile-filter-open {
		transform: translateX(0);
	}

	/* Höjden på knappraden längst ned, används för att inget hamnar bakom den */
	.filter-container {
		--westiro-filter-footer-height: calc(74px + env(safe-area-inset-bottom, 0px));
		padding-bottom: var(--westiro-filter-footer-height) !important;
	}

	/* Visa produkter (antal), alltid synlig längst ned */
	.westiro-filter-footer {
		display: block;
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 6;
		padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid #eee;
		background: #fff;
	}

	.westiro-filter-show {
		display: block;
		width: 100%;
		height: 50px;
		padding: 0 20px;
		border: 0;
		border-radius: 0;
		background: #222;
		color: #fff;
		font-size: 16px;
		font-weight: 500;
		line-height: 50px;
		cursor: pointer;
		transition: opacity 0.15s ease;
	}

	.westiro-filter-show.is-loading {
		opacity: 0.6;
	}

	/* Panelens rubrikrad: ← Filtrera Återställ */
	.westiro-filter-header {
		display: flex;
		position: relative;
		z-index: 5;
		align-items: center;
		justify-content: center;
		height: 70px;
		padding: 0 20px;
		border-bottom: 1px solid #eee;
		background: #fff;
	}

	.westiro-filter-heading {
		font-size: 18px;
		font-weight: 500;
	}

	.westiro-filter-back {
		display: block;
		position: absolute;
		left: 16px;
		padding: 6px;
		border: 0;
		background: transparent;
		color: #111;
		font-size: 24px;
		line-height: 1;
		cursor: pointer;
	}

	.westiro-filter-reset {
		position: absolute;
		right: 20px;
		padding: 6px 0;
		border: 0;
		background: transparent;
		color: #111;
		font-size: 14px;
		font-weight: 400;
		cursor: pointer;
	}

	/* Listan med filter */
	.filter-container .filter-item {
		width: 100%;
		margin: 0 !important;
		padding: 0 20px;
		border-bottom: 1px solid #eee;
	}

	.filter-container .filter-title {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		min-height: 62px;
		padding: 0 !important;
		font-size: 16px;
		font-weight: 400;
		cursor: pointer;
	}

	.filter-container .filter-title img {
		width: 12px;
		height: 12px;
		transform: rotate(-90deg);
	}

	/* Kategorier har en egen rad ovanför produkterna */
	.filter-container .filter-item:has(.filter-title[data-attribute="category"]) {
		display: none !important;
	}

	/* Ett öppnat filter tar hela panelen under rubrikraden */
	.filter-container .filter-item .filter {
		display: none !important;
	}

	.filter-container.filter-detail-open .filter-item {
		display: none !important;
	}

	.filter-container.filter-detail-open .filter-item.mobile-active {
		display: block !important;
		position: absolute;
		top: 70px;
		right: 0;
		bottom: var(--westiro-filter-footer-height);
		left: 0;
		padding: 20px;
		border: 0;
		overflow-y: auto;
	}

	.filter-container.filter-detail-open .filter-item.mobile-active .filter-title {
		display: none !important;
	}

	.filter-container.filter-detail-open .filter-item.mobile-active .filter {
		display: block !important;
		position: static !important;
		top: auto !important;
		left: auto !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		box-shadow: none !important;
		background: #fff;
	}

	.filter-container .filter-item .filter > .fa-times {
		display: none !important;
	}

	/* Panelens rubrikrad visar redan filtrets namn, dölj BeRockets egen rubrik */
	.filter-container .bapf_head {
		display: none !important;
	}

	/* Sidan bakom panelen ska inte scrolla */
	body.westiro-filter-active {
		overflow: hidden;
	}
}


/* =========================================================
   FÄRGFILTRET (BeRocket, pa_color_group)
   [färgruta] Färgnamn                         [antal]
   Namnet och antalet läggs till av formatColorFilter() i skriptet.
   ========================================================= */

.filter[data-attribute="color"] {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.filter[data-attribute="color"] .bapf_sfilter[data-taxonomy="pa_color_group"] .bapf_head h3 {
	padding-left: 10px !important;
	padding-right: 10px !important;
}

.bapf_sfilter[data-taxonomy="pa_color_group"] .bapf_body {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.bapf_sfilter[data-taxonomy="pa_color_group"] .bapf_body ul {
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.bapf_sfilter[data-taxonomy="pa_color_group"] .bapf_body ul > li {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Hela raden är klickbar och referens för bocken */
.bapf_sfilter[data-taxonomy="pa_color_group"] .bapf_body ul > li > label {
	display: flex !important;
	position: relative !important;
	align-items: center !important;
	gap: 10px;
	width: 100% !important;
	min-height: 44px;
	margin: 0 !important;
	padding: 6px 10px !important;
	box-sizing: border-box;
	cursor: pointer;
}

.bapf_sfilter[data-taxonomy="pa_color_group"] .bapf_body ul > li > label:hover {
	background: #fafafa;
}

.bapf_sfilter[data-taxonomy="pa_color_group"] .bapf_body ul > li.checked > label {
	background: #f5f5f5;
}

/* Färgruta 24 × 24 */
.bapf_sfilter[data-taxonomy="pa_color_group"] .bapf_clr_span {
	display: inline-flex !important;
	position: relative !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 24px !important;
	width: 24px !important;
	height: 24px !important;
	min-width: 24px !important;
	min-height: 24px !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	box-sizing: border-box !important;
	overflow: visible !important;
}

.bapf_sfilter[data-taxonomy="pa_color_group"] label[aria-label="Vit"] .bapf_clr_span {
	border: 1px solid #ccc !important;
}

.bapf_sfilter[data-taxonomy="pa_color_group"] label[aria-label="Transparent"] .bapf_clr_span {
	border: 1px solid #ddd !important;
}

/* BeRockets wrapper för antalet, antalet flyttas ut av skriptet */
.bapf_sfilter[data-taxonomy="pa_color_group"] .bapf_clr_span_abslt {
	display: none !important;
	background-image: none !important;
	box-shadow: none !important;
}

.bapf_sfilter[data-taxonomy="pa_color_group"] .westiro-color-name {
	display: inline-block !important;
	flex: 1 1 auto;
	margin: 0 !important;
	padding: 0 !important;
	color: #444;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2;
	white-space: nowrap;
}

.bapf_sfilter[data-taxonomy="pa_color_group"] .westiro-color-count {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 auto;
	margin-left: auto !important;
	padding: 0 !important;
}

.bapf_sfilter[data-taxonomy="pa_color_group"] .westiro-color-count .pcs {
	display: inline-flex !important;
	position: static !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 26px !important;
	height: 22px !important;
	margin: 0 !important;
	padding: 0 7px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: #eee !important;
	color: #666 !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	transform: none !important;
	box-sizing: border-box !important;
}

/* Stäng av BeRockets egen markering på färgrutan */
.bapf_sfilter[data-taxonomy="pa_color_group"] .bapf_clr_span::before,
.bapf_sfilter[data-taxonomy="pa_color_group"] .bapf_clr_span::after,
.bapf_sfilter[data-taxonomy="pa_color_group"] li.checked .bapf_clr_span::before,
.bapf_sfilter[data-taxonomy="pa_color_group"] li.checked .bapf_clr_span::after,
.bapf_sfilter[data-taxonomy="pa_color_group"] input:checked + label .bapf_clr_span::before,
.bapf_sfilter[data-taxonomy="pa_color_group"] input:checked + label .bapf_clr_span::after {
	content: none !important;
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	background-image: none !important;
}

/* Egen bock, på label istället för färgrutan så att den inte krockar med BeRocket.
 * left: 10px padding + halva färgrutan (12px) = mitten av rutan */
.bapf_sfilter[data-taxonomy="pa_color_group"] li.checked > label::before,
.bapf_sfilter[data-taxonomy="pa_color_group"] input:checked + label::before {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	top: 50% !important;
	left: 22px !important;
	z-index: 5;
	width: 5px !important;
	height: 8px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-right: 1.5px solid #fff !important;
	border-bottom: 1.5px solid #fff !important;
	background: transparent !important;
	transform: translate(-50%, -58%) rotate(45deg) !important;
	transform-origin: center !important;
	box-sizing: border-box !important;
	pointer-events: none !important;
}

/* Mörk bock på ljusa färger */
.bapf_sfilter[data-taxonomy="pa_color_group"] li.checked > label[aria-label="Vit"]::before,
.bapf_sfilter[data-taxonomy="pa_color_group"] li.checked > label[aria-label="Beige"]::before,
.bapf_sfilter[data-taxonomy="pa_color_group"] li.checked > label[aria-label="Gul"]::before,
.bapf_sfilter[data-taxonomy="pa_color_group"] li.checked > label[aria-label="Transparent"]::before,
.bapf_sfilter[data-taxonomy="pa_color_group"] input:checked + label[aria-label="Vit"]::before,
.bapf_sfilter[data-taxonomy="pa_color_group"] input:checked + label[aria-label="Beige"]::before,
.bapf_sfilter[data-taxonomy="pa_color_group"] input:checked + label[aria-label="Gul"]::before,
.bapf_sfilter[data-taxonomy="pa_color_group"] input:checked + label[aria-label="Transparent"]::before {
	border-right-color: #333 !important;
	border-bottom-color: #333 !important;
}