/*
 * Calculator styles — scoped under .koda-calc and built on Koda's own tokens
 * (falls back to literals if the theme's tokens.css is absent, so the plugin
 * is self-contained on any theme, as the RfP requires).
 */
.koda-calc {
	--kc-navy: var(--primary-black, #030a2c);
	--kc-blue: var(--primary-blue, #1c48f0);
	--kc-surface: #f5f6f6;
	--kc-line: #e1e1e1;
	--kc-ink-muted: #343c58;

	font-family: inherit;
	color: var(--kc-navy);
	display: grid;
	gap: 3.2rem;
}

/* Two-column tool layout: form left, results sticky right — the results stay
   in view while the user edits inputs. (A media query, not @container: the
   container-type would have to live on a theme-owned ancestor, and this
   plugin cannot rely on the theme.) */
@media (min-width: 1024px) {
	.koda-calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5.6rem; align-items: start; }
	.koda-calc__results { position: sticky; top: 12.8rem; }
}

.koda-calc *, .koda-calc *::before, .koda-calc *::after { box-sizing: border-box; }

.koda-calc__form { display: grid; gap: 2rem; }
.koda-calc fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 1.6rem; }
/* Wide screens: identity fields span; the two RATES pair on one row (like
   belongs with like), the date takes its own full row — no orphan cell. */
@media (min-width: 1024px) {
	.koda-calc fieldset { grid-template-columns: 1fr 1fr; gap: 1.6rem 2rem; }
	.koda-calc__field:nth-of-type(1), .koda-calc__field:nth-of-type(2) { grid-column: 1 / -1; }
	.koda-calc__field:nth-of-type(3) { order: 3; }  /* Stawka VAT   */
	.koda-calc__field:nth-of-type(5) { order: 4; }  /* Stawka PCC   */
	.koda-calc__field:nth-of-type(4) { order: 5; grid-column: 1 / -1; }  /* Data */
}

/* Date control: brand ink on the native indicator (navy via filter), same
   frame discipline as every other field. */
.koda-calc__field input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(11%) sepia(31%) saturate(2853%) hue-rotate(212deg) brightness(92%);
	cursor: pointer; padding: .6rem;
}
.koda-calc legend { font-weight: 800; font-size: 1.4rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0 0 0.8rem; }

.koda-calc__field { display: grid; gap: 0.8rem; }
/* Labels speak the site's kicker grammar, not browser-default gray. */
.koda-calc__field label {
	font-size: 1.15rem; font-weight: 800; letter-spacing: .1em;
	text-transform: uppercase; color: #5f6880;
}
.koda-calc__field input,
.koda-calc__field select {
	font: inherit;
	font-size: 1.7rem;
	font-weight: 700;
	height: 5.6rem;
	padding: 0 1.6rem;
	border: 1px solid #d5d9e2;
	border-radius: 0;
	background: #fff;
	color: var(--kc-navy);
	width: 100%;
	font-variant-numeric: tabular-nums;
	transition: border-color .18s ease, box-shadow .18s ease;
}
/* The unit rides inside the frame — financial inputs read as amounts. */
.koda-calc__control { position: relative; }
.koda-calc__control input { padding-right: 5.6rem; }
.koda-calc__affix {
	position: absolute; right: 1.6rem; top: 50%; transform: translateY(-50%);
	font-size: 1.25rem; font-weight: 800; letter-spacing: .08em; color: #8590ad;
	pointer-events: none;
}
/* Select: the brand chevron, not the platform widget. */
.koda-calc__field select {
	appearance: none; -webkit-appearance: none;
	padding-right: 4.4rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231c48f0' stroke-width='2'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 1.6rem center;
}
/* Hover acknowledges the pointer before focus commits — same quiet
   progression as the landing's rows. */
