/* Kurs za harmoniku: traka za kolačiće, podešavanja, dugmad za čet i pristupačnost, snimci na klik (dodatak kh-mega-meni) */

/* Promenljive: boje brenda, fontovi i bočne margine (računar 10%, tablet 3%, telefon 16 px) */
:root {
  --khz-mastilo: #231B1D;
  --khz-tamna: #1E1517;
  --khz-najtamnija: #171012;
  --khz-zlatna: #C49A45;
  --khz-zlatna-svetla: #D9B76A;
  --khz-slonovaca: #FBF6EC;
  --khz-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --khz-sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --khz-bocno: 10%;
  --khz-razmak-dugmadi: 20px;
}

/* Tablet */
@media (max-width: 1024px) {
  :root { --khz-bocno: 3%; }
}

/* Telefon */
@media (max-width: 767px) {
  :root { --khz-bocno: 16px; --khz-razmak-dugmadi: 16px; }
}

/* Jednako računanje dimenzija u svim delovima */
.khz-traka, .khz-traka *, .khz-dijalog, .khz-dijalog *, .khz-cet, .khz-cet *, .khz-pristupacnost-dugme, .khz-snimak, .khz-snimak * { box-sizing: border-box; }

/* Tekst samo za čitače ekrana */
.khz-skriveno { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- Dugmad ---------- */

/* Tema Hello Elementor boji svako dugme u fokusu i pod mišem i ne prelama tekst dugmeta;
   zato su sva naša pravila za dugmad vezana za okvir (traka, prozor, čet, snimak) i imaju veću težinu od pravila teme */

/* Osnovno dugme izbora: obrub zlatne boje na tamnoj podlozi; sva dugmad izbora imaju isti izgled */
.khz-traka .khz-dugme, .khz-dijalog .khz-dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin: 0;
  padding: 10px 26px;
  border: 1px solid var(--khz-zlatna);
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  font-family: var(--khz-sans);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: none;
  text-decoration: none;
  white-space: normal;
  color: var(--khz-slonovaca);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* Dugme u traci u fokusu posle klika: bez promene boje */
.khz-traka .khz-dugme:focus { background: transparent; color: var(--khz-slonovaca); box-shadow: none; outline: none; }

/* Dugme u traci pod mišem */
.khz-traka .khz-dugme:hover { background: var(--khz-zlatna); border-color: var(--khz-zlatna); color: var(--khz-mastilo); }

/* Okvir fokusa za tastaturu u traci */
.khz-traka .khz-dugme:focus-visible { outline: 2px solid var(--khz-zlatna-svetla); outline-offset: 3px; box-shadow: none; }

/* Dugme na svetloj podlozi (prozori) */
.khz-dijalog .khz-dugme-tamno { border-color: var(--khz-mastilo); color: var(--khz-mastilo); }

/* Dugme u prozoru u fokusu posle klika: bez promene boje */
.khz-dijalog .khz-dugme-tamno:focus { background: transparent; color: var(--khz-mastilo); box-shadow: none; outline: none; }

/* Dugme u prozoru pod mišem */
.khz-dijalog .khz-dugme-tamno:hover { background: var(--khz-mastilo); border-color: var(--khz-mastilo); color: var(--khz-slonovaca); }

/* Okvir fokusa za tastaturu u prozoru */
.khz-dijalog .khz-dugme-tamno:focus-visible { outline: 2px solid var(--khz-zlatna); outline-offset: 3px; box-shadow: none; }

/* ---------- Traka pri prvoj poseti ---------- */

/* Traka na dnu ekrana; fiksna, pa ne pomera sadržaj stranice */
.khz-traka {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99990;
  background: var(--khz-tamna);
  border-top: 1px solid rgba(196, 154, 69, 0.55);
  box-shadow: 0 -18px 40px -24px rgba(0, 0, 0, 0.6);
  color: var(--khz-slonovaca);
  font-family: var(--khz-sans);
  -webkit-font-smoothing: antialiased;
}

/* Unutrašnji okvir: tekst levo, dugmad desno */
.khz-traka-okvir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px 48px;
  padding: 22px var(--khz-bocno);
}

