/* PIFster Donations Leaderboard */
.pifster-leaderboard{border:1px solid #e5e7eb;border-radius:10px;padding:12px 14px;background:#fff;color:#111827;font-family:inherit;box-shadow:0 2px 12px rgba(17,24,39,0.06);margin-top:16px;position:relative;overflow:hidden}

/* Header with stronger hierarchy */
.pifster-leaderboard__header{display:flex;align-items:center;gap:8px;font-weight:700;margin-bottom:10px;font-size:16px;color:#0f172a}
.pifster-leaderboard__header::before{content:"";display:inline-block;width:8px;height:8px;border-radius:999px;background:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,0.15);animation:pifster-leaderboard-pulse 2.8s ease-in-out infinite}

@keyframes pifster-leaderboard-pulse{
  0%,100%{
    transform:scale(1);
    opacity:1;
  }
  50%{
    transform:scale(1.35);
    opacity:0.75;
  }
}

/* Totals as compact badges (2-up + full-width PIFster) */
.pifster-leaderboard__totals{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.pifster-leaderboard__totals .plb-total{border:1px solid #e5e7eb;border-radius:8px;padding:8px 10px;display:flex;flex-direction:column;gap:2px}
.pifster-leaderboard__totals .plb-total:nth-child(1){background:linear-gradient(180deg,#eff6ff 0%,#f5f9ff 100%)} /* Direct */
.pifster-leaderboard__totals .plb-total:nth-child(2){background:linear-gradient(180deg,#f0fdf4 0%,#f6fef9 100%)} /* Community */
.pifster-leaderboard__totals .plb-total--pifster{grid-column:1 / -1;background:linear-gradient(180deg,#faf5ff 0%, #fbf7ff 100%);flex-direction:row;align-items:center;justify-content:space-between;padding:6px 10px}
.pifster-leaderboard__totals .plb-total--pifster .plb-total__label{margin-bottom:0}
.plb-total__label{font-size:12px;color:#475569;margin-bottom:2px;font-weight:600}
.plb-total__value{font-size:15px;font-weight:700;color:#111827}

.pifster-leaderboard__action--migrate{
  background:#eef2ff;
  border-color:#c7d2fe;
  color:#1d4ed8;
}
.pifster-leaderboard__action--migrate:hover,
.pifster-leaderboard__action--migrate:focus{
  background:#e0e7ff;
  border-color:#a5b4fc;
  color:#1d4ed8;
  box-shadow:0 0 0 3px rgba(165,180,252,0.35);
}
.pifster-leaderboard__action-chip{
  margin-left:auto;
  padding:2px 8px;
  border-radius:999px;
  background:#1d4ed8;
  color:#fff;
  font-size:11px;
  font-weight:600;
}
.pifster-leaderboard__action-note--migrate{
  color:#475569;
}

/* Recent list with grid layout */
.pifster-leaderboard__list{list-style:none;margin:8px 0 0 0;padding:8px 0 0 0;display:flex;flex-direction:column;border-top:1px solid #eaeef3}
.plb-item{display:grid;grid-template-columns:1fr auto auto;align-items:center;column-gap:10px;padding:8px 0;border-top:1px solid #f1f5f9}
.pifster-leaderboard__list .plb-item:first-child{border-top:none}
.plb-item__name{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#1f2937;font-size:14px}
.plb-item__dot{display:none}
.plb-item__amount{font-weight:700;color:#111827;font-size:14px}
.plb-item__date{text-align:right;color:#64748b;font-size:12px;min-width:44px}
.plb-item:hover{background:#f9fafb}

/* Hover tints by beneficiary */
.plb-item.plb-item--direct:hover{background:#eff6ff}     /* same light blue as Direct badge */
.plb-item.plb-item--community:hover{background:#f0fdf4}  /* same light green as Community badge */
.plb-item.plb-item--pifster:hover{background:#faf5ff}    /* optional gentle purple */

/* Responsive: allow this block to drop below grids on small screens via container layout */
@media (max-width: 768px){
  .pifster-leaderboard{margin-top:16px}
  .pifster-leaderboard__totals{grid-template-columns:1fr} /* stack all three on small screens */
}

/* Large screens: keep the leaderboard tidy and aligned in tall pages */
@media (min-width: 1024px){
  .pifster-leaderboard{
    max-width: 360px; /* avoid over-stretching in wide sidebars */
    position: sticky;  /* stays visible while scrolling */
    top: 16px;        /* offset from top */
  }
}

/* Bottom pill accent to echo charity cards */
.pifster-leaderboard::after{
  content:"";
  display:block;
  width:46px;
  height:6px;
  border-radius:999px;
  background: #e9eef5;
  margin:10px auto 2px;
}

/* Countdown footer */
.pifster-leaderboard__countdown {
  margin-top: 1.5rem;
  border: 1px solid #F5EAD2;
  border-radius: 8px;
  background: linear-gradient(180deg, #FFFBF5 0%, #FFF7EB 100%);
  padding: 10px 12px 12px;
  text-align: center;
}

.pifster-leaderboard__actions {
  margin-top: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pifster-leaderboard__action-block {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.pifster-leaderboard__action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid #d8dde7;
  border-radius: 12px;
  background: #f8fafc;
  color: #1f2937;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.pifster-leaderboard__action:hover,
.pifster-leaderboard__action:focus {
  background: #eef2f8;
  border-color: #c9d3e4;
  color: #2563eb;
  box-shadow: 0 0 0 3px rgba(202, 211, 224, 0.35);
  text-decoration: none;
}

.pifster-leaderboard__action-icon {
  font-size: 15px;
  line-height: 1;
}

.pifster-leaderboard__action-label {
  line-height: 1.2;
}

.pifster-leaderboard__action-note {
  font-size: 12px;
  color: #667085;
  line-height: 1.4;
}

.pifster-leaderboard__countdown .plb-progress {
  position: relative;
  height: 2px;
  width: 100%;
  border-radius: 999px;
  background: rgba(245, 202, 110, 0.45);
  overflow: hidden;
  margin-bottom: 8px;
}
.pifster-leaderboard__countdown .plb-progress__remaining{
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: #22c55e; /* green-500 for remaining */
}
.pifster-leaderboard__countdown .plb-countdown__label{
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
  margin-bottom: 4px;
  letter-spacing: .02em;
}
.pifster-leaderboard__countdown .plb-countdown__value{
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  font-variant-numeric: tabular-nums; /* stable width digits */
}

.pifster-leaderboard__countdown .plb-countdown__sublabel{
  margin-top: 4px;
  font-size: 12px;
  color: #64748b;
}

/* Under-a-day emphasis (JS can toggle this class if desired later) */
.pifster-leaderboard__countdown .plb-countdown__value.is-urgent{
  color: #2563eb; /* blue-600 */
}