/* =============================================================================
   Pro Conferences – Product Filter
   Replaces Woof plugin with a modern, AJAX-driven sidebar panel.
   ============================================================================= */

:root {
	--pf-accent:      #66ca01;
	--pf-accent-dark: #58b000;
	--pf-text:        #0f172a;
	--pf-muted:       #64748b;
	--pf-border:      #e2e8f0;
	--pf-radius:      5px;
	--pf-ease:        cubic-bezier(.4, 0, .2, 1);
	--pf-dur:         180ms;
}

/* ── Wrapper ──────────────────────────────────────────────────────────────── */

.prc-filter {
	font-size: .9375rem;
	line-height: 1.5;
}

/* ── Header ───────────────────────────────────────────────────────────────── */

.prc-filter__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 1rem;
	padding-bottom: .75rem;
	border-bottom: 2px solid var(--pf-text);
}

.prc-filter__title {
	font-size: .6875rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--pf-text);
}

.prc-filter__clear {
	background: none;
	border: none;
	padding: 0;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--pf-accent-dark);
	cursor: pointer;
	line-height: 1;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--pf-dur) var(--pf-ease), color var(--pf-dur) var(--pf-ease);
}

.prc-filter__clear.is-visible {
	opacity: 1;
	pointer-events: auto;
}

.prc-filter__clear:hover {
	color: var(--pf-text);
}

/* ── Section ──────────────────────────────────────────────────────────────── */

.prc-filter__section {
	border-bottom: 1px solid var(--pf-border);
}

.prc-filter__section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: none;
	border: none;
	padding: .875rem 0;
	cursor: pointer;
	text-align: left;
	gap: .5rem;
}

.prc-filter__section-header:hover .prc-filter__section-title {
	color: var(--pf-accent-dark);
}

.prc-filter__section-label {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: .9375rem;
	font-weight: 700;
	color: var(--pf-text);
	transition: color var(--pf-dur) var(--pf-ease);
}

/* Active count badge */
.prc-filter__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 .3rem;
	background: var(--pf-accent);
	color: #fff;
	font-size: .625rem;
	font-weight: 800;
	border-radius: 999px;
	line-height: 1;
}

/* Chevron */
.prc-filter__chevron {
	width: 1rem;
	height: 1rem;
	color: var(--pf-muted);
	flex-shrink: 0;
	transition: transform var(--pf-dur) var(--pf-ease), color var(--pf-dur) var(--pf-ease);
}

.prc-filter__section.is-open > .prc-filter__section-header .prc-filter__chevron {
	transform: rotate(180deg);
	color: var(--pf-accent-dark);
}

/* ── Accordion body ───────────────────────────────────────────────────────── */

.prc-filter__body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 260ms var(--pf-ease);
}

.prc-filter__section.is-open > .prc-filter__body {
	grid-template-rows: 1fr;
}

.prc-filter__body-inner {
	overflow: hidden;
}

.prc-filter__options {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	padding-bottom: 1rem;
}

/* ── Option / checkbox ────────────────────────────────────────────────────── */

.prc-filter__option {
	display: flex;
	align-items: center;
	gap: .625rem;
	cursor: pointer;
	user-select: none;
	padding: .2rem 0;
}

.prc-filter__option:hover .prc-filter__box {
	border-color: var(--pf-accent);
}

/* hide native checkbox */
.prc-filter__option input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

/* custom box */
.prc-filter__box {
	flex-shrink: 0;
	width: 1.125rem;
	height: 1.125rem;
	border: 2px solid #cbd5e1;
	border-radius: var(--pf-radius);
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition:
		border-color var(--pf-dur) var(--pf-ease),
		background   var(--pf-dur) var(--pf-ease);
	position: relative;
}

/* checkmark */
.prc-filter__box::after {
	content: '';
	position: absolute;
	width: .35rem;
	height: .6rem;
	border-right: 2.5px solid #fff;
	border-bottom: 2.5px solid #fff;
	transform: rotate(45deg) translateY(-1px) scale(0);
	transition: transform var(--pf-dur) var(--pf-ease);
}

.prc-filter__option input:checked ~ .prc-filter__box {
	border-color: var(--pf-accent);
	background:   var(--pf-accent);
}

.prc-filter__option input:checked ~ .prc-filter__box::after {
	transform: rotate(45deg) translateY(-1px) scale(1);
}

/* focus ring */
.prc-filter__option input:focus-visible ~ .prc-filter__box {
	outline: 2px solid var(--pf-accent);
	outline-offset: 2px;
}

.prc-filter__option-text {
	font-size: .9rem;
	color: var(--pf-text);
	line-height: 1.4;
}

