/* ==========================================================================
   Komponente: dugmad, pomocne klase. Mjere iz PDF-a.
   ========================================================================== */

/* --- pill dugme --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  --btn-gap: var(--sp-12);          /* razmak natpis -> krug; mjesta ispod ga postavljaju kao varijablu */
  gap: var(--btn-gap);
  position: relative;
  border: 0;
  border-radius: var(--r-pill);
  /* Boja dugmeta, boja natpisa i debljina natpisa mogu doći iz polja
     sekcije (`cta_bg`, `cta_color`, `cta_weight`) kao varijable na samom
     dugmetu. Varijabla postoji SAMO kad je polje popunjeno, pa rezervna
     vrijednost u var() drži današnji izgled. */
  background: var(--btn-bg, var(--c-btn));
  color: var(--btn-fg, var(--c-white));
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font);
  transition: background .2s ease, color .2s ease;
}
/* M04 (Pragma, 30. 9. 2026): na hover mijenja boju CIJELO dugme, kao na V1
   („sito sviluppato in precedenza", components.css:40): tamna #0B353C,
   bijeli natpis, strelica 3 px desno. Do sada je hover išao #169dc9 ->
   #009dc9, što se okom ne vidi, a dugme s vlastitom bojom (`--btn-bg`) je
   samo blago posvijetlilo. Sada sva dugmad dobijaju istu boju hovera iz
   „Colori del sito" (`--c-btn-hover`, `--c-btn-hover-fg`, tokens.css).
   Pod `(hover: hover)`: na telefonu dodir ne ostavlja „zalijepljenu" boju.
   Fokus tipkovnicom dobija isti izgled (uz obrub iz `:focus-visible` niže).
   Poziv-tekst u heroju (`.hero__offer-cta.btn`, sections.css) i „Invia"
   (form.css) imaju svoja pravila veće težine i ovo ih ne boji. */
@media (hover: hover) {
  .btn:hover { background: var(--c-btn-hover); color: var(--c-btn-hover-fg); }
  .btn:hover .btn__arrow { transform: translateX(3px); }
}
.btn:focus-visible { background: var(--c-btn-hover); color: var(--c-btn-hover-fg); }
.btn:focus-visible .btn__arrow { transform: translateX(3px); }

.btn__label {
  font-size: var(--fs-label);        /* 16 */
  font-weight: var(--btn-fw, var(--fw-light));
  line-height: 1.4;
  white-space: nowrap;
}
/* Pilula bez `.btn__label` (natpis kao goli tekst, npr. pilule u stupcima
   karte, `map.php`): „Peso del testo del pulsante" je čitao samo
   `.btn__label`, pa na njima nije djelovao. Pravilo važi samo kad je
   varijabla upisana na dugme, pa je izgled bez nje isti. */
.btn[style*="--btn-fw"] { font-weight: var(--btn-fw); }

/* Krug je bijel, a strelica u njemu je u PDF-u razlicita za svako dugme:
   zaglavlje ima linijsku (13x6 na odmaku 8/12), podnozje ispunjenu
   (15x12 na 6,96/9), a "Invia" manju ispunjenu (11,94x10,3 na 5,31/7,28).
   Zato se crta kao pozadina s tocnom velicinom i pozicijom. */
.btn__arrow {
  flex: 0 0 auto;
  border-radius: 50%;
  /* Boja kruga iz polja `cta_arrow_bg` (varijabla samo kad je popunjeno). */
  background-color: var(--btn-arrow-bg, var(--c-white));
  background-repeat: no-repeat;
  transition: transform .2s ease;
}
.btn__arrow svg { display: none; }
/* Pomak strelice na hover je u bloku M04 gore (3 px, kao na V1). */

/* VELIKO = prva obitelj, 43.
   Izmjereno na svih 112 pilula te visine kroz sve PDF-ove:

     visina             43      112 od 112
     krug               29 x 29 112 od 112
     krug -> desni rub  7       79 komada, a 10 u zaglavlju (33 komada)
     krug od vrha/dna   7 / 7   112 od 112 — dakle tacno po sredini

   Uvlaka slijeva nije konstanta ni ove obitelji: 16,4 zaglavlje, 37
   podnozje, 22 kartica povjerenja, 22,6 „Prenota ora", 23,8 pilula u
   sekciji, 27,2 `prima__cta`. Zato 24 ovdje NIJE mjera iz dizajna nego
   zajednicka vrijednost za mjesta koja svoju nemaju; svako mjesto koje je
   izmjereno postavlja svoju nize u fajlu. */
