/* ═══════════════════════════════════════════════════════════════════════════
   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;
}