/* Real-reviews widget (lib/ReviewsWidget.php). Sits on the site tokens from
   site.css; fallbacks keep it correct if a page loads it on its own. */
.etr {
  --etr-text: var(--text, #f3f5f8);
  --etr-muted: var(--muted, #929aaa);
  --etr-border: var(--border, rgba(255,255,255,.08));
  --etr-border-hover: var(--border-hover, rgba(255,255,255,.16));
  --etr-accent: var(--purple-light, #a98dff);
  --etr-surface: rgba(255,255,255,.025);
  color: var(--etr-text);
  margin: 0;
}
.etr-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.etr-heading { font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -.02em; margin: 0 0 18px; }

/* --- rating badge --- */
.etr-badge {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  min-height: 44px; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--etr-border); background: var(--etr-surface);
  color: var(--etr-text); text-decoration: none; font-size: .92rem; line-height: 1.3;
  transition: border-color .2s ease;
}
a.etr-badge:hover { border-color: var(--etr-border-hover); }
.etr-badge:focus-visible, .etr-toggle:focus-visible, .etr-card a:focus-visible, .etr-note a:focus-visible, .etr-fallback a:focus-visible {
  outline: 2px solid var(--etr-accent); outline-offset: 3px;
}
.etr-badge-text { color: var(--etr-muted); }
.etr-badge-text strong { color: var(--etr-text); font-weight: 700; }

/* --- stars: muted base row with a clipped filled row on top (partial ratings) --- */
.etr-stars { position: relative; display: inline-flex; flex-shrink: 0; align-self: flex-start; width: max-content; line-height: 0; }
.etr-badge .etr-stars { align-self: center; }
.etr-stars svg { width: 16px; height: 16px; min-width: 16px; flex: 0 0 16px; fill: currentColor; display: block; }
.etr-stars-base { display: inline-flex; gap: 2px; color: rgba(255,255,255,.16); }
.etr-stars-fill { position: absolute; inset: 0 auto 0 0; display: inline-flex; gap: 2px; overflow: hidden; white-space: nowrap; color: var(--etr-text); }

/* --- review cards --- */
.etr-strip { position: relative; margin-top: 22px; }
.etr-viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; border-radius: 16px; padding-bottom: 6px; }
.etr-viewport:focus-visible { outline: 2px solid var(--etr-accent); outline-offset: 4px; }
.etr-track { display: flex; gap: 16px; list-style: none; margin: 0; padding: 0; width: max-content; }
.etr-card {
  flex: 0 0 auto; width: min(340px, 82vw); scroll-snap-align: start;
  border: 1px solid var(--etr-border); border-radius: 16px; background: var(--etr-surface);
}
.etr-card figure { margin: 0; padding: 22px; display: flex; flex-direction: column; gap: 14px; height: 100%; box-sizing: border-box; }
.etr-card blockquote { margin: 0; flex: 1; }
.etr-card blockquote p {
  margin: 0; font-size: .95rem; line-height: 1.6; color: var(--etr-text);
  display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden;
}
.etr-card figcaption { display: flex; flex-direction: column; gap: 2px; font-size: .85rem; }
.etr-author { font-weight: 650; color: var(--etr-text); }
a.etr-author { text-decoration: none; align-self: flex-start; }
a.etr-author:hover { text-decoration: underline; text-underline-offset: 3px; }
.etr-note { margin: 12px 0 0; color: var(--etr-muted); font-size: .8rem; }
.etr-note a { color: var(--etr-muted); text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: 8px 0; margin: -8px 0; }
.etr-note a:hover { color: var(--etr-text); }
.etr-detail { color: var(--etr-muted); }
.etr-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; color: var(--etr-muted); font-size: .8rem; }
.etr-meta a { color: var(--etr-muted); text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: 6px 0; margin: -6px 0; }
.etr-meta a:hover { color: var(--etr-text); }

/* --- marquee (3+ cards): one slow loop, paused on hover; Pause button and
       keyboard focus switch to a still, manually scrollable strip --- */
.etr-toggle {
  min-height: 44px; min-width: 64px; padding: 8px 14px;
  border-radius: 999px; border: 1px solid var(--etr-border); background: transparent;
  color: var(--etr-muted); font: inherit; font-size: .82rem; cursor: pointer;
}
.etr-toggle:hover { color: var(--etr-text); border-color: var(--etr-border-hover); }
.etr-controls { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.etr-strip--marquee .etr-viewport {
  overflow: hidden; scroll-snap-type: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.etr-strip--marquee .etr-track { animation: etr-scroll 60s linear infinite; padding-right: 16px; }
.etr-strip--marquee:hover .etr-track { animation-play-state: paused; }
@keyframes etr-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.etr-strip--marquee.is-paused .etr-viewport { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask-image: none; mask-image: none; }
.etr-strip--marquee.is-paused .etr-track { animation: none; padding-right: 0; }
.etr-strip--marquee.is-paused .etr-dup { display: none; }

@media (prefers-reduced-motion: reduce) {
  .etr-strip--marquee .etr-viewport { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask-image: none; mask-image: none; }
  .etr-strip--marquee .etr-track { animation: none; padding-right: 0; }
  .etr-strip--marquee .etr-dup, .etr-controls { display: none; }
  .etr-badge { transition: none; }
}

.etr-fallback { color: var(--etr-muted, #929aaa); font-size: .92rem; margin: 0; }
.etr-fallback a { color: var(--purple-light, #a98dff); }

@media (max-width: 600px) {
  .etr-card figure { padding: 18px; }
  .etr-badge { font-size: .86rem; }
}

/* Compact block (lead wizard rail, signing page): badge + short quotes, no strip. */
.etr-compact { display: grid; gap: 12px; }
.etr-compact .etr-badge { justify-self: start; }
.etr-compact .etr-quote { margin: 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border, rgba(255,255,255,.08)); background: rgba(255,255,255,.03); }
.etr-compact .etr-quote blockquote { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--text, #f3f5f8); }
.etr-compact .etr-quote figcaption { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 8px; font-size: .76rem; color: var(--muted, #929aaa); }
.etr-compact .etr-quote figcaption b { color: var(--text, #f3f5f8); font-weight: 700; }
.etr-compact .etr-quote figcaption em { font-style: normal; color: var(--purple-light, #a98dff); }