/**
 * The review listing — shared by the manager's moderation screen and the
 * buyer's read-only one.
 *
 * Lives in a file rather than in each page's <style>, for the same reason
 * js/reviewList.js exists: two copies of one card is how the two views stop
 * looking like the same thing.
 */
.rv-wrap { max-width: 760px; margin: 0 auto; padding: 24px 16px 80px; }
.rv-crumb { font-size: 13px; margin-bottom: 14px; }
.rv-crumb a { color: var(--primary); text-decoration: none; }
.rv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
.rv-head h1 { font-size: 22px; font-weight: 700; color: var(--on-surface); margin: 0; }
.rv-refresh { border: 1px solid var(--outline); background: var(--surface); border-radius: 10px; width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.rv-refresh ion-icon { font-size: 20px; color: var(--primary); }
.rv-refresh:hover { border-color: var(--primary); }

.rv-card { background: var(--surface); border: 1px solid var(--outline-variant); border-radius: 12px;
  padding: 16px; margin-bottom: 16px; cursor: pointer; }
.rv-card:hover { border-color: var(--primary); }
.rv-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.rv-name { font-size: 15px; font-weight: 700; color: var(--on-surface); margin: 0; word-break: break-word; }
.rv-date { font-size: 12px; color: var(--on-surface-variant); margin: 2px 0 0; }
.rv-delete { flex: none; border: none; background: none; cursor: pointer; padding: 4px; color: var(--error-strong);
  font-size: 18px; line-height: 1; }
.rv-delete:hover { opacity: .75; }
.rv-stars { display: flex; gap: 2px; margin: 8px 0 0; font-size: 15px; }
.rv-stars .on { color: var(--gold); }
.rv-stars .off { color: var(--outline); }
.rv-feedback { font-size: 13.5px; color: var(--on-surface); margin: 8px 0 0; line-height: 1.5; word-break: break-word; }
.rv-img { display: block; width: 100%; max-height: 200px; object-fit: cover; border-radius: 8px; margin: 12px 0 0; }

.rv-empty { text-align: center; color: var(--on-surface-dim); padding: 60px 16px; font-size: 14px; }

.rv-loader { position: fixed; inset: 0; background: var(--scrim); display: flex;
  align-items: center; justify-content: center; z-index: 1200; }
.rv-spinner { width: 38px; height: 38px; border: 3px solid var(--primary-border); border-top-color: var(--primary);
  border-radius: 50%; animation: rv-spin .8s linear infinite; }
@keyframes rv-spin { to { transform: rotate(360deg); } }