/* ==========================================================================
   Zdravko.ai — Baza lijekova v2 (sandbox redesign)
   Novi frontend za bazu lijekova. Ne dira postojeći assets/drugdb.css.
   ========================================================================== */

:root{
  --bl2-ink: #0c1c33;
  --bl2-hero-1: #04211d;
  --bl2-hero-2: #0a4a42;
  --bl2-green-dark: #075E54;
  --bl2-green-700: #0b6d62;
  --bl2-green: #128C7E;
  --bl2-green-soft: rgba(18,140,126,.12);
  --bl2-teal: #14b8a6;
  --bl2-teal-light: #5eead4;
  --bl2-mint-50: #eefaf7;
  --bl2-mint-100: #ddf5ef;
  --bl2-paper: #fafbfb;
  --bl2-panel: #ffffff;
  --bl2-text: #0b1f1c;
  --bl2-muted: #5b6b76;
  --bl2-muted-2: #7c8b93;
  --bl2-line: rgba(15,60,52,.14);
  --bl2-line-soft: rgba(15,60,52,.08);
  --bl2-shadow-sm: 0 2px 8px rgba(6,32,29,.05);
  --bl2-shadow: 0 6px 18px rgba(6,32,29,.07);
  --bl2-shadow-lg: 0 12px 32px rgba(4,33,29,.10);
  --bl2-radius-sm: 12px;
  --bl2-radius: 16px;
  --bl2-radius-lg: 24px;
  --bl2-radius-pill: 999px;
  --bl2-maxw: 1900px;
  --bl2-topbar-h: 72px;
}

/* Reset scoped to this page only */
body.bl2-page{
  background: var(--bl2-paper);
  color: var(--bl2-text);
}
body.bl2-page *{ box-sizing: border-box; }
body.bl2-page img{ max-width: 100%; display: block; }
body.bl2-page a{ color: inherit; }
body.bl2-page button{ font-family: inherit; text-align: left; }

