/* Voyager web hosting (RIFIN d.o.o.): zajednički stil */

:root {
  --pozadina: #ffffff;
  --pozadina-2: #f6f6f7;
  --pozadina-3: #fbf7f7;
  --tekst: #16181d;
  --tekst-2: #5b616e;
  --tekst-3: #8a909c;
  --rub: #e4e6ea;
  --rub-2: #d3d6dc;
  --crvena: #b00000;
  --crvena-tamna: #8c0000;
  --crvena-svijetla: #fbeaea;
  --tamna: #15161a;

  --font-tekst: Arial, "Helvetica Neue", Helvetica, "Liberation Sans", sans-serif;
  --font-mono: Consolas, "Cascadia Mono", "SF Mono", Menlo, "DejaVu Sans Mono", "Liberation Mono", monospace;

  --sirina: 1120px;
  --radijus: 12px;
  --sjena: 0 1px 2px rgba(16, 24, 40, 0.05), 0 4px 16px rgba(16, 24, 40, 0.06);
  --sjena-jaka: 0 2px 4px rgba(16, 24, 40, 0.06), 0 12px 32px rgba(16, 24, 40, 0.10);
}

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

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

body {
  margin: 0;
  background: var(--pozadina);
  color: var(--tekst);
  font-family: var(--font-tekst);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--crvena); text-underline-offset: 3px; }
a:hover { color: var(--crvena-tamna); }

h1, h2, h3 {
  font-family: var(--font-tekst);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  color: var(--tekst);
}
h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.15rem; letter-spacing: -0.01em; }

p { margin: 0 0 1em; }

.mono { font-family: var(--font-mono); font-size: 0.95em; }

.omot {
  max-width: var(--sirina);
  margin: 0 auto;
  padding-inline: 24px;
}

/* Zaglavlje */

.zaglavlje {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--rub);
}

.zaglavlje .omot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  min-height: 72px;
}

.logo {
  flex-shrink: 0;
  font-family: Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--tekst);
  text-decoration: none;
  line-height: 1;
}
.logo span { color: var(--crvena); }
.logo:hover { color: var(--tekst); }

