.tpo-root {
	box-sizing: border-box;
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
	padding: 0;
	font-family: system-ui, sans-serif;
	overflow-wrap: anywhere;
}

/* Tour Grid / shortcode grid, Popular Countries, Tour Search, Promo
   Banners, and Travel Articles: all are placed directly inside an
   Elementor column/container that already controls the available width,
   so the generic 1300px cap above (the site's Elementor content width) (meant for contexts with no such
   wrapper) would otherwise leave unwanted side gaps. */
.tpo-root.tpo-grid-wrap,
.tpo-root.tpo-countries,
.tpo-root.tpo-search,
.tpo-root.tpo-promo-banners-wrap,
.tpo-root.tpo-articles,
.tpo-root.tpo-testimonials,
.tpo-root.tpo-gallery,
.tpo-root.tpo-site-header,
.tpo-root.tpo-floating,
.tpo-root.tpo-footer-wrap,
.tpo-root.tpo-product-detail-wrap,
.tpo-root.tpo-booking-summary,
.tpo-root.tpo-booking,
.tpo-root.tpo-thanks,
.tpo-root.tpo-bkerr,
.tpo-root.tpo-sechead-wrap,
.tpo-root.tpo-art,
.tpo-root.tpo-pt,
.tpo-root.tpo-ct {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	font-family: var(--e-global-typography-text-font-family), sans-serif;
}

.tpo-root *,
.tpo-root *::before,
.tpo-root *::after {
	box-sizing: border-box;
}

/* Hello Elementor reset.css applies `button:hover, button:focus { background-color: #c36; color: #fff }`
   to every <button> on the site. Neutralise inside all Tour Optimization widgets; each
   module restores its own hover/focus colours on named controls (higher-specificity rules). */
/* :where() keeps the exclusions at zero specificity (0,3,1): still beats
   Hello's button:hover (0,1,1) but loses to every Style → Hover control
   ({{WRAPPER}} … :hover = 0,5,0). Plain :not() chains had grown to 0,6,1 and
   silently swallowed Hover background controls (search submit, info tabs). */
.elementor-widget .tpo-root button:where(:not(.tpo-pd3__share-btn):not(.tpo-pd3__more):not(.tpo-card__tab):not(.tpo-fa2__toggle)):hover,
.elementor-widget .tpo-root button:where(:not(.tpo-pd3__share-btn):not(.tpo-pd3__more):not(.tpo-card__tab):not(.tpo-fa2__toggle)):focus {
	background-color: transparent;
	color: inherit;
	border-color: inherit;
}

/* —— Shared UI pieces (Support\Ui) — same look in every widget. Low
   specificity on purpose: each widget's Style controls ({{WRAPPER}} …) and
   its legacy classes still override. —— */

.tpo-stars {
	display: inline-flex;
	align-items: center;
	gap: 1px;
	line-height: 1;
	white-space: nowrap;
}

