/*
 * Travel Store — WP Travel Engine single trip page.
 * Loaded only on single trip pages (inc/trip-page.php), after WP Travel Engine's
 * "single-trip" stylesheet. Mobile first: base rules are for phones, then
 * min-width 768px (tablet) and min-width 1025px (desktop, WP Travel Engine's own
 * sidebar breakpoint).
 *
 * Colours and fonts are the Travel Store palette (same values and Elementor
 * Global Color names as the TS widgets, ts-base.css). Built for WP Travel Engine
 * 6.8.8; WP Travel Engine class names used here are listed in
 * docs/TECHNICAL_NOTES.md ("Trip page template"). A few rules need !important
 * only because WP Travel Engine's own rules use it (marked "WPTE !important").
 */

/* ---------- Tokens ---------- */
body.single-trip {
	--ts-sand: var(--e-global-color-ts_sand, #FBF6EE);
	--ts-cream: var(--e-global-color-ts_cream, #FFFCF6);
	--ts-terra: var(--e-global-color-ts_terracotta, #F3692A);
	--ts-terra-d: var(--e-global-color-ts_terracotta_dark, #D6521A);
	--ts-esp: var(--e-global-color-ts_espresso, #382520);
	--ts-gold: var(--e-global-color-ts_gold, #FFC300);
	--ts-tq: var(--e-global-color-ts_turquoise, #0392CC);
	--ts-oasis: var(--e-global-color-ts_oasis, #38A833);
	--ts-oasis-d: var(--e-global-color-ts_oasis_deep, #2C8828);
	--ts-line: rgba(56, 37, 32, .12);
	--ts-muted: rgba(56, 37, 32, .68);
	--ts-font-body: var(--e-global-typography-ts_body-font-family, 'Karla'), sans-serif;
	--ts-font-head: var(--e-global-typography-ts_heading-font-family, 'Bricolage Grotesque'), sans-serif;
	--ts-radius-lg: 28px;
	--ts-radius: 18px;
	--ts-gutter: 20px;

	/* WP Travel Engine's accent colour (buttons, links, date picker, booking popup). */
	--primary-color: #F3692A;
	--primary-color-rgb: 243, 105, 42;

	background: var(--ts-cream);
}

/* Astra's content box: let the trip page use the full width; the page sets its own widths. */
body.single-trip #content > .ast-container {
	display: block;
	max-width: none;
	padding: 0;
}

#ts-trip {
	color: var(--ts-esp);
	font-family: var(--ts-font-body);
	font-size: 17px;
	line-height: 1.62;
	padding-bottom: 96px; /* room for WP Travel Engine's fixed booking bar on phones and tablets */
}

#ts-trip h1,
#ts-trip h2,
#ts-trip h3,
#ts-trip h4 {
	font-family: var(--ts-font-head);
	font-weight: 700;
	letter-spacing: -.015em;
	color: var(--ts-esp);
}

#ts-trip .trip-post-content a,
#ts-trip .tab-content a {
	color: var(--ts-terra-d);
}

#ts-trip a:focus-visible,
#ts-trip button:focus-visible {
	outline: 3px solid var(--ts-tq);
	outline-offset: 2px;
}

#ts-trip .ts-trip__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 var(--ts-gutter);
}

/* ---------- Header band ---------- */
#ts-trip .ts-trip-hero {
	background: var(--ts-sand);
	border-bottom: 1px solid var(--ts-line);
	padding: 36px 0 32px;
}

#ts-trip .ts-trip-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	padding: 7px 15px;
	border-radius: 100px;
	background: rgba(243, 105, 42, .12);
	color: var(--ts-terra-d);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
}

#ts-trip .ts-trip-hero__eyebrow a {
	color: inherit;
	text-decoration: none;
}

#ts-trip .ts-trip-hero__eyebrow a:hover {
	text-decoration: underline;
}

#ts-trip .ts-trip-hero__dot {
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ts-terra);
}

/* WP Travel Engine's title part (single-trip/title.php). */
#ts-trip .ts-trip-hero .entry-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

#ts-trip .ts-trip-hero .entry-header::before,
#ts-trip .ts-trip-hero .entry-header::after {
	display: none;
}

#ts-trip .ts-trip-hero .entry-header .entry-title {
	flex: 1 0 100%;
	margin: 0 0 6px;
	padding: 0;
	font-size: clamp(2rem, 7vw, 3.4rem);
	line-height: 1.08;
	color: var(--ts-esp);
}

#ts-trip .ts-trip-hero .wte-title-duration {
	position: static;
	display: inline-flex;
	flex-direction: row;
	align-items: baseline;
	width: auto;
	height: auto;
	gap: 5px;
	margin: 0;
	padding: 7px 15px;
	border: 1px solid var(--ts-line);
	border-radius: 100px;
	background: var(--ts-cream);
	color: var(--ts-esp);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
}

