/* ==========================================================================
   KUĆA ZDRAVLJA, forme i interaktivni test
   ========================================================================== */

/* --- Polja ---------------------------------------------------------------- */
.kz-forma { display: grid; gap: var(--kz-r-5); }

.kz-forma__red {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--kz-r-5);
}
@media (max-width: 40rem) {
  .kz-forma__red { grid-template-columns: 1fr; }
}

.kz-polje { display: grid; gap: var(--kz-r-2); }

.kz-polje > label {
  font-size: var(--kz-t-sm);
  font-weight: 600;
  color: var(--kz-mastilo);
  display: flex;
  align-items: baseline;
  gap: var(--kz-r-2);
}
.kz-polje > label span[aria-hidden] { color: var(--kz-terakota); }

.kz-polje__nije-obavezno {
  font-weight: 400;
  font-size: var(--kz-t-xs);
  color: var(--kz-tekst-tih);
}

.kz-polje :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--kz-linija);
  border-radius: var(--kz-zaob);
  background: var(--kz-bela);
  font-family: var(--kz-font-telo);
  font-size: var(--kz-t-baza);
  color: var(--kz-tekst);
  transition: border-color var(--kz-brzo), box-shadow var(--kz-brzo);
}
.kz-polje textarea { resize: vertical; min-height: 8rem; line-height: 1.65; }

.kz-polje :is(input, select, textarea):focus {
  outline: none;
  border-color: var(--kz-zelena-srednja);
  box-shadow: 0 0 0 3px var(--kz-zelena-najbleda);
}
.kz-polje :is(input, textarea)::placeholder { color: var(--kz-tekst-tih); }

.kz-polje select {
  appearance: none;
  background-image: 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='%237C8884' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.6rem;
}

/* Potvrda saglasnosti */
.kz-polje--potvrda {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--kz-r-3);
}
.kz-polje--potvrda input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.18rem;
  accent-color: var(--kz-zelena-duboka);
}
.kz-polje--potvrda label {
  font-weight: 400;
  font-size: var(--kz-t-sm);
  color: var(--kz-tekst-blazi);
  line-height: 1.6;
}

.kz-forma__dno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kz-r-4);
}
.kz-forma__napomena {
  margin: 0;
  font-size: var(--kz-t-sm);
  color: var(--kz-tekst-blazi);
}

/* Medena posuda mora biti nevidljiva, ali ne display:none, neki roboti preskaču skrivena polja. */
.kz-medena-posuda {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Poruke --------------------------------------------------------------- */
.kz-poruka {
  display: flex;
  align-items: flex-start;
  gap: var(--kz-r-3);
  padding: var(--kz-r-4) var(--kz-r-5);
  border-radius: var(--kz-zaob-md);
  margin-bottom: var(--kz-r-5);
  font-size: var(--kz-t-sm);
  line-height: 1.6;
}
.kz-poruka p { margin: 0; }
.kz-poruka__ikona { flex-shrink: 0; margin-top: 1px; }

.kz-poruka--uspeh {
  background: var(--kz-zelena-najbleda);
  border: 1px solid var(--kz-zelena-bleda);
  color: var(--kz-zelena-najdublja);
}
.kz-poruka--uspeh .kz-poruka__ikona { color: var(--kz-zelena); }

.kz-poruka--greska {
  background: var(--kz-terakota-bleda);
  border: 1px solid color-mix(in srgb, var(--kz-terakota) 35%, transparent);
  color: var(--kz-terakota-tamna);
}
.kz-poruka--greska .kz-poruka__ikona { color: var(--kz-terakota); }

/* --- Interaktivni test ---------------------------------------------------- */
.kz-test {
  background: var(--kz-bela);
  border: 1px solid var(--kz-linija-blaga);
  border-radius: var(--kz-zaob-lg);
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  box-shadow: var(--kz-senka);
}

.kz-test__uvod { margin-bottom: var(--kz-r-7); max-width: var(--kz-sirina-tekst); }
.kz-test__uvod h2 { font-size: var(--kz-t-xl); margin-bottom: var(--kz-r-3); }
.kz-test__uvod .kz-uvodni { font-size: var(--kz-t-baza); }

.kz-test__forma {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--kz-r-5);
}

.kz-test__grupa {
  border: 1px solid var(--kz-linija-blaga);
  border-radius: var(--kz-zaob-md);
  padding: var(--kz-r-5);
  margin: 0;
  background: var(--kz-krem);
}
.kz-test__grupa legend {
  display: flex;
  align-items: center;
  gap: var(--kz-r-2);
  padding-inline: var(--kz-r-3);
  font-family: var(--kz-font-telo);
  font-size: var(--kz-t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kz-tekst-blazi);
  background: var(--kz-bela);
  border: 1px solid var(--kz-linija-blaga);
  border-radius: var(--kz-zaob-pun);
}
.kz-test__ikona { color: var(--kz-terakota); display: grid; place-items: center; }