/* NE DIRATI OVU VISINU ZBOG NALAZA „26 pilula je 184x43, dizajn trazi 217x37".
   Nalaz je tacan, ali NIJE o ovom pravilu — provjereno racunom, ne procjenom:

     .btn--lg.btn--cta   23,8 + natpis + 14,1 + krug 29 + 7   = 73,9 + natpis
     .btn--sm.btn--cta   35,2 + natpis + 43,2 + krug 23 + 5,4 = 106,8 + natpis

   Uz „Approfondisci" od 110,2 px (16 px Poppins Light) prvo daje **184,1**, a
   drugo **217,0** — tacno dva izmjerena broja. Visine 43 i 36,9 se slazu
   jednako. Dakle CSS obje obitelji je tacan; pogresna je OBITELJ u koju te
   pilule padaju. Dizajn „Approfondisci" crta kao malu obitelj na svih 37
   pojava, a `cta_size` ih u sijacu salje u veliku: od 18 sekcija s tim
   natpisom njih 12 nosi `'cta_size' => 'lg'`, a 6 `'sm'`.

   Podizanje ove visine na 37 pomjerilo bi 112 pilula koje su danas TACNE
   (43 px, 112 od 112 kroz sve PDF-ove), da bi popravilo 26 koje su u krivoj
   obitelji. Popravak je podatak o sekciji, ne pravilo.

   Zasto ranija provjera `cta_size`-a ovo nije uhvatila: provjerena je na 18
   uparenih parova, a instrument je tada odbacivao skupine istog natpisa kao
   dvojnike — i najcesci odbaceni natpis je bio bas `approfondisci` (34x).
   Provjera je dakle bila tacna nad uzorkom iz kojeg je meta bila izrezana. */
.btn--lg {
  height: 2.6875rem;                 /* 43 */
  padding-left: 1.5rem;              /* 24 */
  padding-right: 0.4375rem;          /* 7, krug pada na 1129,5 u podnozju */
}
/* Putanja je doslovno prepisana iz PDF-a (07_Contatti, dugme Prenota ora):
   ispuna #463f3b, okvir 15x12, tijelo strelice 1,378 px, glava otvoreni sesir.
   Ranije je ovdje stajala puna blok-strelica s tijelom od 4 px. */
.btn--lg .btn__arrow {
  width: 1.8125rem; height: 1.8125rem;   /* 29 */
  --btn-arrow-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 12'%3E%3Cpath fill='%23463f3b' d='M15 6L8.901 12L7.91 11.026L12.318 6.689L0 6.689L0 5.311L12.318 5.311L7.91 0.974L8.901 0Z'/%3E%3C/svg%3E");
  background-image: var(--btn-arrow-img);
  --btn-arrow-size: 0.9375rem 0.75rem;
  background-size: var(--btn-arrow-size);    /* 15 x 12 */
  --btn-arrow-pos: 0.43775rem 0.5625rem;
  background-position: var(--btn-arrow-pos); /* 7,004 / 9 */
}

/* Zaglavlje, mjere iz PDF-a: pilula 1249..1455, natpis 1265,4..1407,6,
   krug 1416..1445. Dakle uvlaka 16,4 + natpis + razmak 8,4 + krug 29 + 10.
   space-between ovdje ne valja jer sadrzaj prelazi sirinu i gura krug van. */
.site-header__cta.btn--lg {
  justify-content: flex-start;
  --btn-gap: 0.525rem;                     /* 8,4 */
  padding-left: 1.025rem;            /* 16,4 */
  padding-right: 0.625rem;           /* 10 */
}
.site-header__cta .btn__arrow {
  --btn-arrow-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 6'%3E%3Cpath d='M0 3h13M9.75 0 13 3l-3.25 3' fill='none' stroke='%23463f3b' stroke-width='1'/%3E%3C/svg%3E");
  background-image: var(--btn-arrow-img);
  --btn-arrow-size: 0.8125rem 0.375rem;
  background-size: var(--btn-arrow-size);   /* 13 x 6 */
  --btn-arrow-pos: 0.5rem 0.75rem;
  background-position: var(--btn-arrow-pos);   /* 8 / 12 */
}

