/* =============================================================================
   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: .75rem;
	padding-bottom: .6rem;
	border-bottom: 2px solid var(--pf-text);
}

.prc-filter__title {
	/* Was .6875rem — smaller than every section label underneath it
	   (CONFERENCE TYPE etc. sit at .9375rem), so the one heading that's
	   meant to head the whole panel read as the least prominent thing in
	   it (client feedback: "the word 'Filter' too small"). */
	font-size: 1.0625rem;
	font-weight: 800;
	letter-spacing: .02em;
	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;
	/* Was .875rem 0 — three section headers at that height, plus the option
	   list's own padding below, read as a lot of empty vertical space for
	   how little sits in each section (client feedback: "big and sparse"). */
	padding: .6rem 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: .2rem;
	padding-bottom: .65rem;
}

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

.prc-filter__option {
	display: flex;
	align-items: center;
	gap: .5625rem;
	cursor: pointer;
	user-select: none;
	padding: .15rem 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: 1rem;
	height: 1rem;
	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: .3rem;
	height: .52rem;
	border-right: 2px solid #fff;
	border-bottom: 2px 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;
}

/* Combined pill (single product page only) — "Save X (Y%) vs buying
   separately at £Z" all in one pill instead of a pill + plain-text
   fragment (client feedback). Regular weight by default; the amount/
   percentage portion stays bold via .pcw-bundle-savings__pill-amount. */
.pcw-bundle-savings--single .pcw-bundle-savings__pill--combined {
	/* Overrides the base rule's display:inline-flex — that treats each run
	   of text between the nested spans as its own anonymous flex item and
	   trims its leading/trailing whitespace, silently eating the space
	   before "vs" and before the final price. Plain inline flow doesn't. */
	display: inline;
	white-space: normal;
	font-weight: 500;
}

.pcw-bundle-savings__pill-amount {
	font-weight: 700;
}

/* ── Profession sidebar CTA ("Legal/Surveyors/Dental Resources") ────────────
   This comes from an ACF options-page WYSIWYG field, echoed directly into
   #shop-sidebar alongside the filter — its heading used the editor's default
   look instead of matching the FILTER/LOCATIONS-style headings above it
   (client feedback). Scoped to a direct child of #shop-sidebar so it only
   ever touches this CTA, never the filter widget's own markup (which uses
   <span>, not <h4>, for its headings). Applies to all three profession
   pages since they share this same sidebar structure. */
#shop-sidebar > h4 {
	font-size: .9375rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--pf-text);
	margin: 1.5rem 0 .5rem;
}

#shop-sidebar > h4 + p {
	font-size: .9rem;
	color: var(--pf-text);
	line-height: 1.4;
	margin: 0 0 1rem;
}