.rating-widget {
  max-width: 1200px;
  margin: 50px auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

.rating-container {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.overall-score {
  flex-shrink: 0;
}

.score-circle {
  width: 180px;
  height: 180px;
  position: relative;
}

.score-circle svg {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}

.score-circle-bg {
  fill: none;
  stroke: #e0e0e0;
  stroke-width: 20;
}

.score-circle-progress {
  fill: none;
  stroke: url(#gradient);
  stroke-width: 20;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s ease;
}

.score-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  font-weight: 600;
  color: #333;
}

.categories {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 30px;
}

.category-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

.category-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.category-score {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.category-bar-container {
  width: 100%;
  height: 32px;
  background: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.category-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 1s ease;
  width: 0;
}

.bar-low {
  background: #f4b942;
}

.bar-medium {
  background: #a8c657;
}

.bar-high {
  background: #6ba843;
}

@media (max-width: 768px) {
  .rating-container {
      flex-direction: column;
      align-items: center;
      gap: 20px;
  }

  .categories {
      grid-template-columns: 1fr;
      width: 100%;
  }
}