/**
 * Filter tray shell: left slide-over on the native <dialog> top layer.
 */

/* Shell ------------------------------------------------------------------ */

.filter-tray {
	background: #FFFFFF;
	border: 0;
	display: none;
	height: 100dvh;
	inset: 0 auto 0 0;
	margin: 0;
	max-height: none;
	max-width: none;
	padding: 0;
	transform: translateX(-100%);
	transition: transform 240ms ease;
	width: min(420px, 92vw);
}

.filter-tray[open] {
	display: flex;
	flex-direction: column;
}

.filter-tray.is-open {
	transform: translateX(0);
}

.filter-tray::backdrop {
	background: rgba(18, 46, 82, 0.55);
	opacity: 0;
	transition: opacity 240ms ease;
}

.filter-tray.is-open::backdrop {
	opacity: 1;
}

body:has(.filter-tray[open]) {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.filter-tray,
	.filter-tray::backdrop {
		transition: none;
	}
}

/* Header ------------------------------------------------------------------ */

.filter-tray__header {
	align-items: center;
	border-bottom: 1px solid rgba(45, 47, 59, 0.1);
	display: flex;
	flex: 0 0 auto;
	gap: 16px;
	padding: 20px 24px;
}

.filter-tray__close {
	align-items: center;
	background-color: #03CFFF;
	border: 0;
	border-radius: 1000px;
	color: #2D2F3B;
	cursor: pointer;
	display: inline-flex;
	font-size: 14px;
	font-weight: 600;
	gap: 8px;
	line-height: 1;
	padding: 14px 22px;
	transition: transform 160ms ease, filter 160ms ease;
}

.filter-tray__close:hover,
.filter-tray__close:focus-visible {
	filter: brightness(1.06);
	transform: translateY(-2px);
}

.filter-tray__title {
	border-left: 1px solid rgba(45, 47, 59, 0.2);
	color: #2D2F3B;
	font-size: 28px;
	font-weight: 600;
	margin: 0;
	padding-left: 16px;
}

/* Scrollable body ---------------------------------------------------------- */

.filter-tray__body {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 8px 24px 24px;
}

.filter-tray__section {
	border-bottom: 1px solid rgba(45, 47, 59, 0.1);
	padding: 16px 0;
}

.filter-tray__section summary {
	color: #2D2F3B;
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	list-style: none;
}

.filter-tray__section summary::-webkit-details-marker {
	display: none;
}

.filter-tray__section summary::after {
	color: #253FD6;
	content: "+";
	float: right;
	font-weight: 600;
}

.filter-tray__section[open] summary::after {
	content: "-";
}

.filter-tray__options {
	display: flex;
	flex-direction: column;
	gap: 12px;
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
}

.filter-tray__option {
	align-items: center;
	color: #2D2F3B;
	display: flex;
	font-size: 15px;
	font-weight: 300;
	gap: 10px;
}

.filter-tray__option input {
	accent-color: #253FD6;
	height: 18px;
	width: 18px;
}

.filter-tray__option:has(input:checked) {
	color: #253FD6;
	font-weight: 600;
}

.filter-tray__input,
.filter-tray__select {
	border: 1px solid rgba(45, 47, 59, 0.25);
	border-radius: 8px;
	color: #2D2F3B;
	font-size: 15px;
	margin-top: 12px;
	padding: 10px 14px;
	width: 100%;
}

.filter-tray__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.filter-tray__chip {
	align-items: center;
	background-color: #EDFBFF;
	border-radius: 1000px;
	color: #253FD6;
	display: inline-flex;
	font-size: 13px;
	font-weight: 600;
	gap: 6px;
	line-height: 1;
	padding: 6px 12px;
}

.filter-tray__chip-remove {
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	padding: 0;
}

/* Sticky footer ------------------------------------------------------------- */

.filter-tray__footer {
	background: #FFFFFF;
	border-top: 1px solid rgba(45, 47, 59, 0.1);
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 12px;
	padding: 16px 24px 20px;
}

.filter-tray__apply {
	background-color: #03CFFF;
	border: 0;
	border-radius: 1000px;
	color: #2D2F3B;
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	padding: 14px 28px;
	transition: transform 160ms ease, filter 160ms ease;
	width: 100%;
}

.filter-tray__apply:disabled {
	cursor: not-allowed;
	filter: saturate(0.35);
	opacity: 0.7;
}

.filter-tray__apply:not(:disabled):hover,
.filter-tray__apply:not(:disabled):focus-visible {
	filter: brightness(1.06);
	transform: translateY(-2px);
}

.filter-tray__clear {
	background: none;
	border: 1px solid #03CFFF;
	border-radius: 1000px;
	color: #2D2F3B;
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	padding: 12px 28px;
	width: 100%;
}

