/* ═══════════════════════════════════════════════════════════════════════════
   MaskeZaMob — Budi Human lista donacija
   Fajl: flatsome-child/css/_donacije.css
   Enqueue: inc/mzm-donacije.php, priority 20
   Shortcode: [mzm_donacije]

   Stoji u DESNOJ koloni Budi Human sekcije, na navy pozadini (#0e1629),
   na mestu gde je ranije bila slika `doniraj.jpg`.

   Mobile-first: prvo se piše mobilni raspored, pa se na širem ekranu dodaje.
   ═══════════════════════════════════════════════════════════════════════════ */

.mzm-don {
  --mzm-don-linija: rgba(255, 255, 255, 0.12);
  --mzm-don-prigusen: rgba(255, 255, 255, 0.55);

  font-family: var(--mzm-font-family);
  color: var(--mzm-text-on-dark);

  /* Eksplicitan line-height. Bez njega se nasleđuje Flatsome-ov (~1.6), pa je
     svaki red liste bio ~20px viši nego što font nalaže — sa 5 stavki to je
     100px viška. Visinu reda ovde diktira ovaj fajl, ne tema. */
  line-height: 1.4;

  /* Sopstvena pozadina, malo svetlija od navy sekcije — panel se odvaja od
     teksta levo bez ijedne dodatne linije. */
  background-color: rgba(255, 255, 255, 0.04);
  border: var(--mzm-border-width) solid var(--mzm-don-linija);
  border-radius: var(--mzm-radius-lg);
  padding: var(--mzm-space-5);
}

/* ── Naslov ──────────────────────────────────────────────────────────────── */

.mzm-don__naslov {
  margin: 0 0 var(--mzm-space-4);
  font-size: var(--mzm-text-lg);
  font-weight: var(--mzm-font-bold);
  line-height: 1.3;
  color: var(--mzm-text-on-dark);
}

/* ── Lista ───────────────────────────────────────────────────────────────── */

.mzm-don__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mzm-don__stavka {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mzm-space-3);
  padding: var(--mzm-space-2) 0;
  border-bottom: var(--mzm-border-width) solid var(--mzm-don-linija);
}

.mzm-don__stavka:first-child {
  padding-top: 0;
}

/* Poslednja stavka nema liniju — odmah ispod nje ide deblja linija zbira. */
.mzm-don__stavka:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.mzm-don__ko {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0; /* bez ovoga dugo ime razvuče red i gurne iznos van panela */
}

