:root{
  --navy:#0d2b4a;            /* Given */
  --blue:#19a7ff;            /* Committed delta */
  --gold:#e9b84b;            /* Goal remainder */
  --ink:#0f1226;
  --muted:#6b7280;
  --radius:28px;             /* pill radius */
  --shadow:0 6px 18px rgba(16, 24, 40, .10);
  --gap:16px;
}

*{box-sizing:border-box}
.giving-widget{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color: var(--ink);
  max-width: 940px;
  margin: 24px auto;
  padding: 8px 20px 28px;
}

.note{
  margin: 8px 6px 14px;
  font-size: 13px;
  color: var(--muted);
}

.giving-bar .track{
  position: relative;
  width: 100%;
  height: 88px;
  border-radius: calc(var(--radius) * 1.2);
  background: var(--gold);
  box-shadow: inset 0 0 0 4px #e5a319, var(--shadow);
  overflow: hidden;
}

/* Fills */
.fill{
  position:absolute; top:0; left:0; height:100%;
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1), left 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.fill.given{ background: var(--navy); width: 0%; transition-delay: 0.6s; z-index: 2; }
.fill.committed{ background: var(--blue); left:auto; right:auto; width:0%; z-index: 1; }

/* Legend */
.legend{
  display: flex;
  gap: 32px;
  justify-content: center;
  margin-top: 20px;
}
.legend-item{
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.legend-item.animate{
  opacity: 1;
  transform: translateY(0);
}
.legend-color{
  width: 38px;
  height: 38px;
  border-radius: 4px;
  flex-shrink: 0;
}
.legend-color.given{ background: var(--navy); }
.legend-color.committed{ background: var(--blue); }
.legend-text{
  display: flex;
  flex-direction: column;
}
.legend-text .amount{ font-weight: 800; font-size: 18px; line-height: 1.1; }
.legend-text .sub{ font-weight: 600; font-size: 13px; color: var(--muted); }

/* Goal markers below the pill */
.markers{
  position:relative; margin-top: 14px; height: 70px;
}
.marker{
  position:absolute; transform: translateX(-50%);
  text-align:center; white-space:nowrap;
}
.marker .value{ display:block; font-weight:800; font-size: clamp(16px, 2.6vw, 26px) }
.marker .caption{ display:block; color: var(--muted); font-size: clamp(12px, 1.9vw, 16px) }

.marker.god{ right: 0; transform: translateX(0); text-align: right; } /* snaps to right edge */

/* CTA button */
.cta{ display:flex; justify-content:center; margin-top: 26px; }
.give-btn{
  display:inline-block; padding: 16px 56px; border-radius: 16px;
  background: var(--navy); color:#fff; text-decoration:none; font-weight:900; letter-spacing:.6px;
  box-shadow: var(--shadow);
  transition: transform .06s ease, box-shadow .2s ease, opacity .2s ease;
  user-select:none;
}
.give-btn:hover{ transform: translateY(-1px); }
.give-btn:active{ transform: translateY(0); box-shadow: 0 2px 10px rgba(16,24,40,.18); }
.give-btn:focus-visible{ outline: 3px solid #9ad7ff; outline-offset: 3px; }

/* Responsive niceties */
@media (max-width: 640px){
  .legend{ flex-direction: column; gap: 16px; align-items: center; }
  .note{ text-align:center }
}