/**
 * Zeestr — Recent Donations (scoped)
 * Fully self-contained styles. Safe against theme overrides.
 */

.zee-dw-scope{
  /* Brand + UI tokens (Elementor controls can override these via inline CSS vars) */
  --zee-navy:#155A98;
  --zee-blue:#2a7de1;
  --zee-mint:#85E3C9;
  --zee-gold:#E7CE6A;
  --zee-text:#1F2937;
  --zee-sub:#6B7280;
  --zee-surface:#F7F9FC;
  --zee-border:#E6EAF1;

  /* Avatar defaults */
  --zee-avatar-size:65px;
  --zee-avatar-font:22px;
  --zee-avatar-ff:"Bebas Neue","BebasNeue",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  --zee-avatar-bg:var(--zee-navy);
  --zee-avatar-fg:#fff;

  /* Matching badge (“M”) */
  --zee-badge-size:26px;
  --zee-badge-font:13px;
  --zee-badge-bg:#E6A513;
  --zee-badge-fg:#fff;
  --zee-badge-ring:#fff;
  --zee-badge-left:-10px; /* pulled out enough to be fully visible */
  --zee-badge-top:-10px;
}

/* Header row */
.zee-dw-scope .zee-dw-header{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;
}
.zee-dw-scope .zee-dw-heading{margin:0;color:var(--zee-text);}

/* SEE ALL button (text-only by default; Elementor can override) */
.zee-dw-scope .zee-dw-seeall__btn{
  appearance:none;border:0;background:transparent;
  color:var(--zee-blue);font-weight:700;cursor:pointer;
  padding:.4rem .6rem;border-radius:999px;
  display:inline-flex;align-items:center;gap:.25rem;
}

/* Grid */
.zee-dw-scope .zee-dw-list{
  --zee-dw-gap:12px;--zee-dw-cols:3;
  list-style:none;margin:0;padding:0;display:grid;gap:var(--zee-dw-gap);
  grid-template-columns:repeat(var(--zee-dw-cols),minmax(0,1fr));
}
.zee-dw-scope .zee-dw-cols-3{ --zee-dw-cols:3; }
.zee-dw-scope .zee-dw-cols-2{ --zee-dw-cols:2; }
@media (max-width:1024px){ .zee-dw-scope .zee-dw-list{ --zee-dw-cols:2; } }
@media (max-width:640px){  .zee-dw-scope .zee-dw-list{ --zee-dw-cols:1; } }

/* Card */
.zee-dw-scope .zee-dw-item__row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--zee-surface);border:1px solid var(--zee-border);
  border-radius:14px;padding:12px;
}
.zee-dw-scope .zee-dw-item__left{display:flex;align-items:center;gap:12px;min-width:0;}

/* ---------- Avatar (robust against theme overrides) ---------- */
.zee-dw-scope [data-letters]::before{
  /* Neutralize theme’s global 70x70 pseudo-circle inside our scope */
  all:unset;
  content:attr(data-letters);
  display:inline;
  line-height:1;
  color:inherit;
}

/* Avatar base */
.zee-dw-scope .zee-dw-avatar{
  position:relative; z-index:1;
  width:var(--zee-avatar-size) !important;
  height:var(--zee-avatar-size) !important;
  flex:0 0 var(--zee-avatar-size);
  border-radius:9999px !important;
  display:inline-grid; place-items:center;

  /* Force our colors/typography even if theme tries to override */
  background:var(--zee-avatar-bg) !important;
  color:var(--zee-avatar-fg) !important;
  font-family:var(--zee-avatar-ff) !important;
  font-size:var(--zee-avatar-font) !important;
  font-weight:700; line-height:1;
  text-transform:uppercase; letter-spacing:.5px;

  /* IMPORTANT: allow badge to render outside the circle */
  overflow:visible !important;
}

/* Initials */
.zee-dw-scope .zee-dw-avatar::before{ content:attr(data-letters); }
.zee-dw-scope .zee-dw-avatar.has-img::before{ display:none !important; }

