/* === Kalkulator formy opodatkowania. Ładowany tylko na swojej podstronie === */

/* minmax(0,1fr), nie 1fr. Zwykłe `1fr` ma dolną granicę na poziomie min-content, więc
 * tabela szczegółowa z `min-width:660px` rozpychała całą kolumnę i strona przewijała się
 * w poziomie na telefonie. Kontener tabeli ma własne przewijanie i to on ma się zwężać. */
.kfo{display:grid;gap:24px;align-items:start;grid-template-columns:minmax(0,1fr)}
@media(min-width:1024px){.kfo{grid-template-columns:380px minmax(0,1fr);gap:32px}}

/* ---------- panel wejściowy ---------- */
.kfo-panel{background:#fff;border:1px solid var(--go-hairline);border-radius:var(--go-r-lg);padding:24px}
@media(min-width:1024px){.kfo-panel{position:sticky;top:96px}}
.kfo-panel__tytul{font-family:var(--go-font-display);font-weight:800;font-size:18px;color:var(--go-ink);margin-bottom:4px}
.kfo-panel__lead{font-size:13.5px;color:var(--go-text-2);margin-bottom:20px}

.kfo-pole{display:block;margin-bottom:20px}
.kfo-pole__etykieta{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
	flex-wrap:wrap;font-size:13px;font-weight:600;color:var(--go-text-2);margin-bottom:7px}
.kfo-pole__pomoc{font-weight:500;color:var(--go-muted)}
.kfo-pole__wejscie{display:flex;align-items:center;gap:8px;border:1px solid var(--go-field);
	border-radius:var(--go-r-sm);background:#fff;padding:0 14px;transition:border-color .15s,box-shadow .15s}
.kfo-pole__wejscie:focus-within{border-color:var(--go-teal);box-shadow:0 0 0 3px var(--go-tint)}
.kfo-pole__wejscie input{flex:1;min-width:0;border:0;outline:0;background:transparent;
	font:inherit;font-weight:600;font-size:17px;color:var(--go-ink);padding:13px 0;text-align:right}
.kfo-pole__jedn{font-size:14px;font-weight:600;color:var(--go-muted)}

/* Suwak: szybkie przemiatanie wartości, pole tekstowe do wpisania konkretu. */
.kfo-suwak{-webkit-appearance:none;appearance:none;width:100%;height:4px;margin-top:12px;
	border-radius:3px;background:var(--go-field);cursor:pointer}
.kfo-suwak::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
	background:var(--go-teal);border:3px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.25);cursor:pointer}
.kfo-suwak::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--go-teal);
	border:3px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.25);cursor:pointer;border-color:#fff}
.kfo-suwak:focus-visible{outline:2px solid var(--go-teal);outline-offset:4px}

.kfo-select{width:100%;height:46px;border:1px solid var(--go-field);border-radius:var(--go-r-sm);
	background:#f7f9fb;padding:0 36px 0 12px;font:inherit;font-size:14px;font-weight:600;color:var(--go-ink);
	cursor:pointer;-webkit-appearance:none;appearance:none;
	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' stroke='%239aa6b4' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat:no-repeat;background-position:right 14px center}
/* Oba są znacznikami <span> wewnątrz <label>, więc bez display:block zachowywały się jak
 * tekst liniowy: margines górny nie działał, a tło i obramowanie podpowiedzi rozpadały się
 * na osobne prostokąty przy każdym zawinięciu wiersza. */
.kfo-opis{display:block;font-size:12.5px;color:var(--go-text-2);margin-top:7px;line-height:1.5}
.kfo-uwaga{display:block;font-size:12.5px;color:#8a6d1f;background:#fdf6e3;border:1px solid #f0e2b6;
	border-radius:var(--go-r-sm);padding:10px 12px;margin-top:10px;line-height:1.5}

/* Przełącznik wariantu ZUS. */
.kfo-seg{display:grid;grid-template-columns:1fr;gap:6px}
@media(min-width:420px){.kfo-seg{grid-template-columns:1fr 1fr 1fr}}
.kfo-seg__opt{border:1px solid var(--go-field);border-radius:9px;background:#fff;padding:10px 8px;
	font:inherit;font-size:13px;font-weight:600;color:var(--go-text-2);cursor:pointer;text-align:center;
	transition:border-color .15s,background .15s,color .15s;line-height:1.3}
.kfo-seg__opt:hover{border-color:var(--go-teal)}
.kfo-seg__opt.is-active{border:1.5px solid var(--go-teal);background:var(--go-tint);color:var(--go-teal-deep);font-weight:700}
.kfo-seg__opt small{display:block;font-weight:500;font-size:11px;color:var(--go-muted);margin-top:2px}
.kfo-seg__opt.is-active small{color:var(--go-teal-deep);opacity:.8}

.kfo-check{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--go-text);
	margin-bottom:12px;cursor:pointer;line-height:1.45}
