/* Katekizam Katoličke Crkve - čitalica (Kršćanska stvarnost)
 * Svi stilovi su ograničeni na #kkc kako ne bi utjecali na Joomla temu.
 * Dizajn usklađen s Biblijskom čitalicom (tamnoplava + zlatna). */

#kkc {
  /* Naslijedi boje teme ks_stvarnost ako postoje, inače vlastite. */
  --kkc-navy: var(--ks-navy-900, #082946);
  --kkc-navy-dark: var(--ks-navy-950, #05182b);
  --kkc-navy-light: rgba(255, 255, 255, 0.12);
  --kkc-gold: #C9A44C;
  --kkc-gold-dark: #3A2C05;
  --kkc-paper: #FBF8F1;
  --kkc-shade: #EEE3CB;
  --kkc-ink: #20180a;
  --kkc-soft: #736446;
  --kkc-line: #E4DCC8;
  --kkc-frame: var(--ks-line, #E4DCC8);
  --kkc-muted: #9FB2C4;
  --kkc-read: 18px;
  --kkc-h: 85vh;

  position: relative;
  display: block;
  height: var(--kkc-h);
  min-height: 460px;
  border: 1px solid var(--kkc-frame);
  border-radius: var(--ks-radius, 14px);
  overflow: hidden;
  container-type: inline-size;
  container-name: kkc;
  background: var(--kkc-paper);
  color: var(--kkc-ink);
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  box-shadow: var(--ks-shadow, 0 2px 14px rgba(8, 41, 70, 0.08));
}

/* Visoki kontrast (za slabovidne) */
#kkc.kkc-hc {
  --kkc-navy: #000000;
  --kkc-navy-dark: #000000;
  --kkc-navy-light: rgba(255, 255, 255, 0.25);
  --kkc-gold: #FFD700;
  --kkc-gold-dark: #000000;
  --kkc-paper: #000000;
  --kkc-shade: #333333;
  --kkc-ink: #FFFFFF;
  --kkc-soft: #FFD700;
  --kkc-line: #FFD700;
  --kkc-muted: #FFFFFF;
  border-color: #FFD700;
}

/* Preko cijelog zaslona */
#kkc:fullscreen { height: 100vh; border-radius: 0; border: none; }
#kkc:-webkit-full-screen { height: 100vh; border-radius: 0; border: none; }

#kkc *,
#kkc *::before,
#kkc *::after { box-sizing: border-box; }

#kkc button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
  margin: 0;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: none;
}

#kkc :focus-visible {
  outline: 3px solid var(--kkc-gold);
  outline-offset: 2px;
  border-radius: 6px;
}

#kkc .kkc-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

#kkc .kkc-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 90;
  background: var(--kkc-gold);
  color: var(--kkc-gold-dark);
  padding: 10px 16px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 8px 0;
}
#kkc .kkc-skip:focus { left: 0; }

#kkc .kkc-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 8px;
  flex-shrink: 0;
}
#kkc .kkc-icon-btn svg { width: 22px; height: 22px; }
#kkc .kkc-icon-btn:disabled { opacity: 0.35; cursor: default; }

/* ---------- Učitavanje ---------- */
#kkc .kkc-splash {
  position: absolute;
  inset: 0;
  background: var(--kkc-navy);
  color: var(--kkc-paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 70;
  text-align: center;
  padding: 20px;
}
#kkc .kkc-cross { width: 44px; height: 44px; color: var(--kkc-gold); }
#kkc .kkc-splash p { font-size: 14px; color: var(--kkc-muted); margin: 0; }
#kkc .kkc-spinner {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.25);
  border-top-color: var(--kkc-gold);
  animation: kkc-spin 0.8s linear infinite;
}
@keyframes kkc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  #kkc .kkc-spinner { animation: none; }
  #kkc * { transition: none !important; }
}

/* ---------- Aplikacija ---------- */
#kkc .kkc-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  visibility: hidden;
}
#kkc.kkc-ready .kkc-app { visibility: visible; }
#kkc.kkc-ready .kkc-splash { display: none; }

/* ---------- Zaglavlje ---------- */
#kkc .kkc-bar { background: var(--kkc-navy); flex-shrink: 0; }

#kkc .kkc-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px 6px;
  color: #E8EEF3;
  gap: 6px;
}
#kkc .kkc-title-row .kkc-icon-btn { color: #E8EEF3; }