/* Tekstualni deo */
.khz-traka-tekst { max-width: 820px; }

/* Pitanje u traci */
.khz-traka .khz-traka-naslov { margin: 0 0 6px; font-family: var(--khz-serif); font-weight: 600; font-size: 20px; line-height: 1.3; color: var(--khz-slonovaca); }

/* Objašnjenje u traci */
.khz-traka .khz-traka-opis { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(251, 246, 236, 0.82); }

/* Link u traci */
.khz-traka .khz-traka-link {
  color: var(--khz-zlatna-svetla);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* Link u traci pod mišem i u fokusu */
.khz-traka .khz-traka-link:hover, .khz-traka .khz-traka-link:focus-visible { color: var(--khz-slonovaca); }

/* Okvir fokusa linka u traci */
.khz-traka .khz-traka-link:focus-visible { outline: 2px solid var(--khz-zlatna); outline-offset: 2px; box-shadow: none; }

/* Dugmad u traci, jedno pored drugog */
.khz-traka-dugmad { display: flex; flex: none; gap: 12px; }

/* Dugmad u traci iste širine */
.khz-traka-dugmad .khz-dugme { min-width: 164px; }

/* Podnožje dobija razmak ispod, dok je traka prikazana */
html.khz-ima-traku #khp-podnozje { --khp-prostor-dole: var(--khz-traka-visina, 0px); }

/* Tablet i telefon: tekst iznad, dugmad ispod */
@media (max-width: 1024px) {
  .khz-traka-okvir { flex-direction: column; align-items: stretch; }
  .khz-traka-tekst { max-width: none; }
}

/* Telefon: manji tekst i dugmad preko cele širine */
@media (max-width: 767px) {
  .khz-traka-okvir { gap: 14px; padding-top: 16px; padding-bottom: 16px; }
  .khz-traka .khz-traka-naslov { font-size: 18px; }
  .khz-traka .khz-traka-opis { font-size: 14px; line-height: 1.55; }
  .khz-traka-dugmad .khz-dugme { flex: 1 1 0; min-width: 0; padding: 0 12px; }
}

/* ---------- Prozori: podešavanja i upozorenje za čet ---------- */

/* Prozor */
.khz-dijalog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: var(--khz-slonovaca);
  color: var(--khz-mastilo);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.55);
  font-family: var(--khz-sans);
  overflow: auto;
}

/* Zatamnjenje iza prozora */
.khz-dijalog::backdrop { background: rgba(23, 16, 18, 0.62); }

/* Unutrašnji okvir prozora */
.khz-dijalog-okvir { position: relative; padding: 34px 32px 30px; }

/* Naslov prozora */
.khz-dijalog .khz-dijalog-naslov { margin: 0 44px 12px 0; font-family: var(--khz-serif); font-weight: 600; font-size: 26px; line-height: 1.25; color: var(--khz-mastilo); }

/* Uvodni tekst prozora */
.khz-dijalog .khz-dijalog-uvod { margin: 0 0 22px; font-size: 15.5px; line-height: 1.65; color: rgba(35, 27, 29, 0.84); }

