/* ============================================================
   FILE: /public/kalkulatori/assets/css/style.css
   Faktura.ba Kalkulatori – Shared Design System
   ============================================================ */

/* ── Font: Inter Variable (self-hosted u assets/fonts, licenca OFL – Inter-LICENSE.txt) ──
   Dva podskupa: latin (osnovna slova) i latin-ext (č, ć, ž, š, đ). Oba se preloaduju u <head> svake stranice. */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── CSS Custom Properties ── */
:root {
  /* ── Design tokeni – jedino mjesto za boje cijelog sajta ──
     07.10.2026.: usklađeno s novom stranicom faktura.ba – svježija plava za akcije i aktivna stanja,
     svijetle neutralne pozadine, tamni čitljivi tekst. Bijeli tekst na --color-primary: kontrast 4,7 : 1.
     Plava je jedina boja brenda. Zelena, crvena i amber su samo semantičke:
     zelena = iznos koji osoba prima, crvena = ukupan trošak / obaveze,
     amber = porezi, doprinosi i upozorenja. */
  --color-text:          #0f172a;
  --color-text-muted:    #556275;
  --color-bg:            #f4f6f9;
  --color-surface:       #ffffff;
  --color-border:        #e2e7ee;
  --color-border-strong: #cdd5df;

  --color-primary:        #1b74d1;
  --color-primary-dark:   #1560b0;
  --color-primary-ink:    #0f4c8f;
  --color-primary-light:  #e8f2fc;
  --color-primary-border: #b9d6f4;
  --color-primary-mid:    #3d8fe0;

  /* Svijetloplava logotipa faktura.ba – samo za naziv „Faktura.ba" u brendu (nije za tekst ni dugmad: slab kontrast na bijeloj) */
  --color-fba-logo: #5aaff9;

  /* Blage pozadine sekcija (traka s naslovom na kalkulatorima i stranicama područja) */
  --color-tint-top:    #e3eefb;
  --color-tint-bottom: #f0f6fd;
  --color-text-hero:   #334155;
  /* CTA ploča (po uzoru na hero faktura.ba): prelaz plave, krugovi u bijeloj s malo prozirnosti */
  --cta-gradient: linear-gradient(135deg, #1563bf 0%, #1b74d1 50%, #3a90e2 100%);
  --cta-krug:     rgb(255 255 255 / .10);

  --color-pos:        #15803d;
  --color-pos-bg:     #f0fdf4;
  --color-pos-border: #bbf7d0;
  --color-neg:        #b91c1c;
  --color-neg-bg:     #fef2f2;
  --color-neg-border: #fecaca;
  --color-warn:        #b45309;
  --color-warn-text:   #92400e;
  --color-warn-bg:     #fffbeb;
  --color-warn-border: #fde68a;

  --color-white:    #ffffff;
  --color-gray-50:  #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  --color-gray-300: #cbd5e1;
  --color-gray-400: #94a3b8;
  --color-gray-500: #64748b;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1e293b;
  --color-gray-900: #0f172a;

  /* Stari nazivi, mapirani na nove tokene */
  --color-success:       var(--color-pos);
  --color-success-light: var(--color-pos-bg);
  --color-success-mid:   var(--color-pos);
  --color-warning:       var(--color-warn);
  --color-warning-light: var(--color-warn-bg);
  --color-danger:        var(--color-neg);
  --color-danger-light:  var(--color-neg-bg);

  --color-result-bg:     var(--color-primary-light);
  --color-result-border: var(--color-primary-border);
  --color-result-text:   var(--color-primary-ink);
  --color-result-value:  var(--color-primary-ink);

  --focus-ring: 0 0 0 4px rgb(27 116 209 / 0.18);

  /* Akcentne boje kategorija (samo linija, ikona, hover, brojač – nikad cijela kartica).
     08.10.2026.: paleta uz plavu brenda – plate u plavoj brenda, ostale hladne i prigušene; bez narandžaste, zelene i crvene
     (to su upozorenje, neto i trošak na kalkulatorima). Kontrast ikone na podlozi 4,2–5,6 : 1. Varijanta „sve plavo" je u gitu (07.10.2026.). */
  --cat-plate: var(--color-primary);      --cat-plate-bg: var(--color-primary-light);      --cat-plate-border: var(--color-primary-border);
  --cat-pdv: #0e7c86;                     --cat-pdv-bg: #e6f5f6;                           --cat-pdv-border: #a9dde2;
  --cat-honorari: #5b4fd0;                --cat-honorari-bg: #efedfc;                      --cat-honorari-border: #c9c4f3;
  --cat-poslovanje: #a13d7a;              --cat-poslovanje-bg: #f9edf4;                    --cat-poslovanje-border: #e6bfd6;
  --cat-obrasci: #526075;                 --cat-obrasci-bg: #eef1f5;                       --cat-obrasci-border: #cdd5df;

  /* Typography: jedan font za sve (naslovi, tekst, iznosi, tabele, polja, dugmad) – Inter Variable (07.10.2026.) */
  --font-sans:    "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  --font-display: var(--font-sans);
  --font-body:    var(--font-sans);
  --font-mono:    var(--font-sans);

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  --leading-tight:   1.2;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --font-normal:    400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Border radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px 0 rgb(15 23 42 / 0.04);
  --shadow-sm: 0 1px 3px 0 rgb(15 23 42 / 0.06), 0 1px 2px -1px rgb(15 23 42 / 0.04);
  --shadow-md: 0 6px 16px -4px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.04);
  --shadow-lg: 0 12px 28px -8px rgb(15 23 42 / 0.12), 0 4px 8px -4px rgb(15 23 42 / 0.04);
  --shadow-xl: 0 20px 40px -12px rgb(15 23 42 / 0.16);
  --shadow-blue: var(--focus-ring);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* Layout */
  --container-max: 1200px;
  --calc-max: 860px;
  --header-height: 64px;
}

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-800);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
ul, ol { list-style: none; }

/* ── Container ── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

@media (min-width: 640px) {
  .container { padding-inline: var(--space-8); }
}

.container--narrow {
  max-width: var(--calc-max);
}

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--color-gray-900);
}

h1 { font-size: var(--text-3xl); font-weight: var(--font-extrabold); margin-bottom: var(--space-4); }
h2 { font-size: var(--text-2xl); margin-bottom: var(--space-4); }
h3 { font-size: var(--text-xl); margin-bottom: var(--space-3); }
h4 { font-size: var(--text-lg); margin-bottom: var(--space-2); }

@media (min-width: 768px) {
  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }
}

p { margin-bottom: var(--space-4); }
p:last-child { margin-bottom: 0; }

/* ── Header ── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-200);
  box-shadow: var(--shadow-xs);
}

.site-header .container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}


/* Branding „Poslovni kalkulatori by Faktura.ba" (header i footer): znak + naziv vode na /kalkulatori/,
   „by Faktura.ba" je poseban link na faktura.ba (07.10.2026.) */
.site-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.15;
  flex-shrink: 0;
}
.site-brand-home { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
/* Znak kalkulatora (isti crtež kao favicon assets/img/ikona.svg) */
.site-brand-ikona { display: block; width: 32px; height: 32px; flex-shrink: 0; }

.site-brand-name {
  font-size: var(--text-lg);
  font-weight: var(--font-extrabold, 800);
  color: var(--color-text);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.site-brand-by {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-gray-500);
  white-space: nowrap;
  text-decoration: none;
}

.site-brand-home:hover .site-brand-name { color: var(--color-primary); }
.site-brand-by:hover { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
/* „Faktura.ba" u „by Faktura.ba" u boji logotipa faktura.ba (07.10.2026., Vedran); „by" ostaje sivo. Header i footer. */
.site-brand-fba { color: var(--color-fba-logo); font-weight: 700; }
.site-brand-by:hover .site-brand-fba { color: var(--color-primary); }
.site-brand--footer .site-brand-by:hover .site-brand-fba { color: #8ec9fb; } /* tamni footer: svjetlije umjesto tamnije plave */

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.main-nav a {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-gray-600);
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.main-nav a:hover { color: var(--color-primary); }

.main-nav a.btn-primary,
.main-nav a.btn-primary:hover { color: var(--color-white); }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-lg);
  border: none;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  white-space: nowrap;
  text-decoration: none;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
}

.btn-primary:hover {
  background: var(--color-primary-dark);
  box-shadow: 0 4px 12px rgb(26 86 219 / 0.3);
  transform: translateY(-1px);
}

.btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
}

.btn-lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-lg);
  border-radius: var(--radius-xl);
}

.btn-full { width: 100%; }