/* BEF exposed form inside the tray ------------------------------------------ */
/*
 * Selectors verified against the RENDERED form on evt-rev:
 * - The <form> element WRAPS the dialog, so widgets are DIRECT children
 *   of .filter-tray__body--form (there is no form element inside it).
 * - BEF nested radios render as .form-radios.bef-nested > ul > li >
 *   .form-item; the bare ul needs its list styling stripped.
 * - Drupal 10 emits js-form-type-* classes only (no form-type-*).
 * Purely presentational: submission semantics stay 100% Views/BEF.
 */

/* Each top-level widget reads as a bordered section. */
.filter-tray__body--form > .form-item,
.filter-tray__body--form > fieldset {
	border-bottom: 1px solid rgba(45, 47, 59, 0.1);
	margin: 0;
	padding: 16px 0;
}

/* Strip UA fieldset chrome but keep the section divider. */
.filter-tray__body--form > fieldset {
	border-top: 0;
	border-left: 0;
	border-right: 0;
	min-width: 0;
}

/* Widget titles read as section headings. */
.filter-tray__body--form fieldset legend,
.filter-tray__body--form > .form-item > label {
	color: #2D2F3B;
	display: block;
	float: none;
	font-size: 16px;
	font-weight: 600;
	margin: 0;
	padding: 0;
	width: 100%;
}

/* Radio/checkbox stacks (BEF renders these as nested lists). */
.filter-tray__body--form .form-radios ul,
.filter-tray__body--form .form-checkboxes ul {
	display: flex;
	flex-direction: column;
	gap: 12px;
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
}

.filter-tray__body--form .form-radios li,
.filter-tray__body--form .form-checkboxes li {
	margin: 0;
	padding: 0;
}

.filter-tray__body--form .js-form-type-radio,
.filter-tray__body--form .js-form-type-checkbox {
	align-items: center;
	color: #2D2F3B;
	display: flex;
	font-size: 15px;
	font-weight: 300;
	gap: 10px;
	margin: 0;
}

.filter-tray__body--form .js-form-type-radio label,
.filter-tray__body--form .js-form-type-checkbox label {
	font-size: inherit;
	font-weight: inherit;
	margin: 0;
}

.filter-tray__body--form .form-radio,
.filter-tray__body--form .form-checkbox {
	accent-color: #253FD6;
	height: 18px;
	width: 18px;
}

.filter-tray__body--form .js-form-type-radio:has(input:checked),
.filter-tray__body--form .js-form-type-checkbox:has(input:checked) {
	color: #253FD6;
	font-weight: 600;
}

/* Text, date, and select widgets. */
.filter-tray__body--form .form-text,
.filter-tray__body--form .form-search,
.filter-tray__body--form .form-date,
.filter-tray__body--form .form-select {
	border: 1px solid rgba(45, 47, 59, 0.25);
	border-radius: 8px;
	color: #2D2F3B;
	font-size: 15px;
	margin-top: 12px;
	padding: 10px 14px;
	width: 100%;
}

/* The form's own actions pin as the tray footer; negative side margins
   bleed the divider across the body's padding. */
.filter-tray__body--form .form-actions {
	background: #FFFFFF;
	border-top: 1px solid rgba(45, 47, 59, 0.1);
	bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 16px -24px 0;
	padding: 16px 24px;
	position: sticky;
}

.filter-tray__body--form .form-actions .form-submit {
	background-color: #03CFFF;
	border: 0;
	border-radius: 1000px;
	color: #2D2F3B;
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	padding: 14px 28px;
	transition: transform 160ms ease, filter 160ms ease;
	width: 100%;
}

.filter-tray__body--form .form-actions .form-submit:hover,
.filter-tray__body--form .form-actions .form-submit:focus-visible {
	filter: brightness(1.06);
	transform: translateY(-2px);
}

/* BEF reset renders as a second submit with the edit-reset selector;
   it reads as the secondary (outline) action. */
.filter-tray__body--form .form-actions [data-drupal-selector="edit-reset"] {
	background: none;
	border: 1px solid #03CFFF;
}

/* The theme adds a site-wide icon submit to exposed forms; in the tray
   it duplicates Apply, so hide it (Apply and Reset are inputs, the
   icon is the only button element). */
.filter-tray__body--form .form-actions button.form-submit {
	display: none;
}

/* Exposed SORT controls stay hidden in the tray: the toolbar's Sort by
   proxy (eventSort.js) is the visible control and writes back to these
   canonical inputs. Covers stock (sort_by/sort_order) and BEF-combined
   (sort_bef_combine) markup. */
.filter-tray__body--form [class*="form-item-sort-"] {
	display: none;
}