/* Stripe Donations - Tracker (matches donation form color style)
   --main-color is set on .sd-tracker via inline style from PHP, same as form.
*/

.sd-tracker {
  --sd-tracker-color: var(--main-color, #a5452d);

  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  color: #333;
  box-sizing: border-box;

  max-width: 560px;
  padding: 24px 28px;
  border: 2px solid var(--sd-tracker-color);
  border-radius: 15px;
  background: linear-gradient(135deg, rgb(253, 247, 240) 0%, rgba(253, 247, 240, 0.95) 100%);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.sd-tracker__title {
  font-size: 1.6em;
  font-weight: 600;
  color: var(--sd-tracker-color);
  margin: 0 0 12px 0;
  text-align: center;
}

.sd-tracker__title::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  background: var(--sd-tracker-color);
  margin: 8px auto 0 auto;
  border-radius: 2px;
}

.sd-tracker__bar {
  width: 100%;
  height: 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  overflow: hidden;
  position: relative;
}

.sd-tracker__bar-fill {
  height: 100%;
  width: 0%;
  background: var(--sd-tracker-color);
  border-radius: 999px;
  transition: width 250ms ease;
}

.sd-tracker__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.sd-tracker__amounts {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 1em;
}

.sd-tracker__raised {
  font-weight: 700;
  color: #333;
}

.sd-tracker__sep {
  opacity: 0.6;
  color: #666;
}

.sd-tracker__goal {
  font-weight: 600;
  color: #666;
}

.sd-tracker__percent {
  font-weight: 700;
  font-size: 1em;
  color: var(--sd-tracker-color);
}

.sd-tracker__status {
  margin-top: 10px;
  font-size: 0.85em;
  color: #777;
  min-height: 1.2em;
}

.sd-tracker__status[data-error="1"] {
  color: #b42318;
}

/* Admin-only error box (rendered by SD_Campaigns if misconfigured) */
.sd-tracker--error {
  border-color: #f5c2c7;
  background: #f8d7da;
}

.sd-tracker__error {
  margin: 0;
  color: #842029;
  font-size: 0.9em;
}