.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
}

.btn-outline:hover {
  background: var(--color-primary-light);
}

/* ── Breadcrumb ── */
.breadcrumb {
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-gray-100);
  background: var(--color-gray-50);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-gray-500);
}

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.breadcrumb li:not(:last-child)::after {
  content: '/';
  color: var(--color-gray-300);
}

.breadcrumb a {
  color: var(--color-primary);
  font-weight: var(--font-medium);
}

.breadcrumb a:hover { text-decoration: underline; }

.breadcrumb [aria-current="page"] {
  color: var(--color-gray-700);
  font-weight: var(--font-semibold);
}

/* ── Hero Section ── */
.hero {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, #f8faff 60%, var(--color-white) 100%);
  padding-block: var(--space-12) var(--space-10);
  border-bottom: 1px solid var(--color-gray-200);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgb(26 86 219 / 0.06) 0%, transparent 70%);
  pointer-events: none;
}

.hero h1 {
  font-size: var(--text-3xl);
  color: var(--color-gray-900);
  margin-bottom: var(--space-5);
  max-width: 720px;
}

@media (min-width: 768px) {
  .hero h1 { font-size: clamp(2rem, 4vw, 3rem); }
}

.hero-intro {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-600);
  max-width: 680px;
  margin-bottom: 0;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-gray-600);
  box-shadow: var(--shadow-xs);
}

.badge--blue {
  background: var(--color-primary-light);
  border-color: #bfdbfe;
  color: var(--color-primary-dark);
}

/* ── Calculator Section ── */
.calculator-section {
  padding-block: var(--space-12);
  background: var(--color-gray-50);
}

.calculator-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  max-width: var(--calc-max);
  margin-inline: auto;
}

.calc-header {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  padding: var(--space-5) var(--space-6);
  color: var(--color-white);
}

.calc-header h2 {
  color: var(--color-white);
  font-size: var(--text-xl);
  margin: 0;
}

.calc-body {
  padding: var(--space-6) var(--space-8);
}

/* ── Form Elements ── */
.form-group {
  margin-bottom: var(--space-5);
}

.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-gray-700);
  margin-bottom: var(--space-2);
}

.form-label .required {
  color: var(--color-danger);
  margin-left: var(--space-1);
}

.input-wrapper {
  position: relative;
  display: flex;
}

.form-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  color: var(--color-gray-900);
  background: var(--color-white);
  border: 1.5px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  -moz-appearance: textfield;
  appearance: textfield;
}

.form-input::-webkit-outer-spin-button,
.form-input::-webkit-inner-spin-button { -webkit-appearance: none; }

.form-input:focus {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-blue);
  outline: none;
}

.form-input::placeholder { color: var(--color-gray-400); }

.form-input.has-suffix {
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.input-suffix {
  display: flex;
  align-items: center;
  padding: 0 var(--space-4);
  background: var(--color-gray-100);
  border: 1.5px solid var(--color-gray-300);
  border-left: none;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-gray-500);
  white-space: nowrap;
}

.form-select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  color: var(--color-gray-900);
  background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right var(--space-4) center;
  border: 1.5px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-select:focus {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-blue);
  outline: none;
}

.form-hint {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-gray-500);
}

.form-divider {
  height: 1px;
  background: var(--color-gray-200);
  margin-block: var(--space-6);
}

.form-row {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .form-row { grid-template-columns: 1fr 1fr; }
}

/* ── Result Box ── */
.result-box {
  background: var(--color-result-bg);
  border: 2px solid var(--color-result-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-8);
  margin-top: var(--space-6);
  animation: resultReveal 0.3s ease;
}

@keyframes resultReveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.result-title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-primary-dark);
  margin-bottom: var(--space-4);
}

.result-grid {
  display: grid;
  gap: var(--space-3);
}

.result-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-result-border);
}

.result-row:last-child { border-bottom: none; }

.result-row--highlight {
  padding: var(--space-4);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--color-result-border);
  border-bottom: 1.5px solid var(--color-result-border);
}

.result-label {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  font-weight: var(--font-medium);
}

.result-value {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-result-value);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.result-value--large {
  font-size: var(--text-3xl);
  font-weight: var(--font-extrabold);
}

.result-disclaimer {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-warning-light);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: var(--color-warning);
  line-height: var(--leading-normal);
}

/* ── Section Layouts ── */
.section {
  padding-block: var(--space-16);
}

.section--alt {
  background: var(--color-gray-50);
}

.section-header {
  margin-bottom: var(--space-8);
}

.section-header h2 {
  margin-bottom: var(--space-3);
}

.section-header p {
  font-size: var(--text-lg);
  color: var(--color-gray-600);
  max-width: 640px;
}

.section-header.text-center p {
  margin-left: auto;
  margin-right: auto;
}

/* ── Formula Box ── */
.formula-box {
  background: var(--color-gray-900);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  overflow-x: auto;
  margin-block: var(--space-6);
}

.formula-box code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: #e2e8f0;
  line-height: 1.8;
  white-space: pre;
}

.formula-comment { color: #64748b; }
.formula-var     { color: #7dd3fc; }
.formula-op      { color: #f59e0b; }
.formula-num     { color: #86efac; }

/* ── Info Box ── */
.info-box {
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  border-left: 4px solid;
  margin-block: var(--space-6);
}

.info-box--blue {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

.info-box--green {
  background: var(--color-success-light);
  border-color: var(--color-success-mid);
  color: var(--color-success);
}

.info-box--yellow {
  background: var(--color-warning-light);
  border-color: var(--color-warning);
  color: var(--color-warning);
}

.info-box-title {
  font-weight: var(--font-bold);
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.info-box p { font-size: var(--text-sm); margin: 0; }

/* ── Examples ── */
.example-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.example-card + .example-card { margin-top: var(--space-4); }

.example-number {
  display: inline-block;
  background: var(--color-primary);
  color: var(--color-white);
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  line-height: 28px;
  text-align: center;
  margin-bottom: var(--space-3);
}

.example-title {
  font-weight: var(--font-bold);
  font-size: var(--text-lg);
  color: var(--color-gray-900);
  margin-bottom: var(--space-3);
}

.example-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  margin-top: var(--space-3);
}

.example-table th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  background: var(--color-gray-50);
  color: var(--color-gray-600);
  font-weight: var(--font-semibold);
  border-bottom: 1px solid var(--color-gray-200);
}

.example-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-gray-100);
}

.example-table tr:last-child td { border-bottom: none; }

.example-table .highlight td {
  font-weight: var(--font-bold);
  color: var(--color-result-value);
  background: var(--color-result-bg);
}

/* ── FAQ ── */
.faq-list {
  max-width: 760px;
  display: grid;
  gap: var(--space-3);
}

.faq-item {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.faq-item[open] {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgb(26 86 219 / 0.08);
}

.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
  color: var(--color-gray-900);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: '+';
  font-size: var(--text-xl);
  color: var(--color-primary);
  flex-shrink: 0;
  line-height: 1;
  transition: transform var(--transition-fast);
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-answer {
  padding: 0 var(--space-6) var(--space-5);
  font-size: var(--text-base);
  color: var(--color-gray-600);
  line-height: var(--leading-relaxed);
  border-top: 1px solid var(--color-gray-100);
}

.faq-answer p { margin-bottom: var(--space-3); }
.faq-answer p:last-child { margin-bottom: 0; }

/* ── CTA Section ── */
.cta-section {
  padding-block: var(--space-16);
  background: linear-gradient(135deg, var(--color-primary) 0%, #1d3a8a 100%);
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgb(255 255 255 / 0.06) 0%, transparent 70%);
}

.cta-content {
  position: relative;
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}

.cta-content h2 {
  color: var(--color-white);
  font-size: var(--text-3xl);
  margin-bottom: var(--space-4);
}

.cta-content p {
  color: rgb(255 255 255 / 0.8);
  font-size: var(--text-lg);
  margin-bottom: var(--space-8);
}

.cta-content .btn-primary {
  background: var(--color-white);
  color: var(--color-primary);
  font-size: var(--text-lg);
}

.cta-content .btn-primary:hover {
  background: var(--color-gray-100);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.2);
}

/* Grid instead of flex-wrap so the badges never break 3+1: 1 column on phones, 2x2 on tablets, one row on desktop */
.cta-features {
  display: grid;
  grid-template-columns: max-content;
  justify-content: center;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-6);
}

@media (min-width: 480px) {
  .cta-features { grid-template-columns: repeat(2, max-content); }
}

@media (min-width: 768px) {
  .cta-features { grid-template-columns: repeat(4, max-content); column-gap: var(--space-4); }
}

.cta-feature {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: rgb(255 255 255 / 0.8);
  font-size: var(--text-sm);
}

.cta-feature::before {
  content: '✓';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: rgb(255 255 255 / 0.15);
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: var(--font-bold);
  color: var(--color-white);
}

/* ── Related Calculators ── */
.related-section {
  padding-block: var(--space-16);
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.related-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  text-decoration: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.related-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.related-card-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-light);
  border-radius: var(--radius-lg);
  font-size: 1.5rem;
  flex-shrink: 0;
}

