/* =========================================================
   LAI Speakers - Filter Sidebar Styles
   STEP 5a of build.

   WHERE THIS GOES:
   /wp-content/themes/YOUR-CHILD-THEME/assets/css/speaker-filters.css

   ENQUEUE THIS the same way as speaker-card.css -- add a second
   wp_enqueue_style() call inside your existing lai_enqueue_speaker_styles()
   function in functions.php (shown again at the bottom of this comment
   for convenience):

     wp_enqueue_style(
         'lai-speaker-filters',
         get_stylesheet_directory_uri() . '/assets/css/speaker-filters.css',
         array(),
         '1.0.0'
     );

   Uses the same --lai-color-* variables defined in speaker-card.css,
   so both files should be enqueued together and share the same palette.
   ========================================================= */

.lai-filters {
	background: #2e2e38; /* dark panel, matches reference site's sidebar */
	color: #ffffff;
	padding: 24px;
	border-radius: 4px;
}

.lai-filters__heading {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0 0 16px;
	color: #ffffff;
}

.lai-filters__clear {
	display: block;
	background: none;
	border: none;
	color: #b9b9c4;
	font-size: 12px;
	text-decoration: underline;
	cursor: pointer;
	padding: 0;
	margin-bottom: 20px;
}

.lai-filters__clear:hover {
	color: #ffffff;
}

.lai-filter-group {
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	padding: 14px 0;
}

.lai-filter-group:last-child {
	border-bottom: none;
}

.lai-filter-group__toggle {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: none;
	border: none;
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	padding: 0;
}

.lai-filter-group__chevron {
	width: 8px;
	height: 8px;
	border-right: 2px solid #ffffff;
	border-bottom: 2px solid #ffffff;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.lai-filter-group__content {
	margin-top: 12px;
}

/* Scrollable checkbox list for Topics & Types (60+ items) */
.lai-filter-group__scroll {
	max-height: 280px;
	overflow-y: auto;
	padding-right: 8px;
}

.lai-filter-group__scroll::-webkit-scrollbar {
	width: 6px;
}

.lai-filter-group__scroll::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.25);
	border-radius: 3px;
}

.lai-checkbox-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	font-size: 13px;
	color: #e4e4ea;
	cursor: pointer;
}

.lai-checkbox-row__count {
	color: #8a8a96;
	font-size: 12px;
	margin-left: auto;
}

.lai-checkbox-row input[type="checkbox"] {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	accent-color: var(--lai-color-accent, #d6004c);
}

/* Plain dropdown selects (Gender, Political Affiliation, Country, State) */
.lai-select {
	width: 100%;
	padding: 10px 12px;
	font-size: 13px;
	background: #ffffff;
	color: #1a1a1a;
	border: none;
	border-radius: 2px;
	cursor: pointer;
}

/* Fee range slider */
.lai-fee-range {
	display: none; /* hidden until a location is selected -- Step 5c toggles "is-visible" */
	margin-top: 14px;
}

.lai-fee-range.is-visible {
	display: block;
}

.lai-fee-range__labels {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: #b9b9c4;
	margin-bottom: 8px;
}

.lai-fee-range__track-wrap {
	position: relative;
	height: 24px;
}

.lai-fee-range__input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	pointer-events: none; /* re-enabled on the thumb itself via JS-set z-index, see Step 5c notes */
}

.lai-fee-range__input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #ffffff;
	cursor: pointer;
	pointer-events: auto;
	margin-top: 4px;
}

.lai-fee-range__input::-webkit-slider-runnable-track {
	height: 4px;
	background: rgba(255, 255, 255, 0.25);
	border-radius: 2px;
}

.lai-fee-range__placeholder {
	font-size: 12px;
	color: #8a8a96;
	font-style: italic;
	margin: 8px 0 0;
}

.lai-fee-range__placeholder.is-hidden {
	display: none;
}

/* Toggle row (LAI Exclusive Speakers) */
.lai-toggle-row {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: #e4e4ea;
	cursor: pointer;
}

.lai-toggle-row input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--lai-color-accent, #d6004c);
}

.lai-filter-empty {
	font-size: 13px;
	color: #8a8a96;
	font-style: italic;
}