/* ==========================================================================
   KATE — naprave za naročnike
   --------------------------------------------------------------------------
   Vse barve, robovi in pisave so spremenljivke --kw-* iz teme kate-wing, zato
   se modul sam prilagodi svetli in temni različici strani in se ob spremembi
   barv teme spremeni z njo. Če teme ni, spodnji nadomestki poskrbijo, da je
   stran vseeno berljiva.
   ========================================================================== */

.kt-mreza,
.kt-naprava,
.kt-obrazec,
.kt-potrdilo,
.kt-obvestilo {
  --kt-povrsina: var(--kw-surface, #fff);
  --kt-povrsina-alt: var(--kw-surface-alt, #eef3f3);
  --kt-crnilo: var(--kw-ink, #0e161a);
  --kt-crnilo-mehko: var(--kw-ink-soft, #4c5c62);
  --kt-rob: var(--kw-border, #d7e1e2);
  --kt-poudarek: var(--kw-accent, #0e7c86);
  --kt-radij: var(--kw-radius, 12px);
  --kt-radij-s: var(--kw-radius-sm, 8px);
  --kt-mono: var(--kw-font-mono, ui-monospace, monospace);
}

/* --------------------------------------------------------------------------
   Mreža kartic
   -------------------------------------------------------------------------- */

.kt-mreza {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 1.2rem;
  margin: 0 0 1.6rem;
}
.kt-mreza--2 { grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr)); }
.kt-mreza--4 { grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }

/* Varovalo, kot ga ima tema pri svojih mrežah: urejevalnik lahko med kartice
   vrine prelom ali prazen odstavek; v mreži bi postal njen otrok in bi jo
   razlomil na dodatno vrsto. */
.kt-mreza > br,
.kt-mreza > p:empty { display: none; }

.kt-kartica {
  display: flex;
  min-width: 0;
  background: var(--kt-povrsina);
  border: 1px solid var(--kt-rob);
  border-radius: var(--kt-radij);
  overflow: hidden;
}
.kt-kartica:hover { border-color: var(--kt-poudarek); }
.kt-kartica--ni { opacity: 0.75; }

.kt-kartica__povezava {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.kt-kartica__povezava:hover { text-decoration: none; }

.kt-kartica__okvir {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--kt-povrsina-alt);
}
.kt-kartica__okvir img,
.kt-kartica__slika {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kt-kartica__okvir--prazen {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--kt-crnilo-mehko);
}

.kt-kartica__telo {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 1.1rem 1.1rem;
  min-width: 0;
}
.kt-kartica__naziv {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--kt-crnilo);
  overflow-wrap: anywhere;
}
.kt-kartica__opis {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--kt-crnilo-mehko);
}
.kt-kartica__cena {
  margin-top: auto;
  padding-top: 0.5rem;
  font-family: var(--kt-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.1rem;
  color: var(--kt-crnilo);
  /* Znesek in enota ostaneta skupaj; presledek v enopresledni pisavi je širok
     kot znak, zato ga nekoliko stisnemo. */
  white-space: nowrap;
  word-spacing: -0.2em;
}
.kt-kartica__obroki {
  font-family: var(--kt-mono);
  font-size: 0.82rem;
  color: var(--kt-crnilo-mehko);
  word-spacing: -0.15em;
}
.kt-kartica__stanje {
  align-self: flex-start;
  margin-top: 0.4rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--kt-povrsina-alt);
  font-size: 0.78rem;
  color: var(--kt-crnilo-mehko);
}

.kt-prazno { color: var(--kt-crnilo-mehko); }

/* --------------------------------------------------------------------------
   Stran naprave
   -------------------------------------------------------------------------- */

.kt-naprava__vrh {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.2rem;
  align-items: start;
  margin-bottom: 2.2rem;
}
@media (max-width: 780px) {
  .kt-naprava__vrh { grid-template-columns: 1fr; gap: 1.4rem; }
}

.kt-naprava__slika img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 60vh;
  object-fit: contain;
  background: var(--kt-povrsina-alt);
  border-radius: var(--kt-radij);
}
.kt-naprava__brez-slike {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: var(--kt-povrsina-alt);
  border-radius: var(--kt-radij);
  font-size: 3rem;
  color: var(--kt-crnilo-mehko);
}

.kt-naprava__podatki h1 { margin: 0 0 0.6rem; }
.kt-naprava__povzetek {
  margin: 0 0 1rem;
  font-size: 1.04rem;
  line-height: 1.6;
  color: var(--kt-crnilo-mehko);
}
.kt-naprava__cena {
  margin: 0;
  font-family: var(--kt-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.9rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--kt-crnilo);
  /* Presledek pred € je v enopresledni pisavi širok kot znak. */
  white-space: nowrap;
  word-spacing: -0.3em;
}
.kt-naprava__obroki {
  margin: 0.2rem 0 1.2rem;
  font-family: var(--kt-mono);
  font-size: 0.92rem;
  color: var(--kt-crnilo-mehko);
}

.kt-naprava__dejstva {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--kt-rob);
  font-size: 0.9rem;
  color: var(--kt-crnilo-mehko);
  display: grid;
  gap: 0.35rem;
}
.kt-naprava__dejstva strong { color: var(--kt-crnilo); font-weight: 600; }
.kt-naprava__poziv { margin: 0; }

.kt-naprava__opis { margin: 0 0 2.4rem; }
.kt-naprava__opis h2 { margin-top: 0; }

.kt-sorodne { margin-top: 2.8rem; }
.kt-sorodne h2 { margin: 0 0 1.2rem; }

/* --------------------------------------------------------------------------
   Naročilnica
   -------------------------------------------------------------------------- */

