/*
 * author Alex
 * 22.05.2026
 *
 * styles for tour route checkout page (figma 3030:15989, 3030:16030).
 * two blocks shown at top of checkout flow:
 *   block 1 - dark horizontal banner with image, concert info, flags
 *   block 2 - white route block with 3 cols (depart / stadium / return)
 */

/* ============================================================
   BLOCK 1: dark horizontal banner (figma 3030:15989)
   ============================================================ */
.tour-co1 {
	position: relative;
	display: flex;
	align-items: center;
	background: #141414 !important;
	color: #fff;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	min-height: 100px;
	font-family: 'Roboto Condensed', Arial, sans-serif;
	margin: 20px 0 16px;
}

/* ensure title "Оформлення замовлення" has space above block 1 */
.tour-co1 + .tour-co2,
.route_component_big_title + .tour-co1 {
	margin-top: 20px;
}

/* image on the left, with fade-to-dark gradient */
.tour-co1-image {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 260px;
	overflow: hidden;
	z-index: 0;
}

.tour-co1-image.no-image {
	background: linear-gradient(135deg, #2a1a4e 0%, #94c11f 100%);
}

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

.tour-co1-image-img--mobile { display: none; }

.tour-co1-image-fade {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(20, 20, 20, 0) 0%, rgba(20, 20, 20, 0.5) 60%, #141414 100%);
	pointer-events: none;
}

/* concert info block - positioned after image */
.tour-co1-info {
	position: relative;
	z-index: 2;
	margin-left: 268px;
	padding: 16px 0;
	flex: 0 0 360px;
	max-width: 360px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.tour-co1-info-head {
	display: flex;
	align-items: center;
	gap: 8px;
}

.tour-co1-info-bus {
	display: inline-flex;
	flex-shrink: 0;
}

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

.tour-co1-info-title {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.1;
	color: #fff;
	text-transform: uppercase;
	word-break: break-word;
}

.tour-co1-info-title-type {
	color: #94C11F;
}

.tour-co1-info-meta {
	font-size: 14px;
	color: #fff;
	line-height: 1.4;
	font-weight: 400;
}

.tour-co1-info-meta b {
	font-weight: 700;
}

/* flags column (center-right) */
.tour-co1-flags {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px 20px;
	flex: 1 1 auto;
	min-width: 0;
}

.tour-co1-flag {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: #fff;
	line-height: 1.3;
}

.tour-co1-flag-icon {
	display: inline-flex;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	align-items: center;
	justify-content: center;
}

.tour-co1-flag-text {
	color: #fff;
	font-size: 14px;
}

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

/* pill "Туди й назад" - bordered green */
.tour-co1-pill {
	display: inline-flex;
	align-items: center;
	height: 20px;
	padding: 0 8px;
	border: 1px solid #94C11F;
	border-radius: 100px;
	color: #94C11F;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.2;
	margin-left: 4px;
	white-space: nowrap;
}

/* special-flight badge (right) */
.tour-co1-badge {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 24px;
	padding: 0 10px;
	background: rgba(148, 193, 31, 0.25);
	border-radius: 100px;
	color: #94C11F;
	font-size: 14px;
	line-height: 1.5;
	margin: 0 20px 0 12px;
	flex-shrink: 0;
	white-space: nowrap;
}

/* ============================================================
   BLOCK 2: white route block (figma 3030:16030)
   ============================================================ */
.tour-co2 {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	padding: 20px;
	background: #fff !important;
	border: 1px solid #E4E4E4;
	border-radius: 10px;
	margin: 16px 0 20px;
	font-family: 'Roboto Condensed', Arial, sans-serif;
	color: #000;
}

/* force all text inside block 2 to follow design tokens, overriding any
   dark-theme color inherited from .Trip-box.Tour-box */
.tour-co2,
.tour-co2 .tour-co2-col,
.tour-co2 .tour-co2-col-time,
.tour-co2 .tour-co2-col-label,
.tour-co2 .tour-co2-col-label-top {
	color: #000 !important;
}

.tour-co2 .tour-co2-col-date,
.tour-co2 .tour-co2-col-station,
.tour-co2 .tour-co2-stadium-sub {
	color: #A6A6A6 !important;
}

.tour-co2 .tour-co2-stadium-name {
	color: #72971F !important;
}

.tour-co2-col {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.tour-co2-col--depart,
.tour-co2-col--return {
	flex: 0 0 auto;
	max-width: 200px;
}

.tour-co2-col--depart {
	text-align: left;
	align-items: flex-start;
}

.tour-co2-col--return {
	text-align: right;
	align-items: flex-end;
}

.tour-co2-col--middle {
	flex: 1 1 auto;
	align-items: center;
	text-align: center;
	gap: 5px;
}

.tour-co2-col-date {
	font-size: 14px;
	color: #A6A6A6;
	line-height: 1.5;
}

.tour-co2-col-time {
	font-size: 22px;
	font-weight: 700;
	color: #000;
	line-height: 24px;
}

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

.tour-co2-col-station {
	font-size: 14px;
	color: #A6A6A6;
	line-height: 1.5;
}

.tour-co2-col-label-top {
	font-size: 14px;
	font-weight: 700;
	color: #000;
	line-height: 1.5;
}

/* stadium line */
.tour-co2-line {
	display: flex;
	align-items: center;
	gap: 5px;
	width: 100%;
	height: 24px;
	margin: 2px 0;
}

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

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

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

.tour-co2-stadium-name {
	font-size: 16px;
	font-weight: 700;
	color: #72971F;
	line-height: 1.5;
}

.tour-co2-stadium-sub {
	font-size: 14px;
	color: #A6A6A6;
	line-height: 1.5;
}

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

/* ============================================================
   ADAPTIVE (mobile) — figma 3030:16392 (block 1), 3030:16432 (block 2)
   ============================================================ */
@media screen and (max-width: 991px) {

	/* === BLOCK 1: compact card with photo left, content right, then strip + flags === */
	.tour-co1 {
		display: block;
		position: relative;
		padding: 0;
		margin: 16px 0;
		min-height: 0;
		overflow: hidden;
	}

	/* photo on the LEFT (80px wide, 124px tall) */
	.tour-co1-image {
		position: absolute;
		left: 0;
		top: 0;
		width: 80px;
		height: 124px;
		z-index: 1;
	}
	.tour-co1-image-img--desktop { display: none; }
	.tour-co1-image-img--mobile { display: block; }
	.tour-co1-image-fade {
		background: linear-gradient(to right, rgba(20, 20, 20, 0) 0%, rgba(20, 20, 20, 0.4) 70%, #141414 100%);
	}

	/* info content to the right of photo - 124px tall, contains head, title, meta, and (absolute) badge */
	.tour-co1-info {
		position: static;
		margin: 0 0 0 80px;
		padding: 10px 12px;
		max-width: none;
		flex: none;
		min-height: 124px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		gap: 5px;
		z-index: 2;
	}
	.tour-co1-info-head { gap: 6px; }
	.tour-co1-info-head-text { font-size: 12px; }
	.tour-co1-info-title { font-size: 18px; line-height: 1; }
	.tour-co1-info-meta { font-size: 12px; }

	/* flags container becomes a wrapper for both green strip and bottom flags */
	.tour-co1-flags {
		display: block;
		padding: 0;
		margin: 0;
	}

	/* route flag becomes the GREEN STRIP - full width with light-green bg */
	.tour-co1-flag-route {
		background: rgba(184, 255, 0, 0.2);
		padding: 8px 15px;
		margin: 0;
		gap: 5px;
	}
	.tour-co1-flag-route .tour-co1-flag-text { font-size: 14px; font-weight: 700; }
	.tour-co1-flag-route .tour-co1-pill {
		font-size: 10px;
		height: 20px;
		padding: 0 5px;
		margin-left: 0;
	}

	/* pick + ticket flags = bottom section with normal text rows */
	.tour-co1-flag-pick,
	.tour-co1-flag-ticket {
		padding: 5px 15px;
		gap: 8px;
	}
	.tour-co1-flag-pick { padding-top: 10px; }
	.tour-co1-flag-ticket { padding-bottom: 15px; }
	.tour-co1-flag-pick .tour-co1-flag-text,
	.tour-co1-flag-ticket .tour-co1-flag-text { font-size: 12px; }

	/* badge - positioned inline-flex inside info area (last row) */
	.tour-co1-badge {
		position: absolute;
		left: 92px;
		top: 92px;
		margin: 0;
		font-size: 12px;
		height: 20px;
		padding: 0 5px;
		gap: 4px;
		z-index: 3;
	}

	/* === BLOCK 2: white block - stadium line top, 3 cols below === */
	.tour-co2 {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 5px 16px;
		padding: 15px;
		margin: 16px 0;
		align-items: flex-start;
	}

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

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

	/* 3 cols equal width */
	.tour-co2 .tour-co2-col {
		flex: 1 1 0;
		min-width: 0;
		max-width: none;
		gap: 0;
	}
	.tour-co2 .tour-co2-col--depart { text-align: left; align-items: flex-start; }
	.tour-co2 .tour-co2-col--middle {
		text-align: center;
		align-items: center;
		justify-content: flex-start;
	}
	.tour-co2 .tour-co2-col--return { text-align: right; align-items: flex-end; }

	.tour-co2-col-date { font-size: 12px; line-height: 1.35; }
	.tour-co2-col-time { font-size: 20px; line-height: 1.2; }
	.tour-co2-col-label { font-size: 14px; line-height: 1.5; margin-top: 2px; }
	.tour-co2-col-station {
		font-size: 12px;
		line-height: 1.35;
		white-space: normal;
	}
	.tour-co2-col-label-top { font-size: 14px; }
	.tour-co2-stadium-name { font-size: 16px; }
	.tour-co2-stadium-sub {
		font-size: 12px;
		line-height: 1.35;
		white-space: normal;
	}
}