.izbornik {
  display: flex;
  gap: 4px;
  font-size: 0.95rem;
  font-weight: 700;
}
.izbornik a {
  color: var(--tekst-2);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 8px;
  white-space: nowrap;
  transition: color 0.15s, background-color 0.15s;
}
.izbornik a:hover { color: var(--tekst); background: var(--pozadina-2); }
.izbornik a[aria-current="page"] { color: var(--crvena); background: var(--crvena-svijetla); }
.izbornik a[href="kontakt.html"] { margin-left: 8px; color: #fff; background: var(--tekst); }
.izbornik a[href="kontakt.html"]:hover { background: #000; color: #fff; }
.izbornik a[href="kontakt.html"][aria-current="page"] { background: var(--crvena); color: #fff; }

/* Sekcije */

.sekcija { padding-block: 72px; }
.sekcija-siva { background: var(--pozadina-2); }

.uvod {
  padding-block: 64px 56px;
  background-color: #f7f7f8;
  background-image:
    linear-gradient(#e9eaee 1px, transparent 1px),
    linear-gradient(90deg, #e9eaee 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: -1px -1px;
  border-bottom: 1px solid var(--rub);
}
.uvod h1 { max-width: 20em; }
.uvod h1::before {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background: var(--crvena);
  margin-bottom: 20px;
}
.uvod p { font-size: 1.15rem; color: var(--tekst-2); max-width: 40em; }

.uvod-naslovnica { padding-block: 80px 40px; }
.uvod-naslovnica h1::before { display: none; }

.crveno { color: var(--crvena); }

.nadnaslov {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.85rem !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tekst-2) !important;
  margin: 0 0 22px !important;
}
.nadnaslov::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--crvena);
}

/* Slideshow na naslovnici */

/* Slajdovi se pomiču prema gore: novi dolazi odozdo, stari odlazi prema vrhu */
.uvod-naslovnica { overflow: hidden; }
.slajdovi {
  display: grid;
  overflow: hidden;
  padding: 40px 90px 110px;
  margin: -40px -90px -110px;
}
.slajd {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(70%);
  transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.8s ease, visibility 0s linear 0.8s;
}
.slajd.aktivan {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.8s ease, visibility 0s;
}
.slajd.izlazi { transform: translateY(-70%); }
.slajd-poveznica.aktivan { cursor: pointer; }
.slajd-poveznica.aktivan:hover .terminal { box-shadow: 0 34px 80px rgba(176, 0, 0, 0.22); }

@media (prefers-reduced-motion: reduce) {
  .slajd,
  .slajd.izlazi { transform: none; }
}
.slajd h1,
.slajd-naslov {
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  margin: 0 0 20px;
}
.slajd-opis { font-size: 1.2rem; color: var(--tekst-2); max-width: 32em; margin: 0; }

.terminal {
  background: var(--tamna);
  border: 1px solid #2a2c33;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(16, 24, 40, 0.28);
}
.terminal-glava {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: #1c1d22;
  border-bottom: 1px solid #2a2c33;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: #8a909c;
}
.terminal-oznaka {
  color: #ff8a8a;
  background: rgba(176, 0, 0, 0.25);
  padding: 2px 10px;
  border-radius: 999px;
}
.terminal-tijelo {
  padding: 22px 26px 26px;
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: 2;
  color: #d4d7de;
}
.terminal-znak { color: #ff6b6b; }
.terminal-red { display: grid; grid-template-columns: 9.5em 1fr; column-gap: 0.6em; }
.terminal-red span:first-child { color: #8a909c; }

.slajd-kontrole {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 44px;
}
html:not(.js) .slajd-kontrole { display: none; }
.slajd-strelica {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--rub-2);
  background: #fff;
  color: var(--tekst);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.slajd-strelica:hover { border-color: var(--crvena); color: var(--crvena); }
.slajd-strelica svg { width: 18px; height: 18px; }
.slajd-tocke { display: flex; gap: 8px; }
.slajd-tocka {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 999px;
  border: 0;
  background: var(--rub-2);
  cursor: pointer;
  transition: width 0.3s, background-color 0.3s;
}
.slajd-tocka.aktivna { width: 32px; background: var(--crvena); }

.naslov-sredina { text-align: center; margin-bottom: 8px; }
.naslov-sredina p { color: var(--tekst-2); margin: 0; }
.napomena-sredina { text-align: center; }

.gumbi { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.gumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-tekst);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 14px 24px;
  border: 2px solid var(--crvena);
  border-radius: 10px;
  text-decoration: none;
  background: var(--crvena);
  color: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 4px 12px rgba(176, 0, 0, 0.18);
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.gumb:hover {
  background: var(--crvena-tamna);
  border-color: var(--crvena-tamna);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(16, 24, 40, 0.08), 0 8px 20px rgba(176, 0, 0, 0.22);
}
.gumb-drugi {
  background: #fff;
  color: var(--tekst);
  border-color: var(--rub-2);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}
.gumb-drugi:hover {
  background: #fff;
  color: var(--crvena);
  border-color: var(--crvena);
  box-shadow: 0 4px 12px rgba(16, 24, 40, 0.08);
}
.gumb-tamni {
  background: var(--tekst);
  border-color: var(--tekst);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1);
}
.gumb-tamni:hover { background: #000; border-color: #000; box-shadow: 0 6px 16px rgba(16, 24, 40, 0.2); }

/* Paketi */

.paketi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}

.paket {
  display: flex;
  flex-direction: column;
  background: var(--pozadina);
  border: 1px solid var(--rub);
  border-radius: var(--radijus);
  overflow: hidden;
  box-shadow: var(--sjena);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.paket:hover { transform: translateY(-3px); box-shadow: var(--sjena-jaka); }

.paket-glava {
  padding: 26px 28px 22px;
  background: #f7f7f8;
  border-bottom: 1px solid var(--rub);
}

.paket h3 {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--tekst);
  margin-bottom: 10px;
}

.cijena {
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--tekst);
  line-height: 1.1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cijena-pdv { font-size: 0.5em; font-weight: 400; letter-spacing: 0; color: var(--tekst-3); }
.cijena-sidrena { margin-top: 4px; font-size: 0.8rem; color: var(--tekst-3); }
.cijena-prva { margin-top: 6px; font-size: 0.9rem; font-weight: 700; color: var(--crvena); }
.cijena-opis { font-size: 0.85rem; color: var(--tekst-3); margin: 6px 0 20px; }

.stavke {
  list-style: none;
  margin: 0;
  padding: 16px 28px 8px;
  font-family: var(--font-mono);
  font-size: 0.95rem;
}
.stavke li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-block: 8px;
  color: var(--tekst-2);
}
.stavke li span:first-child { display: flex; align-items: baseline; gap: 8px; flex: 1 1 auto; white-space: nowrap; }
.stavke li span:first-child::after {
  content: "";
  flex: 1 1 auto;
  min-width: 12px;
  border-bottom: 1px dotted #c7cad1;
  transform: translateY(-4px);
}
.stavke li span:last-child { font-weight: 700; color: var(--tekst); text-align: right; white-space: nowrap; }

.paket .gumb { margin: auto 28px 28px; }
.paket .stavke + .gumb { margin-top: 16px; }

.napomena { font-size: 0.9rem; color: var(--tekst-2); margin-top: 20px; }

/* Prednosti */

.prednosti {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}
.prednost {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: #f7f7f8;
  border-radius: var(--radijus);
  padding: 24px;
}
.sekcija-siva .prednost { background: var(--pozadina); box-shadow: var(--sjena); }
.prednost h3 { margin-bottom: 4px; font-size: 1.05rem; }
.prednost p { margin: 0; color: var(--tekst-2); font-size: 0.95rem; }
.sekcija-prednosti { padding-top: 16px; }

.ikona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--tekst);
  color: #fff;
}
.ikona svg { width: 22px; height: 22px; }

