/* =========================================================
   SCALE / SCORE BARS
========================================================= */

.scale {
  margin-bottom: 14px;
}

.scale-label {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}

.scale-bar {
  display: flex;
  gap: 4px;
}

.block {
  flex: 1;
  height: 10px;
  border-radius: 999px;
  background: #e5e7eb;
}

.block.active {
  background: linear-gradient(90deg, #d9534f, #f0ad4e, #5cb85c);
}

/* =========================================================
   RATING ROW (PRIMARY STRUCTURE)
========================================================= */

.rating-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

/* =========================================================
   RATING HEADER
========================================================= */

.rating-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rating-title {
  font-weight: 600;
  color: var(--primary);
}

.rating-value {
  font-weight: bold;
  font-size: 14px;
  color: #374151;
}

.rating-desc {
  font-size: 12px;
  color: #6b7280;
}

/* =========================================================
   RATING BARS (LIST STYLE)
========================================================= */

.rating-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* =========================================================
   MINI RATING BAR (LABEL + BAR + VALUE)
========================================================= */

.mini-rating {
  display: grid;
  grid-template-columns: 120px 1fr 30px;
  align-items: center;
  font-size: 11px;
  gap: 6px;
}

.bar {
  height: 6px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}

.fill {
  height: 100%;
  background: linear-gradient(90deg, #f97316, #22c55e);
}

/* =========================================================
   RATING SCALE (MIN / CURRENT / MAX)
========================================================= */

.rating-scale {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin: 6px 0 4px;
}

.rating-min {
  justify-self: start;
  font-size: 12px;
  font-weight: 600;
  color: #999;
}

.rating-current {
  justify-self: center;
  font-size: 13px;
  font-weight: 700;
  color: #2c3e50;
}

.rating-max {
  justify-self: end;
  font-size: 12px;
  font-weight: 600;
  color: #2e7d32;
}