/* ============================================================
   ReservationSuccessModal — prozor posle uspešno poslate rezervacije.
   Otvara ga samo Bukza događaj ORDER_COMPLETED (vidi reservation-success.js).

   Stil nasleđuje tokene sajta (--bg, --surface-strong, --line, --cyan,
   --blue, --f-display…). Oni postoje i u index.html i u assets/blog.css,
   pa se ovaj fajl uključuje na obe familije strana bez dodatnog CSS-a.
   Sve mere su svoje (prefiks .pb-rsm) da ne diraju postojeću stranu.
   ============================================================ */

/* Bukza panel je position:fixed sa vrlo visokim slojem — moramo iznad njega.
   Ne diramo ništa unutar njegovog okvira, samo stojimo više. */
.pb-rsm-root{
  position:fixed; inset:0; z-index:2147483000;
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  background:rgba(3,6,16,.84);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  opacity:0; visibility:hidden;
  /* Vidljivost se prebacuje trenutno pri otvaranju, a pri zatvaranju tek
     kada se prelivanje završi. Bez ovoga karta ostane u grani koja je još
     „visibility:hidden“, pa .focus() na njoj ne uhvati — čitač ekrana i
     tastatura ostanu na strani iza prozora. */
  transition:opacity .28s var(--ease,cubic-bezier(.22,1,.36,1)),visibility 0s linear .28s;
  overscroll-behavior:contain;
}
.pb-rsm-root.is-open{
  opacity:1; visibility:visible;
  transition:opacity .28s var(--ease,cubic-bezier(.22,1,.36,1)),visibility 0s;
}

/* zaključavanje pozadinskog skrola */
html.pb-rsm-lock,body.pb-rsm-lock{overflow:hidden !important}

