/* ============================================================
   نظام التصميم الجديد «الديّة والزكاة» — القاعدة المشتركة
   لوحة: كحلي #1E3A5F · ذهبي #C9A84C · أرضية #F0F1F4 · خط Markazi Text
   تُحمَّل قبل ملف كل صفحة.
   ============================================================ */

@font-face {
  font-family: 'Markazi Text';
  src: url('../fonts/MarkaziText-Regular.ttf') format('truetype');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Markazi Text';
  src: url('../fonts/MarkaziText-Medium.ttf') format('truetype');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Markazi Text';
  src: url('../fonts/MarkaziText-SemiBold.ttf') format('truetype');
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: 'Markazi Text';
  src: url('../fonts/MarkaziText-Bold.ttf') format('truetype');
  font-weight: 700; font-display: swap;
}

:root {
  --dz-navy: #1E3A5F;
  --dz-navy-2: #16304F;
  --dz-navy-ink: #16263D;
  --dz-gold: #C9A84C;
  --dz-gold-2: #B8983F;
  --dz-page: #F0F1F4;
  --dz-ink: #2D3748;
  --dz-ink-2: #4A5568;
  --dz-muted: #718096;
  --dz-hint: #A0AEC0;
  --dz-line: #E5E7EB;
  --dz-foot: #0A1628;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; background: var(--dz-page); }
body {
  font-family: 'Markazi Text', serif;
  color: var(--dz-ink);
  font-size: 21px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0;
  min-height: 100vh; display: flex; flex-direction: column;
}
a { color: var(--dz-navy); text-decoration: none; }
a:hover { color: var(--dz-gold); }
::selection { background: rgba(201, 168, 76, .35); }
input, select, textarea, button { font-family: 'Markazi Text', serif; }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--dz-gold); outline-offset: 2px;
}

/* ---------- التنقل — لاصق أعلى الصفحة أثناء التصفح ---------- */
.dz-nav {
  background: var(--dz-navy);
  position: sticky; top: 0; z-index: 50;
  box-shadow: 0 2px 10px rgba(10, 22, 40, .25);
}
.dz-nav__in {
  max-width: 1160px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0 28px; min-height: 68px;
}
.dz-brand { display: flex; align-items: baseline; gap: 10px; padding: 12px 0; }
.dz-brand b { font-size: 31px; font-weight: 700; color: #fff; }
.dz-brand span { color: var(--dz-gold); font-size: 17px; font-weight: 500; }
.dz-links { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.dz-links a {
  color: #E2E8F0; padding: 20px 13px 17px; font-size: 20px;
  border-bottom: 3px solid transparent;
}
.dz-links a:hover { color: var(--dz-gold); }
.dz-links a.is-on { color: var(--dz-gold); font-weight: 600; border-bottom-color: var(--dz-gold); }
.dz-burger {
  cursor: pointer; border: none; background: none; padding: 10px 4px;
  display: none; align-items: center; color: var(--dz-gold);
}
.dz-mmenu { display: none; flex-direction: column; background: var(--dz-navy-2); padding: 8px 22px 16px; }
.dz-mmenu a { color: #E2E8F0; padding: 11px 2px; font-size: 21px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.dz-mmenu a:last-child { border-bottom: 0; }
.dz-mmenu a:hover { color: var(--dz-gold); }
.dz-mmenu a.is-on { color: var(--dz-gold); font-weight: 700; }
.dz-mmenu.is-open { display: flex; }
@media (max-width: 760px) {
  .dz-links { display: none; }
  .dz-burger { display: flex; }
}


/* ---------- مشترکات الهيكل ---------- */
.dz-main { max-width: 1160px; margin: 0 auto; padding: 44px 24px 70px; width: 100%; flex: 1; }
.dz-card {
  background: #fff; border: 1px solid var(--dz-line); border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}
.dz-seg { display: flex; border: 2px solid var(--dz-line); border-radius: 10px; overflow: hidden; background: #fff; }
.dz-seg button {
  cursor: pointer; border: none; padding: 8px 22px;
  background: #fff; color: var(--dz-muted); font-size: 20px; font-weight: 700;
}
.dz-seg button[aria-pressed="true"] { background: var(--dz-navy); color: #fff; }

/* ---------- التذييل ---------- */
.dz-foot { background: var(--dz-foot); color: #A8B4C4; }
.dz-foot__in {
  max-width: 1160px; margin: 0 auto; padding: 22px 24px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px 24px;
}
.dz-foot__brand { font-size: 22px; font-weight: 700; color: #fff; }
.dz-foot__links { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 18px; }
.dz-foot__links a { color: #A8B4C4; }
.dz-foot__links a:hover { color: var(--dz-gold); }
.dz-foot__note { color: #6E7E93; font-size: 17px; }


/* ---------- عناصر النماذج المشتركة (خيارات/حبوب/ملاحظات) ---------- */
.dz-panel { padding: 26px 28px; display: flex; flex-direction: column; gap: 14px; }
.dz-panel__t {
  display: flex; align-items: center; gap: 9px;
  color: var(--dz-navy); font-size: 25px; font-weight: 700;
}
.dz-panel__t svg { color: var(--dz-gold); flex: none; }

/* بطاقات الخيارات */
.dz-optgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.dz-optgrid--wide { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.dz-opt {
  text-align: right; cursor: pointer; border-radius: 10px; padding: 14px 16px;
  border: 2px solid var(--dz-line); background: #fff;
  display: flex; flex-direction: column; gap: 3px; font: inherit;
}
.dz-opt:hover { border-color: var(--dz-gold); }
.dz-opt[aria-pressed="true"] { border-color: var(--dz-gold); background: rgba(201, 168, 76, .09); }
.dz-opt__t { color: var(--dz-navy); font-size: 22px; font-weight: 700; }
.dz-opt__range { color: var(--dz-gold); font-size: 17px; font-weight: 600; }
.dz-opt__d { color: var(--dz-muted); font-size: 17px; line-height: 1.45; }

/* صفا الجنس والمذهب */
.dz-pair { display: flex; flex-wrap: wrap; gap: 24px; }
.dz-pair > div { display: flex; flex-direction: column; gap: 10px; }
.dz-pair__gender { flex: 1; min-width: 200px; }
.dz-pair__madhhab { flex: 1.6; min-width: 240px; }
.dz-pair span.t { color: var(--dz-navy); font-size: 22px; font-weight: 700; }
.dz-pillrow { display: flex; gap: 10px; flex-wrap: wrap; }
.dz-pill {
  flex: 1; min-width: 90px; cursor: pointer; border-radius: 10px; padding: 9px 12px;
  border: 2px solid var(--dz-line); background: #fff;
  color: var(--dz-navy); font: inherit; font-size: 20px; font-weight: 700;
}
.dz-pill:hover { border-color: var(--dz-gold); }
.dz-pill[aria-pressed="true"] { border-color: var(--dz-gold); background: rgba(201, 168, 76, .09); }
.dz-pair .hint { color: var(--dz-hint); font-size: 16px; line-height: 1.5; }

.dz-note { padding: 15px 20px; display: flex; gap: 13px; align-items: flex-start; }
.dz-note svg { color: var(--dz-gold); flex: none; margin-top: 3px; }
.dz-note__t { color: var(--dz-navy); font-size: 20px; font-weight: 700; }
.dz-note__d { color: var(--dz-ink-2); font-size: 18px; line-height: 1.6; }

.dz-cta {
  cursor: pointer; border: none; background: var(--dz-gold); color: var(--dz-navy-ink);
  font-size: 22px; font-weight: 700; padding: 12px 20px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.dz-cta:hover { background: var(--dz-gold-2); }