/* ===== Comparison overlay layout - split out of tour-favorites.css =====
   Loaded site-wide but non-render-blocking (media="print" swapped to "all" on
   load, see custom-elementor-widgets.php) - the overlay itself only opens on a
   click, and its hidden state stays in tour-favorites.css. */

/* Top bar (COMPARISON_WINDOW.md §4) - title/count on the left, every control
   (stepper, hotel switch, single room, currency, show-only-differences,
   share, close) in one wrapping row on the right. */
.tour_compare_topbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 18px;
	flex-shrink: 0;
	background-color: #fff;
	border-bottom: 1px solid #e6ddd0;
	padding: 18px 32px;
}

.tour_compare_topbar_title {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-shrink: 0;
}

.tour_compare_dialog_title {
	margin: 0;
	font-size: 24px;
}

.tour_compare_count {
	font-size: 13px;
	color: #7a7a7a;
}

.tour_compare_controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	row-gap: 10px;
}

.tour_compare_controls_label {
	font-size: 12px;
	font-weight: 600;
	color: #7a7a7a;
	text-transform: none;
}

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

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

.tour_compare_share_btn {
	font-size: 12px;
	font-weight: 600;
	color: var(--pink-action, #e8334f);
	background: none;
	border: 1px solid var(--pink-action, #e8334f);
	border-radius: 0;
	padding: 7px 16px;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 200ms, color 200ms;
}

.tour_compare_share_btn:hover {
	background-color: var(--pink-action, #e8334f) !important;
	color: #fff !important;
}

.tour_compare_shared_banner {
	background-color: #fdeef1;
	color: #7a2338;
	border-radius: 0;
	padding: 10px 14px;
	font-size: 13px;
	margin: 0 0 18px 0;
}

.tour_compare_close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: #f1f1f1;
	color: #3f444b;
	cursor: pointer;
	transition: background-color 200ms, color 200ms;
}

.tour_compare_close svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
	display: block;
}

.tour_compare_close:hover {
	background-color: var(--pink-action, #e8334f) !important;
	color: #fff !important;
}

.tour_compare_currency_selector {
	border: 1px solid #dcdcde;
	border-radius: 0;
	padding: 6px 10px;
	font-size: 13px;
	font-weight: 600;
	color: #3f444b;
	background-color: #fff;
	cursor: pointer;
}

.tour_compare_currency_note {
	font-size: 12px;
	color: #7a7a7a;
	margin-bottom: 4px;
}

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

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

/* Traveller stepper (COMPARISON_WINDOW.md §4, "34px −/label/+") - replaces
   the old 10-dot picker; still ".tour_compare_pax_selector[data-value]", so
   nothing else reading that attribute needed to change. */
.tour_compare_pax_selector {
	display: flex;
	align-items: center;
	gap: 0;
	border: 1px solid #d6ccbd;
	height: 34px;
}

.tour_compare_pax_minus,
.tour_compare_pax_plus {
	width: 34px;
	height: 34px;
	padding: 0;
	border: none;
	background: #fff;
	font-size: 16px;
	line-height: 1;
	color: #3f444b;
	cursor: pointer;
}

.tour_compare_pax_minus:disabled,
.tour_compare_pax_plus:disabled {
	color: #c9bda9;
	cursor: not-allowed;
}

.tour_compare_pax_value {
	min-width: 28px;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: #3f444b;
}

/* Hotel-level switch (COMPARISON_WINDOW.md §4, "3★ hotels | 4★ hotels") -
   replaces the old 1-5 star radiogroup; the pricing model only ever had two
   real tiers (caguide_accommodation_options_for_variant()), so this now
   matches the data. Hidden entirely (updateStarSwitchVisibility() in
   tour-favorites.js) when no compared tour offers 4★ at all. */
.tour_compare_star_selector {
	display: flex;
	height: 34px;
	border: 1px solid #3f444b;
}

.tour_compare_star_btn {
	padding: 0 14px;
	border: none;
	border-right: 1px solid #3f444b;
	background: #fff;
	font-size: 12px;
	font-weight: 600;
	color: #3f444b;
	cursor: pointer;
	white-space: nowrap;
	/* !important - same Astra uppercase-<button> fight as .tour_compare_bar_open
	   above ("3★ hotels" should stay sentence case, not become "3★ HOTELS"). */
	text-transform: none !important;
}

.tour_compare_star_btn:last-child {
	border-right: none;
}

.tour_compare_star_btn.is-active {
	background-color: #3f444b;
	color: #fff;
}

.tour_compare_body {
	flex: 1 1 auto;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

/* ---- Desktop: 1a full-screen table (≥ 820px) ------------------------- */

.tour_compare_table_wrap {
	flex: 1 1 auto;
	overflow: auto;
	padding: 0 32px 32px;
}

.tour_compare_table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.tour_compare_table thead th {
	position: sticky;
	top: 0;
	background-color: #f3efe8;
	border-bottom: 1px solid #3f444b;
	padding: 20px 10px 16px;
	text-align: left;
	vertical-align: top;
	z-index: 1;
}

.tour_compare_label_col {
	width: 200px;
	font-size: 13px;
	font-weight: 400;
	color: #7a7a7a;
}

.tour_compare_tour_col {
	position: relative;
}

.tour_compare_thumb {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: #ece4d6;
	background-size: cover;
	background-position: center;
	margin-bottom: 10px;
}

.tour_compare_tour_title {
	display: block;
	font-size: 19px;
	font-weight: 700;
	color: #3f444b;
	text-decoration: none !important;
	margin-bottom: 6px;
}

.tour_compare_empty_col {
	width: auto;
}

.tour_compare_add_slot {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	aspect-ratio: 16 / 9;
	border: 1px dashed #c9bda9;
	color: #7a7a7a;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none !important;
	text-align: center;
}

.tour_compare_add_plus {
	font-size: 22px;
	line-height: 1;
}

.tour_compare_group_row th {
	text-align: left;
	font-size: 22px;
	font-weight: 700;
	font-family: var(--e-global-typography-newsreader-font-family, inherit);
	padding: 28px 10px 10px;
	border-bottom: 1px solid #3f444b;
	background-color: #f3efe8;
}

.tour_compare_data_row th,
.tour_compare_data_row td {
	padding: 14px 10px;
	border-bottom: 1px solid #e3d9ca;
	vertical-align: top;
	text-align: left;
}

.tour_compare_th_label {
	font-size: 14px;
	font-weight: 400;
	color: #7a7a7a;
}

.tour_compare_data_row td {
	font-size: 14px;
	font-weight: 500;
	color: #3f444b;
}

.tour_compare_data_row td.tour_compare_price_cell {
	font-size: 18px;
	font-weight: 700;
}

.tour_compare_foot_row td {
	padding: 16px 10px 4px;
	vertical-align: top;
}

.tour_compare_foot_actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.tour_compare_tour_col .tour_compare_remove {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 26px;
	height: 26px;
	/* The × glyph - Astra uppercases/letter-spaces <button> text and pads it,
	   which is what clipped the old "Remove" label to "REMOV". */
	font-size: 17px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	min-width: 0;
	min-height: 0;
	padding: 0;
	/* !important - same Astra button-skin fight as .tour_compare_mobile_remove. */
	border: none !important;
	border-radius: 50% !important;
	background-color: rgba(255, 255, 255, 0.92) !important;
	color: var(--ink, #2b2420) !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.tour_compare_tour_col .tour_compare_remove:hover,
.tour_compare_tour_col .tour_compare_remove:focus {
	background-color: var(--pink-action, #e8334f) !important;
	color: #fff !important;
}

.tour_compare_foot_actions .tour_compare_view_btn,
.tour_compare_foot_actions .tour_compare_deposit_btn,
.tour_compare_mobile_foot_col .tour_compare_view_btn,
.tour_compare_mobile_foot_col .tour_compare_deposit_btn {
	margin-top: 0;
}

.tour_compare_mobile_wrap {
	display: none;
}

/* ---- Mobile: 1e two at a time (< 820px) ------------------------------ */

@media only screen and (max-width: 819px) {
	.tour_compare_table_wrap {
		display: none;
	}

	.tour_compare_mobile_wrap {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		overflow: hidden;
		min-height: 0;
	}

	/* One scroller, both directions: vertical through the rows, horizontal
	   through the tours (snapping per tour, two in view). The track is as wide
	   as all tour columns (--cmp-col x --cmp-count, set by sizeMobileColumns()
	   in tour-favorites.js); heads stick to the top, the footer to the bottom,
	   row labels and group headings to the left edge. */
	.tour_compare_mobile_scroller {
		flex: 1 1 auto;
		min-height: 0;
		overflow: auto;
		scroll-snap-type: x mandatory;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		/* Touch scrolling, no scrollbars - the dots show the position. */
		scrollbar-width: none;
	}

	.tour_compare_mobile_scroller::-webkit-scrollbar {
		display: none;
	}

	.tour_compare_mobile_track {
		--cmp-col: 50vw;
		--cmp-view: 100vw;
		--cmp-count: 2;
		width: calc(var(--cmp-col) * var(--cmp-count));
		min-width: 100%;
		min-height: 100%;
		display: flex;
		flex-direction: column;
	}

	.tour_compare_mobile_heads,
	.tour_compare_mobile_row_values,
	.tour_compare_mobile_footer {
		display: grid;
		grid-template-columns: repeat(var(--cmp-count), var(--cmp-col));
	}

	.tour_compare_mobile_heads {
		position: sticky;
		top: 0;
		z-index: 3;
		background-color: #fff;
		border-bottom: 1px solid #e6ddd0;
	}

	.tour_compare_mobile_head {
		display: flex;
		flex-direction: column;
		gap: 8px;
		padding: 12px 10px;
		scroll-snap-align: start;
		min-width: 0;
	}

	/* Full name, two lines max - long titles never make the columns uneven. */
	.tour_compare_mobile_name {
		display: -webkit-box !important;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden !important;
		min-height: 2.6em;
		max-height: 2.6em;
		font-size: 14px;
		font-weight: 700;
		line-height: 1.3;
		color: var(--ink, #2b2420) !important;
		text-decoration: none !important;
	}

	.tour_compare_mobile_image_wrap {
		position: relative;
	}

	.tour_compare_mobile_image {
		display: block;
		width: 100%;
		aspect-ratio: 3 / 2;
		background-color: #ece4d6;
		background-size: cover;
		background-position: center;
	}

	.tour_compare_mobile_remove {
		position: absolute;
		top: 6px;
		right: 6px;
		width: 32px;
		height: 32px;
		min-width: 0;
		min-height: 0;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none !important;
		border-radius: 50% !important;
		background-color: rgba(255, 255, 255, 0.92) !important;
		color: var(--ink, #2b2420) !important;
		font-size: 20px;
		line-height: 1;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
		cursor: pointer;
	}

	.tour_compare_mobile_remove:hover,
	.tour_compare_mobile_remove:focus {
		background-color: #fff !important;
		color: var(--pink-action, #e8334f) !important;
	}

	.tour_compare_mobile_dots {
		display: flex;
		align-items: center;
		gap: 6px;
		padding: 8px 16px;
		background-color: #fff;
		border-bottom: 1px solid #e6ddd0;
		flex-shrink: 0;
		font-size: 12px;
		color: #6f6458;
	}

	.tour_compare_mobile_dots[hidden] {
		display: none;
	}

	.tour_compare_mobile_dots_text {
		margin-right: auto;
	}

	.tour_compare_mobile_dot {
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background-color: #d6ccbd;
	}

	.tour_compare_mobile_dot.is-active {
		background-color: var(--ink, #2b2420);
	}

	.tour_compare_mobile_rows {
		flex: 1 0 auto;
		padding-bottom: 16px;
	}

	/* Labels and headings keep to the visible width, pinned left while the
	   values under them scroll with their tours. */
	.tour_compare_mobile_group_heading,
	.tour_compare_mobile_row_label,
	.tour_compare_mobile_rows > .tour_compare_empty {
		position: sticky;
		left: 0;
		width: var(--cmp-view);
		box-sizing: border-box;
		padding-left: 10px;
		padding-right: 10px;
	}

	.tour_compare_mobile_group_heading {
		font-size: 19px;
		font-weight: 700;
		font-family: var(--e-global-typography-newsreader-font-family, inherit);
		padding-top: 16px;
		padding-bottom: 8px;
		margin: 0;
	}

	.tour_compare_mobile_group_heading::after {
		content: "";
		display: block;
		border-bottom: 1px solid #3f444b;
		margin-top: 8px;
	}

	.tour_compare_mobile_row {
		border-bottom: 1px solid #e3d9ca;
		padding: 10px 0;
	}

	.tour_compare_mobile_row_label {
		font-size: 12px;
		color: #7a7a7a;
		margin-bottom: 4px;
	}

	.tour_compare_mobile_row_value {
		font-size: 13px;
		font-weight: 500;
		color: #3f444b;
		overflow-wrap: break-word;
		padding: 0 10px;
		min-width: 0;
	}

	.tour_compare_data_row td.tour_compare_price_cell,
	.tour_compare_mobile_row_value.tour_compare_price_cell {
		font-size: 16px;
		font-weight: 700;
	}

	.tour_compare_mobile_footer {
		position: sticky;
		bottom: 0;
		z-index: 3;
		margin-top: auto;
		background-color: #fff;
		border-top: 1px solid #e6ddd0;
		padding: 12px 0;
		padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	}

	.tour_compare_mobile_foot_col {
		display: flex;
		flex-direction: column;
		gap: 6px;
		padding: 0 10px;
		min-width: 0;
	}

	/* Close button pinned to the top right corner on mobile, instead of
	   wrapping somewhere into the controls row; the title leaves room for it. */
	.tour_compare_topbar {
		position: relative;
		padding: 16px;
	}

	.tour_compare_topbar_title {
		padding-right: 48px;
	}

	.tour_compare_close {
		position: absolute;
		top: 12px;
		right: 12px;
		width: 36px;
		height: 36px;
	}

	.tour_compare_dialog_title {
		font-size: 24px;
	}
}

/* Phones: the controls in three rows instead of four -
   "Prices for [− 2 +]" + Single room / hotel level + currency /
   differences + Share. */
@media only screen and (max-width: 599px) {
	.tour_compare_controls {
		flex: 1 1 100%;
		display: grid;
		grid-template-columns: auto auto 1fr;
		grid-template-areas:
			"plabel pax single"
			"stars stars cur"
			"diff diff share";
		gap: 10px;
		align-items: center;
	}

	.tour_compare_controls_label {
		grid-area: plabel;
	}

	.tour_compare_pax_selector {
		grid-area: pax;
	}

	.tour_compare_supplement_label {
		grid-area: single;
		justify-self: end;
	}

	.tour_compare_star_selector {
		grid-area: stars;
		justify-self: start;
	}

	.tour_compare_currency_selector {
		grid-area: cur;
		justify-self: end;
	}

	.tour_compare_diff_label {
		grid-area: diff;
	}

	.tour_compare_share_btn {
		grid-area: share;
		justify-self: end;
	}
}