/**
 * Ventureheap Builder - the product filter panel.
 */

.vhb-filters__panel {
	padding: 20px;
	background: var(--vhb-bg, #fff);
	border: 1px solid var(--vhb-border, #e2e8f0);
	border-radius: var(--vhb-radius, 14px);
}

.vhb-filters__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }

.vhb-filters__heading {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--vhb-secondary, #0f172a);
}

.vhb-filters__close {
	display: none;
	width: 36px;
	height: 36px;
	font-size: 26px;
	line-height: 1;
	color: var(--vhb-muted, #64748b);
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

/* Active filters -------------------------------------------------------- */
.vhb-filters__active { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }

.vhb-filters__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: .3rem .6rem;
	font-size: .82rem;
	font-weight: 600;
	color: var(--vhb-secondary, #0f172a);
	text-decoration: none;
	background: var(--vhb-alt, #f1f5f9);
	border-radius: 999px;
}

.vhb-filters__chip:hover { color: var(--vhb-primary, #1a56db); }
.vhb-filters__chip span[aria-hidden] { font-size: 1.05em; line-height: 1; opacity: .6; }

.vhb-filters__clear {
	align-self: center;
	font-size: .82rem;
	font-weight: 600;
	color: var(--vhb-primary, #1a56db);
	text-decoration: underline;
}

/* Groups ---------------------------------------------------------------- */
.vhb-filter + .vhb-filter { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--vhb-border, #e2e8f0); }

.vhb-filter__title {
	margin: 0 0 10px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--vhb-muted, #64748b);
}

.vhb-filter__list { margin: 0; padding: 0; list-style: none; }
.vhb-filter__list li { margin: 0; padding: 0; }
.vhb-filter__list li::before { display: none; }

.vhb-filter__option {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: .34rem 0;
	font-size: .93rem;
	color: var(--vhb-secondary, #0f172a);
	text-decoration: none;
}

.vhb-filter__option:hover { color: var(--vhb-primary, #1a56db); }
.vhb-filter__option.is-active { color: var(--vhb-primary, #1a56db); font-weight: 600; }
.vhb-filter__option--up { font-weight: 600; }
.vhb-filter__option--up::before { content: "\2190"; margin-right: 2px; }

.vhb-filter__count { margin-left: auto; font-size: .8rem; color: var(--vhb-muted, #64748b); }

/* A link that reads as a checkbox. The box is decoration; the link's
   aria-pressed is what assistive technology announces. */
.vhb-filter__box {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	border: 1.5px solid var(--vhb-border, #cbd5e1);
	border-radius: 4px;
}

.vhb-filter__check.is-active .vhb-filter__box {
	background: var(--vhb-primary, #1a56db) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") no-repeat center / 12px;
	border-color: var(--vhb-primary, #1a56db);
}

.vhb-filter__more {
	margin-top: 6px;
	padding: 0;
	font: inherit;
	font-size: .85rem;
	font-weight: 600;
	color: var(--vhb-primary, #1a56db);
	background: none;
	border: 0;
	text-decoration: underline;
	cursor: pointer;
}

/* Price ------------------------------------------------------------------ */
.vhb-filter__price { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.vhb-filter__price input[type="number"] {
	flex: 1 1 70px;
	min-width: 0;
	min-height: 42px;
	padding: .45rem .6rem;
	font: inherit;
	font-size: .92rem;
	color: var(--vhb-text, #1f2937);
	background: var(--vhb-bg, #fff);
	border: 1.5px solid var(--vhb-border, #e2e8f0);
	border-radius: var(--vhb-radius-btn, 10px);
}

.vhb-filter__price input[type="number"]:focus { outline: none; border-color: var(--vhb-primary, #1a56db); }
.vhb-filter__dash { color: var(--vhb-muted, #64748b); }
.vhb-filter__price .vhb-btn { flex: 0 0 auto; min-height: 42px; padding: .45rem 1rem; }

/* The Filters button, and the panel as a drawer on a phone ---------------- */
.vhb-filters__open { display: none; align-items: center; gap: 8px; }
.vhb-filters__badge {
	min-width: 20px;
	padding: 0 6px;
	font-size: .72rem;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
	color: #fff;
	background: var(--vhb-primary, #1a56db);
	border-radius: 999px;
}

@media (max-width: 991px) {
	.vhb-filters--drawer .vhb-filters__open { display: inline-flex; width: 100%; justify-content: center; }

	/* Closed, and still sitting in its column: out of the way entirely. */
	.vhb-filters--drawer .vhb-filters__panel { display: none; }
}

/*
 * Open. The script has moved the panel to the end of the document, so these
 * rules have to describe it on their own - nothing above it in the page is
 * an ancestor any more, which is exactly the point.
 */
.vhb-filters__panel.is-parked {
	position: fixed;
	z-index: 96;
	top: 0;
	bottom: 0;
	left: 0;
	display: block;
	width: min(340px, 88vw);
	padding: 20px 20px 90px;
	overflow-y: auto;
	background: var(--vhb-bg, #fff);
	border: 0;
	border-radius: 0;
	box-shadow: 0 0 60px -10px rgba(15, 23, 42, .4);
	animation: vhb-filters-in .25s ease;
}

.vhb-filters__panel.is-parked .vhb-filters__close { display: block; }

@keyframes vhb-filters-in {
	from { transform: translateX(-100%); }
	to { transform: none; }
}

.vhb-filters__scrim {
	position: fixed;
	z-index: 95;
	inset: 0;
	background: rgba(15, 23, 42, .45);
	border: 0;
	cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
	.vhb-filters__panel.is-parked { animation: none; }
}