/*
  MAGLICA — tečno staklo (staklo.css)

  Dva materijala:

  1. PRAVO STAKLO (.staklo) — samo za slojeve koji PLUTAJU iznad
     sadržaja: zaglavlje, traka sa tabovima, sheet, kontrole lightboxa,
     čipovi u herou, lebdeća pilula, tost. Pravo zamućenje
     (backdrop-filter) je skupo: svaki takav sloj se preračunava pri
     svakom pomeraju strane.

  2. LAŽNO STAKLO (.staklo-kartica) — za kartice sadržaja (cene,
     usluge, forma, račun, pitanja). Isti izgled — poluprovidan
     gradijent, odsjaj po gornjoj ivici, svetao obod — ali BEZ
     zamućenja. Deset zamućenih kartica na telefonu seče skrol. Iza njih
     stoji .ambijent sa mekim gradijentima, pa i lažno staklo ima šta da
     „lomi".

  PRAVILA KOJA NISU OČIGLEDNA
  - U backdrop-filter se pišu DOSLOVNE vrednosti, ne var(): Safari je
    imao grešku sa promenljivama u ovom svojstvu.
  - Uvek i -webkit-backdrop-filter (Safari).
  - Roditelj staklenog sloja ne sme da dobije opacity < 1, filter ili
    masku: to pravi novi „backdrop root", pa staklo zamućuje samo ono
    što je unutar roditelja (tj. ništa) i bljesne kao providno. Zato se
    pri sakrivanju providnost menja na SAMOM staklu, a roditelj se samo
    pomera (transform je bezbedan).
  - `position: relative` je u :where() — nulta specifičnost, pa svaka
    komponenta koja je fixed/absolute (pilula, sheet panel, dugmad
    lightboxa) i dalje pobeđuje bez borbe.
*/

/* ////////////////////////////////////////////////////////////////////
   AMBIJENT — meki gradijenti iza svega (fiksiran, bez filter-a)

   NE DODIRUJE gornju ni donju ivicu ekrana. Safari 26 (iOS) boji traku
   iznad sadržaja i traku sa adresom punom bojom čim na sredini ivice,
   4 px od nje, nađe fixed/sticky sloj — čak i providan. Tada se sadržaj
   ne vidi kroz traku. Zato je sloj odmaknut od ivica, a maska ga pred
   ivicama polako gasi da se ne vidi rub. (Test: alati/testovi/safari-trake.json)
   //////////////////////////////////////////////////////////////////// */

.ambijent {
  position: fixed;
  top: 1.2rem;
  bottom: 1.2rem;
  left: 0;
  right: 0;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent, #000 4.8rem, #000 calc(100% - 4.8rem), transparent);
  mask-image: linear-gradient(transparent, #000 4.8rem, #000 calc(100% - 4.8rem), transparent);
  background:
    radial-gradient(56rem 40rem at 6% 4%, var(--ambijent-1), transparent 70%),
    radial-gradient(48rem 38rem at 100% 34%, var(--ambijent-2), transparent 70%),
    radial-gradient(40rem 34rem at 78% 96%, var(--ambijent-3), transparent 72%),
    radial-gradient(52rem 42rem at 0% 78%, var(--ambijent-1), transparent 70%);
  transition: opacity 500ms var(--ease-ios);
}

/* ////////////////////////////////////////////////////////////////////
   SAFARI IVICA — boja trake iznad sadržaja (sat, baterija) na iPhone-u

   Safari 26/27 proverava tačku na sredini gornje ivice i uzima
   NAJGORNJI fixed/sticky element na njoj (pointer-events: none ga ne
   sakriva). Ako taj element ima poluprovidnu background-color, Safari je
   produži ispod trake i sadržaj se vidi kroz nju. Ako je element prazan
   (providna kutija .header kad se kapsula skloni) ili ga nema, iOS 27
   crta punu sistemsku pozadinu — belu, noću crnu (WebKit 8b5cfad).

   Ovaj sloj je uvek najgornji na vrhu (z-index iznad zaglavlja) i nosi
   staklenu boju zaglavlja, pa traka izgleda isto i kad se zaglavlje
   sakrije. Na stranu ne crta NIŠTA: boja je odsečena na sadržaj
   (background-clip: content-box), a sadržaja nema jer je padding cela
   visina. Safari boju čita iz stila, ne iz piksela. Visina pokriva ceo
   pojas zaglavlja, jer tačka koju Safari proverava zavisi od uređaja.
   (Test: alati/testovi/safari-trake.json)
   //////////////////////////////////////////////////////////////////// */

.safari-ivica {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 51;
  box-sizing: border-box;
  height: calc(env(safe-area-inset-top, 0px) + 8rem);
  padding-top: calc(env(safe-area-inset-top, 0px) + 8rem);
  background-color: var(--staklo-pozadina);
  background-clip: content-box;
  pointer-events: none;
}

/* ////////////////////////////////////////////////////////////////////
   PRAVO STAKLO
   //////////////////////////////////////////////////////////////////// */

:where(.staklo) {
  position: relative;
}

.staklo {
  isolation: isolate;
  background-color: var(--staklo-pozadina);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 1px 0 var(--staklo-odsjaj), inset 0 0 0 0.5px var(--staklo-ivica),
    var(--senka-2);
}

/* Obod sa gradijentom: svetao gore-levo, tanji dole-desno. Maska
   ostavlja samo prsten širine 1px — utisak debljine stakla. */
.staklo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(
    155deg,
    var(--staklo-obod-1) 0%,
    transparent 32%,
    transparent 64%,
    var(--staklo-obod-2) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* gušće staklo — zaglavlje posle prvog pomeraja, sheet */
.staklo--gusto {
  background-color: var(--staklo-pozadina-gusto);
}

/* Browser bez zamućenja: površina postaje skoro čvrsta, da se tekst
   preko nje i dalje čita. Obe varijante (sa i bez prefiksa) — stariji
   Safari zna samo za -webkit-. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .staklo,
  .staklo--gusto {
    background-color: var(--staklo-cvrsto);
  }
}

/* ////////////////////////////////////////////////////////////////////
   LAŽNO STAKLO — kartice sadržaja
   //////////////////////////////////////////////////////////////////// */

/* .usluga-kartica pravi JS (ugovor ne predviđa .staklo-kartica u tom
   markupu), a .udaljenost su obične stavke liste — isti materijal */
.staklo-kartica,
.usluga-kartica,
.udaljenost {
  position: relative;
  border-radius: var(--r-kartica);
  background: linear-gradient(170deg, var(--kartica-vrh) 0%, var(--kartica-dno) 100%);
  box-shadow: inset 0 1px 0 var(--staklo-odsjaj), inset 0 0 0 1px var(--kartica-ivica),
    var(--kartica-senka);
}