.kz-test__stavka {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--kz-r-3);
  align-items: start;
  padding: var(--kz-r-3) 0;
  border-bottom: 1px solid var(--kz-linija-blaga);
}
.kz-test__stavka:last-child { border-bottom: 0; padding-bottom: 0; }
.kz-test__stavka input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
  accent-color: var(--kz-zelena-duboka);
  flex-shrink: 0;
}
.kz-test__stavka label {
  font-size: var(--kz-t-sm);
  line-height: 1.58;
  color: var(--kz-tekst);
}
.kz-test__stavka input:checked + label { color: var(--kz-mastilo); font-weight: 500; }

.kz-test__dno {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kz-r-4);
  margin-top: var(--kz-r-3);
}
.kz-test__brojac {
  font-size: var(--kz-t-xs);
  color: var(--kz-tekst-tih);
  margin-left: auto;
}
@media (max-width: 34rem) {
  .kz-test__brojac { margin-left: 0; width: 100%; }
  .kz-test__dno .kz-dugme--veliko { width: 100%; justify-content: center; }
}

/* Nalaz */
.kz-test__nalaz {
  margin-top: var(--kz-r-7);
  padding-top: var(--kz-r-6);
  border-top: 2px solid var(--kz-zlatna);
}
.kz-test__rezime h3 {
  font-size: var(--kz-t-lg);
  margin-bottom: var(--kz-r-3);
  color: var(--kz-zelena-najdublja);
}
.kz-test__rezime p {
  font-size: var(--kz-t-baza);
  line-height: var(--kz-visina-citak);
  color: var(--kz-tekst-blazi);
  max-width: var(--kz-sirina-tekst);
}

.kz-test__preporuke { margin-top: var(--kz-r-6); }
.kz-test__preporuke h4 {
  font-family: var(--kz-font-telo);
  font-size: var(--kz-t-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kz-tekst-blazi);
  margin-bottom: var(--kz-r-4);
}

.kz-test__nalaz-grupa {
  padding: var(--kz-r-4) 0;
  border-bottom: 1px solid var(--kz-linija-blaga);
}
.kz-test__nalaz-grupa:last-child { border-bottom: 0; }
.kz-test__nalaz-grupa strong {
  display: block;
  font-family: var(--kz-font-naslov);
  font-size: var(--kz-t-baza);
  color: var(--kz-mastilo);
  margin-bottom: var(--kz-r-1);
}
.kz-test__nalaz-grupa p {
  font-size: var(--kz-t-sm);
  color: var(--kz-tekst-blazi);
  margin-bottom: var(--kz-r-3);
}
.kz-test__veze { display: flex; flex-wrap: wrap; gap: var(--kz-r-2); }

.kz-test__ograda {
  font-size: var(--kz-t-xs);
  color: var(--kz-tekst-tih);
  line-height: 1.6;
  margin-block: var(--kz-r-5);
  padding-left: var(--kz-r-4);
  border-left: 2px solid var(--kz-linija);
  max-width: var(--kz-sirina-tekst);
}

/* --- Raspored kontakt stranice -------------------------------------------- */
.kz-kontakt-mreza {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: start;
}
@media (max-width: 56rem) {
  .kz-kontakt-mreza { grid-template-columns: 1fr; }
}

.kz-kontakt-mreza__strana { display: grid; gap: var(--kz-r-5); }

.kz-kontakt-blok {
  padding: var(--kz-r-6);
  background: var(--kz-krem-topliji);
  border: 1px solid var(--kz-linija-blaga);
  border-radius: var(--kz-zaob-md);
}
.kz-kontakt-blok h2 {
  font-size: var(--kz-t-md);
  margin-bottom: var(--kz-r-4);
}
.kz-kontakt-blok__tekst {
  font-size: var(--kz-t-sm);
  line-height: 1.68;
  color: var(--kz-tekst-blazi);
  margin-bottom: var(--kz-r-4);
}

.kz-kontakt-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--kz-r-4); }
.kz-kontakt-lista li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--kz-r-3);
  align-items: start;
  margin: 0;
}
.kz-kontakt-lista__ikona {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: var(--kz-zaob-sm);
  background: var(--kz-zelena-najbleda);
  color: var(--kz-zelena-duboka);
  flex-shrink: 0;
}
.kz-kontakt-lista strong {
  display: block;
  font-size: var(--kz-t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kz-tekst-tih);
  font-weight: 600;
  margin-bottom: 2px;
}
.kz-kontakt-lista a {
  font-size: var(--kz-t-baza);
  font-weight: 500;
  text-decoration: none;
}
.kz-kontakt-lista__opis { font-size: var(--kz-t-sm); color: var(--kz-tekst-blazi); }