/* =========================================================================
   Изолации — калкулаторът на плащанията
   ------------------------------------------------------------------------
   Зарежда се САМО където стои шорткодът `[izolacii_calculator]`
   (izo_calculator_assets()). Останалите страници не плащат за него, по същата
   причина, поради която `objects.css` не върви с началната страница.

   Цветовете идват от токените в main.css, никога като литерали — така светлата
   визия („Изглед на сайта“) работи без нито един ред тук.

   ── Един екран ──────────────────────────────────────────────────────────
   Целият калкулатор трябва да се вижда без превъртане на лаптоп (Габе,
   15.09.2026): управлението, всичките схеми и изключението. Оттам идва всяка
   мярка по-долу — управлението е на РЕД, а не в колона; схемите са в КОЛОНА НА
   ОБЕКТ, тоест най-високата група определя височината, а не сборът на трите.
   Преди да се вдигне отстъп тук, си струва да се провери какво става на
   1440×900: това е екранът, за който е нагласено.

   Дисциплина на реда:
     · няма радиус по нищо структурно;
     · акцентът е плъзгачът и нищо друго — той Е действието на тази страница;
     · големите числа са Light 300, микронадписите са Bold 700.

   Прогресивно: всичко, което зависи от скрипт, стои под `.calc--js`, а класът
   се слага от `assets/js/calculator.js`. Без него страницата показва
   процентите на схемите и нито едно мъртво копче.
   ====================================================================== */

/* Ритъмът на страницата е `.section { padding-block }` в main.css; тук е
   модификатор, не отстъп на секция — правилото на дизайн-системата.

   ⚠️ Отгоре мярката НЕ е свободна: червеният блок с логото виси ПОД лентата с
   `--brand-drop` и заглавието влиза под него, ако отстъпът е по-малък. Същият
   израз като `.crumbs--top` в main.css — `max()`, защото `--logo-w` се смалява
   на тесен екран и разликата става отрицателна. */
.section--calc {
	padding-block: max(.75rem, calc(var(--brand-drop) + .75rem)) clamp(1rem, 2vw, 1.5rem);
}

/* Заглавието и редът под него са едно изречение, не рубрика — по-малко въздух
   под тях значи, че схемите влизат в същия екран. */
.section--calc .section__head { margin-block-end: 1rem; }

/* Управлението има смисъл само със скрипт: плъзгач, който не мести нищо, е
   по-лошо от липсващ плъзгач. */
.calc:not(.calc--js) .calc-panel { display: none; }

/* Сумите се дописват от скрипта; без него остават процентите. */
.calc:not(.calc--js) .calc-card__amt,
.calc:not(.calc--js) .calc-card__total { display: none; }

/* Изключена надбавка — значи и надписът „+5%“ не бива да стои. */
.calc:not(.calc--rough) .calc-card__badge { display: none; }

/* -------------------------------------------------------------------------
   Управлението — един ред, не колона
   ---------------------------------------------------------------------- */

.calc-panel {
	display: grid;
	gap: 1rem 2.5rem;
	margin-block-end: clamp(1.25rem, 2.4vw, 2rem);
	padding: 1rem 1.25rem 1.125rem;
	border: 1px solid var(--line);
	border-block-start: 3px solid var(--accent);
	background: var(--paper);
}

@media (min-width: 56rem) {
	.calc-panel {
		grid-template-columns: minmax(0, 1fr) 22rem;
		align-items: start;
	}
}

.calc-lbl {
	display: block;
	margin-block-end: .25rem;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--muted);
}

.calc-big {
	display: block;
	margin-block-end: .5rem;
	font-size: clamp(1.875rem, 4.6vw, 2.75rem);
	font-weight: 300;
	letter-spacing: -.02em;
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
}

/* Плъзгачът е рисуван от нула: никой браузър не дава запълнената част на
   пистата, а точно тя казва колко надясно е числото. `--calc-fill` се пише от
   скрипта при всяко движение. */
.calc-range {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: 1.375rem;
	margin: 0;
	background: transparent;
	cursor: pointer;
}

.calc-range::-webkit-slider-runnable-track {
	height: 4px;
	border: 0;
	background:
		linear-gradient(to right, var(--accent) var(--calc-fill, 0%), var(--line) var(--calc-fill, 0%));
}