/* MALO = druga obitelj, 36,9.
   Izmjereno na svih 110 pilula te visine iz `rects` u `deploy/qa/pdf-json`
   (pravougaonik oko natpisa plus krug u njemu):

     visina             36,9    110 od 110
     krug               23 x 25 110 od 110   — u dizajnu je JAJOLIK, ne okrugao
     krug -> desni rub  5,3-5,5 (medijan 5,4)
     krug od vrha/dna   6,4-6,5 / 5,4-5,5    (velika obitelj je 7/7, sredina)

   Ranije je ovdje stajalo 36 / krug 22 / desno 6 — pogodjeno po omjeru
   22/29 s velikog dugmeta, ne izmjereno. Zbog kruga 22 umjesto 23 i desnog
   razmaka 6 umjesto 5,4 svako je dugme ove obitelji bilo 0,4 px preusko, a
   0,9 px prenisko; visinu nijedna mjera prije `plohe.js` nije gledala.

   Uvlaka slijeva NIJE konstanta ove obitelji — kroz PDF-ove ide od 9 do
   35,2 — pa ostaje 22 kao zajednicka vrijednost, a mjesta koja imaju svoju
   izmjerenu uvlaku (`.hero__cta`, `.btn--cta`) je postavljaju sama. */
.btn--sm {
  height: 2.30625rem;                /* 36,9 */
  padding-left: 1.375rem;            /* 22 */
  padding-right: 0.3375rem;          /* 5,4 */
}
/* Strelica male obitelji nije velika umanjena, nego vlastiti crtez iz PDF-a:
   okvir 11,943 x 10,303 na odmaku 5,286 / 7,289 unutar kruga. Iste brojke
   vec nosi „Invia" u `form.css`, jer je to isti krug 23 x 25. Ranije je tu
   stajao okvir 11,4 x 9,1 dobiven mnozenjem 22/29. */
.btn--sm .btn__arrow,
.hero__cta.btn--lg .btn__arrow {
  width: 1.4375rem; height: 1.5625rem;   /* 23 x 25 */
  --btn-arrow-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11.943 10.303'%3E%3Cpath fill='%23463f3b' d='M11.943 5.152L7.087 10.303L6.298 9.467L9.808 5.743L0 5.743L0 4.56L9.808 4.56L6.298 0.837L7.087 0Z'/%3E%3C/svg%3E");
  background-image: var(--btn-arrow-img);
  --btn-arrow-size: 0.746437rem 0.643938rem;
  background-size: var(--btn-arrow-size);     /* 11,943 x 10,303 */
  --btn-arrow-pos: 0.330403rem 0.455592rem;
  background-position: var(--btn-arrow-pos); /* 5,286 / 7,289 */
}

/* Boja strelice iz polja `cta_arrow_color` (varijabla `--btn-arrow-fg` na
   dugmetu, samo kad je polje popunjeno). Strelica je crtež iz dizajna s
   upisanom tamnom bojom, pa se preglednik ne može zamoliti da ga preboji.
   Zato se, SAMO kad je boja izabrana, isti crtež (ista slika, veličina i
   položaj iz varijabli gore) koristi kao maska preko koje se boji ::after.
   Bez polja ovo pravilo ne važi i strelica je ista slika kao prije. */
/* `.smile-strelica` na <body>: ista boja strelice za SVA dugmad, iz postavki
   sajta („Colore della freccia dei pulsanti", `--btn-arrow-fg` na :root);
   klasu dodaje tema samo kad je polje popunjeno. */
