/* rb-transport-calculator frontend.css — v2.0
 * Область видимости: .rbtc-calculator-root и потомки.
 * Наследует шрифт и цвет от темы Blocksy; переопределяет только структуру.
 */

/* ── Calculator root: single column flow ─────────────────────────────────── */
.rbtc-calculator-root {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* ── Tabs (topic="a,b,c" — несколько калькуляторов в одном блоке) ───────── */
.rbtc-tabs-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 20px;
	border-bottom: 1px solid currentColor;
	opacity: .9;
}

.rbtc-tab-btn {
	padding: 10px 16px;
	font: inherit;
	font-weight: 600;
	color: inherit;
	background: none;
	border: 0;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
	cursor: pointer;
	opacity: .55;
}

.rbtc-tab-btn.is-active {
	opacity: 1;
	border-bottom-color: currentColor;
}

.rbtc-tabs-panels > .rbtc-calculator-root[hidden] {
	display: none;
}

/* ── Panel ───────────────────────────────────────────────────────────────── */
.rbtc-calculator-root .panel {
	background: #fff;
	border: 1px solid #d7dde5;
	border-radius: 8px;
	padding: 20px;
}

.rbtc-calculator-root .panel + .panel {
	margin-top: 16px;
}

/* ── Input form ──────────────────────────────────────────────────────────── */
.input-form {
	display: grid;
	gap: 14px;
	padding: 20px 28px;
	background: #eef4fb;
	border: 0;
}

.input-row {
	display: grid;
	grid-template-columns: minmax( 160px, 250px ) minmax( 0, 1fr );
	gap: 16px;
	align-items: center;
}

/* Атрибут hidden сам по себе не победит класс .input-row с тем же display —
   нужен явный, более специфичный селектор, иначе скрытые JS-логикой поля
   (объём двигателя, основной двигатель гибрида и т.п.) продолжат отображаться. */
.input-row[hidden] {
	display: none;
}

.input-label {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	align-items: center;
	font-size: 16px;
	line-height: 1.25;
	text-align: right;
	color: #1d232d;
}

.input-control {
	display: flex;
	gap: 8px;
	align-items: center;
	min-width: 0;
}

.input-control input,
.input-control select {
	min-height: 42px;
	border: 1px solid #c8d2de;
	border-radius: 7px;
	padding: 0 12px;
	font-size: 16px;
	background: #fff;
	color: inherit;
}

.input-control select { appearance: auto; }

.input-control .narrow { max-width: 110px; }
.input-control .medium { max-width: 200px; }
.input-control .wide   { max-width: 100%; }

.input-note {
	color: #66758a;
	font-size: 14px;
	white-space: nowrap;
}

.input-rates {
	margin-left: min( 268px, 28vw );
	color: #66758a;
	font-size: 13px;
	line-height: 1.4;
}

.input-actions {
	margin-left: min( 268px, 28vw );
}

.form-section-title {
	margin: 4px 0 -4px min( 268px, 28vw );
	color: #66758a;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.field-help {
	display: inline-grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border: 1.5px solid #6b7e95;
	border-radius: 50%;
	color: #6b7e95;
	font-size: 13px;
	font-style: italic;
	cursor: help;
}

/* ── Submit button ───────────────────────────────────────────────────────── */
.input-actions button[type="submit"] {
	min-height: 42px;
	padding: 0 22px;
	font-size: 15px;
	font-weight: 700;
	border-radius: 6px;
	cursor: pointer;
}

/* ── Result output ───────────────────────────────────────────────────────── */
.rbtc-result-panel h2 {
	margin: 0 0 14px;
}