.calc-range::-moz-range-track { height: 4px; border: 0; background: var(--line); }
.calc-range::-moz-range-progress { height: 4px; background: var(--accent); }

/* Квадратно, като всичко останало на сайта. 22px е минимумът, който пръст
   хваща, без да закрие числото под него. */
.calc-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 22px;
	height: 22px;
	margin-block-start: -9px;
	border: 0;
	border-radius: 0;
	background: var(--accent);
}

.calc-range::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border: 0;
	border-radius: 0;
	background: var(--accent);
}

.calc-range:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

.calc-scale {
	display: flex;
	justify-content: space-between;
	font-size: .75rem;
	font-variant-numeric: tabular-nums;
	color: var(--muted);
}

/* -------------------------------------------------------------------------
   Дясната колона: точна сума + ориентировъчната надбавка
   ---------------------------------------------------------------------- */

.calc-side { display: grid; gap: .75rem; align-content: start; }

.calc-manual { display: grid; gap: .3rem; }

.calc-manual label {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--muted);
}

.calc-manual input {
	width: 100%;
	padding: .55rem .75rem;
	border: 1px solid var(--line);
	border-radius: 0;
	background: var(--paper);
	color: var(--text);
	font: inherit;
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
}

.calc-manual input:focus {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
	border-color: var(--accent);
}

.calc-rough__box {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	font-size: .875rem;
	line-height: 1.45;
	cursor: pointer;
}

.calc-rough__box input {
	width: 1.0625rem;
	height: 1.0625rem;
	margin: .1rem 0 0;
	accent-color: var(--accent);
	flex: none;
}

.calc-note {
	margin: 0;
	font-size: .75rem;
	line-height: 1.5;
	color: var(--muted);
}

/* -------------------------------------------------------------------------
   Схемите — три картички на един ред

   Картичките заместиха таблицата (Габе, 15.09.2026): тя подреждаше вноските в
   колони и всяка схема без тази вноска получаваше тире, а картичката носи само
   своите вноски и има място за сбора и за разликата спрямо схема 1.
   ---------------------------------------------------------------------- */

.calc-cards {
	display: grid;
	gap: clamp(.875rem, 2vw, 1.25rem);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	align-items: start;
}

.calc-card {
	padding: .625rem .875rem .75rem;
	border: 1px solid var(--line);
	border-inline-start: 3px solid var(--accent);
	background: var(--paper);
}

.calc-card__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem;
}

.calc-card__no {
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--accent);
}

/* Сборът е притиснат надясно, надписът и надбавката остават вляво. */
.calc-card__total { margin-inline-start: auto; }

/* Надбавката на тази схема. Не е в акцентно червено: акцентът е плъзгачът. */
.calc-card__badge {
	padding: .1rem .375rem;
	background: color-mix(in srgb, var(--ink) 7%, var(--paper));
	font-size: .6875rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--muted);
}

.calc-card__sum {
	font-size: 1.375rem;
	font-weight: 300;
	letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
}

/* Колко е надбавката в евро. Празен елемент няма ред — схема 1 не носи
   разлика спрямо себе си, а скриптът просто оставя текста празен. */
.calc-card__vs {
	margin: .1rem 0 0;
	font-size: .6875rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--muted);
}

.calc-card__vs:empty { display: none; }

.calc-card__steps {
	display: grid;
	gap: .2rem;
	margin: .5rem 0 0;
	padding-block-start: .5rem;
	padding-inline: 0;
	border-block-start: 1px solid var(--line);
	list-style: none;
}

/* Три колони: срокът расте, процентът и сумата са точно колкото трябва — така
   числата на всички картички в колоната застават една под друга. */
.calc-card__step {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	gap: .5rem;
	align-items: baseline;
}

/* Текстът на клиента, дума по дума: „на Предварителен договор“,
   „до 31.03.2027 г.“ Без `text-transform` — главни букви по датите и
   съкращенията ги правят нечетими, а полето се превежда от администрацията. */
.calc-card__when {
	font-size: .8125rem;
	line-height: 1.35;
	color: var(--muted);
}

.calc-card__pct {
	font-size: .6875rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--muted);
}

.calc-card__amt {
	font-size: .9375rem;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
}

/* -------------------------------------------------------------------------
   Печат — схемите остават, управлението не
   ---------------------------------------------------------------------- */

@media print {
	.calc-panel { display: none; }
	.calc-card { break-inside: avoid; }
}