/* ============================================================
   i18n.css — additive styles for R01 (WEBSITE_BILJANA_APPS_I18N_R01)
   Language selector + Business-apps pages + reusable screenshot lightbox
   Uses existing tokens from site.css. No existing rule is modified.
   ============================================================ */

/* ---------- LANGUAGE OVERRIDES for shared CSS-generated strings ---------- */
/* site.css sets .price-card.featured::before content "Preporuka" (SR). Override per language. */
html[lang="en"] .price-card.featured::before{content:"Recommended"}
html[lang="fr"] .price-card.featured::before{content:"Recommandé"}

/* ---------- LANGUAGE SELECTOR ---------- */
.lang-switch{
  display:inline-flex;align-items:stretch;gap:2px;
  margin-left:.6rem;padding:3px;border-radius:999px;
  background:var(--panel);border:1px solid var(--line-2);
  font-family:var(--font-mono);flex:0 0 auto;
}
.lang-opt{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;min-height:32px;padding:0 .5rem;
  border-radius:999px;font-size:.72rem;font-weight:600;letter-spacing:.06em;
  color:var(--text-2);text-decoration:none;line-height:1;
  transition:color var(--dur-1) var(--ease-out),background var(--dur-1) var(--ease-out);
}
.lang-opt:hover{color:var(--text);background:var(--panel-3)}
.lang-opt.is-current{background:var(--accent);color:var(--accent-deep)}
.lang-opt.is-current:hover{background:var(--accent-hi)}
.lang-opt:focus-visible{outline:2px solid var(--accent-hi);outline-offset:2px}

/* ---------- R02: ONE selector per viewport ----------
   The header pill is DESKTOP ONLY. At <=900px the nav collapses into the drawer
   (site.css:106 hides .nav-links / shows .nav-toggle), so the drawer owns the
   language choice and the header row stays: logo ............ close button. */
@media (max-width:900px){
  header .lang-switch{display:none}
}

/* ---------- R02: MOBILE SEGMENTED CONTROL ----------
   Every rule below is scoped .mm-lang .lang-switch .lang-opt (0,3,0) or deeper so it
   out-specifies site.css:102 `.mobile-menu a` (0,1,1), which otherwise imposes
   font-size:1.5rem + display font + padding + border-bottom on SR/EN/FR and makes
   the labels collide inside the pill. */
.mm-lang{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.6rem .9rem;
  margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.mm-lang-label{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);align-self:center;margin-right:0;flex:0 0 auto}
/* 2px padding + 36px segment + 1px border = 42px total — top of the 38–42px target */
.mm-lang .lang-switch{margin-left:0;display:inline-flex;align-items:stretch;gap:2px;
  padding:2px;border-radius:999px;background:var(--panel);border:1px solid var(--line-2);flex:0 0 auto}
.mm-lang .lang-switch .lang-opt{
  flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:36px;margin:0;padding:0 .5rem;
  font-family:var(--font-mono);font-size:.78rem;font-weight:700;letter-spacing:.04em;
  line-height:1;text-transform:uppercase;text-decoration:none;
  color:var(--text-2);background:transparent;border:0;border-radius:999px;
}
.mm-lang .lang-switch .lang-opt:hover{color:var(--text);background:var(--panel-3)}
/* active = filled pill + dark text + weight — a shape cue, not colour alone (aria-current carries it for AT) */
.mm-lang .lang-switch .lang-opt.is-current{background:var(--accent);color:var(--accent-deep);
  box-shadow:0 1px 6px rgba(247,168,27,.25)}
.mm-lang .lang-switch .lang-opt.is-current:hover{background:var(--accent-hi);color:var(--accent-deep)}
.mm-lang .lang-switch .lang-opt:focus-visible{outline:2px solid var(--accent-hi);outline-offset:2px}

/* ---------- R02: MOBILE CTA — contained, not an edge-to-edge amber bar ----------
   .mobile-menu is flex-column, so the CTA stretched to full width by default. */
.mobile-menu .nav-cta{
  align-self:center;width:86%;max-width:22rem;
  min-height:48px;margin:1.5rem 0 .2rem;padding:.85rem 1.1rem;
  justify-content:center;text-align:center;
  font-size:.82rem;letter-spacing:.02em;border-radius:6px;border-bottom:0;
}

/* Keep 44px segments even at 320 — a 40x36 segment reads as a circle, 44x36 reads as a pill.
   The capsule (142px) + "JEZIK"/"LANGUE" label still fits the 283px drawer content box. */
@media (max-width:360px){
  .lang-switch{margin-left:.35rem}
  .mm-lang{gap:.5rem}
  .mm-lang .lang-switch .lang-opt{padding:0 .35rem}
}

/* ---------- BUSINESS APPS: shared ---------- */
.ba-status{
  display:inline-flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;
  color:var(--text-2);
}
.ba-status .pd{width:8px;height:8px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px rgba(247,168,27,.15);flex:0 0 auto}

/* hub product grid */
.ba-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,1.6rem);margin-top:clamp(1.4rem,3vw,2.2rem)}
@media (max-width:900px){.ba-grid{grid-template-columns:1fr}}
.ba-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:clamp(1.2rem,2.4vw,1.7rem);overflow:hidden;
  transition:transform var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out)}
