/* libellus-krug3.css — kosarica: panel, efekt, poruka
   Libellus / Crew803, 05.10.2026.
   Sve je u klasama s lb- prefiksom osim skina za Messi i dvije dopune
   zatecenim razredima (.items_in_cart, gumb na kartici). */

/* ---------------------------------------------------- 1. efekt na gumbu kartice
   Natpis gumba dolazi iz ::after (krug 2), pa se stanje mijenja preko ::after. */
/* Trostruka klasa dize specificnost iznad zatecenih i krug2 pravila
   bez vezanja na okvir (article / products_featured_cnt). Izmjereno:
   s jednom klasom je ::after prolazio, a background NIJE. */
a.shop_btn_add_to_basket.lb-dodano.lb-dodano.lb-dodano::after,
a.add_to_cart_btn.lb-dodano.lb-dodano.lb-dodano::after{
  content: 'DODANO \2713' !important;
}
a.shop_btn_add_to_basket.lb-dodano.lb-dodano.lb-dodano,
a.add_to_cart_btn.lb-dodano.lb-dodano.lb-dodano{
  background: #1E7A3C !important;
  color: #fff !important;
}

/* ---------------------------------------------------- 2. skok brojaca */
@keyframes lb-bump{
  0%{ transform: scale(1); }
  40%{ transform: scale(1.45); }
  100%{ transform: scale(1); }
}
.items_in_cart.lb-bump{
  animation: lb-bump .4s ease-out;
  display: inline-block;
}

/* ---------------------------------------------------- 3. zavjesa i panel */
#lb-kos-zavjesa{
  position: fixed; inset: 0; z-index: 99990;
  background: rgba(20,18,16,.44);
  opacity: 0; visibility: hidden;
  transition: opacity .22s linear, visibility .22s linear;
}
#lb-kos-zavjesa.lb-kos-vidi{ opacity: 1; visibility: visible; }

#lb-kos{
  position: fixed; top: 0; right: 0; z-index: 99991;
  width: 380px; max-width: 92vw; height: 100%;
  display: flex; flex-direction: column;
  background: #FBF8F3;
  box-shadow: -14px 0 38px rgba(20,18,16,.28);
  transform: translateX(104%);
  transition: transform .26s ease-out;
  font-family: inherit;
}
#lb-kos.lb-kos-otvoren{ transform: translateX(0); }

#lb-kos .lb-kos-glava{
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; background: #141210;
}
#lb-kos .lb-kos-glava strong{
  color: #F5C518; font-size: 15px; letter-spacing: .08em; text-transform: uppercase;
}
#lb-kos .lb-kos-x{
  background: none; border: 0; cursor: pointer;
  color: rgba(255,255,255,.72); font-size: 26px; line-height: 1; padding: 0 2px;
}
#lb-kos .lb-kos-x:hover{ color: #F5C518; }

#lb-kos .lb-kos-tijelo{ flex: 1 1 auto; overflow-y: auto; padding: 12px 14px; }

#lb-kos .lb-kos-prazna{ color: rgba(20,18,16,.62); font-size: 14px; padding: 18px 4px; }

#lb-kos .lb-kos-red{
  display: flex; gap: 12px; align-items: flex-start; position: relative;
  padding: 12px 24px 12px 0;
  border-bottom: 1px solid rgba(20,18,16,.10);
}
#lb-kos .lb-kos-red.lb-kos-novi{
  background: rgba(245,197,24,.18);
  box-shadow: inset 3px 0 0 #F5C518;
}
#lb-kos .lb-kos-red figure{ flex: 0 0 52px; margin: 0; }
#lb-kos .lb-kos-red figure img{
  display: block; width: 52px; height: auto; max-height: 69px;
  object-fit: contain;                    /* korice 190x250 se ne razvlace */
}
#lb-kos .lb-kos-opis{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
#lb-kos .lb-kos-naslov{
  color: #141210; font-size: 13px; line-height: 1.3; font-weight: 600;
  display: block; overflow: hidden;
}
#lb-kos .lb-kos-cijena{ color: rgba(20,18,16,.70); font-size: 13px; }