/* Tablice */

.tablica-omot {
  overflow-x: auto;
  margin-top: 24px;
  background: var(--pozadina);
  border: 1px solid var(--rub);
  border-radius: var(--radijus);
  box-shadow: var(--sjena);
}

.tablica {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.tablica th,
.tablica td {
  padding: 13px 18px;
  border-bottom: 1px solid var(--rub);
  text-align: left;
  vertical-align: top;
}
.tablica tbody tr:last-child td { border-bottom: 0; }
.tablica tbody tr:nth-child(even) td { background: #fafafb; }
.tablica thead th {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tekst-2);
  background: var(--pozadina-2);
  white-space: nowrap;
}
.tablica td:first-child { color: var(--tekst-2); }
.tablica td.broj,
.tablica th.broj { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tablica td.broj { font-weight: 700; color: var(--tekst); }
.tablica td.mono { font-family: var(--font-mono); font-size: 0.9rem; color: var(--tekst); }
.tablica tr.istaknuto td { color: var(--crvena); font-weight: 700; font-size: 1.05rem; }
.tablica tr.istaknuto td:first-child { color: var(--tekst); }
.tablica .sitno { display: block; font-size: 0.8rem; font-weight: 400; color: var(--tekst-3); }

/* Tablica paketa kao kartice na uskom ekranu (js/kartice.js) */
.kartice { display: none; }
.tablica-omot.kao-kartice { overflow: visible; background: none; border: 0; box-shadow: none; }
.tablica-omot.kao-kartice .tablica { display: none; }
.tablica-omot.kao-kartice .kartice { display: grid; gap: 16px; }
.kartica {
  background: var(--pozadina);
  border: 1px solid var(--rub);
  border-radius: var(--radijus);
  box-shadow: var(--sjena);
  padding: 18px 22px 8px;
}
.kartica h3 {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 6px;
}
.kartica dl { margin: 0; }
.kartica dl div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 16px;
  padding-block: 10px;
  border-top: 1px solid var(--rub);
}
.kartica dt { color: var(--tekst-2); }
.kartica dd { margin: 0 0 0 auto; font-weight: 700; color: var(--tekst); text-align: right; }
.kartica .istaknuto dd { color: var(--crvena); font-size: 1.05rem; }

.popis { margin: 0 0 1em; padding: 0; list-style: none; }
.popis li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
}
.popis li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--crvena-svijetla) no-repeat center / 12px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b00000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* Česta pitanja */