.prc-filter__option:hover .prc-filter__option-text {
	color: var(--pf-accent-dark);
}

/* ── Product grid loading state ───────────────────────────────────────────── */

#prc-products-grid {
	min-height: 200px;
	transition: opacity 240ms var(--pf-ease);
}

#prc-products-grid.is-loading {
	opacity: .25;
	pointer-events: none;
}

/* Spinner centred over the grid */
#prc-products-grid.is-loading::after {
	content: '';
	position: absolute;
	top: 5rem;
	left: 50%;
	transform: translateX(-50%);
	width: 2.25rem;
	height: 2.25rem;
	border: 3px solid var(--pf-border);
	border-top-color: var(--pf-accent);
	border-radius: 50%;
	animation: prc-spin 0.65s linear infinite;
	z-index: 10;
}

@keyframes prc-spin {
	to { transform: translateX(-50%) rotate(360deg); }
}

/* ── Result count ─────────────────────────────────────────────────────────── */

.prc-results-meta {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
	min-height: 1.5rem;
}

.prc-results-count {
	font-size: .875rem;
	color: var(--pf-muted);
}

/* ── Empty state ──────────────────────────────────────────────────────────── */

.prc-filter-empty {
	padding: 3rem 1rem;
	text-align: center;
	color: var(--pf-muted);
	font-size: .9375rem;
}

.prc-filter-empty p {
	margin-bottom: 1rem;
}

/* ── Pagination ───────────────────────────────────────────────────────────── */

.prc-filter-pagination {
	margin-top: 2rem;
	text-align: center;
}

.prc-filter-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	font-size: .875rem;
	color: var(--pf-text);
	text-decoration: none;
	transition: background var(--pf-dur) var(--pf-ease), color var(--pf-dur) var(--pf-ease);
}

.prc-filter-pagination .page-numbers:hover {
	background: var(--pf-border);
}

.prc-filter-pagination .page-numbers.current {
	background: var(--pf-accent);
	color: #fff;
}

/* ── Active filters strip (mobile) ────────────────────────────────────────── */

.prc-active-filters {
	display: flex;
	flex-wrap: wrap;
	gap: .375rem;
	margin-bottom: .875rem;
}

.prc-active-filters:empty {
	display: none;
}

.prc-active-filter-tag {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .2rem .6rem;
	background: #f0fae5;
	border: 1px solid var(--pf-accent);
	border-radius: 999px;
	font-size: .75rem;
	font-weight: 600;
	color: var(--pf-accent-dark);
	cursor: pointer;
	transition: background var(--pf-dur) var(--pf-ease);
}

.prc-active-filter-tag:hover {
	background: #dff5be;
}

.prc-active-filter-tag svg {
	width: .75rem;
	height: .75rem;
}

/* ── Enrolled badge ───────────────────────────────────────────────────────── */

.pcw-enrolled-badge {
	position: absolute;
	bottom: .5rem;
	left: .5rem;
	z-index: 10;
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .25rem .55rem;
	background: var(--pf-accent);
	color: #fff;
	font-size: .6875rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-radius: 3px;
	line-height: 1;
	pointer-events: none;
	box-shadow: 0 1px 4px rgba(0,0,0,.18);
}

.pcw-enrolled-badge svg {
	width: .625rem;
	height: .625rem;
	flex-shrink: 0;
}

/* Partial enrolment — amber, no uppercase, slightly wider */
.pcw-enrolled-badge--partial {
	background: #f59e0b;
	letter-spacing: .02em;
	text-transform: none;
	font-weight: 700;
}

/* ── Bundle savings messaging ─────────────────────────────────────────────── */

.pcw-bundle-savings {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem;
	margin: .25rem 0 .5rem;
	line-height: 1.3;
}

.pcw-bundle-savings__pill {
	display: inline-flex;
	align-items: center;
	padding: .2rem .55rem;
	background: #ecfdf5;
	border: 1px solid #6ee7b7;
	border-radius: 999px;
	font-size: .75rem;
	font-weight: 700;
	color: #065f46;
	white-space: nowrap;
}

.pcw-bundle-savings__vs {
	font-size: .75rem;
	color: var(--pf-muted);
}

/* On single product pages the badge sits wider */
.pcw-bundle-savings--single {
	margin: .4rem 0 .75rem;
}

.pcw-bundle-savings--single .pcw-bundle-savings__pill {
	font-size: .8125rem;
	padding: .25rem .65rem;
}

.pcw-bundle-savings--single .pcw-bundle-savings__vs {
	font-size: .8125rem;
}