#ts-trip .ts-trip-hero .wte-title-duration::before,
#ts-trip .ts-trip-hero .wte-title-duration::after {
	display: none;
}

#ts-trip .ts-trip-hero .wte-title-duration .duration,
#ts-trip .ts-trip-hero .wte-title-duration .days {
	display: inline;
	width: auto;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	text-transform: none;
}

#ts-trip .ts-trip-hero__lead {
	max-width: 62ch;
	margin: 18px 0 0;
	color: var(--ts-muted);
	font-size: 1.1rem;
}

#ts-trip .ts-trip-hero__actions {
	margin: 24px 0 0;
}

#ts-trip .ts-trip-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 26px;
	border: 2px solid transparent;
	border-radius: 100px;
	font-family: var(--ts-font-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .2s ease, transform .2s ease;
}

#ts-trip .ts-trip-btn--primary,
#ts-trip .ts-trip-btn--primary:hover,
#ts-trip .ts-trip-btn--primary:focus {
	background: var(--ts-terra);
	color: #fff;
	box-shadow: 0 10px 22px rgba(243, 105, 42, .3);
	text-decoration: none;
}

#ts-trip .ts-trip-btn--primary:hover {
	background: var(--ts-terra-d);
}

/* ---------- Breadcrumbs and gallery banner ---------- */
#ts-trip #wte-crumbs {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 var(--ts-gutter);
	color: var(--ts-muted);
	font-size: 14px;
}

#ts-trip #wte-crumbs:empty {
	display: none;
}

#ts-trip .wpte-gallery-wrapper__multi-banners {
	max-width: 1240px;
	margin: 24px auto 0;
	padding: 0 var(--ts-gutter);
}

/* WP Travel Engine makes the banner full-bleed (100vw, left: 50%, negative margins); keep it in the page width. */
#ts-trip .wpte-gallery-wrapper {
	left: auto;
	right: auto;
	width: auto;
	max-width: 100%;
	margin: 0;
	overflow: hidden;
	border-radius: var(--ts-radius);
}

#ts-trip .wte-trip-image-gal-popup-trigger {
	border-radius: 100px;
	font-family: var(--ts-font-body);
	font-weight: 700;
}

/* ---------- Main area and sidebar ---------- */
#ts-trip .trip-content-area {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 var(--ts-gutter);
}

#ts-trip .trip-content-area > .row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
	margin: 32px 0 0 !important; /* WPTE !important */
}

#ts-trip .trip-content-area > .row > .content-area,
#ts-trip .trip-content-area > .row > .widget-area {
	flex: none;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0 !important; /* WPTE !important */
}

/* Astra's boxed-article look (padding, white box) is not used on the trip page. */
#ts-trip article.trip-post {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

/* Description */
#ts-trip .trip-post-content {
	margin-bottom: 28px;
	font-size: 1.06rem;
}

#ts-trip .trip-post-content > :last-child {
	margin-bottom: 0;
}

/* ---------- Tabs ---------- */
#ts-trip .wpte-tabs-container {
	margin: 0;
}

#ts-trip .nav-tab-wrapper {
	margin: 0 0 24px;
	padding: 8px 0;
	border: 0;
	background: var(--ts-cream);
}

#ts-trip .nav-tab-wrapper .tab-inner-wrapper {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	overflow-x: auto;
	margin: 0;
	padding: 0 0 4px;
	border: 0;
	scrollbar-width: thin;
}

#ts-trip .nav-tab-wrapper .tab-anchor-wrapper {
	position: relative;
	flex: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--ts-line);
	border-radius: 100px;
	background: #fff;
	box-shadow: none;
}

#ts-trip .nav-tab-wrapper .tab-anchor-wrapper::before,
#ts-trip .nav-tab-wrapper .tab-anchor-wrapper::after {
	display: none;
}

#ts-trip .nav-tab-wrapper .tab-anchor-wrapper .nav-tab,
#ts-trip .nav-tab-wrapper .tab-anchor-wrapper > a,
#ts-trip .nav-tab-wrapper .tab-anchor-wrapper > span {
	position: static; /* so WP Travel Engine's phone accordion arrow (::after) sits at the tab's right edge */
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	border: 0;
	background: none;
	color: var(--ts-esp);
	font-family: var(--ts-font-body);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
}

#ts-trip .nav-tab-wrapper .tab-anchor-wrapper.nav-tab-active {
	border-color: var(--ts-esp);
	background: var(--ts-esp);
}

