/* ==========================================================================
   REVIEWS SECTION — ratings, testimonials, submission form
   ========================================================================== */

.reviews-summary {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
  padding: var(--space-6);
}

.reviews-score-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.reviews-score-num {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.reviews-score-stars {
  display: flex;
  gap: 2px;
}

.reviews-score-count {
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

.reviews-bars {
  flex: 1;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.reviews-bar-row {
  display: grid;
  grid-template-columns: 50px 1fr 36px;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

.reviews-bar-track {
  height: 7px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.reviews-bar-fill {
  height: 100%;
  border-radius: 99px;
  background: var(--grad-primary);
  width: 0%;
  transition: width 900ms var(--ease-out);
}

/* ---- star rating (display, read-only) ---- */
.star-row {
  display: inline-flex;
  gap: 2px;
  line-height: 0;
}

.star-row svg {
  width: 18px;
  height: 18px;
}

.star-row .star-fill { color: #FFB020; }
.star-row .star-empty { color: rgba(255, 255, 255, 0.14); }

/* ---- star rating (interactive input) ---- */
.star-input {
  display: inline-flex;
  gap: 4px;
}

.star-input button {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  line-height: 0;
  transition: transform 120ms var(--ease-out);
}

.star-input button:hover { transform: scale(1.18); }
.star-input button:active { transform: scale(0.95); }

.star-input svg {
  width: 28px;
  height: 28px;
  color: rgba(255, 255, 255, 0.16);
  transition: color 150ms var(--ease-out);
}

.star-input button.is-active svg,
.star-input button.is-hover svg {
  color: #FFB020;
}

/* ---- review cards grid ---- */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}

@media (max-width: 980px) { .reviews-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .reviews-grid { grid-template-columns: 1fr; } }

.review-card {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  opacity: 0;
  transform: translateY(16px);
  animation: review-card-in 600ms var(--ease-out) forwards;
}

@keyframes review-card-in {
  to { opacity: 1; transform: translateY(0); }
}

.review-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.review-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--grad-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
  flex-shrink: 0;
}

.review-name {
  font-weight: 600;
  font-size: var(--fs-body-sm);
  color: var(--text-primary);
}

.review-date {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.review-text {
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  line-height: var(--lh-normal);
}

.review-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-caption);
  color: var(--success);
  font-family: var(--font-mono);
  margin-top: auto;
  padding-top: var(--space-2);
}
.review-verified svg { width: 12px; height: 12px; }

.reviews-empty {
  text-align: center;
  padding: var(--space-7) var(--space-5);
  color: var(--text-secondary);
  font-size: var(--fs-body-sm);
}

.reviews-loadmore {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-8);
}

/* ---- submission form ---- */
.review-form-card {
  padding: var(--space-6);
  max-width: 640px;
  margin: 0 auto;
}

.review-form-card h3 {
  font-size: var(--fs-display-sm);
  margin-bottom: var(--space-2);
  text-align: center;
}

.review-form-card > p {
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--fs-body-sm);
  margin-bottom: var(--space-5);
}

.review-rating-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.review-rating-field label {
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.review-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
@media (max-width: 560px) { .review-form-grid { grid-template-columns: 1fr; } }

.review-form-status {
  font-size: var(--fs-body-sm);
  display: none;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
}
.review-form-status.is-visible { display: block; }
.review-form-status.is-success { background: rgba(43,217,160,0.1); color: var(--success); border: 1px solid rgba(43,217,160,0.3); }
.review-form-status.is-error { background: rgba(255,84,112,0.1); color: var(--danger); border: 1px solid rgba(255,84,112,0.3); }

/* ---- loading skeleton ---- */
.review-skeleton {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.skeleton-line {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.09), rgba(255,255,255,0.04));
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s infinite;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .review-card { animation: none; opacity: 1; transform: none; }
  .reviews-bar-fill { transition: none; }
  .skeleton-line { animation: none; }
}