.related-card-content { flex: 1; min-width: 0; }

.related-card-name {
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  color: var(--color-gray-900);
  margin-bottom: var(--space-1);
}

.related-card-desc {
  font-size: var(--text-xs);
  color: var(--color-gray-500);
  line-height: var(--leading-normal);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.related-card-arrow {
  color: var(--color-gray-300);
  transition: color var(--transition-fast), transform var(--transition-fast);
  flex-shrink: 0;
}

.related-card:hover .related-card-arrow {
  color: var(--color-primary);
  transform: translateX(3px);
}

/* ── Hub Page – Calculator Grid ── */
.calc-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-6);
}

.calc-hub-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  text-decoration: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-base);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.calc-hub-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.calc-hub-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-light);
  border-radius: var(--radius-xl);
  font-size: 1.75rem;
}

/* Linijske SVG ikone u karticama i prednostima (umjesto emojija) */
.calc-hub-icon, .hub-feature-icon { color: var(--color-primary); }
.calc-hub-icon svg { width: 26px; height: 26px; }
.hub-feature-icon svg { width: 22px; height: 22px; }

.calc-hub-name {
  font-weight: var(--font-bold);
  font-size: var(--text-lg);
  color: var(--color-gray-900);
}

.calc-hub-desc {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  line-height: var(--leading-relaxed);
  flex: 1;
}

.calc-hub-category {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Tables ── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.data-table thead tr {
  background: var(--color-gray-900);
  color: var(--color-white);
}

.data-table th {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  font-weight: var(--font-semibold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.data-table td {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-gray-100);
  color: var(--color-gray-700);
}

.data-table tbody tr:hover td {
  background: var(--color-gray-50);
}

.data-table tbody tr:last-child td { border-bottom: none; }

.data-table .rate-cell {
  font-family: var(--font-mono);
  font-weight: var(--font-semibold);
  color: var(--color-primary);
}

/* ── Footer ── */
.site-footer {
  background: var(--color-gray-900);
  color: var(--color-gray-400);
  padding-block: var(--space-10) var(--space-8);
}


/* ── Loading State ── */
.btn-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.btn-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgb(255 255 255 / 0.3);
  border-top-color: white;
  border-radius: var(--radius-full);
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Utility Classes ── */
.text-center { text-align: center; }
.text-right  { text-align: right; }
.hidden      { display: none !important; }
.sr-only     { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }

/* ── Responsive Nav ── */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--color-gray-700);
  border-radius: 2px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

/* Branding + „Svi kalkulatori" i 4 kategorije staju u jedan red od ~910 px; ispod 960 px hamburger */
@media (max-width: 959px) {
  .nav-toggle { display: flex; }
  
  .main-nav {
    display: none;
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-200);
    padding: var(--space-4) var(--space-5);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    box-shadow: var(--shadow-lg);
  }
  
  .main-nav.is-open { display: flex; }
  
  .main-nav a {
    width: 100%;
    padding: var(--space-3) 0;
    font-size: var(--text-base);
    border-bottom: 1px solid var(--color-gray-100);
  }
  
  .main-nav a:last-child { border-bottom: none; }
}

/* ── Print Styles ── */
@media print {
  .site-header, .site-footer, .cta-section, .related-section { display: none; }
  .result-box { border: 2px solid #000; }
}

/* ============================================================
   CALCULATOR PAGE COMPONENTS
   Added to support all 12 calculator pages
   ============================================================ */

/* ── Layout & Sections ── */
.section-md  { padding-block: var(--space-16); }
.section-sm  { padding-block: var(--space-8); }
.bg-gray     { background-color: var(--color-gray-50); }

.container-sm {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.text-lead {
  font-size: var(--text-lg);
  color: var(--color-gray-600);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

/* ── Site Header ── */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  height: var(--header-height, 64px);
}

.header-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.header-nav a {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-gray-600);
  text-decoration: none;
  transition: color 0.15s;
}

.header-nav a:hover { color: var(--color-primary); }

@media (max-width: 640px) {
  .header-nav { display: none; }
}

/* Sidro „Svi kalkulatori" (header/footer linkovi) — da sekcija ne završi ispod sticky headera */
#svi-kalkulatori { scroll-margin-top: 64px; }
/* Kategorije na početnoj (linkovi u meniju) — naslov kategorije ostaje vidljiv ispod headera */
.calc-category-section[id] { scroll-margin-top: calc(var(--header-height) + var(--space-6)); }

/* ── Footer ── */
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-8);
}


.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  align-items: center;
  justify-content: flex-start;
}

.footer-nav a {
  font-size: var(--text-sm);
  color: var(--color-gray-400);
  text-decoration: none;
  transition: color 0.15s;
}

.footer-nav a:hover { color: var(--color-gray-200); }

/* Footer: meni lijevo, branding desno (ispod 1024 px jedno ispod drugog); ispod napomena */
.footer-inner { justify-content: space-between; }
.site-brand--footer { align-items: flex-end; text-align: right; }
/* Kad meni i branding ne stanu u jedan red: branding ispod menija, poravnat lijevo */
@media (max-width: 1023px) {
  .site-brand--footer { width: 100%; align-items: flex-start; text-align: left; }
}
.site-brand--footer .site-brand-name { color: var(--color-white); }
.site-brand--footer .site-brand-by { color: var(--color-gray-400); }
.site-brand--footer .site-brand-home:hover .site-brand-name { color: var(--color-gray-200); }
.site-brand--footer .site-brand-by:hover { color: var(--color-gray-200); }

.footer-legal {
  width: 100%;
  font-size: var(--text-xs);
  color: var(--color-gray-400);
  margin-top: var(--space-2);
  margin-bottom: 0;
  padding-top: var(--space-4);
  border-top: 1px solid rgb(255 255 255 / 0.1);
}

/* ── Card Component ── */
.card-title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-gray-900);
  margin-bottom: var(--space-6);
}

/* ── Form Components ── */
.input-group {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
  background: white;
}

.input-group:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgb(26 86 219 / 0.12);
}

.input-group .form-input {
  border: none;
  border-radius: 0;
  flex: 1;
  box-shadow: none;
}

.input-group .form-input:focus {
  outline: none;
  box-shadow: none;
}

.input-addon {
  display: flex;
  align-items: center;
  padding: 0 var(--space-4);
  background: var(--color-gray-50);
  border-left: 1.5px solid var(--color-gray-200);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-gray-500);
  white-space: nowrap;
  user-select: none;
}

/* ── Buttons ── */
.btn-ghost {
  background: transparent;
  color: var(--color-gray-600);
  border: 1.5px solid var(--color-gray-200);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
}

.btn-ghost:hover {
  background: var(--color-gray-50);
  border-color: var(--color-gray-300);
  color: var(--color-gray-700);
}

/* ── Result Divider & Title ── */
.result-divider {
  height: 1px;
  background: var(--color-gray-100);
  margin: var(--space-6) 0;
}

.result-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-gray-800);
  margin-bottom: var(--space-5);
}

/* ── Related Calculators Grid ── */
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
}

.related-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: white;
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.related-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgb(26 86 219 / 0.1);
  transform: translateY(-2px);
}

.related-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-light);
  border-radius: var(--radius-lg);
  color: var(--color-primary);
}

.related-icon svg { width: 22px; height: 22px; }

.related-name {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-gray-800);
}

.related-desc {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  line-height: var(--leading-snug);
}

/* ── CTA Card ── */
.cta-card {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 60%, var(--color-primary) 100%);
  border-radius: var(--radius-2xl, 1.5rem);
  padding: var(--space-10) var(--space-8);
  text-align: center;
  color: white;
}

.cta-icon {
  font-size: 3rem;
  margin-bottom: var(--space-4);
  line-height: 1;
}

.cta-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: white;
  margin-bottom: var(--space-4);
  text-wrap: balance;
}

