/*
 * Category filters (assets/php/catalog.php): the BeRocket filter widgets in
 * the sidebar and the phone filter drawer (storefront_get_sidebar() in
 * functions.php). Same palette and heading style as the header and footer.
 * BeRocket's template styles set colours with their own classes
 * (.bapf_ckbox_greychck, jQuery UI), hence the specific selectors.
 */

.tax-product_cat,
.post-type-archive-product,
.search {
	--cat-ink: #222;
	--cat-body: #4a4a4a;
	--cat-muted: #8a8a8a;
	--cat-line: #ececec;
	--cat-soft: #f6f5f3;
}

/* ---- Filter groups ---- */

#secondary .bapf_sfilter {
	margin: 0 !important;
	padding: 18px 0 !important;
	border-bottom: 1px solid var(--cat-line);
}

#secondary .bapf_sfilter:first-of-type {
	padding-top: 4px !important;
}

#secondary .bapf_sfilter .bapf_head {
	position: relative;
	margin: 0 0 12px;
}

#secondary .bapf_sfilter .bapf_head h3 {
	margin: 0 !important;
	padding: 0 28px 0 0 !important;
	color: var(--cat-ink) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Collapse arrow: smaller and quieter. */
#secondary .bapf_sfilter .bapf_colaps_smb {
	position: absolute;
	top: 50%;
	right: 0;
	color: var(--cat-ink);
	font-size: 11px !important;
	transform: translateY(-50%);
}

/* A collapsed group has no body showing; drop the gap under its heading. */
#secondary .bapf_sfilter.bapf_ccolaps .bapf_head {
	margin-bottom: 0;
}

/* ---- Checkbox lists ---- */

#secondary .bapf_sfilter .bapf_body ul {
	margin: 0 !important;
	padding: 0 4px 0 0 !important;
	scrollbar-width: thin;
	scrollbar-color: #cfcfcf transparent;
}

#secondary .bapf_sfilter .bapf_body li {
	display: flex !important;
	align-items: center;
	gap: 10px;
	margin: 0 !important;
	padding: 5px 0 !important;
}

#secondary .bapf_sfilter.bapf_ckbox input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 auto;
	position: static !important;
	width: 18px !important;
	height: 18px !important;
	margin: 0 !important;
	border: 1.5px solid #bdbdbd !important;
	border-radius: 4px !important;
	background: #fff !important;
	cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s;
}

#secondary .bapf_sfilter.bapf_ckbox input[type="checkbox"]:hover {
	border-color: var(--cat-ink) !important;
}

#secondary .bapf_sfilter.bapf_ckbox input[type="checkbox"]:checked {
	border-color: var(--cat-ink) !important;
	background: var(--cat-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat !important;
}

#secondary .bapf_sfilter.bapf_ckbox input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--cat-ink);
	outline-offset: 2px;
}

/* BeRocket's grey-check template draws its own box in label::before. */
#secondary .bapf_sfilter.bapf_ckbox label::before,
#secondary .bapf_sfilter.bapf_ckbox label::after {
	display: none !important;
}

#secondary .bapf_sfilter.bapf_ckbox label {
	margin: 0 !important;
	padding: 0 !important;
	color: var(--cat-body) !important;
	font-size: 14px !important;
	line-height: 1.35 !important;
	cursor: pointer;
}

#secondary .bapf_sfilter.bapf_ckbox input:checked + label {
	color: var(--cat-ink) !important;
	font-weight: 600;
}

/* ---- Sliders (price, length) ---- */

#secondary .bapf_slidr_all {
	padding: 4px 9px 2px;
}

#secondary .bapf_slidr_all .bapf_from,
#secondary .bapf_slidr_all .bapf_to {
	color: var(--cat-ink);
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

#secondary .bapf_slidr_main.ui-slider {
	height: 3px !important;
	margin: 14px 0 6px !important;
	border: 0 !important;
	border-radius: 3px !important;
	background: #e3e3e3 !important;
}

#secondary .bapf_slidr_main .ui-slider-range {
	background: var(--cat-ink) !important;
}

#secondary .bapf_slidr_main .ui-slider-handle {
	top: 50% !important;
	width: 18px !important;
	height: 18px !important;
	margin-left: -9px !important;
	border: 2px solid var(--cat-ink) !important;
	border-radius: 50% !important;
	background: #fff !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	transform: translateY(-50%);
	cursor: grab;
}

#secondary .bapf_slidr_main .ui-slider-handle:focus-visible {
	outline: 2px solid var(--cat-ink);
	outline-offset: 2px;
}

/* ---- Sort bar ---- */

.storefront-sorting .woocommerce-ordering select.orderby {
	height: 40px;
	padding: 0 34px 0 14px;
	border: 1px solid var(--cat-line);
	border-radius: 999px;
	background-color: #fff;
	color: var(--cat-ink);
	font-size: 14px;
}

.storefront-sorting .woocommerce-result-count {
	color: var(--cat-muted);
	font-size: 13px;
}

/* ---- Phone filter drawer ---- */

/* The floating "Φίλτρα" button: a dark pill at the bottom centre, clear of the
   Side Cart basket at the bottom right. */
.moca-flow-filters-button {
	top: auto !important;
	right: auto !important;
	bottom: calc(18px + env(safe-area-inset-bottom));
	left: 50% !important;
	padding: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	transform: translateX(-50%);
	z-index: 9000 !important;
}

.moca-flow-filters-button .moca-all-filters-button,
.moca-flow-filters-button .moca-all-filters-button:hover,
.moca-flow-filters-button .moca-all-filters-button:focus {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 46px;
	padding: 0 22px;
	border: 0;
	border-radius: 999px;
	background: var(--cat-ink);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
	cursor: pointer;
}

.moca-filters-icon,
.moca-sf-close svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

.moca-sf-head,
.moca-sf-foot {
	display: none;
}

@media (max-width: 768px) {
	.moca-sf {
		display: flex;
		flex-direction: column;
		width: min(88vw, 380px) !important;
		box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15);
	}

	.moca-sf.closed {
		right: calc(-1 * min(88vw, 380px) - 30px) !important;
	}

	.moca-sf-head {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 60px;
		padding: 0 8px 0 20px;
		border-bottom: 1px solid var(--cat-line);
	}

	.moca-sf-title {
		color: var(--cat-ink);
		font-size: 17px;
		font-weight: 700;
	}

	.moca-sf-close {
		margin: 0 !important;
	}

	.moca-sf-close a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		color: var(--cat-ink) !important;
	}

	.moca-sf-close svg {
		width: 22px;
		height: 22px;
	}

	.moca-sf-inner {
		flex: 1 1 auto;
		overflow-y: auto;
		padding: 4px 20px 16px !important;
	}

	.moca-sf-foot {
		flex: 0 0 auto;
		display: block;
		padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
		border-top: 1px solid var(--cat-line);
		background: #fff;
	}

	/* Storefront's Customizer CSS greys every button:hover; these outrank it. */
	.moca-sf .moca-sf-done,
	.moca-sf .moca-sf-done:hover,
	.moca-sf .moca-sf-done:focus {
		width: 100%;
		height: 48px;
		border: 0;
		border-radius: 999px;
		background: var(--cat-ink);
		color: #fff;
		font-size: 15px;
		font-weight: 700;
		cursor: pointer;
	}
}