.bl2-shell{
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.bl2-visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Topbar — reuses site-wide .topbar sizing/position (sticky, dark green)
   from app.css, adds a desktop search field + inline nav + Alati/account menus.
   -------------------------------------------------------------------------- */
.bl2-topbar{
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--bl2-topbar-h);
  background:
    radial-gradient(1100px 260px at 22% -40%, rgba(94,234,212,.16), transparent 65%),
    linear-gradient(180deg, #023f3b 0%, var(--bl2-green-dark) 100%);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 2px 10px rgba(4,33,29,.08);
}
.bl2-topbar-inner{
  height: var(--bl2-topbar-h);
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 clamp(20px, 2.4vw, 40px);
  max-width: 1900px;
  margin: 0 auto;
}
.bl2-topbar-left{
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.bl2-topbar-brand{
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: #fff;
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -.5px;
  white-space: nowrap;
}
.bl2-topbar-brand img{
  width: 52px; height: 52px;
  object-fit: contain;
  flex: 0 0 auto;
}
.bl2-topbar-brand:hover{ filter: brightness(1.04); }

.bl2-topbar-search{
  display: none;
  flex: 0 1 480px;
  min-width: 0;
  max-width: 560px;
  margin-left: auto;
  position: relative;
}
.bl2-topbar-search input{
  width: 100%;
  height: 50px;
  line-height: 50px;
  border-radius: 17px;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(6,42,38,.32);
  color: #fff;
  padding: 0 78px 0 18px;
  font-size: .94rem;
  outline: none;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.bl2-topbar-search input::placeholder{ color: rgba(255,255,255,.6); }
.bl2-topbar-search input:focus{
  background: rgba(6,42,38,.5);
  border-color: rgba(94,234,212,.55);
  box-shadow: 0 0 0 3px rgba(94,234,212,.16);
}
.bl2-topbar-search-icon{
  position: absolute;
  left: 15px; top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,.75);
  pointer-events: none;
  display: flex;
}
.bl2-topbar-search-icon svg{ width: 18px; height: 18px; }
.bl2-topbar-search .bl2-topbar-search-submit{
  position: absolute;
  right: 5px; top: 5px; bottom: 5px;
  width: 36px;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.88);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.bl2-topbar-search .bl2-search-clear{
  right: 44px;
  width: 26px; height: 26px;
  background: rgba(255,255,255,.16);
  color: rgba(255,255,255,.85);
  font-size: 1rem;
}
.bl2-topbar-search .bl2-search-clear:hover{ background: rgba(255,255,255,.26); }
.bl2-topbar-search .bl2-topbar-search-submit:hover{ background: rgba(255,255,255,.14); }

.bl2-topbar-nav{
  display: none;
  align-items: center;
  gap: 20px;
  flex: 0 0 auto;
  white-space: nowrap;
}
.bl2-topbar-nav-link,
.bl2-topbar-ai-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 16px;
  border-radius: 15px;
  font-size: .93rem;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  text-decoration: none;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.bl2-topbar-nav-link:hover,
.bl2-topbar-ai-link:hover{
  background: rgba(255,255,255,.12);
  color: #fff;
}
.bl2-topbar-nav-link.is-active{
  height: 46px;
  padding: 0 20px;
  border-radius: 14px;
  background: rgba(94,234,212,.16);
  color: #fff;
  border-color: rgba(94,234,212,.4);
  box-shadow: inset 0 0 0 1px rgba(94,234,212,.18);
}
.bl2-topbar-nav-link svg,
.bl2-topbar-ai-link svg{ width: 18px; height: 18px; flex: 0 0 auto; }
.bl2-topbar-ai-link .bl2-caret{ width: 10px; height: 10px; transition: transform .15s ease; }
.bl2-topbar-ai-link{ display: none; }
.bl2-ai-wrap{ position: relative; display: none; }
.bl2-ai-wrap.is-open .bl2-caret{ transform: rotate(180deg); }
.bl2-ai-wrap .bl2-dropdown{ left: 0; right: auto; min-width: 250px; }
@media (min-width: 1180px){
  .bl2-ai-wrap{ display: block; }
  .bl2-topbar-ai-link{ display: inline-flex; }
}

/* "AI chat" gumb odmah do loga — vidljiv samo na desktopu (>=1180px, isto
   kao search/nav), diskretno naglašen zelenom nijansom RAZLIČITOM od
   teal-a koji koristi .is-active nav-link (da se jasno razlikuje od
   "aktivnog" stanja), uz isti glass/blur recept kao hamburger/Prijava. */
.bl2-topbar-ai-btn{
  display: none;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 16px;
  border-radius: 13px;
  font-size: .88rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background: rgba(18,140,126,.22);
  border: 1px solid rgba(18,140,126,.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background .15s ease;
}
.bl2-topbar-ai-btn:hover{ background: rgba(18,140,126,.32); text-decoration: none; color: #fff; }
.bl2-topbar-ai-btn svg{ width: 16px; height: 16px; flex: 0 0 auto; }

/* Diskretni vertikalni separator između grupa u topbaru — samo desktop. */
.bl2-topbar-sep{
  display: none;
  width: 1px;
  height: 26px;
  background: rgba(255,255,255,.16);
  flex: 0 0 auto;
}
@media (min-width: 1180px){
  .bl2-topbar-ai-btn{ display: inline-flex; }
  .bl2-topbar-sep{ display: block; }
}

.bl2-topbar-right{
  display: flex;
  align-items: center;
  gap: 11px;
  flex: 0 0 auto;
}
@media (max-width: 1179.98px){
  /* Na mobitelu su search/nav/AI-link skriveni (display:none), pa njihov
     margin-left:auto ne djeluje - topbar-right ostaje jedina vidljiva
     grupa nakon loga i treba VLASTITI auto-margin da se gurne na desni
     rub (inače hamburger ispadne odmah do loga, bez razmaka). Na desktopu
     ovo NE smije biti postavljeno - ondje margin-left:auto ide na search
     polje, da search+nav+separator+topbar-right teku zajedno bez razmaka
     između njih (v. .bl2-topbar-search). */
  .bl2-topbar-right{ margin-left: auto; }
}

.bl2-icon-btn{
  width: 46px; height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background .15s ease;
}
.bl2-icon-btn:hover{ background: rgba(255,255,255,.14); }
.bl2-icon-btn svg{ width: 19px; height: 19px; }

/* Jedan hamburger/drawer na svim širinama — .bl2-drawer-toggle (bl2Drawer,
   isti dizajn kao na mobitelu). Generički AppShell::drawer() (appShellDrawer)
   ostaje u markupu radi minimalnog diffa, ali se više nigdje ne otvara. */
.bl2-menu-btn-desktop{ display: none; }
.bl2-drawer-toggle{ display: inline-flex; }
.bl2-account-wrap{ position: relative; display: none; }
.bl2-account-btn{
  display: inline-flex;
  align-items: center;
  height: 46px;
  gap: 8px;
  padding: 0 16px 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  font-weight: 700;
  font-size: .88rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease;
}
.bl2-account-btn:hover{ background: rgba(255,255,255,.14); }
.bl2-account-btn svg{ width: 17px; height: 17px; }
.bl2-account-btn .bl2-caret{ width: 10px; height: 10px; transition: transform .15s ease; }
.bl2-account-wrap.is-open .bl2-account-btn .bl2-caret{ transform: rotate(180deg); }

.bl2-dropdown{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 230px;
  background: var(--bl2-panel);
  color: var(--bl2-text);
  border-radius: var(--bl2-radius);
  box-shadow: var(--bl2-shadow-lg);
  border: 1px solid var(--bl2-line);
  padding: 8px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
  z-index: 80;
}
.bl2-dropdown.is-open{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.bl2-dropdown-item{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--bl2-text);
  font-size: .87rem;
  font-weight: 650;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.bl2-dropdown-item:hover{ background: var(--bl2-mint-50); }
.bl2-dropdown-item svg{ width: 16px; height: 16px; color: var(--bl2-green); flex: 0 0 auto; }
.bl2-dropdown-item.bl2-dropdown-danger{ color: #b42318; }
.bl2-dropdown-item.bl2-dropdown-danger svg{ color: #d92d20; }
.bl2-dropdown-item.bl2-dropdown-danger:hover{ background: #fff1f0; }
.bl2-dropdown-item small{
  display: block;
  font-weight: 500;
  color: var(--bl2-muted);
  font-size: .76rem;
  margin-top: 1px;
}
.bl2-dropdown-sep{
  height: 1px;
  background: var(--bl2-line);
  margin: 6px 4px;
}
.bl2-dropdown-email{
  padding: 6px 10px 10px;
  font-size: .78rem;
  color: var(--bl2-muted);
  border-bottom: 1px solid var(--bl2-line);
  margin-bottom: 6px;
  word-break: break-all;
}

@media (min-width: 1180px){
  .bl2-topbar-search{ display: flex; min-width: 160px; }
  .bl2-topbar-nav{ display: flex; }
  .bl2-account-wrap{ display: block; }
  .bl2-topbar-hide-desktop{ display: none !important; }
}
/* Medium desktop: tighten gaps/padding before letting the search field
   get squeezed too thin (search shrinks first, then spacing, per brief). */
@media (min-width: 1180px) and (max-width: 1599.98px){
  .bl2-topbar-inner{ gap: 16px; }
  .bl2-topbar-nav{ gap: 8px; }
  .bl2-topbar-nav-link{ padding: 0 12px; font-size: .89rem; }
  .bl2-topbar-nav-link.is-active{ padding: 0 16px; }
}
/* Below 1360px there still isn't room for all five nav links plus a usable
   search box — drop the least-critical "Zamjene" link (last resort, per brief). */
@media (min-width: 1180px) and (max-width: 1359.98px){
  .bl2-topbar-nav-link[data-bl2-nav-optional]{ display: none; }
}
@media (max-width: 1179.98px){
  .bl2-topbar-hide-mobile{ display: none !important; }
}
/* Mobile header: compact but legible — logo + hamburger, sized per spec
   (76-84px height, 36-40px logo, 24-26px brand text, 44-48px hamburger). */
@media (max-width: 640px){
  :root{ --bl2-topbar-h: 56px; }
  .bl2-topbar-inner{ padding: 0 16px; gap: 10px; }
  .bl2-topbar-brand{ font-size: 1.3rem; gap: 8px; line-height: 1; }
  .bl2-topbar-brand img{ width: 39px; height: 39px; }
  .bl2-icon-btn{ width: 38px; height: 38px; background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.16); box-shadow: none; }
  .bl2-icon-btn svg{ width: 19px; height: 19px; }
}

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */
.bl2-crumbs{
  max-width: var(--bl2-maxw);
  width: 100%;
  margin: 0 auto;
  padding: 14px clamp(20px, 2.4vw, 40px) 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: .87rem;
  color: var(--bl2-muted);
  text-align: left;
  line-height: 1.5;
}
body.bl2-page .bl2-crumbs a{
  color: var(--bl2-green-700);
  text-decoration: none;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
body.bl2-page .bl2-crumbs a:hover{ text-decoration: underline; color: var(--bl2-green); }
.bl2-crumbs svg{ width: 15px; height: 15px; }
.bl2-crumbs-sep{ color: var(--bl2-green); opacity: .55; display: inline-flex; }
.bl2-crumbs-current{
  color: var(--bl2-text);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 46vw;
}
@media (max-width: 480px){
  .bl2-crumbs{ flex-wrap: nowrap; gap: 5px; }
  .bl2-crumbs-current{ max-width: 34vw; }
}

/* --------------------------------------------------------------------------
   Main container
   -------------------------------------------------------------------------- */
.bl2-main{
  flex: 1;
  width: 100%;
  max-width: var(--bl2-maxw);
  margin: 0 auto;
  padding: 10px clamp(20px, 2.4vw, 40px) 72px;
}

.bl2-card{
  background: var(--bl2-panel);
  border: 1px solid var(--bl2-line);
  border-radius: var(--bl2-radius);
  box-shadow: var(--bl2-shadow-sm);
}

.bl2-disclaimer{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--bl2-mint-50);
  border: 1px solid rgba(18,140,126,.16);
  border-radius: var(--bl2-radius);
  padding: 16px 20px;
  font-size: .87rem;
  line-height: 1.5;
  color: var(--bl2-muted);
}
.bl2-disclaimer svg{ width: 18px; height: 18px; color: var(--bl2-green); flex: 0 0 auto; margin-top: 1px; }
.bl2-disclaimer strong{ color: var(--bl2-text); }

/* ==========================================================================
   HOME / LANDING STATE
   ========================================================================== */
/* Mobile section order: Brzi alati (quick-tools, normally in the desktop
   sidebar) needs to appear right after hero+search, ahead of "Najčešće
   pretrage" — .bl2-home-main/.bl2-home-rail are plain blocks below the
   1180px desktop breakpoint, so display:contents promotes their children
   to be direct, orderable siblings within .bl2-home-layout. */
.bl2-home-layout{ display: flex; flex-direction: column; gap: 20px; }
.bl2-home-main, .bl2-home-rail{ display: contents; }
.bl2-home-layout .bl2-hero{ order: 1; }
.bl2-home-layout .bl2-search-card{ order: 2; }
.bl2-home-layout .bl2-quick-tools{ order: 3; }
.bl2-home-layout .bl2-trending-categories{ order: 4; }
.bl2-home-layout .bl2-what-search{ order: 5; }
.bl2-home-layout .bl2-disclaimer{ order: 6; }

/* Na mobitelu izbačeni "Najčešće pretrage" (samo taj dio - naslov+chipovi,
   "Pretražujte prema kategoriji" u istoj kartici ostaje) i cijela "Što
   možete pretraživati" kartica - pojednostavljen mobilni prikaz. */
@media (max-width: 1179.98px){
  .bl2-trending-categories .bl2-section-title:not(.bl2-section-title-cats),
  .bl2-trending-categories .bl2-trending-chips{
    display: none;
  }
  body.bl2-page .bl2-section-title-cats{ margin-top: 0; padding-top: 0; border-top: none; }
  .bl2-what-search{ display: none; }
  /* .bl2-search-card i .bl2-quick-tools imaju vlastiti margin-bottom:20px
     (koristan im je kao samostojećim elementima / na desktopu prije
     display:contents flatteninga), ali kad je roditelj .bl2-home-layout
     flex s gap:20px (mobitel/tablet), taj se margin ZBRAJA s gapom = 40px
     razmak nasuprot 20px kod kartica koje nemaju vlastiti margin. Reset na
     0 za SVU (unučad) djecu home-main/home-rail da razmak bude ujednačen,
     oslanjajući se samo na roditeljev gap. */
  body.bl2-page .bl2-home-main > *,
  body.bl2-page .bl2-home-rail > *{
    margin-bottom: 0;
  }
}

.bl2-hero{
  position: relative;
  padding: 22px 0 14px;
  min-height: 110px;
}
.bl2-hero-kicker{
  display: none;
}
.bl2-hero-glow{
  position: absolute;
  top: -40px;
  right: clamp(-10px, 4vw, 40px);
  width: clamp(180px, 18vw, 280px);
  height: clamp(180px, 18vw, 280px);
  background: radial-gradient(circle at 55% 45%, rgba(20,184,166,.22), rgba(20,184,166,.08) 45%, transparent 70%);
  z-index: -2;
  pointer-events: none;
  filter: blur(6px);
}
.bl2-hero-text{ position: relative; z-index: 2; max-width: 620px; }
.bl2-hero .bl2-hero-title{
  font-size: clamp(2.2rem, 5.4vw, 3.6rem);
  font-weight: 750;
  letter-spacing: -.5px;
  color: var(--bl2-ink);
  margin: 0 0 12px;
  line-height: 1.06;
  text-shadow: none;
}
.bl2-hero-illustration{
  position: absolute;
  top: -8px;
  right: clamp(6px, 4.5vw, 74px);
  width: clamp(90px, 9vw, 136px);
  height: auto;
  z-index: -1;
  pointer-events: none;
  filter: drop-shadow(0 3px 5px rgba(6,32,29,.05));
}
.bl2-hero-sub{
  font-size: 1.12rem;
  color: var(--bl2-muted);
  max-width: 580px;
  margin: 0 0 4px;
  line-height: 1.5;
}
@media (max-width: 720px){
  .bl2-hero{ padding: 14px 0 6px; position: relative; }
  .bl2-hero-glow{ display: none; }
  body.bl2-page .bl2-hero-illustration{ display: none; }
  .bl2-hero-text{ max-width: none; padding-right: 0; text-align: center; margin: 0 auto; }
  .bl2-hero .bl2-hero-title{ font-size: 2.1rem; }
  .bl2-hero-sub{ font-size: .98rem; margin-left: auto; margin-right: auto; }
}
@media (max-width: 360px){
  body.bl2-page .bl2-hero-illustration{ display: none; }
  .bl2-hero-text{ padding-right: 0; }
}

.bl2-search-card{
  padding: 22px;
  margin-bottom: 20px;
}
.bl2-search-row{
  display: flex;
  align-items: stretch;
  gap: 0;
  position: relative;
  background: #fff;
  border: 1.5px solid var(--bl2-line);
  border-radius: 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.bl2-search-row:focus-within{
  border-color: var(--bl2-teal);
  box-shadow: 0 0 0 4px rgba(20,184,166,.14);
}
.bl2-search-field{
  position: relative;
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  align-items: center;
}
.bl2-search-field .bl2-search-glyph{
  position: absolute;
  left: 18px; top: 50%;
  transform: translateY(-50%);
  color: var(--bl2-muted-2);
  display: flex;
}
.bl2-search-field .bl2-search-glyph svg{
  width: 19px; height: 19px;
}
.bl2-search-field input{
  width: 100%;
  height: 58px;
  line-height: 58px;
  border: none;
  background: transparent;
  padding: 0 20px 0 50px;
  font-size: 1.02rem;
  color: var(--bl2-text);
  outline: none;
}
.bl2-search-field input::placeholder{ color: var(--bl2-muted-2); }
.bl2-search-clear{
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--bl2-line-soft);
  color: var(--bl2-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
}
.bl2-search-clear.is-visible{ display: flex; }
.bl2-search-submit{
  flex: 0 0 auto;
  align-self: center;
  height: 50px;
  margin: 0 5px;
  min-width: 138px;
  padding: 0 26px;
  border-radius: 12px;
  border: none;
  background: var(--bl2-green-700);
  color: #fff;
  font-weight: 700;
  font-size: .96rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(11,109,98,.16);
  white-space: nowrap;
  transition: background .15s ease, box-shadow .15s ease, transform .12s ease;
}
.bl2-search-submit:hover{ background: var(--bl2-green-dark); box-shadow: 0 3px 8px rgba(11,109,98,.2); }
.bl2-search-submit:active{ transform: translateY(1px); }
.bl2-search-submit svg{ width: 17px; height: 17px; }
.bl2-search-examples-label{
  margin-top: 16px;
  font-size: .92rem;
  color: var(--bl2-muted);
  font-weight: 600;
}
.bl2-search-examples-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
body.bl2-page .bl2-example-chip{
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: var(--bl2-radius-pill);
  background: var(--bl2-mint-50);
  color: var(--bl2-green-700);
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease;
}
body.bl2-page .bl2-example-chip:hover{ background: var(--bl2-mint-100); border-color: rgba(18,140,126,.25); text-decoration: none; }

/* live autocomplete dropdown, shared between home + results search bars */
.bl2-autocomplete{
  position: absolute;
  left: 0; right: 0; top: calc(100% + 8px);
  background: #fff;
  border: 1px solid var(--bl2-line);
  border-radius: var(--bl2-radius);
  box-shadow: var(--bl2-shadow);
  z-index: 40;
  max-height: 360px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px;
}
.bl2-autocomplete[hidden]{ display: none; }
.bl2-ac-item{
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  padding: 10px 11px;
  border-radius: 12px;
  cursor: pointer;
}
.bl2-ac-item:hover, .bl2-ac-item.is-active{ background: var(--bl2-mint-50); }
.bl2-ac-icon{
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--bl2-mint-100);
  color: var(--bl2-green-700);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.bl2-ac-icon svg{ width: 17px; height: 17px; }
.bl2-ac-text{
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.bl2-ac-title{
  display: block;
  font-size: .89rem;
  font-weight: 650;
  color: var(--bl2-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bl2-ac-sub{
  display: block;
  font-size: .78rem;
  color: var(--bl2-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bl2-ac-empty{
  padding: 16px 12px;
  font-size: .86rem;
  color: var(--bl2-muted);
  text-align: center;
}

.bl2-section-title{
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--bl2-ink);
  margin: 0 0 16px;
}
.bl2-section-title svg{ width: 19px; height: 19px; color: var(--bl2-green); }

.bl2-quick-tools{
  padding: 20px;
  margin-bottom: 20px;
}
.bl2-rail-filters .bl2-quick-tools{
  background: linear-gradient(180deg, var(--bl2-mint-50), #fff 65%);
  border-color: rgba(18,140,126,.16);
}
.bl2-quick-tools-list{
  display: grid;
  gap: 8px;
}
.bl2-quick-tool{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 16px;
  border-radius: var(--bl2-radius-sm);
  border: 1px solid var(--bl2-line);
  background: #fff;
  text-decoration: none;
  color: var(--bl2-text);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.bl2-quick-tool:hover{ border-color: rgba(18,140,126,.4); background: var(--bl2-mint-50); }
.bl2-quick-tool-icon{
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--bl2-mint-50);
  color: var(--bl2-green-700);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.bl2-quick-tool-icon svg{ width: 22px; height: 22px; }
.bl2-quick-tool-body{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; text-align: left; }
.bl2-quick-tool-title{ display: block; font-weight: 700; font-size: .95rem; line-height: 1.3; color: var(--bl2-green-700); }
.bl2-quick-tool-sub{ display: block; font-size: .84rem; color: var(--bl2-muted); line-height: 1.4; }
.bl2-quick-tool-arrow{ color: var(--bl2-muted-2); flex: 0 0 auto; align-self: center; }
.bl2-quick-tool-arrow svg{ width: 17px; height: 17px; }

.bl2-grid-2{
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
  margin-bottom: 18px;
}
.bl2-trending-categories{ padding: 22px; }
.bl2-section-title-cats{ margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--bl2-line); }
.bl2-disclaimer-title{ font-weight: 800; color: var(--bl2-ink); margin-bottom: 3px; font-size: .92rem; }

.bl2-trending{ padding: 22px; }
.bl2-trending-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bl2-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 18px;
  border-radius: var(--bl2-radius-pill);
  border: 1px solid var(--bl2-line);
  background: #fff;
  color: var(--bl2-text);
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.bl2-chip:hover{ border-color: rgba(18,140,126,.45); background: var(--bl2-mint-50); }
.bl2-chip svg{ width: 15px; height: 15px; color: var(--bl2-muted-2); flex: 0 0 auto; }

.bl2-categories{ padding: 22px; }
.bl2-categories-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 380px){
  .bl2-categories-grid{ grid-template-columns: 1fr; }
}
.bl2-category-tile{
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px;
  border-radius: var(--bl2-radius-sm);
  border: 1px solid var(--bl2-line);
  background: #fff;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.bl2-category-tile:hover{ border-color: rgba(18,140,126,.4); background: var(--bl2-mint-50); box-shadow: var(--bl2-shadow-sm); }
.bl2-category-icon{
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--bl2-mint-100);
  color: var(--bl2-green-700);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.bl2-category-icon svg{ width: 21px; height: 21px; }
.bl2-category-body{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bl2-category-title{ display: block; font-weight: 700; font-size: .92rem; line-height: 1.3; }
.bl2-category-sub{ display: block; font-size: .8rem; color: var(--bl2-muted); line-height: 1.35; }

@media (max-width: 620px){
  .bl2-trending, .bl2-categories, .bl2-what-search, .bl2-howto{ padding: 16px; }
  .bl2-chip{ min-height: 40px; padding: 0 14px; font-size: .85rem; }
  .bl2-chip svg{ width: 14px; height: 14px; }
  .bl2-category-tile{ gap: 10px; padding: 12px; }
  .bl2-category-icon{ width: 36px; height: 36px; border-radius: 10px; }
  .bl2-category-icon svg{ width: 17px; height: 17px; }
  .bl2-category-title{ font-size: .87rem; }
  .bl2-category-sub{ font-size: .76rem; }
}

.bl2-what-search{ padding: 22px; }
.bl2-what-list{ display: grid; gap: 18px; }
.bl2-what-item{ display: flex; gap: 13px; align-items: flex-start; }
.bl2-what-icon{
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--bl2-mint-50);
  color: var(--bl2-green-700);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.bl2-what-icon svg{ width: 18px; height: 18px; }
.bl2-what-body{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bl2-what-title{ display: block; font-weight: 750; font-size: .92rem; line-height: 1.3; color: var(--bl2-ink); }
.bl2-what-sub{ display: block; font-size: .83rem; color: var(--bl2-muted); line-height: 1.45; }

.bl2-howto{ padding: 22px; margin-bottom: 18px; }
.bl2-howto-link{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 16px;
  border: none;
  background: transparent;
  color: var(--bl2-green-700);
  font-size: .87rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}
.bl2-howto-link:hover{ text-decoration: underline; }
.bl2-howto-link svg{ width: 15px; height: 15px; }
.bl2-howto-steps{
  display: grid;
  gap: 12px;
  margin-bottom: 4px;
  background: var(--bl2-mint-50);
  border: 1px solid rgba(18,140,126,.16);
  border-radius: var(--bl2-radius-sm);
  padding: 16px;
}
.bl2-howto-step{ display: flex; gap: 12px; align-items: flex-start; font-size: .88rem; line-height: 1.4; }
.bl2-howto-num{
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--bl2-green);
  color: #fff;
  font-weight: 800;
  font-size: .78rem;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}

@media (max-width: 620px){
  .bl2-quick-tools{ padding: 14px; }
  .bl2-quick-tool{ padding: 12px; gap: 12px; }
  .bl2-what-search{ padding: 16px; }
  .bl2-what-list{ gap: 14px; }
  .bl2-what-icon{ width: 34px; height: 34px; }
  .bl2-what-icon svg{ width: 16px; height: 16px; }
  .bl2-what-title{ font-size: .88rem; }
  .bl2-what-sub{ font-size: .8rem; line-height: 1.4; }
  .bl2-howto{ padding: 16px; margin-bottom: 14px; }
  .bl2-howto-steps{ padding: 12px; gap: 10px; }
  .bl2-howto-step{ font-size: .85rem; }
}

.bl2-start-panel{
  padding: 32px;
  margin-bottom: 4px;
  display: grid;
  gap: 24px;
  background:
    radial-gradient(120% 130% at 12% 20%, rgba(20,184,166,.06), transparent 55%),
    var(--bl2-panel);
}
.bl2-start-visual{
  display: flex;
  align-items: center;
  justify-content: center;
}
.bl2-start-illustration{
  width: 180px;
  height: auto;
}
.bl2-start-body{ display: grid; gap: 20px; }
.bl2-start-copy{ text-align: center; }
.bl2-start-title{ font-weight: 800; font-size: 1.4rem; margin-bottom: 9px; color: var(--bl2-ink); letter-spacing: -.3px; }
.bl2-start-text{ font-size: .96rem; color: var(--bl2-muted); line-height: 1.6; max-width: 620px; }
.bl2-start-trust{
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
.bl2-trust-item{ display: flex; gap: 12px; align-items: flex-start; }
.bl2-trust-icon{
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--bl2-mint-100);
  color: var(--bl2-green-700);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.bl2-trust-icon svg{ width: 17px; height: 17px; }
.bl2-trust-body{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bl2-trust-title{ display: block; font-weight: 700; font-size: .92rem; line-height: 1.3; color: var(--bl2-ink); }
.bl2-trust-sub{ display: block; font-size: .82rem; color: var(--bl2-muted); line-height: 1.42; }

@media (max-width: 620px){
  .bl2-start-panel{ padding: 18px; gap: 12px; }
  .bl2-start-illustration{ width: 84px; }
  .bl2-start-body{ gap: 14px; }
  .bl2-start-title{ font-size: 1.15rem; margin-bottom: 6px; }
  .bl2-start-text{ font-size: .88rem; line-height: 1.5; }
  .bl2-start-trust{ gap: 10px; }
  .bl2-trust-icon{ width: 30px; height: 30px; }
  .bl2-trust-icon svg{ width: 15px; height: 15px; }
  .bl2-trust-title{ font-size: .87rem; }
  .bl2-trust-sub{ font-size: .78rem; }
}

/* Two-column grid holding Najčešće pretrage + Pretražujte prema kategoriji */
.bl2-home-cards-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
.bl2-home-cards-grid > .bl2-card{ margin-bottom: 0; }

@media (min-width: 620px){
  .bl2-categories-grid{ grid-template-columns: 1fr 1fr; }
}
@media (min-width: 760px){
  .bl2-start-panel{ grid-template-columns: 190px 1fr; align-items: center; }
  .bl2-start-copy{ text-align: left; }
  .bl2-start-trust{ grid-template-columns: 1fr 1fr 1fr; gap: 0; }
  .bl2-trust-item{ padding: 0 20px; }
  .bl2-trust-item:first-child{ padding-left: 0; }
  .bl2-trust-item:not(:first-child){ border-left: 1px solid var(--bl2-line); }
}
@media (min-width: 992px){
  .bl2-home-cards-grid{ grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1180px){
  .bl2-home-layout{
    display: grid;
    grid-template-columns: minmax(0,1fr) 400px;
    gap: 32px;
    align-items: start;
  }
  .bl2-home-main{ min-width: 0; display: grid; gap: 26px; align-content: start; }
  .bl2-home-main > .bl2-card,
  .bl2-home-main > .bl2-home-cards-grid{ margin-bottom: 0; }
  .bl2-home-rail{ display: grid; gap: 26px; }
  .bl2-home-rail > .bl2-card{ margin-bottom: 0; }
}

/* ==========================================================================
   SEARCH RESULTS STATE
   ========================================================================== */
.bl2-results-header{ padding: 4px 2px 2px; margin-bottom: 4px; }
.bl2-results-title{
  font-size: clamp(1.9rem, 4.2vw, 2.6rem);
  font-weight: 750;
  letter-spacing: -.5px;
  color: var(--bl2-ink);
  margin: 0 0 8px;
  line-height: 1.08;
  text-shadow: none;
}
.bl2-results-lead{
  font-size: 1rem;
  color: var(--bl2-muted);
  margin: 0;
  line-height: 1.5;
}
.bl2-search-panel{ padding: 16px; margin-bottom: 16px; }
.bl2-results-search{ margin-bottom: 0; }
.bl2-results-count{ font-size: .88rem; color: var(--bl2-muted); line-height: 1.5; }
.bl2-results-count strong{ color: var(--bl2-text); font-weight: 700; }

.bl2-filter-bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
}
.bl2-filter-row{
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.bl2-filter-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1.5px solid var(--bl2-line);
  background: #fff;
  color: var(--bl2-text);
  font-size: .87rem;
  font-weight: 650;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.bl2-filter-chip .bl2-count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--bl2-line-soft);
  color: var(--bl2-muted);
  border-radius: var(--bl2-radius-pill);
  font-size: .72rem;
  font-weight: 800;
}
.bl2-filter-chip:hover{ border-color: rgba(18,140,126,.45); }
.bl2-filter-chip.is-active{
  background: var(--bl2-green);
  border-color: var(--bl2-green);
  color: #fff;
}
.bl2-filter-chip.is-active .bl2-count{
  background: rgba(255,255,255,.24);
  color: #fff;
}

.bl2-sort-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.bl2-sort-select-wrap{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  color: var(--bl2-muted);
  font-weight: 650;
  flex: 0 0 auto;
  white-space: nowrap;
}
.bl2-sort-select{
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid var(--bl2-line);
  border-radius: 10px;
  padding: 8px 32px 8px 14px;
  font-size: .85rem;
  font-weight: 700;
  color: var(--bl2-text);
  background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%235c716d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>') no-repeat right 9px center / 15px 15px;
  cursor: pointer;
}
.bl2-sort-select:focus-visible{ outline: 2px solid var(--bl2-teal); outline-offset: 1px; }
.bl2-mobile-filter-btn{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--bl2-line);
  background: #fff;
  font-size: .83rem;
  font-weight: 700;
  cursor: pointer;
}
.bl2-mobile-filter-btn svg{ width: 15px; height: 15px; }

.bl2-results-layout{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
}
.bl2-results-main{ min-width: 0; display: grid; gap: 12px; }

.bl2-result-card{
  display: block;
  padding: 22px;
  margin-bottom: 16px;
  border-radius: 18px;
  border: 1.5px solid var(--bl2-line);
  background: #fff;
  text-decoration: none;
  color: var(--bl2-text);
  box-shadow: var(--bl2-shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
/* Bez ovoga, JS-postavljeni card.hidden=true (applyFilters u drugdb2.js) nema
   nikakav vizualni učinak — eksplicitan display:block iznad nadjačava
   browserov defaultni [hidden]{display:none} jer imaju istu specifičnost,
   a ovo pravilo je kasnije u cascade-u. Ovo je bio pravi uzrok "filter ne
   mijenja broj rezultata" (brojač se ažurirao ispravno, kartice nisu). */
.bl2-result-card[hidden]{ display: none; }
.bl2-result-card:last-child{ margin-bottom: 0; }
.bl2-result-card:hover{ border-color: rgba(18,140,126,.4); box-shadow: var(--bl2-shadow); transform: translateY(-1px); }
.bl2-result-card.is-primary{
  border-color: var(--bl2-green);
  background: linear-gradient(180deg, rgba(18,140,126,.04), rgba(18,140,126,0) 40%), #fff;
  box-shadow: 0 0 0 3px rgba(18,140,126,.1), var(--bl2-shadow-sm);
}
.bl2-result-top{
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.bl2-result-icon{
  width: 96px; height: 96px;
  border-radius: 18px;
  background: var(--bl2-mint-50);
  color: var(--bl2-green-700);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.bl2-result-icon svg{ width: 42px; height: 42px; }
.bl2-result-body{ flex: 1; min-width: 0; }
.bl2-result-title-row{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.bl2-result-title{ font-weight: 780; font-size: 1.4rem; color: var(--bl2-ink); letter-spacing: -.2px; }
.bl2-result-primary-tag{
  font-size: .7rem;
  font-weight: 750;
  color: var(--bl2-green-700);
  background: var(--bl2-mint-100);
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.bl2-result-sub{ font-size: .98rem; color: var(--bl2-muted); margin-top: 4px; }
.bl2-result-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 7px 18px;
  font-size: .82rem;
  color: var(--bl2-muted-2);
  margin-top: 12px;
  max-width: 100%;
}
.bl2-result-meta span{ display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.bl2-result-meta svg{ width: 13px; height: 13px; flex: 0 0 auto; }
.bl2-result-meta-holder{ max-width: 280px; }
.bl2-result-meta-text{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bl2-result-arrow{ color: var(--bl2-muted-2); flex: 0 0 auto; align-self: center; }
.bl2-result-arrow svg{ width: 20px; height: 20px; }

/* Right meta facts panel — desktop only (mobile keeps the badge row) */
.bl2-result-facts{
  display: none;
  flex: 0 0 240px;
  align-self: stretch;
  border-left: 1px solid var(--bl2-line-soft);
  padding-left: 22px;
  flex-direction: column;
  justify-content: center;
  gap: 11px;
}
.bl2-result-fact{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: .85rem;
}
.bl2-result-fact-label{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--bl2-green-700);
  font-weight: 650;
}
.bl2-result-fact-label svg{ width: 16px; height: 16px; flex: 0 0 auto; }
.bl2-result-fact-value{ color: var(--bl2-text); font-weight: 700; text-align: right; }

.bl2-result-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.bl2-badge{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 11px;
  border-radius: 8px;
  font-size: .74rem;
  font-weight: 700;
  border: 1px solid transparent;
}
.bl2-badge.otc{ background: rgba(20,184,166,.14); color: var(--bl2-teal); border-color: rgba(20,184,166,.22); }
.bl2-badge.rx{ background: rgba(37,99,235,.10); color: #1e4fbf; }
.bl2-badge.oll{ background: rgba(18,140,126,.12); color: var(--bl2-green-700); }
.bl2-badge.dll{ background: rgba(180,131,0,.12); color: #8a6100; }
.bl2-badge.mixed{ background: rgba(100,116,139,.12); color: #475569; border-color: rgba(100,116,139,.18); }
.bl2-badge.substance{ background: rgba(37,99,235,.10); color: #1e4fbf; border-color: rgba(37,99,235,.18); }
.bl2-badge.doc{ background: #f1f5f9; color: #45596e; border-color: rgba(15,23,42,.08); }

@media (max-width: 640px){
  .bl2-result-card{ padding: 16px; border-radius: 16px; margin-bottom: 12px; }
  .bl2-result-top{ gap: 12px; }
  .bl2-result-icon{ width: 60px; height: 60px; border-radius: 14px; }
  .bl2-result-icon svg{ width: 26px; height: 26px; }
  .bl2-result-title{ font-size: 1.05rem; }
  .bl2-result-sub{ font-size: .87rem; }
  .bl2-result-meta{ font-size: .78rem; gap: 5px 12px; margin-top: 8px; }
  .bl2-result-meta-holder{ max-width: 45vw; }
  .bl2-result-badges{ gap: 6px; margin-top: 10px; }
  .bl2-result-arrow svg{ width: 18px; height: 18px; }
}

.bl2-empty{
  padding: 40px 20px;
  text-align: center;
  color: var(--bl2-muted);
}
.bl2-empty-illustration{ width: 120px; margin: 0 auto 14px; }
.bl2-empty-title{ font-weight: 800; color: var(--bl2-text); font-size: 1.02rem; margin-bottom: 6px; }

.bl2-load-more{
  display: flex;
  justify-content: center;
  padding-top: 6px;
}
.bl2-load-more-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: var(--bl2-radius-pill);
  border: 1.5px solid var(--bl2-line);
  background: #fff;
  color: var(--bl2-text);
  font-weight: 750;
  font-size: .88rem;
  cursor: pointer;
}
.bl2-load-more-btn:hover{ border-color: rgba(18,140,126,.4); background: var(--bl2-mint-50); }
.bl2-load-more-btn svg{ width: 15px; height: 15px; transition: transform .15s ease; }
.bl2-load-more-btn.is-loading svg{ animation: bl2-spin .8s linear infinite; }
@keyframes bl2-spin{ to{ transform: rotate(360deg); } }

.bl2-rail{ display: grid; gap: 18px; align-content: start; }
.bl2-rail-card{ padding: 20px; }
.bl2-rail-title{
  font-weight: 800;
  font-size: .92rem;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bl2-rail-title svg{ width: 16px; height: 16px; color: var(--bl2-green); }

.bl2-facet-group{ margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--bl2-line-soft); }
.bl2-facet-group:last-of-type{ margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.bl2-facet-heading{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .8rem;
  font-weight: 800;
  color: var(--bl2-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 8px;
}
.bl2-facet-option{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 4px;
  font-size: .89rem;
  cursor: pointer;
  color: var(--bl2-text);
}
.bl2-facet-option > input{ accent-color: var(--bl2-green); width: 19px; height: 19px; flex: 0 0 auto; }
/* :not() isključuje toggle-switch podstablo - i .bl2-toggle-switch i njegovi
   unutarnji .bl2-toggle-track/.bl2-toggle-thumb su isto <span> elementi, pa bi
   bez ovoga i oni dobili flex:1 (flex-basis:0% + grow:1) i razvukli se preko
   cijelog reda umjesto da ostanu na svojoj fiksnoj 38x22px veličini - to je
   bio uzrok "prevelikih" toggleova. */
.bl2-facet-option span:not(.bl2-toggle-switch):not(.bl2-toggle-track):not(.bl2-toggle-thumb){ flex: 1; }
.bl2-facet-option .bl2-count{
  color: var(--bl2-muted);
  font-size: .78rem;
  font-weight: 700;
}
.bl2-facet-clear{
  width: 100%;
  margin-top: 6px;
  padding: 10px;
  border-radius: 10px;
  border: 1.5px solid var(--bl2-line);
  background: #fff;
  font-size: .84rem;
  font-weight: 700;
  color: var(--bl2-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.bl2-facet-clear:hover{ background: var(--bl2-mint-50); border-color: rgba(18,140,126,.4); }
.bl2-facet-clear svg{ width: 13px; height: 13px; }

/* Mobile filter drawer (bottom sheet) */
.bl2-filter-drawer-overlay{
  position: fixed; inset: 0;
  background: rgba(6,32,29,.42);
  z-index: 90;
  display: flex;
  align-items: flex-end;
}
.bl2-filter-drawer-overlay[hidden]{ display: none; }
.bl2-filter-drawer{
  background: #fff;
  width: 100%;
  max-height: 84vh;
  overflow-y: auto;
  border-radius: 22px 22px 0 0;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
}
.bl2-filter-drawer-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.bl2-filter-drawer-title{ font-weight: 800; font-size: 1rem; }
.bl2-filter-drawer-close{
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--bl2-line-soft);
  font-size: 1.1rem;
  cursor: pointer;
}
.bl2-filter-drawer-apply{
  width: 100%;
  margin-top: 14px;
  padding: 13px;
  border-radius: var(--bl2-radius-pill);
  border: none;
  background: var(--bl2-green);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

@media (min-width: 1180px){
  .bl2-results-layout{ grid-template-columns: 1fr 340px; gap: 24px; }
  .bl2-mobile-filter-btn{ display: none; }
  .bl2-rail .bl2-filters-inline{ display: block; }
  .bl2-result-facts{ display: flex; }
}
@media (max-width: 1179.98px){
  .bl2-rail-filters{ display: none; }
}

/* ==========================================================================
   DRUG DETAIL STATE
   ========================================================================== */
.bl2-detail-hero{
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background:
    linear-gradient(115deg, var(--bl2-hero-1) 0%, var(--bl2-hero-2) 100%);
  color: #fff;
  padding: 22px 20px 18px;
  margin-bottom: 16px;
  isolation: isolate;
}
/* Decorative pill/tablet artwork, pinned to the RIGHT of the hero only.
   Kept off the left text column at every breakpoint so the title, active
   substance and meta are always on a clean dark field. No mix-blend-mode
   (that was blowing the title out to invisible on mobile). */
.bl2-detail-hero::after{
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 62%;
  background-image: url('img/drugdb2-hero-bg.webp');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
  opacity: .9;
  pointer-events: none;
  z-index: 0;
}
/* Left-side scrim guarantees text contrast over the artwork on all widths. */
.bl2-detail-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--bl2-hero-1) 30%, rgba(4,33,29,.55) 52%, transparent 78%);
  pointer-events: none;
  z-index: 1;
}
.bl2-detail-hero > *{ position: relative; z-index: 2; }
.bl2-hero-content{ max-width: 640px; }

.bl2-hero-crumbs{
  display: none;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  margin-bottom: 22px;
  font-size: .78rem;
  line-height: 1.2;
  color: rgba(255,255,255,.72);
  overflow: hidden;
  min-width: 0;
}
.bl2-hero-crumbs a{
  color: rgba(255,255,255,.72);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.bl2-hero-crumbs a:hover{ color: rgba(255,255,255,.9); }
.bl2-hero-crumbs svg{ width: 14px; height: 14px; display: block; }
.bl2-hero-crumbs-sep{ display: inline-flex; opacity: .55; flex: 0 0 auto; }
.bl2-hero-crumbs-sep svg{ width: 12px; height: 12px; }
.bl2-hero-crumbs-current{
  color: #fff;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Uklonjeno sa SVIH širina — "natrag" (breadcrumbs + topbar nav) i "AI"
   (FAB + Brze akcije kartica u sidebaru + AI razgovor) su već dostupni
   drugdje, pa je ovaj red u herou posve suvišan na svakoj širini. */
.bl2-hero-topline{
  display: none;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.bl2-hero-back{
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.14);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
  flex: 0 0 auto;
  transition: background .15s ease;
}
.bl2-hero-back:hover{ background: rgba(255,255,255,.24); }
.bl2-hero-back svg{ width: 18px; height: 18px; }
.bl2-hero-ai-btn{
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.14);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s ease;
}
.bl2-hero-ai-btn:hover{ background: rgba(255,255,255,.24); }
.bl2-hero-ai-btn svg{ width: 17px; height: 17px; }

.bl2-hero-pill-badge{
  display: inline-flex;
  max-width: 100%;
  padding: 6px 14px;
  border-radius: 8px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.26);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bl2-hero-title-row{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.bl2-hero-title{
  margin: 0;
  font-size: clamp(1.8rem, 4.6vw, 3.25rem);
  font-weight: 780;
  letter-spacing: -.5px;
  line-height: 1.08;
  color: #fff;
  text-shadow: 0 1px 8px rgba(4,33,29,.3);
}
.bl2-hero-edit-btn{
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.12);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  margin-top: 4px;
  cursor: default;
  opacity: .85;
}
.bl2-hero-edit-btn svg{ width: 14px; height: 14px; }
.bl2-hero-subtitle{
  font-size: 1.08rem;
  color: rgba(255,255,255,.92);
  margin-bottom: 18px;
  text-shadow: 0 1px 6px rgba(4,33,29,.28);
}
.bl2-hero-facts{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.bl2-hero-fact{
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 1.02rem;
  color: rgba(255,255,255,.92);
}
.bl2-hero-fact svg{ width: 15px; height: 15px; color: rgba(255,255,255,.75); flex: 0 0 auto; }
.bl2-hero-fact strong{ font-weight: 700; color: #fff; }

.bl2-hero-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: rgba(4,26,23,.38);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 5px;
}
.bl2-hero-tab{
  border: none;
  background: transparent;
  color: rgba(255,255,255,.82);
  font-size: .86rem;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}
.bl2-hero-tab:hover{ color: #fff; background: rgba(255,255,255,.1); }
.bl2-hero-tab.is-active{
  background: var(--bl2-teal);
  color: #fff;
}
.bl2-hero-otc-badge{
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 15px;
  border-radius: 10px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.24);
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
}
.bl2-hero-otc-badge svg{ width: 14px; height: 14px; }

/* Sticky compact header shown after scrolling past hero */
/* Sticky mini-header: position:fixed + plain display toggle. Rationale:
   position:sticky is broken site-wide by app.css's body{overflow-y:auto
   !important} (the body becomes the nearest scrollport but never actually
   scrolls internally — verified by test AND visible on real devices where
   even the topbar scrolls away). position:fixed is the mechanism the AI-fab
   and scroll-top buttons already use, and those pin correctly on the same
   devices. No opacity/transform/transition — nothing that could interact
   with mobile URL-bar resizing. The outer strip is full-width and
   click-through; the inner pill is the visible floating bar. */
.bl2-compact-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 65;
  display: none;
}
.bl2-compact-header.is-visible{
  display: block;
}
.bl2-compact-header-inner{
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  /* Matches .bl2-topbar's own height at every breakpoint (min-height, not
     height, so the row can still grow if content ever needs more room).
     Without this, the topbar is ~80px tall above 640px while this bar's
     own content is only ~62px, and since both sit at top:0 with this bar's
     higher z-index, a sliver of the topbar showed through underneath it
     (confirmed via rendered box-model measurement: 17px gap at ≥641px).
     Below 640px the bar was already taller than the topbar, so no visible
     change there. */
  min-height: var(--bl2-topbar-h);
  margin: 0;
  padding: 12px clamp(20px, 2.4vw, 40px);
  background: #fff;
  border-bottom: 1px solid var(--bl2-line);
  box-shadow: var(--bl2-shadow-sm);
}
.bl2-compact-header-left{
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
}
/* Desktop: grid s 3 jednake vanjske kolone (1fr / auto / 1fr) tako da
   tražilica u srednjoj koloni ispadne stvarno centrirana na cijeloj traci,
   bez obzira na to koliko je naslov lijeka dugačak ili koliko je "Sekcije"
   gumb širok. Eksplicitan grid-column na sva 3 djeteta jer tražilica zna
   biti display:none ispod 1180px — bez toga bi Sekcije, kad je tražilica
   uklonjena iz layouta, ispao u srednju kolonu umjesto u treću. */
@media (min-width: 1180px){
  .bl2-compact-header-inner{ display: grid; grid-template-columns: 1fr auto 1fr; }
  .bl2-compact-header-left{ grid-column: 1; }
  .bl2-compact-header-search{ grid-column: 2; justify-self: center; }
  .bl2-compact-header-menu{ grid-column: 3; justify-self: end; margin-left: 0; }
}
@media (max-width: 480px){
  .bl2-compact-header-inner{ padding: 17px 14px; }
}
/* Offsets scroll-to-anchor targets (hero tabs, "Sekcije" menu, goto-tab
   links) so their heading doesn't land underneath the fixed compact header
   once it's visible. Unconditional (not just ≤640px) — the compact header
   can appear at any width. 84px clears its rendered height at every
   breakpoint (73px on mobile, 80px at ≥641px now that its min-height
   matches --bl2-topbar-h — both confirmed via rendered measurement). */
body.bl2-page--detail [data-bl2-section-anchor],
body.bl2-page--detail .bl2-accordion-item{ scroll-margin-top: 84px; }
.bl2-compact-header-title{ font-weight: 800; font-size: 1rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl2-compact-header-sub{ font-size: .85rem; color: var(--bl2-muted); }
/* Tražilica u sredini compact headera — samo desktop prikaz (isti
   [data-bl2-search-field] obrazac kao topbar search, JS ga automatski
   pokupi; ovdje samo prilagođen, kompaktniji, svijetli dizajn). */
.bl2-compact-header-search{
  display: none;
  position: relative;
  width: 420px;
  max-width: 100%;
}
@media (min-width: 1180px){
  .bl2-compact-header-search{ display: block; }
}
.bl2-compact-header-search-icon{
  position: absolute; left: 13px; top: 50%;
  transform: translateY(-50%);
  color: var(--bl2-muted);
  pointer-events: none;
  display: flex;
}
.bl2-compact-header-search-icon svg{ width: 16px; height: 16px; }
.bl2-compact-header-search input{
  width: 100%;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--bl2-line);
  background: #fff;
  color: var(--bl2-text);
  padding: 0 38px 0 36px;
  font-size: .87rem;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.bl2-compact-header-search input::placeholder{ color: var(--bl2-muted); }
.bl2-compact-header-search input:focus{
  border-color: rgba(18,140,126,.4);
  box-shadow: 0 0 0 3px rgba(18,140,126,.14);
}
/* "Sekcije" popup je uklonjen iz compact headera (zamijenjen hamburgerom
   koji otvara isti sidebar/drawer kao i glavni topbar) — .bl2-sections-menu*
   ostaje u CSS-u neiskorišteno (nije više u markupu), a novi gumb koristi
   .bl2-icon-btn kao bazu ali s prilagođenom svijetlom temom (bijela
   pozadina compact headera, ne tamna kao topbar). */
.bl2-compact-header-menu{
  margin-left: auto;
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--bl2-mint-50);
  border-color: var(--bl2-line);
  color: var(--bl2-text);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.bl2-compact-header-menu:hover{ background: var(--bl2-mint-100); }
.bl2-compact-header-menu svg{ width: 19px; height: 19px; }
.bl2-sections-menu{ position: relative; margin-left: auto; flex: 0 0 auto; }
.bl2-sections-menu-toggle{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 13px;
  border-radius: var(--bl2-radius-pill);
  border: 1px solid var(--bl2-line);
  background: #fff;
  color: var(--bl2-green-700);
  font-weight: 700;
  font-size: .85rem;
  cursor: pointer;
  white-space: nowrap;
}
.bl2-sections-menu-toggle:hover{ background: var(--bl2-mint-50); }
.bl2-sections-menu-toggle svg{ width: 14px; height: 14px; transition: transform .15s ease; }
.bl2-sections-menu-toggle[aria-expanded="true"] svg{ transform: rotate(180deg); }
.bl2-sections-menu-list{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 10;
  min-width: 220px;
  max-height: 60vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--bl2-line);
  border-radius: 14px;
  box-shadow: var(--bl2-shadow-lg);
  padding: 8px;
  display: grid;
  gap: 2px;
}
.bl2-sections-menu-list[hidden]{ display: none; }
.bl2-sections-menu-list a{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--bl2-ink);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 600;
}
.bl2-sections-menu-list a svg{ width: 16px; height: 16px; color: var(--bl2-green-700); flex: 0 0 auto; }
.bl2-sections-menu-list a:hover{ background: var(--bl2-mint-50); }
@media (max-width: 480px){
  .bl2-sections-menu-toggle{ padding: 0 10px; font-size: 0; gap: 0; }
  .bl2-sections-menu-toggle svg{ width: 16px; height: 16px; }
}

.bl2-info-banner{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--bl2-mint-50);
  border: 1px solid rgba(18,140,126,.16);
  border-radius: var(--bl2-radius);
  padding: 14px 16px;
  font-size: .85rem;
  color: var(--bl2-muted);
  margin-bottom: 16px;
  line-height: 1.5;
}
.bl2-info-banner svg{ width: 18px; height: 18px; color: var(--bl2-green); flex: 0 0 auto; margin-top: 2px; }
@media (max-width: 620px){
  .bl2-info-banner{ padding: 15px 19px; font-size: .82rem; line-height: 1.45; gap: 9px; }
  .bl2-info-banner svg{ width: 27px; height: 27px; margin-top: 0; }
}

.bl2-detail-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.bl2-detail-main{ min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
/* BEZ grid-template-columns ovo je bio implicitni jednostupčani grid, a
   grid stavke defaultno imaju min-width:auto — svaka bi se stavka (npr.
   #section-doziranje ako sadrži široku SmPC tablicu s 5 stupaca, kao kod
   Apiksabana) mogla proširiti na svoju min-content širinu, a budući da je
   to JEDAN dijeljeni implicitni stupac, to je gurnulo ŠIRINU CIJELOG
   .bl2-detail-main (i s njim cijelu stranicu) preko granica ekrana na
   mobitelu — potvrđeno mjerenjem na stvarnom sadržaju (Apiksaban Teva
   Doziranje tablica "Tjelesna težina/Raspored doziranja/Maksimalna dnevna
   doza" x2): scrollWidth 520px nasuprot 390px viewporta prije popravka,
   točno 390px=390px poslije. #section-pregled ispod ima isti popravak iz
   istog razloga (Specifikacije/Indikacije/Doziranje su NJEGOVA djeca). */
#section-pregled{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.bl2-pregled-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}
@media (min-width: 860px){
  .bl2-pregled-grid{ grid-template-columns: 1fr 1fr; }
}

.bl2-panel{
  padding: 22px;
}
.bl2-summary-card{ padding: 20px; }
.bl2-summary-value{ max-width: 60%; }
.bl2-panel-head{
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 14px;
}
.bl2-panel-icon{
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--bl2-mint-100);
  color: var(--bl2-green-700);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.bl2-panel-icon svg{ width: 17px; height: 17px; }
.bl2-panel-title{ font-weight: 800; font-size: 1.08rem; color: var(--bl2-ink); }
.bl2-panel-sub{ font-size: .8rem; color: var(--bl2-muted); margin-top: 2px; }

/* Top-level sections (Indikacije, Doziranje, Zamjene) as closeable <details>
   — every section on the page should have a close affordance, not just the
   Sigurnost primjene sub-items. */
.bl2-section-collapsible{ padding: 0; }
.bl2-section-collapsible > summary{
  list-style: none;
  cursor: pointer;
  margin: 0;
  padding: 22px;
}
.bl2-section-collapsible > summary::-webkit-details-marker{ display: none; }
.bl2-section-collapsible > summary::after{
  content: "";
  width: 10px; height: 10px;
  margin-left: auto;
  border-right: 2px solid var(--bl2-muted-2);
  border-bottom: 2px solid var(--bl2-muted-2);
  transform: rotate(45deg);
  transition: transform .15s ease;
  flex: 0 0 auto;
  align-self: center;
}
.bl2-section-collapsible[open] > summary::after{ transform: rotate(-135deg); }
.bl2-section-collapsible[open] > summary{ margin-bottom: -14px; }
.bl2-section-collapsible-body{ padding: 0 22px 22px; }
.bl2-panel-id{
  margin-left: auto;
  font-size: .74rem;
  font-weight: 750;
  color: var(--bl2-green-700);
  background: var(--bl2-mint-50);
  border: 1px solid rgba(18,140,126,.16);
  padding: 4px 10px;
  border-radius: var(--bl2-radius-pill);
  white-space: nowrap;
}

/* Summary grid (Sažetak) */
.bl2-summary-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
.bl2-summary-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--bl2-line-soft);
  grid-column: 1 / -1;
  font-size: .97rem;
}
.bl2-summary-row:last-child{ border-bottom: none; }
.bl2-summary-label{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--bl2-green-700);
  font-weight: 650;
}
.bl2-summary-label svg{ width: 15px; height: 15px; color: var(--bl2-green); }
.bl2-summary-value{ font-weight: 600; color: var(--bl2-text); text-align: right; }

.bl2-quick-actions{ display: grid; gap: 8px; }
.bl2-quick-action{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: var(--bl2-radius-sm);
  border: 1px solid var(--bl2-line);
  text-decoration: none;
  color: var(--bl2-text);
  font-size: .86rem;
  font-weight: 650;
  cursor: pointer;
}
.bl2-quick-action:hover{ background: var(--bl2-mint-50); border-color: rgba(18,140,126,.35); }
.bl2-quick-action svg{ width: 16px; height: 16px; color: var(--bl2-green); flex: 0 0 auto; }
.bl2-quick-action span{ flex: 1; }
.bl2-quick-action svg:last-child{ width: 15px; height: 15px; color: var(--bl2-muted-2); }
/* AI gumb u Brze akcije — tamnozeleni gloss (isti recept kao .bl2-ai-fab:
   dijagonalni gradijent + suptilni bijeli inset-highlight na vrhu), bijeli
   tekst/ikone da se izdvoji od ostalih (svijetlih) quick-action stavki. */
.bl2-quick-action-ai{
  background: linear-gradient(135deg, var(--bl2-green-dark), var(--bl2-green-700) 65%, var(--bl2-hero-2));
  border-color: transparent;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 12px rgba(4,33,29,.2);
}
.bl2-quick-action-ai:hover{
  background: linear-gradient(135deg, var(--bl2-green-700), var(--bl2-hero-2) 65%, var(--bl2-green-dark));
  border-color: transparent;
}
.bl2-quick-action-ai svg{ color: #fff; }
.bl2-quick-action-ai svg:last-child{ color: rgba(255,255,255,.7); }

/* Interakcije gumb u Brze akcije — isti gloss recept kao .bl2-quick-action-ai
   (dijagonalni gradijent + inset-highlight), samo plavi ton umjesto zelenog
   (ista plava obitelj kao .bl2-badge.substance/.bl2-drawer-ai-btn: #2563eb-ish,
   ovdje potamnjena za gloss CTA izgled dosljedan AI gumbu). */
.bl2-quick-action-interactions{
  background: linear-gradient(135deg, #0d2b57, #1d4ed8 65%, #0a2247);
  border-color: transparent;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 12px rgba(4,20,45,.2);
}
.bl2-quick-action-interactions:hover{
  background: linear-gradient(135deg, #1d4ed8, #0a2247 65%, #0d2b57);
  border-color: transparent;
}
.bl2-quick-action-interactions svg{ color: #fff; }
.bl2-quick-action-interactions svg:last-child{ color: rgba(255,255,255,.7); }

/* Specifications key/value list */
.bl2-kv-list{ display: grid; gap: 14px; }
.bl2-kv-row{ display: flex; flex-direction: column; gap: 4px; font-size: .98rem; }
.bl2-kv-key{ color: var(--bl2-green-700); font-weight: 650; font-size: .8rem; }
.bl2-kv-val{ color: var(--bl2-text); font-weight: 500; line-height: 1.5; }

/* HZZO indikacija/smjernica tekstualni blokovi unutar #section-hzzo (ispod
   Tko može propisati/Lista/PSL kv-liste). Kraći/nestrukturirani tekst ide
   kroz .bl2-rich; numerirani pravni tekst (1. a. b. 2. 3. 3.a. 3.b. ...)
   ide kroz .bl2-hzzo-structured (bl2_render_hzzo_structured_text — portano
   iz stare baza-lijekova.php). Ovdje samo mala "eyebrow" oznaka iznad
   svakog bloka. */
.bl2-hzzo-notes{ margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--bl2-line); display: grid; gap: 10px; }
.bl2-hzzo-notes-label{ font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bl2-muted); }
.bl2-hzzo-notes-label:not(:first-child){ margin-top: 4px; }

/* Numerirani HZZO tekst (naslovi I./II./..., stavke 1./3.a./a.) — svaka
   stavka je 2-stupčani red (prefiks + tekst) umjesto jednog neprekinutog
   bloka teksta. */
.bl2-hzzo-structured{ display: grid; gap: 12px; }
.bl2-hzzo-heading,
.bl2-hzzo-line{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  color: var(--bl2-ink);
  line-height: 1.72;
  font-size: 1rem;
}
.bl2-hzzo-heading{ margin-top: 2px; font-weight: 800; }
.bl2-hzzo-line.is-subitem{ padding-left: 18px; }
.bl2-hzzo-line.is-subitem.is-loose{ padding-left: 26px; }
.bl2-hzzo-prefix{ color: var(--bl2-green-700); font-weight: 800; white-space: nowrap; }
.bl2-hzzo-paragraph{ margin: 0; color: var(--bl2-ink); line-height: 1.75; font-size: 1rem; }

/* Rich text renderer (indications/dosing paragraphs & bullet lists) */
.bl2-rich p{ margin: 0 0 12px; font-size: 1rem; line-height: 1.6; color: var(--bl2-text); }
.bl2-rich p:last-child{ margin-bottom: 0; }
.bl2-rich ul{ list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 9px; }
.bl2-rich ul:last-child{ margin-bottom: 0; }
.bl2-rich ol{ margin: 0 0 12px; padding: 0 0 0 22px; display: grid; gap: 9px; }
.bl2-rich ol:last-child{ margin-bottom: 0; }
.bl2-rich ol li{ font-size: 1rem; line-height: 1.5; color: var(--bl2-text); padding-left: 4px; }
.bl2-rich ul li{
  position: relative;
  padding-left: 28px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--bl2-text);
}
.bl2-rich ul li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--bl2-mint-100);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23128C7E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 11px;
}
.bl2-rich-heading, .bl2-rich-subheading{
  font-size: .98rem;
  font-weight: 750;
  color: var(--bl2-green-700);
  margin: 18px 0 8px;
}
.bl2-rich-heading:first-child, .bl2-rich-subheading:first-child{ margin-top: 0; }
.bl2-rich-minor-heading{
  font-size: .9rem;
  font-weight: 700;
  color: var(--bl2-ink);
  margin: 14px 0 6px;
}
.bl2-rich-minor-heading:first-child{ margin-top: 0; }
.bl2-rich-underline{ text-decoration: underline; text-decoration-color: rgba(18,140,126,.4); }
.bl2-inline-ref{ border: none; background: none; padding: 0; font: inherit; color: var(--bl2-green-700); font-weight: 650; cursor: pointer; }
.bl2-inline-ref:hover{ text-decoration: underline; }

/* Structured clinical tables (dosing regimens per indication, etc.) */
.bl2-rich-table-block{ margin: 8px 0 18px; }
.bl2-rich-table-block:last-child{ margin-bottom: 0; }
.bl2-rich-table-head{ margin-bottom: 8px; }
.bl2-rich-table-title{ font-weight: 750; font-size: .92rem; color: var(--bl2-ink); }
.bl2-rich-table-caption{ font-size: .8rem; color: var(--bl2-muted); margin-top: 2px; }
.bl2-rich-table-wrap{
  overflow-x: auto;
  border: 1px solid var(--bl2-line);
  border-radius: 12px;
  -webkit-overflow-scrolling: touch;
}
.bl2-rich-table{
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}
.bl2-rich-table th,
.bl2-rich-table td{
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--bl2-line-soft);
  white-space: normal;
  vertical-align: top;
}
.bl2-rich-table thead th{
  background: var(--bl2-mint-50);
  color: var(--bl2-green-700);
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  white-space: nowrap;
}
.bl2-rich-table tbody tr:last-child td{ border-bottom: none; }
.bl2-rich-table tbody tr:hover{ background: var(--bl2-mint-50); }

.bl2-empty-note{
  font-size: .87rem;
  color: var(--bl2-muted);
  background: var(--bl2-paper);
  border: 1px dashed var(--bl2-line);
  border-radius: var(--bl2-radius-sm);
  padding: 14px;
}
.bl2-empty-note strong{ display: block; color: var(--bl2-text); margin-bottom: 3px; }

.bl2-preview-shell{ position: relative; overflow: hidden; max-height: var(--bl2-preview-max-h, 14rem); }
.bl2-preview-shell.is-expanded{ max-height: none; }
.bl2-preview-fade{
  position: absolute; left: 0; right: 0; bottom: 30px; height: 46px;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.96));
  pointer-events: none;
}
.bl2-preview-shell.is-expanded .bl2-preview-fade{ display: none; }
.bl2-preview-toggle{
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: 4px;
  padding: 8px;
  border: none;
  background: transparent;
  color: var(--bl2-green-700);
  font-weight: 750;
  font-size: .84rem;
  cursor: pointer;
}

/* Safety accordion (Interakcije tab) */
.bl2-accordion{ display: grid; gap: 8px; }
.bl2-accordion-item{
  border: 1px solid var(--bl2-line);
  border-radius: var(--bl2-radius-sm);
  overflow: hidden;
}
.bl2-accordion-item[open]{ border-color: rgba(18,140,126,.3); }
.bl2-accordion-item summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 14px;
  cursor: pointer;
  font-weight: 750;
  font-size: .89rem;
  list-style: none;
}
.bl2-accordion-item summary::-webkit-details-marker{ display: none; }
.bl2-accordion-item summary::after{
  content: "";
  width: 9px; height: 9px;
  border-right: 2px solid var(--bl2-muted-2);
  border-bottom: 2px solid var(--bl2-muted-2);
  transform: rotate(45deg);
  transition: transform .15s ease;
  flex: 0 0 auto;
}
.bl2-accordion-item[open] summary::after{ transform: rotate(-135deg); }
.bl2-accordion-body{ padding: 0 14px 15px; }
.bl2-accordion--tight{ gap: 6px; }
.bl2-accordion--tight .bl2-accordion-item summary{ padding: 11px 12px; font-size: .85rem; }
.bl2-accordion--tight .bl2-accordion-body{ padding: 0 12px 12px; }

/* Farmaceutski podaci: one collapsible group per strength/variant, each
   holding its own SmPC/PIL document buttons plus a tight sub-accordion. */
.bl2-pharma-groups{ display: grid; gap: 10px; }
.bl2-pharma-group{
  border: 1px solid var(--bl2-line);
  border-radius: var(--bl2-radius-sm);
  overflow: hidden;
}
.bl2-pharma-group[open]{ border-color: rgba(18,140,126,.3); }
.bl2-pharma-group summary{
  display: flex;
  align-items: center;
  padding: 13px 14px;
  cursor: pointer;
  list-style: none;
  background: #fff;
}
.bl2-pharma-group summary::-webkit-details-marker{ display: none; }
.bl2-pharma-group-title{ font-weight: 800; font-size: .93rem; color: var(--bl2-ink); }
.bl2-pharma-group-body{ padding: 14px; display: grid; gap: 12px; }
.bl2-pharma-doc-actions{ display: flex; flex-wrap: wrap; gap: 8px; }
.bl2-pharma-doc-link{
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border-radius: var(--bl2-radius-pill);
  border: 1px solid rgba(18,140,126,.24);
  background: #fff;
  color: var(--bl2-green-700);
  font-weight: 700;
  font-size: .82rem;
  text-decoration: none;
}
.bl2-pharma-doc-link:hover{ background: var(--bl2-mint-50); }
.bl2-alt-list{ display: grid; gap: 12px; }
.bl2-alt-card{
  display: block;
  padding: 16px;
  border-radius: var(--bl2-radius-sm);
  border: 1px solid var(--bl2-line);
  text-decoration: none;
  color: var(--bl2-text);
}
a.bl2-alt-card:hover{ border-color: rgba(18,140,126,.4); background: var(--bl2-mint-50); }
.bl2-alt-top{ display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bl2-alt-title{ font-weight: 750; font-size: .92rem; }
.bl2-alt-sub{ font-size: .8rem; color: var(--bl2-muted); margin-top: 4px; }
.bl2-alt-badges{ display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.bl2-alt-note{
  font-size: .8rem;
  color: var(--bl2-muted);
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--bl2-line);
}

/* Documents */
.bl2-doc-group{ display: grid; gap: 8px; }
.bl2-doc-group + .bl2-doc-group{ margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--bl2-line); }
.bl2-doc-group-title{ font-weight: 700; font-size: .85rem; color: var(--bl2-green-700); }
.bl2-doc-list{ display: grid; gap: 8px; }
.bl2-doc-row{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 13px;
  border-radius: var(--bl2-radius-sm);
  border: 1px solid var(--bl2-line);
  text-decoration: none;
  color: var(--bl2-text);
}
.bl2-doc-row:hover{ background: var(--bl2-mint-50); border-color: rgba(18,140,126,.35); }
.bl2-doc-row svg{ width: 18px; height: 18px; color: var(--bl2-green); flex: 0 0 auto; }
.bl2-doc-main{ flex: 1; min-width: 0; }
.bl2-doc-title{ font-weight: 700; font-size: .87rem; }
.bl2-doc-meta{ font-size: .76rem; color: var(--bl2-muted); margin-top: 1px; }
.bl2-doc-action{ font-size: .78rem; font-weight: 750; color: var(--bl2-green-700); white-space: nowrap; }

/* Package tables (HZZO) */
.bl2-pkg-table-wrap{ overflow-x: auto; margin-bottom: 4px; }
.bl2-pkg-table{ width: 100%; border-collapse: collapse; font-size: .85rem; }
.bl2-pkg-table th{ text-align: left; color: var(--bl2-muted); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--bl2-line); font-size: .76rem; text-transform: uppercase; letter-spacing: .03em; }
.bl2-pkg-table td{ padding: 10px; border-bottom: 1px solid var(--bl2-line-soft); }
.bl2-pkg-table tr:last-child td{ border-bottom: none; }

.bl2-sidebar{ display: grid; gap: 16px; align-content: start; }
.bl2-side-nav{
  position: sticky;
  top: 96px;
  padding: 18px;
  display: grid;
  gap: 2px;
}
.bl2-side-nav-title{
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--bl2-muted-2);
  margin-bottom: 8px;
  padding: 0 12px;
}
.bl2-side-nav-item{
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 11px;
  color: var(--bl2-text);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 600;
}
.bl2-side-nav-item svg{ width: 17px; height: 17px; flex: 0 0 auto; color: var(--bl2-muted-2); }
.bl2-side-nav-item:hover{ background: var(--bl2-mint-50); color: var(--bl2-green-dark); text-decoration: none; }
.bl2-side-nav-item:hover svg{ color: var(--bl2-green-700); }
.bl2-side-nav-item.is-active{ background: var(--bl2-mint-100); color: var(--bl2-green-dark); font-weight: 700; }
.bl2-side-nav-item.is-active svg{ color: var(--bl2-green-700); }
@media (max-width: 1179.98px){
  .bl2-side-nav{ display: none; }
}
.bl2-sidebar-links{ display: grid; gap: 3px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--bl2-line); }
.bl2-sidebar-link{
  padding: 8px 10px;
  border-radius: 9px;
  font-size: .85rem;
  font-weight: 650;
  color: var(--bl2-muted);
  text-decoration: none;
}
.bl2-sidebar-link:hover{ background: var(--bl2-mint-50); color: var(--bl2-text); }

.bl2-ai-fab{
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 20px 13px 16px;
  border-radius: var(--bl2-radius-pill);
  border: 1px solid rgba(255,255,255,.22);
  background: linear-gradient(135deg, var(--bl2-green-dark), var(--bl2-green-700) 65%, var(--bl2-hero-2));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-weight: 800;
  font-size: .88rem;
  box-shadow: 0 14px 30px rgba(4,33,29,.38), inset 0 1px 0 rgba(255,255,255,.16);
  cursor: pointer;
}
.bl2-ai-fab svg{ width: 18px; height: 18px; }
.bl2-ai-fab[hidden]{ display: none; }
@media (max-width: 620px){
  .bl2-ai-fab{
    right: 14px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    padding: 11px 16px 11px 13px;
    font-size: .82rem;
    box-shadow: 0 6px 14px rgba(6,32,29,.18);
  }
  .bl2-ai-fab svg{ width: 16px; height: 16px; }
  .bl2-detail-main{ padding-bottom: 76px; }
}

.bl2-scroll-top{
  position: fixed;
  right: 18px;
  bottom: 92px;
  z-index: 54;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--bl2-line);
  background: #fff;
  color: var(--bl2-text);
  box-shadow: var(--bl2-shadow);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
}
.bl2-scroll-top.is-visible{ display: flex; }
.bl2-scroll-top svg{ width: 18px; height: 18px; }
@media (max-width: 620px){
  .bl2-scroll-top{ bottom: calc(env(safe-area-inset-bottom, 0px) + 68px); right: 16px; width: 36px; height: 36px; }
}

/* Mobile detail-page section order: pull the Sažetak + Brze akcije cards
   (desktop sidebar) up to just under the hero, keeping ALL clinical content
   together as one intact block. Only one level is flattened (detail-main +
   sidebar) so every visible top-level item gets an explicit order — this
   avoids the failure mode where an unclassed inner card (e.g. "Pakiranja i
   doplate") defaults to order:0 and jumps ahead of the hero. Scoped below
   the desktop breakpoint so the real 2-column grid is never affected. */
@media (max-width: 1179.98px){
  .bl2-detail-main, .bl2-sidebar{ display: contents; }
  .bl2-detail-layout .bl2-detail-hero{ order: 1; }
  .bl2-detail-layout .bl2-hero-banner{ order: 2; }
  .bl2-detail-layout .bl2-top-duo{ order: 3; }
  /* #section-pregled i #section-zamjene dobivaju svoj broj (ID selektor
     pobjeđuje generički [data-bl2-section-anchor] po specifičnosti,
     neovisno o redoslijedu u izvornom kodu) da Zamjene sjednu točno
     između Doziranja (unutar Pregled) i Sigurnost primjene, kako je
     zatraženo — inače bi (budući da sad žive u sidebaru) ispale skroz na
     dnu, iza Dokumenata. */
  .bl2-detail-layout #section-pregled{ order: 4; }
  .bl2-detail-layout #section-zamjene{ order: 5; }
  .bl2-detail-layout [data-bl2-section-anchor],
  .bl2-detail-layout .bl2-nuspojava-banner{ order: 6; }
  body.bl2-page--detail .bl2-summary-card{ display: none; }
  body.bl2-page--detail .bl2-rail-card,
  body.bl2-page--detail .bl2-quick-tools,
  body.bl2-page--detail .bl2-spec-card{ display: none; }
}

@media (min-width: 720px){
  .bl2-detail-hero{ padding: 32px 36px 26px; }
  .bl2-hero-facts{ flex-direction: row; flex-wrap: wrap; gap: 12px 26px; }
  .bl2-summary-grid{ grid-template-columns: 1fr; }
}
@media (min-width: 1180px){
  .bl2-detail-layout{ grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; }
  .bl2-detail-hero{ padding: 36px 42px 28px; }
  .bl2-detail-hero::after{ width: 58%; }
}

/* ==========================================================================
   AI MODAL (Pitaj AI o ovom lijeku) — reuses drugdb_ai_chat(_stream).php API.
   Ported to match the original baza-lijekova.php design: a centered dialog
   on desktop that becomes a true edge-to-edge fullscreen sheet on mobile.
   ========================================================================== */
.bl2-ai-modal{
  position: fixed; inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.bl2-ai-modal[hidden]{ display: none; }
.bl2-ai-modal-backdrop{
  position: absolute; inset: 0;
  background: rgba(15,23,42,.46);
  backdrop-filter: blur(8px);
}
.bl2-ai-dialog{
  position: relative;
  width: min(920px, calc(100vw - 40px));
  max-height: min(90vh, 920px);
  background: #fff;
  border: 1px solid rgba(15,23,42,.1);
  border-radius: 26px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 28px 72px rgba(2,6,23,.28);
}
.bl2-ai-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(15,23,42,.08);
  background: linear-gradient(180deg, #fbfffe 0%, #fff 100%);
}
.bl2-ai-eyebrow{ margin: 0 0 4px; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 800; color: var(--bl2-green-700); }
.bl2-ai-title{ margin: 0; font-size: 1.12rem; font-weight: 900; color: var(--bl2-ink); }
.bl2-ai-subtitle{ margin: 4px 0 0; font-size: .93rem; line-height: 1.35; color: var(--bl2-muted); }
.bl2-ai-close{
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.1);
  background: #f8fafc;
  color: #334155;
  font-size: 1.35rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.bl2-ai-close:hover{ background: #eef2f7; color: var(--bl2-ink); }
.bl2-ai-note{
  margin: 0;
  padding: 12px 18px;
  color: #475569;
  background: #f8fafc;
  border-bottom: 1px solid rgba(15,23,42,.06);
  font-size: .92rem;
  line-height: 1.45;
}
.bl2-ai-modal.has-started .bl2-ai-note{ display: none; }
.bl2-ai-messages{
  flex: 1 1 auto;
  min-height: 230px;
  max-height: 52vh;
  overflow-y: auto;
  padding: 18px;
  background: linear-gradient(180deg, #fff 0%, #fbfefd 100%);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.bl2-ai-msg{
  max-width: 86%;
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 18px;
  line-height: 1.5;
  font-size: .96rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.bl2-ai-msg--assistant{
  align-self: flex-start;
  margin-right: auto;
  color: var(--bl2-ink);
  background: #f1f5f9;
  border: 1px solid rgba(15,23,42,.06);
  border-bottom-left-radius: 6px;
}
.bl2-ai-msg--assistant a{ color: var(--bl2-green-700); font-weight: 800; }
.bl2-ai-msg--user{
  align-self: flex-end;
  margin-left: auto;
  color: #fff;
  background: linear-gradient(135deg, var(--bl2-green) 0%, var(--bl2-green-700) 100%);
  border-bottom-right-radius: 6px;
}
.bl2-ai-handoff{
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  padding: .65rem .95rem;
  background: var(--bl2-green-700);
  color: #fff;
  font-weight: 850;
  cursor: pointer;
}
.bl2-ai-handoff:hover{ background: var(--bl2-green-dark); }
.bl2-ai-msg p{ margin: 0 0 8px; }
.bl2-ai-msg p:last-child{ margin-bottom: 0; }
.bl2-ai-msg ul, .bl2-ai-msg ol{ margin: 0 0 8px 18px; padding: 0; }
.bl2-ai-status{ display: flex; align-items: center; gap: 8px; color: var(--bl2-muted); font-style: italic; }
.bl2-ai-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 18px 4px;
  border-top: 1px solid rgba(15,23,42,.06);
  background: #fff;
  flex: 0 0 auto;
}
.bl2-ai-chip{
  border: 1px solid rgba(15,118,110,.18);
  background: rgba(15,118,110,.06);
  color: var(--bl2-green-700);
  border-radius: 999px;
  padding: .45rem .72rem;
  font-weight: 800;
  font-size: .86rem;
  cursor: pointer;
}
.bl2-ai-chip:hover{ background: rgba(15,118,110,.11); border-color: rgba(15,118,110,.34); }
.bl2-ai-form{
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 18px 18px;
  background: #fff;
  flex: 0 0 auto;
}
.bl2-ai-input{
  flex: 1 1 auto;
  min-width: 0;
  resize: none;
  border: 1px solid rgba(15,23,42,.14);
  border-radius: 18px;
  padding: .78rem .92rem;
  color: var(--bl2-ink);
  background: #fff;
  font: inherit;
  max-height: 130px;
  outline: none;
}
.bl2-ai-input:focus{ border-color: rgba(15,118,110,.42); box-shadow: 0 0 0 4px rgba(15,118,110,.1); }
.bl2-ai-send{
  flex: 0 0 auto;
  border: 0;
  border-radius: 18px;
  padding: .78rem 1rem;
  background: var(--bl2-green-dark);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}
.bl2-ai-send:disabled{ opacity: .58; cursor: wait; }

@media (max-width: 720px){
  .bl2-ai-modal{
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
  }
  .bl2-ai-dialog{
    width: 100%;
    max-height: none;
    height: 100dvh;
    border-radius: 0;
    border: 0;
  }
  .bl2-ai-head{ padding: calc(14px + env(safe-area-inset-top, 0px)) 14px 12px; }
  .bl2-ai-title{ font-size: 1rem; }
  .bl2-ai-messages{ max-height: none; min-height: 0; flex: 1 1 auto; overscroll-behavior: contain; padding-bottom: 16px; }
  .bl2-ai-chips{ min-height: 54px; align-items: center; padding-top: 10px; padding-bottom: 10px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; flex-wrap: nowrap; }
  .bl2-ai-chips::-webkit-scrollbar{ display: none; }
  .bl2-ai-chip{ flex: 0 0 auto; line-height: 1.15; }
  .bl2-ai-form{ border-top: 1px solid rgba(15,23,42,.06); }
}
.bl2-ai-modal.is-busy .bl2-ai-input{ opacity: .7; }

.bl2-ai-paywall{
  border: 1px solid rgba(18,140,126,.25);
  background: var(--bl2-mint-50);
  border-radius: 14px;
  padding: 14px;
  font-size: .87rem;
}
.bl2-ai-paywall-kicker{ font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 800; color: var(--bl2-green-700); }
.bl2-ai-paywall h3{ font-size: .95rem; margin: 4px 0 6px; }
.bl2-ai-paywall ul{ margin: 8px 0; padding-left: 18px; }
.bl2-ai-paywall-plan{ display: flex; justify-content: space-between; margin: 10px 0; font-size: .85rem; }
.bl2-ai-paywall-cta{
  display: inline-flex;
  padding: 10px 18px;
  border-radius: var(--bl2-radius-pill);
  background: var(--bl2-green);
  color: #fff;
  font-weight: 750;
  text-decoration: none;
  font-size: .85rem;
}

.bl2-ai-hint-toast{
  position: fixed;
  right: 18px;
  bottom: 92px;
  z-index: 56;
  max-width: 260px;
  background: var(--bl2-ink);
  color: #fff;
  border-radius: 14px;
  padding: 12px 14px;
  font-size: .8rem;
  box-shadow: var(--bl2-shadow-lg);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.bl2-ai-hint-toast[hidden]{ display: none; }
.bl2-ai-hint-close{
  border: none;
  background: transparent;
  color: rgba(255,255,255,.7);
  font-size: 1rem;
  cursor: pointer;
  flex: 0 0 auto;
  line-height: 1;
}

/* ==========================================================================
   Native app safe-area accommodation (matches sitewide pattern)
   ========================================================================== */
body.native-public-page .bl2-topbar{
  padding-top: env(safe-area-inset-top, 0px);
  height: calc(var(--bl2-topbar-h) + env(safe-area-inset-top, 0px));
}
body.native-public-page .bl2-topbar-inner{ height: var(--bl2-topbar-h); }

/* ==========================================================================
   Small screens fine-tuning
   ========================================================================== */
/* Mobile / small-tablet detail hero: keep the artwork as a subtle top-right
   accent and lay a full scrim over it so the title, active substance, facts
   and tab strip are always high-contrast. Tabs scroll horizontally instead of
   wrapping into the artwork. */
@media (max-width: 720px){
  .bl2-hero-crumbs{ display: flex; }
  body.bl2-page--detail .bl2-crumbs{ display: none; }
  .bl2-detail-hero::after{
    width: 100%;
    background-position: 82% 50%;
    background-size: cover;
    opacity: .68;
    pointer-events: none;
  }
  .bl2-detail-hero::before{
    background: linear-gradient(100deg, var(--bl2-hero-1) 40%, rgba(4,33,29,.55) 62%, rgba(4,33,29,.16) 100%);
  }
  .bl2-hero-content{ max-width: none; }
  .bl2-hero-tabs{
    flex-wrap: nowrap;
    justify-content: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0 24px 0 0;
    margin-top: 5px;
    gap: 32px;
  }
  .bl2-hero-tabs.is-overflowing{ justify-content: flex-start; }
  .bl2-hero-tabs::-webkit-scrollbar{ display: none; }
  .bl2-hero-tab{
    flex: 0 0 auto;
    padding: 14px 0;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: rgba(255,255,255,.76);
  }
  .bl2-hero-tab:hover{ background: transparent; }
  .bl2-hero-tab.is-active{
    background: transparent;
    color: #fff;
    font-weight: 750;
    border-bottom-color: var(--bl2-teal);
  }
  .bl2-hero-pill-badge{ margin-bottom: 10px; }
  .bl2-hero-title-row{ margin-bottom: 4px; }
  .bl2-hero-subtitle{ margin-bottom: 14px; }
  .bl2-hero-facts{ gap: 10px; margin-bottom: 30px; }
  .bl2-hero-fact{ font-size: .85rem; }
}

@media (max-width: 480px){
  .bl2-search-row{ border-radius: 16px; }
  .bl2-search-field .bl2-search-glyph{ display: none; }
  .bl2-search-field input{ height: 52px; line-height: 52px; width: 100%; padding-left: 18px; }
  .bl2-search-submit{ flex: 0 0 auto; min-width: 0; width: 48px; height: 48px; padding: 0; margin: 5px; }
  .bl2-search-submit span{ display: none; }
  .bl2-summary-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 640px){
  /* Header/hero color continuity: the topbar's own gradient normally ends
     near #06423b while the hero's gradient starts near #04211d — different
     enough shades that the boundary reads as a seam even with zero gap.
     A flat color only matches hero at the LEFT edge — moving right toward
     the hamburger, hero's own gradient has already progressed to a lighter
     shade, so a flat topbar mismatches specifically there. Mirroring hero's
     exact gradient (same colors, same angle) keeps the match consistent
     across the full width, not just at x=0. Applied to EVERY page (not
     just detail) so the topbar looks identical everywhere. */
  body.bl2-page .bl2-topbar{
    background: var(--bl2-hero-1);
    border-bottom: none;
    box-shadow: none;
  }
  .bl2-detail-hero{ padding: 24px 24px 20px; border-radius: 0; }
  .bl2-hero-pill-badge{ display: none; }
  .bl2-hero-otc-badge{ display: none !important; }
  .bl2-hero-crumbs{ margin-bottom: 28px; }
  .bl2-detail-hero .bl2-hero-title{ font-size: clamp(2rem, 7.2vw, 2.4rem); line-height: 1.1; font-weight: 750; }
  .bl2-hero-subtitle{ font-size: clamp(1.05rem, 3.2vw, 1.15rem); line-height: 1.35; opacity: .85; font-weight: 500; margin-bottom: 48px; }
  .bl2-main{ padding-left: 12px; padding-right: 12px; }
  .bl2-crumbs{ padding-left: 12px; padding-right: 12px; }

  /* Removes the visible white gap between the topbar and the hero: .bl2-main
     normally has a small top padding (for other pages/breakpoints), but the
     hero is the FIRST element inside <main> on the detail page, so that
     padding was showing page-background color before the hero's own dark
     background started — reads as a "separator strip". Header now flows
     directly into the hero. */
  body.bl2-page--detail .bl2-main{ padding-top: 0; }

  /* Full-bleed edge-to-edge cards on the detail page (hero, info banner,
     every content/sidebar card) — breaks out of .bl2-main's 12px padding
     via negative margins and drops the corner radius, so the page reads as
     continuous full-width sections rather than inset, rounded cards.
     Shadow and side borders are dropped too (a shadow/side-border reads as
     a "card" even at full width); only a thin top/bottom separator line
     remains between sections. Breadcrumb text keeps its small indent; only
     the card BACKGROUNDS go edge-to-edge (each card's own internal padding
     still protects its content from touching the true screen edge). */
  body.bl2-page--detail .bl2-detail-hero,
  body.bl2-page--detail .bl2-info-banner,
  body.bl2-page--detail .bl2-detail-main .bl2-card,
  body.bl2-page--detail .bl2-sidebar .bl2-card{
    margin-left: -12px;
    margin-right: -12px;
    width: calc(100% + 24px);
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    box-shadow: none;
  }
  body.bl2-page--detail .bl2-info-banner,
  body.bl2-page--detail .bl2-detail-main .bl2-card,
  body.bl2-page--detail .bl2-sidebar .bl2-card{
    border-top: 1px solid var(--bl2-line-soft);
    border-bottom: 1px solid var(--bl2-line-soft);
  }
  body.bl2-page--detail .bl2-detail-layout{ gap: 0; }
  body.bl2-page--detail .bl2-info-banner{ margin-top: 0; }
  body.bl2-page--detail .bl2-summary-card,
  body.bl2-page--detail [data-bl2-section-anchor]{ margin-top: 20px; }
  body.bl2-page--detail .bl2-detail-hero,
  body.bl2-page--detail .bl2-info-banner{ margin-bottom: 0; }
  body.bl2-page--detail .bl2-panel:not(.bl2-section-collapsible){ padding: 22px; }
  body.bl2-page--detail .bl2-panel-sub{ display: none; }
  body.bl2-page--detail .bl2-rich p,
  body.bl2-page--detail .bl2-rich ul li,
  body.bl2-page--detail .bl2-rich ol li{ font-size: 1rem; line-height: 1.6; }
}

/* Utility */
.bl2-hide{ display: none !important; }

/* Dropdown trigger wrapper (used for "Alati" in the desktop nav) */
.bl2-topbar-nav-item{ position: relative; }

/* Focus visibility (a11y) */
body.bl2-page a:focus-visible,
body.bl2-page button:focus-visible,
body.bl2-page input:focus-visible{
  outline: 2px solid var(--bl2-teal);
  outline-offset: 2px;
}
/* Search inputs already get a clear, single focus treatment from their
   wrapping control (.bl2-search-row border+glow, header search's own
   background/border shift, .bl2-interactions-search border+glow) —
   suppress the generic outline here so focus never shows as a double ring. */
body.bl2-page input[data-bl2-search-input]:focus-visible,
body.bl2-page input[data-bl2-interactions-input]:focus-visible,
body.bl2-page input[data-bl2-alternatives-input]:focus-visible{
  outline: none;
}

/* Loading skeleton for progressive result loading */
.bl2-skeleton-card{
  border-radius: var(--bl2-radius);
  border: 1.5px solid var(--bl2-line);
  background: linear-gradient(90deg, #fff 0%, var(--bl2-mint-50) 50%, #fff 100%);
  background-size: 200% 100%;
  animation: bl2-shimmer 1.3s ease-in-out infinite;
  height: 96px;
}
@keyframes bl2-shimmer{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce){
  .bl2-load-more-btn.is-loading svg{ animation: none; }
  .bl2-skeleton-card{ animation: none; }
}

/* ==========================================================================
   MOBILE DRAWER — off-canvas nav opened by the hamburger button, styled to
   match razgovori2.php's sidebar pattern (primary action, primary nav,
   divider, secondary tools, divider, footer). Desktop is untouched: this
   whole component (and its toggle button) is hidden at ≥1180px, where the
   existing topbar-nav + generic AppShellDrawer continue to handle things.
   ========================================================================== */
.bl2-drawer-backdrop{
  position: fixed; inset: 0;
  background: rgba(15,23,42,.45);
  z-index: 205;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .2s ease, visibility 0s linear .2s;
}
.bl2-drawer-backdrop.is-visible{
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity .2s ease, visibility 0s linear 0s;
}
.bl2-drawer{
  position: fixed;
  top: 0; left: 0; bottom: 0;
  height: 100dvh;
  width: min(86vw, 320px);
  max-width: 320px;
  z-index: 210;
  background: #fff;
  box-shadow: 0 20px 60px rgba(15,23,42,.28);
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  overflow-y: auto;
  overflow-x: hidden;
  transform: translateX(-105%);
  transition: transform .22s ease;
}
.bl2-drawer.is-open{ transform: translateX(0); }
.bl2-drawer-brand{ display: flex; align-items: center; gap: 10px; padding: 2px 4px 2px; font-weight: 800; font-size: 1.05rem; color: #0f172a; text-decoration: none; }
body.bl2-page .bl2-drawer-brand span{ margin-top: -4px; }
.bl2-drawer-brand img{ width: 28px; height: 28px; flex: 0 0 auto; }
.bl2-drawer-newrow{ display: flex; align-items: center; gap: 8px; padding: 12px 2px 16px; }
/* Tražilica koja je zamijenila "Novi razgovor" + zatvori-x (isti
   [data-bl2-search-field] obrazac, JS ga automatski pokupi). */
.bl2-drawer-search{ position: relative; flex: 1 1 auto; width: 100%; }
.bl2-drawer-search-icon{
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--bl2-muted); pointer-events: none; display: flex;
}
.bl2-drawer-search-icon svg{ width: 16px; height: 16px; }
.bl2-drawer-search input{
  width: 100%; height: 46px;
  border-radius: 14px;
  border: 1.5px solid rgba(18,140,126,.18);
  background: #fff;
  color: var(--bl2-text);
  padding: 0 40px 0 40px;
  font-size: .92rem;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.bl2-drawer-search input::placeholder{ color: var(--bl2-muted); }
.bl2-drawer-search input:focus{
  border-color: var(--bl2-green);
  box-shadow: 0 0 0 3px rgba(18,140,126,.12);
}
.bl2-drawer-newchat{
  flex: 1 1 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 48px; padding: 0 16px;
  border-radius: 14px; border: 1.5px solid rgba(18,140,126,.18);
  background: #fff; box-shadow: var(--bl2-shadow-sm);
  color: var(--bl2-green-dark); font-weight: 700; font-size: .96rem;
  white-space: nowrap; text-decoration: none;
}
.bl2-drawer-newchat:hover{ border-color: var(--bl2-green); background: var(--bl2-mint-50); }
.bl2-drawer-newchat svg{ flex: 0 0 auto; width: 17px; height: 17px; }
.bl2-drawer-close{
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 11px; border: 1px solid var(--bl2-line);
  background: #fff; color: var(--bl2-muted);
  font-size: 1.05rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.bl2-drawer-close:hover{ background: var(--bl2-mint-50); color: var(--bl2-green-dark); }
.bl2-drawer-divider{ flex: 0 0 auto; height: 1px; margin: 14px 6px 14px; background: rgba(15,60,52,.14); }
.bl2-drawer-divider-top{ margin-top: 14px; }
body.bl2-page .bl2-drawer-item[data-bl2-interactions-open]{ background: rgba(37,99,235,.10); color: #1e4fbf; }
body.bl2-page .bl2-drawer-item[data-bl2-interactions-open] svg{ color: #2563eb; }
body.bl2-page .bl2-drawer-item[data-bl2-interactions-open]:hover{ background: rgba(37,99,235,.16); color: #1e4fbf; }
.bl2-drawer-brand-wrap{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bl2-drawer-user-email{ font-size: .78rem; color: var(--bl2-muted); word-break: break-all; padding: 0 4px 2px 42px; margin-top: -9px; }
.bl2-drawer-recent{ margin: 2px 0 4px; }
.bl2-drawer-recent-title{ font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--bl2-muted); padding: 0 6px 8px; }
.bl2-drawer-recent-list{ display: grid; gap: 7px; }
.bl2-drawer-recent-item{ display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px 8px; border-radius: 10px; text-decoration: none; color: var(--bl2-ink); transition: background .14s ease; }
.bl2-drawer-recent-item:hover{ background: var(--bl2-green-soft); }
.bl2-drawer-recent-item svg{ flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; color: var(--bl2-muted); }
.bl2-drawer-recent-item-title{ flex: 1 1 auto; min-width: 0; font-size: .87rem; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.bl2-drawer-recent-item-time{ flex: 0 0 auto; font-size: .76rem; color: var(--bl2-muted); margin-top: 1px; }
body.bl2-page .bl2-drawer-recent-showall{ display: block; margin: 8px 6px 2px; padding: 9px 8px; border: none; background: transparent; cursor: pointer; color: var(--bl2-green-dark); font-weight: 700; font-size: .85rem; text-align: center; text-decoration: none; border-radius: 10px; }
body.bl2-page .bl2-drawer-recent-showall:hover{ text-decoration: underline; background: var(--bl2-green-soft); }
/* "AI razgovor" u drawer-u — naglašeni zeleni gloss gumb, isti recept kao
   .bl2-quick-action-ai (Brze akcije), da AI ostane vizualno dosljedan kroz
   cijelu aplikaciju. */
/* "AI razgovor" u drawer-u — ista struktura/padding kao običan
   .bl2-drawer-item (nije više "uvijek aktivan" pun gloss gumb, to je bilo
   prenaglašeno), suptilna PLAVA pozadina (ista paleta kao .bl2-badge.
   substance) — namjerno drugačija od zelene/mint koju koristi .is-active,
   da se dvoje ne miješaju vizualno. */
body.bl2-page .bl2-drawer-ai-btn{
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  border-radius: 12px;
  background: rgba(37,99,235,.10);
  color: #1e4fbf;
  text-decoration: none;
  font-size: .92rem;
  font-weight: 700;
}
body.bl2-page .bl2-drawer-ai-btn:hover{
  background: rgba(37,99,235,.16);
  border: 1px solid rgba(37,99,235,.3);
  color: #1e4fbf;
  text-decoration: none;
}
.bl2-drawer-ai-btn svg{ flex: 0 0 auto; width: 18px; height: 18px; }
.bl2-drawer-nav{ display: grid; gap: 2px; padding: 0 2px; }
.bl2-drawer-item{
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 12px; border-radius: 12px; border: none; background: transparent;
  color: var(--bl2-ink); text-decoration: none; font-size: .92rem; font-weight: 600;
  cursor: pointer;
}
.bl2-drawer-item:hover{ background: var(--bl2-mint-50); text-decoration: none; color: var(--bl2-ink); }
.bl2-drawer-item svg{ flex: 0 0 auto; width: 18px; height: 18px; display: block; }
.bl2-drawer-item.is-active{ background: var(--bl2-mint-100); color: var(--bl2-green-dark); font-weight: 700; }
.bl2-drawer-drug-toggle svg:last-child{ margin-left: auto; width: 15px; height: 15px; color: var(--bl2-green-dark); opacity: .6; transition: transform .15s ease; flex: 0 0 auto; }
.bl2-drawer-drug-toggle[aria-expanded="false"] svg:last-child{ transform: rotate(-90deg); }
.bl2-drawer-subnav{ display: grid; gap: 1px; padding-left: 30px; margin: 2px 0 4px; }
.bl2-drawer-subnav[hidden]{ display: none; }
.bl2-drawer-subitem{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 9px;
  color: var(--bl2-muted);
  text-decoration: none;
  font-size: .85rem;
  font-weight: 600;
}
.bl2-drawer-subitem svg{ width: 13px; height: 13px; flex: 0 0 auto; opacity: .6; }
.bl2-drawer-subitem:hover{ background: var(--bl2-mint-50); color: var(--bl2-green-dark); text-decoration: none; }
.bl2-drawer-item.is-active svg{ color: var(--bl2-green-dark); }
.bl2-drawer-spacer{ flex: 1 1 auto; }
.bl2-drawer-footer{
  display: grid; gap: 2px; padding: 14px 2px 2px;
  border-top: 1px solid var(--bl2-line-soft); margin-top: 12px;
}
.bl2-drawer-foot-item{
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 10px; border: none; background: transparent; border-radius: 11px;
  text-align: left; cursor: pointer; color: var(--bl2-ink); text-decoration: none;
  font-size: .87rem; font-weight: 600; white-space: nowrap; overflow: hidden;
  font-family: inherit;
}
.bl2-drawer-foot-item:hover{ background: var(--bl2-mint-50); text-decoration: none; color: var(--bl2-ink); }
.bl2-drawer-foot-item svg{ flex: 0 0 auto; color: var(--bl2-muted-2); width: 17px; height: 17px; display: block; }
.bl2-drawer-foot-danger{ color: #b3261e; }
.bl2-drawer-foot-danger svg{ color: #b3261e; }
.bl2-drawer-foot-danger:hover{ background: rgba(179,38,30,.08); color: #b3261e; }

/* Napomena: .bl2-drawer se NE skriva na desktopu — to je bio zaseban bug
   (odvojen od hamburger-gumb swapa gore): postojalo je pravilo koje je
   forsiralo display:none na .bl2-drawer/.bl2-drawer-backdrop na >=1180px,
   pa se drawer nije mogao otvoriti na desktopu čak ni s ispravnim gumbom. */

/* ==========================================================================
   Javni modal "Provjera interakcija lijekova" (do 5 lijekova, bez prijave).
   Isti backdrop/veličina obrazac kao .bl2-ai-modal, zasebne klase.
   ========================================================================== */
.bl2-interactions-modal{
  position: fixed; inset: 0;
  z-index: 130;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.bl2-interactions-modal[hidden]{ display: none; }
.bl2-interactions-modal-backdrop{
  position: absolute; inset: 0;
  background: rgba(15,23,42,.46);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.bl2-interactions-modal-panel{
  position: relative;
  width: min(760px, calc(100vw - 40px));
  max-height: min(90vh, 880px);
  background: #fff;
  border: 1px solid rgba(15,23,42,.1);
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(4,33,29,.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bl2-interactions-modal-header{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 21px 22px 18px;
  border-bottom: 1px solid var(--bl2-line);
  flex: 0 0 auto;
}
.bl2-interactions-modal-icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 11px;
  background: var(--bl2-mint-50);
  color: var(--bl2-green-700);
  flex: 0 0 auto;
}
.bl2-interactions-modal-icon svg{ width: 18px; height: 18px; }
.bl2-interactions-modal-heading{ flex: 1 1 auto; min-width: 0; }
.bl2-interactions-modal-title-row{ display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.bl2-interactions-modal-title{ font-size: 1.08rem; font-weight: 800; color: var(--bl2-ink); }
.bl2-interactions-pro-badge{
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--bl2-radius-pill);
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  background: rgba(37,99,235,.10);
  color: #1e4fbf;
  white-space: nowrap;
}
.bl2-interactions-pro-badge.is-trial{ background: rgba(234,179,8,.14); color: #854d0e; }
.bl2-interactions-pro-badge.is-locked{ background: rgba(15,23,42,.08); color: var(--bl2-muted); }
.bl2-interactions-modal-sub{ font-size: .85rem; color: var(--bl2-muted); margin-top: 2px; line-height: 1.35; }
.bl2-interactions-modal-close{
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--bl2-line);
  background: #fff;
  color: var(--bl2-muted);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.bl2-interactions-modal-close:hover{ background: var(--bl2-mint-50); color: var(--bl2-green-700); }
.bl2-interactions-modal-close svg{ width: 16px; height: 16px; }

.bl2-interactions-modal-body{
  padding: 20px 24px 24px;
  overflow-y: auto;
  flex: 1 1 auto;
}

.bl2-interactions-search{
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--bl2-line);
  border-radius: 14px;
  padding: 4px 4px 4px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.bl2-interactions-search:focus-within{
  border-color: var(--bl2-teal);
  box-shadow: 0 0 0 3px rgba(20,184,166,.14);
}
.bl2-interactions-search-icon{ display: inline-flex; color: var(--bl2-muted-2); flex: 0 0 auto; }
.bl2-interactions-search-icon svg{ width: 18px; height: 18px; }
.bl2-interactions-search input{
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  line-height: 46px;
  border: none;
  outline: none;
  background: transparent;
  font-size: .96rem;
  color: var(--bl2-text);
}
.bl2-interactions-search input::placeholder{ color: var(--bl2-muted-2); }
.bl2-interactions-add-btn{
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 11px;
  border: none;
  background: var(--bl2-green-700);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s ease, opacity .15s ease;
}
.bl2-interactions-add-btn svg{ width: 18px; height: 18px; }
.bl2-interactions-add-btn:hover:not(:disabled){ background: var(--bl2-green-dark); }
.bl2-interactions-add-btn:disabled{ opacity: .4; cursor: not-allowed; }
.bl2-interactions-search .bl2-autocomplete{ left: 0; right: 0; top: calc(100% + 8px); }

.bl2-interactions-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.bl2-interactions-chips:empty{ display: none; }
.bl2-interactions-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 14px;
  border-radius: var(--bl2-radius-pill);
  background: var(--bl2-mint-50);
  color: var(--bl2-green-dark);
  font-size: .88rem;
  font-weight: 700;
}
.bl2-interactions-chip-remove{
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: none;
  background: rgba(11,109,98,.14);
  color: var(--bl2-green-dark);
  cursor: pointer;
  font-size: .8rem;
  line-height: 1;
}
.bl2-interactions-chip-remove:hover{ background: rgba(11,109,98,.24); }

.bl2-interactions-hint{
  margin-top: 10px;
  font-size: .82rem;
  color: var(--bl2-muted);
}
.bl2-interactions-hint.is-error{ color: #b42318; font-weight: 600; }

.bl2-interactions-actions{
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.bl2-interactions-check-btn{
  flex: 1 1 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 48px;
  border-radius: 13px;
  border: none;
  background: var(--bl2-green-700);
  color: #fff;
  font-weight: 700;
  font-size: .96rem;
  cursor: pointer;
  transition: background .15s ease, opacity .15s ease;
}
.bl2-interactions-check-btn svg{ width: 18px; height: 18px; }
.bl2-interactions-check-btn:hover:not(:disabled){ background: var(--bl2-green-dark); }
.bl2-interactions-check-btn:disabled{ opacity: .45; cursor: not-allowed; }
.bl2-interactions-check-btn.is-loading{ opacity: .75; cursor: wait; }
.bl2-interactions-clear-btn{
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px;
  padding: 0 18px;
  border-radius: 13px;
  border: 1.5px solid var(--bl2-line);
  background: #fff;
  color: var(--bl2-text);
  font-weight: 700;
  font-size: .92rem;
  cursor: pointer;
}
.bl2-interactions-clear-btn svg{ width: 15px; height: 15px; }
.bl2-interactions-clear-btn:hover{ background: var(--bl2-paper); }

.bl2-interactions-results{ margin-top: 22px; }
.bl2-interactions-results[hidden]{ display: none; }

.bl2-interactions-overall{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid;
  margin-bottom: 16px;
}
.bl2-interactions-overall-icon{ flex: 0 0 auto; display: inline-flex; margin-top: 1px; }
.bl2-interactions-overall-icon svg{ width: 20px; height: 20px; }
.bl2-interactions-overall-title{ font-weight: 800; font-size: .96rem; margin-bottom: 3px; }
.bl2-interactions-overall-summary{ font-size: .9rem; line-height: 1.5; }

.bl2-interactions-overall.sev-none{ background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.bl2-interactions-overall.sev-caution{ background: #fefce8; border-color: #fde68a; color: #854d0e; }
.bl2-interactions-overall.sev-significant{ background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.bl2-interactions-overall.sev-high{ background: #fef2f2; border-color: #fecaca; color: #991b1b; }

.bl2-interactions-cards-heading{
  font-weight: 800;
  font-size: .92rem;
  color: var(--bl2-ink);
  margin-bottom: 10px;
}
.bl2-interactions-card{
  border: 1px solid var(--bl2-line);
  border-left-width: 4px;
  border-radius: 13px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.bl2-interactions-card.sev-none{ border-left-color: #22c55e; }
.bl2-interactions-card.sev-caution{ border-left-color: #eab308; }
.bl2-interactions-card.sev-significant{ border-left-color: #f97316; }
.bl2-interactions-card.sev-high{ border-left-color: #ef4444; }

.bl2-interactions-card-top{ display: flex; align-items: flex-start; gap: 10px; }
.bl2-interactions-badge{ margin-top: 3px; }

@media (max-width: 480px){
  .bl2-interactions-card-top{ flex-direction: column; align-items: flex-start; gap: 6px; }
  .bl2-interactions-badge{ margin-top: 0; }
}
.bl2-interactions-badge{
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border-radius: var(--bl2-radius-pill);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  flex: 0 0 auto;
}
.bl2-interactions-badge.sev-none{ background: #dcfce7; color: #166534; }
.bl2-interactions-badge.sev-caution{ background: #fef9c3; color: #854d0e; }
.bl2-interactions-badge.sev-significant{ background: #ffedd5; color: #9a3412; }
.bl2-interactions-badge.sev-high{ background: #fee2e2; color: #991b1b; }
.bl2-interactions-card-title{ font-weight: 750; font-size: .92rem; color: var(--bl2-ink); flex: 1 1 auto; }
.bl2-interactions-card-why{ font-size: .88rem; color: var(--bl2-text); line-height: 1.5; margin-top: 8px; }
.bl2-interactions-card-action{ font-size: .88rem; color: var(--bl2-text); line-height: 1.5; margin-top: 8px; }
.bl2-interactions-card-action strong{ color: var(--bl2-green-700); }

.bl2-interactions-error{
  padding: 14px 16px;
  border-radius: 13px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  font-size: .9rem;
  line-height: 1.5;
}

.bl2-interactions-loading{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px;
  color: var(--bl2-muted);
  font-size: .9rem;
}
.bl2-interactions-spinner{
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2.5px solid var(--bl2-line);
  border-top-color: var(--bl2-green-700);
  animation: bl2InteractionsSpin .7s linear infinite;
  flex: 0 0 auto;
}
@keyframes bl2InteractionsSpin{ to{ transform: rotate(360deg); } }

.bl2-interactions-disclaimer{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--bl2-line);
  font-size: .82rem;
  line-height: 1.5;
  color: var(--bl2-muted);
}
.bl2-interactions-disclaimer svg{ width: 16px; height: 16px; color: var(--bl2-muted-2); flex: 0 0 auto; margin-top: 2px; }

@media (max-width: 640px){
  .bl2-interactions-modal{ padding: 0; align-items: stretch; justify-content: stretch; }
  .bl2-interactions-modal-panel{ width: 100%; max-height: none; height: 100%; border-radius: 0; }
  .bl2-interactions-actions{ flex-direction: column; }
  .bl2-interactions-clear-btn{ order: 2; }
}

/* ==========================================================================
   Javni modal "Pronađi zamjene lijeka" (čista SQL pretraga, bez AI-ja).
   Ista backdrop/panel osnova kao ostali modali, nove klase za sadržaj
   specifičan ovom alatu.
   ========================================================================== */
.bl2-alternatives-modal{
  position: fixed; inset: 0;
  z-index: 130;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.bl2-alternatives-modal[hidden]{ display: none; }
.bl2-alternatives-modal-backdrop{
  position: absolute; inset: 0;
  background: rgba(15,23,42,.46);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.bl2-alternatives-modal-panel{
  position: relative;
  width: min(1000px, calc(100vw - 40px));
  max-height: min(90vh, 900px);
  background: #fff;
  border: 1px solid rgba(15,23,42,.1);
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(4,33,29,.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bl2-alternatives-modal-header{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 17px 18px 14px;
  border-bottom: 1px solid var(--bl2-line);
  flex: 0 0 auto;
}
.bl2-alternatives-modal-icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 10px;
  background: var(--bl2-mint-50);
  color: var(--bl2-green-700);
  flex: 0 0 auto;
}
.bl2-alternatives-modal-icon svg{ width: 15px; height: 15px; }
.bl2-alternatives-modal-heading{ flex: 1 1 auto; min-width: 0; }
.bl2-alternatives-modal-title{ font-size: .98rem; font-weight: 800; color: var(--bl2-ink); }
.bl2-alternatives-modal-sub{ font-size: .78rem; color: var(--bl2-muted); margin-top: 1px; line-height: 1.3; }
.bl2-alternatives-modal-close{
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--bl2-line);
  background: #fff;
  color: var(--bl2-muted);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.bl2-alternatives-modal-close:hover{ background: var(--bl2-mint-50); color: var(--bl2-green-700); }
.bl2-alternatives-modal-close svg{ width: 16px; height: 16px; }

.bl2-alternatives-modal-body{
  padding: 20px 22px 22px;
  overflow-y: auto;
  flex: 1 1 auto;
}

.bl2-alternatives-search{
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--bl2-line);
  border-radius: 14px;
  padding: 4px 4px 4px 14px;
}
@media (min-width: 760px){
  .bl2-alternatives-search{ max-width: 80%; margin: 0 auto; }
  .bl2-alternatives-modal-body{ min-height: 320px; }
}
.bl2-alternatives-search-btn{
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none;
  border-radius: 10px;
  background: var(--bl2-green-700);
  color: #fff;
  cursor: pointer;
}
.bl2-alternatives-search-btn svg{ width: 16px; height: 16px; }
.bl2-alternatives-clear-btn{
  flex: 0 0 auto;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--bl2-muted-2);
  cursor: pointer;
}
.bl2-alternatives-clear-btn[hidden]{ display: none; }
.bl2-alternatives-clear-btn:hover{ background: var(--bl2-paper); color: var(--bl2-text); }
.bl2-alternatives-clear-btn svg{ width: 14px; height: 14px; }
.bl2-alternatives-search-btn:hover{ background: var(--bl2-green-dark); }
.bl2-alternatives-search:focus-within{ border-color: var(--bl2-teal); box-shadow: 0 0 0 3px rgba(20,184,166,.14); }
.bl2-alternatives-search-icon{ display: inline-flex; color: var(--bl2-muted-2); flex: 0 0 auto; }
.bl2-alternatives-search-icon svg{ width: 18px; height: 18px; }
.bl2-alternatives-search input{
  flex: 1 1 auto; min-width: 0;
  height: 46px; line-height: 46px;
  border: none; background: transparent;
  font-size: .96rem; color: var(--bl2-text);
}
.bl2-alternatives-search input::placeholder{ color: var(--bl2-muted-2); }
.bl2-alternatives-search .bl2-autocomplete{ left: 0; right: 0; top: calc(100% + 8px); }

.bl2-alternatives-find-btn{
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 48px;
  margin-top: 10px;
  border-radius: 13px;
  border: none;
  background: linear-gradient(135deg, var(--bl2-green-700), var(--bl2-green-dark) 120%);
  color: #fff;
  font-weight: 700;
  font-size: .96rem;
  cursor: pointer;
}
.bl2-alternatives-find-btn svg{ width: 18px; height: 18px; }
.bl2-alternatives-find-btn:hover:not(:disabled){ background: var(--bl2-green-dark); }
.bl2-alternatives-find-btn:disabled{ opacity: .45; cursor: not-allowed; }

.bl2-alternatives-source-chip{ margin-top: 12px; }
.bl2-alternatives-source-chip[hidden]{ display: none; }
.bl2-alternatives-source-chip .bl2-interactions-chip{ display: inline-flex; }

@media (min-width: 760px){
  .bl2-alternatives-content{ display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 22px; align-items: start; }
}
@media (max-width: 759.98px){
  .bl2-alternatives-content{ display: flex; flex-direction: column; }
  .bl2-alternatives-rail{ order: -1; margin-bottom: 4px; }
}
.bl2-alternatives-content{ margin-top: 18px; }
.bl2-alternatives-content[hidden]{ display: none; }

.bl2-alternatives-info-banner{
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px;
  border-radius: 13px;
  background: var(--bl2-mint-50);
  border: 1px solid rgba(18,140,126,.16);
  color: var(--bl2-muted);
  font-size: .84rem;
  line-height: 1.5;
  margin-bottom: 16px;
}
.bl2-alternatives-info-banner svg{ width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; color: var(--bl2-green-700); }

.bl2-alternatives-results-heading{
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 800; font-size: .96rem; color: var(--bl2-ink);
  margin-bottom: 10px;
}

.bl2-alternatives-group{ margin-bottom: 18px; }
.bl2-alternatives-group-title{ font-weight: 750; font-size: .84rem; color: var(--bl2-muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px; }

.bl2-alternatives-card{
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px 14px 12px;
  border: 1px solid var(--bl2-line);
  border-radius: 13px;
  margin-bottom: 8px;
}
.bl2-alternatives-list-badge{
  position: absolute;
  top: 7px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--bl2-radius-pill);
  font-size: .68rem;
  font-weight: 800;
  white-space: nowrap;
}
.bl2-alternatives-list-badge.badge-no_copay{ background: #dcfce7; color: #166534; }
.bl2-alternatives-list-badge.badge-copay{ background: #ffedd5; color: #9a3412; }
.bl2-alternatives-list-badge.badge-otc{ background: #dbeafe; color: #1e40af; }
.bl2-alternatives-list-badge.badge-unknown{ background: rgba(15,23,42,.08); color: var(--bl2-muted); }
.bl2-alternatives-card-icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 11px;
  background: var(--bl2-mint-50);
  color: var(--bl2-green-700);
  flex: 0 0 auto;
  align-self: flex-start;
}
.bl2-alternatives-card-icon svg{ width: 18px; height: 18px; }
.bl2-alternatives-card-body{ flex: 1 1 auto; min-width: 0; }
.bl2-alternatives-card-top{ display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.bl2-alternatives-card-title{ font-weight: 750; font-size: .92rem; color: var(--bl2-ink); }
.bl2-alternatives-card-sub{ font-size: .82rem; color: var(--bl2-muted); margin-top: 2px; }
.bl2-alternatives-card-meta{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; font-size: .78rem; color: var(--bl2-muted); }
.bl2-alternatives-card-meta span{ display: inline-flex; align-items: center; gap: 4px; }
.bl2-alternatives-card-meta svg{ width: 13px; height: 13px; }
body.bl2-page .bl2-alternatives-card-cta{
  flex: 0 0 auto;
  align-self: flex-end;
  display: inline-flex; align-items: center;
  padding: 9px 16px;
  border-radius: 11px;
  background: var(--bl2-green-700);
  color: #fff;
  font-weight: 700;
  font-size: .84rem;
  text-decoration: none;
}
body.bl2-page .bl2-alternatives-card-cta:hover{ background: var(--bl2-green-dark); color: #fff; text-decoration: none; }

.bl2-alternatives-relation-badge{
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border-radius: var(--bl2-radius-pill);
  font-size: .7rem; font-weight: 800;
}
.bl2-alternatives-relation-badge.same-substance{ background: #dcfce7; color: #166534; }
.bl2-alternatives-relation-badge.similar-therapeutic{ background: #ffedd5; color: #9a3412; }

.bl2-alternatives-empty{ padding: 24px; text-align: center; color: var(--bl2-muted); font-size: .9rem; }

.bl2-alternatives-summary-card,
.bl2-alternatives-filters-card{
  border: 1px solid var(--bl2-line);
  border-radius: 15px;
  padding: 16px;
  margin-bottom: 14px;
}
.bl2-alternatives-summary-title,
.bl2-alternatives-filters-title{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 800;
  font-size: .92rem;
  color: var(--bl2-ink);
  margin-bottom: 10px;
  cursor: pointer;
  list-style: none;
}
.bl2-alternatives-summary-title::-webkit-details-marker,
.bl2-alternatives-filters-title::-webkit-details-marker{ display: none; }
.bl2-alternatives-summary-title::after,
.bl2-alternatives-filters-title::after{
  content: '';
  width: 9px; height: 9px;
  border-right: 2px solid var(--bl2-muted);
  border-bottom: 2px solid var(--bl2-muted);
  transform: rotate(45deg);
  transition: transform .15s ease;
  flex: 0 0 auto;
}
details:not([open]) > .bl2-alternatives-summary-title::after,
details:not([open]) > .bl2-alternatives-filters-title::after{
  transform: rotate(-45deg);
}
.bl2-alternatives-summary-row{ display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: .84rem; border-top: 1px solid var(--bl2-line); }
.bl2-alternatives-summary-row:first-child{ border-top: none; }
.bl2-alternatives-summary-row span:first-child{ color: var(--bl2-muted); }
.bl2-alternatives-summary-row span:last-child{ font-weight: 700; color: var(--bl2-ink); text-align: right; }

.bl2-alternatives-note{
  display: flex; gap: 9px; align-items: flex-start;
  font-size: .78rem; color: var(--bl2-muted); line-height: 1.5;
}
.bl2-alternatives-note svg{ width: 14px; height: 14px; flex: 0 0 auto; margin-top: 2px; }

/* Toggle switch — koristi se za filtere u sidebaru ovog alata (i može se
   ponovno koristiti bilo gdje drugdje treba isti obrazac). */
.bl2-toggle-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  cursor: pointer;
  font-size: .86rem;
  color: var(--bl2-text);
}
.bl2-toggle-switch{ position: relative; display: inline-flex; flex: 0 0 auto; }
.bl2-toggle-switch input{ position: absolute; opacity: 0; width: 1px; height: 1px; }
.bl2-toggle-track{
  display: inline-block;
  width: 38px; height: 22px;
  border-radius: 999px;
  background: var(--bl2-line);
  transition: background .15s ease;
  flex: 0 0 auto;
}
.bl2-toggle-thumb{
  display: block;
  width: 18px; height: 18px;
  margin: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15,23,42,.25);
  transition: transform .15s ease;
}
.bl2-toggle-switch input:checked + .bl2-toggle-track{ background: var(--bl2-green-700); }
.bl2-toggle-switch input:checked + .bl2-toggle-track .bl2-toggle-thumb{ transform: translateX(16px); }
.bl2-toggle-switch input:focus-visible + .bl2-toggle-track{ outline: 2px solid var(--bl2-teal); outline-offset: 2px; }

.bl2-alternatives-note-inline{ display: none; }
@media (max-width: 640px){
  .bl2-alternatives-note-inline{ display: block; margin-top: 6px; }
  .bl2-alternatives-rail > .bl2-alternatives-note{ display: none; }
}

@media (max-width: 640px){
  .bl2-alternatives-modal{ padding: 0; align-items: stretch; justify-content: stretch; }
  .bl2-alternatives-modal-panel{ width: 100%; max-height: none; height: 100%; border-radius: 0; }
  .bl2-alternatives-card{
    display: grid;
    grid-template-columns: 38px 1fr;
    grid-template-areas: "icon body" "cta cta";
    column-gap: 12px;
    row-gap: 10px;
    align-items: start;
  }
  .bl2-alternatives-card-icon{ grid-area: icon; }
  .bl2-alternatives-card-body{ grid-area: body; min-width: 0; }
  .bl2-alternatives-card-cta{ grid-area: cta; width: 100%; justify-content: center; margin-top: 0; }
}

/* Sažetak potpuno uklonjen iz mobilnog prikaza (po dogovoru) - samo
   Filteri ostaje, otvoren po defaultu (details bez JS prisilnog zatvaranja). */
@media (max-width: 640px){
  .bl2-alternatives-summary-card{ display: none; }
}

/* Info oblačić na mobitelu - spojena rečenica bez razmaka/preloma
   (nastavak istog pasusa, ne novi red). */
@media (max-width: 640px){
  .bl2-alternatives-note-inline{ display: inline; margin-top: 0; }
}

/* "Predložene zamjene" naslov centriran na mobitelu. */
@media (max-width: 640px){
  .bl2-alternatives-results-heading{ justify-content: center; text-align: center; }
}

/* Find-gumb i chip više nisu potrebni u toku (odabir iz padajuceg popisa
   sad odmah pokrece pretragu) - sakriveno umjesto uklanjanja markupa, radi
   manjeg diranja PHP-a. */
.bl2-alternatives-find-btn,
.bl2-alternatives-source-chip{ display: none; }