.cta-text {
  font-size: var(--text-base);
  color: rgb(255 255 255 / 0.8);
  max-width: 520px;
  margin: 0 auto var(--space-6);
  line-height: var(--leading-relaxed);
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

.cta-card .btn-ghost {
  background: rgb(255 255 255 / 0.1);
  border-color: rgb(255 255 255 / 0.3);
  color: white;
}

.cta-card .btn-ghost:hover {
  background: rgb(255 255 255 / 0.2);
  border-color: rgb(255 255 255 / 0.5);
}

/* ── FAQ Component ── */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.faq-item {
  background: white;
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: border-color 0.15s;
}

.faq-item[open] {
  border-color: var(--color-primary);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-gray-800);
  cursor: pointer;
  list-style: none;
  user-select: none;
  gap: var(--space-4);
}

.faq-question::-webkit-details-marker { display: none; }

.faq-question::after {
  content: '+';
  font-size: var(--text-xl);
  font-weight: var(--font-normal);
  color: var(--color-primary);
  flex-shrink: 0;
  transition: transform 0.2s;
}

details[open] .faq-question::after {
  content: '−';
}

.faq-answer {
  padding: 0 var(--space-5) var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  line-height: var(--leading-relaxed);
  border-top: 1px solid var(--color-gray-100);
  padding-top: var(--space-4);
}

.faq-answer p { margin: 0 0 var(--space-3); }
.faq-answer p:last-child { margin-bottom: 0; }

/* ── Form Actions ── */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* ── Responsive tweaks for calculator pages ── */
@media (max-width: 640px) {
  .section-md  { padding-block: var(--space-10); }
  .section-sm  { padding-block: var(--space-6); }
  .cta-card    { padding: var(--space-8) var(--space-5); }
  .cta-title   { font-size: var(--text-xl); }
  .related-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 420px) {
  .related-grid { grid-template-columns: 1fr; }
}

/* ── Hub category sections ── */
.calc-category-section {
  margin-bottom: var(--space-12);
}

.calc-category-title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-gray-800);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-gray-200);
}

/* ============================================================
   MODERNIZACIJA 2026 – zajednički sloj komponenti
   Jedno mjesto za izgled svih stranica. Stranice kalkulatora u svom
   <style> još imaju starije kopije istih pravila; selektori ovdje imaju
   prefiks „body" (veća specifičnost), pa važi ovaj sloj.
   Boje samo iz tokena u :root.
   ============================================================ */

/* ── Osnova ── */
body { background: var(--color-bg); color: var(--color-gray-700); }
h1, h2, h3, h4, h5, h6 { color: var(--color-text); letter-spacing: -0.01em; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }
@media (min-width: 768px) {
  h2 { font-size: 1.625rem; }
}
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
::selection { background: var(--color-primary-border); color: var(--color-text); }

/* Iznosi: font stranice s tabularnim ciframa (lakše poređenje); mono ostaje samo u formulama */
body :is(.kljucna-value, .result-card-value, .result-value, .breakdown-table td:last-child,
  .example-table td:last-child, .trosak-podjela strong, .stope-table td, .schedule-table td) {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ── Sekcije: svijetla podloga, sadržaj na bijelim površinama ── */
body .section-md { padding-block: var(--space-12); }
body .section-sm { padding-block: var(--space-6); }
body .bg-gray { background: var(--color-surface); border-block: 1px solid var(--color-border); }
@media (max-width: 640px) {
  body .section-md { padding-block: var(--space-8); }
  body .section-sm { padding-block: var(--space-4); }
}
body .text-lead { font-size: 1.0625rem; color: var(--color-gray-600); }

/* ── Header ── */
.site-header { background: rgb(255 255 255 / 0.96); border-bottom: 1px solid var(--color-border); box-shadow: none; }
.site-brand-name { color: var(--color-text); }
.main-nav a { color: var(--color-gray-600); border-radius: var(--radius-md); }
.main-nav a:hover { color: var(--color-primary); }
.main-nav a[aria-current="page"] { color: var(--color-primary); font-weight: var(--font-semibold); }
.nav-toggle { border-radius: var(--radius-md); }
.nav-toggle:hover { background: var(--color-gray-100); }

/* ── Footer ── */
.site-footer { background: var(--color-text); }
.footer-nav a { color: var(--color-gray-400); }
.footer-nav a:hover { color: var(--color-white); }

/* ── Dugmad ── */
.btn { border-radius: var(--radius-lg); min-height: 44px; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); }
.btn:active { transform: none; }
.btn-primary { background: var(--color-primary); color: var(--color-white); box-shadow: var(--shadow-xs); }
.btn-primary:hover { background: var(--color-primary-dark); box-shadow: var(--shadow-xs); transform: none; }
.btn-primary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn-lg { padding: 0.75rem 1.5rem; font-size: var(--text-base); border-radius: var(--radius-lg); min-height: 48px; }
.btn-sm { min-height: 36px; padding: 0.375rem 0.875rem; }
.btn-ghost { background: var(--color-surface); color: var(--color-gray-700); border: 1px solid var(--color-border-strong); }
.btn-ghost:hover { background: var(--color-gray-50); border-color: var(--color-gray-400); color: var(--color-text); }

/* ── Hero stranica kalkulatora: kompaktan, svijetao, bez gradijenata po kategoriji ── */
body .calc-hero {
  background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-bg) 100%);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-8);
}
body .calc-hero h1 {
  color: var(--color-text);
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
  max-width: 760px;
  text-wrap: balance;
}
body .calc-hero-sub { color: var(--color-gray-600); font-size: 1.0625rem; line-height: var(--leading-relaxed); max-width: 680px; margin: 0; }
@media (max-width: 640px) {
  body .calc-hero { padding-block: var(--space-5) var(--space-6); }
  body .calc-hero-sub { font-size: var(--text-base); }
}

/* ── Oznaka „Kalkulator i stope provjereni" ispod podnaslova (bez linka) ── */
body .hero-provjereno {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin: var(--space-4) 0 0; padding: 5px 12px 5px 6px; border-radius: 999px;
  background: var(--color-surface); border: 1px solid var(--color-primary-border);
  color: var(--color-primary-ink); font-size: var(--text-sm); font-weight: var(--font-semibold); line-height: 1.3;
}
body .hero-provjereno svg { flex: none; width: 18px; height: 18px; }
body .hero-provjereno svg circle { fill: var(--color-primary); }
body .hero-provjereno svg path { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body .hero-provjereno .nowrap { white-space: nowrap; }
@media (max-width: 400px) { body .hero-provjereno { font-size: .8125rem; gap: 6px; padding-right: 10px; } body .hero-provjereno svg { width: 16px; height: 16px; } }

/* ── Breadcrumb (u heroju) ── */
body ol.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); list-style: none; margin: 0 0 var(--space-4); padding: 0; background: transparent; border: none; }
body ol.breadcrumb li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-gray-500); }
body ol.breadcrumb li:not(:last-child)::after { content: '/'; color: var(--color-gray-300); }
body ol.breadcrumb a { color: var(--color-gray-600); text-decoration: none; font-weight: var(--font-medium); }
body ol.breadcrumb a:hover { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
body ol.breadcrumb li:last-child { color: var(--color-gray-700); font-weight: var(--font-medium); }

/* ── Kartica forme ── */
body .card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 640px) {
  body .card { padding: var(--space-5) var(--space-4); border-radius: var(--radius-xl); }
}
body .card-title { font-size: 1.25rem; margin-bottom: var(--space-5); }

/* ── Polja, selecti, tabovi ── */
body .form-label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-gray-800); margin-bottom: 0.375rem; }
body .form-hint { color: var(--color-text-muted); font-size: 0.8125rem; line-height: var(--leading-normal); margin-top: 0.375rem; }
body .form-input, body .form-select {
  min-height: 48px;
  padding: 0.625rem 0.875rem;
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
}
body .form-select { padding-right: 2.5rem; }
body .form-input:hover, body .form-select:hover { border-color: var(--color-gray-400); }
body .form-input:focus, body .form-select:focus { border-color: var(--color-primary); box-shadow: var(--focus-ring); outline: none; }
body .input-group { border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface); }
body .input-group:hover { border-color: var(--color-gray-400); }
body .input-group:focus-within { border-color: var(--color-primary); box-shadow: var(--focus-ring); }
body .input-group .form-input { border: none; min-height: 46px; }
body .input-group .form-input:focus { box-shadow: none; }
body .input-addon { background: var(--color-gray-50); border-left: 1px solid var(--color-border); color: var(--color-gray-600); font-weight: var(--font-semibold); }
body input[type="checkbox"], body input[type="radio"] { accent-color: var(--color-primary); }

