/**
 * TDT Blocks — стили компонентов (FAQ, маршрут, калькулятор).
 * Использует токены tdt-premium.css темы; есть автономные фолбэки.
 */

.tdt-faq details,
.tdt-calc,
.tdt-route {
	--_accent: var(--tdt-accent, #e16206);
	--_ink: var(--tdt-ink, #0e0e0e);
	--_slate: var(--tdt-slate, #5f6368);
	--_radius: var(--tdt-radius-m, 14px);
	--_shadow: var(--tdt-shadow-soft, 0 1px 2px rgba(14,14,14,.05), 0 8px 24px -8px rgba(14,14,14,.12));
	--_ease: var(--tdt-ease, cubic-bezier(.22,.61,.21,1));
}

/* ---------------------------------------------------------------- FAQ */

.tdt-faq details {
	background: #fff;
	border: 1px solid rgba(14, 14, 14, .08);
	border-radius: var(--_radius);
	box-shadow: var(--_shadow);
	padding: 0;
	margin-bottom: 12px;
	overflow: hidden;
	transition: border-color 280ms var(--_ease), box-shadow 280ms var(--_ease);
}

.tdt-faq details[open] {
	border-color: color-mix(in srgb, var(--_accent) 35%, transparent);
}

.tdt-faq summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	font-weight: 600;
	transition: color 160ms var(--_ease);
}

.tdt-faq summary::-webkit-details-marker { display: none; }

.tdt-faq summary::after {
	content: "+";
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: color-mix(in srgb, var(--_accent) 12%, transparent);
	color: var(--_accent);
	font-size: 18px;
	font-weight: 700;
	transition: transform 280ms var(--_ease), background 280ms var(--_ease);
}

.tdt-faq details[open] summary { color: var(--_accent); }

.tdt-faq details[open] summary::after {
	content: "–";
	transform: rotate(180deg);
}

.tdt-faq details > *:not(summary) {
	padding: 0 22px;
	color: var(--_slate);
}

.tdt-faq details > *:last-child { padding-bottom: 18px; }

/* -------------------------------------------------------- Route steps */

.tdt-route__list {
	list-style: none;
	counter-reset: tdt-step;
	margin: 0;
	padding: 0;
	position: relative;
}

.tdt-route-step {
	counter-increment: tdt-step;
	position: relative;
	padding: 10px 0 22px 56px;
}

/* вертикальная линия маршрута */
.tdt-route-step::before {
	content: "";
	position: absolute;
	left: 19px;
	top: 46px;
	bottom: -4px;
	width: 2px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--_accent) 45%, transparent), rgba(14,14,14,.08));
}

.tdt-route-step:last-child::before { display: none; }

/* нумерованный кружок */
.tdt-route-step::after {
	content: counter(tdt-step);
	position: absolute;
	left: 0;
	top: 6px;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(135deg, var(--_accent), color-mix(in srgb, var(--_accent) 70%, #000));
	box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--_accent) 60%, transparent);
}

.tdt-route__list--compact .tdt-route-step {
	padding: 4px 0 14px 44px;
	font-size: 14px;
}

.tdt-route__list--compact .tdt-route-step::after {
	width: 30px;
	height: 30px;
	top: 2px;
	font-size: 13px;
}

.tdt-route__list--compact .tdt-route-step::before {
	left: 14px;
	top: 34px;
}

/* --------------------------------------------------------- Calculator */

.tdt-calc {
	background: #fff;
	border: 1px solid rgba(14, 14, 14, .08);
	border-radius: var(--tdt-radius-l, 22px);
	box-shadow: var(--_shadow);
	padding: clamp(20px, 4vw, 36px);
}

.tdt-calc__form {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
	margin-bottom: 8px;
}

.tdt-calc__field { display: grid; gap: 6px; font-weight: 600; font-size: 14px; }

.tdt-calc__field select {
	padding: 12px 14px;
	border: 1.5px solid rgba(14, 14, 14, .15);
	border-radius: 10px;
	font: inherit;
	background: #fff;
	transition: border-color 160ms var(--_ease), box-shadow 160ms var(--_ease);
}

.tdt-calc__field select:focus {
	outline: none;
	border-color: var(--_accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--_accent) 20%, transparent);
}

.tdt-calc__routes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
	margin: 12px 0 20px;
}

.tdt-calc__route {
	position: relative;
	border: 1px solid rgba(14, 14, 14, .1);
	border-radius: var(--_radius);
	padding: 20px;
	animation: tdt-calc-in 420ms var(--_ease) both;
}

.tdt-calc__route.is-preferred {
	border-color: color-mix(in srgb, var(--_accent) 50%, transparent);
	box-shadow: 0 12px 30px -14px color-mix(in srgb, var(--_accent) 45%, transparent);
}

.tdt-calc__badge {
	position: absolute;
	top: -11px;
	right: 16px;
	background: linear-gradient(135deg, var(--_accent), color-mix(in srgb, var(--_accent) 70%, #000));
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: 999px;
}

.tdt-calc__route h4 { margin: 0 0 12px; font-size: 16px; }

.tdt-calc__meta { font-size: 13px; color: var(--_slate); margin: 0; }

.tdt-calc__warning {
	background: color-mix(in srgb, #fbed6e 35%, #fff);
	border-left: 3px solid var(--_accent);
	border-radius: 8px;
	padding: 12px 16px;
	font-size: 14px;
	animation: tdt-calc-in 420ms var(--_ease) both;
}

.tdt-calc__cta {
	display: inline-block;
	background: linear-gradient(135deg, var(--_accent), color-mix(in srgb, var(--_accent) 70%, #000));
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	padding: 12px 26px;
	border-radius: 10px;
	box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--_accent) 60%, transparent);
	transition: transform 160ms var(--_ease), box-shadow 280ms var(--_ease);
}

.tdt-calc__cta:hover {
	color: #fff;
	transform: translateY(-2px);
}

.tdt-calc__disclaimer { font-size: 12px; color: var(--_slate); margin: 16px 0 0; }

.tdt-calc--editor {
	display: grid;
	gap: 4px;
	background: repeating-linear-gradient(45deg, #fafafa, #fafafa 12px, #f3f3f3 12px, #f3f3f3 24px);
}

@keyframes tdt-calc-in {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.tdt-calc__route,
	.tdt-calc__warning { animation: none; }
}

.tdt-calc__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

.tdt-calc__wa {
	font-weight: 600;
	color: var(--tdt-accent-deep, #b84e04);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba(225, 98, 6, .45);
}

/* ------------------------------------------------- Acceptance Risk Score */

.tdt-risk {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 999px;
	margin-bottom: 12px;
}

.tdt-risk::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }

.tdt-risk--green  { background: rgba(34, 160, 107, .12); color: #17734c; }
.tdt-risk--green::before  { background: #22a06b; }
.tdt-risk--yellow { background: rgba(212, 160, 23, .14); color: #8a6a08; }
.tdt-risk--yellow::before { background: #d4a017; }
.tdt-risk--red    { background: rgba(207, 46, 46, .1); color: #a32222; }
.tdt-risk--red::before    { background: #cf2e2e; }

.tdt-calc__verify {
	background: color-mix(in srgb, #ddf0fb 45%, #fff);
	border-left: 3px solid #5f6368;
	border-radius: 8px;
	padding: 12px 16px;
	font-size: 14px;
	margin: 0 0 16px;
}