/*
 * author Alex
 * 22.05.2026
 *
 * styles for tour route card (concert trip) in search results.
 * design from figma: node 2997:13380 (with photo), 3017:17841 (no photo)
 */

/* === outer card section ===
   keep section background transparent so when checkout form (.pls) opens,
   the dark theme does not bleed to the rest of the checkout page.
   dark theme moved to .tour-box-main only. */
.Trip-box.Tour-box {
	background: transparent;
	color: inherit;
	font-family: 'Roboto Condensed', Arial, sans-serif;
	box-shadow: none;
}

/* hide search-result default badges for tour cards */
.Trip-box.Tour-box .tc-recommend-badge,
.Trip-box.Tour-box .seo-badges-row {
	display: none;
}

/* visible tour card (search results) - dark theme lives here */
.tour-box-main {
	display: flex;
	flex-direction: column;
	position: relative;
	background: #141414;
	color: #fff;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* === TOP section: title + route + cta === */
.tour-top {
	position: relative;
	min-height: 258px;
	padding: 0;
	overflow: hidden;
}

/* photo on the right side, dark gradient on the left */
.tour-top-bg {
	position: absolute;
	right: 157px;
	top: 0;
	bottom: 0;
	width: 483px;
	overflow: hidden;
	z-index: 0;
}

.tour-top-bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tour-top-bg-img--mobile {
	display: none;
}

/* dark fade overlay covering left half of image */
.tour-top-bg-fade {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, #141414 0%, rgba(20, 20, 20, 0.6) 30%, rgba(20, 20, 20, 0) 70%);
	pointer-events: none;
}

/* no-image variant: white block on the right */
.tour-top-bg.no-image {
	background: #fff;
}

.tour-top-bg.no-image .tour-top-bg-fade {
	background: linear-gradient(to right, #141414 0%, #141414 50%, #141414 70%, rgba(20, 20, 20, 0) 100%);
}

/* title block: top-left */
.tour-top-title {
	position: absolute;
	left: 20px;
	top: 20px;
	width: 389px;
	z-index: 2;
	color: #fff;
}

.tour-top-title-name {
	font-family: 'Roboto Condensed', Arial, sans-serif;
	font-weight: 700;
	font-size: 48px;
	line-height: 1;
	text-transform: uppercase;
	margin: 0 0 10px;
	color: #fff;
	word-break: break-word;
}

.tour-top-title-name-text,
.tour-top-title-name-type {
	display: inline;
}

.tour-top-title-name-type {
	color: #94C11F;
}

.tour-top-title-meta {
	font-family: 'Roboto Condensed', Arial, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	color: #fff;
	text-transform: uppercase;
}

/* route block: depart - stadium - return */
.tour-top-route {
	position: absolute;
	left: 20px;
	top: 122px;
	display: flex;
	gap: 20px;
	align-items: flex-start;
	width: 600px;
	z-index: 2;
}

.tour-top-route-col {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.tour-top-route-col--depart,
.tour-top-route-col--return {
	width: 130px;
	flex-shrink: 0;
}

.tour-top-route-col--middle {
	width: 240px;
	align-items: center;
	flex-shrink: 0;
}

.tour-top-route-date {
	font-size: 14px;
	color: #A6A6A6;
	font-weight: 400;
	line-height: 1.5;
}

.tour-top-route-time {
	font-size: 22px;
	color: #fff;
	font-weight: 700;
	line-height: 24px;
}

.tour-top-route-label {
	font-size: 16px;
	color: #fff;
	font-weight: 400;
	line-height: 1.5;
	margin-top: 5px;
}

.tour-top-route-station {
	font-size: 14px;
	color: #A6A6A6;
	font-weight: 400;
	line-height: 1.5;
}

.tour-top-route-middle-label {
	font-size: 14px;
	color: #fff;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
}

.tour-top-route-middle-line {
	display: flex;
	align-items: center;
	gap: 5px;
	height: 24px;
	width: 100%;
	margin: 4px 0;
}

.tour-top-route-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #94C11F;
	flex-shrink: 0;
}

.tour-top-route-dash {
	flex: 1;
	height: 1px;
	border-top: 1px dashed #94C11F;
	min-width: 20px;
}

.tour-top-route-stadium-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tour-top-route-stadium-name {
	font-size: 16px;
	color: #94C11F;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
}

.tour-top-route-stadium-sub {
	font-size: 14px;
	color: #A6A6A6;
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
}

/* price + button on the right */
.tour-top-cta {
	position: absolute;
	right: 20px;
	top: 52px;
	display: flex;
	flex-direction: column;
	gap: 30px;
	align-items: flex-end;
	z-index: 2;
}

.tour-top-price-block {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.tour-top-price-label {
	font-size: 16px;
	color: #fff;
	font-weight: 400;
	line-height: 1.5;
}

.tour-top-price-value {
	font-size: 30px;
	color: #94C11F;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

/* override priceBox internal classes for tour layout */
.tour-top-price-value .Price,
.tour-top-price-value .priceBox,
.tour-top-price-value > * {
	color: #94C11F !important;
	font-size: 30px !important;
	font-weight: 700 !important;
	background: transparent !important;
}

.tour-top-price-sub {
	font-size: 16px;
	color: #94C11F;
	font-weight: 400;
	line-height: 1.5;
}

.tour-top-button {
	min-width: 130px;
}

/* override default button look for tour cards */
.tour-top-button button,
.tour-top-button a.button,
.tour-top-button .button {
	background: #94C11F !important;
	color: #fff !important;
	border-radius: 5px !important;
	border: none !important;
	height: 40px;
	min-width: 130px;
	font-family: 'Roboto Condensed', Arial, sans-serif;
	font-weight: 700;
	font-size: 16px;
	padding: 0 16px;
}

/* === MIDDLE: green strip === */
.tour-mid {
	background: rgba(184, 255, 0, 0.2);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 15px 20px;
	min-height: 54px;
	flex-wrap: wrap;
}

.tour-mid-left {
	display: flex;
	gap: 10px;
	align-items: center;
}

.tour-mid-bus-icon {
	display: flex;
}

.tour-mid-route-name {
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	line-height: 1.2;
}

.tour-mid-pill {
	border: 1px solid #94C11F;
	border-radius: 100px;
	padding: 0 8px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	color: #94C11F;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.5;
}

.tour-mid-flag {
	display: flex;
	gap: 8px;
	align-items: center;
}

.tour-mid-flag-icon {
	display: flex;
}

.tour-mid-flag-text {
	font-size: 14px;
	font-weight: 400;
	color: #fff;
	line-height: 1.3;
}

.tour-mid-flag-text b {
	font-weight: 700;
}

.tour-mid-carrier {
	display: flex;
	gap: 5px;
	align-items: center;
}

.tour-mid-carrier-label {
	font-size: 14px;
	color: #fff;
	line-height: 1.5;
	display: inline-flex;
	align-items: center;
}

.tour-mid-carrier-name {
	display: inline-flex;
	align-items: center;
}

.tour-mid-carrier-name img {
	max-height: 20px;
}

/* tour carrier logo - composite svg (all 7 figma parts merged into one file).
   svg is naturally retina-sharp at any DPR. */
.tour-mid-carrier-logo {
	display: inline-block;
	width: 86px;
	height: 20px;
	flex-shrink: 0;
	vertical-align: middle;
}

/* === BOTTOM: badges + facilities === */
.tour-bot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 20px 20px;
	gap: 10px;
}

.tour-bot-badges {
	display: flex;
	gap: 5px;
	align-items: center;
	flex-wrap: wrap;
}

.tour-bot-badge {
	background: rgba(148, 193, 31, 0.25);
	height: 24px;
	padding: 0 8px;
	border-radius: 100px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: #94C11F;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	white-space: nowrap;
}

.tour-bot-facilities .facilities {
	display: flex;
	gap: 5px;
	align-items: center;
	list-style: none;
	padding: 0;
	margin: 0;
}

/* tour facility icons - figma 3030:15187, green color, no background */
.Trip-box.Tour-box .facilities {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.Trip-box.Tour-box .facilities li {
	padding: 0;
	background: transparent;
}

/* override default grey background on <a> inside facility li */
.Trip-box.Tour-box .facilities li a {
	background: transparent !important;
	width: 30px !important;
	height: 30px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 0 !important;
}

.Trip-box.Tour-box .facilities li a:hover,
.Trip-box.Tour-box .facilities li a.active {
	background: transparent !important;
}

/* recolor inline svg paths to brand green */
.Trip-box.Tour-box .facilities li svg {
	width: 24px;
	height: 24px;
	max-width: 24px;
	max-height: 24px;
}

.Trip-box.Tour-box .facilities li svg path,
.Trip-box.Tour-box .facilities li svg circle,
.Trip-box.Tour-box .facilities li svg rect,
.Trip-box.Tour-box .facilities li svg polygon,
.Trip-box.Tour-box .facilities li svg g {
	fill: #94C11F !important;
}

/* mobile-only elements - hidden on desktop by default */
.tour-top-route-line-mobile { display: none; }
.tour-bot-flag { display: none; }

/* === ADAPTIVE (mobile) — figma node 3030:15610 === */
@media screen and (max-width: 991px) {

	.Trip-box.Tour-box {
		border-radius: 10px;
	}

	/* === TOP section: image + title + route ====================== */
	.tour-top {
		position: relative;
		min-height: 0;
		padding: 15px;
		display: flex;
		flex-direction: column;
		gap: 10px;
		overflow: hidden;
	}

	/* image - top of card, full width with fade-to-dark at bottom.
	   height auto + object-fit contain => admin's image shown FULL without cropping,
	   independent of its aspect ratio. background matches card for letterboxing. */
	.tour-top-bg {
		position: relative;
		order: 1;
		margin: -15px -15px 0;
		width: calc(100% + 30px);
		right: auto;
		height: auto;
		min-height: 160px;
		background: #141414;
		overflow: hidden;
	}
	.tour-top-bg-img--desktop { display: none; }
	.tour-top-bg-img--mobile {
		display: block;
		width: 100%;
		height: auto;
		max-height: 320px;
		object-fit: contain;
		object-position: center;
	}
	.tour-top-bg-fade {
		background: linear-gradient(to top, #141414 0%, rgba(20, 20, 20, 0.3) 70%, rgba(20, 20, 20, 0) 100%);
	}
	.tour-top-bg.no-image {
		background: #fff;
		height: 100px;
		min-height: 0;
	}
	.tour-top-bg.no-image .tour-top-bg-fade {
		background: linear-gradient(to bottom, transparent 0%, #141414 100%);
	}

	/* title block - overlaps fade gradient slightly */
	.tour-top-title {
		position: relative;
		order: 2;
		top: auto;
		left: auto;
		width: 100%;
		padding: 0;
		margin-top: -50px;
		z-index: 2;
	}
	.tour-top-title-name { font-size: 32px; line-height: 1; margin-bottom: 5px; }
	.tour-top-title-meta { font-size: 14px; line-height: 1.2; }

	/* route block - flex column (stadium line above 3-col row) */
	.tour-top-route {
		position: relative;
		order: 3;
		top: auto;
		left: auto;
		width: 100%;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 5px;
	}

	/* mobile-only stadium line (full-width single row) */
	.tour-top-route-line-mobile {
		display: flex;
		align-items: center;
		gap: 5px;
		width: 100%;
		height: 20px;
	}
	.tour-top-route-line-mobile .tour-top-route-dot {
		width: 8px; height: 8px; flex-shrink: 0;
		background: #94C11F;
		border-radius: 50%;
	}
	.tour-top-route-line-mobile .tour-top-route-dash {
		flex: 1 1 0;
		height: 0;
		min-width: 20px;
		border-top: 1px dashed #94C11F;
	}
	.tour-top-route-line-mobile .tour-top-route-stadium-icon {
		flex-shrink: 0;
		display: flex;
		align-items: center;
	}

	/* hide desktop stadium line (inside middle col) */
	.tour-top-route-middle-line { display: none; }

	/* 3-col row below stadium line - wrapped inline-flex */
	.tour-top-route-cols-wrap,
	.tour-top-route > .tour-top-route-col {
		display: flex;
		flex-direction: column;
	}

	/* override desktop col widths */
	.tour-top-route > .tour-top-route-col--depart,
	.tour-top-route > .tour-top-route-col--middle,
	.tour-top-route > .tour-top-route-col--return {
		width: auto;
		flex: 1 1 0;
		min-width: 0;
	}

	/* use a flex-row sibling layout for 3 cols via "row" container.
	   easiest: make tour-top-route itself flex-wrap and force line-mobile to 100%,
	   then cols sit side-by-side on the next row */
	.tour-top-route {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
		column-gap: 10px;
		row-gap: 5px;
	}
	.tour-top-route-line-mobile {
		flex: 1 0 100%;
	}

	.tour-top-route-date { font-size: 12px; line-height: 1.35; color: #A6A6A6; }
	.tour-top-route-time { font-size: 20px; line-height: 1.2; }
	.tour-top-route-label { font-size: 14px; margin-top: 2px; }
	.tour-top-route-station {
		font-size: 12px;
		line-height: 1.35;
		white-space: normal;
		color: #A6A6A6;
	}

	.tour-top-route-col--depart {
		text-align: left;
		align-items: flex-start;
	}
	.tour-top-route-col--middle {
		text-align: center;
		align-items: center;
		margin-top: 0;
	}
	.tour-top-route-col--return {
		text-align: right;
		align-items: flex-end;
	}

	.tour-top-route-middle-label { font-size: 14px; font-weight: 700; }
	.tour-top-route-stadium-name { font-size: 16px; font-weight: 700; color: #94C11F; }
	.tour-top-route-stadium-sub {
		font-size: 12px;
		line-height: 1.35;
		color: #A6A6A6;
		white-space: normal;
	}

	/* === PRICE row + button (separated by divider) ============== */
	.tour-top-cta {
		position: relative;
		top: auto;
		right: auto;
		order: 5;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 15px;
		margin: 0 -15px -15px;
		border-top: 1px solid #484848;
	}

	.tour-top-price-block {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 5px;
		flex: 1 1 auto;
	}
	.tour-top-price-label { font-size: 14px; }
	.tour-top-price-value { font-size: 20px; }
	.tour-top-price-sub {
		flex: 1 1 100%;
		font-size: 14px;
		color: #94C11F;
	}

	.tour-top-button,
	.tour-top-button .button,
	.tour-top-button button {
		min-width: 100px;
		height: 30px;
		font-size: 14px;
	}

	/* === GREEN strip (mid) - only route + pill + logo on mobile === */
	.tour-mid {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		min-height: 0;
		padding: 10px 15px;
		flex-wrap: nowrap;
	}
	.tour-mid-left {
		flex: 0 1 auto;
		min-width: 0;
		gap: 5px;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	.tour-mid-route-name { font-size: 14px; }
	.tour-mid-pill { font-size: 10px; height: 20px; padding: 0 5px; }

	/* hide flags + carrier label on mobile, keep only logo */
	.tour-mid .tour-mid-flag { display: none; }
	.tour-mid .tour-mid-carrier-label { display: none; }
	.tour-mid-carrier {
		margin-left: auto;
		flex-shrink: 0;
	}

	/* === BOTTOM section: flags + badges + facilities =========== */
	.tour-bot {
		flex-direction: column;
		align-items: flex-start;
		gap: 5px;
		padding: 10px 15px 15px;
	}

	/* mobile-only flag rows */
	.tour-bot-flag {
		display: flex;
		gap: 8px;
		align-items: center;
		color: #fff;
		line-height: 1.3;
	}
	.tour-bot-flag-icon {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 20px;
		height: 20px;
	}
	.tour-bot-flag-text { font-size: 12px; color: #fff; }
	.tour-bot-flag-text b { font-weight: 700; }

	.tour-bot-badges { flex-wrap: wrap; gap: 5px; }
	.tour-bot-badge { height: 20px; font-size: 12px; padding: 0 5px; }

	.tour-bot-facilities .facilities { flex-wrap: wrap; }
	.Trip-box.Tour-box .facilities li a { width: 28px !important; height: 28px !important; }
	.Trip-box.Tour-box .facilities li svg { width: 21px; height: 21px; }
}