/* Poruke o greškama uz polje (fbaUtils.showError) i obavještenje (fbaUtils.toast) */
body .form-input--error, body input[aria-invalid="true"]:not([type="radio"]):not([type="checkbox"]), body select[aria-invalid="true"] { border-color: var(--color-neg) !important; box-shadow: 0 0 0 3px rgb(185 28 28 / 0.12) !important; }
body .input-group:has(.form-input--error) { border-color: var(--color-neg); box-shadow: 0 0 0 3px rgb(185 28 28 / 0.12); }
body .input-group .form-input--error { box-shadow: none !important; }
body .form-choice--error { border-radius: var(--radius-lg); box-shadow: 0 0 0 2px var(--color-neg-bg), 0 0 0 3px var(--color-neg-border); }
body .form-choice--error label { border-color: var(--color-neg-border); }
body .form-error {
  display: flex; align-items: flex-start; gap: var(--space-2);
  margin: var(--space-2) 0 0; padding: 0.5rem 0.75rem;
  font-size: var(--text-sm); line-height: 1.45; font-weight: var(--font-medium);
  color: var(--color-neg); background: var(--color-neg-bg);
  border: 1px solid var(--color-neg-border); border-radius: var(--radius-lg);
  animation: fba-err-in .18s ease-out;
}
body .form-error svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
body .form-error--opce { margin: 0 0 var(--space-3); }
@keyframes fba-err-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes fba-shake { 0%,100% { transform: none; } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
body .fba-shake { animation: fba-shake .35s ease-in-out; }
.fba-toast {
  position: fixed; left: 50%; bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); z-index: 1000;
  display: flex; align-items: center; gap: var(--space-2);
  width: max-content; max-width: calc(100vw - 32px); padding: 0.75rem 1rem;
  background: var(--color-gray-900); color: #fff; font-size: var(--text-sm); font-weight: var(--font-medium);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; transform: translate(-50%, 12px);
  transition: opacity .2s, transform .2s;
}
.fba-toast svg { width: 18px; height: 18px; flex-shrink: 0; color: #fca5a5; }
.fba-toast--vidljiv { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  body .form-error, body .fba-shake { animation: none; }
  .fba-toast { transition: none; }
}

/* Izbor načina (segmentirana dugmad) */
body .mode-tabs { gap: var(--space-2); }
body .mode-tab label {
  display: flex; align-items: center; min-height: 40px;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-gray-700);
  font-size: var(--text-sm); font-weight: var(--font-medium);
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
body .mode-tab label:hover { border-color: var(--color-gray-400); }
body .mode-tab input:checked + label { border-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-primary-ink); font-weight: var(--font-semibold); box-shadow: inset 0 0 0 1px var(--color-primary); }
body .mode-tab input:focus-visible + label { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ── Rezultati ── */
body .result-divider { background: var(--color-border); margin: var(--space-6) 0; }
body .result-title { font-size: 1.125rem; font-weight: var(--font-bold); color: var(--color-text); margin-bottom: var(--space-4); }

/* Ključne brojke: tonirana podloga, akcent lijevo, obojena vrijednost (naziv je uvijek ispisan) */
body .kljucne-brojke { gap: var(--space-3); }
body .kljucna {
  --k-acc: var(--color-gray-400); --k-bg: var(--color-gray-50); --k-bd: var(--color-border); --k-val: var(--color-text);
  background: var(--k-bg);
  border: 1px solid var(--k-bd);
  border-left: 3px solid var(--k-acc);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}
body .kljucna-label { display: flex; align-items: center; gap: var(--space-2); font-size: 0.8125rem; font-weight: var(--font-semibold); color: var(--color-gray-600); margin-bottom: var(--space-1); }
body .kljucna .kljucna-value { color: var(--k-val); font-size: 1.625rem; font-weight: var(--font-bold); line-height: 1.25; letter-spacing: -0.01em; }
body .kljucna-sub { color: var(--color-text-muted); }
/* Iznos koji osoba prima */
body :is(.kljucna--neto, .kljucna--ostaje) { --k-acc: var(--color-pos); --k-bg: var(--color-pos-bg); --k-bd: var(--color-pos-border); --k-val: var(--color-pos); }
/* Ukupan trošak / ukupno za uplatu */
body :is(.kljucna--trosak, .kljucna--uplata) { --k-acc: var(--color-neg); --k-bg: var(--color-neg-bg); --k-bd: var(--color-neg-border); --k-val: var(--color-neg); }
/* Doprinosi */
body .kljucna--mj { --k-acc: var(--color-warn); --k-bg: var(--color-warn-bg); --k-bd: var(--color-warn-border); --k-val: var(--color-warn-text); }
/* Glavni rezultat bez semantike isplate/troška (rabat, amortizacija) */
body :is(.kljucna--konacna, .kljucna--otpis) { --k-acc: var(--color-primary); --k-bg: var(--color-primary-light); --k-bd: var(--color-primary-border); --k-val: var(--color-primary-ink); }
/* Informativne vrijednosti ostaju neutralne (.kljucna--god, --rabat, --trajanje) */
body :is(.kljucna--neto, .kljucna--ostaje, .kljucna--trosak, .kljucna--uplata, .kljucna--mj, .kljucna--konacna, .kljucna--otpis) .kljucna-label::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--k-acc); flex-shrink: 0;
}
@media (max-width: 640px) {
  body .kljucna .kljucna-value { font-size: 1.375rem; }
}

/* Kartice rezultata (PDV, marža, zatezna kamata, pojedinačni doprinosi) */
body .result-grid { gap: var(--space-3); }
body .result-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: none;
  padding: var(--space-4);
  text-align: left;
}
body .result-card-label { font-size: 0.8125rem; font-weight: var(--font-medium); color: var(--color-text-muted); margin-bottom: var(--space-1); }
body .result-card .result-card-value { font-size: 1.375rem; font-weight: var(--font-bold); color: var(--color-text); line-height: 1.25; }
body .result-card.highlight { background: var(--color-primary-light); border-color: var(--color-primary-border); border-left: 3px solid var(--color-primary); }
body .result-card.highlight .result-card-value { color: var(--color-primary-ink); }
body :is(.result-card.danger, .result-card.total) { background: var(--color-gray-50); border-color: var(--color-border); }
body :is(.result-card.danger, .result-card.total) .result-card-value { color: var(--color-gray-800); }

