/* Self-hosted customer reviews widget — shared by index.html (product page) and community/index.html */

.reviews-widget { width: 100%; }

.rw-summary {
  display: flex; align-items: center; gap: 40px; flex-wrap: wrap;
  padding-bottom: 32px; margin-bottom: 32px;
  border-bottom: 1px solid rgba(200,114,42,0.18);
}
.rw-avg-block { text-align: center; flex-shrink: 0; }
.rw-avg {
  font-family: 'Bebas Neue', sans-serif; font-size: 3.2rem;
  color: var(--white, var(--cream)); line-height: 1;
}
.rw-avg-stars { margin: 8px 0 6px; display: flex; justify-content: center; }
.rw-count {
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--smoke); white-space: nowrap;
}
.rw-bars { flex: 1 1 240px; display: flex; flex-direction: column; gap: 7px; min-width: 220px; }
.rw-bar-row { display: flex; align-items: center; gap: 10px; }
.rw-bar-label { width: 26px; font-size: 0.75rem; color: var(--smoke); flex-shrink: 0; }
.rw-bar-track { flex: 1; height: 8px; background: var(--charcoal); }
.rw-bar-fill { height: 100%; background: var(--copper); }
.rw-bar-count { width: 26px; text-align: right; font-size: 0.75rem; color: var(--smoke); flex-shrink: 0; }

.rw-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.rw-card {
  background: #0d0b09;
  border: 1px solid rgba(200,114,42,0.18);
  padding: 20px 22px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  transition: border-color 0.25s, transform 0.25s;
}
.rw-card:hover { border-color: rgba(200,114,42,0.5); transform: translateY(-2px); }
.rw-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.rw-card-date { font-size: 0.7rem; color: var(--smoke); white-space: nowrap; }
.rw-card-text { font-size: 0.88rem; color: var(--cream); line-height: 1.65; margin-bottom: 16px; }
.rw-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rw-card-name { font-family: 'DM Sans', sans-serif; font-size: 0.72rem; font-weight: 500; color: var(--cream-dark); font-style: normal; }
.rw-card-badge {
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
  color: var(--copper); background: rgba(200,114,42,0.1);
  border: 1px solid rgba(200,114,42,0.25); padding: 3px 8px; white-space: nowrap;
}

.rw-empty { color: var(--smoke); font-size: 0.9rem; padding: 20px 0; }

@media (max-width: 640px) {
  .rw-summary { flex-direction: column; align-items: flex-start; gap: 20px; }
  .rw-cards { grid-template-columns: 1fr; }
}