/* ---------------- karta ---------------- */
.pb-rsm{
  position:relative;
  width:min(620px,100%);
  max-height:calc(100svh - 32px);
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding:clamp(26px,2.8vw,36px) clamp(20px,2.8vw,38px) clamp(22px,2.4vw,30px);
  border-radius:26px;
  border:1px solid rgba(79,124,255,.3);
  background-color:#080d1d;
  background-image:radial-gradient(120% 70% at 50% -10%,rgba(79,124,255,.17),transparent 62%);
  box-shadow:0 40px 120px rgba(0,0,0,.72),0 0 90px rgba(79,124,255,.14),inset 0 1px 0 rgba(255,255,255,.05);
  color:var(--text,#f7f8fc);
  font-family:var(--f-body,'Manrope',system-ui,sans-serif);
  /* strana ispod nas sme da ima svoje poravnanje — mi krećemo od nule */
  text-align:left;
  transform:translateY(18px) scale(.985);
  transition:transform .34s var(--ease,cubic-bezier(.22,1,.36,1));
  scrollbar-width:thin; scrollbar-color:rgba(144,164,216,.35) transparent;
}
.pb-rsm-root.is-open .pb-rsm{transform:none}
.pb-rsm::-webkit-scrollbar{width:8px}
.pb-rsm::-webkit-scrollbar-thumb{background:rgba(144,164,216,.3); border-radius:8px}

@media (prefers-reduced-motion:reduce){
  .pb-rsm-root,.pb-rsm{transition:none}
  .pb-rsm{transform:none}
}

/* ---------------- zatvaranje ---------------- */
.pb-rsm-x{
  position:absolute; top:14px; right:14px; z-index:3;
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  border-radius:13px; border:1px solid transparent;
  background:transparent; color:var(--muted,#aeb5c9); cursor:pointer;
  transition:background .25s,color .25s,border-color .25s;
}
.pb-rsm-x:hover{background:rgba(255,255,255,.07); color:var(--text,#f7f8fc); border-color:var(--line,rgba(144,164,216,.22))}
.pb-rsm-x svg{width:22px; height:22px}

/* ---------------- zaglavlje ---------------- */
.pb-rsm-head{text-align:center; padding:0 34px}
.pb-rsm-mark{
  display:block; width:clamp(88px,12vw,116px); height:auto;
  margin:0 auto clamp(12px,1.4vw,18px);
  filter:drop-shadow(0 0 16px rgba(79,124,255,.5));
}
.pb-rsm-title{
  margin:0 0 12px; font-family:var(--f-display,'Figtree',system-ui,sans-serif);
  font-weight:800; letter-spacing:-.02em; line-height:1.15;
  font-size:clamp(23px,3.3vw,33px); color:#fff;
  text-wrap:balance;
}
.pb-rsm-sub{
  margin:0 auto; max-width:44ch;
  font-size:clamp(14.5px,1.5vw,16.5px); line-height:1.55;
  color:var(--muted,#aeb5c9);
  text-wrap:pretty;
}
.pb-rsm-chip{
  display:inline-flex; align-items:center; margin-top:clamp(13px,1.5vw,18px);
  padding:9px 20px; border-radius:999px;
  border:1px solid rgba(79,124,255,.45);
  background:rgba(79,124,255,.1);
  font-family:var(--f-display,'Figtree',system-ui,sans-serif);
  font-weight:800; font-size:15.5px; letter-spacing:.01em;
  color:#7fa8ff;
}

/* ---------------- detalji rezervacije ---------------- */
.pb-rsm-card{
  margin-top:clamp(18px,2.2vw,26px);
  border:1px solid var(--line-soft,rgba(144,164,216,.13));
  border-radius:20px;
  background:rgba(255,255,255,.022);
}
.pb-rsm-row{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:14px;
  padding:11px clamp(14px,1.7vw,20px);
  border-bottom:1px solid var(--line-soft,rgba(144,164,216,.13));
  min-height:64px;
}
.pb-rsm-row:last-child{border-bottom:0}
.pb-rsm-ic{
  width:44px; height:44px; flex:0 0 44px;
  display:flex; align-items:center; justify-content:center;
  border-radius:13px;
  border:1px solid rgba(79,124,255,.3);
  background:rgba(79,124,255,.08);
  color:#7fa8ff;
}
.pb-rsm-ic svg{width:21px; height:21px}
.pb-rsm-lbl{
  min-width:0; font-size:15.5px; line-height:1.35; color:var(--muted,#aeb5c9);
  overflow-wrap:anywhere;
}
.pb-rsm-val{
  min-width:0; text-align:right;
  font-family:var(--f-display,'Figtree',system-ui,sans-serif);
  font-weight:700; font-size:16px; line-height:1.35; color:#fff;
  overflow-wrap:anywhere;
}
/* red sa telefonom nosi i dugme „Pozovi“ */
.pb-rsm-row.is-phone{grid-template-columns:auto 1fr auto auto}
.pb-rsm-call{
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  height:48px; padding:0 18px; border-radius:14px;
  border:1px solid rgba(79,124,255,.45);
  background:rgba(79,124,255,.07);
  color:#cfe0ff; text-decoration:none;
  font-family:var(--f-display,'Figtree',system-ui,sans-serif);
  font-weight:700; font-size:15px;
  transition:background .25s,border-color .25s,color .25s;
}
.pb-rsm-call:hover{background:rgba(79,124,255,.16); border-color:rgba(79,124,255,.7); color:#fff}
.pb-rsm-call svg{width:18px; height:18px}

/* ---------------- servis pozivnica ---------------- */
.pb-rsm-inv{
  display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:clamp(14px,1.8vw,20px);
  margin-top:13px; padding:clamp(14px,1.6vw,18px);
  border:1px solid rgba(79,124,255,.26);
  border-radius:20px;
  background:linear-gradient(120deg,rgba(79,124,255,.11),rgba(55,223,255,.05) 62%,transparent);
}
.pb-rsm-inv-art{width:clamp(56px,7vw,72px); height:auto; flex:none}
.pb-rsm-inv-txt{min-width:0}
.pb-rsm-inv-t{
  margin:0 0 5px; font-family:var(--f-display,'Figtree',system-ui,sans-serif);
  font-weight:800; font-size:clamp(17px,2vw,20px); letter-spacing:-.01em; color:#fff;
}
.pb-rsm-inv-d{margin:0; font-size:14px; line-height:1.5; color:var(--muted,#aeb5c9); text-wrap:pretty}

/* ---------------- podnožje ---------------- */
.pb-rsm-foot{margin-top:clamp(16px,2vw,22px)}
.pb-rsm-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%; min-height:56px; padding:0 20px;
  border-radius:16px; border:1px solid var(--line,rgba(144,164,216,.22));
  background:rgba(255,255,255,.045); color:var(--text,#f7f8fc);
  font-family:var(--f-display,'Figtree',system-ui,sans-serif);
  font-weight:700; font-size:15.5px; letter-spacing:-.01em;
  cursor:pointer; white-space:nowrap;
  transition:background .25s,border-color .25s,transform .25s var(--ease,cubic-bezier(.22,1,.36,1));
}
.pb-rsm-btn:hover{background:rgba(255,255,255,.1); border-color:rgba(144,164,216,.42)}
.pb-rsm-btn:active{transform:translateY(1px)}
.pb-rsm-btn svg{width:19px; height:19px; flex:none}

/* jedina glavna radnja — zauzima ceo red */
.pb-rsm-ok{
  min-height:60px; font-size:17px;
  border-color:transparent;
  background:linear-gradient(96deg,#54c8ff,#4f7cff); color:#04101f;
  box-shadow:0 12px 34px rgba(79,124,255,.34);
}
.pb-rsm-ok:hover{background:linear-gradient(96deg,#63cdff,#5f88ff); box-shadow:0 18px 48px rgba(79,124,255,.5)}

/* dugme „Kreiraj pozivnicu“ u kartici pozivnica */
.pb-rsm-inv .pb-rsm-btn{
  width:auto; min-height:52px; padding:0 22px;
  border-color:rgba(79,124,255,.5); background:rgba(79,124,255,.1); color:#dce9ff;
}
.pb-rsm-inv .pb-rsm-btn:hover{background:rgba(79,124,255,.2); border-color:rgba(79,124,255,.8); color:#fff}

/* ---------------- fokus ---------------- */
.pb-rsm :focus-visible{outline:2px solid var(--cyan,#37dfff); outline-offset:2px}

/* ================= telefoni =================
   Ispod 600px karta postaje list zalepljen za dno ekrana: prst je bliže
   dugmadima, a visina se meri u svh da traka pregledača ne seče podnožje.
   Vrednost i natpis idu jedno ispod drugog — tako ni najduži natpis
   („Ukupan iznos rezervacije“) ne gura cenu izvan reda. */
@media (max-width:600px){
  .pb-rsm-root{align-items:flex-end; padding:0}
  .pb-rsm{
    width:100%; max-height:calc(100svh - 10px);
    border-radius:24px 24px 0 0;
    border-bottom:0;
    padding:26px 16px calc(20px + env(safe-area-inset-bottom,0px));
  }
  /* simetrično, da naslov stoji tačno u sredini; dugme „ד je
     position:absolute pa ne učestvuje u rasporedu */
  .pb-rsm-head{padding:0 6px}
  .pb-rsm-x{top:10px; right:8px}
  .pb-rsm-row{
    grid-template-columns:auto 1fr; gap:4px 12px;
    padding:12px 13px; min-height:0;
  }
  /* Svaka ćelija dobija izričit red i kolonu. Bez toga samostalno
     raspoređivanje ubaci dugme „Pozovi“ u drugu kolonu i izgura natpis
     iz reda — tekst se tada „razbeži“ i izađe izvan ekrana. */
  .pb-rsm-ic{grid-row:1/3; grid-column:1; align-self:center; width:42px; height:42px; flex-basis:42px}
  .pb-rsm-lbl{grid-row:1; grid-column:2; font-size:13.5px}
  .pb-rsm-val{grid-row:2; grid-column:2; text-align:left; font-size:16.5px}
  .pb-rsm-row.is-phone{grid-template-columns:auto 1fr auto}
  .pb-rsm-call{grid-row:1/3; grid-column:3; height:46px; padding:0 15px}

  .pb-rsm-inv{grid-template-columns:auto 1fr; gap:13px; padding:15px}
  .pb-rsm-inv .pb-rsm-btn{grid-column:1/-1; width:100%}
}

/* vrlo uski ekrani (320–380px): dugme „Pozovi“ ide u svoj red */
@media (max-width:380px){
  .pb-rsm-row.is-phone{grid-template-columns:auto 1fr}
  .pb-rsm-call{grid-row:3; grid-column:2; justify-content:center; margin-top:8px; width:100%}
}

/* niski ekrani u vodoravnom položaju — karta ostaje u sredini i skroluje */
@media (max-height:520px) and (min-width:601px){
  .pb-rsm{max-height:calc(100svh - 16px)}
}