/* Live JustGiving fundraising widget: a card (login page) and a 728x90 banner (auction header).
   Classes are prefixed fr- so they don't clash with the auction's .card, .stats, etc. */
[hidden] { display: none !important; }

.fr-frame {
  --lap: 8s;       /* time for an orb to go once round the box */
  --radius: 16px;
  position: relative;
  width: min(400px, 100%);
  color: #1d2433;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.fr-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

/* Header banner version, at the standard 728 x 90 leaderboard size */
.fr-banner-frame {
  --radius: 12px;
  width: min(728px, 100%);
}
.fr-banner {
  height: 90px;
  box-sizing: border-box;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.fr-banner-raised { font-size: 2.1rem; font-weight: 800; line-height: 1; white-space: nowrap; }
.fr-banner-label { font-size: 0.8rem; color: #5b6475; }
.fr-banner-progress { flex: 1; min-width: 0; }
.fr-banner-title, .fr-banner-status { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-banner-title { margin-bottom: 6px; font-size: 0.95rem; font-weight: 600; }
.fr-banner .fr-progress { height: 10px; }
.fr-banner .fr-status { margin: 6px 0 0; font-size: 0.72rem; }
.fr-banner-stats { display: flex; gap: 14px; white-space: nowrap; }
.fr-banner-stats strong { display: block; font-size: 1rem; }
.fr-banner-stats span { color: #5b6475; font-size: 0.7rem; }
@media (max-width: 760px) {
  .fr-banner-stats { display: none; }
  .fr-banner-raised { font-size: 1.6rem; }
  .fr-banner { gap: 14px; padding: 0 14px; }
}

/* Placed outside .fr-card so the glow isn't clipped by its overflow: hidden.
   --start spaces the orbs evenly round the card; --i is how far a trail dot lags behind its orb. */
.fr-orb, .fr-trail {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  offset-path: inset(0 round var(--radius));
  offset-rotate: 0deg;
  animation: fr-trace-edge var(--lap) linear infinite;
  animation-delay: calc(var(--i) * var(--lap) / 320 - var(--start) * var(--lap));
  pointer-events: none;
}
.fr-orb {
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, #fff 0 35%, var(--colour) 70%);
  box-shadow:
    0 0 8px 3px color-mix(in srgb, var(--colour) 80%, transparent),
    0 0 22px 8px color-mix(in srgb, var(--colour) 35%, transparent);
}
.fr-trail {
  /* sized with width/height, not scale: scale would also shrink the dot's position along the path */
  width: calc(7px - var(--fade) * 4px);
  height: calc(7px - var(--fade) * 4px);
  background: var(--colour);
  box-shadow: 0 0 6px 2px color-mix(in srgb, var(--colour) 60%, transparent);
  opacity: calc(1 - var(--fade));
}
@keyframes fr-trace-edge {
  from { offset-distance: 0%; }
  to   { offset-distance: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .fr-orb, .fr-trail { display: none; }
}

.fr-image { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.fr-content { padding: 24px 28px 28px; }
.fr-title { margin: 0 0 4px; font-size: 1.3rem; }
.fr-subtitle { margin: 0 0 24px; color: #5b6475; }
.fr-raised { font-size: 3rem; font-weight: 800; line-height: 1; }
.fr-raised-label { margin: 4px 0 16px; color: #5b6475; }

.fr-progress { height: 16px; background: #f1f1f1; border-radius: 8px; overflow: hidden; }
.fr-bar { height: 100%; width: 0; background: #FFC72C; border-radius: 8px; transition: width 1s ease; }

.fr-stats { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 20px; }
.fr-stats strong { display: block; font-size: 1.25rem; }
.fr-stats span { color: #5b6475; font-size: 0.9rem; }

.fr-status { margin: 24px 0 0; font-size: 0.85rem; color: #8a93a3; }
.fr-status.error { color: #c4122f; }
/* The card and banner are links to the JustGiving page. Only the card is display: block;
   the banner keeps its display: flex row. */
.fr-link { color: inherit; text-decoration: none; }
.fr-link:not(.fr-banner) { display: block; }

/* Goal reached: % of target (and the bar) go green */
.fr-goal [data-fr="percent"] { color: #00A651; }
.fr-goal .fr-bar { background: #00A651; }