.btn[style*="--btn-arrow-fg"] .btn__arrow,
.smile-strelica .btn .btn__arrow {
  position: relative;
  background-image: none;
}
.btn[style*="--btn-arrow-fg"] .btn__arrow::after,
.smile-strelica .btn .btn__arrow::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--btn-arrow-fg);
  -webkit-mask-image: var(--btn-arrow-img);
  mask-image: var(--btn-arrow-img);
  -webkit-mask-size: var(--btn-arrow-size);
  mask-size: var(--btn-arrow-size);
  -webkit-mask-position: var(--btn-arrow-pos);
  mask-position: var(--btn-arrow-pos);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Pilula U SEKCIJI. Klasu dodaje `smile_cta()` kad poziv ne prosljeduje
   svoju klasu; zaglavlje, podnozje, heroj, `trust`, `prima` i traka poziva
   imaju svoje klase i svoje izmjerene mjere, i ovo ih ne dira.

   Ranije je `.btn--cta` sama postavljala visinu 36,9 — i time je gurala u
   malu obitelj i dugmad kojima je `cta_size` veliko. Mjerenjem je izaslo da
   `cta_size` iz sadrzaja TACNO odgovara obitelji iz dizajna: svih 10
   uparenih `btn--lg btn--cta` ima u dizajnu 43, a svih 8 uparenih
   `btn--sm btn--cta` ima 36,9. Zato visina vise ne stoji ovdje nego dolazi
   iz `.btn--lg` / `.btn--sm`, a ovdje ostaju samo uvlake, i to po obitelji.

   MALA obitelj: 35,2 | 71,6 | 36,9 — „Approfondisci" izlazi tako na svih 37
   pojava kroz PDF-ove, sto je najveca jedna skupina cijele obitelji.
   Desnih 71,6 se sada slaze od kruga 23 i razmaka 5,4 iz `.btn--sm`, pa je
   razmak natpis->krug 43,2. Prije se slagalo od kruga 29 (kriva obitelj) i
   30,6, sto je davalo 64,6 — 7 px premalo na svakom takvom dugmetu.

   VELIKA obitelj: 23,8 | 50,1 | 43 — tako izlazi „Scopri tutte le
   recensioni" na svih 5 pojava, najcesca vrijednost te skupine.

   NIJE konstanta. Sirina pilule u sekciji je u dizajnu crtana rucno, na
   korak od 10 odnosno 50 px (216,6 / 256,6 / 266,6 / 286,6 ... i 268,9 /
   318,9 / 428,9), pa je uvlaka ono sto preostane do natpisa i ide od 23,8
   do 74,4 u velikoj i od 24,2 do 35,2 u maloj obitelji. Nijedna vrijednost
   ne moze pogoditi sve; uzeta je najcesca, a ostatak je ostao otvoren i
   prijavljen. */
.btn--lg.btn--cta {
  padding-left: 1.4875rem;           /* 23,8 */
  --btn-gap: 0.88125rem;                   /* 14,1 — s krugom 29 i razmakom 7 daje 50,1 */
}
.btn--sm.btn--cta {
  padding-left: 2.2rem;              /* 35,2 */
  --btn-gap: 2.7rem;                       /* 43,2 — s krugom 23 i razmakom 5,4 daje 71,6 */
}

/* Kartica povjerenja („Conosci il team"). Mjere iz PDF-a: pilula 210,9 x 43,
   natpis uvucen 22, do desnog ruba 65,4 (razmak 29,4 + krug 29 + 7).
   Ista brojka na 27 pojava kroz PDF-ove i na 25 dugmadi na sajtu, bez
   ijednog odstupanja. Tema je dugme ostavljala na `.btn--lg` (24 | 48), pa
   je bilo 15,3 px preusko na svakoj stranici koja ima karticu povjerenja. */
.trust__card-cta.btn--lg {
  padding-left: 1.375rem;            /* 22 */
  --btn-gap: 1.8375rem;                    /* 29,4 */
}

