/*
 * author Alex
 * 28.08.2026
 *
 * Trip card v3 + "trip details" popup.
 * Figma: Like-bus Final, nodes 3165-18805 (desktop list), 3165-19219 (mobile 360),
 * popup 3165-19465..19989. Tokens: Roboto Condensed, #3B4395 blue, #94C11F green,
 * #632BB7 recommend, #229BDC fastest, #A6A6A6 secondary text, #CFCFCF / #E4E4E4 dividers.
 * Card rules are scoped under .lb-tc3 (search results list, carrier page trips block),
 * page rules under .lb-tc3-page, popup under .tc3-modal. Loaded after trip-card-v2.css.
 */

/* ---------- page: title + sorting ---------- */

.lb-tc3-page .tc3-h1-caption {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 24px;
	line-height: 1.5;
	color: #000;
	margin-top: 20px;
}
.lb-tc3-page .route-h1 {
	font-size: 40px;
	font-weight: 700;
	line-height: 1.2;
	color: #000;
	margin: 0 0 20px;
}
.lb-tc3-page .route-h1-lowprice {
	font-size: 16px;
	color: #A6A6A6;
}
.lb-tc3-page .quick-sort-btn.is-active {
	color: #000 !important;
	border-color: #94C11F !important;
}
.lb-tc3-page .quick-sort-btn.is-active .quick-sort-arrow {
	color: #94C11F;
}
.lb-tc3-page .sorting-count {
	color: #000 !important;
}

/* ---------- card wrapper ---------- */

.lb-tc3 .tc3-wrap,
.lb-tc3 .tc3-wrap *,
.tc3-modal,
.tc3-modal * {
	box-sizing: border-box;
}

.lb-tc3 .Trip-box {
	margin-top: 20px;
}
.lb-tc3 .Trip-box .Box-main.tc3-wrap {
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	overflow: visible !important;
	background: transparent !important;
	font-family: 'Roboto Condensed', sans-serif;
	color: #000;
}