.kt-obrazec {
  margin: 0 0 2.4rem;
  padding: 1.8rem;
  background: var(--kt-povrsina);
  border: 1px solid var(--kt-rob);
  border-radius: var(--kt-radij);
  scroll-margin-top: 6rem;
}
@media (max-width: 560px) { .kt-obrazec { padding: 1.2rem 1.1rem; } }

.kt-obrazec h2 { margin: 0 0 0.6rem; }
.kt-obrazec__uvod {
  margin: 0 0 1.4rem;
  font-size: 0.95rem;
  color: var(--kt-crnilo-mehko);
}

/* Past za robote. Ne display:none — nekateri roboti prav takih polj ne
   izpolnijo, ker vedo, da so past. Polje je zato prisotno, a izven zaslona. */
.kt-past {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.kt-obrazec__izdelek {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  margin-bottom: 1.4rem;
  background: var(--kt-povrsina-alt);
  border-radius: var(--kt-radij-s);
}
.kt-obrazec__oznaka {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kt-crnilo-mehko);
}
.kt-obrazec__izdelek strong { font-size: 1.02rem; }
.kt-obrazec__koda {
  display: block;
  font-family: var(--kt-mono);
  font-size: 0.8rem;
  color: var(--kt-crnilo-mehko);
}
.kt-obrazec__kolicina label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.kt-obrazec__kolicina input {
  width: 5rem;
  padding: 0.5rem;
  border: 1px solid var(--kt-rob);
  border-radius: var(--kt-radij-s);
  background: var(--kw-bg, #fff);
  color: var(--kt-crnilo);
  font-family: var(--kt-mono);
  text-align: center;
}

.kt-placilo {
  margin: 0 0 1.6rem;
  padding: 0;
  border: 0;
}
.kt-placilo legend {
  padding: 0;
  margin-bottom: 0.6rem;
  font-size: 0.86rem;
  font-weight: 600;
}
.kt-placilo__izbira {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
  margin-bottom: 0.6rem;
  border: 1px solid var(--kt-rob);
  border-radius: var(--kt-radij-s);
  cursor: pointer;
}
.kt-placilo__izbira:has(input:checked) {
  border-color: var(--kt-poudarek);
  background: var(--kw-accent-soft, #e7f3f3);
}
.kt-placilo__izbira input { margin-top: 0.25rem; flex: none; }
.kt-placilo__izbira > span { display: block; min-width: 0; }
.kt-placilo__znesek {
  display: block;
  font-family: var(--kt-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  margin-top: 0.15rem;
  word-spacing: -0.15em;
}
.kt-placilo__opis {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.84rem;
  color: var(--kt-crnilo-mehko);
}

.kt-polja {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1rem;
}
@media (max-width: 560px) { .kt-polja { grid-template-columns: 1fr; } }
.kt-polje { margin: 0 0 1.1rem; }
.kt-polje--cela { grid-column: 1 / -1; }
@media (max-width: 560px) { .kt-polje--pol { grid-column: 1; } }

.kt-polje label {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.kt-zvezdica { color: #b3341a; }

.kt-polje input,
.kt-polje textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--kt-rob);
  border-radius: var(--kt-radij-s);
  background: var(--kw-bg, #fff);
  color: var(--kt-crnilo);
  font-family: inherit;
  font-size: 0.94rem;
  line-height: 1.4;
}
.kt-polje textarea { min-height: 90px; resize: vertical; }
.kt-polje--napaka input,
.kt-polje--napaka textarea { border-color: #b3341a; }

.kt-namig,
.kt-napaka {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.82rem;
}
.kt-namig { color: var(--kt-crnilo-mehko); }
.kt-napaka { color: #b3341a; font-weight: 600; }

.kt-soglasje { margin: 0 0 1.4rem; font-size: 0.9rem; }
.kt-soglasje label {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  line-height: 1.5;
}
.kt-soglasje input { margin-top: 0.2rem; flex: none; }

.kt-oddaja { margin: 0; }
.kt-oddaja__opomba {
  margin: 0.7rem 0 0;
  font-size: 0.82rem;
  color: var(--kt-crnilo-mehko);
}

/* Če teme ni, mora gumb vseeno biti gumb. */
.kt-obrazec button[type="submit"]:not([class*="kw-btn"]) {
  padding: 0.7rem 1.4rem;
  border: 0;
  border-radius: 7px;
  background: var(--kt-poudarek);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Potrdilo in obvestila
   -------------------------------------------------------------------------- */

.kt-potrdilo {
  margin: 0 0 2.4rem;
  padding: 1.6rem 1.8rem;
  border: 1px solid var(--kw-ok, #1f7a4d);
  border-left-width: 3px;
  border-radius: var(--kt-radij);
  background: var(--kw-ok-soft, #dcf0e4);
  scroll-margin-top: 6rem;
}
.kt-potrdilo h2 { margin: 0 0 0.6rem; }
.kt-potrdilo p { margin: 0 0 0.6rem; }
.kt-potrdilo p:last-child { margin-bottom: 0; }
.kt-potrdilo__st { font-family: var(--kt-mono); }

.kt-obvestilo {
  margin: 0 0 1.6rem;
  padding: 0.95rem 1.15rem;
  border: 1px solid var(--kt-rob);
  border-left: 3px solid var(--kt-poudarek);
  border-radius: var(--kt-radij-s);
  background: var(--kt-povrsina-alt);
  font-size: 0.94rem;
}
.kt-obvestilo p { margin: 0 0 0.4rem; }
.kt-obvestilo p:last-child { margin-bottom: 0; }
.kt-obvestilo--napaka { border-left-color: #b3341a; }