/* Uvlaka teksta u info-kartici, kad je izmjerena po sekciji (`card_pad_l`).
   Vrijednost donosi predlozak kao `--info-card-pad-l`, a klasu dodaje samo
   kad je polje postavljeno — sekcije bez mjere ovo pravilo ne vide.

   TEZINA, i zasto je bas ovoliko. `layout-a.css` se ucitava POSLIJE
   `components.css` i uvlaku postavlja precicom `padding` na
   `.sec__inner--1286 > .info-cards .info-cards__item` — TRI razreda. Kod
   jednake tezine odlucuje redoslijed, pa svako pravilo s tri razreda ovdje
   GUBI. Prvo izdanje je imalo `.sec .info-cards--uvucen .info-cards__item`,
   sto je tacno tri razreda, i pravilo nije radilo NISTA: polje je bilo
   posijano, varijabla ispisana u HTML-u, a `padding-left` je i dalje racunat
   na 64 px. Zato ovdje stoje i `.info-cards` i `.info-cards--uvucen` — cetiri
   razreda, koja nadjacaju tri bez obzira na redoslijed.

   Postavlja se SAMO `padding-left`, da gornja i donja uvlaka iz
   `layout-a.css` ostanu tacne.

   POD `min-width: 1024px` jer su i mjere u `layout-a.css` pod istom
   upitnicom; ispod nje kartica ima svoju uvlaku i mjera iz dizajna za 1512
   ondje ne vrijedi. */
@media (min-width: 1024px) {
  .sec .info-cards.info-cards--uvucen .info-cards__item { padding-left: var(--info-card-pad-l); }
}

/* Traka prve posjete. Mjere iz PDF-a: pilula 331,2 x 43, natpis uvucen 27,2,
   do desnog ruba 58,8 (razmak 22,8 + krug 29 + 7). Dvije pojave, obje iste.
   Na `.btn--lg` je izlazilo 14 px preusko. */
.prima__cta.btn--lg {
  padding-left: 1.7rem;              /* 27,2 */
  --btn-gap: 1.425rem;                     /* 22,8 */
}
/* Gornje mjere su izmjerene na pilulama TAMNE varijante („Prenota la prima
   visita gratuita", 331 x 43). Svijetla varijanta nosi „Prenota ora" i
   drugu pilulu: tabak, naslovnica, laboratorio, impianti i prezzi, svih pet
   isto — pilula 869..1046,5 (177,5), natpis 891,6..984,5, krug 1010,5..1039,5.
   Dakle uvlaka 22,6 i razmak natpis -> krug 26,0; do desnog ruba 7 kao i
   inace. S uvlakom 27,2 natpis je stajao 4,6 px desno.
   Mobilni dizajn istu pilulu crta s uvlakom 24 (Mobile HP: pilula 36..215,
   natpis 60..152,9) i istim razmakom 26, pa je 24 osnova, a 22,6 desktop. */
.sec--v-light .prima__cta.btn--lg {
  padding-left: 1.5rem;              /* 24 */
  --btn-gap: 1.625rem;                     /* 26 */
}
@media (min-width: 1024px) {
  .sec--v-light .prima__cta.btn--lg { padding-left: 1.4125rem; }   /* 22,6 */
}

/* Heroj. Mjere iz PDF-a: pilula 275,5 x 36,9, natpis uvucen 35,2, do desnog
   ruba 46,9 (razmak 18,5 + krug 23 + 5,4). Isto na svih 6 pojava, i tamo
   gdje sadrzaj kaze `cta_size` veliko i tamo gdje kaze malo — dakle heroj
   je uvijek mala obitelj, bez obzira na postavku. Zato se veze na obje
   velicine; `cta_size` na `04-landing-denti-fissi` i
   `landing-pazienti-italiani` i dalje pise veliko i to je za ispraviti u
   sadrzaju, ali dugme je od sada tocno i prije toga. */
.hero__cta.btn--lg,
.hero__cta.btn--sm {
  height: 2.30625rem;                /* 36,9 */
  padding-left: 2.2rem;              /* 35,2 */
  padding-right: 0.3375rem;          /* 5,4 */
  --btn-gap: 1.15625rem;                   /* 18,5 */
}

/* Podnozje, mjere iz PDF-a: pilula 977..1165,5, natpis 1014..1107,
   krug 1129,5..1158,5. Uvlaka 37 + natpis + razmak 22,5 + krug 29 + 7. */
.footer-col__cta.btn--lg {
  justify-content: flex-start;
  --btn-gap: 1.40625rem;                   /* 22,5 */
}