.tpo-stars__star.is-on {
	color: var(--e-global-color-accent, #f59e0b);
}

.tpo-stars__star.is-off,
.tpo-stars__star.is-none {
	color: color-mix(in srgb, var(--e-global-color-text, #64748b) 22%, #fff);
}

.tpo-airline {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	max-width: 100%;
	line-height: 1.2;
}

.tpo-airline__logo {
	display: block;
	flex: none;
	height: 22px;
	width: auto;
	max-width: 120px;
	object-fit: contain;
}

.tpo-airline__name {
	min-width: 0;
	font-weight: 600;
	color: inherit;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tpo-airline__logo + .tpo-airline__name {
	align-self: stretch;
	display: inline-flex;
	align-items: center;
	padding-left: 8px;
	border-left: 1px solid color-mix(in srgb, var(--e-global-color-text, #64748b) 22%, transparent);
}

.tpo-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.5rem;
	margin: 0 0 1rem;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: color-mix(in srgb, var(--e-global-color-text, #334155) 62%, transparent);
}

.tpo-breadcrumb__link,
.tpo-breadcrumb__text,
.tpo-breadcrumb__current {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
}

.tpo-breadcrumb__link {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}

.tpo-breadcrumb__link:hover,
.tpo-breadcrumb__link:focus-visible {
	color: var(--e-global-color-primary, #2563eb);
}

/* Touch: grow the tap area to ≥44px with an invisible layer — no layout change.
   Shared by every page that uses Ui::breadcrumb / SectionHeader. */
@media (pointer: coarse) {
	/* z-index: the next block (page head) must not paint over the tap layer. */
	.tpo-breadcrumb__link,
	.tpo-root .tpo-sechead__link {
		position: relative;
		z-index: 1;
	}
	.tpo-breadcrumb__link::after {
		content: "";
		position: absolute;
		inset: -13px -6px;
	}
	.tpo-root .tpo-sechead__link::after {
		content: "";
		position: absolute;
		inset: -4px -2px;
	}
}

.tpo-breadcrumb__current {
	font-weight: 700;
	color: var(--e-global-color-text, inherit);
}

.tpo-breadcrumb__sep {
	opacity: 0.4;
	user-select: none;
}

.tpo-breadcrumb svg {
	width: 14px;
	height: 14px;
	flex: none;
}

/* Microthemer forces links to width:100% / padding-top:10px at ≤390px. */
.tpo-root .tpo-breadcrumb a,
.tpo-root .tpo-breadcrumb span {
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	margin-left: 0 !important;
	padding-top: 0 !important;
}

.tpo-section-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
}

.tpo-section-head__badge {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: color-mix(in srgb, var(--e-global-color-primary, #2563eb) 7%, #fff);
	color: var(--e-global-color-primary, #2563eb);
	font-size: 0.875rem;
	font-weight: 700;
}

/* Step number variant (booking steps): solid accent square. */
.tpo-section-head__badge--num {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: var(--e-global-color-primary, #2563eb);
	color: #fff;
	font-size: 0.8125rem;
}

.tpo-section-head__text {
	min-width: 0;
}

.tpo-section-head__title {
	margin: 0;
	font-family: var(--e-global-typography-primary-font-family, inherit), sans-serif;
	font-size: 1.125rem;
	font-weight: var(--e-global-typography-primary-font-weight, 700);
	line-height: 1.35;
	color: var(--e-global-color-text, inherit);
}

.tpo-section-head__sub {
	margin: 2px 0 0;
	font-size: 0.8125rem;
	color: color-mix(in srgb, var(--e-global-color-text, #334155) 62%, transparent);
}

/* Shared tabs (Ui::tabs + tpo-ui.js): hidden panels stay hidden whatever
   display the widget CSS gives panels. Look comes from each widget's
   legacy classes + Style controls. */
.tpo-tabs__panel[hidden] {
	display: none !important;
}

.tpo-tabs__tab {
	cursor: pointer;
	font-family: inherit;
}

.tpo-copy {
	cursor: pointer;
	font-family: inherit;
}

/* Shared sort form + pager (Ui::sort_form / Ui::pager). */
.tpo-sort {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.tpo-sort__label {
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
}

.tpo-sort__control {
	position: relative;
	display: inline-flex;
}

.tpo-pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
}

.tpo-pager__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid color-mix(in srgb, var(--e-global-color-text, #64748b) 14%, transparent);
	border-radius: 12px;
	background: #fff;
	color: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
}

.tpo-pager__link:hover {
	border-color: var(--e-global-color-primary, #2563eb);
	color: var(--e-global-color-primary, #2563eb);
}

.tpo-pager__link.is-current,
.tpo-pager__link[aria-current="page"] {
	border-color: var(--e-global-color-primary, #2563eb);
	background: var(--e-global-color-primary, #2563eb);
	color: #fff;
}

.tpo-pager__link--gap {
	border: 0;
	background: none;
	min-width: 20px;
	padding: 0;
}

.tpo-empty-state {
	margin: 0;
	padding: 32px 20px;
	border: 1px dashed color-mix(in srgb, var(--e-global-color-text, #64748b) 22%, transparent);
	border-radius: 14px;
	background: #fff;
	text-align: center;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: color-mix(in srgb, var(--e-global-color-text, #334155) 62%, transparent);
}

/* —— Shared widget header (Support\SectionHeader) —— */
/* Editor/theme heading styles (a boxed, shadowed h2 seen only in the
   Elementor editor) must not leak into the shared header. The box itself
   stays styleable via Style → Header — Box ({{WRAPPER}} selectors win). */
.tpo-root .tpo-sechead {
	background: none;
	box-shadow: none;
	border: 0;
}
.tpo-root .tpo-sechead .tpo-sechead__title {
	background: none !important;
	box-shadow: none !important;
	border: 0 !important;
	padding: 0;
}
.tpo-sechead {
	--tpo-sechead-align: center;
	--tpo-sechead-justify: center;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: var(--tpo-sechead-justify);
	gap: 12px 24px;
	margin: 0 0 24px;
	text-align: var(--tpo-sechead-align);
	transition: background-color 0.3s ease, border-color 0.3s ease;
}
.tpo-sechead.has-link {
	justify-content: space-between;
}
.tpo-sechead__main {
	display: flex;
	flex-direction: column;
	align-items: var(--tpo-sechead-justify);
	min-width: 0;
}
.tpo-sechead.has-link .tpo-sechead__main {
	flex: 1 1 280px;
}
.tpo-sechead__title-row {
	display: flex;
	flex-direction: var(--tpo-sechead-dir, row);
	align-items: var(--tpo-sechead-row-align, center);
	justify-content: var(--tpo-sechead-justify);
	gap: 14px;
	min-width: 0;
}
/* Icon position defaults from the desktop class; the responsive control
   overrides these custom properties per device on the same element. */
.tpo-sechead--icon-top {
	--tpo-sechead-dir: column;
	--tpo-sechead-row-align: var(--tpo-sechead-justify, center);
}
.tpo-sechead--icon-top .tpo-sechead__title-row {
	gap: 10px;
}
/* Icon after the title: moved by order, not row-reverse, so left/right
   header alignment keeps working; the markup order stays unchanged. */
.tpo-sechead--icon-right {
	--tpo-sechead-icon-order: 1;
}
.tpo-sechead__title-row > .tpo-sechead__icon {
	order: var(--tpo-sechead-icon-order, 0);
}
.tpo-sechead__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	/* Glyph 20px → 24px inside a soft round badge (≈48px → 58px). Icon
	   size / Box size / colors in "Header — Icon" override all of this. */
	/* Fixed badge (≈48px → 58px) that only grows to 1.4× a large custom
	   glyph, so an old 50px icon setting does not blow the circle up. */
	width: max(clamp(3rem, 2.75rem + 0.6vw, 3.625rem), 1.4em);
	height: max(clamp(3rem, 2.75rem + 0.6vw, 3.625rem), 1.4em);
	font-size: clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem);
	line-height: 1;
	border-radius: 50%;
	color: var(--e-global-color-primary, #2563eb);
	background: color-mix(in srgb, var(--e-global-color-primary, #2563eb) 12%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--e-global-color-primary, #2563eb) 18%, transparent);
	transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}
/* View (like Elementor's Icon widget): Default = bare glyph, Stacked =
   filled badge, Framed = outlined badge, Soft = tinted badge (above).
   Colors/border/background from "Header — Icon" still override these. */
.tpo-sechead--view-default .tpo-sechead__icon {
	width: auto;
	height: auto;
	font-size: clamp(1.75rem, 1.5rem + 0.6vw, 2.25rem);
	background: none;
	box-shadow: none;
}
.tpo-sechead--view-stacked .tpo-sechead__icon {
	color: #fff;
	background: var(--e-global-color-primary, #2563eb);
	box-shadow: none;
}
.tpo-sechead--view-framed .tpo-sechead__icon {
	background: none;
	box-shadow: none;
	border: 2px solid currentColor;
}
.tpo-sechead--shape-rounded .tpo-sechead__icon {
	border-radius: 14px;
}
.tpo-sechead--shape-square .tpo-sechead__icon {
	border-radius: 0;
}
.tpo-sechead--view-default .tpo-sechead__icon {
	border-radius: 0;
}
.tpo-sechead__icon svg {
	width: 1em;
	height: 1em;
}
/* Font Awesome SVGs have no fill of their own; pasted "SVG code" icons keep
   theirs (fill="none" + stroke icons would otherwise turn solid). */
.tpo-sechead__icon:not(.tpo-sechead__icon--code) svg {
	fill: currentColor;
}
.tpo-sechead__img {
	display: block;
	width: 1em;
	height: 1em;
	object-fit: contain;
}
.tpo-root .tpo-sechead__title {
	margin: 0;
	font-family: var(--e-global-typography-primary-font-family, inherit), sans-serif;
	/* 20px (mobile) → 28px (desktop) */
	font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.75rem);
	font-weight: var(--e-global-typography-primary-font-weight, 700);
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--e-global-color-text, inherit);
}
.tpo-root .tpo-sechead__desc {
	max-width: 640px;
	margin: 12px 0 0;
	font-family: inherit;
	/* 16px → 18px */
	font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
	line-height: 1.65;
	color: color-mix(in srgb, var(--e-global-color-text, #334155) 65%, transparent);
}
.tpo-root .tpo-sechead__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex: none;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--e-global-color-primary, #2563eb);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.tpo-root .tpo-sechead__eyebrow {
	display: inline-block;
	margin: 0 0 8px;
	padding: 3px 12px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--e-global-color-primary, #2563eb) 10%, transparent);
	color: var(--e-global-color-primary, #2563eb);
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.5;
}
.tpo-sechead__divider {
	display: block;
	width: 48px;
	height: 4px;
	margin-top: 16px;
	border-radius: 4px;
	background-color: var(--e-global-color-primary, #2563eb);
	/* Default gradient; a Classic colour from the panel sets the var to none. */
	background-image: var(--tpo-sechead-line-img, linear-gradient(90deg, var(--e-global-color-primary, #2563eb), var(--e-global-color-accent, #38bdf8)));
}
.tpo-sechead.has-link .tpo-sechead__link {
	padding: 7px 16px;
	border: 1px solid color-mix(in srgb, var(--e-global-color-primary, #2563eb) 30%, transparent);
	border-radius: 999px;
}
.tpo-sechead.has-link .tpo-sechead__link:hover {
	background: color-mix(in srgb, var(--e-global-color-primary, #2563eb) 8%, transparent);
}
.tpo-sechead__link svg {
	transition: transform 0.2s ease;
}
.tpo-sechead__link:hover svg {
	transform: translateX(3px);
}
@media (max-width: 767px) {
	.tpo-sechead {
		margin-bottom: 18px;
	}
	.tpo-sechead.has-link {
		flex-direction: column;
		align-items: var(--tpo-sechead-justify);
	}
	.tpo-sechead.has-link .tpo-sechead__main {
		flex-basis: auto;
		width: 100%;
	}
	.tpo-sechead__title-row {
		gap: 10px;
	}
}

/* iOS Safari zooms the page when a focused field's text is < 16px, which
   jumps the layout on every tap. Floor form fields at 16px on phones —
   this intentionally wins over a smaller mobile Typography setting. */
@media (max-width: 767px) {
	.tpo-root input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
	.tpo-root select,
	.tpo-root textarea {
		font-size: max(16px, 1em) !important;
	}
}

/* --- Shared "View all" button (Support\ViewAllButton) ---
   Printed in two slots; the responsive Position control flips
   --tpo-va-below / --tpo-va-header so each device shows one. */
.tpo-view-all-wrap {
	display: flex;
	align-items: center;
	min-width: 0;
}
.tpo-view-all-wrap--below {
	display: var(--tpo-va-below, flex);
	justify-content: center;
	margin-top: clamp(24px, 3vw, 40px);
}
.tpo-view-all-wrap--header {
	display: var(--tpo-va-header, none);
	flex: 0 0 auto;
}
.tpo-root .tpo-view-all {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: var(--tpo-va-w, auto);
	min-height: 44px;
	padding: 10px 24px;
	border: 1px solid var(--e-global-color-primary, #2563eb);
	border-radius: 999px;
	background: transparent;
	color: var(--e-global-color-primary, #2563eb);
	font-family: inherit;
	font-size: clamp(0.875rem, 0.82rem + 0.2vw, 1rem);
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.tpo-root .tpo-view-all:hover,
.tpo-root .tpo-view-all:focus-visible {
	background: var(--e-global-color-primary, #2563eb);
	color: #fff;
}
.tpo-view-all__icon {
	display: inline-flex;
	line-height: 1;
	transition: transform 0.2s ease;
}
.tpo-view-all__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}
.tpo-view-all__icon svg[stroke] {
	fill: none;
}
.tpo-view-all:hover .tpo-view-all__icon {
	transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
	.tpo-view-all:hover .tpo-view-all__icon {
		transform: none;
	}
}

/* Phones / touch screens: no image hover effects in any Tour Optimization
   widget (zoom, lift-zoom, hover CSS filters). A tap would otherwise leave
   the image stuck zoomed/filtered. The blurred cover backdrop keeps its blur. */
@media (hover: none), (max-width: 767px) {
	.tpo-root img,
	.tpo-root [class*="__img"] {
		transform: none !important;
		transition: none !important;
	}

	.tpo-root :hover > img:not([class*="-bg"]),
	.tpo-root :hover img:not([class*="-bg"]),
	.tpo-root :hover [class*="__img"] {
		filter: none !important;
	}
}