/* Kalkulator zatezne kamate. Uses the site's CSS variables; fallbacks only for standalone preview. */
.zk {
  --zk-bg: var(--bg, #fff);
  --zk-fg: var(--fg, #111);
  --zk-muted: var(--muted, #5c5c5c);
  --zk-accent: var(--accent, #1f5eff);
  --zk-ink: var(--accent-ink, #006b4f);
  --zk-line: var(--line, #d9d9d9);
  --zk-card: var(--card, #f6f6f6);
  color: var(--zk-fg);
  max-width: 44rem;
  font-variant-numeric: tabular-nums;
}
.zk *, .zk *::before, .zk *::after { box-sizing: border-box; }

.zk-form {
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--zk-card);
  border: 1px solid var(--zk-line);
  border-radius: 12px;
}
.zk-dates { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.zk-field { display: grid; gap: .35rem; align-content: start; }
.zk-field > label { font-weight: 600; }
.zk-input { position: relative; }
.zk input[type="text"], .zk input[type="date"] {
  width: 100%;
  min-height: 2.75rem;
  padding: .55rem .75rem;
  font: inherit;
  color: var(--zk-fg);
  background: var(--zk-bg);
  border: 1px solid var(--zk-line);
  border-radius: 8px;
}
.zk input[type="text"] { padding-right: 3.25rem; font-size: 1.15rem; }
.zk-unit { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); color: var(--zk-muted); pointer-events: none; }
.zk input[aria-invalid="true"] { border-color: #c62828; }

.zk :focus-visible { outline: 2px solid var(--zk-accent); outline-offset: 2px; }

.zk-btn {
  justify-self: start;
  min-height: 2.75rem;
  padding: .6rem 1.25rem;
  font: inherit;
  font-weight: 600;
  color: var(--zk-bg);
  background: var(--zk-fg);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.zk-hint { margin: 0; font-size: .9rem; color: var(--zk-muted); }
.zk-error { margin: 0; font-size: .9rem; color: #c62828; }
.zk-error:empty { display: none; }
.zk-warn {
  margin: .75rem 0 0;
  padding: .75rem 1rem;
  font-size: .9rem;
  border: 1px solid var(--zk-line);
  border-left: 3px solid #b26a00;
  border-radius: 0 8px 8px 0;
  background: var(--zk-card);
}

.zk-out:not(:empty) { margin-top: 1.25rem; display: grid; gap: .75rem; }
.zk-summary { font-size: 1.15rem; margin: 0; }
.zk-scroll { overflow-x: auto; }
.zk-table { width: 100%; border-collapse: collapse; }
.zk-table caption { caption-side: top; text-align: left; font-weight: 600; font-size: inherit; color: var(--zk-fg); padding: 0 0 .5rem; }
/* Reset the site-wide th/td look (uppercase, wide padding) inside the tool. */
.zk-table th, .zk-table td {
  padding: .55rem .5rem .55rem 0;
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
  border-bottom: 1px solid var(--zk-line);
  vertical-align: top;
}
.zk-table tr:last-child td { border-bottom: 1px solid var(--zk-line); }
.zk-table thead th { font-size: .85rem; color: var(--zk-muted); font-weight: 600; text-align: right; }
.zk-table thead th:first-child { text-align: left; }
.zk-table tbody th, .zk-table tfoot th { text-align: left; font-weight: 400; }
.zk-table td { text-align: right; white-space: nowrap; }
.zk-table td:last-child, .zk-table th:last-child { padding-right: 0; }
.zk-table .zk-key th, .zk-table .zk-key td { font-weight: 700; }
.zk-table .zk-total td { color: var(--zk-ink); }
.zk-rates td:first-child { text-align: left; white-space: normal; }

.zk-note { margin: 1rem 0 0; font-size: .9rem; color: var(--zk-muted); }
.zk-bridge {
  margin: 1rem 0 0;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--zk-accent);
  background: var(--zk-card);
  border-radius: 0 8px 8px 0;
}
.zk-bridge a { color: var(--zk-ink); font-weight: 600; }

.zk-sources { margin-top: 1rem; font-size: .9rem; color: var(--zk-muted); }
.zk-sources summary { cursor: pointer; color: var(--zk-fg); font-weight: 600; min-height: 2.75rem; display: flex; align-items: center; }
.zk-sources ul { padding-left: 1.1rem; display: grid; gap: .5rem; }
.zk-sources strong { color: var(--zk-fg); }
.zk-sources a { color: var(--zk-ink); }
.zk-sources q { overflow-wrap: anywhere; }
.zk-sources .zk-table { margin-top: .5rem; }

@media (max-width: 480px) {
  .zk-form { padding: 1rem; }
  .zk-btn { justify-self: stretch; }
  .zk-table { font-size: .9rem; }
}