/*
  PROPLANAK — komponente i sekcije (style.css)

  Mobilno prvo: ovde je raspored za telefon, a sve što važi od šire
  širine je u queries.css. Boje isključivo kroz tokene iz general.css.
*/

/* ////////////////////////////////////////////////////////////////////
   ZAGLAVLJE
   Providno iznad heroa; kad strana krene, dobija papirnu podlogu.
   Na telefonu se sklanja dok gost lista nadole (body.nav-skriven).
   //////////////////////////////////////////////////////////////////// */

.zaglavlje {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding-top: env(safe-area-inset-top, 0px);
  transition: transform 520ms var(--ease-izlaz);
}

.zaglavlje::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--papir);
  box-shadow: 0 1px 0 var(--ivica);
  opacity: 0;
  transition: opacity 400ms var(--ease), background-color 400ms var(--ease);
}

body.skrolovano .zaglavlje::before {
  opacity: 1;
}

body.nav-skriven .zaglavlje {
  transform: translateY(-100%);
}

.zaglavlje-omot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  height: var(--visina-zaglavlja);
  max-width: calc(var(--sirina) + 2 * var(--ivica-strane));
  margin-inline: auto;
  padding-inline: var(--ivica-strane);
}

/* LOGO — A-frame: krov, unutrašnji zabat, osvetljena vrata, tlo */
.logo,
.logo:link,
.logo:visited {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
  min-height: 4.4rem;
  color: var(--naslov);
  text-decoration: none;
}

.logo-znak {
  width: 3rem;
  height: 3rem;
  overflow: visible;
}

.logo-krov {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linejoin: miter;
}

.logo-krov--unutra {
  stroke-width: 1.8;
  opacity: 0.5;
}

.logo-vrata {
  fill: var(--akcenat);
}

.logo-tlo {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
}

.logo-tekst {
  font-family: var(--font-naslov);
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: -0.005em;
}

.zaglavlje-nav {
  display: none;
}

.zaglavlje-akcije {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.prekidac-jezik,
.prekidac-jezik:link,
.prekidac-jezik:visited,
.prekidac-tema,
.zaglavlje-meni {
  display: grid;
  place-items: center;
  min-width: 4.4rem;
  height: 4.4rem;
  border-radius: var(--r-dugme);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--naslov);
  text-decoration: none;
  transition: background-color 240ms var(--ease);
}

.zaglavlje-meni {
  color: var(--dugme-tekst);
  background: var(--dugme-pozadina);
}

.zaglavlje-meni .ikona {
  stroke-width: 2.2;
}

.prekidac-tema .ikona--sunce {
  display: none;
}

[data-tema="tamna"] .prekidac-tema .ikona--mesec {
  display: none;
}

[data-tema="tamna"] .prekidac-tema .ikona--sunce {
  display: block;
}

.zaglavlje-cta {
  display: none !important;
}

@media (hover: hover) {
  .prekidac-jezik:hover,
  .prekidac-tema:hover {
    background: var(--dugme-tiho);
  }
}

/* ////////////////////////////////////////////////////////////////////
   STRANA I SEKCIJE
   //////////////////////////////////////////////////////////////////// */

.strana {
  display: block;
  /* clip (ne hidden) ne pravi novi skrol kontejner — sticky i dalje radi */
  overflow-x: hidden;
  overflow-x: clip;
}

.sekcija {
  position: relative;
  padding-block: 8rem;
}

.sekcija--galerija,
.sekcija--ponuda,
.sekcija--utisci {
  background: var(--papir-2);
}

/* ////////////////////////////////////////////////////////////////////
   HERO
   //////////////////////////////////////////////////////////////////// */

/* Hero je uvek bar visok kao ekran, na svakoj rezoluciji (i na 4K).
   --brda je visina sloja sa brdima; od nje zavise i razmak ispod teksta i
   položaj tamne trake (queries.css). */
.hero {
  --brda: 22rem;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  padding-top: calc(env(safe-area-inset-top, 0px) + var(--visina-zaglavlja) + 2.4rem);
  background: linear-gradient(180deg, var(--nebo-gore) 0%, var(--papir) 60%);
}

/* na telefonu sunce stoji iznad naslova, uz desnu ivicu — da ne prelazi
   preko reči (na engleskoj strani je prvi red naslova širi) */
.hero-sunce {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 6.4rem);
  right: -3.6rem;
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  background: var(--sunce);
  animation: ulaz-blago 1600ms var(--ease) 200ms backwards;
}

/* zvezde — vide se samo u tamnoj temi (--zvezde: 1) */
.hero-zvezde {
  position: absolute;
  inset: 0 0 45% 0;
  opacity: var(--zvezde);
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 22%, #fff6df 99%, transparent),
    radial-gradient(1px 1px at 18% 8%, #fff6df 99%, transparent),
    radial-gradient(1.5px 1.5px at 31% 30%, #fff6df 99%, transparent),
    radial-gradient(1px 1px at 44% 12%, #fff6df 99%, transparent),
    radial-gradient(2px 2px at 57% 26%, #fff6df 99%, transparent),
    radial-gradient(1px 1px at 66% 6%, #fff6df 99%, transparent),
    radial-gradient(1.5px 1.5px at 74% 38%, #fff6df 99%, transparent),
    radial-gradient(1px 1px at 86% 18%, #fff6df 99%, transparent),
    radial-gradient(1.5px 1.5px at 94% 44%, #fff6df 99%, transparent),
    radial-gradient(1px 1px at 38% 48%, #fff6df 99%, transparent),
    radial-gradient(1px 1px at 12% 52%, #fff6df 99%, transparent);
  transition: opacity 600ms var(--ease);
}

.hero-brda {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0;
  width: 100%;
  height: var(--brda);
  max-width: none;
}

.brdo-1 {
  fill: var(--brdo-1);
}

.brdo-2 {
  fill: var(--brdo-2);
}

.brdo-3 {
  fill: var(--brdo-3);
}

.brdo-4 {
  fill: var(--brdo-4);
}

.borovi-1 {
  fill: var(--bor-1);
}

.borovi-2 {
  fill: var(--bor-2);
}

.brdo-1,
.brdo-2,
.brdo-3,
.brdo-4,
.borovi-1,
.borovi-2 {
  transition: fill 500ms var(--ease);
}

.hero-omot {
  position: relative;
  z-index: 2;
  flex: 1 0 auto;
  display: grid;
  gap: 3.6rem;
  padding-bottom: 8.4rem;
}

/* ulaz heroa po redu (--i) — sporo i meko, bez skoka */
.hero-ulaz {
  animation: ulaz-gore 1100ms var(--ease-izlaz) calc(var(--i, 0) * 110ms + 120ms) backwards;
}

.hero-naslov {
  margin-top: 1.6rem;
  font-family: var(--font-naslov);
  font-size: clamp(5.2rem, 14vw, 9.6rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--naslov);
}

.hero-uvod {
  max-width: 50rem;
  margin-top: 2rem;
  font-size: 1.8rem;
  line-height: 1.55;
  color: var(--tekst-tiho);
  text-wrap: pretty;
}

.hero-dugmad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem 2.8rem;
  margin-top: 2.8rem;
}

.hero-odlike {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.4rem;
  margin-top: 2.8rem;
  list-style: none;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--tekst);
}

.hero-odlike li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.hero-odlike .ikona {
  width: 1.8rem;
  height: 1.8rem;
  color: var(--akcenat);
}

/* tamna traka brda — kao „Naši radovi" u hero stranici: levo ocena,
   desno istaknut potpis izrade */
.hero-dno {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem 2.4rem;
  max-width: calc(var(--sirina) + 2 * var(--ivica-strane));
  margin-inline: auto;
  padding-inline: var(--ivica-strane);
}

.hero-ocena {
  display: none;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--podnozje-tiho);
}

.hero-ocena .ikona {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--sunce);
}

.hero-ocena strong {
  font-weight: 700;
  color: var(--podnozje-tekst);
}

/* ISTAKNUT POTPIS IZRADE — „powered by cabindesign.rs" sa logom firme
   (pikselna kućica iz Sajt firme 4). Svetla pločica na tamnoj traci u obe
   teme; boja teme obilazi kvadrate kao u logou firme (8 s, jedan svetli).
   Boje su iz logoa: tinta #1C2620, tema #2A5A3B, papir #F2EEE4. */
.hero-potpis,
.hero-potpis:link,
.hero-potpis:visited {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.8rem;
  padding: 0.6rem 0.6rem 0.6rem 1rem;
  border-radius: 1.2rem;
  color: #1c2620;
  background: #f2eee4;
  text-decoration: none;
  box-shadow: 0 0 0 1px rgb(242 238 228 / 0.35), 0 1.2rem 2.8rem -1.2rem rgb(0 0 0 / 0.6);
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease);
  animation: ulaz-gore 1000ms var(--ease-izlaz) 900ms backwards;
}

.hp-znak {
  flex-shrink: 0;
  width: 2.8rem;
  height: 2.8rem;
}

.hp-krov {
  fill: none;
  stroke: #2a5a3b;
  stroke-width: 6;
  stroke-linecap: square;
}

.hp-kv {
  fill: #1c2620;
  animation: hp-smena 8s ease-in-out infinite;
  animation-delay: var(--smena, 0s);
}

/* redosled kao u logou firme: dole desno → dole levo → gore levo → gore desno */
.hp-kv--1 {
  --smena: -4s;
}

.hp-kv--2 {
  --smena: -2s;
}

.hp-kv--3 {
  --smena: -6s;
}

.hp-kv--4 {
  --smena: 0s;
  fill: #2a5a3b;
}

@keyframes hp-smena {
  0%,
  22% {
    fill: #2a5a3b;
  }
  28%,
  94% {
    fill: #1c2620;
  }
  100% {
    fill: #2a5a3b;
  }
}

.hp-tekst {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.hp-uvod {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #56655b;
}

.hp-ime {
  margin-top: 0.2rem;
  font-family: "Hanken Grotesk", var(--font);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #1c2620;
}

.hp-rs {
  color: #2a5a3b;
}

.hp-strelica {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 3.4rem;
  height: 3.4rem;
  margin-left: 0.4rem;
  border-radius: 0.8rem;
  color: #f2eee4;
  background: #1c2620;
  transition: background-color 320ms var(--ease);
}

.hp-strelica .ikona {
  width: 1.6rem;
  height: 1.6rem;
  stroke-width: 2.2;
}

@media (hover: hover) {
  .hero-potpis:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px rgb(242 238 228 / 0.5), 0 1.6rem 3.2rem -1.2rem rgb(0 0 0 / 0.7);
  }

  .hero-potpis:hover .hp-strelica {
    background: #2a5a3b;
  }
}

/* ---------- KARTICA U HEROU ---------- */

.hero-kartica {
  position: relative;
  z-index: 2;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--r-kartica);
  background: var(--povrsina);
  box-shadow: var(--senka-2);
}

.hk-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.4rem;
  padding: 0 1.6rem;
  font-size: 1.3rem;
  color: var(--tekst-tiho);
  background: var(--papir-2);
  border-bottom: 1px solid var(--ivica);
}

.hk-uzivo {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-weight: 600;
  color: var(--naslov);
}

.hk-tacka {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--uspeh);
  animation: puls 2400ms var(--ease) infinite;
}

.hk-od strong {
  font-weight: 700;
  color: var(--naslov);
}

.hk-slika {
  position: relative;
  height: 19rem;
}

.hk-ilustracija {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}

.hk-nebo {
  fill: var(--nebo-kartica);
  transition: fill 500ms var(--ease);
}

.hk-sunce {
  fill: var(--sunce);
}

.hk-zvezde {
  fill: #fff6df;
  opacity: var(--zvezde);
}

.kucica-krov {
  fill: var(--kucica-krov);
}

.kucica-zid {
  fill: var(--kucica-zid);
}

.kucica-svetlo {
  fill: var(--kucica-svetlo);
  animation: svetlo-dise 3200ms ease-in-out infinite alternate;
}

.kucica-temelj,
.kucica-cev {
  fill: var(--kucica-temelj);
}

.kucica-dim {
  fill: var(--papir);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: dim-plovi 5200ms linear infinite;
}

.kucica-dim--2 {
  animation-delay: 2600ms;
}

.hk-natpis {
  position: absolute;
  top: 1.6rem;
  left: 1.8rem;
  right: 8rem;
}

.hk-oznaka {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tekst-tiho);
}

.hk-naslov {
  margin-top: 0.4rem;
  font-family: var(--font-naslov);
  font-size: 2.6rem;
  line-height: 1.05;
  color: var(--naslov);
}

.hk-ocena {
  position: absolute;
  top: 1.6rem;
  right: 1.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 1rem 0.4rem 0.8rem;
  border-radius: var(--r-pilula);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--naslov);
  background: var(--povrsina);
  box-shadow: var(--senka-1);
}