/* badges above the card (attached to top-left corner) */
.lb-tc3 .tc3-badges {
	display: flex;
	align-items: flex-start;
	gap: 5px;
}
.lb-tc3 .tc3-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 24px;
	padding: 0 6px 0 8px;
	border-radius: 8px 8px 0 0;
	color: #fff;
	font-size: 14px;
	line-height: 1.5;
	white-space: nowrap;
}
.lb-tc3 .tc3-badge img {
	width: 16px;
	height: 16px;
	display: block;
}
.lb-tc3 .tc3-badge--rec   { background: #632BB7; }
.lb-tc3 .tc3-badge--fast  { background: #229BDC; }
.lb-tc3 .tc3-badge--cheap { background: #94C11F; }

/* card */
.lb-tc3 .tc3-card {
	background: #fff;
	background-clip: padding-box;
	border: 2px solid transparent;
	border-radius: 10px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "main main" "head details";
	overflow: hidden;
}
.lb-tc3 .tc3-badges:not([hidden]) + .tc3-card {
	border-top-left-radius: 0;
}
.lb-tc3 .tc3-card--rec {
	border-color: #632BB7;
}

/* ---------- main: route + price ---------- */

.lb-tc3 .tc3-main {
	grid-area: main;
	display: flex;
	align-items: flex-start;
	gap: 30px;
	padding: 20px;
	min-height: 140px;
}
.lb-tc3 .tc3-route {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: flex-start;
	gap: 20px;
}
.lb-tc3 .tc3-stop {
	flex: 0 0 auto;
	width: 63px;
	position: relative;
}
.lb-tc3 .tc3-date {
	font-size: 14px;
	line-height: 1.5;
	color: #A6A6A6;
	white-space: nowrap;
}
.lb-tc3 .tc3-stop-line {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.lb-tc3 .tc3-time {
	font-size: 22px;
	font-weight: 700;
	line-height: 24px;
	white-space: nowrap;
}
.lb-tc3 .tc3-city {
	font-size: 16px;
	line-height: 1.5;
	white-space: nowrap;
}
.lb-tc3 .tc3-station {
	margin-top: 5px;
	font-size: 14px;
	line-height: 1.5;
	color: #A6A6A6;
	white-space: nowrap;
	/* address is longer than the 63px column, it runs under the timeline like in figma;
	   very long addresses are cut with ellipsis so they never reach the arrival column */
	width: 380px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.lb-tc3 .tc3-stop--arr .tc3-station {
	width: 320px;
	white-space: normal;
}
.lb-tc3 .tc3-timeline {
	flex: 0 0 300px;
	width: 300px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.lb-tc3 .tc3-duration {
	font-size: 14px;
	line-height: 1.5;
	white-space: nowrap;
}
.lb-tc3 .tc3-line {
	display: flex;
	align-items: center;
	gap: 5px;
	width: 100%;
}
.lb-tc3 .tc3-dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border: 1.5px solid #94C11F;
	border-radius: 50%;
	box-sizing: border-box;
}
.lb-tc3 .tc3-dash {
	flex: 1 1 0;
	height: 0;
	border-top: 1px dashed #94C11F;
}
.lb-tc3 .tc3-bus {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	display: block;
}
.lb-tc3 .tc3-transfers {
	font-size: 14px;
	line-height: 1.5;
	color: #A6A6A6;
	text-align: center;
}
.lb-tc3 .tc3-transfers-label {
	display: none;
}

.lb-tc3 .tc3-side {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	/* 26 + 40 button + 10 + 24 cashback = 100 = route column height (figma top block h100) */
	padding-top: 26px;
}
.lb-tc3 .tc3-price-row {
	display: flex;
	align-items: center;
	gap: 30px;
}
.lb-tc3 .tc3-price {
	white-space: nowrap;
	line-height: 1;
}
.lb-tc3 .tc3-price b {
	font-size: 24px;
	font-weight: 700;
}
.lb-tc3 .tc3-price span {
	font-size: 16px;
	font-weight: 400;
}
.lb-tc3 .tc3-buttons.bil-but {
	margin: 0 !important;
	width: 130px !important;
	min-width: 130px !important;
}
.lb-tc3 .tc3-buttons .green-btn,
.lb-tc3 .tc3-buttons .cp-buy-btn,
.lb-tc3 .tc3-buttons .no_sale {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 130px !important;
	min-width: 130px !important;
	height: 40px !important;
	padding: 0 10px !important;
	background: #3B4395;
	border: none;
	border-radius: 5px;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.lb-tc3 .tc3-buttons .green-btn:hover,
.lb-tc3 .tc3-buttons .cp-buy-btn:hover {
	background: #2f3678;
	color: #fff;
}
.lb-tc3 .tc3-buttons .no_sale {
	background: #fff;
	border: 1px solid #CFCFCF;
	color: #000;
	font-weight: 400;
	font-size: 13px;
	cursor: pointer;
	white-space: normal;
	line-height: 1.1;
	text-align: center;
}
.lb-tc3 .tc3-cashback {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 16px;
	line-height: 1.5;
	color: #72971F;
}
.lb-tc3 .tc3-cashback-info {
	display: inline-flex;
	line-height: 0;
}
.lb-tc3 .tc3-cashback-info img {
	width: 20px;
	height: 20px;
}

/* agent currency switch: same radios as the old card, styled as pills */
.lb-tc3 .tc3-currency {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 5px;
}
.lb-tc3 .tc3-currency label {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 0 12px;
	margin: 0;
	border: 1px solid #CFCFCF;
	border-radius: 100px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	background: #fff;
}
.lb-tc3 .tc3-currency label:hover {
	border-color: #3B4395;
}
.lb-tc3 .tc3-currency label:has(input:checked) {
	background: #3B4395;
	border-color: #3B4395;
	color: #fff;
}
.lb-tc3 .tc3-currency input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	margin: 0;
}

/* ---------- bottom bar: carrier, facilities, copy, details ---------- */

.lb-tc3 .tc3-head {
	grid-area: head;
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: 60px;
	min-width: 0;
	padding: 6px 10px 6px 20px;
	border-top: 1px solid #E4E4E4;
}
.lb-tc3 .tc3-carrier {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 14px;
	line-height: 1.5;
	white-space: nowrap;
}
.lb-tc3 .tc3-carrier-link {
	display: inline-flex;
	align-items: center;
	color: inherit;
	text-decoration: none;
}
.lb-tc3 .tc3-carrier-link:hover {
	text-decoration: none;
	opacity: .85;
}
.lb-tc3 .tc3-logo {
	display: block;
	height: 30px;
	width: auto;
	max-width: 129px;
	object-fit: contain;
}
.lb-tc3 .tc3-carrier-name {
	font-size: 16px;
	font-weight: 700;
}
/* own logo svg has empty space on top (tagline), so the wordmark sits lower than the label - nudge up */
.lb-tc3 .tc3-logo:not(.tc3-logo--partner) {
	position: relative;
	top: -3px;
}
.lb-tc3 .tc3-biz {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
}
.lb-tc3 .tc3-biz .payment-on-boarding-bage,
.lb-tc3 .tc3-biz .booking-pill,
.lb-tc3 .tc3-biz .timer-pill {
	display: inline-flex !important;
	align-items: center;
	gap: 5px;
	height: 24px !important;
	padding: 0 10px !important;
	margin: 0 !important;
	position: static !important;
	border: 1px solid #E4E4E4 !important;
	border-radius: 100px !important;
	background: #F8F8F8 !important;
	color: #000 !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	white-space: nowrap;
}
.lb-tc3 .tc3-biz .booking-status {
	display: inline-flex;
}
.lb-tc3 .tc3-biz a {
	text-decoration: none;
}
.lb-tc3 .tc3-facilities {
	margin-left: auto;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
}
.lb-tc3 .tc3-fac {
	display: inline-flex;
	align-items: center;
	font-size: 16px;
	line-height: 1.5;
	white-space: nowrap;
}
.lb-tc3 .tc3-fac img {
	width: 30px;
	height: 30px;
	display: block;
}
/* max 5 facilities on desktop, rest as "+N". When the bar has no room (payment pills, long
   labels) trip-card-v3.js hides more items (.tc3-fac--off) so the bar never wraps to 2 lines */
.lb-tc3 .tc3-fac:nth-of-type(n+6),
.lb-tc3 .tc3-fac.tc3-fac--off,
.lb-tc3 .tc3-fac-more--m {
	display: none;
}
.lb-tc3 .tc3-facilities {
	flex-wrap: nowrap;
}
.lb-tc3 .tc3-head {
	flex-wrap: nowrap;
}
.lb-tc3 .tc3-fac-more {
	font-size: 14px;
	line-height: 1.5;
	color: #A6A6A6;
	cursor: default;
}
.lb-tc3 .tc3-copy {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid #CFCFCF;
	border-radius: 100px;
	background: #fff;
	cursor: pointer;
	transition: border-color .15s;
}
.lb-tc3 .tc3-details-bar {
	grid-area: details;
	display: flex;
	align-items: center;
	padding: 6px 20px 6px 0;
	border-top: 1px solid #E4E4E4;
}
.lb-tc3 .tc3-details {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 10px 0 16px;
	border: 1px solid #CFCFCF;
	border-radius: 100px;
	background: #fff;
	font-family: inherit;
	font-size: 16px;
	line-height: 1;
	color: #000;
	cursor: pointer;
	white-space: nowrap;
	transition: border-color .15s;
}
.lb-tc3 .tc3-details img {
	width: 20px;
	height: 20px;
	transform: rotate(-90deg);
}
.lb-tc3 .tc3-copy:hover,
.lb-tc3 .tc3-details:hover {
	border-color: #94C11F;
}

/* ---------- popup "trip details" ---------- */

.tc3-modal .modal-dialog {
	width: 700px;
	max-width: calc(100vw - 40px);
	margin: 60px auto;
}
.tc3-modal .modal-content {
	position: relative;
	border: none;
	border-radius: 10px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
	padding: 50px;
	font-family: 'Roboto Condensed', sans-serif;
	color: #000;
}
.tc3-modal-close {
	position: absolute;
	top: 20px;
	right: 35px;
	width: 24px;
	height: 24px;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	z-index: 2;
	line-height: 0;
}
.tc3-modal-title {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 20px;
}
.tc3-modal-loading {
	font-size: 16px;
	color: #A6A6A6;
	padding: 20px 0;
	text-align: center;
}
.tc3-acc {
	border: 1px solid #CFCFCF;
	border-radius: 5px;
	padding: 15px;
	background: #fff;
}
.tc3-acc + .tc3-acc {
	margin-top: 10px;
}
.tc3-acc-head {
	display: flex;
	align-items: center;
	gap: 15px;
	cursor: pointer;
	user-select: none;
}
.tc3-acc-icon {
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
}
.tc3-acc-title {
	flex: 1 1 auto;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
}
.tc3-acc-count {
	font-size: 16px;
	line-height: 1.5;
}
.tc3-acc-chev {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	transition: transform .2s;
}
.tc3-acc.is-open .tc3-acc-chev {
	transform: rotate(180deg);
}
.tc3-acc-body {
	display: none;
	padding-top: 10px;
}
.tc3-acc.is-open .tc3-acc-body {
	display: block;
}

.tc3-info-label {
	font-size: 16px;
	line-height: 1.5;
	color: #A6A6A6;
	margin-top: 10px;
}
.tc3-info-label:first-child {
	margin-top: 0;
}
.tc3-info-value {
	font-size: 16px;
	line-height: 1.5;
}
.tc3-info-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 5px 40px;
	margin-top: 5px;
}
.tc3-info-grid--one {
	grid-template-columns: 1fr;
}
.tc3-info-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	line-height: 1.5;
	min-width: 0;
}
.tc3-info-item img {
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
}

.tc3-stops {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 6px;
}
.tc3-stops::before {
	content: '';
	position: absolute;
	left: 76px;
	top: 20px;
	bottom: 20px;
	border-left: 1px dashed #94C11F;
}
.tc3-stop-row {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.tc3-stop-when {
	flex: 0 0 55px;
	width: 55px;
	text-align: right;
}
.tc3-stop-time {
	font-size: 14px;
	line-height: 1.5;
}
.tc3-stop-date {
	font-size: 12px;
	line-height: 1.5;
	color: #A6A6A6;
}
.tc3-stop-mark {
	position: relative;
	z-index: 1;
	flex: 0 0 20px;
	width: 20px;
	height: 21px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
}
.tc3-stop-mark img {
	width: 20px;
	height: 21px;
}
.tc3-mark {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #94C11F;
}
.tc3-mark--first {
	background: #fff;
	border: 1px solid #94C11F;
	box-sizing: border-box;
}
.tc3-stop-where {
	flex: 1 1 auto;
	min-width: 0;
}
.tc3-stop-name {
	font-size: 14px;
	line-height: 1.5;
}
.tc3-stop-addr {
	font-size: 12px;
	line-height: 1.5;
	color: #A6A6A6;
}
.tc3-stop-row--transfer .tc3-stop-name {
	color: #3B4395;
}
.tc3-return-line {
	font-size: 16px;
	line-height: 1.5;
}
.tc3-return-line + .tc3-return-line {
	margin-top: 5px;
}
.tc3-leg {
	font-size: 16px;
	line-height: 1.5;
}
.tc3-leg + .tc3-leg {
	margin-top: 8px;
}
.tc3-leg-times {
	font-size: 14px;
	color: #A6A6A6;
}

/* toast for "copied" */
.tc3-toast {
	position: fixed;
	left: 50%;
	bottom: 30px;
	z-index: 2000;
	transform: translate(-50%, 10px);
	padding: 10px 20px;
	border-radius: 100px;
	background: #000;
	color: #fff;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 16px;
	line-height: 1.5;
	opacity: 0;
	transition: opacity .25s, transform .25s;
	pointer-events: none;
}
.tc3-toast.is-show {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* ---------- mobile (figma 360) ---------- */

@media screen and (max-width: 991px) {
	.lb-tc3-page .tc3-h1-caption {
		font-size: 16px;
		margin-top: 10px;
	}
	.lb-tc3-page .route-h1 {
		font-size: 24px;
		margin-bottom: 10px;
	}
	.lb-tc3-page .route-h1-lowprice {
		font-size: 14px;
	}
	.lb-tc3-page .quick-sort-btn {
		height: 30px !important;
		padding: 4px 16px !important;
		font-size: 14px !important;
	}
	.lb-tc3-page .filter-link {
		width: 120px !important;
		height: 30px !important;
		font-size: 14px !important;
	}
	.lb-tc3-page .filter-link svg {
		width: 20px !important;
		height: 20px !important;
	}

	.lb-tc3 .Trip-box {
		margin-top: 10px;
	}
	.lb-tc3 .tc3-badge {
		font-size: 12px;
		line-height: 1.35;
		padding: 0 8px;
	}
	.lb-tc3 .tc3-badge img {
		display: none;
	}
	.lb-tc3 .tc3-card {
		display: flex;
		flex-direction: column;
	}

	/* head: logo + icons + copy (+ payment pills on second line) */
	.lb-tc3 .tc3-head {
		order: 1;
		flex-wrap: wrap;
		gap: 8px 10px;
		min-height: 40px;
		padding: 6px 15px;
		border-top: none;
		border-bottom: 1px solid #E4E4E4;
	}
	.lb-tc3 .tc3-carrier-label {
		display: none;
	}
	.lb-tc3 .tc3-logo {
		height: 24px;
		max-width: 103px;
	}
	.lb-tc3 .tc3-carrier-name {
		font-size: 14px;
	}
	.lb-tc3 .tc3-facilities {
		margin-left: 0;
		gap: 0;
		justify-content: flex-start;
	}
	.lb-tc3 .tc3-fac img {
		width: 24px;
		height: 24px;
	}
	.lb-tc3 .tc3-fac-label {
		display: none;
	}
	/* max 4 icons on mobile */
	.lb-tc3 .tc3-fac:nth-of-type(n+5),
	.lb-tc3 .tc3-fac-more--d {
		display: none !important;
	}
	.lb-tc3 .tc3-fac.tc3-fac--off:nth-of-type(-n+4) {
		display: inline-flex !important;
	}
	.lb-tc3 .tc3-facilities,
	.lb-tc3 .tc3-head {
		flex-wrap: wrap;
	}
	/* popup open: page under the sheet must not scroll (ios ignores overflow:hidden on body) */
	body.tc3-modal-open {
		position: fixed;
		width: 100%;
		overflow: hidden;
	}
	.lb-tc3 .tc3-fac:nth-of-type(-n+4) {
		display: inline-flex;
	}
	.lb-tc3 .tc3-fac-more--m {
		display: inline;
		font-size: 12px;
		margin-left: 4px;
	}
	.lb-tc3 .tc3-copy {
		margin-left: auto;
		width: 28px;
		height: 28px;
	}
	.lb-tc3 .tc3-biz {
		order: 10;
		width: 100%;
	}

	/* main: stops column */
	.lb-tc3 .tc3-main {
		order: 2;
		flex-direction: column;
		gap: 0;
		padding: 0;
		min-height: 0;
	}
	.lb-tc3 .tc3-route {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding: 15px;
	}
	.lb-tc3 .tc3-stop {
		width: auto;
		padding-left: 18px;
	}
	.lb-tc3 .tc3-stop::before {
		content: '';
		position: absolute;
		left: 0;
		top: 20px;
		width: 8px;
		height: 8px;
		border: 1.5px solid #94C11F;
		border-radius: 50%;
		background: #fff;
		box-sizing: border-box;
		z-index: 1;
	}
	.lb-tc3 .tc3-stop--arr::before {
		background: #94C11F;
	}
	/* dashed vertical line: dep stop -> timeline row -> arr stop */
	.lb-tc3 .tc3-stop--dep::after,
	.lb-tc3 .tc3-timeline::before,
	.lb-tc3 .tc3-stop--arr::after {
		content: '';
		position: absolute;
		left: 3.5px;
		border-left: 1px dashed #94C11F;
	}
	.lb-tc3 .tc3-stop--dep::after {
		top: 28px;
		bottom: -10px;
	}
	.lb-tc3 .tc3-timeline::before {
		top: 0;
		bottom: 0;
	}
	.lb-tc3 .tc3-stop--arr::after {
		top: -10px;
		height: 30px;
	}
	.lb-tc3 .tc3-date {
		font-size: 12px;
		line-height: 1.35;
	}
	.lb-tc3 .tc3-stop-line {
		flex-direction: row;
		align-items: flex-end;
		gap: 5px;
	}
	.lb-tc3 .tc3-time {
		font-size: 20px;
		line-height: 1.2;
	}
	.lb-tc3 .tc3-city {
		font-size: 14px;
		line-height: 1.5;
		white-space: normal;
	}
	.lb-tc3 .tc3-station,
	.lb-tc3 .tc3-stop--arr .tc3-station {
		width: auto;
		margin-top: 0;
		font-size: 12px;
		line-height: 1.35;
		white-space: normal;
	}
	.lb-tc3 .tc3-timeline {
		position: relative;
		flex: none;
		width: auto;
		flex-direction: row;
		align-items: center;
		gap: 6px;
		padding-left: 18px;
	}
	.lb-tc3 .tc3-line {
		display: none;
	}
	.lb-tc3 .tc3-duration {
		font-size: 12px;
		line-height: 1.35;
	}
	.lb-tc3 .tc3-transfers {
		font-size: 12px;
		line-height: 1.35;
		text-align: left;
		padding-left: 6px;
		border-left: 1px solid #CFCFCF;
	}
	.lb-tc3 .tc3-transfers-label {
		display: inline;
	}

	/* price row */
	.lb-tc3 .tc3-side {
		width: 100%;
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: start;
		gap: 0 10px;
		padding: 15px;
		border-top: 1px solid #E4E4E4;
	}
	.lb-tc3 .tc3-price-row {
		display: contents;
	}
	.lb-tc3 .tc3-price {
		grid-column: 1;
		grid-row: 1;
	}
	.lb-tc3 .tc3-buttons.bil-but {
		grid-column: 2;
		grid-row: 1 / span 3;
		align-self: center;
		width: 100px !important;
		min-width: 100px !important;
	}
	.lb-tc3 .tc3-buttons .green-btn,
	.lb-tc3 .tc3-buttons .cp-buy-btn,
	.lb-tc3 .tc3-buttons .no_sale {
		width: 100px !important;
		min-width: 100px !important;
		height: 30px !important;
		font-size: 14px;
	}
	.lb-tc3 .tc3-buttons .no_sale {
		font-size: 11px;
	}
	.lb-tc3 .tc3-cashback {
		grid-column: 1;
		font-size: 12px;
		line-height: 1.35;
	}
	.lb-tc3 .tc3-currency {
		grid-column: 1;
		justify-content: flex-start;
		margin-top: 5px;
	}
	.lb-tc3 .tc3-currency label {
		height: 24px;
		padding: 0 10px;
		font-size: 12px;
	}

	/* details bar */
	.lb-tc3 .tc3-details-bar {
		order: 3;
		justify-content: center;
		padding: 10px 15px;
		border-top: none;
		background: #F8F8F8;
	}
	.lb-tc3 .tc3-details {
		height: auto;
		padding: 0;
		border: none;
		background: none;
		gap: 5px;
		font-size: 14px;
		line-height: 1.5;
	}
	.lb-tc3 .tc3-details:hover {
		border: none;
	}
}

@media screen and (max-width: 767px) {
	/* popup as full-height sheet */
	.tc3-modal .modal-dialog {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		max-width: 100%;
		margin: 0;
	}
	.tc3-modal .modal-content {
		height: 100%;
		overflow-y: auto;
		border-radius: 0;
		box-shadow: none;
		padding: 20px 15px;
	}
	.tc3-modal-close {
		top: 20px;
		right: 15px;
	}
	.tc3-modal-title {
		font-size: 24px;
		margin-bottom: 15px;
	}
	.tc3-info-grid {
		grid-template-columns: 1fr;
	}
	.tc3-stops::before {
		left: 71px;
	}
	.tc3-stop-when {
		flex-basis: 50px;
		width: 50px;
	}
}