#ts-trip .nav-tab-wrapper .tab-anchor-wrapper.nav-tab-active .nav-tab,
#ts-trip .nav-tab-wrapper .tab-anchor-wrapper.nav-tab-active > a,
#ts-trip .nav-tab-wrapper .tab-anchor-wrapper.nav-tab-active > span,
#ts-trip .nav-tab-wrapper .tab-anchor-wrapper.nav-tab-active .wte-tab-title {
	color: #fff;
}

#ts-trip .nav-tab-wrapper .tab-anchor-wrapper svg,
#ts-trip .nav-tab-wrapper .tab-anchor-wrapper img {
	width: 18px;
	height: 18px;
}

/* Tab panels */
#ts-trip .tab-content .nb-configurations {
	margin: 0 0 20px;
	padding: 24px var(--ts-gutter) !important; /* WPTE !important */
	border: 1px solid var(--ts-line);
	border-radius: var(--ts-radius-lg);
	background: #fff;
}

#ts-trip .tab-content .post-data {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

#ts-trip .tab-content h2,
#ts-trip .tab-content .wpte-overview-title,
#ts-trip .tab-content .wpte-cost-tab-title,
#ts-trip .tab-content .wpte-map-title {
	margin: 0 0 16px;
	font-size: clamp(1.5rem, 4.4vw, 2rem);
	line-height: 1.15;
}

#ts-trip .tab-content h3 {
	margin: 24px 0 12px;
	font-size: 1.25rem;
	line-height: 1.25;
}

/* Highlights */
#ts-trip .wpte-trip-highlights {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#ts-trip .wpte-trip-highlights .trip-highlight {
	position: relative;
	margin: 0;
	padding: 0 0 0 30px;
}

#ts-trip .wpte-trip-highlights .trip-highlight::before {
	content: '';
	position: absolute;
	top: .5em;
	left: 4px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--ts-oasis);
	box-shadow: 0 0 0 4px rgba(56, 168, 51, .16);
}

/* Itinerary */
#ts-trip .wp-travel-engine-itinerary-header,
#ts-trip .wte-itinerary-header-wrapper {
	margin-bottom: 16px;
}

#ts-trip .itinerary-row {
	border-color: var(--ts-line);
}

#ts-trip .itinerary-row .itinerary-day,
#ts-trip .itinerary-row .wte-itinerary-head-wrap .itinerary-day {
	border-radius: 100px;
	background: var(--ts-terra);
	color: #fff;
	font-family: var(--ts-font-body);
	font-weight: 700;
}

#ts-trip .itinerary-row .itinerary-title,
#ts-trip .itinerary-row .accordion-tabs-toggle h3,
#ts-trip .itinerary-row h2 {
	font-family: var(--ts-font-head);
	color: var(--ts-esp);
}

/* Cost: includes and excludes */
#ts-trip .post-data.cost .content {
	margin: 0 0 20px;
}

#ts-trip .post-data.cost .content:last-child {
	margin-bottom: 0;
}

#ts-trip .post-data.cost ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#ts-trip .post-data.cost li {
	margin: 0 0 8px;
}

/* FAQs */
#ts-trip .faq-row,
#ts-trip .wpte-faq-row {
	border-color: var(--ts-line);
}

#ts-trip .faq-row .accordion-tabs-toggle,
#ts-trip .faq-row .faq-title {
	font-family: var(--ts-font-head);
	font-weight: 700;
	color: var(--ts-esp);
}

/* Map */
#ts-trip .tab-content iframe,
#ts-trip .tab-content .trip-map img {
	display: block;
	width: 100%;
	max-width: 100%;
	border: 0;
	border-radius: var(--ts-radius);
}

#ts-trip .tab-content iframe {
	min-height: 320px;
}

/* ---------- Booking widget (sidebar) ---------- */
#ts-trip .wpte-booking-area-wrapper .wpte-booking-area {
	border: 1px solid var(--ts-line);
	border-radius: var(--ts-radius-lg);
	background: #fff;
	box-shadow: 0 18px 40px rgba(56, 37, 32, .08);
	font-family: var(--ts-font-body);
}

#ts-trip .wpte-booking-area .wpte-bf-price-from,
#ts-trip .wpte-booking-area .wpte-bf-pqty {
	color: var(--ts-muted);
}

#ts-trip .wpte-booking-area .wpte-bf-offer-amount {
	font-family: var(--ts-font-head);
	color: var(--ts-esp);
}

#ts-trip .wpte-booking-area .wpte-bf-btn,
#ts-trip .wpte-booking-area .wpte-bf-btn:hover,
#ts-trip .wpte-booking-area .wpte-bf-btn:focus {
	border-radius: 100px;
	background: var(--ts-terra);
	color: #fff;
	font-family: var(--ts-font-body);
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

