/* ==========================================================================
   Bloom — film „Zakazivanje za 20 sekundi“ (grana anim/motion).
   Osnovni komplet (okvir telefona, ekrani) je film.css i ne menja se; ovde su
   raspored sekcije (telefon + koraci, bez lepljenja za skrol), koraci 1–6 i
   ekrani ovog filma: početni ekran, usluge, termini, potvrda sa kartom koja se
   okreće, podsetnici i vlasnički rokovnik. Pokret vodi panel-motion.js (Motion).
   ========================================================================== */

/* ------------------------------------- Bočni meni: aktivna tačka filma pulsira */
@keyframes mo-dot-pulse{0%{box-shadow:0 0 0 3px var(--c-accent-soft),0 0 0 3px rgba(var(--c-accent-rgb),.45)}70%,100%{box-shadow:0 0 0 3px var(--c-accent-soft),0 0 0 11px rgba(var(--c-accent-rgb),0)}}
.sidenav__subitem[aria-current="true"] .n i{animation:mo-dot-pulse 2.6s ease-out infinite}
@media (prefers-reduced-motion:reduce){.sidenav__subitem[aria-current="true"] .n i{animation:none}}

/* ------------------------------------------- Stakleni panel zakucan u ekranu */
/* .film/.film__pin/.film__stage su u film.css; ovde je panel koji ih obavija: puni prostor ispod zaglavlja, stakleni,
   tekst tačke levo i telefon desno, traka napretka na dnu panela. */
/* hero na naslovnoj: prva sekcija posle sr-only h1, bez dodatnog razmaka i bez ulazne animacije strane
   (sekcija je zalepljena, a ulazna animacija bi pomerila merenje skrola) */
main>h1.sr-only+.section--film{padding-top:0}
html.js main>h1.sr-only+.section--film{animation:none}
.film{--steps:7}
.film__card.lift-lg{box-shadow:var(--glass-hi)} /* bez velike senke: zalepljeni sloj je seče na dnu i ostaje ravna tamna traka ispod panela */
.film__card{flex:1 1 auto;min-height:0;position:relative;display:flex;flex-direction:column;padding:clamp(18px,3vw,40px);border-radius:var(--r-xl);overflow:hidden}
.film__card .film__stage{flex:1 1 auto;min-height:0;padding:0 0 10px}
.film__card .film__prog{bottom:14px}
.film__scene .ph{--pw:min(300px,38svh)}
.ph__screen{cursor:grab}

