/**
 * Shopra Product Reviews — styles
 * Rating summary, customer photos, review list, pagination, review form.
 * Uses the active theme's design tokens (CSS custom properties) where
 * available, e.g. --color-ink, --color-border, --space-md, --radius-md.
 */

/* Fractional star rating (overlay technique) */
.shopra-stars {
  position: relative;
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}
.shopra-stars-bg { color: var(--color-border, #e2e2e2); }
.shopra-stars-fg {
  position: absolute;
  top: 0; left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #F59E0B;
}

/* ── Rating summary ──────────────────────────────────────────────── */
.reviews-summary { padding: var(--space-md, 16px); }
.reviews-summary-title {
  font-size: var(--font-size-base, 16px);
  font-weight: 900;
  margin-bottom: var(--space-md, 16px);
}
.reviews-summary-body {
  display: flex;
  align-items: center;
  gap: var(--space-lg, 24px);
}
.reviews-avg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  min-width: 90px;
}
.reviews-avg-num { font-size: 32px; font-weight: 900; line-height: 1; }
.reviews-avg .shopra-stars { font-size: 16px; }
.reviews-avg-count { font-size: var(--font-size-xs, 12px); color: var(--color-ink-3, #888); font-weight: 700; }

.reviews-bars { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.rbr-row { display: flex; align-items: center; gap: 8px; }
.rbr-label {
  font-size: var(--font-size-xs, 12px);
  font-weight: 700;
  color: var(--color-ink-2, #555);
  width: 26px;
  flex-shrink: 0;
}
.rbr-track {
  flex: 1;
  height: 6px;
  background: var(--color-border, #e2e2e2);
  border-radius: var(--radius-full, 999px);
  overflow: hidden;
}
.rbr-fill {
  display: block;
  height: 100%;
  background: var(--color-green, #1a7a3a);
  border-radius: var(--radius-full, 999px);
}
.rbr-count {
  font-size: var(--font-size-xs, 12px);
  color: var(--color-ink-3, #888);
  width: 18px;
  text-align: right;
  flex-shrink: 0;
}

/* ── Customer photos strip ───────────────────────────────────────── */
.reviews-photos { padding: 0 var(--space-md, 16px) var(--space-md, 16px); }
.reviews-photos-title {
  font-size: var(--font-size-sm, 14px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-ink-3, #888);
  margin-bottom: var(--space-sm, 8px);
}
.reviews-photos-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
}
.reviews-photo-thumb {
  flex-shrink: 0;
  width: 64px; height: 64px;
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  background: var(--color-bg, #f5f5f5);
}
.reviews-photo-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ── Review list ──────────────────────────────────────────────────── */
.shopra-review-list {
  list-style: none;
  padding: 0 var(--space-md, 16px);
}
.shopra-review-item {
  border-top: 1px solid var(--color-border, #e2e2e2);
  padding: var(--space-md, 16px) 0;
}
.shopra-review-item:first-child { border-top: none; padding-top: 0; }
.shopra-review { display: flex; gap: 10px; }
.sr-avatar {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: var(--font-size-sm, 14px);
  font-weight: 900;
}
.sr-body { flex: 1; min-width: 0; }
.sr-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm, 8px);
  margin-bottom: 2px;
}
.sr-meta { display: flex; flex-direction: column; }
.sr-author { font-size: var(--font-size-sm, 14px); font-weight: 800; }
.sr-date { font-size: var(--font-size-xs, 12px); color: var(--color-ink-3, #888); margin-top: 1px; }
.sr-rating { flex-shrink: 0; }
.sr-rating .shopra-stars { font-size: 12px; }
.sr-text {
  font-size: var(--font-size-sm, 14px);
  color: var(--color-ink-2, #555);
  line-height: 1.5;
  margin-top: 4px;
}
.sr-photo {
  margin-top: var(--space-sm, 8px);
  width: 64px; height: 64px;
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
}
.sr-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ── AJAX loading state ──────────────────────────────────────────── */
.shopra-reviews-list-wrap.is-loading {
  opacity: .5;
  pointer-events: none;
  transition: opacity .15s ease;
}

/* ── Pagination ───────────────────────────────────────────────────── */
.shopra-review-pagination { padding: var(--space-md, 16px); }
.shopra-review-pagination ul {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
}
.shopra-review-pagination li a,
.shopra-review-pagination li span {
  display: flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 8px;
  border-radius: 8px;
  font-size: var(--font-size-xs, 12px); font-weight: 700;
  background: var(--color-white, #fff); color: var(--color-ink, #111);
  border: 1.5px solid var(--color-border, #e2e2e2); text-decoration: none;
}
.shopra-review-pagination li span.current,
.shopra-review-pagination li a.current {
  background: var(--color-ink, #111); color: #fff; border-color: var(--color-ink, #111);
}

/* ── Review form ──────────────────────────────────────────────────── */
#review_form_wrapper { padding: var(--space-md, 16px); border-top: 1px solid var(--color-border, #e2e2e2); }
#review_form .comment-reply-title {
  font-size: var(--font-size-base, 16px);
  font-weight: 900;
  display: block;
  margin-bottom: var(--space-md, 16px);
}
#review_form .comment-form-rating select { height: 48px; }
#review_form .comment-form-photo input[type="file"] {
  width: 100%;
  font-size: var(--font-size-sm, 14px);
  padding: 10px 0;
}
#review_form .comment-form-comment label,
#review_form .comment-form-rating label,
#review_form .comment-form-photo label,
#review_form .comment-form-author label,
#review_form .comment-form-email label {
  display: block;
  font-size: var(--font-size-xs, 12px);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-ink-3, #888);
  margin-bottom: 6px;
}
#review_form .form-submit input#submit {
  width: 100%; height: 48px;
  background: var(--color-ink, #111) !important;
  color: #fff !important;
  font-size: var(--font-size-md, 15px) !important;
  font-weight: 900 !important;
  border: none !important;
  border-radius: var(--radius-md, 8px) !important;
  cursor: pointer;
}