/* reviews.css — self-hosted Reviews App widget. Served from the Worker (/reviews.css).
   Self-contained + themeable: override the --rv-* vars in your theme to match. */
.rv {
  --rv-star: #e8a23d;
  --rv-star-off: #d9d2c7;
  --rv-ink: #1f1b16;
  --rv-muted: #7a7268;
  --rv-line: rgba(0,0,0,.12);
  --rv-bg: transparent;
  --rv-accent: var(--rv-star);
  --rv-radius: 4px;
  --rv-font: inherit;
  font-family: var(--rv-font);
  color: var(--rv-ink);
  background: var(--rv-bg);
  max-width: 860px;
  margin: 40px 0;
}
.rv * { box-sizing: border-box; }

/* summary header */
.rv-head { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; padding-bottom: 22px; border-bottom: 1px solid var(--rv-line); }
.rv-summary { text-align: center; }
.rv-avg { font-size: 44px; font-weight: 600; line-height: 1; }
.rv-stars { color: var(--rv-star-off); letter-spacing: 2px; font-size: 18px; }
.rv-stars.sm { font-size: 14px; letter-spacing: 1px; }
.rv-star.on { color: var(--rv-star); }
.rv-count { font-size: 13px; color: var(--rv-muted); margin-top: 4px; }
.rv-dist { display: flex; flex-direction: column; gap: 4px; min-width: 180px; }
.rv-dist-row { display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 2px 0; cursor: pointer; font: inherit; color: var(--rv-muted); }
.rv-dist-row[aria-pressed="true"] .rv-dist-label { color: var(--rv-ink); font-weight: 600; }
.rv-dist-label { width: 26px; font-size: 12px; }
.rv-dist-bar { flex: 1; height: 7px; background: var(--rv-line); border-radius: 4px; overflow: hidden; }
.rv-dist-fill { display: block; height: 100%; background: var(--rv-star); }
.rv-dist-n { width: 24px; text-align: right; font-size: 12px; }

.rv-write-btn, .rv-submit, .rv-more {
  font: inherit; cursor: pointer; border: 1px solid var(--rv-ink);
  background: var(--rv-ink); color: #fff; padding: 11px 20px; border-radius: var(--rv-radius);
  letter-spacing: .02em;
}
.rv-write-btn { background: transparent; color: var(--rv-ink); white-space: nowrap; }
.rv-write-btn:hover, .rv-cancel:hover { border-color: var(--rv-accent); color: var(--rv-accent); }
.rv-more { display: block; margin: 24px auto 0; background: transparent; color: var(--rv-ink); }

/* form */
.rv-form { margin: 24px 0; padding: 22px; border: 1px solid var(--rv-line); border-radius: var(--rv-radius); display: flex; flex-direction: column; gap: 12px; }
.rv-form-title { margin: 0; font-size: 18px; font-weight: 600; }
.rv-rating-input { display: flex; gap: 4px; }
.rv-ri-star { font-size: 26px; background: none; border: 0; cursor: pointer; color: var(--rv-star-off); padding: 0; line-height: 1; }
.rv-ri-star.on { color: var(--rv-star); }
.rv-in { font: inherit; padding: 11px 13px; border: 1px solid var(--rv-line); border-radius: var(--rv-radius); width: 100%; }
textarea.rv-in { min-height: 90px; resize: vertical; }
.rv-photo-label { font-size: 14px; color: var(--rv-muted); cursor: pointer; display: inline-block; }
.rv-photo-preview { display: flex; gap: 8px; flex-wrap: wrap; }
.rv-photo-preview img { width: 54px; height: 54px; object-fit: cover; border-radius: 3px; }
.rv-form-actions { display: flex; gap: 12px; align-items: center; }
.rv-cancel { font: inherit; background: none; border: 1px solid var(--rv-line); padding: 11px 18px; border-radius: var(--rv-radius); cursor: pointer; color: var(--rv-muted); }
.rv-form-msg { margin: 0; font-size: 14px; }
.rv-form-msg.ok { color: #2e7d32; }
.rv-form-msg.err { color: #c62828; }

/* list */
.rv-list { display: flex; flex-direction: column; }
.rv-item { padding: 22px 0; border-bottom: 1px solid var(--rv-line); }
.rv-item.rv-hidden { display: none; }
.rv-item-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.rv-verified { font-size: 12px; color: #2e7d32; letter-spacing: .02em; }
.rv-item-title { margin: 0 0 4px; font-weight: 600; }
.rv-of { font-size: 13px; opacity: .7; margin: 0 0 4px; }
.rv-item-body { margin: 0 0 10px; line-height: 1.6; }
.rv-item-photos { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.rv-photo { width: 78px; height: 78px; object-fit: cover; border-radius: 3px; cursor: zoom-in; }
.rv-item-meta { font-size: 13px; color: var(--rv-muted); display: flex; gap: 12px; }
.rv-reply { margin-top: 10px; padding: 12px 14px; background: rgba(0,0,0,.04); border-radius: var(--rv-radius); font-size: 14px; }

/* lightbox */
.rv-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.82); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 24px; }
.rv-lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 4px; }
.rv-lightbox.rv-hidden { display: none; }

@media (max-width: 640px) {
  .rv-head { grid-template-columns: 1fr; gap: 16px; text-align: center; justify-items: center; }
  .rv-dist { width: 100%; max-width: 280px; }
}