/* Shared testimonials carousel — used by the referral landing page and the
 * rates marketing pages via templates/shared/testimonials.html.
 *
 * Self-contained: the --invite-* vars it needs carry fallbacks matching the
 * referral landing palette, so pages that don't define them render the same.
 */

.invite-testimonials {
  background: var(--invite-cream, #F8F8F8);
  padding: 40px 24px 32px;
}

.invite-testimonials-title {
  font-family: 'Merriweather', 'Georgia', serif;
  font-weight: 700;
  font-size: 32px;
  color: var(--invite-ink, #1D1B1E);
  margin: 0 0 20px;
  line-height: 1.2;
}

/* All testimonials share one grid cell so the section height is driven by
 * the tallest quote — no layout jump when paging. Only the active one is
 * visible; the rest fade out and become click-inert. */
.invite-testimonial-viewport {
  display: grid;
  margin-bottom: 24px;
}

.invite-testimonial {
  grid-area: 1 / 1;
  color: var(--invite-ink, #1D1B1E);
  opacity: 0;
  transition: opacity 250ms ease;
  pointer-events: none;
}

.invite-testimonial--active {
  opacity: 1;
  pointer-events: auto;
}

.invite-testimonial-quote {
  display: block;
  width: 36px;
  height: auto;
  margin-bottom: 12px;
}

.invite-testimonial-body {
  font-size: 18px;
  line-height: 1.55;
  color: var(--invite-ink-muted, #6B6870);
  margin: 0 0 12px;
}

.invite-testimonial-attribution {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.invite-testimonial-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--invite-ink, #1D1B1E);
}

.invite-testimonial-stars {
  font-size: 14px;
  color: var(--invite-orange, #EF8000);
  font-weight: 600;
}

/* Carousel arrows — soft grey circles on the F8F8F8 background. Colour is a
 * translucent ink rather than a fixed hex so the buttons feel like they
 * belong to the surface at any future background tweak. */
.invite-carousel-nav {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

.invite-carousel-btn {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(29, 27, 30, 0.14);
  color: var(--invite-ink, #1D1B1E);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.06s ease;
  -webkit-tap-highlight-color: transparent;
}

.invite-carousel-btn:hover,
.invite-carousel-btn:focus-visible {
  background: rgba(29, 27, 30, 0.22);
  outline: none;
}

.invite-carousel-btn:active { transform: scale(0.96); }

.invite-carousel-icon {
  width: 22px;
  height: 22px;
}

/* Autoplay timer — a stroke tracing the "next" button's edge, top-first and
 * clockwise. The JS animates stroke-dashoffset 100 → 0 (pathLength="100")
 * over the interval; this only styles the ring and hides it when idle. */
.invite-carousel-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.invite-carousel-ring circle {
  fill: none;
  stroke: var(--invite-ink, #1D1B1E);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

.invite-testimonials.is-autoplaying .invite-carousel-ring {
  opacity: 1;
}