/* zakat-v2.css — five-asset detailed zakat calculator + asnaf allocator
   Designed against v3-codex tokens (--green-500/700, --gold-500/600, --cream-50..400, --ink-900..400). */

.zv2-calc {
  background: #edf7f2;
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1rem, 4vw, 2rem);
}

.zv2-grid {
  max-width: 1240px;
  margin-inline: auto;
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 980px) { .zv2-grid { grid-template-columns: 1fr; } }

.zv2-card {
  background: #ffffff;
  border: 1px solid rgba(18, 82, 92, 0.18);
  border-radius: 1.4rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  box-shadow: 0 22px 60px -38px rgba(18, 82, 92, 0.4);
}

.zv2-form-head {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1.6rem;
}
.zv2-form-icon {
  width: 3rem; height: 3rem;
  border-radius: 1.1rem;
  background: var(--green-700);
  color: #fff;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-family: "Alexandria", sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.zv2-eyebrow {
  display: inline-block;
  font-family: "Alexandria", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-700);
  margin: 0;
  font-weight: 700;
}
.zv2-h2 {
  font-family: "Alexandria", "Noto Kufi Arabic", sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  line-height: 1.3;
  color: var(--ink-900);
  margin: 0.2rem 0 0;
}
.zv2-lede {
  margin: 1rem 0 0;
  color: rgba(31, 31, 35, 0.7);
  line-height: 1.85;
  max-width: 38rem;
}

.zv2-fields {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.zv2-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.zv2-field-label {
  font-weight: 600;
  color: var(--ink-900);
  font-size: 0.95rem;
}
.zv2-field-hint {
  color: rgba(31, 31, 35, 0.55);
  font-size: 0.78rem;
  line-height: 1.55;
}
.zv2-input-wrap {
  position: relative;
  display: block;
  margin-top: 0.4rem;
}
.zv2-input-wrap input {
  width: 100%;
  padding: 0.85rem 1rem;
  padding-inline-start: 3rem;
  border: 1px solid rgba(18, 82, 92, 0.3);
  border-radius: 1rem;
  background: var(--cream-50);
  color: var(--ink-900);
  font-family: "Alexandria", "Noto Kufi Arabic", sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  outline: 0;
  transition: border-color 180ms ease, background-color 180ms ease;
}
.zv2-input-wrap input:focus {
  border-color: var(--green-700);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(18, 82, 92, 0.12);
}
.zv2-suffix {
  position: absolute;
  inset-inline-start: 0.95rem;
  inset-block-start: 50%;
  transform: translateY(-50%);
  font-size: 0.78rem;
  color: rgba(31, 31, 35, 0.45);
  pointer-events: none;
}
.zv2-field-liabilities .zv2-input-wrap input {
  border-color: rgba(122, 97, 18, 0.35);
}

/* Result sidebar */
.zv2-result { position: sticky; top: 6rem; }
@media (max-width: 980px) { .zv2-result { position: static; } }

.zv2-result-eyebrow {
  color: rgba(31, 31, 35, 0.55);
}
.zv2-result-amount {
  font-family: "Alexandria", sans-serif;
  font-size: clamp(2.6rem, 5vw, 3.4rem);
  font-weight: 800;
  color: var(--ink-900);
  line-height: 1.05;
  margin: 0.5rem 0 0.4rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.zv2-result-currency { font-size: 1rem; color: rgba(31, 31, 35, 0.5); font-weight: 500; }
.zv2-result-rate {
  margin: 0;
  font-size: 0.86rem;
  color: rgba(31, 31, 35, 0.6);
}

.zv2-result-rows {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 1.4rem 0;
  padding: 1.2rem 0;
  border-block: 1px solid rgba(31, 31, 35, 0.1);
  font-size: 0.92rem;
}
.zv2-result-rows div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.zv2-result-rows dt { color: rgba(31, 31, 35, 0.6); margin: 0; }
.zv2-result-rows dd { margin: 0; font-weight: 600; }
.zv2-result-rows .is-accent dd {
  font-family: "Alexandria", sans-serif;
  color: var(--green-700);
  font-size: 1.05rem;
  font-weight: 800;
}

.zv2-result-note {
  margin: 0;
  border-radius: 1rem;
  padding: 0.85rem 1rem;
  font-size: 0.85rem;
  line-height: 1.7;
  background: var(--cream-100);
  color: rgba(31, 31, 35, 0.78);
  border: 1px solid rgba(18, 82, 92, 0.14);
}
.zv2-result-note.is-met {
  background: #edf7f2;
  border-color: rgba(18, 82, 92, 0.28);
  color: var(--ink-900);
}

.zv2-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: 1.4rem;
  padding: 0.95rem 1.4rem;
  background: var(--green-700);
  color: #fff;
  font-weight: 700;
  border-radius: 1rem;
  text-decoration: none;
  transition: transform 180ms ease, background-color 180ms ease;
}
.zv2-cta:hover { transform: translateY(-1px); background: var(--green-600); }
.zv2-disclaimer {
  margin-top: 1rem;
  font-size: 0.7rem;
  line-height: 1.65;
  color: rgba(31, 31, 35, 0.55);
}

/* Asnaf */
.zv2-asnaf-section {
  background: var(--cream-100);
  padding: clamp(3rem, 7vw, 5rem) clamp(1rem, 4vw, 2rem);
}
.zv2-asnaf-head {
  max-width: 38rem;
  margin: 0 auto 2.4rem;
  text-align: center;
}
.zv2-asnaf-head .zv2-h2 { margin-top: 0.3rem; }
.zv2-asnaf-head .zv2-lede { margin-inline: auto; }

.zv2-asnaf-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1240px;
  margin-inline: auto;
}
@media (max-width: 1024px) { .zv2-asnaf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .zv2-asnaf-grid { grid-template-columns: 1fr; } }