#kkc .kkc-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: #E8EEF3;
}
#kkc .kkc-brand > svg { width: 17px; height: 17px; color: var(--kkc-gold); flex-shrink: 0; }
#kkc .kkc-brand-sub {
  width: 100%;
  text-align: center;
  font-size: 11px;
  font-weight: 400;
  color: var(--kkc-muted);
}
#kkc .kkc-actions { display: flex; flex-shrink: 0; }

#kkc .kkc-lang-row {
  display: flex;
  gap: 6px;
  padding: 0 10px 9px;
  overflow-x: auto;
  scrollbar-width: none;
}
#kkc .kkc-lang-row::-webkit-scrollbar { display: none; }

#kkc .kkc-lang-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 10px;
  background: var(--kkc-navy-light);
  color: #C7D3DE;
  flex-shrink: 0;
  line-height: 1;
}
#kkc .kkc-lang-pill img {
  width: 18px; height: 12px;
  border-radius: 2px;
  display: block;
  margin: 0;
  max-width: none;
}
#kkc .kkc-lang-pill.kkc-on { background: var(--kkc-gold); color: var(--kkc-gold-dark); }

/* ---------- Tijelo ---------- */
#kkc .kkc-body { display: flex; flex: 1; min-height: 0; }
#kkc .kkc-main { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }

#kkc .kkc-sidebar { display: none; }
@container kkc (min-width: 820px) {
  #kkc .kkc-sidebar {
    display: flex;
    flex-direction: column;
    width: 330px;
    flex-shrink: 0;
    border-right: 1px solid var(--kkc-line);
    background: var(--kkc-paper);
  }
  #kkc .kkc-sidebar-head { padding: 10px; border-bottom: 1px solid var(--kkc-line); }
  #kkc .kkc-sidebar-body { overflow-y: auto; flex: 1; padding: 6px; }
  #kkc #kkc-btn-books { display: none; }
}

/* Rezerva za preglednike bez podrške za container upite */
@supports not (container-type: inline-size) {
  @media (min-width: 1240px) {
    #kkc .kkc-sidebar {
      display: flex;
      flex-direction: column;
      width: 330px;
      flex-shrink: 0;
      border-right: 1px solid var(--kkc-line);
      background: var(--kkc-paper);
    }
    #kkc .kkc-sidebar-head { padding: 10px; border-bottom: 1px solid var(--kkc-line); }
    #kkc .kkc-sidebar-body { overflow-y: auto; flex: 1; padding: 6px; }
    #kkc #kkc-btn-books { display: none; }
  }
}

#kkc .kkc-select {
  width: 100%;
  padding: 9px 10px;
  font-size: 14px;
  font-family: inherit;
  border: 1px solid var(--kkc-line);
  border-radius: 8px;
  background: var(--kkc-paper);
  color: var(--kkc-ink);
  height: auto;
  margin: 0;
}
#kkc .kkc-voice { max-width: 240px; font-size: 13px; }

/* ---------- Kretanje ---------- */
#kkc .kkc-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  gap: 8px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--kkc-line);
}
#kkc .kkc-nav .kkc-icon-btn svg { color: var(--kkc-gold); width: 24px; height: 24px; }
#kkc .kkc-nav .kkc-icon-btn:disabled svg { color: var(--kkc-soft); }
#kkc .kkc-nav-title { text-align: center; flex: 1; min-width: 0; }
#kkc .kkc-unit {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.3;
  color: var(--kkc-ink);
}
#kkc .kkc-range { font-size: 11px; letter-spacing: 0.5px; color: var(--kkc-soft); margin-top: 3px; }

/* ---------- Čitanje ---------- */
#kkc .kkc-reading {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 18px 26px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--kkc-read);
  line-height: 1.75;
  outline: none;
}
@container kkc (min-width: 820px) { #kkc .kkc-reading { padding: 20px 34px 36px; } }
#kkc .kkc-inner { max-width: 760px; margin: 0 auto; }

#kkc .kkc-par {
  display: block;
  padding: 6px 8px;
  border-radius: 8px;
  margin: 0 0 6px;
  cursor: pointer;
}
#kkc .kkc-par sup {
  color: #8F6707;
  font-weight: 700;
  font-size: 0.66em;
  margin-right: 4px;
  vertical-align: super;
}
#kkc.kkc-hc .kkc-par sup { color: var(--kkc-gold); }
#kkc .kkc-par.kkc-playing { background: var(--kkc-shade); }
#kkc .kkc-par.kkc-playing sup { color: var(--kkc-navy); }
#kkc.kkc-hc .kkc-par.kkc-playing sup { color: var(--kkc-gold); }
#kkc .kkc-par.kkc-target { box-shadow: inset 0 0 0 2px var(--kkc-gold); }