.pitanja { max-width: 50em; }
.pitanja h2 { margin-bottom: 8px; }
.pitanja h3 {
  margin: 24px 0 6px;
  padding-top: 20px;
  border-top: 1px solid var(--rub);
}
.pitanja h2 + h3 { border-top: 0; padding-top: 8px; }
.pitanja p { color: var(--tekst-2); }

/* Obrazac za narudžbu */

.obrazac-narudzbe { max-width: 46em; }

.obrazac-narudzbe fieldset {
  border: 1px solid var(--rub);
  border-radius: var(--radijus);
  padding: 20px 24px 10px;
  margin: 0 0 24px;
  background: var(--pozadina);
  box-shadow: var(--sjena);
}
.obrazac-narudzbe legend {
  font-weight: 700;
  font-size: 1.05rem;
  padding: 0 8px;
  margin-left: -8px;
}

.polje { margin-bottom: 18px; }
.polje-red { display: grid; grid-template-columns: 9em 1fr; gap: 0 16px; }
.polje-red-jednako { grid-template-columns: 1fr 1fr; }
.polje input[type="number"] { max-width: 9em; }
.podnaslov-obrasca { margin: 22px 0 10px; font-size: 1rem; }
.pregled-ukupno dt { font-weight: 700; color: var(--tekst); }
.pregled-ukupno dd { color: var(--crvena); }
.polje label { display: block; font-weight: 700; font-size: 0.95rem; margin-bottom: 6px; }
.polje .pomoc { display: block; font-size: 0.85rem; color: var(--tekst-3); margin-top: 5px; }

