.tour-search-filter,
.tour-search-filter .filter-bar,
.tour-search-filter .filter-bar-top,
.tour-search-filter .filter-item {
	overflow: visible !important;
}

.tour-search-filter .filter-bar {
	position: relative;
	z-index: 20;
}

.te-filter-panel[hidden] {
	display: none !important;
}

.te-filter-panel {
	overflow: auto;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 0 0 4px 4px;
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 24px 40px rgba(0, 0, 0, 0.14);
}

.tour-search-filter.is-date-open .filter-item:has(#date-button),
.tour-search-filter.is-destination-open .filter-item.destination-item,
.tour-search-filter.is-interest-open .filter-item:has(#interest-button) {
	background: #fff;
}

@media (max-width: 920px) {
	.te-filter-panel .tswb-search__departure-years,
	.te-filter-panel .tswb-search__interest-grid,
	.te-filter-panel .tswb-search__destination-grid {
		padding-left: 30px;
		padding-right: 30px;
	}
}

@media (max-width: 560px) {
	.te-filter-panel .tswb-search__departure-years,
	.te-filter-panel .tswb-search__interest-grid,
	.te-filter-panel .tswb-search__destination-grid {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* Destination grid/items — this theme-owned filter panel reuses the tswb__*
   naming convention from the tour-search-widget-block plugin's own "Browse
   By Interest" panel so it inherits visual consistency, but the plugin only
   ever renders an interest panel, never a destination one, so those rules
   never existed for these classes. Mirrors .tswb-search__interest-grid /
   .tswb-search__interest-item exactly (plugin CSS: assets/tour-search-widget.css). */
.tswb-search__destination-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(160px, 1fr));
	gap: 10px;
	padding: 30px 54px 36px;
}

.tswb-search__destination-item {
	position: relative;
	min-height: 60px;
	padding: 10px 14px;
	border: 0;
	border-radius: 6px;
	background: #e9eaec;
	color: #343434;
	font-family: inherit;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: background 140ms ease, color 140ms ease;
}

.tswb-search__destination-item:hover {
	background: #d4d6da;
}

.tswb-search__destination-item.is-selected {
	background: #004f63;
	color: #fff;
}

.tswb-search__destination-item.is-selected:hover {
	background: #003d4e;
}

@media (max-width: 920px) {
	.tswb-search__destination-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
		padding: 24px 30px 30px;
	}
}

@media (max-width: 560px) {
	.tswb-search__destination-grid {
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		padding: 18px 20px 22px;
	}

	.tswb-search__destination-item {
		font-size: 15px;
		min-height: 50px;
	}
}

/* The plugin's own departure/interest toggle buttons (and our matching
   destination toggle) set text-align:left and rely on .tswb-search__control's
   unprefixed appearance:none, but browsers still apply native <button>
   chrome — including a solid hover/focus/active fill — unless
   -webkit-appearance is also reset (same root cause as the Destination
   search-input fix). That native fill was a dark blue that made the
   control's own blue text (#007aad, matching .tswb-search__control's
   `color`) unreadable against it. Covers all three toggles, since the
   plugin's own two never had this reset either — only the Destination one
   happened to be screenshotted. Also pins the text color explicitly on
   hover/focus/active so it can never be swallowed by any future
   background change. */
.tswb-search__destination-toggle,
.tswb-search__departure-toggle,
.tswb-search__interest-toggle {
	-webkit-appearance: none;
	appearance: none;
	background: transparent !important;
}

.tswb-search__destination-toggle:hover,
.tswb-search__destination-toggle:focus,
.tswb-search__destination-toggle:active,
.tswb-search__departure-toggle:hover,
.tswb-search__departure-toggle:focus,
.tswb-search__departure-toggle:active,
.tswb-search__interest-toggle:hover,
.tswb-search__interest-toggle:focus,
.tswb-search__interest-toggle:active {
	background: transparent !important;
	box-shadow: none !important;
	color: #007aad !important;
}

/* Dropdown-arrow indicator on the destination toggle button, matching the
   plugin's own departure/interest toggle buttons exactly (tswb plugin CSS,
   .tswb-search__departure-toggle::after / .tswb-search__interest-toggle::after). */
.tswb-search__destination-toggle {
	text-align: left;
}

.tswb-search__destination-toggle::after {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 7px;
	border-top: 5px solid currentColor;
	border-right: 5px solid transparent;
	border-left: 5px solid transparent;
	content: "";
	vertical-align: middle;
}

/* ============================================================
   Embedded search block width
   ============================================================
   Embedded in a page the block has no wrapper of its own, and on the About Us
   template — which deliberately removes the container cap (max-width: none) —
   it stretched to the full viewport (1495px on a desktop screen).

   The site's content measure is 1100px: Kadence rows are 1148px wide with 24px
   side padding, so .kt-inside-inner-col resolves to exactly 1100. The filter
   carries 25px of its own left/right padding, so it needs 1150px for its
   *contents* to line up on that same 1100px measure.

   Scoped to .entry-content, which covers both the tour category pages and any
   page embedding the block. The tours archive is not affected — there the
   block sits in .tour-archive-wrapper, which caps it separately. */
   The block's own horizontal padding is zeroed in the template's inline
   <style> (see blocks/tour-search-filter.php), so its contents sit on the same
   1100px measure as everything else. This rule only caps the box if it ever
   lands somewhere wider than a standard Kadence column. */
.entry-content .tour-search-filter {
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
}