.hk-ocena .ikona {
  width: 1.4rem;
  height: 1.4rem;
  color: var(--akcenat);
}

/* traka za termin — ulazi preko ilustracije, kao u hero stranici */
.hk-traka {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: -3.4rem 1.2rem 0;
  padding: 0.6rem;
  border-radius: 1.2rem;
  background: var(--povrsina);
  box-shadow: var(--senka-1);
}

.hk-polje {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  min-width: 0;
  min-height: 5.6rem;
  padding: 0.6rem 1.2rem;
}

.hk-polje:nth-child(2) {
  border-left: 1px solid var(--ivica);
}

/* na telefonu su polja u dva reda — linija ide ispod oba polja datuma */
.hk-polje:nth-child(-n + 2) {
  border-bottom: 1px solid var(--ivica);
}

.hk-polje-oznaka {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tekst-ugaseno);
}

.hk-polje-vrednost {
  overflow: hidden;
  font-size: 1.5rem;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--naslov);
}

.hk-polje-vrednost.je-prazno {
  font-weight: 500;
  color: var(--tekst-ugaseno);
}

.hk-gosti {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.hk-gosti .hk-polje-vrednost {
  min-width: 1.4rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.hk-gosti-dugme {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  color: var(--naslov);
  background: var(--povrsina-2);
  transition: background-color 200ms var(--ease), opacity 200ms var(--ease);
}

.hk-gosti-dugme .ikona {
  width: 1.4rem;
  height: 1.4rem;
  stroke-width: 2.4;
}

.hk-gosti-dugme:disabled {
  opacity: 0.35;
  cursor: default;
}

.hk-dugme,
.hk-dugme:link,
.hk-dugme:visited {
  align-self: center;
  min-height: 4.6rem;
  margin: 0.6rem 0 0 0.6rem;
  padding: 0 1.4rem;
  border-radius: 0.9rem;
  font-size: 1.5rem;
  box-shadow: none;
}

/* 14 dana — dan je zaobljen kvadrat, zauzet je šrafiran (hero stranica) */
.hk-kalendar {
  padding: 1.8rem 1.4rem 0;
}

.hk-kal-vrh {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.8rem;
}

.hk-mesec {
  min-width: 11rem;
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
  color: var(--naslov);
}

.hk-strelica {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 0.9rem;
  color: var(--naslov);
  background: var(--povrsina-2);
  transition: background-color 200ms var(--ease), opacity 200ms var(--ease);
}

.hk-strelica .ikona {
  width: 1.6rem;
  height: 1.6rem;
  stroke-width: 2.2;
}

.hk-strelica:disabled {
  opacity: 0.35;
  cursor: default;
}

.hk-legenda {
  display: flex;
  gap: 1.2rem;
  margin-left: auto;
  font-size: 1.2rem;
  color: var(--tekst-tiho);
}

.hk-legenda span {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.hk-uzorak {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 0.3rem;
}

.hk-uzorak--zauzeto {
  background: repeating-linear-gradient(135deg, var(--dan-zauzet-1) 0 3px, var(--dan-zauzet-2) 3px 6px);
  box-shadow: inset 0 0 0 1px var(--ivica);
}

.hk-uzorak--izabrano {
  background: var(--dan-izabran);
}

.hk-dani {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: 1.2rem;
}

.hk-dan {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  height: 4.6rem;
  padding: 0;
  border: 0;
  border-radius: var(--r-malo);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--naslov);
  background: var(--dan-slobodan);
  transition: background-color 200ms var(--ease), color 200ms var(--ease), transform 200ms var(--ease);
}

button.hk-dan {
  cursor: pointer;
}

button.hk-dan:active {
  transform: scale(0.94);
}

.hk-dan-slovo {
  font-size: 1rem;
  color: var(--tekst-ugaseno);
}

.hk-dan-broj {
  font-size: 1.4rem;
  font-weight: 600;
}

.hk-dan--danas {
  box-shadow: inset 0 0 0 1.5px var(--akcenat);
}

.hk-dan--zauzet {
  color: var(--dan-zauzet-tekst);
  background: repeating-linear-gradient(135deg, var(--dan-zauzet-1) 0 3px, var(--dan-zauzet-2) 3px 7px);
}

.hk-dan--zauzet .hk-dan-slovo {
  color: inherit;
}

.hk-dan--odlazak-moguc {
  color: var(--naslov);
  background:
    repeating-linear-gradient(135deg, var(--dan-zauzet-1) 0 3px, var(--dan-zauzet-2) 3px 7px) right / 50% 100% no-repeat,
    var(--dan-slobodan);
}

.hk-dan--raspon {
  background: var(--dan-raspon);
}

@media (hover: hover) {
  .hk-dan--slobodan:hover {
    background: var(--dan-slobodan-hover);
  }

  .hk-dan--raspon:hover {
    background: var(--akcenat-meko-2);
  }
}

.hk-dan.hk-dan--izabran {
  color: var(--dan-izabran-tekst);
  background: var(--dan-izabran);
}

.hk-dan--izabran .hk-dan-slovo {
  color: inherit;
  opacity: 0.85;
}

@media (hover: none) {
  .hk-dan.hk-dan--izabran:hover {
    color: var(--dan-izabran-tekst);
    background: var(--dan-izabran);
  }
}

.hk-dno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1.2rem;
  margin: 1.6rem 1.4rem 0;
  padding: 1.4rem 0 1.6rem;
  border-top: 1px solid var(--ivica);
  font-size: 1.35rem;
}

.hk-racun-oznaka {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 500;
  color: var(--tekst);
}

.hk-racun-oznaka .ikona {
  width: 1.6rem;
  height: 1.6rem;
  stroke-width: 2.4;
  color: var(--akcenat);
}

.hk-sazetak {
  font-weight: 700;
  text-align: right;
  color: var(--naslov);
}

.hk-sazetak strong {
  color: var(--akcenat-tekst);
}

/* ////////////////////////////////////////////////////////////////////
   KUĆICA
   //////////////////////////////////////////////////////////////////// */

.kucica-omot {
  display: grid;
  gap: 4.4rem;
}

.kucica-slika {
  position: relative;
  margin: 0;
}

.kucica-slika img {
  width: 100%;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  border-radius: var(--r-veliko);
  background: var(--povrsina-2);
  box-shadow: var(--senka-1);
}

.domacini {
  position: absolute;
  left: 1.4rem;
  bottom: 1.4rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 0.8rem 1.8rem 0.8rem 0.8rem;
  border-radius: var(--r-pilula);
  background: var(--povrsina);
  box-shadow: var(--senka-1);
}

.domacini-lica {
  display: flex;
  flex-shrink: 0;
}

.domacini-lica span {
  display: grid;
  place-items: center;
  width: 3.8rem;
  height: 3.8rem;
  border-radius: 50%;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--na-akcentu);
  background: var(--akcenat);
  box-shadow: 0 0 0 0.25rem var(--povrsina);
}

