/* ==========================================================================
   TripTradition header
   White header, mega menus and mobile drawer.

   Everything is namespaced .tt-hd* on purpose: the legacy .tt-header /
   .tt-nav / .tt-panel / .tt-burger rules in tt-core.css no longer touch this
   markup, so nothing here needs !important.

   Breakpoints
     >= 1280px       full desktop header
     1180 - 1279px   same header, tightened (no overlap)
     <= 1179px       burger + slide-in drawer
     <= 600px        search moves into the drawer
   ========================================================================== */

.tt-hd {
	--hd-h: 72px;
	--hd-ink: #172e4e;
	--hd-body: #1f3350;
	--hd-muted: #6d829c;
	--hd-soft: #8a9bb0;
	--hd-line: #e8edf3;
	--hd-tint: #f3f6fa;
	--hd-card: #12294d;
	--hd-orange: var(--tt-color-brand-orange, #ff5e00);
	--hd-orange-deep: #e65400;
	--hd-font: var(--tt-font-poppins, 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif);

	position: relative;
	z-index: 1000;
	background: #fff;
	color: var(--hd-ink);
	border-bottom: 1px solid #edf0f4;
	box-shadow: 0 2px 14px rgba(20, 43, 75, .05);
	font-family: var(--hd-font);
}

.tt-hd *,
.tt-hd *::before,
.tt-hd *::after,
.tt-hd-drawer *,
.tt-hd-drawer *::before,
.tt-hd-drawer *::after {
	box-sizing: border-box;
}

.tt-hd a,
.tt-hd-drawer a {
	text-decoration: none;
}

.tt-hd a:focus-visible,
.tt-hd button:focus-visible,
.tt-hd input:focus-visible,
.tt-hd-drawer a:focus-visible,
.tt-hd-drawer button:focus-visible,
.tt-hd-drawer summary:focus-visible {
	outline: 0px solid var(--hd-orange);
	outline-offset: 2px;
}

/* ---------- Bar ---------- */

.tt-hd__inner {
	width: min(1400px, 100% - 40px);
	height: var(--hd-h);
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 24px;
}

.tt-hd__brand {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

.tt-hd__logo {
	display: block;
	width: 215px;
	height: 48px;
	max-width: none;
	object-fit: contain;
	object-position: left center;
}

.tt-hd__nav {
	flex: 1 1 auto;
	min-width: 0;
	align-self: stretch;
	display: flex;
}

.tt-hd__list {
	flex: 1 1 auto;
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tt-hd__item {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tt-hd__link {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 44px;
	padding: 0 13px;
	border-radius: 8px;
	background: transparent;
	color: var(--hd-ink);
	font: 600 15px/1.2 var(--hd-font);
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease;
}

.tt-hd__caret {
	flex: 0 0 12px;
	width: 12px;
	height: 12px;
	color: #7c8fa6;
	transition: transform .15s ease, color .15s ease;
}

.tt-hd__item:hover > .tt-hd__link,
.tt-hd__item.is-open > .tt-hd__link,
.tt-hd__item.current-menu-item > .tt-hd__link,
.tt-hd__item.current-menu-ancestor > .tt-hd__link {
	background: var(--hd-tint);
	color: var(--hd-orange);
}

/* Kept as separate rules: an unsupported :has() must not void the list above. */
.tt-hd__item:has(:focus-visible) > .tt-hd__link {
	background: var(--hd-tint);
	color: var(--hd-orange);
}

.tt-hd__item:hover > .tt-hd__link .tt-hd__caret,
.tt-hd__item.is-open > .tt-hd__link .tt-hd__caret {
	color: var(--hd-orange);
	transform: rotate(180deg);
}

.tt-hd__item:has(:focus-visible) > .tt-hd__link .tt-hd__caret {
	color: var(--hd-orange);
	transform: rotate(180deg);
}

/* ---------- Search ---------- */

.tt-hd__search {
	flex: 0 0 206px;
	width: 206px;
	height: 42px;
	margin: 0;
	padding: 0 13px;
	display: flex;
	align-items: center;
	gap: 9px;
	background: var(--hd-tint);
	border: 1px solid transparent;
	border-radius: 8px;
	transition: background-color .15s ease, border-color .15s ease;
}

.tt-hd__search:focus-within {
	background: #fff;
	border-color: var(--hd-orange);
}

.tt-hd__search svg {
	flex: 0 0 17px;
	width: 17px;
	height: 17px;
	fill: none;
	stroke: #6c819d;
	stroke-width: 1.8;
	stroke-linecap: round;
}

.tt-hd__search input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	outline: 0;
	color: #203653;
	font: 500 13px/1.2 var(--hd-font);
	-webkit-appearance: none;
	appearance: none;
}

.tt-hd__search input::placeholder {
	color: #71839b;
	opacity: 1;
}

.tt-hd__search input::-webkit-search-cancel-button,
.tt-hd__search input::-webkit-search-decoration {
	display: none;
}

/* ---------- Burger (hidden on desktop) ---------- */

.tt-hd__toggle {
	display: none;
	position: relative;
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--hd-line);
	border-radius: 10px;
	background: #f6f8fb;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.tt-hd__toggle span {
	position: absolute;
	left: 12px;
	right: 12px;
	height: 2px;
	border-radius: 2px;
	background: var(--hd-ink);
}

.tt-hd__toggle span:nth-child(1) { top: 14px; }
.tt-hd__toggle span:nth-child(2) { top: 21px; }
.tt-hd__toggle span:nth-child(3) { top: 28px; }

/* ==========================================================================
   Mega panel
   .tt-hd-panel is a transparent wrapper (its top padding bridges the gap so
   the menu never closes while the pointer travels to it); the white card is
   .tt-hd-panel__grid.
   ========================================================================== */

.tt-hd-panel {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 20;
	max-width: calc(100vw - 24px);
	padding-top: 6px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateX(calc(-50% + var(--tt-shift, 0px)));
	transition: opacity .16s ease, visibility 0s linear .16s;
}

.tt-hd__item:hover > .tt-hd-panel,
.tt-hd__item.is-open > .tt-hd-panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

.tt-hd__item:has(:focus-visible) > .tt-hd-panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

.tt-hd-panel__grid {
	display: flex;
	align-items: stretch;
	padding: 22px;
	background: #fff;
	border: 1px solid var(--hd-line);
	border-radius: 14px;
	box-shadow: 0 18px 44px rgba(20, 43, 75, .14);
}

.tt-hd-panel__col {
	flex: 0 0 auto;
	min-width: 200px;
	padding: 0 22px;
	border-left: 1px solid var(--hd-line);
}

.tt-hd-panel__col:first-child {
	padding-left: 0;
	border-left: 0;
}

.tt-hd-panel__heading {
	margin: 0 0 8px;
	padding: 0 0 12px;
	border-bottom: 1px solid var(--hd-line);
	color: var(--hd-muted);
	font: 600 11px/1.2 var(--hd-font);
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
}

.tt-hd-panel__links {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.tt-hd-panel__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 32px;
	margin: 0 -8px;
	padding: 6px 8px;
	border-radius: 6px;
	color: var(--hd-body);
	font: 500 14px/1.3 var(--hd-font);
	white-space: nowrap;
	transition: background-color .12s ease, color .12s ease;
}

.tt-hd-panel__link:hover,
.tt-hd-panel__link:focus-visible {
	background: var(--hd-tint);
	color: var(--hd-orange);
}

.tt-hd-panel__link[aria-current="page"] {
	color: var(--hd-orange);
}

.tt-hd-panel__meta {
	color: var(--hd-soft);
	font: 400 12px/1.3 var(--hd-font);
}

/* Optional pill on a link: add class tt-badge-orange | tt-badge-green |
   tt-badge-blue to the menu item and put the label in its Description. */
.tt-hd-badge {
	padding: 2px 8px;
	border-radius: 4px;
	font: 600 11px/1.5 var(--hd-font);
}

.tt-hd-badge--orange { background: #fff1e6; color: #d9520a; }
.tt-hd-badge--green  { background: #e6f6ef; color: #0d7a55; }
.tt-hd-badge--blue   { background: #e6f1fb; color: #1769aa; }

/* ---------- Feature card ---------- */

.tt-hd-promo {
	position: relative;
	flex: 0 0 254px;
	width: 254px;
	min-height: 258px;
	margin-left: 22px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	border-radius: 12px;
	background: var(--hd-card);
	color: #fff;
}

.tt-mega-yatra .tt-hd-promo {
	background: #173a2d;
}

.tt-hd-promo__badge {
	align-self: flex-start;
	padding: 4px 8px;
	border-radius: 3px;
	background: rgba(245, 166, 35, .16);
	color: #f5a623;
	font: 600 9.5px/1.2 var(--tt-font-mono, 'JetBrains Mono', ui-monospace, monospace);
	letter-spacing: .08em;
	text-transform: uppercase;
}

.tt-hd-promo__title {
	margin: 14px 0 0;
	color: #fff;
	font: 700 21px/1.18 Georgia, 'Times New Roman', serif;
}

.tt-hd-promo__text {
	margin: 12px 0 16px;
	color: #c4d0e2;
	font: 400 12px/1.55 var(--hd-font);
}

.tt-hd-promo__foot {
	margin-top: auto;
	padding-top: 14px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	border-top: 1px solid rgba(255, 255, 255, .14);
}

.tt-hd-promo__price {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.tt-hd-promo__price-label {
	color: #9fb2cc;
	font: 400 10.5px/1.2 var(--hd-font);
}

.tt-hd-promo__price-row {
	color: #fff;
	font: 400 12px/1.2 var(--hd-font);
	white-space: nowrap;
}

.tt-hd-promo__price-row strong {
	font: 700 18px/1.2 var(--hd-font);
}

.tt-hd-promo__unit {
	margin-left: 3px;
	color: #9fb2cc;
}

.tt-hd-promo__cta {
	flex: 0 0 auto;
	padding: 9px 14px;
	border-radius: 4px;
	background: var(--hd-orange);
	color: #fff;
	font: 700 12px/1.2 var(--hd-font);
	white-space: nowrap;
	transition: background-color .15s ease;
}

.tt-hd-promo__cta:hover,
.tt-hd-promo__cta:focus-visible {
	background: var(--hd-orange-deep);
}

/* Whole card is clickable through the CTA. */
.tt-hd-promo__cta::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 12px;
}

/* Text-link CTA */
.tt-hd-promo--link .tt-hd-promo__cta {
	padding: 0;
	background: transparent;
	text-decoration: underline;
	text-underline-offset: 4px;
	font-size: 13px;
}

.tt-hd-promo--link .tt-hd-promo__cta:hover,
.tt-hd-promo--link .tt-hd-promo__cta:focus-visible {
	background: transparent;
	color: var(--hd-orange);
}

/* Full-width button CTA */
.tt-hd-promo--block .tt-hd-promo__foot {
	padding-top: 0;
	border-top: 0;
}

.tt-hd-promo--block .tt-hd-promo__cta {
	flex: 1 1 auto;
	padding: 12px 14px;
	text-align: center;
	font-size: 13px;
}

/* ==========================================================================
   Tightened desktop: 1180 - 1279px
   ========================================================================== */

@media (max-width: 1279px) and (min-width: 1180px) {
	.tt-hd__inner { gap: 20px; }
	.tt-hd__list { gap: 0; }
	.tt-hd__link { padding: 0 10px; font-size: 14px; }
	.tt-hd__search { flex-basis: 180px; width: 180px; }
}

/* ==========================================================================
   Tablet + mobile: burger and drawer  (<= 1179px)
   ========================================================================== */

@media (max-width: 1179px) {
	.tt-hd { --hd-h: 68px; }

	.tt-hd__inner {
		width: calc(100% - 32px);
		gap: 14px;
	}

	.tt-hd__nav { display: none; }

	.tt-hd__search {
		margin-left: auto;
		flex-basis: 220px;
		width: 220px;
	}

	.tt-hd__toggle { display: block; }
}

@media (max-width: 600px) {
	.tt-hd { --hd-h: 64px; }

	.tt-hd__inner {
		width: calc(100% - 24px);
		gap: 10px;
	}

	.tt-hd__logo {
		width: 150px;
		height: 40px;
	}

	.tt-hd__search { display: none; }

	.tt-hd__toggle {
		margin-left: auto;
		flex-basis: 42px;
		width: 42px;
		height: 42px;
	}

	.tt-hd__toggle span { top: auto; }
	.tt-hd__toggle span:nth-child(1) { top: 13px; }
	.tt-hd__toggle span:nth-child(2) { top: 20px; }
	.tt-hd__toggle span:nth-child(3) { top: 27px; }
}

/* ==========================================================================
   Drawer
   ========================================================================== */

html.tt-hd-lock {
	overflow: hidden;
}

.tt-hd-drawer {
	--hd-ink: #172e4e;
	--hd-body: #1f3350;
	--hd-muted: #6d829c;
	--hd-line: #e8edf3;
	--hd-tint: #f3f6fa;
	--hd-orange: var(--tt-color-brand-orange, #ff5e00);
	--hd-font: var(--tt-font-poppins, 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif);

	position: fixed;
	inset: 0;
	z-index: 100100;
	visibility: hidden;
	pointer-events: none;
	font-family: var(--hd-font);
	transition: visibility 0s linear .25s;
}

.tt-hd-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

.tt-hd-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(13, 31, 51, .45);
	opacity: 0;
	transition: opacity .25s ease;
}

.tt-hd-drawer.is-open .tt-hd-drawer__scrim {
	opacity: 1;
}

.tt-hd-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(400px, 100%);
	display: flex;
	flex-direction: column;
	background: #fff;
	box-shadow: -18px 0 44px rgba(20, 43, 75, .18);
	transform: translateX(100%);
	transition: transform .25s ease;
}

.tt-hd-drawer.is-open .tt-hd-drawer__panel {
	transform: none;
}

.tt-hd-drawer__head {
	flex: 0 0 auto;
	height: 68px;
	padding: 0 16px 0 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--hd-line);
}

.tt-hd-drawer__logo {
	display: block;
	width: 150px;
	height: 40px;
	max-width: none;
	object-fit: contain;
	object-position: left center;
}

.tt-hd-drawer__close {
	position: relative;
	width: 42px;
	height: 42px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--hd-line);
	border-radius: 10px;
	background: #f6f8fb;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.tt-hd-drawer__close::before,
.tt-hd-drawer__close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 2px;
	margin: -1px 0 0 -9px;
	border-radius: 2px;
	background: var(--hd-ink);
	transform: rotate(45deg);
}

.tt-hd-drawer__close::after {
	transform: rotate(-45deg);
}

.tt-hd-drawer__body {
	flex: 1 1 auto;
	padding: 16px 20px 32px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

.tt-hd-drawer__search {
	display: none;
	align-items: center;
	gap: 9px;
	height: 44px;
	margin: 0 0 8px;
	padding: 0 14px;
	background: var(--hd-tint);
	border: 1px solid transparent;
	border-radius: 8px;
}

.tt-hd-drawer__search:focus-within {
	background: #fff;
	border-color: var(--hd-orange);
}

.tt-hd-drawer__search svg {
	flex: 0 0 17px;
	width: 17px;
	height: 17px;
	fill: none;
	stroke: #6c819d;
	stroke-width: 1.8;
	stroke-linecap: round;
}

.tt-hd-drawer__search input {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	outline: 0;
	color: #203653;
	font: 500 14px/1.2 var(--hd-font);
	-webkit-appearance: none;
	appearance: none;
}

.tt-hd-drawer__search input::-webkit-search-cancel-button,
.tt-hd-drawer__search input::-webkit-search-decoration {
	display: none;
}

.tt-hd-drawer__item {
	border-bottom: 1px solid var(--hd-line);
}

.tt-hd-drawer__top,
.tt-hd-drawer__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 2px;
	color: var(--hd-ink);
	font: 600 16px/1.3 var(--hd-font);
	cursor: pointer;
}

.tt-hd-drawer__top {
	border-bottom: 1px solid var(--hd-line);
}

.tt-hd-drawer__summary {
	list-style: none;
}

.tt-hd-drawer__summary::-webkit-details-marker {
	display: none;
}

.tt-hd-drawer__summary::marker {
	content: "";
}

.tt-hd-drawer__chev {
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
	color: #7c8fa6;
	transition: transform .15s ease;
}

.tt-hd-drawer__item[open] > .tt-hd-drawer__summary {
	color: var(--hd-orange);
}

.tt-hd-drawer__item[open] > .tt-hd-drawer__summary .tt-hd-drawer__chev {
	color: var(--hd-orange);
	transform: rotate(180deg);
}

.tt-hd-drawer__sub {
	padding: 0 0 12px;
}

.tt-hd-drawer__heading {
	padding: 14px 2px 6px;
	color: var(--hd-muted);
	font: 600 11px/1.2 var(--hd-font);
	letter-spacing: .08em;
	text-transform: uppercase;
}

.tt-hd-drawer__links {
	display: flex;
	flex-direction: column;
}

.tt-hd-drawer__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 2px 10px 12px;
	border-radius: 6px;
	color: var(--hd-body);
	font: 500 15px/1.35 var(--hd-font);
}

.tt-hd-drawer__link:hover,
.tt-hd-drawer__link:focus-visible,
.tt-hd-drawer__top:hover,
.tt-hd-drawer__top:focus-visible {
	color: var(--hd-orange);
}

.tt-hd-drawer__meta {
	color: #8a9bb0;
	font: 400 12px/1.3 var(--hd-font);
	text-align: right;
}

@media (max-width: 600px) {
	.tt-hd-drawer__head { height: 64px; }
	.tt-hd-drawer__search { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
	.tt-hd *,
	.tt-hd-drawer,
	.tt-hd-drawer * {
		transition-duration: 0s !important;
	}
}