#lb-kos .lb-kos-kol{ display: flex; align-items: center; gap: 8px; margin-top: 2px; }
#lb-kos .lb-kos-kol button{
  width: 26px; height: 26px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(20,18,16,.26); background: #fff; color: #141210;
  font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: background .18s linear, border-color .18s linear;
}
#lb-kos .lb-kos-kol button:hover{ background: #F5C518; border-color: #F5C518; }
#lb-kos .lb-kos-kol b{ min-width: 20px; text-align: center; color: #141210; font-size: 14px; }

#lb-kos .lb-kos-van{
  position: absolute; top: 10px; right: 0;
  background: none; border: 0; cursor: pointer;
  color: rgba(20,18,16,.38); font-size: 19px; line-height: 1;
}
#lb-kos .lb-kos-van:hover{ color: #C0392B; }

#lb-kos .lb-kos-noga{
  flex: 0 0 auto; padding: 14px 18px 18px;
  border-top: 1px solid rgba(20,18,16,.12); background: #fff;
}
#lb-kos .lb-kos-zbroj{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
#lb-kos .lb-kos-zbroj span{ color: rgba(20,18,16,.70); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
#lb-kos .lb-kos-zbroj b{ color: #141210; font-size: 18px; }

#lb-kos .lb-kos-akcije{ display: flex; flex-direction: column; gap: 8px; }
#lb-kos .lb-kos-pl{
  display: flex; align-items: center; justify-content: center;
  height: 44px; border-radius: 999px; text-decoration: none;
  background: #F5C518; color: #141210 !important;
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  transition: filter .18s linear;
}
#lb-kos .lb-kos-pl:hover{ filter: brightness(.94); }
#lb-kos .lb-kos-dalje{
  height: 40px; border-radius: 999px; cursor: pointer;
  background: none; border: 1px solid rgba(20,18,16,.28); color: #141210;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  transition: border-color .18s linear;
}
#lb-kos .lb-kos-dalje:hover{ border-color: #141210; }

/* ---------------------------------------------------- 4. skin za Messi (G30)
   Messi nosi svoj izgled: radius 6, crn tekst, 500px fiksno. */
.messi .messi-box{
  border-radius: 14px !important;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(20,18,16,.34) !important;
  background: #FBF8F3 !important;
}
.messi .messi-titlebox{
  background: #141210 !important;
  color: #F5C518 !important;
  padding: 13px 18px !important;
  border: 0 !important;
}
.messi .messi-titlebox .messi-title,
.messi .messi-titlebox span{
  color: #F5C518 !important;
  font-size: 14px !important; letter-spacing: .08em; text-transform: uppercase;
}
.messi .messi-content{
  background: #FBF8F3 !important;
  color: #141210 !important;
  padding: 18px !important;
  font-size: 14px !important; line-height: 1.55 !important;
}
.messi .messi-actions{ background: #FBF8F3 !important; padding: 0 18px 16px !important; }
.messi .messi-actions button{
  height: 38px; padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer;
  background: #F5C518; color: #141210;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.messi .messi-actions button:hover{ filter: brightness(.94); }

/* ---------------------------------------------------- 5. rezervni toast */
.lb-toast{
  position: fixed; z-index: 99992; right: 18px; bottom: 18px;
  max-width: min(360px, 90vw);
  padding: 14px 16px; border-radius: 12px;
  background: #141210; color: #FBF8F3;
  font-size: 14px; line-height: 1.5;
  box-shadow: 0 14px 34px rgba(20,18,16,.32);
  opacity: 1; transition: opacity .4s linear;
}
.lb-toast.lb-toast-van{ opacity: 0; }

/* ---------------------------------------------------- 6. uske sirine */
@media only screen and (max-width: 540px){
  #lb-kos{ width: 100%; max-width: 100%; }
  .messi .messi-box{ width: auto !important; max-width: 92vw !important; }
  #lb-kos .lb-kos-red figure{ flex: 0 0 44px; }
  #lb-kos .lb-kos-red figure img{ width: 44px; max-height: 58px; }
}