#kkc .kkc-heading {
  font-family: Georgia, serif;
  font-size: 1.16em;
  font-weight: 700;
  color: var(--kkc-ink);
  margin: 0 0 4px;
  padding: 0 8px;
  line-height: 1.3;
}
#kkc .kkc-subheading {
  font-family: -apple-system, sans-serif;
  font-size: 0.72em;
  color: var(--kkc-soft);
  letter-spacing: 0.4px;
  margin: 0 0 14px;
  padding: 0 8px;
}

#kkc .kkc-empty, #kkc .kkc-notice {
  text-align: center;
  color: var(--kkc-soft);
  font-family: -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  padding: 36px 16px;
  max-width: 560px;
  margin: 0 auto;
}
#kkc .kkc-notice strong { color: var(--kkc-ink); display: block; margin-bottom: 8px; font-size: 16px; }

/* ---------- Pristupačnost ---------- */
#kkc .kkc-a11y {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--kkc-line);
  background: var(--kkc-paper);
  flex-shrink: 0;
  flex-wrap: wrap;
}
#kkc .kkc-spacer { flex: 1; }

#kkc .kkc-btn-gold {
  background: var(--kkc-gold);
  color: var(--kkc-gold-dark);
  font-weight: 700;
  font-size: 14px;
  padding: 9px 14px;
  border-radius: 8px;
  min-height: 40px;
  line-height: 1.2;
}
#kkc.kkc-hc .kkc-btn-gold { background: #000; color: var(--kkc-gold); border: 2px solid var(--kkc-gold); }
#kkc .kkc-btn-gold[aria-pressed="true"] { background: var(--kkc-navy); color: var(--kkc-paper); }
#kkc.kkc-hc .kkc-btn-gold[aria-pressed="true"] { background: var(--kkc-gold); color: #000; border-color: var(--kkc-gold); }

/* ---------- Donja traka ---------- */
#kkc .kkc-player {
  background: var(--kkc-navy);
  padding: 9px 14px 11px;
  flex-shrink: 0;
}
#kkc .kkc-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 11px;
  color: var(--kkc-muted);
}
#kkc .kkc-track {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.18);
  border-radius: 2px;
  overflow: hidden;
}
#kkc .kkc-fill {
  height: 100%;
  width: 0%;
  background: var(--kkc-gold);
  border-radius: 2px;
  transition: width 0.15s linear;
}
#kkc .kkc-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 440px;
  margin: 0 auto;
}
#kkc .kkc-controls svg { color: var(--kkc-muted); }
#kkc .kkc-play {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--kkc-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
}
#kkc .kkc-play svg { width: 22px; height: 22px; color: var(--kkc-navy); }
#kkc.kkc-hc .kkc-play { border: 2px solid var(--kkc-gold); }
#kkc.kkc-hc .kkc-play svg { color: #000; }

#kkc .kkc-donate-row { text-align: center; margin-top: 9px; }
#kkc .kkc-donate {
  background: var(--kkc-gold);
  color: var(--kkc-gold-dark);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  padding: 10px 26px;
  border-radius: 10px;
  min-height: 42px;
}
#kkc.kkc-hc .kkc-donate { background: #000; color: var(--kkc-gold); border: 2px solid var(--kkc-gold); }

/* ---------- Sadržaj (mobilni) ---------- */
#kkc .kkc-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 24, 43, 0.55);
  z-index: 40;
  display: none;
}
#kkc .kkc-backdrop.kkc-on { display: block; }

#kkc .kkc-sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 88%;
  background: var(--kkc-paper);
  border-radius: 18px 18px 0 0;
  z-index: 41;
  display: flex;
  flex-direction: column;
  transform: translateY(101%);
  transition: transform 0.25s ease;
}
#kkc .kkc-sheet.kkc-on { transform: translateY(0); }
#kkc .kkc-handle { width: 36px; height: 4px; background: var(--kkc-soft); border-radius: 2px; margin: 10px auto 4px; }
#kkc .kkc-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 14px 9px;
  border-bottom: 1px solid var(--kkc-line);
  flex-shrink: 0;
}
#kkc .kkc-sheet-head h2 {
  font-family: Georgia, serif;
  font-size: 17px;
  font-weight: 700;
  margin: 0;
  padding: 0;
  color: var(--kkc-ink);
  border: none;
}
#kkc .kkc-sheet-sub { padding: 10px 14px; border-bottom: 1px solid var(--kkc-line); }
#kkc .kkc-sheet-body { overflow-y: auto; padding: 6px; }