/* Detaljni obračun */
body .breakdown-table { border-collapse: collapse; }
body .breakdown-table td { padding: 0.625rem var(--space-3); font-size: var(--text-sm); color: var(--color-gray-700); border-bottom: 1px solid var(--color-gray-100); vertical-align: top; }
body .breakdown-table td:first-child { padding-left: 0; }
body .breakdown-table td:last-child { padding-right: 0; text-align: right; font-weight: var(--font-semibold); color: var(--color-text); white-space: nowrap; }
body .breakdown-table tr:last-child td { border-bottom: none; }
body .breakdown-table .row-total td { background: transparent; font-weight: var(--font-bold); color: var(--color-text); border-top: 1px solid var(--color-border-strong) !important; }
body .breakdown-table .row-neto td { background: var(--color-pos-bg); color: var(--color-pos); font-weight: var(--font-bold); font-size: var(--text-base); border-top: 1px solid var(--color-pos-border) !important; }
body .breakdown-table .row-neto td:first-child { padding-left: var(--space-3); border-radius: var(--radius-md) 0 0 var(--radius-md); }
body .breakdown-table .row-neto td:last-child { padding-right: var(--space-3); color: var(--color-pos); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
body .breakdown-table .row-godisnje td { background: var(--color-gray-50); color: var(--color-text); border-top: 1px solid var(--color-border-strong) !important; }
body .breakdown-table .row-godisnje td:first-child { padding-left: var(--space-3); }
body .breakdown-table .row-godisnje td:last-child { padding-right: var(--space-3); }
@media (max-width: 480px) {
  body .breakdown-table td { font-size: 0.8125rem; padding-inline: var(--space-2); }
  body .breakdown-table td:first-child { padding-left: 0; }
  body .breakdown-table td:last-child { padding-right: 0; }
}

/* Traka udjela (neto / PDV) */
body :is(.neto-bar-wrap, .pdv-bar-wrap) { height: 8px; background: var(--color-gray-100); }
body .neto-bar { background: var(--color-pos); }
body .pdv-bar { background: var(--color-primary); }

/* ── Tabele u sadržaju (stope, poređenja, plan) ── */
body :is(.compare-table, .stope-table, .schedule-table, .data-table) {
  border-collapse: separate; border-spacing: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: none;
  font-size: var(--text-sm);
}
body :is(.compare-table, .stope-table, .schedule-table, .data-table) th {
  background: var(--color-gray-50);
  color: var(--color-gray-600);
  font-size: 0.8125rem; font-weight: var(--font-semibold);
  text-transform: none; letter-spacing: 0;
  border-bottom: 1px solid var(--color-border);
}
body .data-table thead tr { background: var(--color-gray-50); color: var(--color-gray-600); }
body :is(.compare-table, .stope-table, .schedule-table, .data-table) td { border-bottom: 1px solid var(--color-gray-100); color: var(--color-gray-700); }
body :is(.compare-table, .stope-table, .schedule-table, .data-table) tr:last-child td { border-bottom: none; }
@media (max-width: 640px) {
  /* Na mobitelu neke stranice prikazuju poređenje kao kartice – bez okvira oko cijele tabele */
  body .compare-table:not(.tabela-kartice) { border: none; background: transparent; border-radius: 0; overflow: visible; }
}

/* Tabela pravila jednog područja (pojam | pravilo), bez zaglavlja; na mobitelu kartice */
body .pravila-table {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-size: var(--text-sm);
}
body .pravila-table td { padding: var(--space-3) var(--space-4); vertical-align: top; text-align: left; border-bottom: 1px solid var(--color-gray-100); color: var(--color-gray-700); }
body .pravila-table tr:last-child td { border-bottom: none; }
body .pravila-table td:first-child { width: 35%; font-weight: var(--font-semibold); color: var(--color-text); }
@media (max-width: 600px) {
  body :is(.pravila-table, .pravila-table tbody, .pravila-table tr, .pravila-table td) { display: block; width: 100%; }
  body .pravila-table { border: none; background: transparent; border-radius: 0; overflow: visible; }
  body .pravila-table tr { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: var(--space-3); padding: var(--space-3) var(--space-4); }
  body .pravila-table td { padding: 0; border-bottom: none; }
  body .pravila-table td:first-child { width: 100%; margin-bottom: var(--space-1); }
}

/* Tabela koja se do 600 px prikazuje kao kartice: jedan red = jedna kartica, naziv gore,
   ostale ćelije ispod s oznakom iz data-label. Izgled na računaru daje .compare-table / .stope-table. */
@media (min-width: 601px) {
  body .compare-table.tabela-kartice td { vertical-align: top; }
  body .compare-table.tabela-kartice :is(th, td):first-child { width: 28%; }
  body .compare-table.tabela-kartice td:first-child { font-weight: var(--font-semibold); color: var(--color-text); }
}
@media (max-width: 600px) {
  body .tabela-kartice thead { display: none; }
  body :is(.tabela-kartice, .tabela-kartice tbody, .tabela-kartice tr, .tabela-kartice td) { display: block; width: 100%; }
  body .tabela-kartice { border: none; background: transparent; border-radius: 0; overflow: visible; }
  body .tabela-kartice tr { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: var(--space-3); padding: var(--space-3) var(--space-4); }
  body .tabela-kartice tr:last-child { margin-bottom: 0; }
  body .tabela-kartice td { padding: 0; border-bottom: none; background: transparent; }
  body .tabela-kartice td:first-child { width: 100%; margin-bottom: var(--space-1); font-weight: var(--font-semibold); color: var(--color-text); }
  body .tabela-kartice td + td { margin-top: var(--space-1); }
  body .tabela-kartice td[data-label]::before { content: attr(data-label) ": "; font-weight: var(--font-semibold); color: var(--color-gray-500); }
  body .tabela-kartice tr.stope-ukupno { background: var(--color-gray-50); }
  body .tabela-kartice .samo-tabela { display: none; }
}


/* ── Primjeri ── */
body .example-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  box-shadow: none;
}
@media (max-width: 640px) {
  body .example-card { padding: var(--space-4); }
}
body .example-card h3 { font-size: var(--text-base); font-weight: var(--font-bold); color: var(--color-text); margin-bottom: var(--space-3); }
body .example-table td { padding: 0.5rem 0; border-bottom: 1px solid var(--color-gray-100); color: var(--color-gray-700); }
body .example-table td:last-child { text-align: right; font-weight: var(--font-semibold); color: var(--color-text); padding-left: var(--space-3); }
/* Redovi rezultata u primjeru: jasno odvojeni od ulaznih podataka */
body .example-table :is(tr.hl, tr.hl-uplata) td { background: var(--color-primary-light); color: var(--color-primary-ink); font-weight: var(--font-bold); border-bottom: none; }
body .example-table :is(tr.hl, tr.hl-uplata) td:first-child { padding-left: var(--space-3); border-radius: var(--radius-md) 0 0 var(--radius-md); }
body .example-table :is(tr.hl, tr.hl-uplata) td:last-child { padding-right: var(--space-3); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
body .example-table tr.hl-rabat td { background: var(--color-gray-50); color: var(--color-text); }
body .example-table .ex-naslov td { color: var(--color-text-muted); }

/* ── Formule ── */
body .formula-box { background: var(--color-gray-50); border: 1px solid var(--color-border); border-radius: var(--radius-lg); color: var(--color-gray-800); }

/* ── Napomene ── */
/* Važna porezna / pravna napomena */
body .warning-box {
  background: var(--color-warn-bg);
  border: 1px solid var(--color-warn-border);
  border-left: 3px solid var(--color-warn);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  color: var(--color-warn-text);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}
/* Opća informacija */
body .info-box { background: var(--color-primary-light); border: 1px solid var(--color-primary-border); border-left: 3px solid var(--color-primary); border-radius: var(--radius-lg); color: var(--color-gray-700); }
body .info-box-title { color: var(--color-primary-ink); text-transform: none; letter-spacing: 0; }
/* Napomena u rezultatu (boja ostaje po stranici: amber ili plava) */
body .plata-napomena { border-radius: var(--radius-lg); line-height: var(--leading-relaxed); }

/* ── FAQ ── */
body .faq-list { gap: var(--space-2); }
body .faq-item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: none; }
body .faq-item[open] { border-color: var(--color-primary-border); box-shadow: none; }
body .faq-item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: 56px; padding: var(--space-4) var(--space-5);
  font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--color-text);
  cursor: pointer; list-style: none;
}
body .faq-item > summary::-webkit-details-marker { display: none; }
body .faq-item > summary:hover { color: var(--color-primary); }
body .faq-item > summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; border-radius: var(--radius-lg); }
body .faq-item > summary::after {
  content: ''; width: 20px; height: 20px; flex-shrink: 0;
  background: var(--color-gray-400);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--transition-fast);
}
body .faq-item[open] > summary::after { content: ''; transform: rotate(180deg); background: var(--color-primary); }
body .faq-answer { padding: 0 var(--space-5) var(--space-5); border-top: none; font-size: 0.9375rem; color: var(--color-gray-600); line-height: var(--leading-relaxed); }

/* ── CTA: mirna svijetla ploča, kalkulator ostaje glavni sadržaj ── */
body .cta-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-8) var(--space-6);
  color: var(--color-gray-700);
  box-shadow: none;
}
body .cta-icon { display: none; }
body .cta-title { color: var(--color-text); font-size: 1.375rem; margin-bottom: var(--space-3); }
body .cta-text { color: var(--color-gray-600); font-size: var(--text-base); max-width: 560px; margin-bottom: var(--space-6); }
body .cta-card .btn-ghost { background: var(--color-surface); color: var(--color-gray-700); border-color: var(--color-border-strong); }
body .cta-card .btn-ghost:hover { background: var(--color-gray-50); border-color: var(--color-gray-400); }
@media (max-width: 640px) {
  body .cta-card { padding: var(--space-6) var(--space-4); }
  body .cta-title { font-size: 1.1875rem; }
  body .cta-actions .btn { width: 100%; }
}

/* ── CTA za Faktura.ba na plavoj ploči s krugovima (07.10.2026., po uzoru na hero nove faktura.ba) ──
   Samo CSS (bez JS-a i animacije): prelaz plave + dva velika blijeda kruga u uglovima (::before dolje lijevo, ::after gore desno).
   Krugovi su ukras iza teksta i ne mijenjaju visinu ploče. */
