/* Cat Filter Styles */
.cat_filter_row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 30px;
}

/* Search page filter bar - a soft panel behind the whole row, with each dropdown
   left as a plain white box, so the parameters read as a distinct group rather
   than blending into the page background. */
.cat_filter_row.custom_filter_tours {
	background-color: #f7f7f9;
	border: 1px solid #ececec;
	border-radius: 0;
	padding: 28px 24px 18px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

/* ===== "When are you traveling?" date-range field - see
   caguide_get_date_range_fit() server-side. Lives as an ordinary column in
   the "Refine your search" row below (widgets/custom-post-widget.php), right
   after Country - it used to lead its own separate highlighted band above
   this row instead; these rules (.tour_search_daterange_*) are unchanged
   from that, only the markup around them moved. Same pink brand accent as
   every other primary action on this site, rather than a new colour. ===== */
.tour_search_daterange_wrap {
	position: relative;
	max-width: 360px;
}

.tour_search_daterange_icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	color: var(--pink-action, #e8334f);
	pointer-events: none;
}

/* Matches the neighbouring .filter_select_label dropdowns' own box exactly
   (border colour/radius/shadow, ~3px vertical padding) - measured against
   that rule directly rather than guessing pixel values, so this reads as one
   more field in the same row instead of its own differently-styled control.
   font/color are forced to inherit rather than set to a specific value,
   since .filter_select_label's own <span> never sets any of its own either -
   this matches it under whatever the theme's real body type turns out to
   be, rather than locking in a guessed value that may not.
   Every property below is !important - this is a real <input>, unlike the
   div-based .filter_select_label dropdowns next to it, so unlike them it's
   also a target for the theme's own generic input[type="text"] styling,
   which can otherwise win on any of these (border/radius/shadow/font/color)
   individually even though nothing here looks like it should lose - the
   exact same reasoning as the padding rule already needed this below it. */
.tour_search_daterange_input {
	width: 100%;
	box-sizing: border-box !important;
	padding: 3px 40px !important;
	border: 1px solid #c1c1c1 !important;
	border-radius: 0 !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
	background-color: #fff !important;
	cursor: pointer;
	/* Real explicit inheritance, not just omitting a value - a text <input>
	   has its own browser-default font-size (observed ~13px in testing) that
	   wins over the surrounding page's actual type even though nothing here
	   overrides it, so simply not setting font-size doesn't reliably match
	   the plain, unstyled <span> .filter_select_label uses right next to it. */
	font: inherit !important;
	color: inherit !important;
}

.tour_search_daterange_input:focus {
	outline: none;
	border-color: var(--pink-action, #e8334f);
}

/* "Select Country" is plain static text at full strength, never dimmed -
   opacity:1 alongside color:inherit since browsers otherwise apply their own
   dimmed default specifically to ::placeholder regardless of the input's own
   color, so without this the placeholder would still read lighter than that
   even after the color/font matching above. */
.tour_search_daterange_input::placeholder {
	color: inherit !important;
	opacity: 1 !important;
}

.tour_search_daterange_clear {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 26px;
	height: 26px;
	border: none;
	border-radius: 50%;
	background: #f0f0f0;
	color: #6b6f72;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.tour_search_daterange_clear:hover {
	background: #fbd6de;
	color: var(--pink-action, #e8334f);
}

/* flatpickr range-mode selection tinted to the same pink accent, instead of
   its default blue-grey, so the one new range picker in this plugin still
   looks like it belongs to it. */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
	background: var(--pink-action, #e8334f) !important;
	border-color: var(--pink-action, #e8334f) !important;
}

.flatpickr-day.inRange {
	background: #fce4e9 !important;
	border-color: #fce4e9 !important;
	box-shadow: -5px 0 0 #fce4e9, 5px 0 0 #fce4e9 !important;
}

.flatpickr-day:hover {
	background: #fbd6de;
}

@media only screen and (max-width: 544px) {
	.cat_filter_row {
			display: block;
	}
}

.cat_filter_row .cat_filter_col{
	width: 31%;
	position: relative;
}

@media only screen and (max-width: 992px) {
	.cat_filter_row .cat_filter_col {
			width: 48%;
	}
}

@media only screen and (max-width: 767px) {
	.cat_filter_row .cat_filter_col {
			width: 100%;
	}
	.cat_filter_row .cat_filter_col button {
			width: 100%;
	}
}

.cat_filter_row .cat_filter_col:not(:last-child){
	margin-bottom: 10px;
}
.cat_filter_row .cat_filter_col:last-child{
	margin-top: 25px;
}

/* ===== Two groups instead of one flat row of columns (see the render()
   docblock in widgets/custom-post-widget.php for why): the six "open a box,
   pick from a list"-shaped filters (Country/Dates/Tour Types/Starting
   Points/Sights/Participants) stay together on the left/center as a plain
   2-column grid in .cat_filter_primary_group; everything shaped differently
   - checkboxes, star icons, sort pills, the reset button - moves into its
   own wider .cat_filter_secondary_group panel on the right, each control
   separated by a thin divider rather than just gap spacing, so the group
   reads as one coherent settings panel instead of loosely floating pieces. */
.cat_filter_row.custom_filter_tours {
	align-items: flex-start;
	gap: 8px 32px;
}

/* A real 2-column grid, not flex-wrap - with an odd number of items (5, back
   when Participants lived in the secondary group) flex-wrap's own
   justify-content:space-between spread the lone leftover item on row 2 out
   to the far edge, leaving a hole in the middle of the row instead of a
   clean second column. A grid just places item 6 directly under item 4,
   which for grid also holds regardless of the odd/even ratio going forward. */
.cat_filter_primary_group {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px 32px;
	flex: 1 1 480px;
}

/* Overrides .cat_filter_col's own 31%/48%/100% width rules (those assume
   sharing a wide multi-column flex row) - a grid column's own width already
   comes from grid-template-columns above, so each item just fills its cell. */
.cat_filter_primary_group .cat_filter_col {
	width: 100%;
}

/* .cat_filter_col's own :last-child rule above (margin-top:25px) is meant to
   separate a trailing reset/submit-style control from the filters above it
   in a single stacked column - still exactly right for Clear All at the end
   of .cat_filter_secondary_group below, but Participants (now this group's
   own last item) isn't that kind of control, and picking up that gap here
   would misalign it against Sights sharing its row in the grid. */
.cat_filter_primary_group .cat_filter_col:last-child {
	margin-top: 0;
}

.cat_filter_secondary_group {
	flex: 0 0 300px;
	max-width: 300px;
	display: flex;
	flex-direction: column;
	padding-left: 28px;
	border-left: 1px solid #e3e3e6;
}

/* Overrides .cat_filter_row .cat_filter_col's own 31%/48%/100% width rules
   (including their max-width:992px/767px variants above) at every viewport -
   those assume sharing a wide multi-column row; every control here instead
   stacks in this one narrow column regardless of screen size.
   A thin divider plus consistent padding between each control (instead of
   the small uniform gap/margin every other .cat_filter_col gets) - couples
   each heading to its own control as one visual block and separates it
   clearly from its neighbours, rather than everything reading as one loose
   run of headings and controls down the panel. margin overrides win by
   selector specificity + being declared after the general rules above,
   without needing !important. */
.cat_filter_secondary_group .cat_filter_col {
	width: 100%;
	margin: 0 !important;
	padding: 14px 0;
	border-bottom: 1px solid #e9e9ec;
}

.cat_filter_secondary_group .cat_filter_col:first-child {
	padding-top: 0;
}

.cat_filter_secondary_group .cat_filter_col:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

@media only screen and (max-width: 767px) {
	.cat_filter_primary_group {
		grid-template-columns: 1fr;
	}
	.cat_filter_row.custom_filter_tours {
		flex-direction: column;
	}
	.cat_filter_secondary_group {
		flex-basis: auto;
		max-width: none;
		padding-left: 0;
		padding-top: 18px;
		margin-top: 8px;
		border-left: none;
		border-top: 1px solid #e3e3e6;
	}
}

.cat_filter_row .cat_filter_col button{
	padding-top: 10px;
	padding-bottom: 11px;
	border-radius: 0;
}

/* Sort buttons - prefixed with the same .cat_filter_row .cat_filter_col
   ancestry as the generic "button" rule above, on purpose: that rule's
   specificity would otherwise silently win over a bare .tour_sort_btn
   selector and flatten these back into square, full-width filter buttons. */
.cat_filter_row .cat_filter_col .tour_sort_buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.cat_filter_row .cat_filter_col .tour_sort_buttons .tour_sort_btn {
	width: auto;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border: 1px solid #c1c1c1;
	border-radius: 0;
	background-color: #fff;
	color: #3f444b;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 150ms, border-color 150ms, color 150ms;
}

.cat_filter_row .cat_filter_col .tour_sort_buttons .tour_sort_btn:hover:not(.active) {
	border-color: var(--e-global-color-48147da, #f28f9e);
}

.cat_filter_row .cat_filter_col .tour_sort_buttons .tour_sort_btn.active {
	background-color: var(--pink-action, #e8334f);
	border-color: var(--pink-action, #e8334f);
	color: #fff;
}

/* The icon (A / $) says what it sorts by; the arrow says which direction -
   inactive/unclicked it's a muted hint ("click to sort ascending"), then
   flips bold on click. Descending reuses the same down-arrow character,
   rotated 180deg, rather than swapping the character in JS. */
.cat_filter_row .cat_filter_col .tour_sort_buttons .tour_sort_icon {
	font-size: 13px;
}

.cat_filter_row .cat_filter_col .tour_sort_buttons .tour_sort_arrow {
	display: inline-block;
	font-size: 11px;
	opacity: 0.5;
	transition: transform 200ms ease, opacity 150ms ease;
}

.cat_filter_row .cat_filter_col .tour_sort_buttons .tour_sort_btn.active .tour_sort_arrow {
	opacity: 1;
}

.cat_filter_row .cat_filter_col .tour_sort_buttons .tour_sort_btn.sort-desc .tour_sort_arrow {
	transform: rotate(180deg);
}

/* Participants dot selector - same red-dot look as the Hero widget
   (.hero_pax_dot) and the comparison overlay (.tour_compare_pax_dot), but its
   own scoped classes (see the specificity note above .tour_sort_buttons -
   the same generic "button" rule would otherwise flatten these too). */
/* border-radius matches .filter_select_label's own 6px exactly (was 3px) -
   this box sits directly beside those dropdowns in the primary filter grid
   now, so a shallower corner radius read as a subtly different, slightly
   sharper-cornered control next to them instead of one more matching field. */
.tour_search_pax_row {
	display: flex;
	align-items: center;
	gap: 10px;
	background-color: #fff;
	border: 1px solid #c1c1c1;
	border-radius: 0;
	padding: 3px 10px;
}

.tour_search_pax_selector {
	display: flex;
	align-items: center;
	gap: 5px;
	flex-wrap: wrap;
}

.cat_filter_row .cat_filter_col .tour_search_pax_dot {
	width: 14px;
	height: 14px;
	padding: 0;
	border: 2px solid #d8d8d8;
	border-radius: 50%;
	background-color: #fff;
	cursor: pointer;
	transition: background-color 150ms, border-color 150ms;
}

.cat_filter_row .cat_filter_col .tour_search_pax_dot.filled {
	background-color: var(--pink-action, #e8334f);
	border-color: var(--pink-action, #e8334f);
}

.cat_filter_row .cat_filter_col .tour_search_pax_dot:hover {
	border-color: var(--e-global-color-48147da, #f28f9e);
}

.tour_search_pax_value {
	font-size: 14px;
	font-weight: 700;
	color: var(--pink-action, #e8334f);
	margin-left: auto;
}

/* Hotel star selector - same 5-icon control as the comparison overlay
   (.tour_compare_star): only tiers 3★/4★ are real selectable values, icon
   1-3 selects 3★ and icon 4-5 selects 4★. */
.tour_search_star_selector {
	display: flex;
	gap: 2px;
}

.cat_filter_row .cat_filter_col .tour_search_star {
	width: 26px;
	height: 26px;
	padding: 0;
	border: none;
	background: none;
	font-size: 20px;
	line-height: 1;
	color: #d8d8d8;
	cursor: pointer;
	transition: color 150ms;
}

.cat_filter_row .cat_filter_col .tour_search_star.filled {
	color: var(--pink-action, #e8334f);
}

.cat_filter_row .cat_filter_col .tour_search_star:hover {
	color: var(--e-global-color-48147da, #f28f9e);
}

/* Same look as the comparison overlay's own single-supplement checkbox
   (.tour_compare_supplement_checkbox in tour-favorites.css) - different
   class names since this is a different control on a different page, not
   shared markup, but styled to match. */
.tour_search_supplement_group {
	display: flex;
	align-items: center;
	height: 100%;
}

.tour_search_supplement_label {
	display: flex;
	align-items: center;
	gap: 7px;
	font-weight: 600;
	font-size: 13px;
	color: #3f444b;
	cursor: pointer;
}

.tour_search_supplement_checkbox {
	width: 16px;
	height: 16px;
	margin: 0;
	cursor: pointer;
	accent-color: var(--pink-action, #e8334f);
}

.cat_filter_row .cat_filter_col .filter_select_label.active svg{
	transform: rotate(180deg);
}

.cat_filter_row .cat_filter_col .filter_select_label {
	border: 1px solid #c1c1c1;
	border-radius: 0;
	cursor: pointer;
	padding: 3px 10px;
	transition: all 500ms;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.cat_filter_row .cat_filter_col .filter_select_label.active,
.cat_filter_row .cat_filter_col .filter_select_label:hover{
	background-color: #f1f1f1;
}

/* Wraps the leading icon + label text together as one flex item, so
   .filter_select_label's own justify-content:space-between (between this
   and the trailing chevron) keeps pushing just those two apart, rather than
   spreading the icon, text and chevron out to three separate positions once
   a third flex child (the icon) was added directly alongside them. */
.cat_filter_row .cat_filter_col .filter_select_label_left {
	display: flex;
	align-items: center;
	gap: 8px;
	overflow: hidden;
}

/* Same pink accent as .tour_search_daterange_icon right next to these
   dropdowns in the same row - Countries/Tour Types/Starting Points/Sights
   previously had no icon at all here, just label text, unlike the date
   field. Tour Types and Starting Points reuse the exact icons
   caguide_render_sight_tour_card() already shows for those same taxonomies
   on every tour card; Countries and Sights have no equivalent card icon to
   reuse, so use a globe and a picture/scenery glyph respectively - both from
   the same minimal line-icon family as the rest of this set. */
.cat_filter_row .cat_filter_col .filter_select_icon {
	width: 16px;
	height: 16px;
	color: var(--pink-action, #e8334f);
	flex-shrink: 0;
}


.cat_filter_row .cat_filter_col .filter_radio_select.filter_select_small.active,
.cat_filter_row .cat_filter_col .filter_multiple_select.filter_select_small.active {
	height: 105px;
}

.cat_filter_row .cat_filter_col .filter_radio_select.active,
.cat_filter_row .cat_filter_col .filter_multiple_select.active{
	height: 165px;
	padding: 5px;
	position: absolute;
	width: 100%;
	background-color: white;
	z-index: 2;
	border-left: 1px solid #c1c1c1;
	border-right: 1px solid #c1c1c1;
	border-bottom: 1px solid #c1c1c1;
	border-radius: 0;
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}

.cat_filter_row .cat_filter_col .filter_radio_select,
.cat_filter_row .cat_filter_col .filter_multiple_select {
	height: 0;
	border-radius: 0;
	overflow-x: hidden;
	overflow-y: scroll;
}

/* Stacked vertically, not side-by-side - this is the "Private or Group
   tours" control, now living in the narrow .cat_filter_secondary_group
   column (~260-300px) rather than a full-width row; fitting all three
   text-labelled options ("Group Tour" / "Private tour" / "Both") on one line
   there forced each label to wrap onto two lines inside a fixed 35px-tall
   row, which is the "odd shape" this replaces. */
.cat_filter_row .cat_filter_col .filter_single_select {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	margin-top: 10px;
}

.cat_filter_row .cat_filter_col .filter_radio_select::-webkit-scrollbar,
.cat_filter_row .cat_filter_col .filter_multiple_select::-webkit-scrollbar {
	width: 5px;
}

.cat_filter_row .cat_filter_col .filter_radio_select::-webkit-scrollbar-track,
.cat_filter_row .cat_filter_col .filter_multiple_select::-webkit-scrollbar-track {
	background-color: #f1f1f1;
	border-radius: 0;
}

.cat_filter_row .cat_filter_col .filter_radio_select::-webkit-scrollbar-thumb,
.cat_filter_row .cat_filter_col .filter_multiple_select::-webkit-scrollbar-thumb {
	background-color: #BFBFC0;
	border-radius: 0;
	box-shadow: 0;
}

/* Deliberately NOT the site's bold pink CTA look the plain ".button" class
   gives it by default (same one "Search Tours" etc. use) - this widget has
   no separate "Search" submit button of its own (every change here refetches
   results immediately, see collectFilterArgs()/fetchFilteredTours() in
   ajax-filter.js), so a loud red "Clear All" risked reading as THE button to
   press to search, rather than the minor, easy-to-ignore reset action it
   actually is. !important because the theme's own .button rule this also
   carries is exactly the kind of same-specificity, later-loaded style that
   otherwise wins - the same reasoning as .tour_search_daterange_input's own
   overrides above. */
.cat_filter_row .cat_filter_col button.clear_multiple_select {
	background-color: transparent !important;
	color: #6b6f72 !important;
	border: 1px solid #d8d8d8 !important;
	font-weight: 500 !important;
	box-shadow: none !important;
}

.cat_filter_row .cat_filter_col button.clear_multiple_select:hover {
	background-color: #f1f1f1 !important;
	color: #151515 !important;
	border-color: #c1c1c1 !important;
}

.cat_filter_row .cat_filter_col .filter_radio_select .filter_select_item,
.cat_filter_row .cat_filter_col .filter_multiple_select .filter_select_item {
	cursor: pointer;
	transition: all 500ms;
	border-radius: 0;
}

.cat_filter_row .cat_filter_col .filter_radio_select .filter_select_item label,
.cat_filter_row .cat_filter_col .filter_multiple_select .filter_select_item label{
	display: flex;
	align-items: center;
	cursor: pointer;
	padding: 2px 10px;
}

.cat_filter_row .cat_filter_col .filter_radio_select .filter_select_item label:hover,
.cat_filter_row .cat_filter_col .filter_multiple_select .filter_select_item label:hover{
	background-color: #f1f1f1;
}

.cat_filter_row .cat_filter_col .filter_single_select  .filter_select_item {
	cursor: pointer;
	transition: all 500ms;
	border-radius: 0;
}

.cat_filter_row .cat_filter_col .filter_single_select .filter_select_item label{
	display: flex;
	align-items: center;
	cursor: pointer;
}

.cat_filter_row .cat_filter_col .filter_radio_select .filter_select_item label span,
.cat_filter_row .cat_filter_col .filter_single_select .filter_select_item label span,
.cat_filter_row .cat_filter_col .filter_multiple_select .filter_select_item label span{
	max-width: 90%;
	margin-left: 10px;
}

.cat_filter_row .cat_filter_col .filter_radio_select .filter_select_item label input,
.cat_filter_row .cat_filter_col .filter_single_select .filter_select_item label input,
.cat_filter_row .cat_filter_col .filter_multiple_select .filter_select_item label input {
	width: 17px;
	height: 17px;
	cursor: pointer;
	position: relative;
}

.cat_filter_row .cat_filter_col .filter_radio_select .filter_select_item label input::before,
.cat_filter_row .cat_filter_col .filter_single_select .filter_select_item label input::before,
.cat_filter_row .cat_filter_col .filter_multiple_select .filter_select_item label input::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	border: 1px solid #929292;
	border-radius: 0;
}

.cat_filter_row .cat_filter_col .filter_radio_select .filter_select_item label input:checked::before,
.cat_filter_row .cat_filter_col .filter_single_select .filter_select_item label input:checked::before,
.cat_filter_row .cat_filter_col .filter_multiple_select .filter_select_item label input:checked::before {
	font-size: 12px;
	line-height: 18px;
	color: #fff;
	text-align: center;
	border-color: var(--pink-action, #e8334f);
	background-color: var(--pink-action, #e8334f);
	background-image: url(../img/checkmark-icon.svg);
	background-repeat: no-repeat;
	background-size: 10px;
	background-position-x: 2px;
	background-position-y: 3px;
}

/* line-height: !important - Elementor's own Global Fonts kit CSS
   (.elementor-kit-7 h2) sets every <h2> on the site to line-height: 1.08px
   (an absolute pixel value, almost certainly meant to be a unitless 1.08
   ratio instead - entered with the wrong unit when the site's heading font
   was changed). That collapses this h2's own box to ~1px tall while the
   glyphs still paint at their real size, so the text overlaps whatever
   sits below it - hit here (the "Create Group Announcement" popup) and in
   the homepage hero search widget below, both of which use this same
   class. Fixing the kit setting is the real fix; this protects this
   plugin's own use of the class in the meantime regardless. */
.cat_filter_row .cat_filter_col .cat_filter_title {
	margin: 0 0 5px 0;
	font-size: 16px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	line-height: 1.3 !important;
}

/* "(if available)" after Hotel Star Level - a tour with no accommodation
   options (see the '_tour_pricing' docblock) ignores this filter entirely. */
.cat_filter_row .cat_filter_col .cat_filter_title_hint {
	font-size: 12px;
	font-weight: 500;
	color: #8a8a8a;
	text-transform: none;
}

.cat_filter_row .cat_filter_col .cat_filter_result {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
	padding-bottom: 10px;
}

.cat_filter_row .cat_filter_col .cat_filter_result > div {
	cursor: pointer;
	font-size: 12px;
	line-height: 14px;
	color: white;
	font-weight: 400;
	padding: 5px 10px;
	display: flex;
	align-items: center;
	background-color: var(--pink-action, #e8334f);
	border-radius: 0;
}

.cat_filter_row .cat_filter_col .cat_filter_result > div a{
	display: inline-flex;
	margin-left: 3px;
}

.cat_filter_row .cat_filter_col .cat_filter_result > div a svg path{
	stroke: white;
}

.tour_announcements .cat_filter_row{
	align-items: flex-start;
}

/* No width override here any more beyond the Submit button below - this
   form used to force nearly every column to its own full-width row (a
   "Select Country"/"Select Tour" dropdown is a compact trigger box until
   opened, same as every other filter dropdown on the site; forcing it to
   100% just stretched that box needlessly and made the whole form scroll
   much further than it needed to), which is why it looked so much longer
   than the announcements search filter right above it despite having a very
   similar set of fields. Falling through to the generic
   .cat_filter_row .cat_filter_col rule (31%/48%/100% by breakpoint) instead
   gives it the exact same 3-per-row layout as that search filter. */
.tour_announcements .cat_filter_row .cat_filter_col:last-child{
	width: 100%;
	margin: 0;
	text-align: right;
}

.tour_announcements .cat_filter_row .cat_filter_col .announcement_date_flexible {
		display: flex;
		align-items: center;
		/* Sits directly under the date field now, in the same column, rather
		   than as its own separate column - this is the gap between them. */
		margin-top: 8px;
}

.tour_announcements .cat_filter_row .cat_filter_col .announcement_date_flexible label{
		cursor: pointer;
		margin-left: 10px;
}

.tour_announcements .cat_filter_row .cat_filter_col input[type=checkbox]{
		width: 17px;
		height: 17px;
		cursor: pointer;
		position: relative;
}

.tour_announcements .cat_filter_row .cat_filter_col input[type=checkbox]::before{
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: #fff;
		border: 1px solid #929292;
		border-radius: 0;
}

.tour_announcements .cat_filter_row .cat_filter_col input[type=checkbox]:checked::before {
		font-size: 12px;
		line-height: 18px;
		color: #fff;
		text-align: center;
		border-color: var(--pink-action, #e8334f);
		background-color: var(--pink-action, #e8334f);
		background-image: url(../img/checkmark-icon.svg);
		background-repeat: no-repeat;
		background-size: 10px;
		background-position-x: 2px;
		background-position-y: 3px;
}

.tour_announcements .cat_filter_row .cat_filter_col textarea{
	min-width: 100%;
	border: 1px solid #c1c1c1;
	border-radius: 0;
	padding: 3px 10px;
	transition: all 500ms;
	outline: none;
	max-width: 100%;
	min-height: 100px;
	max-height: 100px;
	background-color: transparent;
}

.tour_announcements .cat_filter_row .cat_filter_col input:disabled{
	background-color: #eaeaea;
}

/* Disabled state for select labels */
.tour_announcements .filter_select_label.disabled {
	opacity: 0.5 !important;
	pointer-events: none !important;
	cursor: not-allowed !important;
	background-color: #eaeaea !important;
}

.tour_announcements .filter_select_label.disabled:hover {
	background-color: #eaeaea !important;
}
.tour_announcements .cat_filter_row .cat_filter_col input{
	border: 1px solid #c1c1c1;
	border-radius: 0;
	padding: 3px 10px;
	transition: all 500ms;
	outline: none;
	width: 100%;
	max-height: 35.09px;
	background-color: transparent;
}

.tour_announcements .cat_filter_row .cat_filter_col button:hover {
	background-color: #e8334fd9;
}

.tour_announcements .cat_filter_row .cat_filter_col .filter_select_label.error,
.tour_announcements .cat_filter_row .cat_filter_col textarea.error,
.tour_announcements .cat_filter_row .cat_filter_col input.error{
	border-color: var(--pink-action, #e8334f);
	background-color: #e8334f24;
}

.tour_announcements .cat_filter_row .cat_filter_col .filter_select_label.success,
.tour_announcements .cat_filter_row .cat_filter_col textarea.success,
.tour_announcements .cat_filter_row .cat_filter_col input.success{
	border-color: green;
	background-color: transparent;
}

/* Same error/success treatment as the row above, but on the wrapper around
   the date range field rather than the input inside it - flatpickr's own
   altInput:true option hides that original input (see
   initDateRangePicker() in ajax-filter.js) and shows a separate visible
   field in its place, so a class landing on the input itself would never be
   seen. The 2px padding + matching negative margin reserves room for this
   ring without shifting the field's own position when neither class is
   present. */
.tour_announcements .tour_search_daterange_wrap {
	border: 1px solid transparent;
	border-radius: 0;
	padding: 2px;
	margin: -2px;
}

.tour_announcements .tour_search_daterange_wrap.error {
	border-color: var(--pink-action, #e8334f);
	background-color: #e8334f24;
}

.tour_announcements .tour_search_daterange_wrap.success {
	border-color: green;
	background-color: transparent;
}


.announcements_list .tour_item{
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: 0 20px;
	border: 2px solid #eeeeee;
	border-radius: 0;
}

@media only screen and (max-width: 767px){
	.announcements_list .tour_item{
		grid-template-columns: 1fr;
	}
}

.announcements_list .tour_item .tour_image {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: #eeeeee;
	border-radius: 0;
	position: relative;
}

@media only screen and (max-width: 767px){
	.announcements_list .tour_item .tour_image {
		border-radius: 0;
		height: 180px;
	}
}

.announcements_list .tour_item .tour_image::before{
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(0 0 0 / 25%);
	border-radius: 0;
}

.announcements_list .tour_item .tour_image span{
	font-size: 12px;
	line-height: 2;
	color: #000;
	font-weight: 600;
	padding: 0px 10px;
	background-color: #cacaca;
	border-radius: 0;
	margin: 10px;
	display: inline-block;
	position: relative;
}

.announcements_list .tour_item .tour_content {
	padding: 25px;
}

.announcements_list .tour_item:not(:last-child){
	margin-bottom: 20px;
}

.announcements_list .tour_item .tour_details {
	margin: 0;
	padding: 0;
	list-style: none;
}

.announcements_list .tour_item .tour_details li{
	font-size: 14px;
	color: #3f444b;
	font-weight: 600;
}

.announcements_list .tour_item .tour_title {
	color: #3f444b;
	font-size: 23px;
	font-family: var(--e-global-typography-primary-font-family), Sans-serif;
	font-weight: var(--e-global-typography-primary-font-weight);
	margin: 10px 0;
}


.announcements_list .tour_item .tour_text {
	color: #3f444b;
	font-family: var(--e-global-typography-text-font-family), Sans-serif;
	font-weight: var(--e-global-typography-text-font-weight);
}

.announcements_list .tour_item .contact_the_announcer {
	padding-top: 10px;
	padding-bottom: 11px;
	border-radius: 0;
	display: inline-block;
	margin-top: 10px;
}

@media only screen and (max-width: 767px){
	.announcements_list .tour_item .contact_the_announcer {
		width: 100%;
	}
}

.announcements_list .tour_item .contact_the_announcer:hover {
	background-color: #e8334fd9;
}

.load_more_announcements {
	text-align: center;
	margin-top: 20px;
}

.load_more_announcements .load_more_btn {
	padding-top: 10px;
	padding-bottom: 11px;
	border-radius: 0;
	display: inline-block;
}

/* Search announcements list - same styles as announcements_list */
.announcements_list_search .tour_item{
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: 0 20px;
	border: 2px solid #eeeeee;
	border-radius: 0;
}

@media only screen and (max-width: 767px){
	.announcements_list_search .tour_item{
		grid-template-columns: 1fr;
	}
}

.announcements_list_search .tour_item .tour_image {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: #eeeeee;
	border-radius: 0;
	position: relative;
}

@media only screen and (max-width: 767px){
	.announcements_list_search .tour_item .tour_image {
		border-radius: 0;
		height: 180px;
	}
}

.announcements_list_search .tour_item .tour_image::before{
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(0 0 0 / 25%);
	border-radius: 0;
}

.announcements_list_search .tour_item .tour_image span{
	font-size: 12px;
	line-height: 2;
	color: #000;
	font-weight: 600;
	padding: 0px 10px;
	background-color: #cacaca;
	border-radius: 0;
	margin: 10px;
	display: inline-block;
	position: relative;
}

.announcements_list_search .tour_item .tour_content {
	padding: 25px;
}

.announcements_list_search .tour_item:not(:last-child){
	margin-bottom: 20px;
}

.announcements_list_search .tour_item .tour_details {
	margin: 0;
	padding: 0;
	list-style: none;
}

.announcements_list_search .tour_item .tour_details li{
	font-size: 14px;
	color: #3f444b;
	font-weight: 600;
}

.announcements_list_search .tour_item .tour_title {
	color: #3f444b;
	font-size: 23px;
	font-family: var(--e-global-typography-primary-font-family), Sans-serif;
	font-weight: var(--e-global-typography-primary-font-weight);
	margin: 10px 0;
}

.announcements_list_search .tour_item .tour_text {
	color: #3f444b;
	font-family: var(--e-global-typography-text-font-family), Sans-serif;
	font-weight: var(--e-global-typography-text-font-weight);
}

.announcements_list_search .tour_item .contact_the_announcer {
	padding-top: 10px;
	padding-bottom: 11px;
	border-radius: 0;
	display: inline-block;
	margin-top: 10px;
}

@media only screen and (max-width: 767px){
	.announcements_list_search .tour_item .contact_the_announcer {
		width: 100%;
	}
}

.announcements_list_search .tour_item .contact_the_announcer:hover {
	background-color: #e8334fd9;
}

.load_more_announcements_search {
	text-align: center;
	margin-top: 20px;
}

.load_more_announcements_search .load_more_search_btn {
	padding-top: 10px;
	padding-bottom: 11px;
	border-radius: 0;
	display: inline-block;
}

.load_more_announcements_search .load_more_search_btn:hover {
	background-color: #e8334fd9;
}

.load_more_announcements .load_more_btn:hover {
	background-color: #e8334fd9;
}

/* Popup Styles */
.announcement_popup_wrap.show{
	display: flex;
}

.announcement_popup_wrap {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .8);
	z-index: 99999999999;
	display: none;
	align-items: center;
	justify-content: center;
}

.announcement_popup_wrap .announcement_popup {
	background-color: #fff;
	padding: 20px;
	border-radius: 0;
	max-width: 400px;
}

.announcement_popup_wrap .announcement_popup .announcement_popup_header {
	display: flex;
	justify-content: flex-end;
}

.announcement_popup_wrap .announcement_popup .announcement_popup_header .close_popup_form {
	outline: none;
	width: 18px;
	height: 18px;
	display: block;
}

.announcement_popup_wrap .announcement_popup .announcement_popup_header .close_popup_form svg{
	width: 100%;
	height: 100%;
	transition: all 500ms;
}

.announcement_popup_wrap .announcement_popup .announcement_popup_header .close_popup_form svg:hover{
	fill: var(--pink-action, #e8334f);
}

.announcement_popup_wrap .announcement_popup .announcement_popup_form_item:not(:last-child){
	margin-bottom: 15px;
}

.announcement_popup_wrap .announcement_popup .announcement_popup_form_item label{
	display: block;
}

.announcement_popup_wrap .announcement_popup .announcement_popup_form_item label span{
	color: var(--pink-action, #e8334f);
}

.announcement_popup_wrap .announcement_popup .announcement_popup_form_item input{
	width: 100%;
	max-height: 36px;
	outline: none;
	border: 1px dotted #cccccc!important;
	transition: all 500ms;
}

.announcement_popup_wrap .announcement_popup .announcement_popup_form_item input:focus{
	border-color: #000000!important;
}

.announcement_popup_wrap .announcement_popup .announcement_popup_form_item textarea{
	width: 100%;
	max-height: 100px;
	outline: none;
	border: 1px dotted #cccccc!important;
	transition: all 500ms;
}

.announcement_popup_wrap .announcement_popup .announcement_popup_form_item textarea:focus{
	border-color: #000000!important;
}

.announcement_popup_wrap .announcement_popup .announcement_popup_form_item button{
	width: 100%;
	max-height: 36px;
	padding: 10px 30px;
	border-radius: 0;
	cursor: pointer;
}

.announcement_popup_wrap .announcement_popup .announcement_popup_form_item button:hover {
	background-color: #e8334fd9;
}

/* "Create Group Announcement" overlay (Tour_Announcements_Form_Widget) - same
   dark-backdrop/centred-panel mechanism as .announcement_popup_wrap just
   above, but its own class names throughout: that one is the much smaller
   "contact this announcer" popup on a different widget (Tour_Announcements_
   Widget/Tour_Announcements_Search_Widget), which can be on the same page as
   this one (e.g. the "Find or Form a Group to Join" page), and both widgets'
   JS uses unscoped selectors like $('.announcement_popup_wrap') - sharing a
   class name between two independent popups would cross-wire them. This
   panel is also deliberately much wider than that one, to fit the form's own
   3-per-row .cat_filter_row grid instead of squeezing it into a 400px box. */
.create_announcement_popup_wrap.show {
	display: flex;
}

.create_announcement_popup_wrap {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .8);
	z-index: 99999999999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
	/* width:100% resolves against the viewport (fixed positioning), so
	   without this the 20px padding on each side adds 40px on top of that
	   100% instead of being taken out of it - overflowing past the edge of
	   the viewport on a narrow screen and, with justify-content:center,
	   pushing the panel inside off-centre. */
	box-sizing: border-box;
}

.create_announcement_popup_wrap .create_announcement_popup {
	background-color: #fff;
	padding: 24px;
	border-radius: 0;
	width: 100%;
	max-width: 980px;
	max-height: 90vh;
	overflow-y: auto;
	/* Without this, the 24px padding above adds to the 100% width instead of
	   being taken out of it, overflowing past the edge of the dark backdrop
	   on a narrow viewport - not guaranteed already handled by a global reset
	   outside this plugin's own CSS. */
	box-sizing: border-box;
}

.create_announcement_popup_wrap .create_announcement_popup_header {
	display: flex;
	justify-content: flex-end;
}

.create_announcement_popup_wrap .close_create_announcement_popup {
	outline: none;
	width: 22px;
	height: 22px;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
}

.create_announcement_popup_wrap .close_create_announcement_popup svg {
	width: 100%;
	height: 100%;
	transition: all 500ms;
}

.create_announcement_popup_wrap .close_create_announcement_popup svg:hover {
	fill: var(--pink-action, #e8334f);
}

.create_announcement_popup_wrap .tour_announcements {
	margin-bottom: 0;
}

@media (max-width: 768px) {
	.create_announcement_popup_wrap .create_announcement_popup {
		padding: 16px;
		max-height: 95vh;
	}
}

/* Tour search input styles */
.tour_search_input_wrapper {
	padding: 5px;
	border-bottom: 1px solid #e1e1e1;
	position: sticky;
	top: 0;
	background-color: #fff;
	z-index: 10;
}

.tour_search_input {
	width: 100%;
	padding: 5px 10px;
	border: 1px solid #c1c1c1;
	border-radius: 0;
	outline: none;
	font-size: 14px;
	transition: all 500ms;
	box-sizing: border-box;
}

.tour_search_input:focus {
	border-color: #151515;
	background-color: #f1f1f1;
}

.filter_radio_select .filter_select_item {
	display: block;
}

.filter_radio_select .filter_select_item[style*="display: none"],
.filter_multiple_select .filter_select_item[style*="display: none"] {
	display: none !important;
}

/* ===== Hero Tour Search Widget - v4 redesign =====
   Was a dark semi-transparent panel with each field as its own bordered white
   pill (icon + text + chevron) and a 10-dot participants picker; replaced
   with one continuous opaque white bar - label caption above, plain value +
   chevron below, no per-field borders/icons - with the pink "Search tours"
   button as its own block flush against the bar's own right/bottom edge
   (align-items: stretch on the row is what lets the button's pink fill match
   the row's height exactly without a separate height number to keep in sync).
   Sits in normal flow (not pinned/absolute), same as before, so it still
   coexists cleanly under a vertically-centered title in the same Elementor
   container instead of floating over it. */
.hero_tour_search {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	z-index: 5;
}

.hero_tour_search .cat_filter_row {
	margin-bottom: 0;
	align-items: stretch;
	flex-wrap: nowrap;
	gap: 0;
	background-color: #fff;
}

/* min-width: 0 - overrides the flex item default of "min-width: auto", which
   otherwise refuses to shrink a column below its OWN content's natural
   width. Without this, picking a longer/shorter country selection (or a
   different date range) changes this column's own minimum content size,
   which nudges every other column's rendered width too, since they're all
   sharing the same flex row - confirmed live as exactly the reported "the
   search bar's size changes when selecting countries". The value text itself
   (.filter_select_label_left span / .tour_search_daterange_input below) gets
   a matching overflow:hidden/ellipsis, so this now genuinely caps that
   content rather than just letting it clip invisibly. */
.hero_tour_search .cat_filter_col {
	width: auto;
	min-width: 0;
	flex: 1 1 220px;
	margin-bottom: 0 !important;
	margin-top: 0 !important;
	padding: 16px 28px;
	box-sizing: border-box;
	/* Per the design spec ("fields are divided by 1px #e6ddd0") - missed on
	   the first pass, which left the three fields' only separation as
	   whitespace. Not on the button column (see the ":not" below) - that one
	   is already visually set apart by its own solid pink fill. */
	border-right: 1px solid var(--border, #e6ddd0);
}

.hero_tour_search .cat_filter_col.hero_search_btn_col {
	border-right: none;
}

/* Small muted caption ("Countries" / "When are you travelling?" / "Travellers"),
   not the base rule's bold 16px Montserrat heading look - this three-field bar
   reads as one compact control, not a page section with real subheadings. */
.hero_tour_search .cat_filter_title {
	margin: 0 0 6px;
	font-family: "Noto Sans", sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--muted, #6f6458);
}

/* The Countries/Dates fields' shared "value text + chevron" look - stripped
   of the base rule's border/shadow/background box (was a distinct pill inside
   the panel; now just plain text sitting directly on the bar's own white). */
.hero_tour_search .filter_select_label {
	height: auto;
	border: none;
	box-shadow: none;
	background-color: transparent;
	padding: 0;
	min-width: 0;
}

.hero_tour_search .filter_select_label_left {
	min-width: 0;
}

.hero_tour_search .filter_select_label.active,
.hero_tour_search .filter_select_label:hover {
	background-color: transparent;
}

.hero_tour_search .filter_select_label_left span,
.hero_tour_search .tour_search_daterange_input {
	font-family: "Noto Sans", sans-serif;
	font-size: 17px;
	font-weight: 500;
	color: var(--ink, #2b2420);
	/* Truncates with an ellipsis instead of ever growing this field past its
	   own column width - see the "min-width: 0" comment on
	   .hero_tour_search .cat_filter_col above for the bug this (together with
	   that) fixes: a longer/shorter selection here used to change this
	   column's own minimum width, nudging the whole row. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: block;
	min-width: 0;
}

.hero_search_chevron {
	flex-shrink: 0;
	pointer-events: none;
}

.hero_tour_search .hero_dates_col {
	flex: 1 1 220px;
}

.hero_tour_search .tour_search_daterange_wrap {
	max-width: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Same "plain text, no box" treatment as .filter_select_label above - this is
   a real <input>, so every property needs !important to beat the theme's own
   generic input[type=text] styling (border/shadow/background/height), the
   same fight .tour_search_daterange_input already documents on its base rule. */
.hero_tour_search .tour_search_daterange_input {
	height: auto !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background-color: transparent !important;
	box-sizing: border-box !important;
	padding: 0 !important;
	width: auto;
	flex: 1 1 auto;
	min-width: 0;
}

.hero_tour_search .tour_search_daterange_input::placeholder {
	color: var(--ink, #2b2420) !important;
	opacity: 1 !important;
}

.hero_tour_search .cat_filter_col.hero_search_btn_col {
	flex: 0 0 auto;
	padding: 0;
	display: flex;
}

/* Override Elementor's default button-widget styling with the same square
   pink CTA look used elsewhere on the site (e.g. the Sight Tours widget's
   button). !important on border-radius/border too, not just background-
   color/color - this is a real Elementor Button widget, and Elementor's own
   global "Theme Style > Buttons" kit CSS (an inline `body .elementor-button
   ...` rule, one specificity point ahead of the plain two-class selector
   below since it adds the `body` element) sets border-radius: 30px there,
   confirmed live - without !important that rounds this corner back regardless
   of what this rule says. Height is no longer a fixed number to keep in sync
   with the fields next to it - align-self: stretch (the row is
   align-items: stretch) fills whatever height the two-line fields settle on. */
.hero_tour_search .hero_search_tours_btn {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	white-space: nowrap;
	cursor: pointer;
	font-family: "Noto Sans", sans-serif;
	font-size: 16px;
	font-weight: 600;
	background-color: var(--pink-action, #e8334f) !important;
	color: #fff !important;
	height: auto !important;
	box-sizing: border-box !important;
	padding: 0 48px !important;
	border-radius: 0 !important;
	border: none !important;
	/* !important - same sitewide "underline links" fight as
	   .tour_hero_cta_btn (tour-hero-widget.css). */
	text-decoration: none !important;
	transition: background-color 200ms;
}

.hero_tour_search .hero_search_tours_btn:hover {
	background-color: #e8334fd9 !important;
	color: #fff !important;
}

.hero_tour_search .hero_search_tours_btn .elementor-button-text {
	color: inherit;
}

/* Travellers +/- stepper - replaces the old 10-dot picker (still the same
   .hero_pax_selector[data-value] the click handler in ajax-filter.js reads
   and .hero_search_tours_btn's own click handler builds people_count from,
   just a plain increment/decrement pair instead of filling in dots). */
.hero_pax_row {
	display: flex;
	align-items: center;
}

.hero_pax_selector {
	display: flex;
	align-items: center;
	gap: 12px;
}

.hero_tour_search .hero_pax_col {
	flex: 0 0 auto;
}

.hero_pax_step {
	width: 32px;
	height: 32px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border, #c1c1c1);
	border-radius: 0;
	background-color: #fff;
	color: var(--ink, #2b2420);
	font-family: "Noto Sans", sans-serif;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: border-color 150ms, color 150ms;
}

.hero_pax_step:hover:not(:disabled) {
	border-color: var(--pink-action, #e8334f);
	color: var(--pink-action, #e8334f);
}

.hero_pax_step:disabled {
	border-color: #e6ddd0;
	color: #c7bdad;
	cursor: default;
}

.hero_pax_value {
	min-width: 20px;
	font-family: "Noto Sans", sans-serif;
	font-size: 17px;
	font-weight: 600;
	color: var(--ink, #2b2420);
	text-align: center;
}

@media only screen and (max-width: 767px) {
	.hero_tour_search .cat_filter_row {
		flex-direction: column;
	}

	.hero_tour_search .cat_filter_col,
	.hero_tour_search .cat_filter_col.hero_search_btn_col {
		width: 100%;
		flex-basis: auto;
		margin-top: 0 !important;
		/* The desktop row's own right-hand divider (see the base rule above)
		   makes no sense once columns stack full-width instead of sitting
		   side by side - the hairline below replaces it here. */
		border-right: none;
	}

	/* A hairline between each stacked field, like the reference mockup - but
	   not after Travellers, which butts straight up against the solid-colour
	   button below it with no divider needed. */
	.hero_tour_search .cat_filter_col:not(.hero_pax_col):not(.hero_search_btn_col) {
		border-bottom: 1px solid var(--border, #e3d9ca);
	}

	.hero_tour_search .hero_search_tours_btn {
		width: 100%;
		height: 60px !important;
	}
}

/* Tours with no featured image fall back to the site logo - show it uncropped
   (contain, not cover) so the whole logo stays visible instead of being cut off,
   and drop the photo-darkening overlay since there's no photo to darken. */
.ctp_item .ctp_image.ctp_image_fallback {
	background-size: contain;
	background-color: #ffffff;
}

.ctp_item .ctp_image.ctp_image_fallback::before {
	background-color: transparent;
}

/* Sight Tours widget - reuses .tour_compare_grid/.tour_compare_col (defined in
   tour-favorites.css, including the 1/4-width column cap) for the card look,
   just needs section spacing + the CTA. */
.sight_tours_section .tour_compare_grid {
	margin-bottom: 24px;
}

.sight_tours_cta {
	text-align: center;
}

/* !important on color/background - this <a> was losing to the theme's own
   global link-color rule, same fight as .tour_hero_cta_btn (see
   tour-hero-widget.css). */
.sight_tours_see_all_btn {
	display: inline-block;
	font-size: 14px;
	font-family: "Noto Sans", sans-serif;
	font-weight: 600;
	/* !important - same sitewide line-height shrink fight as
	   .tour_hero_cta_btn (tour-hero-widget.css). */
	line-height: 1 !important;
	background-color: var(--pink-action, #e8334f) !important;
	color: #fff !important;
	padding: 14px 36px;
	border-radius: 0;
	/* !important - same sitewide "underline links" fight as
	   .tour_hero_cta_btn (tour-hero-widget.css). */
	text-decoration: none !important;
	transition: background-color 200ms;
	/* A real <a href> is natively draggable in every browser - see
	   .tour_compare_link in tour-favorites.css for the full reasoning. */
	-webkit-user-drag: none;
	user-drag: none;
}

.sight_tours_see_all_btn:hover {
	background-color: #e8334fd9 !important;
	color: #fff !important;
}

/* Post Travel Companion Button widget - same pink pill CTA look */
.post_companion_widget_wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.post_companion_btn {
	display: inline-block;
	font-size: 14px;
	font-family: "Noto Sans", sans-serif;
	font-weight: 600;
	/* !important - same sitewide line-height shrink fight as
	   .tour_hero_cta_btn (tour-hero-widget.css). */
	line-height: 1 !important;
	background-color: var(--pink-action, #e8334f);
	color: #fff;
	padding: 14px 36px;
	border-radius: 0;
	/* !important - same sitewide "underline links" fight as
	   .tour_hero_cta_btn (tour-hero-widget.css). */
	text-decoration: none !important;
	transition: background-color 200ms;
}

.post_companion_btn:hover {
	background-color: #e8334fd9;
	color: #fff;
}

/* Now a <button>, not an <a href> (opens the popup below instead of
   navigating away) - resets the default button chrome the anchor never had. */
button.post_companion_btn {
	border: none;
	cursor: pointer;
}

/* Eye-catcher badge for existing group requests on this exact tour - outlined
   rather than filled, same "secondary to the main pink CTA" pattern as
   .tour_dates_contact_btn (tour-info-widgets.css), so it reads as "worth a
   look" without competing with the button that actually starts a request. */
.post_companion_existing_badge {
	display: inline-flex;
	align-items: center;
	font-size: 13px;
	font-family: "Noto Sans", sans-serif;
	font-weight: 600;
	background-color: #fff4f6;
	color: var(--e-global-color-d979145, #ba152e);
	border: 1.5px solid var(--e-global-color-48147da, #f28f9e);
	padding: 12.5px 20px;
	border-radius: 0;
	cursor: pointer;
	transition: background-color 200ms, border-color 200ms;
}

.post_companion_existing_badge:hover,
.post_companion_existing_badge:focus-visible {
	background-color: #fce5e9;
	border-color: var(--pink-action, #e8334f);
}

.post_companion_browse_link {
	font-size: 13px;
	font-family: "Noto Sans", sans-serif;
	color: #7a7a7a;
	text-decoration: underline;
}

.post_companion_browse_link:hover {
	color: var(--pink-action, #e8334f);
}

.post_companion_popup_title {
	margin-top: 0;
}

/* Hidden radio the "create group request" popup carries when opened from a
   tour page (Post_Companion_Button_Widget) instead of the full tour picker
   Tour_Announcements_Form_Widget's own copy of this popup uses - still a
   real, checked radio (not a hidden input) since the submit handler in
   ajax-filter.js reads it via ':checked'. */
.post_companion_hidden_tour_field {
	display: none;
}

/* "Existing group requests for this tour" overlay - same fixed backdrop
   pattern as .create_announcement_popup_wrap just above, its own class
   names since it's a different popup that can be open independently. */
.tour_group_requests_popup_wrap.show {
	display: flex;
}

.tour_group_requests_popup_wrap {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .8);
	z-index: 99999999999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
}

.tour_group_requests_popup_wrap .tour_group_requests_popup {
	background-color: #fff;
	padding: 24px;
	border-radius: 0;
	width: 100%;
	max-width: 980px;
	max-height: 90vh;
	overflow-y: auto;
	box-sizing: border-box;
}

.tour_group_requests_popup_wrap .tour_group_requests_popup_header {
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
}

.tour_group_requests_popup_wrap .tour_group_requests_popup_header .cat_filter_title {
	margin: 0;
}

.tour_group_requests_popup_wrap .close_tour_group_requests_popup {
	outline: none;
	width: 22px;
	height: 22px;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	flex-shrink: 0;
}

.tour_group_requests_popup_wrap .close_tour_group_requests_popup svg {
	width: 100%;
	height: 100%;
	transition: all 500ms;
}

.tour_group_requests_popup_wrap .close_tour_group_requests_popup svg:hover {
	fill: var(--pink-action, #e8334f);
}

@media (max-width: 768px) {
	.tour_group_requests_popup_wrap .tour_group_requests_popup {
		padding: 16px;
		max-height: 95vh;
	}
}