/* tour-overlay.css — the large "Details" overlay opened from the front-page tour
   cards. The backdrop reuses .modal-bg from main.css; the PDF/summary/language
   pieces reuse the tsv-* classes from tour-single.css so it matches the look of
   the full tour page. This file only styles the overlay's own window/chrome. */

#tourOverlay .to-window {
	background: var(--white);
	border-radius: 14px;
	width: min(1200px, 94vw);
	height: min(90vh, 920px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	animation: mIn .25s ease;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}

.to-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 24px;
	border-bottom: 1px solid var(--border);
	flex-shrink: 0;
}

.to-header-text {
	min-width: 0;
}

.to-title {
	font-family: 'Lora', serif;
	font-size: clamp(18px, 2.4vw, 24px);
	margin-bottom: 4px;
	line-height: 1.25;
}

/* Key facts grid — full wording, at the top of the overlay body, above the PDF */
.to-facts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 5px;
	margin-bottom: 10px;
}

.to-fact {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--off);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 6px 7px;
}

.to-fact-icon {
	font-size: 20px;
	line-height: 1;
	flex-shrink: 0;
}

.to-fact-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--muted);
	margin-bottom: 1px;
}

.to-fact-value {
	font-size: 14px;
	font-weight: 700;
	color: var(--text);
}

/* Trip map — compact clickable thumbnail+label, sized to sit inline in the
   footer alongside price, the itinerary control, and Book Now (see .to-footer
   below for the compact sizing that makes that fit on one line). Opens the
   full-size lightbox (styles further down) on click. */
.to-map {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--off);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 5px 10px;
	cursor: pointer;
	transition: background .15s;
	flex-shrink: 0;
}

.to-map:hover {
	background: var(--border);
}

.to-map img {
	width: 26px;
	height: 26px;
	object-fit: cover;
	border-radius: 5px;
	flex-shrink: 0;
}

.to-map-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--text);
	white-space: nowrap;
}

.to-close {
	flex-shrink: 0;
	background: var(--off);
	border: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 15px;
	color: var(--muted);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s, color .15s;
}

.to-close:hover {
	background: var(--border);
	color: var(--text);
}

.to-body {
	flex: 1;
	overflow-y: auto;
	padding: 24px;
}

.to-body .tsv-pdf-frame {
	height: 60vh;
}

.to-body .tsv-pdf-frame-wrap,
.to-body .tsv-pdf-missing {
	margin-bottom: 10px;
}

/* One line: price, trip map, itinerary, Book Now — all inline, wrapping only
   if the window gets too narrow to hold them (see the 600px breakpoint below
   for phones, where they wrap onto their own rows). Moved out of the
   scrolling body so only the PDF itself needs to scroll, not the whole pane. */
.to-footer {
	flex-shrink: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	padding: 12px 24px;
	border-top: 1px solid var(--border);
	background: var(--off);
}

/* Itinerary control, compacted to inline size to match .to-map alongside it */
.to-footer .tsv-pdf-cta {
	flex-shrink: 0;
	flex-wrap: nowrap;
	background: var(--off);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 5px 10px;
	gap: 8px;
	margin-bottom: 0;
}

.to-footer .tsv-pdf-cta-icon {
	font-size: 18px;
}

.to-footer .tsv-pdf-cta-text {
	flex: none;
	min-width: 0;
}

.to-footer .tsv-pdf-cta-title {
	font-size: 13px;
	white-space: nowrap;
}

.to-footer .tsv-pdf-cta-sub {
	display: none;
}

.to-footer .tsv-pdf-open {
	padding: 6px 14px;
	font-size: 12.5px;
}

.to-footer .tsv-pdf-download {
	font-size: 12px;
	padding: 6px 4px;
	white-space: nowrap;
}

.to-footer-actions {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: flex-end;
	flex-shrink: 0;
}

.to-book-btn,
.to-ask-btn {
	padding: 11px 20px;
	white-space: nowrap;
}

/* Phone: near-fullscreen window, stacked footer */
@media (max-width: 600px) {
	#tourOverlay {
		padding: 0;
	}
	#tourOverlay .to-window {
		width: 100vw;
		height: 100vh;
		max-height: 100vh;
		border-radius: 0;
	}
	.to-header {
		padding: 8px 16px 7px;
	}
	.to-body {
		padding: 16px;
	}
	.to-facts-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 4px;
	}
	.to-fact {
		padding: 5px 6px;
	}
	.to-footer {
		justify-content: center;
	}
	.to-footer-actions {
		flex-direction: column;
		width: 100%;
	}
}

/* Trip map lightbox — full-size view of the manually-uploaded map image,
   opened from a tour card's "View Trip Map" link or the Details pane's map
   card. Separate element from #tourOverlay so it works from either. */
.tm-lightbox {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .82);
	z-index: 99998;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.tm-lightbox.open {
	display: flex;
}

.tm-lightbox img {
	max-width: 100%;
	max-height: 100%;
	border-radius: 8px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
}

.tm-lightbox-close {
	position: fixed;
	top: 20px;
	right: 24px;
	background: rgba(255, 255, 255, .15);
	border: none;
	color: #fff;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 16px;
}

.tm-lightbox-close:hover {
	background: rgba(255, 255, 255, .28);
}