.domacini-lica span + span {
  margin-left: -1rem;
  color: var(--dugme-tekst);
  background: var(--dugme-pozadina);
}

.domacini-tekst {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.domacini-tekst strong {
  font-size: 1.5rem;
  color: var(--naslov);
}

.domacini-tekst span {
  font-size: 1.3rem;
  color: var(--tekst-tiho);
}

.cinjenice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 3.2rem;
  list-style: none;
}

.cinjenica {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  padding: 1.6rem;
  border-radius: var(--r-kartica);
  background: var(--povrsina);
  box-shadow: var(--senka-1);
}

.cinjenica .ikona {
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: 0.8rem;
  color: var(--akcenat);
}

.cinjenica strong {
  font-family: var(--font-naslov);
  font-size: 2.3rem;
  font-weight: 400;
  line-height: 1.1;
  color: var(--naslov);
}

.cinjenica > span {
  font-size: 1.4rem;
  line-height: 1.35;
  color: var(--tekst-tiho);
}

.sadrzaj-kuce {
  margin-top: 4.8rem;
  padding: 2.4rem 2rem;
  border-radius: var(--r-veliko);
  border: 1.5px dashed var(--ivica-jaka);
}

.sadrzaj-kuce-naslov {
  font-family: var(--font-naslov);
  font-size: 2.4rem;
  font-weight: 400;
  color: var(--naslov);
}

.sadrzaj-cipovi {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.6rem;
  list-style: none;
}

.sadrzaj-cipovi li {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1.4rem;
  border-radius: var(--r-pilula);
  font-size: 1.45rem;
  font-weight: 500;
  color: var(--tekst);
  background: var(--povrsina);
  box-shadow: inset 0 0 0 1px var(--ivica);
}

.sadrzaj-cipovi li::before {
  content: "";
  flex-shrink: 0;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--brdo-3);
}

/* ////////////////////////////////////////////////////////////////////
   GALERIJA — fotografije sa papirnom etiketom
   //////////////////////////////////////////////////////////////////// */

.zaglavlje-sekcije--red .tekst {
  margin-top: 1.6rem;
}

.galerija-mreza {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 15rem;
  grid-auto-flow: dense;
  gap: 1rem;
}

.galerija-stavka {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: var(--r-kartica);
  background: var(--povrsina-2);
  box-shadow: var(--senka-1);
  cursor: zoom-in;
}

.galerija-stavka--velika {
  grid-column: span 2;
  grid-row: span 2;
}

.galerija-stavka--siroka {
  grid-column: span 2;
}

.galerija-stavka img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1400ms var(--ease-izlaz);
}

.galerija-natpis {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  max-width: calc(100% - 2rem);
  padding: 0.5rem 1.1rem;
  border-radius: 0.8rem;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--naslov);
  background: var(--povrsina);
  box-shadow: 0 0.4rem 1.4rem -0.4rem rgb(0 0 0 / 0.35);
  opacity: 0;
  transform: translateY(0.6rem);
  transition: opacity 400ms var(--ease), transform 500ms var(--ease-izlaz);
}

/* na dodirnom ekranu natpis se vidi samo na velikoj slici; ostalo piše
   u lightboxu */
.galerija-stavka--velika .galerija-natpis {
  opacity: 1;
  transform: none;
}

.galerija-stavka:focus-visible {
  outline-offset: 3px;
}

@media (hover: hover) {
  .galerija-stavka:hover img {
    transform: scale(1.04);
  }

  .galerija-stavka:hover .galerija-natpis,
  .galerija-stavka:focus-visible .galerija-natpis {
    opacity: 1;
    transform: none;
  }
}

/* ////////////////////////////////////////////////////////////////////
   OKOLINA — staza: numerisana mesta povezana isprekidanom linijom
   //////////////////////////////////////////////////////////////////// */

.staza {
  position: relative;
  display: grid;
  gap: 2.4rem;
  list-style: none;
}

.staza::before {
  content: "";
  position: absolute;
  top: 2rem;
  bottom: 2rem;
  left: 1.9rem;
  border-left: 2px dashed var(--brdo-3);
}

.stanica {
  position: relative;
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  align-items: start;
  gap: 1.4rem;
}

.stanica-pin {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  font-family: var(--font-naslov);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--naslov);
  background: var(--papir);
  box-shadow: inset 0 0 0 2px var(--brdo-3);
}

.stanica:first-child .stanica-pin {
  color: var(--na-akcentu);
  background: var(--akcenat);
  box-shadow: none;
}

.stanica-kartica {
  overflow: hidden;
  margin: 0;
  border-radius: var(--r-kartica);
  background: var(--povrsina);
  box-shadow: var(--senka-1);
  cursor: zoom-in;
}

.stanica-slika {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--povrsina-2);
}

.stanica-slika img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1400ms var(--ease-izlaz);
}

.stanica-telo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.3rem 1.4rem 1.4rem;
}

.stanica-naziv {
  min-width: 0;
  font-family: var(--font-naslov);
  font-size: 2rem;
  line-height: 1.15;
  color: var(--naslov);
}

.stanica-udaljenost {
  flex-shrink: 0;
  padding: 0.4rem 1rem;
  border-radius: var(--r-pilula);
  font-size: 1.25rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--akcenat-tekst);
  background: var(--akcenat-meko);
}

@media (hover: hover) {
  .stanica-kartica:hover img {
    transform: scale(1.04);
  }
}

/* ////////////////////////////////////////////////////////////////////
   PONUDA — usluge i proizvodi
   //////////////////////////////////////////////////////////////////// */

.ponuda-podnaslov {
  margin-bottom: 2rem;
}

.usluge-mreza {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.6rem;
}

.usluga-kartica {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--r-kartica);
  background: var(--povrsina);
  box-shadow: var(--senka-1);
  transition: box-shadow 300ms var(--ease);
}

.usluga-kartica.je-izabrana {
  box-shadow: 0 0 0 2px var(--akcenat), var(--senka-1);
}

.usluga-slika {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--povrsina-2);
}

.usluga-slika img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1400ms var(--ease-izlaz);
}

.usluga-telo {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.8rem 1.8rem 1.6rem;
}

.usluga-naziv {
  font-family: var(--font-naslov);
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1.1;
  color: var(--naslov);
}

.usluga-pakovanje {
  margin-top: 0.4rem;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--akcenat-tekst);
}

.usluga-opis {
  flex: 1;
  margin-top: 0.8rem;
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--tekst-tiho);
}

.usluga-dno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px dashed var(--ivica-jaka);
}

.usluga-cena {
  font-size: 1.4rem;
  color: var(--tekst-tiho);
}

.usluga-cena strong {
  margin-right: 0.2rem;
  font-family: var(--font-naslov);
  font-size: 2.4rem;
  font-weight: 400;
  color: var(--naslov);
}

.btn-dodaj {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 4.4rem;
  padding: 0 1.6rem;
  border-radius: var(--r-dugme);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--naslov);
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--ivica-jaka);
  transition: background-color 260ms var(--ease), color 260ms var(--ease), box-shadow 260ms var(--ease);
}

.btn-dodaj .ikona {
  width: 1.6rem;
  height: 1.6rem;
  stroke-width: 2.2;
}

.btn-dodaj.je-dodato {
  color: var(--dugme-tekst);
  background: var(--dugme-pozadina);
  box-shadow: none;
}

@media (hover: hover) {
  .usluga-kartica:hover .usluga-slika img {
    transform: scale(1.04);
  }

  .btn-dodaj:not(.je-dodato):hover {
    box-shadow: inset 0 0 0 1.5px var(--naslov);
  }
}

/* ostava — domaći proizvodi, manje kartice na „polici" */
.ostava {
  margin-top: 5.6rem;
  padding: 2.8rem 1.4rem 1.4rem;
  border-radius: var(--r-veliko);
  background: var(--papir);
  box-shadow: inset 0 0 0 1px var(--ivica);
}

.ostava-uvod {
  padding-inline: 0.6rem;
  margin-bottom: 2.4rem;
}

.ostava-uvod .tekst {
  margin-top: 0.8rem;
}