.ba-card:hover{transform:translateY(-4px);border-color:var(--line-2)}
.ba-card__name{font-family:var(--font-display);font-size:clamp(1.5rem,3.4vw,2rem);
  letter-spacing:.01em;line-height:1;margin:.2rem 0 .5rem}
.ba-card__desc{color:var(--silver);font-size:.98rem;line-height:1.5;flex:1}
.ba-card__tag{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent)}
.ba-card__link{display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;
  color:var(--text);font-weight:600;text-decoration:none}
.ba-card__link svg{width:18px;height:18px;transition:transform var(--dur-1) var(--ease-out)}
.ba-card__link:hover svg{transform:translateX(3px)}
.ba-card__link:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px}

/* product hero meta list */
.ba-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem 1.4rem;margin-top:1.2rem}
.ba-facts dt{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ba-facts dd{margin:.2rem 0 0;color:var(--text);font-size:.95rem}

/* honesty note (what it does / does not do yet) */
.ba-honesty{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.4vw,1.6rem);margin-top:clamp(1.2rem,3vw,1.8rem)}
@media (max-width:720px){.ba-honesty{grid-template-columns:1fr}}
.ba-honesty__col{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:clamp(1.1rem,2.2vw,1.5rem)}
.ba-honesty__col h3{font-size:1.05rem;margin:0 0 .7rem;display:flex;align-items:center;gap:.5rem}
.ba-honesty__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.ba-honesty__col li{position:relative;padding-left:1.5rem;color:var(--silver);font-size:.95rem;line-height:1.45}
.ba-honesty__col li::before{position:absolute;left:0;top:.05em;font-size:1rem}
.ba-honesty--yes li::before{content:"✓";color:var(--ok)}
.ba-honesty--soon li::before{content:"→";color:var(--muted)}

/* ---------- SCREENSHOT GALLERY + LIGHTBOX (reusable) ---------- */
.appshots{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:clamp(.8rem,2vw,1.2rem);margin-top:clamp(1.2rem,3vw,1.8rem)}
.appshot{
  margin:0;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  cursor:zoom-in;transition:transform var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out)}
.appshot:hover{transform:translateY(-3px);border-color:var(--line-2)}
.appshot button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.appshot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top center}
.appshot--phone img{aspect-ratio:9/16;object-fit:contain;background:#0b0d11}
.appshot figcaption{padding:.6rem .8rem;font-size:.85rem;color:var(--text-2);line-height:1.35}
.appshot__zoom{position:absolute}

.shotbox{position:fixed;inset:0;z-index:200;display:none;place-items:center;
  background:rgba(6,7,10,.9);padding:clamp(1rem,4vw,3rem)}
.shotbox[open],.shotbox.is-open{display:grid}
.shotbox__img{max-width:min(1200px,94vw);max-height:88vh;width:auto;height:auto;
  border-radius:10px;box-shadow:var(--shadow-lift);border:1px solid var(--line-2)}
.shotbox__cap{position:absolute;left:0;right:0;bottom:max(1rem,4vw);text-align:center;
  color:var(--text-2);font-size:.9rem;padding-inline:1rem}
.shotbox__close{position:absolute;top:max(1rem,3vw);right:max(1rem,3vw);
  width:48px;height:48px;border-radius:50%;border:1px solid var(--line-2);
  background:var(--panel);color:var(--text);display:grid;place-items:center;cursor:pointer}
.shotbox__close:hover{background:var(--panel-3)}
.shotbox__close:focus-visible{outline:2px solid var(--accent-hi);outline-offset:2px}
.shotbox__nav{position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:48px;border-radius:50%;border:1px solid var(--line-2);
  background:var(--panel);color:var(--text);display:grid;place-items:center;cursor:pointer}
.shotbox__nav:hover{background:var(--panel-3)}
.shotbox__nav:focus-visible{outline:2px solid var(--accent-hi);outline-offset:2px}
.shotbox__prev{left:max(.6rem,2vw)}.shotbox__next{right:max(.6rem,2vw)}
@media (max-width:560px){.shotbox__nav{width:42px;height:42px}}

/* ---------- BILJANA GALLERY (editorial, icons) ---------- */
.bilj-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:clamp(.6rem,1.6vw,1rem);margin-top:clamp(1.2rem,3vw,1.8rem)}
.bilj-gallery .appshot img{aspect-ratio:3/4;object-fit:cover}

/* ---------- PILOT / CONTACT MINI-FORM (honest, no server claim) ---------- */
.pilot-form{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:clamp(1.3rem,3vw,2rem);margin-top:clamp(1.2rem,3vw,1.8rem);max-width:44rem}
.pilot-form .fld{margin-bottom:1rem}
.pilot-form label{display:block;font-size:.85rem;color:var(--text-2);margin-bottom:.35rem}
.pilot-form input,.pilot-form textarea{width:100%;padding:.7rem .85rem;border-radius:10px;
  background:var(--bg-2);border:1px solid var(--line-2);color:var(--text);font:inherit}
.pilot-form input:focus,.pilot-form textarea:focus{outline:2px solid var(--accent-hi);outline-offset:1px;border-color:var(--accent)}
.pilot-form .err{color:#ff8f8f;font-size:.82rem;margin-top:.3rem;min-height:1em}
.pilot-note{font-size:.82rem;color:var(--muted);margin-top:.6rem}