.calc-output {
	display: grid;
	padding: 8px 20px 18px;
	background: linear-gradient( 180deg, #f7fbff 0%, #eef4fb 100% );
	border: 1px solid #e1eaf3;
	border-radius: 8px;
}

.calc-line {
	display: grid;
	grid-template-columns: minmax( 160px, 1fr ) minmax( 140px, .7fr ) minmax( 120px, .8fr );
	gap: 12px;
	align-items: baseline;
	padding: 13px 0;
	border-bottom: 1px solid #dce5ef;
}

.calc-label {
	font-size: 16px;
	line-height: 1.25;
	color: #18212f;
}

.calc-value {
	font-size: 22px;
	font-weight: 700;
	color: #25384c;
	overflow-wrap: anywhere;
}

.calc-value .kopecks {
	font-size: .58em;
	font-weight: 700;
	color: #6b7e95;
}

.calc-note {
	color: #66758a;
	font-size: 14px;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.calc-info {
	display: inline-grid;
	place-items: center;
	width: 19px;
	height: 19px;
	margin-left: 5px;
	border: 1.5px solid #7b8da3;
	border-radius: 50%;
	font-size: 12px;
	font-style: italic;
	color: #64748b;
	vertical-align: 1px;
	cursor: help;
}

.calc-line.total {
	margin-top: 2px;
	padding-top: 18px;
}

.calc-line.total .calc-label,
.calc-line.landed .calc-label {
	font-size: 17px;
	font-weight: 700;
}

.calc-line.total .calc-value,
.calc-line.landed .calc-value {
	font-size: 25px;
	color: #203449;
}

.calc-line.landed {
	align-items: center;
	border-bottom: 0;
}

/* ── Recycling year table ────────────────────────────────────────────────── */
.recycling-years {
	width: 100%;
	margin: 8px 0 12px;
	border-collapse: separate;
	border-spacing: 0;
	background: #fff;
	border: 1px solid #dce5ef;
	border-radius: 8px;
	overflow: hidden;
	font-size: 15px;
}

.recycling-years th,
.recycling-years td {
	border: 0;
	border-right: 1px solid #dce5ef;
	padding: 10px 12px;
	text-align: left;
	white-space: nowrap;
}

.recycling-years th:last-child,
.recycling-years td:last-child { border-right: 0; }

.recycling-years th {
	background: #f9fbfd;
	color: #7a8795;
	font-weight: 600;
}

.recycling-years td {
	color: #18212f;
	font-weight: 600;
}

/* ── Reference section ───────────────────────────────────────────────────── */
.rbtc-reference {
	border-top: 2px solid #e5eaf0;
	padding-top: 8px;
}

.rbtc-reference > h2 {
	margin: 0 0 4px;
	font-size: 20px;
}

.ref-desc {
	margin: 0 0 12px;
	color: #667085;
	font-size: 14px;
	line-height: 1.5;
}

/* ── Per-table block ─────────────────────────────────────────────────────── */
.ref-block {
	margin-top: 28px;
}

.ref-block > summary {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 700;
	color: #1d2327;
}

.ref-block[open] > summary {
	margin-bottom: 10px;
}

.ref-block > .ref-desc {
	margin-bottom: 10px;
}

/* ── Reference table ─────────────────────────────────────────────────────── */
.ref-scroll {
	overflow-x: auto;
	border: 1px solid #d7dde5;
	border-radius: 8px;
}

.ref-table {
	width: 100%;
	min-width: 520px;
	border-collapse: collapse;
	font-size: 13px;
	background: #fff;
}

.ref-table th,
.ref-table td {
	padding: 9px 12px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid #e5eaf0;
}

.ref-table th {
	background: #f8fafc;
	color: #344054;
	font-weight: 600;
	white-space: nowrap;
}

.ref-table tr:last-child td { border-bottom: 0; }

.ref-table tr.ref-group-header td {
	background: #dce8f5;
	font-weight: 700;
	color: #1d4f7c;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .04em;
	border-bottom: 1px solid #b8cfe6;
	padding: 7px 12px;
}

.ref-table tr.ref-group-sub td {
	background: #eef4fb;
	font-weight: 600;
	color: #344054;
	font-size: 12px;
	font-style: italic;
	border-bottom: 1px solid #d0dcea;
	padding: 5px 12px 5px 20px;
}

/* ── Source line ─────────────────────────────────────────────────────────── */
.ref-source {
	margin: 8px 0 0;
	color: #667085;
	font-size: 13px;
}

/* ── Legal list ──────────────────────────────────────────────────────────── */
.ref-legal-list {
	margin: 0;
	padding-left: 20px;
	font-size: 14px;
	line-height: 1.7;
}

/* ── Details/summary ─────────────────────────────────────────────────────── */
.rbtc-details {
	border: 1px solid #d7dde5;
	border-radius: 8px;
	background: #fff;
	padding: 10px 14px;
	margin-top: 12px;
}

.rbtc-details summary {
	cursor: pointer;
	font-weight: 700;
	font-size: 14px;
	user-select: none;
}

/* Breakdown table inside details */
.rbtc-details .scroll table {
	min-width: 600px;
	font-size: 13px;
}

/* ── Warning list ────────────────────────────────────────────────────────── */
.warning-list {
	margin: 10px 0 0;
	padding-left: 18px;
	color: #7a4b00;
	font-size: 13px;
	line-height: 1.5;
}

/* ── Hint ────────────────────────────────────────────────────────────────── */
.hint {
	margin: 4px 0 0;
	color: #667085;
	font-size: 12px;
	line-height: 1.45;
}

/* ── Built-in request form ───────────────────────────────────────────────── */
.rbtc-request-wrapper {
	margin-top: 24px;
	padding: 22px 24px;
	background: #fff;
	border: 1px solid #d7dde5;
	border-radius: 8px;
}

.rbtc-request-wrapper h3 {
	margin: 0 0 6px;
	font-size: 18px;
}

.rbtc-request-intro {
	margin: 0 0 18px;
	color: #667085;
	font-size: 14px;
	line-height: 1.5;
}

.rbtc-request-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.rbtc-request-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.rbtc-request-field--full {
	grid-column: 1 / -1;
}

.rbtc-request-field label {
	font-size: 14px;
	font-weight: 600;
	color: #344054;
}

.rbtc-req {
	color: #c0392b;
}

.rbtc-request-field input,
.rbtc-request-field textarea {
	min-height: 40px;
	padding: 8px 12px;
	border: 1px solid #c8d2de;
	border-radius: 7px;
	font-size: 15px;
	color: inherit;
	background: #fff;
	transition: border-color .15s;
}

.rbtc-request-field input:focus,
.rbtc-request-field textarea:focus {
	outline: none;
	border-color: #0b6bcb;
}

.rbtc-request-field textarea {
	min-height: 76px;
	resize: vertical;
}

.rbtc-request-actions {
	margin-top: 16px;
}

.rbtc-request-btn {
	min-height: 42px;
	padding: 0 24px;
	font-size: 15px;
	font-weight: 700;
	border-radius: 6px;
	cursor: pointer;
}

.rbtc-request-btn:disabled { opacity: .65; cursor: default; }

.rbtc-request-result {
	margin-top: 14px;
	padding: 12px 16px;
	border-radius: 7px;
	font-size: 14px;
}

.rbtc-request-result--success {
	background: #f0fdf4;
	border: 1px solid #a7f3d0;
	color: #065f46;
}

.rbtc-request-result--error {
	background: #fff3f0;
	border: 1px solid #f4c7bf;
	color: #7a1e0a;
}

@media ( max-width: 600px ) {
	.rbtc-request-fields { grid-template-columns: 1fr; }
}

/* ── Error / loading states ──────────────────────────────────────────────── */
.rbtc-loading-state {
	padding: 20px;
	color: #667085;
}

.rbtc-error {
	padding: 14px 18px;
	background: #fff3f0;
	border: 1px solid #f4c7bf;
	border-radius: 8px;
	color: #7a1e0a;
	font-size: 14px;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media ( max-width: 860px ) {
	.input-form {
		padding: 14px;
		gap: 12px;
	}

	.input-row {
		grid-template-columns: 1fr;
		gap: 6px;
	}

	.input-label {
		justify-content: flex-start;
		text-align: left;
		font-size: 15px;
	}

	.input-control { flex-wrap: wrap; }

	.input-rates,
	.input-actions,
	.form-section-title {
		margin-left: 0;
	}

	.calc-line {
		grid-template-columns: 1fr;
		gap: 5px;
		padding: 12px 0;
	}

	.calc-output {
		padding: 4px 12px 12px;
	}

	.calc-value { font-size: 20px; }
	.calc-line.total .calc-value,
	.calc-line.landed .calc-value { font-size: 22px; }

	.recycling-years { display: block; overflow-x: auto; }
}