/* ==========================================================================
   DONATIONS
   ========================================================================== */
.donate{
  background: var(--color-brand-brown); color:#fff; border-radius: var(--radius-lg); padding: var(--space-xl);
  display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items:center;
}
.donate h2{ color:#fff; }
.donate p{ color: rgba(255,255,255,.75); }
.donate-types{ display:flex; flex-wrap:wrap; gap: 10px; margin-block: var(--space-sm); }
.donate-type{
  padding: 10px 18px; border-radius: var(--radius-pill); border: 1px solid rgba(255,255,255,.25); font-size: var(--fs-xs); font-weight:700;
  background: rgba(255,255,255,.06);
}
.donate-type.is-active{ background: var(--color-secondary); color: var(--color-brand-brown); border-color: var(--color-secondary); }
.donate-progress-list{ display:flex; flex-direction:column; gap: var(--space-sm); }
.donate-progress-item{ background: rgba(255,255,255,.06); border-radius: var(--radius-md); padding: var(--space-sm); }
.donate-progress-item .progress{ background: rgba(255,255,255,.15); }
@media (max-width: 900px){ .donate{ grid-template-columns:1fr; } }

/* ==========================================================================
   NEWSLETTER
   ========================================================================== */
.newsletter{
  background: var(--color-primary-light); border-radius: var(--radius-lg); padding: var(--space-lg);
  display:flex; align-items:center; justify-content:space-between; gap: var(--space-md); flex-wrap: wrap;
}
.newsletter form{ display:flex; gap:8px; flex: 1 1 380px; }
.newsletter input[type=email]{
  flex:1; padding: 14px 18px; border-radius: var(--radius-pill); border:1px solid var(--color-border); background:#fff;
}

/* ==========================================================================
   MAP
   ========================================================================== */
.site-map{ border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-sm); }
.site-map iframe{ width:100%; height: 420px; border:0; display:block; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background: var(--color-ink); color: rgba(255,255,255,.75); padding-block: var(--space-2xl) var(--space-md); }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--space-lg); margin-bottom: var(--space-lg); }
.footer-brand img{ height: 56px; margin-bottom: var(--space-xs); }
.footer-brand p{ color: rgba(255,255,255,.55); font-size: var(--fs-xs); max-width: 32ch; }
.footer-social{ display:flex; gap: 10px; margin-top: var(--space-sm); }
.footer-social a{ width:38px; height:38px; border-radius:50%; background: rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; transition: background var(--dur-fast); }
.footer-social a:hover{ background: var(--color-secondary); color: var(--color-brand-brown); }
.footer-col h4{ color:#fff; font-size: var(--fs-sm); margin-bottom: var(--space-sm); }
.footer-col ul{ display:flex; flex-direction:column; gap: 10px; }
.footer-col a{ font-size: var(--fs-xs); color: rgba(255,255,255,.65); transition: color var(--dur-fast); }
.footer-col a:hover{ color: var(--color-secondary); }
.footer-contact li{ display:flex; align-items:flex-start; gap:10px; font-size: var(--fs-xs); }
.footer-bottom{ border-top: 1px solid rgba(255,255,255,.1); padding-top: var(--space-sm); display:flex; justify-content:space-between; flex-wrap:wrap; gap: 8px; font-size: var(--fs-2xs); color: rgba(255,255,255,.45); }
@media (max-width: 980px){ .footer-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   SCROLL REVEAL (خفيف)
   ========================================================================== */
.reveal{ opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

/* Skeleton loading */
.skeleton{ background: linear-gradient(90deg, var(--color-surface-alt) 25%, var(--color-border) 37%, var(--color-surface-alt) 63%); background-size: 400% 100%; animation: skeleton-loading 1.4s ease infinite; border-radius: var(--radius-sm); }
@keyframes skeleton-loading{ 0%{ background-position: 100% 50%; } 100%{ background-position: 0 50%; } }

/* Breadcrumb */
.breadcrumb{ font-size: var(--fs-2xs); color: var(--color-ink-soft); margin-bottom: var(--space-sm); }
.breadcrumb a{ color: var(--color-primary); font-weight:600; }
.breadcrumb span[aria-hidden]{ margin-inline:6px; }

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lightbox-overlay{
  position: fixed; inset: 0; background: rgba(22,36,29,.92); z-index: 999;
  display: flex; align-items: center; justify-content: center; padding: var(--space-md);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out);
}
.lightbox-overlay.is-open{ opacity: 1; pointer-events: auto; }
.lightbox-img{ max-width: 90vw; max-height: 85vh; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.lightbox-close{
  position: absolute; top: 20px; inset-inline-end: 24px; background: rgba(255,255,255,.12); color: #fff;
  border: 0; width: 44px; height: 44px; border-radius: 50%; font-size: 1.6rem; line-height: 1;
}
.lightbox-close:hover{ background: rgba(255,255,255,.22); }