.koda-calc__field input:hover,
.koda-calc__field select:hover { border-color: #9aa3b8; }
.koda-calc__field input:focus,
.koda-calc__field select:focus { outline: 2px solid var(--kc-blue); outline-offset: 1px; border-color: var(--kc-blue); }

.koda-calc__hint { font-size: 1.3rem; color: var(--kc-ink-muted); margin: 0; }

/* Disclosures speak the landing's grammar: no native triangle — a brand-blue
   arrow that rotates open, and the label ignites on hover. */
.koda-calc__advanced summary,
.koda-calc__details summary { list-style: none; display: flex; align-items: center; gap: 1rem; min-height: 4.4rem; transition: color .18s ease; }
.koda-calc__advanced summary::-webkit-details-marker,
.koda-calc__details summary::-webkit-details-marker { display: none; }
.koda-calc__advanced summary::before,
.koda-calc__details summary::before { content: "→"; color: var(--kc-blue); font-weight: 500; transition: transform .25s cubic-bezier(.22,.61,.36,1); }
.koda-calc__advanced[open] > summary::before,
.koda-calc__details[open] > summary::before { transform: rotate(90deg); }
.koda-calc__advanced summary:hover,
.koda-calc__details summary:hover { color: var(--kc-blue); }
.koda-calc__advanced summary {
	cursor: pointer; font-weight: 800; font-size: 1.4rem;
	text-transform: uppercase; letter-spacing: 0.04em; padding: 1rem 0;
}
.koda-calc__advanced[open] { display: grid; gap: 1.6rem; padding-bottom: 0.8rem; }

/* Split payment is a real switch, not a checkbox in a sentence. */
.koda-calc__split { border-top: 1px solid var(--kc-line); padding-top: 2rem; }
.koda-calc__switch { display: flex; align-items: center; gap: 1.2rem; cursor: pointer; font-size: 1.5rem; font-weight: 700; color: var(--kc-navy); }
.koda-calc__switch input {
	appearance: none; -webkit-appearance: none;
	width: 4.4rem; height: 2.4rem; flex: 0 0 4.4rem;
	background: #c6cbd4; border-radius: 1.2rem; position: relative;
	cursor: pointer; transition: background .2s ease; margin: 0;
}
.koda-calc__switch input::after {
	content: ""; position: absolute; top: .3rem; left: .3rem;
	width: 1.8rem; height: 1.8rem; border-radius: 50%; background: #fff;
	transition: transform .2s cubic-bezier(.22,.61,.36,1);
	box-shadow: 0 1px 3px rgba(3,10,44,.3);
}
.koda-calc__switch input:checked { background: var(--kc-blue); }
.koda-calc__switch input:checked::after { transform: translateX(2rem); }
.koda-calc__switch input:focus-visible { outline: 2px solid var(--kc-blue); outline-offset: 2px; }
.koda-calc__split .koda-calc__hint { margin-top: .8rem; padding-left: 5.6rem; }

/* results */
.koda-calc__results { display: grid; gap: 2rem; align-content: start; }
.koda-calc__kpis { display: grid; gap: 1.2rem; }
.koda-calc__kpi { background: #fff; border: 1px solid var(--kc-line); border-left: 3px solid #c6cbd4; padding: 2rem 2.4rem; display: grid; gap: 0.6rem; }
.koda-calc__kpi--primary { background: var(--kc-navy); border-color: var(--kc-navy); border-left-color: var(--kc-blue); color: #fff; padding: 2.6rem 2.4rem; }
.koda-calc__kpi:has(.koda-calc__kpi-value--accent) { border-left-color: var(--kc-blue); }
.koda-calc__kpi-label { font-size: 1.15rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: 0.75; }
/* Tabular digits: live recompute must not make the numbers jitter sideways. */
.koda-calc__kpi-value { font-size: clamp(2.6rem, 2rem + 3vw, 4rem); font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.koda-calc__kpi-value--accent { color: var(--kc-blue); }
.koda-calc__kpi--primary .koda-calc__kpi-value { color: #fff; }

.koda-calc__details summary { cursor: pointer; font-weight: 800; font-size: 1.4rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 1rem 0; }
.koda-calc__breakdown { display: grid; gap: 0.4rem; }
/* The floating chat FAB owns the viewport's bottom-right ~7rem; on most
   desktop widths the results column reaches under it, hiding the "Razem"
   totals. Reserve the lane whenever the FAB can plausibly overlap. */
@media (min-width: 1024px) and (max-width: 1919px) {
	.koda-calc__breakdown { padding-right: 5.6rem; }
}
.koda-calc__breakdown h4 { margin: 1.6rem 0 0.4rem; font-size: 1.5rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--kc-ink-muted); }
.koda-calc__row { display: flex; justify-content: space-between; gap: 2rem; padding: 0.8rem 0; border-bottom: 1px solid var(--kc-line); font-size: 1.6rem; }
.koda-calc__row--total { font-weight: 800; border-bottom-width: 2px; border-color: var(--kc-navy); }

.koda-calc__disclaimer { font-size: 1.3rem; color: var(--kc-ink-muted); margin: 0; }
.koda-calc__error { color: #b3261e; font-size: 1.5rem; }


/* Screen-reader-only heading, and the announced status/validation line. */
.koda-calc__sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.koda-calc__status { margin: 0; font-size: 1.5rem; min-height: 1.5rem; color: var(--kc-ink-muted); }
/* Above the theme's `.koda-prose .koda-calc p { color: inherit }` shield
   (0,2,1) regardless of load order, so the error actually reads as an error;
   red unified with the site's #b3261e. */
.koda-calc p.koda-calc__status.koda-calc__status--error { color: #b3261e; font-weight: 700; }

/* Download-report button */
.koda-calc__download {
	font: inherit; font-weight: 800; font-size: 1.4rem; text-transform: uppercase;
	letter-spacing: 0.04em; padding: 1.6rem 3.2rem; border: 0; border-radius: 0;
	background: var(--kc-blue); color: #fff; cursor: pointer; justify-self: start;
	transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.koda-calc__download::after { content: " →"; font-weight: 500; }
.koda-calc__download:hover { background: #1638c2; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(28, 72, 240, .22); }
.koda-calc__download:disabled { opacity: 0.4; cursor: not-allowed; }
.koda-calc__download:focus-visible { outline: 2px solid var(--kc-navy); outline-offset: 2px; }