.mzm-don__ime {
  font-size: var(--mzm-text-sm);
  font-weight: var(--mzm-font-semibold);
  line-height: 1.25;

  /* Ime dolazi iz podataka kupca i može biti proizvoljno dugo. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mzm-don__datum {
  font-size: var(--mzm-text-xs);
  line-height: 1.25;
  color: var(--mzm-don-prigusen);
}

.mzm-don__iznos {
  flex-shrink: 0;
  font-size: var(--mzm-text-sm);
  font-weight: var(--mzm-font-bold);
  line-height: 1.25;
  white-space: nowrap;
  color: var(--mzm-text-on-dark);
}

/* WooCommerce `wc_price()` umotava iznos u <span class="woocommerce-Price-amount">
   i sam postavlja boju iz Flatsome-a — na navy pozadini to ume da bude
   nečitljivo tamno. Nasleđivanje vraća kontrolu ovom fajlu. */
.mzm-don__iznos .woocommerce-Price-amount,
.mzm-don__iznos .woocommerce-Price-currencySymbol,
.mzm-don__ukupno-iznos .woocommerce-Price-amount,
.mzm-don__ukupno-iznos .woocommerce-Price-currencySymbol {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

/* ── Prazno stanje ───────────────────────────────────────────────────────── */

.mzm-don__prazno {
  margin: 0;
  padding: var(--mzm-space-4) 0;
  font-size: var(--mzm-text-sm);
  color: var(--mzm-don-prigusen);
}

/* ── Ukupno ──────────────────────────────────────────────────────────────── */

.mzm-don__ukupno {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mzm-space-3);
  flex-wrap: wrap;
  margin: var(--mzm-space-3) 0 0;
  padding-top: var(--mzm-space-3);

  /* Deblja linija nego između stavki — zbir nije još jedan red u listi. */
  border-top: 2px solid var(--mzm-don-linija);
}

.mzm-don__ukupno-labela {
  font-size: var(--mzm-text-sm);
  color: var(--mzm-don-prigusen);
}

.mzm-don__ukupno-iznos {
  font-size: var(--mzm-text-xl);
  font-weight: var(--mzm-font-extrabold);
  color: var(--mzm-accent);
  white-space: nowrap;
}

/* ── Link „Prikaži više" ─────────────────────────────────────────────────── */

.mzm-don__vise {
  display: inline-flex;
  align-items: center;
  gap: var(--mzm-space-2);
  margin-top: var(--mzm-space-4);
  font-size: var(--mzm-text-sm);
  font-weight: var(--mzm-font-semibold);
  color: var(--mzm-accent);
  text-decoration: none;
  transition: gap var(--mzm-transition-base);
}

.mzm-don__vise:hover,
.mzm-don__vise:focus-visible {
  gap: var(--mzm-space-3);
  color: var(--mzm-accent);
  text-decoration: none;
}

/* ── Tablet i naviše ─────────────────────────────────────────────────────── */

@media (min-width: 850px) {
  .mzm-don {
    padding: var(--mzm-space-6);
  }

  .mzm-don__naslov {
    font-size: var(--mzm-text-lg);
    margin-bottom: var(--mzm-space-4);
  }

  .mzm-don__ukupno-iznos {
    font-size: var(--mzm-text-xl);
  }
}

/* ── Budi Human sekcija: desna kolona više nije slika nego panel ──────────
   `_homepage-mobile.css` apsolutno pozicionira pozadinsku sliku u poslednjoj
   koloni i gasi joj padding. Sa listom donacija umesto slike to pravilo mora
   da se poništi, inače panel ispadne iz toka i nalegne preko teksta levo.
   ───────────────────────────────────────────────────────────────────────── */

.mzm-budi-human-section .col:last-child:has(.mzm-don) {
  position: static !important;
  overflow: visible !important;
  padding: var(--mzm-space-6) var(--mzm-space-5) var(--mzm-space-10) !important;
}

@media (min-width: 850px) {
  .mzm-budi-human-section .col:last-child:has(.mzm-don) {
    padding: var(--mzm-space-12) var(--mzm-space-12) var(--mzm-space-12) var(--mzm-space-6) !important;
  }
}

/* Flatsome dodaje ~30px donjeg padinga na .col koji `padding="0px"` u
   shortcode-u ne gasi pouzdano — vidi KNOWLEDGE-BASE, Flatsome zamke.
   Na mobilnom to pravi rupu između panela i sledeće sekcije. */
.mzm-budi-human-section .col:last-child:has(.mzm-don) .col-inner {
  padding-bottom: 0;
}

/* ── Ništa u sekciji se ne sme seći ───────────────────────────────────────
   Razmak gore se podešava u SHORTCODE-u, na `padding` atributu sekcije —
   Flatsome ga ispisuje kao inline stil, a inline je specifičniji od ovog
   fajla, pa se odavde ne može povećati. Ista zamka kao F-021.

   Ova pravila rešavaju drugu stvar: da badge „BUDI HUMAN" ne bude odsečen.
   Badge ima `border-radius` i pozadinu, pa svako `overflow: hidden` na
   pretku odseca njegov gornji luk. Ranije je poslednja kolona imala
   `overflow: hidden` zbog pozadinske slike — slike više nema.
   ───────────────────────────────────────────────────────────────────────── */

.mzm-budi-human-section,
.mzm-budi-human-section .row,
.mzm-budi-human-section .col,
.mzm-budi-human-section .col-inner {
  overflow: visible;
}

/* Badge je inline-block sa pozadinom; bez ovoga mu gornja ivica ume da
   nalegne na ivicu kolone kad je line-height nasleđen manji od visine pilule. */
.mzm-budi-human-section .col:first-child .ux_text:first-child {
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════════════════
   STRANA „BUDI HUMAN" — /budi-human/  (12.08.2026.)
   ══════════════════════════════════════════════════════════════════════════
   Sadržaj strane je u `theme/budi-human-shortcode.txt`.

   ⚠️ Ova pravila se učitavaju kroz `mzm_don_assets()`, koji od 12.08. proverava
   i `[mzm_don_iznos]`, ne samo `[mzm_donacije]`. */

/* ── Istaknut iznos ─────────────────────────────────────────────────────────
   Gradijent ide dijagonalno, iz accent plave u mornarsku — obe iz palete, bez
   nove vrednosti. Ovo je JEDINO mesto na strani sa jakom bojom, pa iznos nosi
   pažnju sam, bez tamne trake iznad koja se takmičila sa njim. */
.mzm-bh-iznos {
  background-image: linear-gradient(135deg, var(--mzm-accent, #3c83f5) 0%, var(--mzm-navy, #0e1629) 100%);
  border-radius: var(--mzm-radius-xl, 16px);
  padding: 32px 36px;
  color: #ffffff;
  text-align: center;
}

.mzm-bh-iznos__labela {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 10px;
}

/* `.woocommerce-Price-amount` dolazi iz `wc_price()` — bez ovog selektora
   veličinu diktira Woo, a ne mi. */
.mzm-bh-iznos__vrednost,
.mzm-bh-iznos__vrednost .woocommerce-Price-amount {
  font-size: clamp(2rem, 1.2rem + 3.2vw, 3.2rem);
  font-weight: 800;
  line-height: 1.1;
  color: #ffffff;
}

.mzm-bh-iznos__nota {
  display: block;
  margin-top: 12px;
  font-size: 0.85rem;
  opacity: 0.7;
}

/* ── Tri koraka, jednake visine ─────────────────────────────────────────────
   ⚠️ `height: 100%` na unutrašnjem divu NE radi sam: lanac je
   `.col` → `.col-inner` → `[ux_text]` → naš div, a nijedan međučlan nije
   rastegnut. Zato se visina prosleđuje kroz sva tri, isto kao kod kartice
   proizvoda u `F-042`. */
.mzm-bh-koraci .col {
  display: flex;
  flex-direction: column;
}

.mzm-bh-koraci .col > .col-inner {
  display: flex;
  flex: 1 1 auto;
}

.mzm-bh-koraci .col > .col-inner > div {
  display: flex;
  flex: 1 1 auto;
}

.mzm-bh-korak {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  background: var(--mzm-surface, #f8f9fb);
  border: 1px solid var(--mzm-border, #e5e7eb);
  border-radius: var(--mzm-radius-lg, 12px);
  padding: 24px;
}

.mzm-bh-korak__broj {
  width: 40px;
  height: 40px;
  border-radius: var(--mzm-radius-full, 9999px);
  background: var(--mzm-accent, #3c83f5);
  color: #ffffff;
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  flex-shrink: 0;
}

.mzm-bh-korak h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 8px;
}

.mzm-bh-korak p {
  font-size: 14px;
  color: var(--mzm-text-secondary, #4b5563);
  margin: 0;
}