#kkc .kkc-dio-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--kkc-soft);
  padding: 14px 12px 6px;
}
#kkc .kkc-unit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 10px;
  font-size: 14.5px;
  line-height: 1.35;
  width: 100%;
  text-align: left;
  color: var(--kkc-ink);
}
#kkc .kkc-unit-row:hover { background: var(--kkc-shade); }
#kkc .kkc-unit-row.kkc-on { background: var(--kkc-navy); color: var(--kkc-paper); }
#kkc .kkc-unit-row.kkc-on .kkc-unit-range { color: var(--kkc-gold); }
#kkc.kkc-hc .kkc-unit-row { border: 1px solid transparent; }
#kkc.kkc-hc .kkc-unit-row.kkc-on { border-color: var(--kkc-gold); }
#kkc .kkc-unit-range { font-size: 11px; color: var(--kkc-soft); white-space: nowrap; flex-shrink: 0; }

/* ---------- Pretraga ---------- */
#kkc .kkc-search {
  position: absolute;
  inset: 0;
  background: var(--kkc-paper);
  z-index: 50;
  display: none;
  flex-direction: column;
}
#kkc .kkc-search.kkc-on { display: flex; }
#kkc .kkc-search-input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--kkc-line);
  flex-shrink: 0;
}
#kkc .kkc-search-input > svg { width: 20px; height: 20px; color: var(--kkc-soft); flex-shrink: 0; }
#kkc .kkc-search-input input {
  flex: 1;
  border: none;
  outline: none;
  background: none;
  font-size: 16px;
  color: var(--kkc-ink);
  font-family: inherit;
  min-width: 0;
  padding: 8px 0;
  margin: 0;
  height: auto;
  box-shadow: none;
}
#kkc .kkc-search-results { overflow-y: auto; flex: 1; padding: 6px; }
#kkc .kkc-hint, #kkc .kkc-count {
  text-align: center;
  color: var(--kkc-soft);
  font-size: 13px;
  padding: 22px 18px;
  margin: 0;
}
#kkc .kkc-count { padding: 12px 18px 4px; }

#kkc .kkc-result {
  padding: 11px 14px;
  border-radius: 10px;
  cursor: pointer;
  max-width: 820px;
  margin: 0 auto;
}
#kkc .kkc-result:hover { background: var(--kkc-shade); }
#kkc .kkc-ref { font-size: 11px; color: #8F6707; font-weight: 700; letter-spacing: 0.3px; }
#kkc.kkc-hc .kkc-ref { color: var(--kkc-gold); }
#kkc .kkc-snippet {
  font-family: Georgia, serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--kkc-ink);
  margin-top: 3px;
}
#kkc .kkc-snippet mark { background: var(--kkc-shade); color: var(--kkc-navy); border-radius: 3px; font-weight: 700; padding: 0 1px; }
#kkc.kkc-hc .kkc-snippet mark { background: var(--kkc-gold); color: #000; }

/* ---------- Skočni prozori ---------- */
#kkc .kkc-modal {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(92%, 440px);
  max-height: 86%;
  overflow-y: auto;
  background: var(--kkc-paper);
  border: 1px solid var(--kkc-line);
  border-radius: 16px;
  z-index: 60;
  padding: 20px;
  display: none;
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
}
#kkc .kkc-modal.kkc-on { display: block; }
#kkc .kkc-modal h2 {
  font-family: Georgia, serif;
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 8px;
  padding: 0;
  color: var(--kkc-ink);
  border: none;
}
#kkc .kkc-modal-hint { font-size: 13.5px; color: var(--kkc-soft); margin: 0 0 14px; }
#kkc .kkc-modal-err { color: #b3261e; font-size: 13px; margin: 10px 0 0; min-height: 1em; }
#kkc.kkc-hc .kkc-modal-err { color: #ff6b6b; }

#kkc .kkc-goto-row { display: flex; gap: 10px; }
#kkc .kkc-goto-row input {
  flex: 1;
  padding: 12px;
  font-size: 17px;
  font-family: inherit;
  border: 1px solid var(--kkc-line);
  border-radius: 8px;
  background: var(--kkc-paper);
  color: var(--kkc-ink);
  min-width: 0;
  margin: 0;
  height: auto;
}
#kkc .kkc-btn-plain {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  background: var(--kkc-shade);
  color: var(--kkc-ink);
}
#kkc.kkc-hc .kkc-btn-plain { border: 1px solid var(--kkc-gold); }

