/* ==========================================
	   Taxi Bergamo Airport — Booking progress
	   ========================================== */

	.tba-booking-progress {
		--tba-green: #358c2b;
		--tba-green-dark: #246f22;
		--tba-green-deep: #174f1c;
		--tba-green-light: #eaf7e7;
		--tba-border: #d5e8d1;
		--tba-muted: #718071;

		width: 100%;
		margin: 0 0 34px;
		padding: 22px 24px 20px;

		box-sizing: border-box;

		border: 1px solid var(--tba-border);
		border-radius: 18px;

		background:
			radial-gradient(
				circle at 92% 0%,
				rgba(125, 190, 109, 0.14) 0,
				rgba(125, 190, 109, 0) 38%
			),
			linear-gradient(
				135deg,
				#ffffff 0%,
				#f8fcf7 58%,
				#eef8eb 100%
			);

		box-shadow:
			0 12px 32px rgba(43, 103, 44, 0.08);
	}

	.tba-booking-progress__header {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 20px;

		margin-bottom: 20px;
	}

	.tba-booking-progress__eyebrow {
		display: flex;
		align-items: center;
		gap: 7px;

		margin-bottom: 5px;

		color: var(--tba-green);
		font-size: 12px;
		font-weight: 800;
		letter-spacing: 0.07em;
		line-height: 1.25;
		text-transform: uppercase;
	}

	.tba-booking-progress__eyebrow svg {
		flex: 0 0 auto;

		width: 16px;
		height: 16px;
	}

	.tba-booking-progress__title {
		margin: 0;

		color: #142018;
		font-size: 22px;
		font-weight: 800;
		letter-spacing: -0.02em;
		line-height: 1.25;
	}

	.tba-booking-progress__counter {
		flex: 0 0 auto;

		padding: 7px 11px;

		border: 1px solid #cbe2c6;
		border-radius: 999px;

		background: rgba(255, 255, 255, 0.9);

		color: var(--tba-green-dark);
		font-size: 12px;
		font-weight: 800;
		line-height: 1.2;
		white-space: nowrap;

		box-shadow:
			0 3px 10px rgba(43, 103, 44, 0.05);
	}

	.tba-booking-progress__steps {
		position: relative;

		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));

		margin: 0;
		padding: 0;

		list-style: none;
	}

	/* Фоновая линия */

	.tba-booking-progress__steps::before {
		content: "";

		position: absolute;
		top: 20px;
		left: 16.666667%;
		right: 16.666667%;
		z-index: 0;

		height: 3px;

		border-radius: 999px;
		background: #dbe8d8;
	}

	/* Заполненная зелёная линия */

	.tba-booking-progress__steps::after {
        content: "";
		position: absolute;
		top: 20px;
		left: 16.666667%;
		z-index: 1;

		width: calc(
			(66.666667% * var(--tba-progress)) / 100
		);

		height: 3px;

		border-radius: 999px;

		background:
			linear-gradient(
				90deg,
				#65ad5e 0%,
				#358c2b 52%,
				#246f22 100%
			);

		box-shadow:
			0 1px 5px rgba(53, 140, 43, 0.22);

		transition: width 0.35s ease;
	}

	.tba-booking-progress__step {
		position: relative;
		z-index: 2;

		display: flex;
		flex-direction: column;
		align-items: center;

		min-width: 0;

		text-align: center;
	}

	.tba-booking-progress__circle {
		display: flex;
		align-items: center;
		justify-content: center;

		width: 42px;
		height: 42px;

		box-sizing: border-box;

		border: 2px solid #d2e1cf;
		border-radius: 50%;

		background: #ffffff;

		box-shadow:
			0 4px 12px rgba(47, 91, 44, 0.07);

		color: #7b8a79;
		font-size: 15px;
		font-weight: 800;
		line-height: 1;

		transition:
			background 0.2s ease,
			border-color 0.2s ease,
			color 0.2s ease,
			transform 0.2s ease,
			box-shadow 0.2s ease;
	}

	/* Завершённый шаг */

	.tba-booking-progress__step.is-complete
	.tba-booking-progress__circle {
		border-color: #63aa5b;

		background:
			linear-gradient(
				135deg,
				#f2fbf0 0%,
				#e3f5df 100%
			);

		color: var(--tba-green);
	}

	/* Текущий шаг */

	.tba-booking-progress__step.is-current
	.tba-booking-progress__circle {
		border-color: var(--tba-green);

		background:
			linear-gradient(
				135deg,
				#55a94c 0%,
				#358c2b 55%,
				#246f22 100%
			);

		box-shadow:
			0 8px 20px rgba(53, 140, 43, 0.28),
			0 0 0 4px rgba(53, 140, 43, 0.09);

		color: #ffffff;

		transform: scale(1.08);
	}

	.tba-booking-progress__check {
		display: block;

		width: 18px;
		height: 18px;
	}

	.tba-booking-progress__label {
		display: block;

		max-width: 135px;
		margin-top: 10px;

		color: var(--tba-muted);
		font-size: 12px;
		font-weight: 650;
		line-height: 1.35;
	}

	.tba-booking-progress__step.is-complete
	.tba-booking-progress__label {
		color: #52704f;
	}

	.tba-booking-progress__step.is-current
	.tba-booking-progress__label {
		color: var(--tba-green-deep);
		font-weight: 800;
	}

	/*
	 * Скрываем старые элементы прогресса,
	 * если их CSS или HTML остались в теме.
	 */

	.booking-progress-bar,
	.booking-step-icons {
		display: none !important;
	}

	/* ==========================================
	   Tablet
	   ========================================== */

	@media screen and (max-width: 780px) {
		.tba-booking-progress {
			margin-bottom: 30px;
			padding-right: 20px;
			padding-left: 20px;
		}

		.tba-booking-progress__title {
			font-size: 21px;
		}
	}

	/* ==========================================
	   Mobile
	   ========================================== */

	@media screen and (max-width: 640px) {
		.tba-booking-progress {
			margin: 0 0 28px;
			padding: 17px 16px 16px;

			border-radius: 16px;

			box-shadow:
				0 9px 25px rgba(43, 103, 44, 0.075);
		}

		.tba-booking-progress__header {
			align-items: center;
			gap: 12px;

			margin-bottom: 17px;
		}

		.tba-booking-progress__eyebrow {
			margin-bottom: 3px;

			font-size: 10px;
			letter-spacing: 0.065em;
		}

		.tba-booking-progress__eyebrow svg {
			width: 14px;
			height: 14px;
		}

		.tba-booking-progress__title {
			font-size: 19px;
		}

		.tba-booking-progress__counter {
			padding: 6px 9px;

			font-size: 11px;
		}

		.tba-booking-progress__steps::before {
			top: 18px;
		}

		.tba-booking-progress__steps::after {
        content: "";
			top: 18px;
		}

		.tba-booking-progress__circle {
			width: 38px;
			height: 38px;

			font-size: 13px;
		}

		.tba-booking-progress__check {
			width: 17px;
			height: 17px;
		}

		/*
		 * На мобильном подписи скрываем:
		 * текущий этап уже указан крупным заголовком сверху.
		 */

		.tba-booking-progress__label {
			display: none;
		}
	}

	@media screen and (max-width: 390px) {
		.tba-booking-progress {
			padding-right: 13px;
			padding-left: 13px;
		}

		.tba-booking-progress__header {
			gap: 8px;
		}

		.tba-booking-progress__title {
			font-size: 18px;
		}

		.tba-booking-progress__counter {
			padding-right: 8px;
			padding-left: 8px;

			font-size: 10px;
		}
	}