/* Trustpilot rating badge. Star tiles and wordmark are Trustpilot's own
   brand assets; the score is painted by trustpilot.js from their live
   widget-data endpoint. Every Trustpilot colour is declared here so the
   script never carries a hex of its own — it only picks a band. */

.tp-badge {
  /* Trustpilot's rating-band palette, indexed by rounded star count, and
     their unfilled-tile grey. Taken from their Mini TrustBox stylesheet. */
  --tp-band-1: #FF3722; /* Bad */
  --tp-band-2: #FF8622; /* Poor */
  --tp-band-3: #FFCE00; /* Average */
  --tp-band-4: #73CF11; /* Great */
  --tp-band-5: #00B67A; /* Excellent */
  --tp-off: #DCDCE6;
  /* Band for the fallback rating below; trustpilot.js overwrites it. */
  --tp-band: var(--tp-band-4);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin: 0 auto;
  padding: 2px;
  text-decoration: none;
  color: inherit;
  border-radius: 10px;
  transition: transform 0.2s ease;
}

.tp-badge:hover {
  transform: translateY(-1px);
}

.tp-badge:focus-visible {
  outline: 2px solid var(--tp-band);
  outline-offset: 4px;
}

/* Trustpilot wordmark, above the tiles as in their Mini TrustBox. */
.tp-logo {
  display: block;
  width: 104px;
  height: auto;
}

/* Width only — the viewBox fixes the aspect ratio of the tile row. */
.tp-stars {
  display: block;
  width: 152px;
  height: auto;
}

/* Each tile is a full canvas, a half canvas drawn over it for .5 ratings,
   then the white star on top. */
.tp-canvas,
.tp-canvas-half {
  fill: var(--tp-off);
}

.tp-shape {
  fill: var(--white);
}

/* Fallback rating, shown until trustpilot.js paints and whenever the fetch
   fails. The nth-child bound is the whole fallback: change this one number
   (and --tp-band above, to the matching band) to change what is shown.
   Both canvases must be covered — the half paints over the full one, so
   filling only .tp-canvas leaves a grey left half on every tile. */
.tp-star:nth-child(-n + 4) .tp-canvas,
.tp-star:nth-child(-n + 4) .tp-canvas-half {
  fill: var(--tp-band);
}

.tp-line {
  font-size: 15px;
  font-weight: 500;
  color: var(--dark);
  letter-spacing: -0.3px;
}

.tp-score {
  font-weight: 700;
  margin-right: 3px;
}

/* Solid Trustpilot green, so it reads as their CTA rather than ours. The
   64px matches .club-callout's bottom padding, at every width, so the run
   into the footer keeps the page's spacing rhythm. */
.tp-collect-btn {
  display: block;
  width: fit-content;
  margin: 16px auto 64px;
  padding: 11px 20px;
  /* Literal, not --tp-band-5: the button is a sibling of .tp-badge, which
     is where that palette is scoped. */
  background: #00B67A;
  color: var(--white);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.3px;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s ease;
}

.tp-collect-btn:hover {
  background: #00996B;
}

.tp-collect-btn:focus-visible {
  outline: 2px solid #005128;
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .tp-stars { width: 132px; }
  .tp-line { font-size: 14px; }
}