/**
 * /events/ filter bar + "Past Events" divider (s92).
 *
 * Scoped: enqueued only on the events page (see functions.php). Brand values
 * come from the SAF token sheet (saf-tokens) with literal fallbacks. The
 * divider div is emitted by SAF_Events_Templates::maybe_past_divider()
 * between jet-listing-grid items; it must span the full grid row whether the
 * items wrapper lays out as CSS grid or flex.
 */

/* ---- Bar card ---------------------------------------------------------- */

.saf-events-filter-bar > .elementor-container {
	background: #fff;
	border: 1px solid var(--saf-border, #d8d1c0);
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(28, 23, 16, 0.06);
	padding: 18px 20px 6px;
}

.saf-events-filter-bar .jet-filter-label {
	font-family: Montserrat, sans-serif;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--saf-fg-muted, #5a554e);
	margin-bottom: 6px;
}

/* ---- When: radio as brand pills ---------------------------------------- */

/* JSF wraps EACH item in its own __row -- the flex parent must be the list. */
.saf-events-filter-bar .jet-radio-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.saf-events-filter-bar .jet-radio-list__row {
	margin: 0;
}

.saf-events-filter-bar .jet-radio-list__item {
	margin: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--saf-border, #d8d1c0);
	border-radius: 999px;
	background: #fff;
	padding: 7px 16px;
	font-family: Montserrat, sans-serif;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--saf-charcoal, #1c1710);
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* The square decorator boxes read as checkboxes -- the pill IS the state. */
.saf-events-filter-bar .jet-radio-list__decorator {
	display: none;
}

.saf-events-filter-bar .jet-radio-list__item:hover {
	border-color: var(--saf-brick-red, #be2727);
	color: var(--saf-brick-red, #be2727);
}

.saf-events-filter-bar .jet-radio-list__item:has(input:checked) {
	background: var(--saf-brick-red, #be2727);
	border-color: var(--saf-brick-red, #be2727);
	color: var(--saf-linen, #f5f1e7);
}

.saf-events-filter-bar .jet-radio-list__item:has(input:focus-visible) {
	outline: 2px solid var(--saf-denim, #004263);
	outline-offset: 2px;
}

/* ---- Dropdown triggers (Category / Tag / Venue / Year) ----------------- */

.saf-events-filter-bar .jet-filter-items-dropdown {
	position: relative;
}

.saf-events-filter-bar .jet-filter-items-dropdown__label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 42px;
	padding: 8px 36px 8px 12px;
	background: #fff;
	border: 1px solid var(--saf-border, #d8d1c0);
	border-radius: 8px;
	font-family: Montserrat, sans-serif;
	font-size: 0.92rem;
	color: var(--saf-charcoal, #1c1710);
	cursor: pointer;
	position: relative;
	transition: border-color 0.15s ease;
}

.saf-events-filter-bar .jet-filter-items-dropdown__label::after {
	content: '';
	position: absolute;
	right: 14px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--saf-fg-muted, #5a554e);
	border-bottom: 2px solid var(--saf-fg-muted, #5a554e);
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}

.saf-events-filter-bar .jet-filter-items-dropdown__label:hover {
	border-color: var(--saf-brick-red, #be2727);
}

.saf-events-filter-bar .jet-filter-items-dropdown__body {
	background: #fff;
	border: 1px solid var(--saf-border, #d8d1c0);
	border-radius: 10px;
	box-shadow: 0 10px 28px rgba(28, 23, 16, 0.16);
	padding: 10px;
	max-height: 340px;
	overflow-y: auto;
	z-index: 40;
}

.saf-events-filter-bar .jet-filter-items-search__input {
	width: 100%;
	min-height: 38px;
	padding: 6px 10px;
	border: 1px solid var(--saf-border, #d8d1c0);
	border-radius: 6px;
	background: var(--saf-linen, #f5f1e7);
	font-size: 0.9rem;
}

.saf-events-filter-bar .jet-checkboxes-list__row {
	margin-top: 6px;
}

.saf-events-filter-bar .jet-checkboxes-list__item {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 6px 8px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 0.9rem;
	color: var(--saf-charcoal, #1c1710);
}

.saf-events-filter-bar .jet-checkboxes-list__item:hover {
	background: var(--saf-linen, #f5f1e7);
}

/* ---- Date range --------------------------------------------------------- */

.saf-events-filter-bar .jet-date-range__inputs {
	display: flex;
	gap: 8px;
	border: 0;
	padding: 0;
	margin: 0;
}

.saf-events-filter-bar .jet-date-range__inputs input {
	width: 100%;
	min-width: 0;
	min-height: 42px;
	padding: 8px 10px;
	border: 1px solid var(--saf-border, #d8d1c0);
	border-radius: 8px;
	background: #fff;
	font-size: 0.9rem;
	color: var(--saf-charcoal, #1c1710);
}

.saf-events-filter-bar .jet-date-range__inputs input:focus-visible,
.saf-events-filter-bar .jet-filter-items-search__input:focus-visible {
	outline: 2px solid var(--saf-denim, #004263);
	outline-offset: 1px;
}

/* ---- Responsive breathing room ----------------------------------------- */

@media (max-width: 1024px) {
	.saf-events-filter-bar .elementor-widget {
		margin-bottom: 12px;
	}
}

/* ---- Past Events divider ------------------------------------------------ */

.saf-events-past-divider {
	grid-column: 1 / -1;
	flex-basis: 100%;
	width: 100%;
	margin: 32px 0 8px;
	padding-top: 24px;
	border-top: 2px solid var(--saf-border, #d8d1c0);
}

.saf-events-past-divider__title {
	margin: 0;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	color: var(--saf-denim, #004263);
	font-size: 2rem;
	line-height: 1.2;
}

/* ---- Pagination --------------------------------------------------------- */

.saf-events-pagination .jet-filters-pagination {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 28px;
}

.saf-events-pagination .jet-filters-pagination__item {
	min-width: 40px;
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 12px;
	border: 1px solid var(--saf-border, #d8d1c0);
	border-radius: 8px;
	background: #fff;
	font-family: Montserrat, sans-serif;
	font-weight: 600;
	color: var(--saf-denim, #004263);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.saf-events-pagination .jet-filters-pagination__item:hover {
	border-color: var(--saf-brick-red, #be2727);
	color: var(--saf-brick-red, #be2727);
}

.saf-events-pagination .jet-filters-pagination__item.jet-filters-pagination__current {
	background: var(--saf-brick-red, #be2727);
	border-color: var(--saf-brick-red, #be2727);
	color: var(--saf-linen, #f5f1e7);
	cursor: default;
}