.usluge-mreza--proizvodi {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.usluga-kartica--proizvod .usluga-slika {
  aspect-ratio: 1 / 1;
}

.usluga-kartica--proizvod .usluga-telo {
  padding: 1.2rem 1.2rem 1.2rem;
}

.usluga-kartica--proizvod .usluga-naziv {
  font-size: 1.9rem;
}

.usluga-kartica--proizvod .usluga-pakovanje {
  font-size: 1.05rem;
}

.usluga-kartica--proizvod .usluga-opis {
  font-size: 1.35rem;
}

.usluga-kartica--proizvod .usluga-dno {
  flex-direction: column;
  align-items: stretch;
  gap: 0.8rem;
  margin-top: 1.2rem;
  padding-top: 1rem;
}

.usluga-kartica--proizvod .usluga-cena strong {
  font-size: 2rem;
}

.usluga-kartica--proizvod .btn-dodaj {
  padding: 0.6rem 1rem;
  font-size: 1.3rem;
  line-height: 1.2;
  text-align: center;
}

/* ////////////////////////////////////////////////////////////////////
   CENE
   //////////////////////////////////////////////////////////////////// */

.cene-mreza {
  display: grid;
  gap: 2rem;
}

.cena-kartica {
  position: relative;
  min-width: 0;
  padding: 2.8rem 2.4rem;
  border-radius: var(--r-kartica);
  background: var(--povrsina);
  box-shadow: var(--senka-1);
}

.cena-kartica--istaknuta {
  color: var(--podnozje-tekst);
  background: var(--podnozje-pozadina-2);
  box-shadow: var(--senka-2);
}

.cena-oznaka {
  position: absolute;
  top: -1.2rem;
  right: 2rem;
  padding: 0.5rem 1.2rem;
  border-radius: var(--r-pilula);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #3a2a0c;
  background: #edb45c;
}

.cena-naziv {
  font-family: var(--font-naslov);
  font-size: 2.8rem;
  font-weight: 400;
  line-height: 1.1;
  color: var(--naslov);
}

.cena-opis {
  margin-top: 0.4rem;
  font-size: 1.45rem;
  line-height: 1.45;
  color: var(--tekst-tiho);
}

.cena-iznos {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-top: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px dashed var(--ivica-jaka);
}

.cena-iznos strong {
  font-family: var(--font-naslov);
  font-size: 5.6rem;
  font-weight: 400;
  line-height: 1;
  color: var(--naslov);
}

.cena-iznos > span {
  font-size: 1.5rem;
  color: var(--tekst-tiho);
}

.cena-lista {
  display: grid;
  gap: 1rem;
  margin-top: 1.8rem;
  list-style: none;
}

.cena-lista li {
  display: flex;
  gap: 1rem;
  font-size: 1.5rem;
  line-height: 1.45;
}

.cena-lista .ikona {
  width: 1.8rem;
  height: 1.8rem;
  margin-top: 0.2rem;
  stroke-width: 2.2;
  color: var(--akcenat);
}

.cena-kartica--istaknuta .cena-naziv,
.cena-kartica--istaknuta .cena-iznos strong {
  color: var(--podnozje-tekst);
}

.cena-kartica--istaknuta .cena-opis,
.cena-kartica--istaknuta .cena-iznos > span {
  color: var(--podnozje-tiho);
}

.cena-kartica--istaknuta .cena-iznos {
  border-bottom-color: var(--podnozje-ivica);
}

.cena-kartica--istaknuta .cena-lista .ikona {
  color: #edb45c;
}

.pravila {
  margin-top: 3.2rem;
  padding: 2.8rem 2.2rem;
  border-radius: var(--r-veliko);
  background: var(--povrsina);
  box-shadow: var(--senka-1);
}

.pravila-naslov {
  font-family: var(--font-naslov);
  font-size: 2.8rem;
  font-weight: 400;
  color: var(--naslov);
}

.pravila-lista {
  display: grid;
  gap: 1.8rem;
  margin: 2.4rem 0 2.8rem;
  list-style: none;
}

.pravilo {
  display: flex;
  gap: 1.4rem;
}

.pravilo-ikona {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 1.2rem;
  color: var(--akcenat-tekst);
  background: var(--akcenat-meko);
}

.pravilo-tekst {
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--tekst-tiho);
}

.pravilo-tekst strong {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--naslov);
}

/* ////////////////////////////////////////////////////////////////////
   REZERVACIJA
   //////////////////////////////////////////////////////////////////// */

.rez-forma {
  display: grid;
  gap: 1.4rem;
}

.rez-blok {
  min-width: 0;
  padding: 2rem 1.6rem;
  border-radius: var(--r-kartica);
  background: var(--povrsina);
  box-shadow: var(--senka-1);
}

.rez-blok-zaglavlje {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 1.6rem;
}

.rez-korak {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 0.9rem;
  font-family: var(--font-naslov);
  font-size: 1.8rem;
  line-height: 1;
  color: var(--dugme-tekst);
  background: var(--dugme-pozadina);
}

.rez-blok-naslov {
  font-family: var(--font-naslov);
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1.1;
  color: var(--naslov);
}

/* ---------- KALENDAR ---------- */

/* Kartica je „container" da bi se visina mreže izračunala iz širine
   (100cqi) — mesec od 5 i od 6 redova zauzimaju isto mesto i ništa
   ispod ne skače pri listanju. */
.rez-kalendar {
  --kal-vrh: 6.8rem;
  position: relative;
  display: flex;
  flex-direction: column;
  padding-inline: 1.2rem;
  container-type: inline-size;
}

/* strelice sede u redu sa naslovom meseca, poruka ide na dno (order) */
.kal-vrh {
  display: contents;
}

.kal-strelica {
  position: absolute;
  top: var(--kal-vrh);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: var(--r-dugme);
  color: var(--naslov);
  background: var(--povrsina-2);
  transition: opacity 260ms var(--ease), background-color 260ms var(--ease);
}

.kal-strelica--nazad {
  left: 1.2rem;
}

.kal-strelica--napred {
  right: 1.2rem;
}

.kal-strelica:disabled {
  opacity: 0.3;
  cursor: default;
}

@media (hover: hover) {
  .kal-strelica:not(:disabled):hover,
  .hk-strelica:not(:disabled):hover {
    background: var(--povrsina-3);
  }
}

.kal-poruka {
  order: 4;
  margin-top: 1.2rem;
  padding: 0 0.4rem;
  font-size: 1.3rem;
  line-height: 1.45;
  text-align: center;
  color: var(--tekst-tiho);
}

.kal-poruka:empty {
  display: none;
}

.kal-meseci {
  order: 1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 3.2rem;
  min-height: 40rem;
  min-height: calc(4.4rem + 3rem + 6 * ((100cqi - 2.4rem) / 7) + 2rem + 0.4rem);
}

.kal-meseci--dva {
  min-height: calc(4.4rem + 3rem + 6 * ((50cqi - 1.6rem - 2.4rem) / 7) + 2rem + 0.4rem);
}

.kal-izbor {
  order: 2;
}

.kal-legenda {
  order: 3;
}

.kal-ucitavanje {
  position: absolute;
  top: var(--kal-vrh);
  left: 1.2rem;
  right: 1.2rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36rem;
  pointer-events: none;
}

.kal-ucitavanje-mreza {
  position: absolute;
  inset: 7.4rem 0 0;
  /* mreža kvadrata: svaka pločica je obojena osim trake od 0.4rem gore i
     levo (conic-gradient), pa se vide razmaci kao između pravih dana */
  background: conic-gradient(from 90deg at 0.4rem 0.4rem, var(--dan-slobodan) 25%, transparent 0) 0 0 /
    calc(100% / 7) calc(100% / 6);
  -webkit-mask: linear-gradient(180deg, #000 30%, transparent 100%);
  mask: linear-gradient(180deg, #000 30%, transparent 100%);
  opacity: 0.8;
  animation: kostur-pulsira 1400ms ease-in-out infinite alternate;
}

.kal-ucitavanje-tekst {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.4rem;
  padding: 0 1.8rem 0 1.4rem;
  border-radius: var(--r-dugme);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--naslov);
  background: var(--povrsina);
  box-shadow: var(--senka-1);
}

.kal-ucitavanje-tacke {
  display: inline-flex;
  gap: 0.35rem;
}

.kal-ucitavanje-tacke i {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--akcenat);
  animation: tacka-skace 1100ms var(--ease) infinite;
}

.kal-ucitavanje-tacke i:nth-child(2) {
  animation-delay: 140ms;
}

.kal-ucitavanje-tacke i:nth-child(3) {
  animation-delay: 280ms;
}

/* poruka za slučaj da JavaScript ne radi (html bez klase .js) */
.kal-bez-js {
  display: none;
}

html:not(.js) .kal-ucitavanje {
  position: static;
  height: auto;
  order: 1;
  padding: 2.4rem 0.8rem;
  pointer-events: auto;
}

html:not(.js) .kal-ucitavanje-mreza,
html:not(.js) .kal-ucitavanje-tekst,
html:not(.js) .kal-strelica {
  display: none;
}

html:not(.js) .kal-bez-js {
  display: block;
  font-size: 1.55rem;
  line-height: 1.5;
  text-align: center;
  color: var(--tekst);
}

html:not(.js) .kal-meseci {
  min-height: 0;
}

/* MESEC */
.kal-mesec {
  min-width: 0;
}

.kal-meseci--napred .kal-mesec {
  animation: kal-napred 520ms var(--ease-izlaz) backwards;
}

.kal-meseci--nazad .kal-mesec {
  animation: kal-nazad 520ms var(--ease-izlaz) backwards;
}

.kal-naslov {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.4rem;
  font-family: var(--font-naslov);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--naslov);
}

.kal-dani-nedelje {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: center;
  height: 3rem;
}

.kal-dani-nedelje span {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
  color: var(--tekst-ugaseno);
}

.kal-mreza {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.4rem;
}

/* DAN — zaobljen kvadrat kao u traci iz hero stranice, sa cenom noći */
.dan {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0.8rem;
  background: none;
  font-family: inherit;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--naslov);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color 200ms var(--ease), color 200ms var(--ease), transform 200ms var(--ease);
}

.dan-broj {
  font-size: 1.5rem;
  font-weight: 600;
}

.dan-cena {
  font-size: 1rem;
  font-weight: 500;
  color: var(--tekst-ugaseno);
}

button.dan {
  cursor: pointer;
}

button.dan:active {
  transform: scale(0.93);
}

.dan:focus-visible {
  outline-offset: 1px;
}

.dan--prazan {
  visibility: hidden;
}

.dan--proslo {
  color: var(--dan-proslo);
}

.dan--slobodan {
  background: var(--dan-slobodan);
}