/* traka: 422x42, radijus 10, natpis 20, bez strelice */
.btn--bar {
  justify-content: center;
  width: 100%;
  max-width: 26.375rem;              /* 422 */
  height: 2.625rem;                  /* 42 */
  padding: 0 var(--sp-16);
  border-radius: var(--r-card);
  background: var(--btn-bg, var(--c-accent));
}
.btn--bar .btn__label { font-size: var(--fs-lead); }  /* 20 */

/* --- pomocne --- */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus {
  position: fixed !important;
  top: 1rem; left: 1rem;
  z-index: 100;
  width: auto; height: auto;
  clip-path: none;
  padding: var(--sp-12) var(--sp-16);
  background: var(--c-white);
  color: var(--c-black);
  border-radius: var(--r-card);
}
:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* DUGME NA USKOM EKRANU (≤ 1023 px).

   Na 1512 natpis stoji u jednom redu, kako je nacrtan u PDF-u. Na telefonu
   je raniji popravak pustio prelom (`white-space: normal`) da najduži natpis
   („Conosci Darko Slovša e i professionisti Smile", 413 px) ne razvuče traku
   u vodoravni skrol. Ali pilula je zadržala stalnu visinu 43 / 36,9, pa je
   drugi red natpisa izlazio iz nje — izmjereno na 390 px na svih 33
   stranica: „Prenota ora" u podnožju (natpis 91 x 45 u piluli od 43),
   „Prenota la prima visita gratuita", „Scopri il laboratorio interno",
   „Approfondisci il Digital Smile Design", „Registra la tua esperienza".

   Mobilni dizajn (Mobile HP.pdf) pilule crta s ISTIM razmacima kao desktop
   („Approfondisci" 35,2 | 43,3 | krug 23 | 5,4; „Scopri tutte le recensioni"
   23,8 | 14,1 | 29 | 7), dakle razmak natpis -> krug nije dio koji se na
   telefonu smije baciti bez potrebe. Redoslijed zato ide ovako:

     1. natpis stane s razmakom iz dizajna -> sve kao u dizajnu, jedan red;
     2. ne stane -> PRVO se skuplja razmak natpis -> krug (do 8 px,
        `--btn-gap-min`), natpis ostaje u jednom redu;
     3. ni to nije dosta (natpis je širi od ekrana) -> tek tada prelom, a
        pilula RASTE s natpisom (`height: auto` + `min-height`), pa natpis
        nikad ne izlazi iz nje.

   Korak 2 radi razmakničar: `::after` je treći element pilule (između natpisa
   i kruga, `order`), s osnovom `--btn-gap` i faktorom skupljanja 1000. Flex
   skuplja elemente srazmjerno faktoru puta osnova, pa razmakničar potroši
   svoje do `min-width` prije nego što natpis izgubi ijedan piksel. `gap`
   pilule je zato nula — isti razmak nosi razmakničar.

   Najmanji razmak je 8, ne 12 (nalaz GL-N02, 390 px). Sa 12 se „Prenota la
   prima visita gratuita" (245,2) u traci na Testimonianze lomio u dva reda
   u piluli od 318, iako je u njoj bilo 50 px praznog: 35,2 + 245,2 + 12 +
   23 + 5,4 = 320,8. Sa 8 staje (316,8), a uvlaka natpisa slijeva ostaje ona
   iz dizajna. */
@media (max-width: 1023px) {
  .btn {
    --btn-gap-min: .5rem;              /* 8 */
    max-width: 100%;
    gap: 0;
    column-gap: 0;
  }
  /* `width` uz `flex-basis` nije višak: širinu pilule „po sadržaju" preglednik
     računa iz ŠIRINE djece, ne iz osnove — bez nje je razmakničar u tom
     računu ulazio sa svojih 12 px, pilula je ispadala 10,5 px uža od
     dizajna, a natpis je stajao na rubu preloma (izmjereno: „Prenota ora"
     92,9 u prostoru od 92,9). */
  .btn::after {
    content: "";
    order: 1;
    flex: 0 1000 var(--btn-gap);
    width: var(--btn-gap);
    min-width: var(--btn-gap-min);
  }
  /* Natpis se NE skuplja (`flex-shrink: 0`): flex skuplja srazmjerno, pa bi
     i uz faktor 1000 na razmakničaru natpis izgubio djelić piksela i
     prelomio se — izmjereno na „Prenota la prima visita gratuita" (245,2 u
     piluli od 326, gdje staje s razmakom 17,6). Granicu mu daje `max-width`:
     sve što ostane kad razmakničar dođe do 8 px i krug uzme svoje; tek
     natpis širi od toga se lomi, unutar pilule. */
  .btn__label {
    order: 0;
    flex-shrink: 0;
    max-width: calc(100% - var(--btn-gap-min) - var(--btn-strelica, 1.8125rem));
    white-space: normal;
  }
  .btn__arrow { order: 2; }
  .btn--sm,
  .hero__cta.btn--lg { --btn-strelica: 1.4375rem; }   /* krug 23 */
  /* Pilula bez strelice (traka, poziv kao tekst) nema razmakničar. */
  .btn--bar,
  .hero__offer-cta.btn { --btn-strelica: calc(-1 * var(--btn-gap-min)); }
  .btn--bar::after,
  .hero__offer-cta.btn::after { content: none; }

  /* Korak 3: visina prati natpis. Najmanja visina je visina obitelji iz
     dizajna, pa jednoredno dugme ostaje tačno 43 odnosno 36,9. */
  .btn.btn--lg { height: auto; min-height: 2.6875rem; padding-block: .3125rem; }
  .btn.btn--sm,
  .hero__cta.btn--lg { height: auto; min-height: 2.30625rem; padding-block: .3125rem; }
}

/* M25 (Pragma, 30. 9. 2026): prozor s videom na stranici (sections.js),
   isti na cijelom sajtu. Okvir je u omjeru videa (`--vr` = širina / visina,
   iz `data-video-omjer`): uspravni 9:16 je uzak i visok, vodoravni 16:9
   širok; nikad veći od 92 % širine ni 86 % visine prozora. Dok je video
   otvoren, stranica ispod se ne skrola. Postoji tek na klik, pa mirovanje
   stranice ostaje isto. */
.smile-lb-otvoren { overflow: hidden; }
.smile-lightbox {
  width: 100vw; height: 100vh; height: 100dvh;
  max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: transparent;
  overflow: hidden;
  overscroll-behavior: contain;
}
.smile-lightbox[open] { display: grid; place-items: center; }
.smile-lightbox::backdrop { background: rgba(0, 0, 0, .88); }
.smile-lightbox__okvir {
  --vr: 1.7778;
  position: relative;
  width: min(92vw, calc(86vh * var(--vr)));
  width: min(92vw, calc(86dvh * var(--vr)));
  aspect-ratio: var(--vr);
  background: #000;
  border-radius: var(--r-card);
  overflow: hidden;
}
.smile-lightbox__okvir iframe,
.smile-lightbox__okvir video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* X 44 x 44 (dovoljno za prst), bijeli krug gore desno; crta se s dvije
   crte, bez fonta. Hover u boji hovera dugmadi (M04). */
.smile-lightbox__x {
  position: fixed; top: 1rem; right: 1rem; z-index: 1;
  width: 2.75rem; height: 2.75rem;
  padding: 0; border: 0; border-radius: 50%;
  background: var(--c-white);
  cursor: pointer;
  transition: background-color .2s ease;
}
.smile-lightbox__x::before,
.smile-lightbox__x::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 1.125rem; height: 2px; background: var(--c-bg);
  transform: translate(-50%, -50%) rotate(45deg);
}
.smile-lightbox__x::after { transform: translate(-50%, -50%) rotate(-45deg); }
@media (hover: hover) {
  .smile-lightbox__x:hover { background: var(--c-btn-hover); }
  .smile-lightbox__x:hover::before,
  .smile-lightbox__x:hover::after { background: var(--c-btn-hover-fg); }
}
.smile-lightbox__x:focus-visible { background: var(--c-btn-hover); }
.smile-lightbox__x:focus-visible::before,
.smile-lightbox__x:focus-visible::after { background: var(--c-btn-hover-fg); }