/* donor-account.css — «مساحة المتبرع» (T-60). The approved prototype, on the
   site's own header, footer and fonts. Everything is scoped under .da so no
   other page is touched. */

.da {
  --da-navy: var(--brand-navy, #0A2A3D);
  --da-teal: var(--brand-teal, #12525C);
  --da-teal-2: #3D7580;
  --da-teal-soft: #E4EFF0;
  --da-gold: var(--brand-gold, #C9A227);
  --da-gold-ink: var(--brand-gold-ink, #7D6217);
  --da-gold-soft: #F7EFD6;
  --da-grey: #5A6B74;
  --da-line: #E3E8EA;
  --da-bg: #F4F6F7;
  --da-card: #FFFFFF;
  --da-ok: #1F7A4D;
  --da-ok-soft: #E6F3EC;
  --da-danger: #B3261E;
  --da-danger-soft: #FBEAE9;
  --da-radius: 16px;
  background: var(--da-bg);
  color: var(--da-navy);
  padding: 0 0 64px;
}
.da * { box-sizing: border-box; }
.da .num { font-variant-numeric: tabular-nums; }
.da [hidden] { display: none !important; }

/* hero: the page's own gradient, with room for the cards to overlap it */
/* The banner every other page got on 2026-09-27: the association's mark in the
   middle at 20%, a soft gold light behind it, and the gold rule closing it.
   This page's banner is .da-hero, not .page-hero, so the site rule never
   reached it and it stayed a plain gradient while the rest of the site moved.
   Same layers and the same file, so the two read as one banner. */
.da-hero {
  background: #0A2A3D;
  background-image:
    radial-gradient(ellipse 34% 150% at 50% 50%, rgba(201, 162, 39, 0.26), transparent 70%),
    url("assets/brand/hero-seal-d20be025.webp"),
    linear-gradient(165deg, #0A2A3D 0%, #0f3f4d 60%, var(--da-teal) 100%);
  background-repeat: no-repeat;
  background-position: center, center, center;
  background-size: cover, auto 72%, cover;
  border-block-end: 3px solid var(--da-gold);
  color: #fff;
}
.da-hero__in { max-width: 1180px; margin: auto; padding: 34px 20px 88px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
/* The headline collided with itself and with the line under it.
   This file asked for clamp(22px, 3vw, 30px); what rendered was 40px with a
   44px line box, because aegov-dls.css's `main h1` takes the size and the
   leading from here. At 1.1, two lines of Arabic at 40px overlap — «إيصالاتك»
   reaches up and «تطبيق» reaches down — and a 4px gap under a 40px headline is
   not a gap. The sizes are re-stated with the weight needed to hold them, and
   the leading is the 1.45 Arabic needs rather than the 1.1 Latin tolerates. */
.da-hero small { display: block; opacity: .78; font-size: 13px; letter-spacing: .02em; }
.da-hero h1 {
  margin: 8px 0 12px !important;
  font-size: clamp(24px, 3.2vw, 34px) !important;
  line-height: 1.45 !important;
  font-weight: 700;
  color: #fff;
  max-width: 22ch;
  text-wrap: balance;
}
.da-hero p {
  margin: 0;
  opacity: .86;
  font-size: 14.5px;
  line-height: 1.9;
  color: #fff;
  max-width: 52ch;
}
.da-hero__act { display: flex; gap: 10px; flex-wrap: wrap; }

.da-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 12px; padding: 11px 18px; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; min-height: 44px; transition: transform .15s ease, background .15s ease, border-color .15s ease; }
.da-btn:focus-visible { outline: 3px solid var(--da-gold); outline-offset: 2px; }
.da-btn svg { width: 18px; height: 18px; flex: none; }
.da-btn--gold { background: var(--da-gold); color: var(--da-navy); }
.da-btn--gold:hover { background: #d4ae33; transform: translateY(-1px); }
.da-btn--ghost { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.35); }
.da-btn--ghost:hover { background: rgba(255,255,255,.2); }
.da-btn--line { background: #fff; color: var(--da-teal); border: 1px solid var(--da-line); }
.da-btn--line:hover { border-color: var(--da-teal-2); }
.da-btn--teal { background: var(--da-teal); color: #fff; }
.da-btn--teal:hover { background: #0e454d; }
.da-btn--danger { background: #fff; color: var(--da-danger); border: 1px solid #efc1bd; }
.da-btn--danger:hover { background: var(--da-danger-soft); }
.da-btn[disabled] { opacity: .6; cursor: progress; transform: none; }
.da-btn--full { width: 100%; }

.da-wrap { max-width: 1180px; margin: -62px auto 0; padding: 0 20px; position: relative; }

/* the status line under the hero: sending, saved, refused */
.da-say { max-width: 1180px; margin: 0 auto 14px; padding: 12px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--da-line); font-size: 14px; }
.da-say.is-ok { border-color: #bfe0cc; background: var(--da-ok-soft); color: var(--da-ok); }
.da-say.is-bad { border-color: #efc1bd; background: var(--da-danger-soft); color: var(--da-danger); }

/* summary */
.da-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.da-stat { background: var(--da-card); border-radius: var(--da-radius); padding: 18px 18px 16px; box-shadow: 0 6px 24px rgba(10,42,61,.07); min-height: 108px; }
.da-stat small { display: block; color: var(--da-grey); font-size: 13px; }
.da-stat b { display: block; font-size: 26px; font-weight: 700; margin-top: 4px; letter-spacing: -.3px; }
.da-stat b span { font-size: 14px; font-weight: 500; color: var(--da-grey); margin-inline-start: 4px; }
.da-stat em { display: block; font-style: normal; font-size: 12px; color: var(--da-grey); margin-top: 2px; }
.da-stat--zakat { background: linear-gradient(180deg, #fff, #fffaf0); border: 1px solid #f0e3b8; }
.da-stat--zakat b { color: var(--da-gold-ink); }

.da-last { margin-top: 14px; background: var(--da-card); border-radius: var(--da-radius); padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; border: 1px solid var(--da-line); }
.da-last__txt { display: flex; align-items: center; gap: 14px; }
.da-last__ic { width: 44px; height: 44px; border-radius: 12px; background: var(--da-teal-soft); display: grid; place-items: center; color: var(--da-teal); flex: none; }
.da-last__ic svg { width: 22px; height: 22px; }
.da-last small { color: var(--da-grey); font-size: 13px; display: block; }
.da-last strong { font-weight: 600; }

/* tabs */
.da-tabs { margin: 26px 0 14px; display: flex; gap: 6px; border-bottom: 1px solid var(--da-line); overflow-x: auto; scrollbar-width: none; }
.da-tabs::-webkit-scrollbar { display: none; }
.da-tab { border: 0; background: none; padding: 12px 16px; font: inherit; font-weight: 600; color: var(--da-grey); cursor: pointer; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -1px; min-height: 44px; }
.da-tab[aria-selected="true"] { color: var(--da-navy); border-bottom-color: var(--da-gold); }
.da-tab:focus-visible { outline: 3px solid var(--da-gold); outline-offset: -3px; border-radius: 8px; }

/* filters */
.da-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.da-search { flex: 1 1 240px; position: relative; display: block; }
.da-search input { width: 100%; border: 1px solid var(--da-line); border-radius: 12px; padding: 11px 42px 11px 14px; background: #fff; min-height: 44px; font: inherit; color: inherit; }
.da-search svg { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--da-grey); pointer-events: none; }
.da-select { border: 1px solid var(--da-line); border-radius: 12px; padding: 10px 14px; background: #fff; min-height: 44px; font: inherit; color: inherit; }
.da-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.da-chip { border: 1px solid var(--da-line); background: #fff; border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 13px; cursor: pointer; min-height: 36px; color: inherit; }
.da-chip[aria-pressed="true"] { background: var(--da-navy); color: #fff; border-color: var(--da-navy); }
.da input:focus-visible, .da select:focus-visible, .da-chip:focus-visible { outline: 3px solid var(--da-gold); outline-offset: 1px; }
.da-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* donation list */
.da-list { background: var(--da-card); border-radius: var(--da-radius); border: 1px solid var(--da-line); overflow: hidden; }
.da-yr { padding: 10px 18px; background: #FAFBFB; border-bottom: 1px solid var(--da-line); font-size: 13px; color: var(--da-grey); display: flex; justify-content: space-between; }
.da-row { border-bottom: 1px solid var(--da-line); }
.da-row:last-child { border-bottom: 0; }
.da-row__head { width: 100%; display: grid; grid-template-columns: 92px 1fr auto auto 28px; gap: 14px; align-items: center; padding: 14px 18px; background: none; border: 0; text-align: start; cursor: pointer; font: inherit; color: inherit; }
.da-row__head:hover { background: #FAFBFB; }
.da-row__head:focus-visible { outline: 3px solid var(--da-gold); outline-offset: -3px; }
.da-row__date b { display: block; font-weight: 600; font-size: 14px; }
.da-row__what strong { display: block; font-weight: 600; }
.da-row__what small { color: var(--da-grey); font-size: 12px; }
.da-badge { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--da-teal-soft); color: var(--da-teal); font-weight: 600; white-space: nowrap; }
.da-badge--zakat { background: var(--da-gold-soft); color: var(--da-gold-ink); }
.da-badge--jariya { background: #E8EEF7; color: #2F4F7F; }
.da-row__amt { font-weight: 700; font-size: 16px; white-space: nowrap; }
.da-row__amt span { font-size: 12px; color: var(--da-grey); font-weight: 500; margin-inline-start: 3px; }
.da-chev { width: 20px; height: 20px; color: var(--da-grey); transition: transform .2s ease; }
.da-row[data-open="true"] .da-chev { transform: rotate(180deg); }
.da-row__body { display: none; padding: 0 18px 16px; }
.da-row[data-open="true"] .da-row__body { display: block; }
.da-lines { list-style: none; margin: 0 0 12px; padding: 12px 14px; background: var(--da-bg); border-radius: 12px; }
.da-lines li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 14px; }
.da-lines li + li { border-top: 1px dashed var(--da-line); }
.da-row__meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--da-grey); }
.da-row__acts { display: flex; gap: 8px; flex-wrap: wrap; }
.da-empty { padding: 40px 18px; text-align: center; color: var(--da-grey); }
.da-more { padding: 12px 18px; font-size: 13px; color: var(--da-grey); background: #FAFBFB; border-top: 1px solid var(--da-line); }

/* statements */
.da-note { font-size: 13px; color: var(--da-grey); background: #fff; border: 1px solid var(--da-line); border-radius: 12px; padding: 12px 14px; margin: 0 0 14px; }
.da-years { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.da-year { background: var(--da-card); border: 1px solid var(--da-line); border-radius: var(--da-radius); padding: 18px; }
.da-year h3 { margin: 0 0 10px; font-size: 18px; }
.da-year dl { margin: 0; display: grid; grid-template-columns: 1fr auto; row-gap: 6px; font-size: 14px; }
.da-year dt { color: var(--da-grey); }
.da-year dd { margin: 0; font-weight: 600; }
.da-year dd.is-zakat { color: var(--da-gold-ink); }
.da-year__pdf { margin-top: 14px; }
.da-year__say { margin: 8px 0 0; font-size: 13px; color: var(--da-danger); }

/* profile, privacy */
.da-grid2 { display: grid; grid-template-columns: 1.2fr .8fr; gap: 14px; align-items: start; }
.da-card { background: var(--da-card); border: 1px solid var(--da-line); border-radius: var(--da-radius); padding: 20px; }
.da-card h2, .da-card h3 { margin: 0 0 4px; font-size: 17px; }
.da-card > p { margin: 0 0 16px; color: var(--da-grey); font-size: 14px; }
.da-field { display: block; margin-bottom: 14px; }
.da-field > span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.da-field input { width: 100%; border: 1px solid var(--da-line); border-radius: 12px; padding: 11px 14px; background: #fff; min-height: 44px; font: inherit; color: inherit; }
.da-field input[readonly] { background: var(--da-bg); color: var(--da-grey); }
.da-field small { display: block; color: var(--da-grey); font-size: 12px; margin-top: 4px; }
.da-sess { list-style: none; margin: 0 0 14px; padding: 0; }
.da-sess li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--da-line); font-size: 14px; }
.da-sess li:last-child { border-bottom: 0; }
.da-sess i { width: 36px; height: 36px; border-radius: 10px; background: var(--da-bg); display: grid; place-items: center; font-style: normal; color: var(--da-teal); flex: none; }
.da-sess i svg { width: 18px; height: 18px; }
.da-sess small { display: block; color: var(--da-grey); font-size: 12px; }
.da-sess .da-now { margin-inline-start: auto; font-size: 12px; color: var(--da-ok); background: var(--da-ok-soft); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.da-danger { border-color: #f0c9c6; }
.da-danger h3 { color: var(--da-danger); }
.da-danger ul { margin: 0 0 14px; padding-inline-start: 18px; font-size: 14px; color: var(--da-grey); }
.da-confirm { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; margin: 0 0 14px; cursor: pointer; }
.da-confirm input { width: 18px; height: 18px; margin-top: 3px; flex: none; accent-color: var(--da-danger); }

/* sign in */
/* ── The sign-in card (2026-09-28) ──
   Four type sizes disagreed inside one 400px card: a 26px heading that aegov's
   `main h2` had taken over from this file and that wrapped «الدخول إلى مساحتي»
   onto two lines, a 16px lede under it, a 13px label and a 14px button. The
   heading is now the tab that selects what the card does, which is both one
   size smaller and one element fewer. */
.da-auth { max-width: 480px; margin: -62px auto 0; padding: 0 20px; position: relative; }
.da-auth .da-card { padding: 26px 24px 24px; box-shadow: 0 10px 30px rgba(10,42,61,.08); }
.da-auth .da-card > p { margin-bottom: 18px; }

/* The two things this card can do, side by side, so «حساب جديد» is offered
   rather than hidden behind a link. */
.da-tabs {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  padding: 4px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: var(--da-bg);
  border: 1px solid var(--da-line);
}
.da-tab {
  border: 0;
  border-radius: 9px;
  padding: 10px 14px;
  min-height: 42px;
  background: transparent;
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--da-grey);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.da-tab.is-on {
  background: #fff;
  color: var(--da-navy);
  box-shadow: 0 2px 8px rgba(10,42,61,.10);
}
.da-tab:focus-visible { outline: 3px solid var(--da-gold); outline-offset: 2px; }

.da-auth .da-lede {
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--da-grey);
}
/* `.da-field small` is a block hint under the input; this one is a word inside
   the label, so it stays on the line. */
.da-field > span small { display: inline; font-weight: 400; color: var(--da-grey); font-size: 12px; margin-inline-start: 4px; }
/* The two extra fields open and close with the tab rather than jumping. */
.da-newfields[hidden] { display: none; }
.da-step { display: flex; gap: 6px; margin-bottom: 16px; }
.da-step span { height: 4px; flex: 1; border-radius: 4px; background: var(--da-line); }
.da-step span.is-on { background: var(--da-gold); }
.da-otp { display: flex; gap: 8px; direction: ltr; justify-content: center; margin: 6px 0 14px; }
.da-otp input { width: 48px; height: 56px; text-align: center; font: inherit; font-size: 22px; font-weight: 700; border: 1px solid var(--da-line); border-radius: 12px; background: #fff; color: inherit; }
.da-otp input:focus-visible { outline: 3px solid var(--da-gold); border-color: var(--da-gold); }
.da-auth__row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--da-grey); margin-top: 12px; }
.da-auth__row button { background: none; border: 0; color: var(--da-teal); font: inherit; font-weight: 600; cursor: pointer; padding: 6px; }
.da-auth__row button[disabled] { color: var(--da-grey); cursor: default; }
.da-trust { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--da-grey); margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--da-line); }
.da-trust svg { width: 18px; height: 18px; flex: none; color: var(--da-teal); margin-top: 2px; }

/* loading shimmer for the four tiles */
.da-stat.is-loading b, .da-stat.is-loading em { color: transparent; background: linear-gradient(90deg, #eef1f2 0, #f7f9f9 50%, #eef1f2 100%); background-size: 200% 100%; border-radius: 6px; animation: da-shimmer 1.2s linear infinite; }

@keyframes da-shimmer { to { background-position: -200% 0; } }

@media (max-width: 860px) {
  .da-stats { grid-template-columns: repeat(2, 1fr); }
  .da-stat b { font-size: 22px; }
  .da-grid2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .da-hero__in { padding: 24px 16px 80px; }
  .da-hero__act .da-btn--ghost { display: none; }
  .da-wrap { padding: 0 14px; }
  .da-row__head { grid-template-columns: 1fr auto 22px; grid-template-areas: "what amt chev" "date badge chev"; row-gap: 4px; padding: 14px 14px; }
  .da-row__what { grid-area: what; }
  .da-row__amt { grid-area: amt; text-align: end; }
  .da-row__date { grid-area: date; }
  .da-row__date b { display: inline; font-size: 12px; color: var(--da-grey); font-weight: 400; }
  .da-row__head .da-badge { grid-area: badge; justify-self: end; }
  .da-chev { grid-area: chev; }
  .da-otp input { width: 42px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .da *, .da *::before, .da *::after { transition: none !important; animation: none !important; }
}

/* The dirham symbol is as tall as the digits and in their colour (Central Bank
   guideline p.11), so the smaller grey unit style above must not reach it. */
.da .mb-aed { font-size: 1em; color: inherit; }