.dan--danas {
  box-shadow: inset 0 0 0 1.5px var(--akcenat);
}

/* zauzeto — šrafura iz hero stranice; bez precrtavanja (smetalo je čitanju) */
.dan--zauzet {
  color: var(--dan-zauzet-tekst);
  background: repeating-linear-gradient(135deg, var(--dan-zauzet-1) 0 3px, var(--dan-zauzet-2) 3px 7px);
}

/* zauzet dan koji sme da bude dan ODLASKA: jutro je slobodno, noć nije —
   šrafirana je samo desna polovina */
.dan--odlazak-moguc {
  color: var(--naslov);
  background:
    repeating-linear-gradient(135deg, var(--dan-zauzet-1) 0 3px, var(--dan-zauzet-2) 3px 7px) right / 50% 100% no-repeat,
    var(--dan-slobodan);
}

/* sezona — malo sunce u uglu */
.dan--sezona::after {
  content: "";
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--sunce);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.06);
}

.dan--u-rasponu {
  color: var(--dan-raspon-tekst);
  background: var(--dan-raspon);
}

.dan--u-rasponu .dan-cena {
  color: var(--akcenat-tekst);
}

/* HOVER — samo uređaji sa mišem (na dodir bi se „zalepio") */
@media (hover: hover) {
  .dan--slobodan:hover {
    background: var(--dan-slobodan-hover);
  }

  .dan--u-rasponu:hover {
    background: var(--akcenat-meko-2);
  }

  .dan--odlazak-moguc:hover {
    background:
      repeating-linear-gradient(135deg, var(--dan-zauzet-1) 0 3px, var(--dan-zauzet-2) 3px 7px) right / 50% 100% no-repeat,
      var(--dan-slobodan-hover);
  }
}

/* IZABRAN — posle hover pravila iste specifičnosti, pa zadržava boje */
.dan.dan--izabran {
  color: var(--dan-izabran-tekst);
  background: var(--dan-izabran);
  box-shadow: 0 0.6rem 1.4rem -0.6rem rgb(120 50 20 / 0.6);
}

.dan--izabran .dan-cena {
  color: inherit;
  opacity: 0.85;
}

.dan--izabran::after {
  background: var(--dan-izabran-tekst);
}

/* Dodirni ekrani: izabran dan izričito zadržava i boju TEKSTA — bez
   toga je na Savskom izlogu ostajao taman broj na tamnoj podlozi. */
@media (hover: none) {
  .dan.dan--izabran:hover {
    color: var(--dan-izabran-tekst);
    background: var(--dan-izabran);
  }
}

/* LEGENDA */
.kal-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.6rem;
  margin-top: 1.4rem;
  padding: 0 0.4rem;
  font-size: 1.3rem;
  color: var(--tekst-tiho);
}

.kal-legenda-stavka {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.kal-uzorak {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.6rem;
  font-size: 1.1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--naslov);
}

.kal-uzorak--slobodno {
  background: var(--dan-slobodan);
}

.kal-uzorak--zauzeto {
  color: var(--dan-zauzet-tekst);
  background: repeating-linear-gradient(135deg, var(--dan-zauzet-1) 0 3px, var(--dan-zauzet-2) 3px 6px);
}

.kal-uzorak--izabrano {
  color: var(--dan-izabran-tekst);
  background: var(--dan-izabran);
}

.kal-uzorak--sezona {
  background: var(--dan-slobodan);
}

.kal-uzorak--sezona::after {
  content: "";
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--sunce);
}

/* IZBOR — šta je gost do sada izabrao */
.kal-izbor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 5.6rem;
  margin-top: 1.2rem;
  padding: 0.6rem 0.6rem 0.6rem 1.6rem;
  border-radius: var(--r-dugme);
  background: var(--povrsina-2);
  transition: background-color 400ms var(--ease);
}

.kal-izbor--gotov {
  background: var(--dan-raspon);
}

.kal-izbor-tekst {
  font-size: 1.45rem;
  line-height: 1.4;
  color: var(--tekst-tiho);
}

.kal-izbor-tekst strong {
  font-weight: 700;
  color: var(--naslov);
}

.kal-ponisti {
  flex-shrink: 0;
  min-height: 4.4rem;
  padding: 0 1.6rem;
  border-radius: 0.9rem;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--naslov);
  background: var(--povrsina);
  box-shadow: var(--senka-1);
}

/* ---------- GOSTI ---------- */

.rez-red {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px dashed var(--ivica-jaka);
}

.rez-red-tekst {
  min-width: 0;
}

.rez-oznaka {
  display: block;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--naslov);
}

.rez-pomoc {
  margin-top: 0.2rem;
  font-size: 1.3rem;
  line-height: 1.4;
  color: var(--tekst-tiho);
}

.rez-pomoc:empty {
  display: none;
}

/* STEPPER — generički; JS obrađuje svaki [data-stepper] */
.stepper {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0.2rem;
  padding: 0.3rem;
  border-radius: var(--r-dugme);
  background: var(--povrsina-2);
}

.stepper button {
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 0.9rem;
  color: var(--naslov);
  background: var(--povrsina);
  box-shadow: 0 0.1rem 0.3rem rgb(34 48 31 / 0.12);
  transition: opacity 260ms var(--ease), transform 200ms var(--ease);
}

.stepper button .ikona {
  width: 1.8rem;
  height: 1.8rem;
  stroke-width: 2.2;
}

.stepper button:active:not(:disabled) {
  transform: scale(0.9);
}

.stepper button:disabled {
  opacity: 0.35;
  cursor: default;
}

.stepper input {
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  border: 0;
  border-radius: 0.8rem;
  background: transparent;
  font-family: var(--font-naslov);
  font-size: 2.2rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--naslov);
  -moz-appearance: textfield;
  appearance: textfield;
}

.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.stepper--malo button {
  width: 3.8rem;
  height: 3.8rem;
}

.stepper--malo input {
  width: 3.2rem;
  font-size: 1.8rem;
}

/* PREKIDAČ — tekst levo, klizač desno */
.prekidac {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.2rem;
  min-height: 5.8rem;
  padding-top: 0.6rem;
  cursor: pointer;
}

.prekidac input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.prekidac-klizac {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  width: 5.2rem;
  height: 3.2rem;
  border-radius: var(--r-pilula);
  background: var(--prekidac-pozadina);
  transition: background-color 300ms var(--ease);
}

.prekidac-klizac::after {
  content: "";
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: var(--prekidac-dugme);
  box-shadow: 0 0.2rem 0.6rem rgb(0 0 0 / 0.18);
  transition: transform 420ms var(--ease-izlaz);
}

.prekidac input:checked + .prekidac-klizac {
  background: var(--prekidac-ukljucen);
}

.prekidac input:checked + .prekidac-klizac::after {
  transform: translateX(2rem);
}

.prekidac input:focus-visible + .prekidac-klizac {
  outline: 2px solid var(--fokus);
  outline-offset: 2px;
}

.prekidac-tekst {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--tekst);
}

.prekidac-tekst .ikona {
  color: var(--akcenat);
}

/* ---------- DODACI ---------- */

.rez-grupa + .rez-grupa {
  border-top: 1px dashed var(--ivica-jaka);
}

.rez-grupa summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 5.6rem;
  font-size: 1.65rem;
  font-weight: 600;
  color: var(--naslov);
  cursor: pointer;
  list-style: none;
}

.rez-grupa summary::-webkit-details-marker {
  display: none;
}

/* strelica harmonike — nacrtana ivicama */
.rez-grupa summary::after {
  content: "";
  width: 0.9rem;
  height: 0.9rem;
  margin: 0 0.8rem 0.4rem auto;
  border: solid var(--tekst-tiho);
  border-width: 0 0.2rem 0.2rem 0;
  transform: rotate(45deg);
  transition: transform 420ms var(--ease-izlaz), margin 420ms var(--ease-izlaz);
}

.rez-grupa[open] summary::after {
  margin-bottom: -0.4rem;
  transform: rotate(-135deg);
}

.rez-grupa-broj {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  height: 2.4rem;
  padding: 0 0.7rem;
  border-radius: var(--r-pilula);
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--na-akcentu);
  background: var(--akcenat);
  animation: broj-iskoci 420ms var(--ease-izlaz) backwards;
}

.rez-dodaci-lista {
  padding-bottom: 0.8rem;
}

.dodatak {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1.4rem;
  min-height: 6rem;
  padding: 0.8rem 0.2rem;
  border-top: 1px solid var(--ivica);
  cursor: pointer;
}

.dodatak--komad {
  grid-template-columns: minmax(0, 1fr) auto;
  cursor: default;
}

.dodatak-cek {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* kvadratić koji postaje kvačica (kvačica je nacrtana ivicama) */
.dodatak-oznaka {
  position: relative;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.7rem;
  box-shadow: inset 0 0 0 1.5px var(--ivica-jaka);
  transition: background-color 240ms var(--ease), box-shadow 240ms var(--ease);
}

.dodatak-oznaka::after {
  content: "";
  position: absolute;
  left: 0.95rem;
  top: 0.5rem;
  width: 0.65rem;
  height: 1.2rem;
  border: solid var(--dugme-tekst);
  border-width: 0 0.22rem 0.22rem 0;
  transform: rotate(45deg) scale(0);
  transition: transform 360ms var(--ease-izlaz);
}

.dodatak-cek:checked + .dodatak-oznaka,
.dodatak.je-izabran .dodatak-oznaka {
  background: var(--dugme-pozadina);
  box-shadow: none;
}

.dodatak-cek:checked + .dodatak-oznaka::after,
.dodatak.je-izabran .dodatak-oznaka::after {
  transform: rotate(45deg) scale(1);
}

.dodatak-cek:focus-visible + .dodatak-oznaka {
  outline: 2px solid var(--fokus);
  outline-offset: 2px;
}

.dodatak-tekst {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.dodatak-naziv {
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--naslov);
}

.dodatak-cena {
  font-size: 1.3rem;
  line-height: 1.35;
  color: var(--tekst-tiho);
}

.dodatak.je-izabran .dodatak-naziv {
  font-weight: 700;
}

/* ---------- KONTAKT ---------- */

.rez-polja {
  display: grid;
  gap: 1.4rem;
}

.polje {
  display: grid;
  gap: 0.6rem;
  min-width: 0;
}

.polje label {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--naslov);
}

