/* ===== ZAKAT UI ===== */
#zakatSection {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.zakat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .65rem;
}

.zakat-card {
  background: var(--color-surface);
  border: 1px solid rgba(148,163,184,.03);
  border-radius: .9rem;
  padding: .6rem .65rem .55rem;
  box-shadow: 0 10px 24px rgba(15,23,42,.015);
}

body.dark-mode .zakat-card {
  background: rgba(15,23,42,.35);
}

.zakat-card-title {
  font-size: .78rem;
  font-weight: 600;
  margin-bottom: .4rem;
  display: flex;
  gap: .35rem;
  align-items: center;
}

.zakat-result {
  background: rgba(11,122,117,.08);
  border: 1px solid rgba(11,122,117,.25);
  border-radius: .9rem;
  padding: .55rem .6rem .55rem;
}

body.dark-mode .zakat-result {
  background: rgba(15,23,42,.35);
  border-color: rgba(15,23,42,.08);
}

.zakat-result h5 {
  font-size: .9rem;
}

@media (max-width: 520px) {
  .zakat-grid {
    grid-template-columns: 1fr;
  }
}