.polje input[type="text"],
.polje input[type="email"],
.polje input[type="tel"],
.polje input[type="password"],
.polje input[type="number"],
.polje textarea {
  width: 100%;
  font: inherit;
  padding: 11px 14px;
  border: 1px solid var(--rub-2);
  border-radius: 10px;
  background: #fff;
  color: var(--tekst);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.polje textarea { min-height: 120px; resize: vertical; }
.polje input:focus,
.polje textarea:focus {
  outline: none;
  border-color: var(--crvena);
  box-shadow: 0 0 0 4px rgba(176, 0, 0, 0.12);
}

.izbor {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
  padding: 12px 14px;
  border: 1px solid var(--rub);
  border-radius: 10px;
  font-weight: 400;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.izbor:hover { border-color: var(--rub-2); background: #fcfcfd; }
.izbor:has(input:checked) { border-color: var(--crvena); background: var(--pozadina-3); }
.izbor input { margin-top: 4px; accent-color: var(--crvena); flex-shrink: 0; }
.izbor .mono { white-space: nowrap; }

.obavezno { color: var(--crvena); }

.skriveno-polje { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.poruka-greska {
  border: 1px solid #f0b4b4;
  border-left: 4px solid var(--crvena);
  border-radius: 10px;
  padding: 14px 18px;
  background: #fff6f6;
  margin-bottom: 24px;
}
.poruka-greska ul { margin: 0.5em 0 0; }

button.gumb { cursor: pointer; }

/* Koraci narudžbe */

.nowrap { white-space: nowrap; }
.popust-istaknuto { color: var(--crvena); font-weight: 700; }

.obrazac-narudzbe fieldset[hidden],
.pregled[hidden] { display: none; }

.napredak {
  background: var(--pozadina);
  border: 1px solid var(--rub);
  border-radius: var(--radijus);
  padding: 18px 22px 16px;
  margin-bottom: 24px;
  box-shadow: var(--sjena);
  scroll-margin-top: 90px;
}
html:not(.js) .napredak,
html:not(.js) .korak-akcije [data-idi] { display: none; }

.napredak-glava {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tekst-3);
  margin-bottom: 10px;
}

.napredak-traka {
  height: 6px;
  background: var(--pozadina-2);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 14px;
}
.napredak-traka span {
  display: block;
  width: 25%;
  height: 100%;
  background: var(--crvena);
  border-radius: 999px;
  transition: width 0.35s ease;
}

.koraci {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.koraci button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 4px 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--tekst-3);
  text-align: left;
  cursor: pointer;
}
.koraci button:disabled { cursor: default; }
.koraci .broj {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--rub-2);
  background: #fff;
  font-size: 0.85rem;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.koraci li.aktivan button { color: var(--tekst); }
.koraci li.aktivan .broj { border-color: var(--crvena); color: var(--crvena); box-shadow: 0 0 0 4px rgba(176, 0, 0, 0.1); }
.koraci li.gotov button { color: var(--tekst-2); }
.koraci li.gotov .broj { background: var(--crvena); border-color: var(--crvena); color: #fff; }
.koraci li.gotov button:hover { color: var(--crvena); }

.korak-akcije {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 20px 0 14px;
  padding-top: 18px;
  border-top: 1px solid var(--rub);
}
html:not(.js) .korak-akcije { border-top: 0; padding-top: 0; justify-content: flex-end; }

.pregled {
  background: var(--pozadina-2);
  border-radius: 10px;
  padding: 16px 20px 6px;
  margin: 8px 0 16px;
}
.pregled h3 { font-size: 1rem; margin-bottom: 4px; }

@media (max-width: 640px) {
  .koraci { grid-template-columns: auto auto auto 1fr; gap: 6px; }
  .koraci .naziv { display: none; }
  .koraci li.aktivan .naziv { display: inline; }
  .korak-akcije .gumb { flex: 1 1 0; }
  .polje-red { grid-template-columns: 6.5em 1fr; }
}

/* Pravni tekstovi */

.pravni { max-width: 50em; }
.pravni h2 { margin-top: 2em; font-size: 1.3rem; }
.pravni ol,
.pravni ul { padding-left: 1.4em; margin: 0 0 1em; }
.pravni li { margin-bottom: 0.5em; }
.pravni li ul { margin-top: 0.4em; }
.pravni li::marker { color: var(--tekst-3); }

.obrazac {
  border: 1px dashed var(--rub-2);
  border-radius: var(--radijus);
  padding: 20px 24px;
  background: var(--pozadina-2);
}
.obrazac p { margin-bottom: 0.8em; }

/* Kontakt */

.dva-stupca {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.dva-stupca > div {
  background: var(--pozadina);
  border: 1px solid var(--rub);
  border-radius: var(--radijus);
  padding: 24px 28px;
  box-shadow: var(--sjena);
}

.podaci { margin: 0; }
.podaci div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  padding-block: 11px;
  border-bottom: 1px solid var(--rub);
}
.podaci div:last-child { border-bottom: 0; }
.podaci dt { color: var(--tekst-2); }
.podaci dd { margin: 0; font-weight: 700; text-align: right; }

.sekcija > .omot > .podaci,
.sekcija > .omot > h2 + .podaci {
  background: var(--pozadina);
  border: 1px solid var(--rub);
  border-radius: var(--radijus);
  padding: 8px 28px;
  box-shadow: var(--sjena);
  max-width: 44em;
}

.prijava-panel {
  background: var(--pozadina);
  border: 1px solid var(--rub);
  border-radius: var(--radijus);
  padding: 24px 28px;
  box-shadow: var(--sjena);
  max-width: 28em;
}
.prijava-panel .gumb { width: 100%; }

/* Podnožje */

.podnozje {
  background: var(--tamna);
  color: #b8bcc6;
  font-size: 0.9rem;
}
.podnozje .omot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px 40px;
  padding-block: 40px;
}
.podnozje p { margin: 0 0 4px; }
.podnozje strong { color: #fff; }
.podnozje a { color: #fff; text-decoration: none; }
.podnozje a:hover { color: #ffb3b3; text-decoration: underline; }
.podnozje-poveznice { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.podnozje-tvrtka { display: flex; align-items: center; gap: 16px; }
.podnozje-logo { width: 112px; height: auto; flex-shrink: 0; padding: 6px 8px; background: #fff; border-radius: 6px; }

.izbor .sidrena { display: block; font-size: 0.85em; color: var(--tekst-3); }

/* Preklopnik cijena bez PDV-a / s PDV-om (js/pdv.js) */

html.pdv-sa .iznos-bez,
html.pdv-bez .iznos-sa { display: none; }
.iznos-bez,
.iznos-sa { white-space: nowrap; }

.pdv-traka {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 0.95rem;
}
.pdv-traka:empty { display: none; }
.naslov-pdv {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 16px;
  margin-bottom: 14px;
}
.naslov-pdv h2 { margin-bottom: 0; }
.naslov-pdv .pdv-traka { margin-bottom: 0; margin-left: auto; }
.pdv-izbor { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; }
.pdv-oznaka { color: var(--tekst-2); font-weight: 700; white-space: nowrap; }
.csv-poveznica { margin-right: auto; font-weight: 700; white-space: nowrap; }
.naslov-pdv .csv-poveznica { margin-right: 6px; }

.pdv-preklopnik {
  display: inline-flex;
  vertical-align: middle;
  padding: 2px;
  border: 1px solid var(--rub-2);
  border-radius: 999px;
  background: var(--pozadina);
  white-space: nowrap;
}
.pdv-preklopnik button {
  font: inherit;
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1.4;
  color: var(--tekst-2);
  background: none;
  border: 0;
  border-radius: 999px;
  padding: 2px 10px;
  cursor: pointer;
}
.pdv-preklopnik button:hover { color: var(--crvena); }
.pdv-preklopnik button[aria-pressed="true"] { color: #fff; background: var(--crvena); }
.pdv-preklopnik button:focus-visible { outline: 2px solid var(--crvena); outline-offset: 2px; }

/* Tablet i mobitel */

@media (max-width: 960px) {
  .paketi,
  .prednosti { grid-template-columns: 1fr; max-width: 520px; }
  .prednosti { grid-template-columns: repeat(2, 1fr); max-width: none; }
}

@media (max-width: 800px) {
  .zaglavlje .omot { flex-wrap: wrap; min-height: 0; padding-block: 12px 0; }
  .logo { font-size: 1.35rem; }
  .podnozje-tvrtka { flex-direction: column; align-items: flex-start; gap: 12px; }
  .izbornik {
    width: calc(100% + 48px);
    margin-inline: -24px;
    padding: 4px 16px 10px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .izbornik::-webkit-scrollbar { display: none; }
  .sekcija { padding-block: 48px; }
  .uvod { padding-block: 40px 36px; }
  .uvod-naslovnica { padding-block: 44px 28px; }
  .slajd { grid-template-columns: 1fr; gap: 28px; }
  .slajd-opis { font-size: 1.05rem; }
  .terminal-tijelo { font-size: 0.85rem; padding: 16px 18px 18px; }
  .terminal-red { grid-template-columns: 8.5em 1fr; }
  .slajd-kontrole { margin-top: 28px; justify-content: center; }
  .izbornik a[href="kontakt.html"] { margin-left: 0; }
  .dva-stupca,
  .prednosti { grid-template-columns: 1fr; }
  .paket-glava { padding: 22px 22px 18px; }
  .stavke { padding-inline: 22px; }
  .paket .gumb { margin-inline: 22px; }
  .gumbi .gumb { flex: 1 1 auto; }
}

@media (max-width: 420px) {
  .omot { padding-inline: 18px; }
  .izbornik { width: calc(100% + 36px); margin-inline: -18px; }
  .cijena { font-size: 1.9rem; }
}