/* ──────────────────────────────────────────────────────────────────────────
   reviews-extra.css — the two states the original review stylesheet never
   had to handle.

   1. THE INVITE. The old widget always had reviews, so "no reviews yet" had
      no design. Three open forms under three products buried the price and
      the buy button, so the empty state folds to a single line and only
      opens if somebody reaches for it.

   2. ON A DARK GROUND. The shop sits inside .act-dark. Every colour in the
      original sheet assumed cream behind it, so the form notes rendered
      near-black on near-black. .rv-on-dark re-points the handful of
      colours that matter instead of duplicating the sheet.
   ────────────────────────────────────────────────────────────────────────── */

/* ═══ the invite ══════════════════════════════════════════════════════════ */

.rv-invite { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: .9rem; }
.rv-invite > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center;
  gap: .45rem; font-family: 'DM Sans', sans-serif; font-size: .78rem;
  color: var(--muted); transition: color .3s; }
.rv-invite > summary::-webkit-details-marker { display: none; }
.rv-invite > summary::after {
  content: "+"; font-size: .95rem; line-height: 1; opacity: .6;
  transition: transform .35s cubic-bezier(.22,1,.3,1); }
.rv-invite[open] > summary::after { content: "−"; transform: rotate(180deg); }
.rv-invite > summary:hover { color: var(--sage-dark); }
.rv-invite > summary:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; }
.rv-invite-star { color: var(--gold); font-size: .9rem; }
.rv-invite-body { margin-top: .85rem;
  animation: rv-open .45s cubic-bezier(.22,1,.3,1); }
@keyframes rv-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ═══ on a dark ground ════════════════════════════════════════════════════ */

.rv-on-dark .rv-invite { border-top-color: rgba(30,59,61,.16); }
.rv-on-dark .rv-invite > summary { color: rgba(243,241,236,0.78); }
.rv-on-dark .rv-invite > summary:hover { color: var(--gold-light); }
.rv-on-dark .rv-control-label { color: rgba(243,241,236,0.78); }
.rv-on-dark .rv-note { color: rgba(243,241,236,0.78); }
.rv-on-dark .rv-form input,
.rv-on-dark .rv-form textarea {
  background: rgba(5,15,16,.07); color: var(--ivory);
  border-color: rgba(30,59,61,.2); }
.rv-on-dark .rv-form input::placeholder,
.rv-on-dark .rv-form textarea::placeholder { color: rgba(243,241,236,0.78); }
.rv-on-dark .rv-form input:focus,
.rv-on-dark .rv-form textarea:focus { border-color: var(--gold); }
.rv-on-dark .rv-star-pick { color: rgba(243,241,236,0.78); }
.rv-on-dark .rv-submit { background: var(--gold); color: var(--on-copper); font-weight: 600; }
.rv-on-dark .rv-submit:hover { background: var(--gold-light); }
.rv-on-dark .rv-card,
.rv-on-dark .rv-summary,
.rv-on-dark .rv-controls { background: rgba(5,15,16,.06);
  border-color: rgba(30,59,61,.14); }
.rv-on-dark .rv-name, .rv-on-dark .rv-avg { color: var(--ivory); }
.rv-on-dark .rv-text { color: rgba(243,241,236,.78); }
.rv-on-dark .rv-date, .rv-on-dark .rv-count, .rv-on-dark .rv-tag,
.rv-on-dark .rv-results-meta { color: rgba(243,241,236,0.78); }

@media (prefers-reduced-motion: reduce) {
  .rv-invite-body { animation: none; }
  .rv-invite > summary::after { transition: none; }
}