.polje-opciono {
  margin-left: 0.4rem;
  font-weight: 400;
  color: var(--tekst-tiho);
}

/* 1.7rem = 17px: ispod 16px iOS uveličava stranu pri fokusu */
.polje input,
.polje textarea {
  width: 100%;
  min-height: 5.2rem;
  padding: 1.3rem 1.6rem;
  border: 0;
  border-radius: var(--r-dugme);
  font-size: 1.7rem;
  line-height: 1.35;
  color: var(--naslov);
  background: var(--polje-pozadina);
  box-shadow: inset 0 0 0 1px var(--polje-ivica);
  -webkit-appearance: none;
  appearance: none;
  transition: box-shadow 240ms var(--ease);
}

.polje textarea {
  min-height: 10rem;
  resize: vertical;
  line-height: 1.5;
}

.polje input::placeholder,
.polje textarea::placeholder {
  color: var(--tekst-ugaseno);
  opacity: 0.8;
}

.polje input:focus,
.polje textarea:focus {
  box-shadow: inset 0 0 0 1.5px var(--fokus), 0 0 0 0.4rem var(--akcenat-meko);
}

.polje input:focus-visible,
.polje textarea:focus-visible {
  outline: none;
}

/* zamka za botove — van ekrana, ne display:none */
.rez-zamka {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.rez-poziv {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.8rem;
  margin-top: 1.2rem;
  font-size: 1.45rem;
  color: var(--tekst-tiho);
}

/* ---------- RAČUN — papirna priznanica sa zupčastom donjom ivicom ---------- */

.rez-racun {
  position: relative;
  min-width: 0;
  margin-bottom: 1.4rem;
  padding: 2.4rem 2rem 2.4rem;
  border-radius: var(--r-kartica) var(--r-kartica) 0 0;
  background: var(--povrsina);
  filter: drop-shadow(0 0 1px var(--ivica-jaka)) drop-shadow(0 1.6rem 2.2rem rgb(34 48 31 / 0.16));
}

/* polukrugovi ispod kartice — izgleda kao otcepljen račun */
.rez-racun::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 1.2rem;
  background: radial-gradient(circle at 50% 0, var(--povrsina) 0.72rem, transparent 0.78rem) 0 0 / 1.8rem 1.2rem repeat-x;
}

.rez-racun-vrh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.4rem;
  border-bottom: 2px solid var(--naslov);
}

.rez-racun-naslov {
  font-family: var(--font-naslov);
  font-size: 2.6rem;
  font-weight: 400;
  line-height: 1.1;
  color: var(--naslov);
}

.rez-racun-znak {
  width: 2.8rem;
  height: 2.8rem;
  color: var(--naslov);
}

.rez-stavke {
  display: grid;
  list-style: none;
}

.rez-stavka {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.6rem;
  padding: 1.2rem 0;
  border-top: 1px dashed var(--ivica-jaka);
  font-size: 1.5rem;
  line-height: 1.35;
}

.rez-stavka:first-child {
  border-top: 0;
}

.rez-stavka-opis {
  min-width: 0;
  color: var(--naslov);
}

.rez-stavka-opis em {
  display: block;
  margin-top: 0.2rem;
  font-size: 1.3rem;
  font-style: normal;
  color: var(--tekst-tiho);
}

.rez-stavka-iznos {
  flex-shrink: 0;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--naslov);
}

.rez-stavka--popust .rez-stavka-iznos {
  color: var(--uspeh);
}

.rez-ukupno {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.4rem;
  padding-top: 1.6rem;
  border-top: 2px solid var(--naslov);
}

.rez-ukupno span {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--naslov);
}

.rez-ukupno strong {
  font-family: var(--font-naslov);
  font-size: 4.4rem;
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--naslov);
}

.rez-avans {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.2rem;
  font-size: 1.4rem;
  color: var(--tekst-tiho);
}

.rez-avans::before {
  content: "";
  flex-shrink: 0;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--akcenat);
}

.rez-avans strong {
  color: var(--naslov);
}

.rez-avans:empty,
.rez-napomena-cena:empty {
  display: none;
}

.rez-napomena-cena {
  margin-top: 0.8rem;
  font-size: 1.35rem;
  line-height: 1.45;
  color: var(--tekst-tiho);
}

.rez-greska {
  margin-top: 1.4rem;
  padding: 1.2rem 1.4rem;
  border-radius: var(--r-dugme);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--greska-tekst);
  background: var(--greska-pozadina);
  animation: ulaz-gore 420ms var(--ease-izlaz) backwards;
}

#rez-posalji {
  margin-top: 2rem;
}

.btn--salje {
  opacity: 0.75;
}

.rez-sitno {
  margin-top: 1.2rem;
  font-size: 1.25rem;
  line-height: 1.45;
  text-align: center;
  color: var(--tekst-tiho);
}

/* ---------- USPEH ---------- */

.rez-uspeh {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  padding: 4.4rem 2.4rem;
  border-radius: var(--r-veliko);
  text-align: center;
  background: var(--povrsina);
  box-shadow: var(--senka-1);
  animation: ulaz-gore 700ms var(--ease-izlaz) backwards;
}

.rez-uspeh-ikona {
  width: 7.2rem;
  height: 7.2rem;
  fill: none;
  stroke: var(--uspeh);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rez-uspeh-krug {
  stroke-dasharray: 158;
  stroke-dashoffset: 158;
  animation: crtaj 820ms var(--ease-izlaz) 150ms forwards;
}

.rez-uspeh-kvacica {
  stroke-dasharray: 34;
  stroke-dashoffset: 34;
  animation: crtaj 480ms var(--ease-izlaz) 700ms forwards;
}

.rez-uspeh-naslov {
  font-family: var(--font-naslov);
  font-size: 3.2rem;
  font-weight: 400;
  line-height: 1.1;
  color: var(--naslov);
}

.rez-uspeh-tekst {
  max-width: 46ch;
  color: var(--tekst-tiho);
}

.rez-uspeh-tekst strong {
  color: var(--naslov);
}

.rez-demo-veza,
.rez-demo-veza:link,
.rez-demo-veza:visited {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 4.6rem;
  padding: 0 1.8rem;
  border-radius: var(--r-dugme);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--akcenat-tekst);
  background: var(--akcenat-meko);
  text-decoration: none;
}

.rez-demo-veza .ikona {
  width: 1.7rem;
  height: 1.7rem;
}

.rez-uspeh .btn {
  margin-top: 0.8rem;
}

/* ////////////////////////////////////////////////////////////////////
   UTISCI
   //////////////////////////////////////////////////////////////////// */

.utisci-vrh {
  display: grid;
  gap: 2rem;
  margin-bottom: 3.2rem;
}

.utisci-vrh .zaglavlje-sekcije {
  margin-bottom: 0;
}

.ocena {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.ocena-broj {
  font-family: var(--font-naslov);
  font-size: 6.4rem;
  line-height: 1;
  color: var(--naslov);
}

.zvezde {
  width: 12rem;
  height: 2.4rem;
  color: #d99a3c;
}

.ocena-opis {
  margin-top: 0.4rem;
  font-size: 1.4rem;
  color: var(--tekst-tiho);
}

.utisci-lista {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(27rem, 84%);
  gap: 1.4rem;
  overflow-x: auto;
  margin-inline: calc(-1 * var(--ivica-strane));
  padding: 0.4rem var(--ivica-strane) 1.6rem;
  scroll-padding-inline: var(--ivica-strane);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.utisci-lista::-webkit-scrollbar {
  display: none;
}

.utisak {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  margin: 0;
  padding: 2.4rem 2.2rem;
  border-radius: var(--r-kartica);
  background: var(--povrsina);
  box-shadow: var(--senka-1);
  scroll-snap-align: start;
}

.utisak::before {
  content: "\201C";
  height: 2.6rem;
  font-family: var(--font-naslov);
  font-size: 6.4rem;
  line-height: 0.9;
  color: var(--akcenat);
}

.utisak-tekst p {
  font-size: 1.65rem;
  line-height: 1.55;
  color: var(--tekst);
}

.utisak-autor {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.utisak-inicijali {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--naslov);
  background: var(--povrsina-2);
}

.utisak-ime {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.utisak-ime strong {
  font-size: 1.5rem;
  color: var(--naslov);
}

.utisak-ime span {
  font-size: 1.3rem;
  color: var(--tekst-tiho);
}

/* ////////////////////////////////////////////////////////////////////
   LOKACIJA
   //////////////////////////////////////////////////////////////////// */

.lokacija-omot {
  display: grid;
  gap: 4rem;
}

.udaljenosti {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2.8rem;
  list-style: none;
}

.udaljenost {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1.4rem 1.6rem;
  border-radius: var(--r-kartica);
  background: var(--povrsina);
  box-shadow: var(--senka-1);
}

.udaljenost span {
  font-size: 1.35rem;
  color: var(--tekst-tiho);
}

.udaljenost strong {
  font-family: var(--font-naslov);
  font-size: 2.2rem;
  font-weight: 400;
  color: var(--naslov);
}

.napomena-put {
  display: flex;
  gap: 1.2rem;
  margin-top: 2rem;
  padding: 1.6rem;
  border-radius: var(--r-kartica);
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--tekst);
  background: var(--akcenat-meko);
}

.napomena-put .ikona {
  margin-top: 0.2rem;
  color: var(--akcenat-tekst);
}

.napomena-put strong {
  color: var(--naslov);
}

.adresa {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 2rem;
  font-weight: 600;
  color: var(--naslov);
}

.adresa .ikona {
  color: var(--akcenat);
}

.lokacija-dugmad {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.4rem;
}

.mapa-okvir {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  padding: 0.8rem;
  border-radius: var(--r-veliko);
  background: var(--povrsina);
  box-shadow: var(--senka-2);
}

.mapa {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 1.6rem;
  background: var(--povrsina-2);
}

/* ////////////////////////////////////////////////////////////////////
   PITANJA
   //////////////////////////////////////////////////////////////////// */

.pitanja-omot {
  display: grid;
  gap: 1.2rem;
}

.pitanja-poziv {
  margin-top: 2.4rem;
}

.pitanja-lista {
  padding: 0.6rem 2rem;
  border-radius: var(--r-veliko);
  background: var(--povrsina);
  box-shadow: var(--senka-1);
}

.pitanje + .pitanje {
  border-top: 1px dashed var(--ivica-jaka);
}

.pitanje summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  min-height: 6.4rem;
  padding: 1.4rem 0;
  font-size: 1.65rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--naslov);
  cursor: pointer;
  list-style: none;
}

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