/* ── The eight channels (2026-09-28) ──
   They were buttons: every card filled solid teal while «included», all eight
   included by default, and a tally beneath them. So the section arrived as
   eight identical dark slabs offering a choice that is not a donor's to make —
   the eight are what the verse above names, and the association's own
   committee decides which it works through (faq.json). The Quranic verse was
   the quiet thing on the page and the slabs were the loud one, which is
   backwards.

   They are a list now, and they read as one: a white surface, a teal rail down
   the reading edge, the index, the name, the definition. Nothing to press,
   nothing to tally, and the verse keeps the page's only dark block. */
.zv2-asnaf-card {
  position: relative;
  display: grid;
  gap: 0.35rem;
  align-content: start;
  text-align: start;
  padding: 1.15rem 1.2rem 1.25rem;
  border: 1px solid rgba(18, 82, 92, 0.18);
  border-radius: 1.1rem;
  background: #fff;
  color: var(--ink-900);
  overflow: hidden;
  transition: border-color 200ms ease, box-shadow 220ms ease,
              transform 220ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

/* The rail down the reading edge, which is what ties the eight together. */
.zv2-asnaf-card::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--green-700), #0A2A3D);
}

/* A card that does nothing still answers the cursor, quietly: it is a lift,
   not an invitation to click. */
.zv2-asnaf-card:hover {
  transform: translateY(-2px);
  border-color: rgba(18, 82, 92, 0.38);
  box-shadow: 0 12px 26px rgba(10, 42, 61, 0.08);
}

.zv2-asnaf-num {
  font-family: "Alexandria", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--green-700);
  opacity: 0.7;
}
.zv2-asnaf-card h3 {
  font-family: "Alexandria", sans-serif;
  font-size: 1.05rem;
  margin: 0;
}
.zv2-asnaf-card p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: #5A6B74;
}

/* The eight arrive in order, once, from a resting state that is already laid
   out — nothing here depends on a script running. */
@keyframes zv2-asnaf-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.zv2-asnaf-card { animation: zv2-asnaf-in 460ms cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.zv2-asnaf-card:nth-child(1) { animation-delay: 0ms; }
.zv2-asnaf-card:nth-child(2) { animation-delay: 45ms; }
.zv2-asnaf-card:nth-child(3) { animation-delay: 90ms; }
.zv2-asnaf-card:nth-child(4) { animation-delay: 135ms; }
.zv2-asnaf-card:nth-child(5) { animation-delay: 180ms; }
.zv2-asnaf-card:nth-child(6) { animation-delay: 225ms; }
.zv2-asnaf-card:nth-child(7) { animation-delay: 270ms; }
.zv2-asnaf-card:nth-child(8) { animation-delay: 315ms; }

@media (prefers-reduced-motion: reduce) {
  .zv2-asnaf-card { transition: none; animation: none; }
  .zv2-asnaf-card:hover { transform: none; }
}