/* =====================================================================
   TELACK B2B — responzivna košarica (QA-03 + QA-04/05)
   ---------------------------------------------------------------------
   Samostalan dodatak uz app.css; učitava se POSLIJE app.css i portal-ui.css,
   pa smije nadjačati njihova pravila za košaricu.
   Sadržaj:
     1) osnovno (sve širine): valuta se ne prelama, unos količine i
        uklanjanje su udobne dodirne mete (>= 44 x 44 px),
     2) <= 640 px (isti prijelom kao app.css): svaki artikl postaje kartica
        s oznakama VPC / Količina / Iznos i uklanjanjem u gornjem desnom
        kutu; ukupno je istaknuti redak ispod kartica.
   Ne uvodi novi identitet: koristi varijable --text, --muted, --border,
   --surface, --accent i --danger iz app.css.
   ===================================================================== */

/* ---------- 1) osnovno (vrijedi za sve širine) ---------- */

/* Broj i znak € ostaju zajedno — valuta se nikad ne prelama u dva retka. */
.kosarica-tbl .kosarica-cijena{white-space:nowrap}

/* Raspored stupaca (isto kao prije, ali kroz klase umjesto inline stilova). */
.kosarica-tbl .kosarica-vpc{text-align:right}
.kosarica-tbl .kosarica-kolicina{text-align:center;position:relative}
.kosarica-tbl .kosarica-iznos{text-align:right;font-weight:600}
.kosarica-tbl .kosarica-ukloni{text-align:right}
.kosarica-tbl .kosarica-ukupno-labela{text-align:right;font-weight:700}
.kosarica-tbl .kosarica-ukupno-iznos{text-align:right;font-weight:700;font-size:1.1rem}

/* Vidljive oznake polja postoje samo u mobilnoj kartici. */
.kosarica-oznaka{display:none}

/* Unos količine: udobna dodirna meta, čitljiv i poravnat broj. */
.kosarica-forma input[name^="kolicina["]{min-height:44px;min-width:64px;width:5.5rem;
  text-align:right;font-variant-numeric:tabular-nums}

/* Uklanjanje: >= 44 x 44 px; naziv i title dolaze iz PHP-a (specifični za artikl). */
.kosarica-forma .link-ukloni{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0;font-size:1.05rem;line-height:1}

/* Gumbi košarice (Ažuriraj količine / Nastavi kupovinu) udobni za dodir. */
.kosarica-akcije .btn{min-height:44px}

/* Oznaka polja količine: vizualno skrivena, ali čitljiva čitačima zaslona. */
.kosarica-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- 2) mobitel: svaki artikl je kartica ---------- */

@media (max-width:640px){
  /* Tablica se raspoređuje kao popis kartica (isti DOM, isti POST ugovor). */
  .kosarica-forma .kosarica-tbl{display:block;width:100%;border:0;background:transparent}
  .kosarica-tbl thead{display:none}
  .kosarica-tbl tbody,.kosarica-tbl tfoot{display:block}

  .kosarica-tbl tr.kosarica-redak{
    display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;
    gap:.35rem .75rem;padding:.85rem .9rem;margin:0 0 .8rem;
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
    box-shadow:0 8px 22px rgba(17,32,27,.05);
  }
  .kosarica-redak .kosarica-artikl{grid-area:1/1/2/2;min-width:0}
  .kosarica-redak .kosarica-ukloni{grid-area:1/2/2/3;align-self:start;justify-self:end}
  .kosarica-redak .kosarica-vpc{grid-area:2/1/3/3}
  .kosarica-redak .kosarica-kolicina{grid-area:3/1/4/3}
  .kosarica-redak .kosarica-iznos{grid-area:4/1/5/3}

  /* Ćelije više nisu ćelije tablice: bez obruba i paddinga ćelije. */
  .kosarica-redak td{padding:0;border:0}

  /* Označena ćelija: naziv polja lijevo, vrijednost desno, tanka linija iznad. */
  .kosarica-redak .kosarica-vpc,
  .kosarica-redak .kosarica-kolicina,
  .kosarica-redak .kosarica-iznos{
    display:grid;grid-template-columns:minmax(0,5.5rem) minmax(0,1fr);align-items:center;
    gap:.35rem .75rem;padding:.55rem 0 0;border-top:1px solid var(--border);
    text-align:left;font-weight:400;
  }
  .kosarica-redak .kosarica-oznaka{display:block;color:var(--muted);font-size:12px;
    font-weight:800;text-transform:uppercase;letter-spacing:.3px}
  .kosarica-redak .kosarica-vrijednost{justify-self:end;text-align:right}
  .kosarica-redak .kosarica-iznos .kosarica-vrijednost{font-weight:700;font-size:1.05rem}
  .kosarica-forma .kosarica-redak .kosarica-kolicina input{width:100%;max-width:9rem;
    justify-self:end;font-size:16px}

  /* Ukupno: istaknuti redak ispod kartica. */
  .kosarica-tbl tr.kosarica-ukupno-redak{
    display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:.35rem .75rem;
    padding:.85rem .9rem;background:var(--surface);border:1px solid var(--border);
    border-radius:var(--radius);
  }
  .kosarica-tbl .kosarica-ukupno-labela{grid-area:1/1/2/2;text-align:left}
  .kosarica-tbl .kosarica-ukupno-iznos{grid-area:1/2/2/3;text-align:right;font-size:1.15rem}
  .kosarica-tbl .kosarica-ukupno-prazno{display:none}
}