.pitanje-ikona {
  position: relative;
  flex-shrink: 0;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: var(--povrsina-2);
  transition: background-color 300ms var(--ease);
}

.pitanje-ikona::before,
.pitanje-ikona::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.2rem;
  height: 2px;
  margin: -1px 0 0 -0.6rem;
  border-radius: 1px;
  background: var(--naslov);
  transition: transform 400ms var(--ease-izlaz);
}

.pitanje-ikona::after {
  transform: rotate(90deg);
}

.pitanje[open] .pitanje-ikona {
  background: var(--akcenat-meko);
}

.pitanje[open] .pitanje-ikona::after {
  transform: rotate(0deg);
}

.pitanje-odgovor {
  padding: 0 4.4rem 2rem 0;
  font-size: 1.6rem;
  line-height: 1.6;
  color: var(--tekst-tiho);
}

/* ////////////////////////////////////////////////////////////////////
   PODNOŽJE — tamna traka brda
   //////////////////////////////////////////////////////////////////// */

.podnozje {
  position: relative;
  margin-top: 2rem;
  color: var(--podnozje-tekst);
}

.podnozje-brda {
  display: block;
  width: 100%;
  height: 7rem;
  max-width: none;
  margin-bottom: -1px;
}

.podnozje-brdo-1 {
  fill: var(--brdo-3);
}

.podnozje-brdo-2 {
  fill: var(--podnozje-pozadina);
}

.podnozje-telo {
  padding: 2.4rem 0 calc(10.4rem + env(safe-area-inset-bottom, 0px));
  background: var(--podnozje-pozadina);
}

.podnozje .naglasak {
  color: #edb45c;
}

.podnozje-naslov {
  font-family: var(--font-naslov);
  font-size: clamp(3.8rem, 10vw, 6.4rem);
  font-weight: 400;
  line-height: 1;
  color: var(--podnozje-tekst);
}

.podnozje-uvod {
  max-width: 52ch;
  margin-top: 1.6rem;
  color: var(--podnozje-tiho);
}

.podnozje-dugmad {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-top: 2.8rem;
}

.podnozje-mreza {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3.2rem 2rem;
  margin-top: 6rem;
  padding-top: 4rem;
  border-top: 1px solid var(--podnozje-ivica);
}

.podnozje-kolona {
  min-width: 0;
  font-size: 1.5rem;
  line-height: 1.55;
  color: var(--podnozje-tiho);
}

.podnozje-kolona p + p {
  margin-top: 0.6rem;
}

.podnozje-kolona--logo {
  grid-column: 1 / -1;
}

.podnozje-kolona--logo p {
  margin-top: 1rem;
  max-width: 34ch;
}

.logo--podnozje,
.logo--podnozje:link,
.logo--podnozje:visited {
  color: var(--podnozje-tekst);
}

.logo--podnozje .logo-vrata {
  fill: #edb45c;
}

.podnozje-naslov-kolone {
  margin-bottom: 1rem;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--podnozje-tekst);
}

.podnozje-lista {
  display: grid;
  gap: 0.2rem;
  list-style: none;
}

.podnozje-lista a,
.podnozje-lista a:link,
.podnozje-lista a:visited {
  display: inline-block;
  padding: 0.5rem 0;
  color: var(--podnozje-tiho);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color 200ms var(--ease);
}

@media (hover: hover) {
  .podnozje-lista a:hover {
    color: var(--podnozje-tekst);
  }
}

.podnozje-dno {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--podnozje-ivica);
  font-size: 1.35rem;
  color: var(--podnozje-tiho);
}

/* POTPIS IZRADE — „powered by cabindesign.rs". Boje su tamna varijanta
   logoa firme (tinta #F2EEE4, tema #8CC79B), jer je podnožje tamno u
   obe teme. Tiho dok se ne pređe mišem. */
.potpis,
.potpis:link,
.potpis:visited {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 4.4rem;
  font-size: 1.25rem;
  color: var(--podnozje-tiho);
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 240ms var(--ease), color 240ms var(--ease);
}

.potpis-uvod {
  letter-spacing: 0.04em;
}

.potpis-znak {
  width: 2rem;
  height: 2rem;
}

.potpis-znak rect {
  fill: #f2eee4;
}

.potpis-znak .potpis-kv--tema {
  fill: #8cc79b;
}

.potpis-krov {
  fill: none;
  stroke: #f2eee4;
  stroke-width: 5;
  stroke-linecap: square;
}

.potpis-ime {
  font-family: "Hanken Grotesk", var(--font);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #f2eee4;
}

.potpis-rs {
  color: #8cc79b;
}

@media (hover: hover) {
  .potpis:hover {
    opacity: 1;
    color: var(--podnozje-tekst);
  }
}

.podnozje-jezik,
.podnozje-jezik:link,
.podnozje-jezik:visited {
  display: inline-flex;
  align-items: center;
  min-height: 4.4rem;
  font-weight: 600;
  color: var(--podnozje-tekst);
}

/* ////////////////////////////////////////////////////////////////////
   DONJA TRAKA (telefon) — termin van rezervacije, cena u njoj
   //////////////////////////////////////////////////////////////////// */

.dno-traka {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1rem var(--ivica-strane) calc(1rem + env(safe-area-inset-bottom, 0px));
  background: var(--povrsina);
  box-shadow: 0 -1px 0 var(--ivica), 0 -1.2rem 3rem -1.6rem rgb(34 48 31 / 0.35);
  transform: translateY(110%);
  transition: transform 520ms var(--ease-izlaz), background-color 400ms var(--ease);
}

body.traka-vidljiva .dno-traka {
  transform: none;
}

body.sloj-otvoren .dno-traka,
body.kucanje .dno-traka {
  transform: translateY(110%);
}

.dno-traka-tekst {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.dno-traka-gore {
  overflow: hidden;
  font-size: 1.45rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--tekst);
}

.dno-traka-gore strong {
  font-family: var(--font-naslov);
  font-size: 2.2rem;
  font-weight: 400;
  color: var(--naslov);
}

.dno-traka-dole {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.3rem;
  color: var(--tekst-tiho);
}

.dno-traka-dole .ikona {
  width: 1.4rem;
  height: 1.4rem;
  color: #d99a3c;
}

.dno-traka--racun .dno-traka-dole .ikona {
  display: none;
}

.dno-traka-dugme,
.dno-traka-dugme:link,
.dno-traka-dugme:visited {
  flex-shrink: 0;
  min-height: 4.8rem;
  padding: 0 2rem;
}

/* ////////////////////////////////////////////////////////////////////
   ZAKLJUČAN SKROL — iOS-bezbedno (JS stavlja top: -Ypx)
   //////////////////////////////////////////////////////////////////// */

body.skrol-zakljucan {
  position: fixed;
  inset-inline: 0;
  width: 100%;
  overflow: hidden;
}

/* ////////////////////////////////////////////////////////////////////
   SHEET — ulazi odozdo; na širem ekranu dijalog u sredini (queries)
   //////////////////////////////////////////////////////////////////// */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 560ms;
}

