/* Ремонт Калкулатор. Цветовете се сменят от тези променливи. */
.rk-calc {
	--rk-accent: #1f6fb2;
	--rk-border: #d9dde3;
	--rk-soft: #f5f7fa;
	--rk-bad: #c62828;
	margin: 1.5em 0;
	padding: 1.25em;
	border: 1px solid var(--rk-border);
	border-radius: 8px;
	background: #fff;
	font-size: 15px;
	line-height: 1.4;
	box-sizing: border-box;
	max-width: 100%;
}
.rk-calc *, .rk-calc *::before, .rk-calc *::after { box-sizing: border-box; }
.rk-calc .rk-title { margin: 0 0 .75em; }

.rk-calc .rk-table { width: 100%; border-collapse: collapse; margin: 0; border: 0; }
.rk-calc .rk-table th,
.rk-calc .rk-table td { padding: .55em .5em; border: 0; border-bottom: 1px solid var(--rk-border); text-align: left; vertical-align: middle; background: none; }
.rk-calc thead th { font-weight: 600; font-size: .85em; text-transform: uppercase; letter-spacing: .03em; color: #555; border-bottom: 2px solid var(--rk-border); }
.rk-calc .rk-name { font-weight: 400; }
.rk-calc .rk-sum-col { text-align: right; white-space: nowrap; }
.rk-calc .rk-row.rk-active { background: var(--rk-soft); }
.rk-calc .rk-row.rk-active .rk-sum { font-weight: 600; color: var(--rk-accent); }

.rk-calc .rk-field { display: inline-flex; align-items: center; gap: .35em; margin: 0; white-space: nowrap; }
.rk-calc .rk-in {
	width: 5.5em; padding: .4em .5em; margin: 0;
	border: 1px solid var(--rk-border); border-radius: 5px;
	font: inherit; background: #fff; color: inherit;
}
.rk-calc .rk-in:focus { outline: 2px solid var(--rk-accent); outline-offset: 0; border-color: var(--rk-accent); }
.rk-calc .rk-in.rk-bad { border-color: var(--rk-bad); outline-color: var(--rk-bad); }
.rk-calc .rk-unit { color: #666; font-size: .9em; }
.rk-calc .rk-note { display: block; color: #777; font-size: .85em; margin-top: .2em; }

.rk-calc .rk-total {
	margin-top: 1em; padding: .9em 1em;
	border-radius: 6px; background: var(--rk-soft);
	font-size: 1.05em;
}
.rk-calc .rk-total.rk-has-total { background: var(--rk-accent); color: #fff; }
.rk-calc .rk-total strong { font-size: 1.25em; }
.rk-calc .rk-reset {
	margin-top: .75em; padding: .45em 1em;
	border: 1px solid var(--rk-border); border-radius: 5px;
	background: #fff; color: #333; font: inherit; cursor: pointer;
}
.rk-calc .rk-reset:hover { border-color: var(--rk-accent); color: var(--rk-accent); }

/*
 * Изрични цветове, за да не ги променя темата (напр. бял текст).
 * Сменят се от --rk-text, --rk-muted, --rk-bg.
 */
div.rk-calc.rk-calc { --rk-text: #2b2b2b; --rk-muted: #666; --rk-bg: #fff; background: var(--rk-bg) !important; color: var(--rk-text) !important; }
div.rk-calc.rk-calc h3,
div.rk-calc.rk-calc th,
div.rk-calc.rk-calc td,
div.rk-calc.rk-calc label,
div.rk-calc.rk-calc span,
div.rk-calc.rk-calc strong,
div.rk-calc.rk-calc p,
div.rk-calc.rk-calc .rk-total { color: var(--rk-text) !important; -webkit-text-fill-color: currentColor; text-shadow: none !important; }
div.rk-calc.rk-calc thead th,
div.rk-calc.rk-calc .rk-unit,
div.rk-calc.rk-calc small.rk-note { color: var(--rk-muted) !important; }
div.rk-calc.rk-calc input.rk-in { color: var(--rk-text) !important; background: #fff !important; -webkit-text-fill-color: var(--rk-text); }
div.rk-calc.rk-calc input.rk-in::placeholder { color: #9a9a9a !important; -webkit-text-fill-color: #9a9a9a; opacity: 1; }
div.rk-calc.rk-calc .rk-row.rk-active .rk-sum { color: var(--rk-accent) !important; }
div.rk-calc.rk-calc .rk-total.rk-has-total,
div.rk-calc.rk-calc .rk-total.rk-has-total * { color: #fff !important; }
div.rk-calc.rk-calc button.rk-reset { color: #333 !important; background: #fff !important; }
div.rk-calc.rk-calc button.rk-reset:hover { color: var(--rk-accent) !important; }
div.rk-calc.rk-calc .rk-table th,
div.rk-calc.rk-calc .rk-table td { background: transparent !important; }
div.rk-calc.rk-calc .rk-row.rk-active > * { background: var(--rk-soft) !important; }

/* Телефони: всеки ред става карта. */
@media (max-width: 640px) {
	.rk-calc { padding: 1em; }
	.rk-calc thead { display: none; }
	.rk-calc .rk-table, .rk-calc tbody, .rk-calc .rk-row, .rk-calc .rk-row > * { display: block; width: 100%; }
	.rk-calc .rk-row { padding: .6em 0; border-bottom: 1px solid var(--rk-border); }
	.rk-calc .rk-table .rk-row > * { border: 0; padding: .25em 0; }
	.rk-calc .rk-table .rk-row:last-child { border-bottom: 0; }
	.rk-calc .rk-unit { min-width: 2.8em; }
	.rk-calc .rk-name { font-weight: 600; }
	.rk-calc .rk-row.rk-active { background: none; }
	.rk-calc .rk-price, .rk-calc .rk-qty, .rk-calc .rk-sum { display: flex; justify-content: space-between; align-items: center; text-align: left; }
	.rk-calc .rk-price { flex-wrap: wrap; }
	.rk-calc .rk-price::before, .rk-calc .rk-qty::before, .rk-calc .rk-sum::before { content: attr(data-label); color: #666; font-size: .9em; }
	.rk-calc .rk-note { flex-basis: 100%; text-align: right; }
	.rk-calc .rk-in { width: 6.5em; font-size: 16px; }
}