#kkc .kkc-donate-text {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--kkc-ink);
  margin: 0;
}
#kkc .kkc-donate-text a { color: #0b5ea8; text-decoration: underline; }
#kkc.kkc-hc .kkc-donate-text a { color: var(--kkc-gold); }

/* ---------- Mobilni raspored (više prostora za tekst) ---------- */
@container kkc (max-width: 640px) {
  #kkc .kkc-a11y { padding: 6px 8px; gap: 6px; flex-wrap: nowrap; }
  #kkc .kkc-btn-gold { padding: 8px 10px; font-size: 13px; min-height: 36px; }
  #kkc .kkc-spacer { display: none; }
  #kkc .kkc-voice { flex: 1; min-width: 0; max-width: none; font-size: 12px; min-height: 36px; padding: 6px 8px; }
  #kkc .kkc-player { padding: 7px 12px 9px; }
  #kkc .kkc-play { width: 46px; height: 46px; }
  #kkc .kkc-donate-row { margin-top: 7px; }
  #kkc .kkc-donate { padding: 8px 20px; min-height: 38px; font-size: 13px; }
  #kkc .kkc-reading { padding: 12px 14px 20px; }
  #kkc .kkc-brand-sub { display: none; }
}
@supports not (container-type: inline-size) {
  @media (max-width: 640px) {
    #kkc .kkc-a11y { padding: 6px 8px; gap: 6px; flex-wrap: nowrap; }
    #kkc .kkc-btn-gold { padding: 8px 10px; font-size: 13px; min-height: 36px; }
    #kkc .kkc-spacer { display: none; }
    #kkc .kkc-voice { flex: 1; min-width: 0; max-width: none; font-size: 12px; min-height: 36px; padding: 6px 8px; }
    #kkc .kkc-brand-sub { display: none; }
  }
}

/* ---------- Niski zasloni: manje okvira, više teksta ---------- */
@media (max-height: 900px) {
  #kkc .kkc-title-row { padding: 3px 8px 3px; }
  #kkc .kkc-lang-row { padding: 0 10px 7px; }
  #kkc .kkc-nav { padding: 5px 8px; }
  #kkc .kkc-a11y { padding: 5px 12px; }
  #kkc .kkc-player { padding: 6px 14px 8px; }
  #kkc .kkc-progress-row { margin-bottom: 4px; }
  #kkc .kkc-play { width: 46px; height: 46px; }
  #kkc .kkc-icon-btn { height: 40px; }
  #kkc .kkc-donate-row { margin-top: 6px; }
  #kkc .kkc-donate { padding: 8px 22px; min-height: 38px; }
}

/* ---------- Prozor donacije ---------- */
#kkc .kkc-modal-wide { width: min(94%, 520px); }

#kkc .kkc-give {
  border: 1px solid var(--kkc-line);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 14px;
  background: #fff;
}
#kkc.kkc-hc .kkc-give { background: #000; border-color: var(--kkc-gold); }

#kkc .kkc-give h3 {
  font-family: Georgia, serif;
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 4px;
  padding: 0;
  color: var(--kkc-ink);
  border: none;
}
#kkc .kkc-give-note { font-size: 13px; color: var(--kkc-soft); margin: 0 0 12px; }

#kkc .kkc-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--kkc-line);
  font-size: 14px;
}
#kkc .kkc-row:last-of-type { border-bottom: none; }
#kkc .kkc-row span { color: var(--kkc-soft); flex-shrink: 0; }
#kkc .kkc-row b { color: var(--kkc-ink); text-align: right; word-break: break-word; }

#kkc .kkc-iban {
  font-family: "Consolas", "SF Mono", Menlo, monospace;
  font-size: 15px;
  letter-spacing: 0.6px;
}

#kkc .kkc-give-btn {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 13px 18px;
  border-radius: 10px;
  background: var(--kkc-gold);
  color: var(--kkc-gold-dark);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  min-height: 46px;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
#kkc .kkc-give-btn:hover { filter: brightness(1.06); }
#kkc.kkc-hc .kkc-give-btn { background: #000; color: var(--kkc-gold); border: 2px solid var(--kkc-gold); }

#kkc .kkc-copied {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: #1a6b2a;
  text-align: center;
  min-height: 1.2em;
}
#kkc.kkc-hc .kkc-copied { color: var(--kkc-gold); }

#kkc .kkc-thanks {
  margin: 16px 0 0;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--kkc-ink);
}