/* If we load a real image (gravatar) */
.zee-dw-scope .zee-dw-avatar img{
  width:100%;height:100%;display:block;border-radius:9999px;object-fit:cover;
}

/* Matching ring around avatar */
.zee-dw-scope .zee-dw-avatar.is-matching{
  outline:2px solid var(--zee-blue);
  /* color-mix fallback for older browsers */
  box-shadow:0 0 0 3px rgba(42,125,225,.2);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--zee-blue) 20%, transparent);
}

/* Matching badge “M” (fixed so it doesn’t get clipped) */
.zee-dw-scope .zee-dw-avatar.is-matching::after{
  content:"M";
  position:absolute; left:var(--zee-badge-left); top:var(--zee-badge-top);
  width:var(--zee-badge-size); height:var(--zee-badge-size);
  border-radius:9999px;
  display:inline-grid !important; place-items:center;   /* correct the 'masonry' typo */
  background:var(--zee-badge-bg); color:var(--zee-badge-fg);
  font-size:var(--zee-badge-font); font-weight:700; line-height:1;
  border:2px solid var(--zee-badge-ring);
  z-index:3; pointer-events:none;
}

/* Text */
.zee-dw-scope .zee-dw-person{ min-width:0; }
.zee-dw-scope .zee-dw-name{
  font-size:18px;font-weight:700;color:var(--zee-text);
  line-height:1.3;margin:0;padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.zee-dw-scope .zee-dw-campaign{ font-size:13px;color:var(--zee-sub);margin-top:2px; }

.zee-dw-scope .zee-dw-item__meta{ text-align:right; }
.zee-dw-scope .zee-dw-amount{ font-size:16px;font-weight:700;color:var(--zee-text); }
.zee-dw-scope .zee-dw-date{ font-size:13px;color:var(--zee-sub);margin-top:2px; }

/* Empty state */
.zee-dw-scope .zee-dw-empty{ margin:8px 0; }
.zee-dw-scope .zee-dw-empty__box{
  background:#F4F4F4;border:1px solid #E7E7E7;border-radius:16px;text-align:center;padding:80px 20px;
}
.zee-dw-scope .zee-dw-empty__text{ font-size:24px;line-height:1.35;color:#9AA3AF; }
.zee-dw-scope .zee-dw-empty__btn{
  display:inline-block;padding:10px 16px;background:#BDBDBD;color:#fff;border-radius:10px;text-decoration:none;margin-top:14px;
}

/* Popup */
.zee-dw-scope .zee-dw-modal{ position:fixed; inset:0; display:none; }
.zee-dw-scope .zee-dw-modal[aria-hidden="false"]{ display:block; z-index:9999; }
.zee-dw-scope .zee-dw-modal__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.45); }
.zee-dw-scope .zee-dw-modal__dialog{
  position:relative; margin:4vh auto; width:min(1080px,94vw); max-height:92vh; overflow:auto;
  background:#fff; border-radius:14px; padding:18px; box-shadow:0 20px 40px rgba(0,0,0,.12);
}
/* Close button: simple cross, no background by default */
.zee-dw-scope .zee-dw-modal__close{
  appearance:none;border:0;background:transparent !important;color:#0f172a;
  width:36px;height:36px;line-height:36px;font-size:26px;border-radius:0 !important;cursor:pointer;
  position:sticky; top:0; float:right; z-index:10000;
}
.zee-dw-scope .zee-dw-modal__close:hover{ opacity:.8; }
.zee-dw-scope .zee-dw-modal__title{ font-size:20px; font-weight:700; margin:2px 0 12px; color:var(--zee-text); }

html.zee-dw-modal-open{ overflow:hidden; }

/* Load more */
.zee-dw-scope .zee-dw-loadmore-wrap{ text-align:center; margin-top:14px; }
.zee-dw-scope .zee-dw-loadmore{
  background:var(--zee-navy); color:#fff; border:0; padding:10px 16px;
  border-radius:999px; font-weight:700; cursor:pointer;
}
.zee-dw-scope .zee-dw-loadmore[disabled]{ opacity:.6; cursor:not-allowed; }