/* -------------------------------------------- Početni ekran telefona */
.ph__app>.mo-home{position:absolute;inset:0;display:flex;flex-direction:column}
.mo-home{background:radial-gradient(110% 60% at 20% 0%,rgba(235,169,135,.38),transparent 60%),radial-gradient(80% 50% at 90% 90%,rgba(159,179,165,.32),transparent 60%),linear-gradient(180deg,#1b2926,#0f1514);padding:calc(var(--pw) * .2) .9em 0}
.mo-home__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1em .4em}
.mo-ico{display:flex;flex-direction:column;align-items:center;gap:.4em;font-size:.7em;font-weight:500;color:rgba(255,255,255,.92);text-align:center}
.mo-ico i{width:4em;height:4em;border-radius:1.15em;background:var(--c,#556);display:grid;place-items:center;font-style:normal;font-weight:800;font-size:1.15em;color:rgba(255,255,255,.9);box-shadow:inset 0 -2px 0 rgba(0,0,0,.18),0 8px 16px -10px rgba(0,0,0,.7)}
.mo-ico--bloom i{background:linear-gradient(145deg,#f3c6ab,#e39a74);color:#1a221f;font-family:var(--font-display);font-size:1.6em;font-weight:700}
.mo-home__dock{position:absolute;left:.7em;right:.7em;bottom:calc(var(--pw) * .07);display:flex;justify-content:space-around;padding:.7em .4em;border-radius:1.7em;background:rgba(255,255,255,.13)}
.mo-home__dock i{width:3.3em;height:3.3em;border-radius:1em;background:var(--c,#556);box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}

/* ------------------------------------------- Ekrani aplikacije klijenta */
.mo-logo{font-family:var(--font-display);font-weight:700;background:linear-gradient(145deg,#f3c6ab,#e39a74)}
.mo-foot{position:absolute;left:1.2em;right:1.2em;bottom:calc(var(--pw) * .09)}
.mo-svc{margin:0 -.6em;padding:.75em .6em;border-radius:.9em}
.mo-svc .avatar{border-radius:.7em;font-weight:800;color:#1a221f}
.mo-days{display:flex;gap:.4em;padding:0 1.2em .9em}
.mo-days span{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:.1em;padding:.5em 0;border-radius:.8em;background:rgba(255,255,255,.06);font-size:.8em;font-weight:600;opacity:.7}
.mo-days span b{font-size:1.25em}
.mo-days span.on{background:rgba(255,255,255,.14);opacity:1;box-shadow:inset 0 0 0 1.5px var(--c-accent)}
.mo-flip{position:relative;perspective:900px;margin:0 1.2em}
.mo-flip__in{position:relative;transform-style:preserve-3d}
.mo-face{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.mo-face--back{position:absolute;inset:0;transform:rotateY(180deg);display:flex;flex-direction:column;justify-content:center;gap:.35em;padding:1em;border-radius:1.2em;background:linear-gradient(145deg,#f3c6ab,#e39a74);color:#1a221f}
.mo-face--back b{font-size:1.6em;font-weight:700;letter-spacing:-.02em;font-family:var(--font-display)}
.mo-face--back small{font-size:.9em;opacity:.82}
.mo-sum{display:flex;justify-content:space-between;gap:.6em;font-size:.95em;padding:.45em 0;border-bottom:1px solid rgba(255,255,255,.07)}
.mo-sum:last-child{border-bottom:0}
.mo-sum small{opacity:.6}
.mo-sum b{font-weight:600;text-align:right}
.mo-btn{display:grid;place-items:center}
.mo-btn>span,.mo-btn>svg{grid-area:1/1}
.mo-btn svg{width:1.8em;height:1.8em;fill:none;stroke:#1a221f;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:0}

/* ------------------------------------------------- Šegrt: razgovor */
.mo-sg__ava{background:rgba(235,169,135,.18)}
.mo-sg__ava img{width:1.5em;height:1.5em}
.mo-chat{display:flex;flex-direction:column;gap:.6em;padding:0 1em 1em}
.mo-msg{align-self:flex-end;max-width:84%;padding:.6em .8em;border-radius:1.1em 1.1em .3em 1.1em;background:rgba(235,169,135,.24);font-size:.95em;line-height:1.3}
.mo-msg__photo{position:relative;overflow:hidden;display:block;width:9.5em;height:6.2em;margin-top:.5em;padding:.5em .6em;border-radius:.6em;background:linear-gradient(160deg,#efe7d8,#d6cbb6);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.mo-msg__photo i{display:block;height:.34em;margin:0 0 .5em;border-radius:2px;background:rgba(60,50,40,.42)}
.mo-msg__photo i:nth-child(1){width:55%}.mo-msg__photo i:nth-child(2){width:80%}.mo-msg__photo i:nth-child(3){width:68%}.mo-msg__photo i:nth-child(4){width:86%}.mo-msg__photo i:nth-child(5){width:60%}
.mo-msg__scan{position:absolute;left:0;right:0;top:0;height:2px;background:var(--c-accent);box-shadow:0 0 10px 2px rgba(235,169,135,.7);opacity:0}
.mo-reply-wrap{display:grid;justify-items:start}
.mo-reply-wrap>*{grid-area:1/1}
.mo-typing{align-self:flex-start;display:flex;gap:.32em;padding:.7em .9em;border-radius:1.1em 1.1em 1.1em .3em;background:rgba(255,255,255,.08)}
.mo-typing i{display:block;width:.48em;height:.48em;border-radius:50%;background:rgba(255,255,255,.72)}
.mo-reply{align-self:flex-start;max-width:94%;transform-origin:0 0;display:flex;flex-direction:column;gap:.5em;padding:.8em .9em;border-radius:1.1em 1.1em 1.1em .3em;background:#1e2527;font-size:.95em;line-height:1.3}
.mo-reply>b{font-weight:600}
.mo-reply__rows{display:flex;flex-direction:column;font-size:.9em;font-variant-numeric:tabular-nums}
.mo-reply__rows div{display:flex;justify-content:space-between;gap:.6em;padding:.3em 0;border-bottom:1px solid rgba(255,255,255,.07)}
.mo-reply__rows div span:last-child{opacity:.85}
.mo-reply__more{font-size:.78em;opacity:.6}
.mo-reply__foot{display:grid}
.mo-reply__foot>div{grid-area:1/1}
.mo-reply__btns{display:flex;gap:.5em}
.mo-reply__btns span{flex:1 1 0;text-align:center;padding:.55em .4em;border-radius:.8em;background:rgba(255,255,255,.1);font-weight:600;font-size:.9em}
.mo-reply__btns .on{background:var(--c-accent);color:#1a221f}
.mo-reply__done{display:flex;align-items:center;justify-content:center;padding:.55em .4em;border-radius:.8em;background:rgba(159,179,165,.18);color:var(--c-sage);font-weight:600;font-size:.9em;opacity:0}

/* ---------------------------------------------------- Vlasnički rokovnik */
.mo-avs{display:flex;gap:.3em;margin-top:.5em}
.mo-avs i{width:1.5em;height:1.5em;border-radius:50%;background:var(--c,#789);box-shadow:0 0 0 2px #2a3234;opacity:0}
.mo-done{position:absolute;left:1.2em;right:1.2em;bottom:1em;display:flex;align-items:center;justify-content:center;gap:.5em;padding:.7em;border-radius:1em;background:var(--c-sage);color:#14191b;font-weight:700;opacity:0}

/* ------------------------------------------------------------ Telefon ≤ 900px
   Panel puni ekran ispod zaglavlja: telefon gore, tekst tačke ispod u bloku stalne visine (tekst se menja, strana ne skače). */
@media (max-width:900px){
  /* visina panela je STALNA (svh = visina sa vidljivom trakom pregledača): dok se traka skuplja i širi ništa se ne skalira,
     pa nema ni skoka ni seckanja; kad se traka skloni, ispod panela ostane malo pozadine */
  .film__pin{padding-top:84px;padding-bottom:12px;height:100svh;transition:none}
  /* bez zamućenja stakla na telefonu: skupo je na Androidu, a pozadina iza je mek gradijent pa se razlika ne vidi */
  .film__card.glass{-webkit-backdrop-filter:none;backdrop-filter:none}
  .film__card{padding:12px 14px 16px;border-radius:24px}
  .film__card .film__stage{grid-template-rows:minmax(0,1fr) auto;gap:8px;padding:0 0 10px}
  /* telefon nikad ne izlazi iz svog polja: širina je najmanje od 250px i onoga što stane u visinu polja (cqh, prati animiranu visinu panela),
     pa se skalira na svakom telefonu i raste kad se traka pregledača skloni */
  .film__scene{container-type:size;min-height:0}
  .film__scene .ph{--pw:min(250px,calc((100cqh - 8px) * 9 / 19.3))}
  .film__text{min-height:150px;align-content:end} /* tekst na dnu panela, telefon u sredini ostatka */
  .chap{gap:6px}
  .chap h3{font-size:clamp(20px,5.6vw,24px)}
  .chap p{font-size:14px;line-height:1.45}
  .chap__list span{font-size:12px;padding:4px 9px}
  .film__card .film__prog{bottom:8px}
}
@media (max-width:900px) and (max-height:700px){
  .film__scene .ph{--pw:min(210px,calc((100cqh - 8px) * 9 / 19.3))}
  .chap p{display:none}
  .film__text{min-height:110px}
}