/* Link u prozoru */
.khz-dijalog .khz-dijalog-link { color: #7A1C2C; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Okvir fokusa linka u prozoru */
.khz-dijalog .khz-dijalog-link:focus-visible { outline: 2px solid var(--khz-zlatna); outline-offset: 2px; box-shadow: none; }

/* Dugme za zatvaranje u uglu */
.khz-dijalog .khz-zatvori {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(35, 27, 29, 0.18);
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: var(--khz-mastilo);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* Ikonica zatvaranja */
.khz-dijalog .khz-zatvori svg { width: 20px; height: 20px; }

/* Dugme za zatvaranje u fokusu pri otvaranju prozora ili posle klika: bez promene boje */
.khz-dijalog .khz-zatvori:focus { background: transparent; color: var(--khz-mastilo); box-shadow: none; outline: none; }

/* Dugme za zatvaranje pod mišem */
.khz-dijalog .khz-zatvori:hover { background: var(--khz-mastilo); color: var(--khz-slonovaca); }

/* Dugme za zatvaranje u fokusu sa tastature */
.khz-dijalog .khz-zatvori:focus-visible { background: var(--khz-mastilo); color: var(--khz-slonovaca); outline: 2px solid var(--khz-zlatna); outline-offset: 2px; }

/* Jedan izbor u podešavanjima */
.khz-izbor { padding: 18px 0; border-top: 1px solid rgba(35, 27, 29, 0.12); }

/* Prekidač: oznaka i naziv u redu */
.khz-prekidac { display: flex; align-items: center; gap: 14px; cursor: pointer; font-weight: 500; font-size: 16.5px; line-height: 1.35; color: var(--khz-mastilo); }

/* Prekidač nacrtan preko polja za potvrdu */
.khz-prekidac-ulaz {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: none;
  width: 48px;
  height: 28px;
  margin: 0;
  border: 1px solid rgba(35, 27, 29, 0.45);
  border-radius: 999px;
  background: rgba(35, 27, 29, 0.12);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Kružić prekidača */
.khz-prekidac-ulaz::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease;
}

/* Uključen prekidač */
.khz-prekidac-ulaz:checked { background: var(--khz-mastilo); border-color: var(--khz-mastilo); }

/* Kružić uključenog prekidača, sa zlatnom bojom */
.khz-prekidac-ulaz:checked::after { transform: translateX(20px); background: var(--khz-zlatna-svetla); }

/* Okvir fokusa prekidača */
.khz-dijalog .khz-prekidac-ulaz:focus-visible { outline: 2px solid var(--khz-zlatna); outline-offset: 3px; box-shadow: none; }

/* Opis izbora */
.khz-dijalog .khz-izbor-opis { margin: 10px 0 0 62px; font-size: 14.5px; line-height: 1.6; color: rgba(35, 27, 29, 0.78); }

/* Dugmad na dnu prozora */
.khz-dijalog-dugmad { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 22px; border-top: 1px solid rgba(35, 27, 29, 0.12); }

/* Telefon: manji razmaci, opis bez uvlačenja, dugmad preko cele širine */
@media (max-width: 767px) {
  .khz-dijalog-okvir { padding: 26px 20px 22px; }
  .khz-dijalog .khz-dijalog-naslov { font-size: 22px; }
  .khz-dijalog .khz-izbor-opis { margin-left: 0; }
  .khz-dijalog-dugmad .khz-dugme { flex: 1 1 100%; }
}

/* ---------- Plutajuća dugmad: čet i pristupačnost ---------- */

/* Dok je traka prikazana, dugmad su iznad nje */
html.khz-ima-traku .khz-plutajuce { bottom: calc(var(--khz-traka-visina, 0px) + var(--khz-razmak-dugmadi)); }

/* Omotač četa, dole desno; veličine je kao dugme, pa pojava poruke ne pomera ništa na stranici */
.khz-cet {
  position: fixed;
  right: var(--khz-razmak-dugmadi);
  bottom: var(--khz-razmak-dugmadi);
  z-index: 99980;
  display: block;
  font-family: var(--khz-sans);
}

/* Dugme za čet */
.khz-cet .khz-cet-dugme {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 60px;
  height: 60px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(196, 154, 69, 0.7);
  border-radius: 50%;
  background: var(--khz-mastilo);
  color: var(--khz-zlatna-svetla);
  box-shadow: 0 16px 34px -14px rgba(0, 0, 0, 0.55);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* Ikonica četa */
.khz-cet .khz-cet-dugme svg { width: 28px; height: 28px; }

/* Dugme za čet u fokusu posle klika ili zatvaranja prozora: bez promene boje */
.khz-cet .khz-cet-dugme:focus { background: var(--khz-mastilo); color: var(--khz-zlatna-svetla); box-shadow: 0 16px 34px -14px rgba(0, 0, 0, 0.55); outline: none; }

/* Dugme za čet pod mišem */
.khz-cet .khz-cet-dugme:hover { background: var(--khz-zlatna); color: var(--khz-mastilo); }

/* Dugme za čet u fokusu sa tastature */
.khz-cet .khz-cet-dugme:focus-visible { background: var(--khz-zlatna); color: var(--khz-mastilo); outline: 2px solid var(--khz-zlatna-svetla); outline-offset: 3px; }

/* Poruka levo od dugmeta za čet, izvan toka stranice */
.khz-cet-poruka {
  position: absolute;
  right: calc(100% + 12px);
  bottom: 8px;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  width: max-content;
  max-width: 250px;
  margin: 0;
  padding: 12px 8px 12px 16px;
  border: 1px solid rgba(196, 154, 69, 0.45);
  border-radius: 16px 16px 4px 16px;
  background: var(--khz-slonovaca);
  box-shadow: 0 16px 34px -16px rgba(0, 0, 0, 0.45);
  animation: khz-pojava 0.35s ease both;
}

/* Skrivena poruka */
.khz-cet-poruka[hidden] { display: none; }

/* Tekst poruke je dugme koje otvara čet; tekst se prelama u više redova */
.khz-cet .khz-cet-poruka-tekst {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-family: var(--khz-sans);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.45;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  color: var(--khz-mastilo);
  cursor: pointer;
}

/* Tekst poruke u fokusu posle klika: bez promene boje */
.khz-cet .khz-cet-poruka-tekst:focus { background: none; color: var(--khz-mastilo); box-shadow: none; outline: none; }

/* Tekst poruke pod mišem */
.khz-cet .khz-cet-poruka-tekst:hover { color: #7A1C2C; text-decoration: underline; text-underline-offset: 3px; }

/* Tekst poruke u fokusu sa tastature */
.khz-cet .khz-cet-poruka-tekst:focus-visible { color: #7A1C2C; text-decoration: underline; text-underline-offset: 3px; outline: 2px solid var(--khz-zlatna); outline-offset: 3px; }

/* Dugme za zatvaranje poruke */
.khz-cet .khz-cet-poruka-zatvori {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  margin: -4px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  box-shadow: none;
  color: rgba(35, 27, 29, 0.6);
  cursor: pointer;
}

/* Ikonica zatvaranja poruke */
.khz-cet .khz-cet-poruka-zatvori svg { width: 16px; height: 16px; }

/* Dugme za zatvaranje poruke u fokusu posle klika: bez promene boje */
.khz-cet .khz-cet-poruka-zatvori:focus { background: none; color: rgba(35, 27, 29, 0.6); box-shadow: none; outline: none; }

/* Dugme za zatvaranje poruke pod mišem */
.khz-cet .khz-cet-poruka-zatvori:hover { background: rgba(35, 27, 29, 0.08); color: var(--khz-mastilo); }

/* Dugme za zatvaranje poruke u fokusu sa tastature */
.khz-cet .khz-cet-poruka-zatvori:focus-visible { background: rgba(35, 27, 29, 0.08); color: var(--khz-mastilo); outline: 2px solid var(--khz-zlatna); outline-offset: 1px; }

/* Dugme alata za pristupačnost; boju i zaobljenost postavlja skripta iz podešavanja alata */
.khz-pristupacnost-dugme.khz-plutajuce {
  position: fixed;
  bottom: var(--khz-razmak-dugmadi);
  z-index: 99980;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #2563EB;
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.55);
  color: #FFFFFF;
  cursor: pointer;
}

/* Dugme alata u fokusu i pod mišem: ista boja (tema bi ga obojila u svoju boju) */
.khz-pristupacnost-dugme.khz-plutajuce:focus, .khz-pristupacnost-dugme.khz-plutajuce:hover { background-color: #2563EB; color: #FFFFFF; box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.55); outline: none; }

/* Položaj levo */
.khz-pristupacnost-dugme.khz-polozaj-levo { left: var(--khz-razmak-dugmadi); }

/* Položaj desno, iznad dugmeta za čet */
.khz-pristupacnost-dugme.khz-polozaj-desno { right: var(--khz-razmak-dugmadi); bottom: calc(var(--khz-razmak-dugmadi) + 76px); }

/* Položaj desno dok je traka prikazana: iznad trake i iznad dugmeta za čet */
html.khz-ima-traku .khz-pristupacnost-dugme.khz-polozaj-desno { bottom: calc(var(--khz-traka-visina, 0px) + var(--khz-razmak-dugmadi) + 76px); }

/* Ikonica osobe */
.khz-pristupacnost-dugme svg { width: 30px; height: 30px; }

/* Dugme alata dok se alat učitava */
.khz-pristupacnost-dugme[aria-busy="true"] { opacity: 0.7; cursor: progress; }

/* Okvir fokusa dugmeta alata */
.khz-pristupacnost-dugme.khz-plutajuce:focus-visible { outline: 3px solid var(--khz-zlatna); outline-offset: 3px; }

/* Telefon: manja plutajuća dugmad, poruka uža */
@media (max-width: 767px) {
  .khz-cet .khz-cet-dugme { width: 54px; height: 54px; }
  .khz-pristupacnost-dugme.khz-plutajuce { width: 50px; height: 50px; }
  .khz-cet-poruka { max-width: min(200px, calc(100vw - 2 * var(--khz-razmak-dugmadi) - 128px)); }
  .khz-cet .khz-cet-poruka-tekst { font-size: 14px; }
}

/* ---------- Traka na dnu stranica bez podnožja ---------- */

/* Uska traka u bojama podnožja sajta, za stranice bez podnožja (lekcije u fokus režimu, Elementor Canvas) */
.khz-dno {
  position: relative;
  z-index: 1;
  padding: 18px var(--khz-bocno);
  background: var(--khz-tamna);
  border-top: 1px solid rgba(196, 154, 69, 0.35);
  font-family: var(--khz-sans);
  text-align: center;
}

/* Dok je traka za kolačiće prikazana, tekst ostaje iznad nje */
html.khz-ima-traku .khz-dno { padding-bottom: calc(18px + var(--khz-traka-visina, 0px)); }

/* Tekst trake */
.khz-dno .khz-dno-tekst { margin: 0; font-size: 14px; line-height: 1.7; color: rgba(251, 246, 236, 0.78); }

/* Link i dugme u traci izgledaju isto, kao linkovi u podnožju */
.khz-dno .khz-dno-link, .khz-dno .khz-dno-dugme {
  display: inline;
  margin: 0 0 0 0.6em;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: none;
  text-decoration: underline;
  text-decoration-color: rgba(196, 154, 69, 0.6);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  white-space: nowrap;
  color: rgba(251, 246, 236, 0.86);
  cursor: pointer;
}

/* Dugme u fokusu posle klika: bez boje teme */
.khz-dno .khz-dno-dugme:focus { background: none; color: rgba(251, 246, 236, 0.86); box-shadow: none; outline: none; }

/* Link i dugme pod mišem */
.khz-dno .khz-dno-link:hover, .khz-dno .khz-dno-dugme:hover { background: none; color: var(--khz-zlatna-svetla); }

/* Okvir fokusa za tastaturu */
.khz-dno .khz-dno-link:focus-visible, .khz-dno .khz-dno-dugme:focus-visible { color: var(--khz-zlatna-svetla); outline: 2px solid var(--khz-zlatna); outline-offset: 3px; box-shadow: none; }

/* Telefon: tekst ne ide ispod plutajuće dugmadi za čet i pristupačnost */
@media (max-width: 767px) {
  .khz-dno { padding-left: 84px; padding-right: 84px; }
}

/* ---------- Snimci ---------- */

/* Okvir snimka iz kratkog koda [kh_snimak] u odnosu 16 : 9 */
.khz-snimak { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #0F0B0C; border-radius: inherit; }

/* Plejer preko celog okvira */
.khz-snimak iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Sličica snimka */
.khz-snimak .khz-snimak-slika { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border: 0; border-radius: 0; }

/* Dugme za puštanje, preko cele sličice da se klikne bilo gde */
.khz-snimak .khz-snimak-pusti {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--khz-slonovaca);
  cursor: pointer;
}

/* Krug sa trouglom u sredini */
.khz-snimak .khz-snimak-pusti svg {
  width: 86px;
  height: 86px;
  padding: 26px 24px 26px 28px;
  border: 1px solid rgba(196, 154, 69, 0.85);
  border-radius: 50%;
  background: rgba(23, 16, 18, 0.72);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.7);
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

/* Krug pod mišem i u fokusu */
.khz-snimak .khz-snimak-pusti:hover svg, .khz-snimak .khz-snimak-pusti:focus-visible svg { background: var(--khz-zlatna); color: var(--khz-mastilo); transform: scale(1.05); }

/* Dugme za puštanje pod mišem i u fokusu: providno (tema bi ga obojila u svoju boju) */
.khz-snimak .khz-snimak-pusti:hover, .khz-snimak .khz-snimak-pusti:focus { background: transparent; color: var(--khz-slonovaca); box-shadow: none; outline: none; }

/* Okvir fokusa preko cele sličice */
.khz-snimak .khz-snimak-pusti:focus-visible { outline: 3px solid var(--khz-zlatna-svetla); outline-offset: -3px; }

/* Natpis o servisu na sličici */
.khz-snimak .khz-snimak-natpis, .khz-natpis-snimka {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  max-width: calc(100% - 28px);
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(15, 11, 12, 0.8);
  font-family: var(--khz-sans);
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--khz-slonovaca);
  pointer-events: none;
}

/* Elementor na telefonu prelama redove u kontejnerima (flex-wrap); element bez pune širine tada dobija visinu nula i snimak prelazi preko sadržaja ispod. Element sa snimkom zato na telefonu ima punu širinu, kao Elementorov element Video. */
@media (max-width: 767px) {
  .e-con > .elementor-widget:has(.khz-snimak), .e-con-inner > .elementor-widget:has(.khz-snimak) { width: 100%; }
}

/* Natpis na snimcima drugih plejera ide gore levo, da ne pokrije njihove kontrole */
.khz-natpis-snimka { top: 14px; bottom: auto; }

/* Telefon: manji krug i natpis */
@media (max-width: 767px) {
  .khz-snimak .khz-snimak-pusti svg { width: 68px; height: 68px; padding: 20px 18px 20px 22px; }
  .khz-snimak .khz-snimak-natpis, .khz-natpis-snimka { left: 10px; bottom: 10px; font-size: 11.5px; }
  .khz-natpis-snimka { top: 10px; bottom: auto; }
}

/* ---------- Pokret i štampa ---------- */

/* Pojava poruke pored dugmeta za čet */
@keyframes khz-pojava {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Posetioci koji su isključili animacije */
@media (prefers-reduced-motion: reduce) {
  .khz-traka *, .khz-dijalog *, .khz-cet *, .khz-cet-poruka, .khz-pristupacnost-dugme, .khz-snimak * { transition-duration: 0.01ms !important; animation: none !important; }
}

/* Štampa: bez trake, plutajuće dugmadi i natpisa */
@media print {
  .khz-traka, .khz-cet, .khz-pristupacnost-dugme, .khz-natpis-snimka, .khz-snimak-natpis, .khz-dno { display: none !important; }
}