#ts-trip .wpte-booking-area .wpte-bf-btn:hover {
	background: var(--ts-terra-d);
}

#ts-trip .wpte-booking-footer-text a {
	color: var(--ts-terra-d);
	font-weight: 700;
}

/* ---------- Enquiry form ---------- */
#ts-trip #wte_enquiry_form_scroll_wrapper {
	scroll-margin-top: 24px;
	margin: 28px 0 0;
	padding: 28px var(--ts-gutter);
	border: 1px solid var(--ts-line);
	border-radius: var(--ts-radius-lg);
	background: var(--ts-sand);
}

/* The outer box above is the card; WP Travel Engine's own form box inside it is removed. */
#ts-trip .wte_enquiry_contact_form {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

#ts-trip .wte_enquiry_contact_form h2,
#ts-trip .wte_enquiry_contact_form h3,
#ts-trip .wte_enquiry_contact_form .enquiry-form-title {
	margin-top: 0;
	font-size: clamp(1.5rem, 4.4vw, 2rem);
	line-height: 1.15;
}

#ts-trip .wte_enquiry_contact_form label {
	color: var(--ts-esp);
	font-weight: 700;
}

#ts-trip .wte_enquiry_contact_form input[type="text"],
#ts-trip .wte_enquiry_contact_form input[type="email"],
#ts-trip .wte_enquiry_contact_form input[type="tel"],
#ts-trip .wte_enquiry_contact_form input[type="number"],
#ts-trip .wte_enquiry_contact_form input[type="date"],
#ts-trip .wte_enquiry_contact_form select,
#ts-trip .wte_enquiry_contact_form textarea {
	width: 100%;
	border: 1px solid rgba(56, 37, 32, .2);
	border-radius: 12px;
	background: #fff;
	color: var(--ts-esp);
	font-family: var(--ts-font-body);
	font-size: 16px; /* 16px stops iOS zooming into the field */
}

#ts-trip .wte_enquiry_contact_form input:focus,
#ts-trip .wte_enquiry_contact_form select:focus,
#ts-trip .wte_enquiry_contact_form textarea:focus {
	border-color: var(--ts-terra);
	outline: 0;
	box-shadow: 0 0 0 3px rgba(243, 105, 42, .2);
}

#ts-trip .wte_enquiry_contact_form input[type="submit"],
#ts-trip .wte_enquiry_contact_form button[type="submit"] {
	padding: 15px 26px;
	border: 0;
	border-radius: 100px;
	background: var(--ts-terra);
	color: #fff;
	font-family: var(--ts-font-body);
	font-size: 16px;
	font-weight: 700;
	text-transform: none;
	cursor: pointer;
}

#ts-trip .wte_enquiry_contact_form input[type="submit"]:hover,
#ts-trip .wte_enquiry_contact_form button[type="submit"]:hover {
	background: var(--ts-terra-d);
}

/* ---------- Related trips ---------- */
#ts-trip .wte-related-trips {
	margin-top: 56px;
}

#ts-trip .wte-related-trips .related-title,
#ts-trip .wte-related-trips > h2 {
	font-size: clamp(1.6rem, 4.6vw, 2.2rem);
}

/* Edit link (logged-in editors only) */
#ts-trip .entry-footer {
	margin-top: 16px;
	font-size: 14px;
}

/* ---------- Tablet ---------- */
@media (min-width: 768px) {
	body.single-trip {
		--ts-gutter: 32px;
	}

	#ts-trip .ts-trip-hero {
		padding: 56px 0 48px;
	}

	#ts-trip .wpte-gallery-wrapper {
		border-radius: var(--ts-radius-lg);
	}

	#ts-trip .tab-content .nb-configurations {
		padding: 32px !important; /* WPTE !important */
	}

	#ts-trip #wte_enquiry_form_scroll_wrapper {
		padding: 36px;
	}
}

/* ---------- Desktop: content + sidebar ---------- */
@media (min-width: 1025px) {
	#ts-trip {
		padding-bottom: 72px;
	}

	#ts-trip .ts-trip-hero {
		padding: 72px 0 56px;
	}

	#ts-trip .trip-content-area > .row {
		grid-template-columns: minmax(0, 1fr) 360px;
		gap: 48px;
		margin-top: 40px !important; /* WPTE !important */
	}

	/* align-self: WP Travel Engine sets align-items: unset !important on .row. */
	#ts-trip .trip-content-area > .row > .widget-area {
		align-self: start;
		position: sticky;
		top: 32px;
	}

	body.admin-bar #ts-trip .trip-content-area > .row > .widget-area {
		top: 64px;
	}
}

@media (prefers-reduced-motion: reduce) {
	#ts-trip .ts-trip-btn {
		transition: none;
	}
}