.kfo-check input{margin:1px 0 0;width:20px;height:20px;accent-color:var(--go-teal);flex:0 0 auto;cursor:pointer}
.kfo-check span small{display:block;color:var(--go-muted);font-size:12px;margin-top:1px}

.kfo-akcje{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px;padding-top:18px;border-top:1px solid var(--go-hairline)}
.kfo-akcje button{flex:1;min-width:140px;border:1px solid var(--go-field);background:#fff;border-radius:9px;
	padding:11px 12px;font:inherit;font-size:13.5px;font-weight:600;color:var(--go-text-2);cursor:pointer;
	transition:border-color .15s,color .15s}
.kfo-akcje button:hover{border-color:var(--go-teal);color:var(--go-teal-deep)}

/* ---------- wyniki ---------- */
.kfo-wyniki{display:grid;gap:20px;min-width:0;grid-template-columns:minmax(0,1fr)}
.kfo-wyniki>*{min-width:0}

.kfo-karty{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.kfo-karty{grid-template-columns:repeat(3,minmax(0,1fr))}}
.kfo-karta{background:#fff;border:1px solid var(--go-hairline);border-radius:var(--go-r-lg);padding:20px;
	display:flex;flex-direction:column}
.kfo-karta--best{border:1.5px solid var(--go-teal);box-shadow:0 12px 32px rgba(15,131,208,.12)}
.kfo-karta__head{display:flex;flex-direction:column;gap:7px;min-height:52px}
.kfo-karta__head h3{font-size:16px;font-family:var(--go-font-display);font-weight:800;color:var(--go-ink)}
.kfo-karta__badge{align-self:flex-start;background:var(--go-teal);color:#fff;font-size:11px;font-weight:700;
	letter-spacing:.04em;text-transform:uppercase;padding:4px 9px;border-radius:99px}
.kfo-karta__diff{font-size:12.5px;color:var(--go-text-2);line-height:1.4}
.kfo-karta__kwota{font-family:var(--go-font-display);font-weight:800;font-size:29px;line-height:1.1;
	color:var(--go-ink);margin-top:12px}
.kfo-karta__kwota span{display:block;font-family:var(--go-font-text);font-size:12.5px;font-weight:500;
	color:var(--go-muted);margin-top:3px}
.kfo-karta__rok{font-size:13.5px;color:var(--go-text-2);margin-top:6px}
.kfo-karta__lista{margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--go-hairline);
	display:flex;flex-direction:column;gap:7px;font-size:13.5px}
.kfo-karta__lista div{display:flex;justify-content:space-between;gap:10px}
.kfo-karta__lista dt{color:var(--go-text-2)}
.kfo-karta__lista dd{margin:0;font-weight:600;color:var(--go-ink);white-space:nowrap}
.kfo-karta__suma{padding-top:8px;margin-top:2px;border-top:1px dashed var(--go-hairline)}
.kfo-karta__suma dt{font-weight:600;color:var(--go-ink)!important}
.kfo-karta__stopa{margin-top:auto;padding-top:14px;font-size:12.5px;color:var(--go-text-2)}

