/* ============================================================
   Public reviews page — mirrors the established page UI while
   reusing the theme's shared hero, buttons, CTA and containers.
   ============================================================ */
.reviews-page { overflow: hidden; }

.rv-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  max-width: 790px;
  margin: 30px auto 0;
  padding: 26px 30px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  text-align: start;
}
.rv-big {
  min-width: 116px;
  padding-inline-end: 30px;
  border-inline-end: 1px solid var(--line);
  text-align: center;
}
.rv-big .num {
  color: var(--ink-1);
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: .95;
}
.rv-big .stars,
.rv-when .stars {
  color: #f59e0b;
  letter-spacing: 2px;
}
.rv-big .stars { margin-top: 6px; font-size: 14px; }
.rv-big .cnt { margin-top: 4px; color: var(--ink-4); font-size: 12px; }

.rv-breakdown { display: grid; gap: 7px; min-width: 220px; }
.rv-brow {
  display: grid;
  grid-template-columns: 36px 1fr 28px;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 2px 4px;
  color: var(--ink-4);
  border: 0;
  border-radius: 7px;
  background: transparent;
  font: inherit;
  font-size: 12px;
  text-align: start;
  transition: background .15s ease, color .15s ease;
}
.rv-brow:hover,
.rv-brow.active { color: var(--brand-purple); background: var(--accent-soft); }
.rv-brow .lbl { color: var(--ink-3); }
.rv-brow .lbl span { color: #f59e0b; }
.rv-brow .bar {
  display: block;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-3);
}
.rv-brow .bar span { display: block; height: 100%; border-radius: inherit; background: var(--brand-gradient); }
.rv-brow .cnt { text-align: end; }

.rv-summary-cta { display: grid; justify-items: center; gap: 8px; }
.rv-summary-cta > span { color: var(--ink-4); font-size: 12px; }

.reviews-list-section { padding: 54px 0 0; }
.rv-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.rv-filters button {
  min-height: 36px;
  padding: 7px 13px;
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.1;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.rv-filters button:hover,
.rv-filters button.active { color: var(--brand-purple); border-color: var(--brand-purple); background: var(--accent-soft); }
.rv-filters button:disabled,
.rv-brow:disabled { cursor: wait; opacity: .6; }
.rv-filters button:focus-visible,
.rv-brow:focus-visible,
.reviews-load-more:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand-purple) 28%, transparent); outline-offset: 2px; }

.rv-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.rv-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 23px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.rv-card:hover { border-color: color-mix(in srgb, var(--brand-purple) 45%, var(--line)); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.rv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.rv-who { display: flex; align-items: center; min-width: 0; gap: 12px; }
.rv-who .av {
  position: relative;
  display: inline-flex;
  width: 42px;
  height: 42px;
  flex: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
}
.rv-who .rv-avatar {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--surface);
  object-fit: cover;
}
.rv-who strong { display: block; overflow-wrap: anywhere; color: var(--ink-1); font-size: 14.5px; }
.rv-who div > span { display: block; margin-top: 2px; color: var(--ink-4); font-size: 12px; line-height: 1.35; }
.rv-when { min-width: 76px; flex: none; text-align: end; }
.rv-when .stars { display: block; margin-bottom: 4px; font-size: 14px; line-height: 1; white-space: nowrap; }
.rv-when .date { color: var(--ink-4); font-size: 12px; line-height: 1.25; white-space: nowrap; }
.rv-card h2 { margin: 0 0 8px; color: var(--ink-1); font-size: 16px; font-weight: 600; letter-spacing: -.01em; line-height: 1.4; }
.rv-card > p { margin: 0; color: var(--ink-3); font-size: 14.5px; line-height: 1.65; }
.rv-source {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
  color: var(--brand-purple);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}
.rv-source:hover { color: var(--brand-purple); text-decoration: underline; text-underline-offset: 2px; }

.rv-empty { margin: 0; padding: 54px 20px; color: var(--ink-4); font-size: 14.5px; text-align: center; }
.rv-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.reviews-load-status { margin: 0; color: var(--ink-4); font-size: 13px; }
.reviews-load-more {
  min-height: 40px;
  padding: 9px 14px;
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.reviews-load-more:hover { color: var(--brand-purple); border-color: var(--brand-purple); background: var(--accent-soft); }
.reviews-load-more[hidden] { display: none; }
.reviews-load-more[aria-busy="true"] { cursor: wait; opacity: .72; }
.reviews-cta-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* Keep review controls, score bars and reading order anchored to the RTL start
   edge when the page is rendered in Persian or Arabic. */
html[dir="rtl"] .rv-summary,
html[dir="rtl"] .rv-card,
html[dir="rtl"] .reviews-load-wrap { direction: rtl; }
html[dir="rtl"] .rv-brow { direction: rtl; text-align: right; }
html[dir="rtl"] .rv-brow .bar > span { margin-inline-end: auto; }

@media (max-width: 760px) {
  .rv-summary { gap: 22px; padding: 24px; }
  .rv-list { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
  .rv-big { width: 100%; padding: 0 0 20px; border: 0; border-bottom: 1px solid var(--line); }
  .rv-breakdown { width: 100%; }
  .rv-head { flex-direction: column; }
  .rv-when { text-align: start; }
  .rv-pager { flex-direction: column; }
}