body .cta-plava {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--cta-gradient);
  border-color: transparent;
  color: rgb(255 255 255 / .9);
}
body .cta-plava::before,
body .cta-plava::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: var(--cta-krug);
  pointer-events: none;
}
body .cta-plava::before { width: 460px; height: 460px; left: -190px; bottom: -270px; }
body .cta-plava::after  { width: 320px; height: 320px; right: -110px; top: -170px; }
@media (max-width: 640px) {
  body .cta-plava::before { width: 300px; height: 300px; left: -150px; bottom: -190px; }
  body .cta-plava::after  { width: 220px; height: 220px; right: -100px; top: -130px; }
}
body .cta-plava .cta-title, body .cta-plava h2 { color: #fff; }
body .cta-plava .cta-text, body .cta-plava p, body .cta-plava .cta-feature { color: rgb(255 255 255 / .95); }
body .cta-plava .cta-feature::before { background: rgb(255 255 255 / .18); color: #fff; }
body .cta-plava .btn.btn-primary { background: #fff; color: var(--color-primary); border-color: #fff; }
body .cta-plava .btn.btn-primary:hover { background: var(--color-primary-light); border-color: var(--color-primary-light); color: var(--color-primary); box-shadow: 0 6px 16px rgb(14 26 47 / .25); }
body .cta-plava .btn.btn-ghost { background: transparent; color: #fff; border-color: rgb(255 255 255 / .55); }
body .cta-plava .btn.btn-ghost:hover { background: rgb(255 255 255 / .12); border-color: #fff; }
body .cta-plava .btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; box-shadow: none; }

/* ── Povezani kalkulatori ── */
body .related-grid { gap: var(--space-3); }
body .related-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-4) var(--space-5); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
body .related-card:hover { border-color: var(--color-primary-border); box-shadow: var(--shadow-md); transform: none; }
body .related-card:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
body .related-name { color: var(--color-text); }
body .related-desc { color: var(--color-text-muted); }

/* ── Naslovnica: kartice kalkulatora ── */
.calc-hub-grid { grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 640px) { .calc-hub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .calc-hub-grid { grid-template-columns: repeat(3, 1fr); } }
.calc-hub-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  gap: var(--space-2);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
a.calc-hub-card:hover { border-color: var(--color-primary-border); box-shadow: var(--shadow-md); transform: translateY(-2px); }
a.calc-hub-card:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.calc-hub-icon { width: 44px; height: 44px; border-radius: var(--radius-lg); background: var(--color-primary-light); color: var(--color-primary); margin-bottom: var(--space-2); }
.calc-hub-icon svg { width: 22px; height: 22px; }
.calc-hub-name { font-size: 1.0625rem; font-weight: var(--font-bold); color: var(--color-text); line-height: 1.3; }
.calc-hub-desc { font-size: var(--text-sm); color: var(--color-gray-600); line-height: var(--leading-normal); }

/* ── CTA na naslovnici: ista mirna ploča kao na kalkulatorima ── */
.cta-section { background: transparent; padding-block: 0 var(--space-12); overflow: visible; }
.cta-section::before { display: none; }
.cta-content {
  max-width: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-10) var(--space-6);
}
.cta-content h2 { color: var(--color-text); font-size: 1.5rem; margin-bottom: var(--space-3); }
.cta-content p { color: var(--color-gray-600); font-size: var(--text-base); max-width: 620px; margin: 0 auto var(--space-6); }
.cta-content .btn-primary { background: var(--color-primary); color: var(--color-white); font-size: var(--text-base); }
.cta-content .btn-primary:hover { background: var(--color-primary-dark); box-shadow: var(--shadow-xs); }
.cta-feature { color: var(--color-gray-600); }
.cta-feature::before { background: var(--color-primary-light); color: var(--color-primary); }
@media (max-width: 640px) {
  .cta-section { padding-bottom: var(--space-8); }
  .cta-content { padding: var(--space-6) var(--space-4); }
  .cta-content h2 { font-size: 1.25rem; }
}

/* FAQ i CTA na naslovnici: ista uska kolona, ivice CTA se poklapaju s FAQ-om (07.10.2026.) */
.hub-faq-section > .container,
.cta-section > .container { max-width: 800px; }
body .hub-faq-section .faq-list { max-width: none; }

/* Hero kalkulatora poravnat sa kolonom sadržaja (container-sm) */
body .calc-hero > .container { max-width: 720px; padding-inline: var(--space-5); }

/* Uski ekrani: iznos u kartici rezultata smije preći u novi red umjesto da izađe iz ekrana */
@media (max-width: 480px) {
  body .result-card .result-card-value { white-space: normal; overflow-wrap: anywhere; font-size: 1.1875rem; }
}

/* Vrlo uski ekrani: iznosi ostaju u jednom redu; manje unutrašnje margine i font da i najveći iznosi stanu */
@media (max-width: 400px) {
  body .card { padding-inline: var(--space-3); }
  body .breakdown-table td { font-size: 0.75rem; }
  body #result-section .obr-pod td:first-child { padding-left: var(--space-4); }
}

/* Hijerarhija u detaljnom obračunu: glavna stavka, podstavke (manje, sive, uvučene) i objašnjenja */
body .breakdown-table .obr-bruto td { font-weight: var(--font-bold); color: var(--color-text); }
body .breakdown-table .obr-bruto td:last-child { font-size: var(--text-base); }
body .breakdown-table .obr-pod td { padding-top: 2px; padding-bottom: 2px; font-size: 0.8125rem; font-weight: var(--font-normal); color: var(--color-text-muted); border-bottom: none; }
body .breakdown-table .obr-pod td:first-child { padding-left: var(--space-6); }
body .breakdown-table .obr-pod td:last-child { font-weight: var(--font-medium); color: var(--color-gray-600); }
/* Razmak između posljednje podstavke i zelenog reda neto iznosa (npr. „Osnovica za porez" → „Neto honorar") */
body .breakdown-table .obr-pod:has(+ .row-neto) td { padding-bottom: var(--space-3); }
body .breakdown-table .obr-objasnjenje td { white-space: normal; text-align: left; font-style: italic; font-weight: var(--font-normal); color: var(--color-text-muted); }
/* Podstavka podstavke (npr. raspodjela zdravstva ispod reda zdravstva) — još dublje uvučena */
body #result-section .breakdown-table .obr-pod2 td:first-child { padding-left: var(--space-12); }
@media (max-width: 400px) {
  body .breakdown-table .obr-pod td { font-size: 0.75rem; }
  body .breakdown-table .obr-pod td:first-child { padding-left: var(--space-4); }
  body #result-section .breakdown-table .obr-pod2 td:first-child { padding-left: var(--space-8); }
}
@media (max-width: 400px) {
  body .breakdown-table .row-neto td, body .breakdown-table .obr-bruto td:last-child { font-size: 0.875rem; }
}

/* ============================================================
   DORADA 2026 – kategorije, kompaktnije stranice, semantika rezultata
   ============================================================ */

/* ── Akcent kategorije za „Povezane kalkulatore" (prema kalkulatoru na koji kartica vodi) ── */
.related-card[href*="/plata-"], .related-card[href*="/doprinosi-"]                  { --cat: var(--cat-plate);      --cat-bg: var(--cat-plate-bg);      --cat-border: var(--cat-plate-border); }
.related-card[href$="/pdv/"], .related-card[href*="/zatezna-kamata"]                 { --cat: var(--cat-pdv);        --cat-bg: var(--cat-pdv-bg);        --cat-border: var(--cat-pdv-border); }
.related-card:is([href*="/ugovor-o-djelu"], [href*="/autorski-honorar"], [href*="/freelance"]) { --cat: var(--cat-honorari); --cat-bg: var(--cat-honorari-bg); --cat-border: var(--cat-honorari-border); }
.related-card:is([href$="/marza/"], [href$="/rabat/"], [href$="/amortizacija/"])    { --cat: var(--cat-poslovanje); --cat-bg: var(--cat-poslovanje-bg); --cat-border: var(--cat-poslovanje-border); }
.related-card[href*="/obrasci/"]                                                     { --cat: var(--cat-obrasci);    --cat-bg: var(--cat-obrasci-bg);    --cat-border: var(--cat-obrasci-border); }
body .related-icon { background: var(--cat-bg, var(--color-primary-light)); color: var(--cat, var(--color-primary)); }
body .related-card:hover { border-color: var(--cat-border, var(--color-primary-border)); box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* ── Stranice kalkulatora: kompaktniji vrh, uvod i napomena bliže formi ── */
body .calc-hero { padding-block: var(--space-6) var(--space-6); }
body .calc-hero + .section-md { padding-block: var(--space-6) 0; }
body .calc-hero + .section-md .text-lead { margin-bottom: var(--space-3); }
body .calc-hero + .section-md + #kalkulator { padding-block: var(--space-5) var(--space-10); }
/* Forma i rezultati kao jedna cjelina, jasno odvojena od podloge */
body #kalkulator .card { box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }
body #kalkulator .card-title { padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
body #result-section .result-divider { height: 0; margin: var(--space-6) calc(-1 * var(--space-6)) var(--space-5); border-top: 1px solid var(--color-border); }
@media (max-width: 640px) {
  body .calc-hero { padding-block: var(--space-4) var(--space-5); }
  body .calc-hero + .section-md { padding-top: var(--space-5); }
  body .calc-hero + .section-md + #kalkulator { padding-block: var(--space-4) var(--space-8); }
  body #result-section .result-divider { margin-inline: calc(-1 * var(--space-4)); }
}
@media (max-width: 400px) {
  body #result-section .result-divider { margin-inline: calc(-1 * var(--space-3)); }
}

/* ── Semantika rezultata ──
   zeleno = neto / za isplatu; amber = porezi i doprinosi; crveno = samo ukupan trošak i ukupno za uplatu;
   bruto, osnovica i ostalo = neutralno. */
/* Odbici (doprinosi, porez) u obračunu honorara: redovi bez posebne klase */
body #res-izvodjac > tr:not([class]) > td:last-child { color: var(--color-warn-text); }
/* Doprinosi i naknade isplatioca (prvi red je bruto) */
body #res-isplatilac > tr:not([class]):not(:first-child) > td:last-child { color: var(--color-warn-text); }
/* Plata: grupe „Doprinosi iz plate" i „Porez na dohodak" */
body #result-section .obr-grupa > tr:first-child > td:last-child { color: var(--color-warn-text); }
/* Freelance: doprinos i porez */
body :is(#res-doprinos, #res-porez) { color: var(--color-warn-text); }
/* Ukupan trošak poslodavca / isplatioca i ukupno za uplatu – crveno */
body .breakdown-table .row-total:is(:has(#res-trosak), :has(#res-ukupno):has(+ .row-neto #res-ostaje)) td,
body #res-isplatilac .row-total td { color: var(--color-neg); }
body .breakdown-table .row-total:is(:has(#res-trosak), :has(#res-ukupno):has(+ .row-neto #res-ostaje)) td:last-child,
body #res-isplatilac .row-total td:last-child { color: var(--color-neg); }
/* Doprinosi obrtnika / preduzetnika: ukupno mjesečno – amber */
body .breakdown-table .row-total:has(#res-mjesecno) td { color: var(--color-warn-text); }
/* Rabat: cijena nakon rabata nije isplata – plava umjesto zelene */
body .breakdown-table .row-neto:has(#res-konacna) td { background: var(--color-primary-light); color: var(--color-primary-ink); border-top-color: var(--color-primary-border) !important; }
/* Doprinosi po vrsti (kartice) – amber vrijednost, bez obojene pozadine */
body .result-card.total { background: var(--color-surface); border-left: 3px solid var(--color-warn); }
body .result-card.total .result-card-value { color: var(--color-warn-text); }

/* ── Generator obrasca AUG-1031 (ugovor o djelu FBiH, autorski honorar FBiH) – aug-1031.js ── */
.aug-card { margin-top: var(--space-6); scroll-margin-top: 84px; }
.aug-uvod { font-size: var(--text-sm); color: var(--color-gray-600); margin: 0 0 var(--space-4); }
/* Kratko objašnjenje ispod dugmeta generatora (AUG-1031 i AMS-1035) */
.aug-objasnjenje, .ams-objasnjenje { font-size: var(--text-xs); line-height: 1.5; color: var(--color-gray-500); margin: var(--space-3) 0 0; }
.aug-card .mode-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
#aug-izvor-hint { margin-top: var(--space-2); }
#aug-unos-polja { margin-top: var(--space-4); }
.aug-greska { background: var(--color-warn-bg); border: 1px solid var(--color-warn); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); color: var(--color-gray-900); margin: 0; }
.aug-pregled { background: var(--color-gray-50); border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); margin: var(--space-5) 0 var(--space-2); }
.aug-pregled-naslov { font-size: var(--text-sm); font-weight: var(--font-semibold); margin: 0 0 var(--space-2); }
.aug-vrsta { font-weight: var(--font-normal); color: var(--color-gray-600); }
.aug-pregled table { width: 100%; font-size: var(--text-sm); border-collapse: collapse; }
.aug-pregled td { padding: var(--space-1) 0; vertical-align: top; }
.aug-pregled td:last-child { text-align: right; white-space: nowrap; padding-left: var(--space-3); font-variant-numeric: tabular-nums; }
.aug-pregled-napomena { font-size: var(--text-xs); color: var(--color-gray-500); margin: var(--space-2) 0 0; }
.aug-provjera { font-size: var(--text-sm); color: var(--color-pos); margin: var(--space-2) 0 0; }
.aug-provjera:empty { display: none; }
.aug-provjera--greska { color: var(--color-neg); display: flex; flex-direction: column; gap: var(--space-1); }
.aug-fieldset { border: 0; padding: 0; margin: var(--space-5) 0 0; min-width: 0; }
.aug-fieldset legend { padding: 0; margin-bottom: var(--space-3); font-size: var(--text-base); font-weight: var(--font-bold); color: var(--color-gray-900); }
.aug-neobavezno { font-weight: var(--font-normal); color: var(--color-gray-500); }
.aug-input-datum { max-width: 12rem; }
.aug-check { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-sm); cursor: pointer; margin: var(--space-2) 0; }
.aug-check input { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; }
.aug-privatnost { font-size: var(--text-xs); color: var(--color-gray-500); margin: 0 0 var(--space-3); }
.aug-status { background: var(--color-primary-light); border: 1px solid var(--color-primary-border); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); margin-top: var(--space-4); font-size: var(--text-sm); color: var(--color-primary-ink); }
.aug-status[hidden] { display: none; }
.aug-status-naslov { font-weight: var(--font-semibold); margin-bottom: var(--space-1); }
.aug-status p { margin: 0; }

/* ── Generator obrasca AMS-1035 (freelance porez FBiH i stranica obrasci/ams-1035) – ams-1035.js ── */
.ams-card{margin-top:var(--space-6);scroll-margin-top:84px}
.ams-uvod{font-size:var(--text-sm);color:var(--color-gray-600);margin:0 0 var(--space-4)}
#ams-izvor-hint{margin-top:var(--space-2)}
#ams-unos-polja{margin-top:var(--space-4)}
.ams-pregled tr.ams-zbir td{font-weight:var(--font-semibold);color:var(--color-gray-900)}
.ams-pregled tr.ams-zbir:first-of-type td,.ams-pregled tr.ams-kol td{border-top:1px solid var(--color-gray-200);padding-top:var(--space-2)}
.ams-fieldset{border:0;padding:0;margin:var(--space-5) 0 0;min-width:0}
.ams-fieldset legend{padding:0;margin-bottom:var(--space-3);font-size:var(--text-base);font-weight:var(--font-bold);color:var(--color-gray-900)}
.ams-pregled{background:var(--color-gray-50);border:1px solid var(--color-gray-200);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);margin:var(--space-2) 0 var(--space-4)}
.ams-pregled-naslov{font-size:var(--text-sm);font-weight:var(--font-semibold);margin:0 0 var(--space-2)}
.ams-pregled table{width:100%;font-size:var(--text-sm);border-collapse:collapse}
.ams-pregled td{padding:var(--space-1) 0;vertical-align:top}
.ams-pregled td:last-child{text-align:right;white-space:nowrap;padding-left:var(--space-3);font-variant-numeric:tabular-nums}
.ams-pregled-napomena{font-size:var(--text-xs);color:var(--color-gray-500);margin:var(--space-2) 0 0}
.ams-check{display:flex;align-items:flex-start;gap:var(--space-2);font-size:var(--text-sm);cursor:pointer;margin-bottom:var(--space-2)}
.ams-check input{width:16px;height:16px;margin-top:2px;flex-shrink:0}
.ams-privatnost{font-size:var(--text-xs);color:var(--color-gray-500);margin:0 0 var(--space-3)}
.ams-kasni{margin-top:var(--space-2);font-weight:var(--font-semibold)}
/* Posebne stranice obrazaca (obrasci/ams-1035, obrasci/aug-1031) i link na njih iz kartice na kalkulatoru */
.ams-card--samostalno, .aug-card--samostalno { margin-top: 0; }
.ams-link-stranica, .aug-link-stranica { font-size: var(--text-sm); margin: var(--space-2) 0 0; }
/* Linkovi na zakone, glasnike i zvanične izvore (otvaraju se u novoj kartici) */
a.link-izvor { color: var(--color-primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a.link-izvor:hover { color: var(--color-primary-ink); text-decoration-thickness: 2px; }
a.link-izvor:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 2px; }