/* ---------- wykres udziału obciążeń ---------- */
.kfo-blok{background:#fff;border:1px solid var(--go-hairline);border-radius:var(--go-r-lg);padding:22px}
.kfo-blok h3{font-size:16px;margin-bottom:4px}
.kfo-blok__lead{font-size:13px;color:var(--go-text-2);margin-bottom:16px}
.kfo-bar{display:grid;grid-template-columns:1fr;gap:5px;margin-bottom:14px;font-size:13px}
@media(min-width:560px){.kfo-bar{grid-template-columns:150px 1fr 110px;align-items:center;gap:12px}}
.kfo-bar__label{font-weight:600;color:var(--go-ink)}
.kfo-bar__track{display:flex;height:22px;border-radius:6px;overflow:hidden;background:var(--go-card-soft)}
.kfo-bar__seg{display:block;height:100%}
.kfo-bar__seg--podatek{background:var(--go-teal)}
.kfo-bar__seg--zdrow{background:#5eb0e5}
.kfo-bar__seg--spol{background:#b9d9ef}
.kfo-bar__seg--danina{background:#c0552b}
.kfo-bar__val{font-weight:600;color:var(--go-ink);text-align:left}
@media(min-width:560px){.kfo-bar__val{text-align:right}}
.kfo-legenda{display:flex;flex-wrap:wrap;gap:14px;font-size:12.5px;color:var(--go-text-2);margin-top:4px}
.kfo-legenda span{display:inline-flex;align-items:center;gap:6px}
.kfo-legenda i{width:11px;height:11px;border-radius:3px;display:inline-block}

/* ---------- tabela szczegółowa ---------- */
.kfo-tabela-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.kfo-tabela{width:100%;min-width:660px;border-collapse:collapse;font-size:13.5px}
.kfo-tabela th,.kfo-tabela td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--go-hairline);vertical-align:top}
.kfo-tabela thead th{font-family:var(--go-font-display);font-weight:800;color:var(--go-ink);font-size:14px;
	border-bottom:2px solid var(--go-hairline);position:sticky;top:0;background:#fff}
.kfo-tabela tbody th{font-weight:600;color:var(--go-text-2);width:230px}
.kfo-tabela td{color:var(--go-ink)}
.kfo-tabela tbody tr:last-child th,.kfo-tabela tbody tr:last-child td{border-bottom:0}

/* ---------- założenia ---------- */
.kfo-zalozenia{display:grid;gap:10px;font-size:13.5px;line-height:1.6;color:var(--go-text-2)}
.kfo-zalozenia li{margin-left:18px}
.kfo-zrodla{font-size:12.5px;color:var(--go-muted);margin-top:14px;line-height:1.6}
.kfo-zrodla a{color:var(--go-text-2);text-decoration:underline;text-underline-offset:2px}
.kfo-zrodla a:hover{color:var(--go-teal)}

/* ---------- Odkrywanie wyniku ---------- */
/* ---------- Zasłonięta nazwa formy ---------- */
.kfo-zakryte{position:relative;display:inline-flex;align-items:center;justify-content:center;
	vertical-align:baseline;min-width:84px}
.kfo-zakryte__tekst{filter:blur(5px);-webkit-filter:blur(5px);opacity:.5;
	user-select:none;-webkit-user-select:none;pointer-events:none;white-space:nowrap}
.kfo-zakryte__btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
	display:inline-flex;align-items:center;justify-content:center;
	border:0;background:none;color:#8a94a3;
	font:inherit;font-size:12.5px;font-weight:600;letter-spacing:.01em;
	text-decoration:underline;text-underline-offset:3px;
	padding:0;cursor:pointer;white-space:nowrap;line-height:1.35;
	transition:color .15s ease}
/* Niewidoczne pole dotykowe 44×32 px. Napis zostaje mały, ale trafia się w niego palcem.
 * Bez tego pseudoelementu przycisk przestaje spełniać minimum trafialności. */
.kfo-zakryte__btn::before{content:"";position:absolute;left:50%;top:50%;
	transform:translate(-50%,-50%);width:100%;height:32px;min-width:44px}
.kfo-zakryte__btn:hover{color:#52606f}
.kfo-zakryte__btn:focus-visible{outline:2px solid var(--go-ink);outline-offset:3px;border-radius:3px}
/* Wariant bez przycisku: powtórzenia nazwy w zdaniach i opisy mechanizmu. Jeden przycisk
   w zdaniu wystarczy, kilkanaście robiłoby z tekstu choinkę. */
.kfo-zakryte--sam{min-width:0}
.kfo-zakryte--sam .kfo-zakryte__tekst{opacity:.6}

/* Rozmiar napisu skalujemy samą czcionką, bez paddingu, osobno dla każdego kontekstu. */
.kfo-karta__head h3 .kfo-zakryte{min-width:112px}
.kfo-karta__head h3 .kfo-zakryte__btn{font-size:13px}
.kfo-tabela .kfo-zakryte{min-width:96px}
.kfo-tabela .kfo-zakryte__btn{font-size:11.5px}

/* ---------- Okno z prośbą o adres ---------- */
.kfo-modal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:20px}
.kfo-modal[hidden]{display:none}
.kfo-modal__tlo{position:absolute;inset:0;background:rgba(11,18,32,.62);backdrop-filter:blur(3px)}
.kfo-modal__karta{position:relative;background:#fff;border-radius:var(--go-r-xl);padding:28px;
	max-width:460px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 30px 80px rgba(11,18,32,.4)}
.kfo-modal__x{position:absolute;top:14px;right:14px;width:36px;height:36px;border:0;background:transparent;
	font-size:17px;color:var(--go-muted);cursor:pointer;border-radius:50%;line-height:1}
.kfo-modal__x:hover{background:var(--go-card-soft);color:var(--go-ink)}
.kfo-modal__tytul{font-size:20px;margin:12px 0 2px}
.kfo-modal__kwota{font-family:var(--go-font-display);font-weight:800;font-size:38px;line-height:1.1;
	color:var(--go-teal-deep);margin-bottom:12px}
.kfo-modal__kwota small{display:block;font-family:var(--go-font-text);font-size:13px;font-weight:500;
	color:var(--go-muted);margin-top:5px;line-height:1.45}
.kfo-modal__lead{font-size:14px;line-height:1.6;color:var(--go-text-2);margin-bottom:18px}
.kfo-modal__form{display:flex;flex-direction:column;gap:6px}
.kfo-modal__form .kfo-pole{margin-bottom:6px}
.kfo-modal__form .kfo-pole__wejscie input{text-align:left;font-size:15.5px;font-weight:500}
.kfo-modal__blad{font-size:13px;color:#c0552b;font-weight:600;margin:2px 0 4px}
.kfo-modal__mikro{font-size:12px;color:var(--go-muted);text-align:center;margin-top:10px;line-height:1.5}
.kfo-modal__karta .go-consent{margin:2px 0 6px}

@media(max-width:620px){
	.kfo-modal{padding:12px}
	.kfo-modal__karta{padding:22px}
	.kfo-modal__kwota{font-size:30px}
}

/* ---------- Podgląd administratora ---------- */
.kfo-admin{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
	background:repeating-linear-gradient(135deg,#fff8e1 0,#fff8e1 10px,#fdf3d3 10px,#fdf3d3 20px);
	border:1px dashed #d8b34a;border-radius:var(--go-r-sm);padding:10px 14px;font-size:13px}
.kfo-admin__etykieta{font-weight:700;color:#8a6d1f;text-transform:uppercase;font-size:11px;letter-spacing:.04em}
.kfo-admin__btn{border:1px solid #d8b34a;background:#fff;color:#7a5f14;font:inherit;font-size:12.5px;
	font-weight:600;padding:7px 12px;min-height:32px;border-radius:99px;cursor:pointer}
.kfo-admin__btn:hover{background:#7a5f14;color:#fff;border-color:#7a5f14}
.kfo-admin__btn--wyczysc{opacity:.75}