.sheet.je-otvoren {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.sheet-pozadina {
  position: absolute;
  inset: 0;
  background: var(--iza-sloja);
  opacity: 0;
  transition: opacity 460ms var(--ease);
}

.sheet.je-otvoren .sheet-pozadina {
  opacity: 1;
}

.sheet-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: calc(100vh - 4rem);
  max-height: calc(100svh - 4rem - env(safe-area-inset-top, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.8rem 2rem calc(2rem + env(safe-area-inset-bottom, 0px));
  border-radius: var(--r-veliko) var(--r-veliko) 0 0;
  background: var(--papir);
  box-shadow: var(--senka-3);
  scrollbar-width: none;
  transform: translateY(calc(100% + 2rem));
  transition: transform 560ms var(--ease-izlaz);
}

.sheet-panel::-webkit-scrollbar {
  display: none;
}

.sheet.je-otvoren .sheet-panel {
  transform: translateY(var(--povlacenje, 0px));
}

/* dok prst vuče, panel ga prati bez kašnjenja */
.sheet.se-vuce .sheet-panel,
.sheet-panel.se-vuce {
  transition: none;
}

.sheet-rucica {
  width: 3.6rem;
  height: 0.5rem;
  margin: 0 auto 0.4rem;
  border-radius: 1rem;
  background: var(--ivica-jaka);
}

.sheet-zatvori {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  color: var(--naslov);
  background: var(--dugme-tiho);
  transition: background-color 240ms var(--ease);
}

.sheet-glava {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 1.6rem 4.4rem 2.2rem;
  text-align: center;
}

.domacini-lica--veliko span {
  width: 5.2rem;
  height: 5.2rem;
  font-size: 1.7rem;
  box-shadow: 0 0 0 0.3rem var(--papir);
}

.sheet-naslov {
  margin-top: 1rem;
  font-family: var(--font-naslov);
  font-size: 2.8rem;
  font-weight: 400;
  line-height: 1.1;
  color: var(--naslov);
}

.sheet-naslov--levo {
  margin: 1.4rem 0 1.4rem;
  padding-right: 5rem;
  text-align: left;
}

.sheet-podnaslov {
  font-size: 1.4rem;
  color: var(--tekst-tiho);
}

.kontakt-akcije {
  overflow: hidden;
  border-radius: var(--r-kartica);
  list-style: none;
  background: var(--povrsina);
  box-shadow: var(--senka-1);
}

.kontakt-akcija,
.kontakt-akcija:link,
.kontakt-akcija:visited {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  min-height: 6.4rem;
  padding: 1rem 1.4rem 1rem 1.2rem;
  color: var(--naslov);
  text-decoration: none;
  transition: background-color 200ms var(--ease);
}

.kontakt-akcije li + li .kontakt-akcija::before {
  content: "";
  position: absolute;
  top: 0;
  left: 6.6rem;
  right: 0;
  height: 1px;
  background: var(--ivica);
}

.kontakt-akcija:active {
  background-color: var(--dugme-tiho);
}

.kontakt-ikona {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  border-radius: 1.1rem;
  color: #ffffff;
  background: var(--kontakt-telefon);
}

.kontakt-ikona .ikona {
  width: 2.1rem;
  height: 2.1rem;
}

.kontakt-ikona--viber {
  background: var(--kontakt-viber);
}

.kontakt-ikona--whatsapp {
  background: var(--kontakt-whatsapp);
}

.kontakt-ikona--instagram {
  background: var(--kontakt-instagram);
}

.kontakt-ikona--mejl {
  background: var(--kontakt-mejl);
}

.kontakt-tekst {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.kontakt-tekst strong {
  font-size: 1.6rem;
}

.kontakt-tekst span {
  overflow: hidden;
  font-size: 1.35rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--tekst-tiho);
}

.kontakt-strelica {
  width: 1.8rem;
  height: 1.8rem;
  color: var(--tekst-ugaseno);
}

.sheet-adresa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.4rem;
  font-size: 1.35rem;
  color: var(--tekst-tiho);
}

.sheet-adresa .ikona {
  width: 1.7rem;
  height: 1.7rem;
}

@media (hover: hover) {
  .kontakt-akcija:hover {
    background-color: var(--dugme-tiho);
  }

  .sheet-zatvori:hover {
    background-color: var(--dugme-tiho-hover);
  }
}

/* MENI (telefon) */
.meni-lista {
  display: grid;
}

.meni-link,
.meni-link:link,
.meni-link:visited {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 5.4rem;
  border-top: 1px dashed var(--ivica-jaka);
  font-family: var(--font-naslov);
  font-size: 2.4rem;
  line-height: 1.1;
  color: var(--naslov);
  text-decoration: none;
}

.meni-broj {
  font-family: var(--font);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--akcenat-tekst);
}

.meni-dno {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}

/* ////////////////////////////////////////////////////////////////////
   LIGHTBOX
   JS postavlja --povlacenje-x/-y (px) i --providnost (0–1); FLIP
   otvaranje ide kroz inline transform na slici, pa CSS na slici nema
   svoj transform — pomeranje prstom ide kroz `translate` na okviru.
   //////////////////////////////////////////////////////////////////// */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  visibility: hidden;
  pointer-events: none;
  color: #f3ebda;
  --fokus: #edb45c;
  transition: visibility 0s linear 480ms;
}

.lightbox.je-otvoren {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.lightbox-pozadina {
  position: absolute;
  inset: 0;
  background: rgb(16 22 15 / 0.94);
  opacity: 0;
  transition: opacity 460ms var(--ease);
}

.lightbox.je-otvoren .lightbox-pozadina {
  opacity: var(--providnost, 1);
}

.lightbox.se-zatvara .lightbox-pozadina {
  opacity: 0;
}

.lightbox-okvir {
  position: absolute;
  inset: calc(env(safe-area-inset-top, 0px) + 7.2rem) 1.2rem calc(env(safe-area-inset-bottom, 0px) + 8.8rem);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  translate: var(--povlacenje-x, 0px) var(--povlacenje-y, 0px);
  transition: translate 560ms var(--ease-izlaz);
}

.lightbox.se-vuce .lightbox-okvir,
.lightbox.se-vuce .lightbox-pozadina,
.lightbox.se-vuce .lightbox-vrh,
.lightbox.se-vuce .lightbox-opis {
  transition: none;
}

.lightbox-slika {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-kartica);
  box-shadow: 0 2.4rem 6rem -1.6rem rgb(0 0 0 / 0.6);
  opacity: 0;
  transition: opacity 320ms var(--ease), transform 560ms var(--ease-izlaz);
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.lightbox.je-otvoren .lightbox-slika {
  opacity: 1;
}

.lightbox.se-zatvara .lightbox-slika {
  opacity: 0;
}

.lightbox-vrh {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 1.2rem);
  left: 1.2rem;
  right: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: 0;
  translate: 0 -1.2rem;
  transition: opacity 360ms var(--ease), translate 560ms var(--ease-izlaz);
}

.lightbox-brojac {
  display: inline-flex;
  align-items: center;
  min-height: 4.4rem;
  padding: 0 1.6rem;
  border-radius: var(--r-dugme);
  font-size: 1.4rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: rgb(243 235 218 / 0.1);
}

.lightbox-brojac:empty {
  visibility: hidden;
}

.lightbox-dugme {
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: var(--r-dugme);
  color: #f3ebda;
  background: rgb(243 235 218 / 0.1);
  transition: background-color 240ms var(--ease);
}

.lightbox-opis {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 2rem);
  width: fit-content;
  max-width: calc(100% - 3.2rem);
  margin-inline: auto;
  padding: 1rem 1.8rem;
  border-radius: var(--r-dugme);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  color: #22301f;
  background: #f6eedd;
  opacity: 0;
  translate: 0 1.2rem;
  transition: opacity 360ms var(--ease), translate 560ms var(--ease-izlaz);
}

.lightbox-opis:empty {
  display: none;
}

.lightbox.je-otvoren .lightbox-vrh,
.lightbox.je-otvoren .lightbox-opis {
  opacity: var(--providnost, 1);
  translate: 0 0;
}

.lightbox.se-zatvara .lightbox-vrh,
.lightbox.se-zatvara .lightbox-opis {
  opacity: 0;
}

/* strelice samo uz miš; na dodir se lista prstom */
.lightbox-nazad,
.lightbox-napred {
  position: absolute;
  top: 50%;
  display: none;
  width: 5.2rem;
  height: 5.2rem;
  margin-top: -2.6rem;
  opacity: 0;
  transition: opacity 360ms var(--ease), background-color 240ms var(--ease);
}

.lightbox-nazad {
  left: 2rem;
}

.lightbox-napred {
  right: 2rem;
}

.lightbox.je-otvoren .lightbox-nazad,
.lightbox.je-otvoren .lightbox-napred {
  opacity: var(--providnost, 1);
}

@media (hover: hover) and (pointer: fine) {
  .lightbox-nazad,
  .lightbox-napred {
    display: grid;
  }

  .lightbox-dugme:hover {
    background-color: rgb(243 235 218 / 0.2);
  }
}

/* ////////////////////////////////////////////////////////////////////
   TOST — kratko obaveštenje ispod zaglavlja
   //////////////////////////////////////////////////////////////////// */

.tost-omot {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 8.4rem);
  left: 50%;
  z-index: 400;
  width: max-content;
  max-width: calc(100% - 3.2rem);
  translate: -50% 0;
  pointer-events: none;
}

.tost {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  min-height: 5.2rem;
  padding: 0.6rem 0.6rem 0.6rem 1.8rem;
  border-radius: var(--r-kartica);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--naslov);
  background: var(--povrsina);
  box-shadow: var(--senka-3);
  opacity: 0;
  transform: translateY(-1.2rem);
  transition: transform 520ms var(--ease-izlaz), opacity 300ms var(--ease);
}

.tost.je-vidljiv {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.tost > span:only-child {
  padding-right: 1.2rem;
}

.tost .ikona {
  width: 2rem;
  height: 2rem;
  color: var(--uspeh);
}

.tost a,
.tost a:link,
.tost a:visited {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 4rem;
  padding: 0 1.6rem;
  border-radius: 0.9rem;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--dugme-tekst);
  background: var(--dugme-pozadina);
  text-decoration: none;
}

/* ////////////////////////////////////////////////////////////////////
   PROMENA TEME — krug se širi iz dugmeta (View Transitions)
   //////////////////////////////////////////////////////////////////// */

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-new(root) {
  animation: tema-krug 720ms var(--ease);
}

@keyframes tema-krug {
  from {
    clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 0));
  }
  to {
    clip-path: circle(150vmax at var(--vt-x, 50%) var(--vt-y, 0));
  }
}