/**
 * Google Reviews Header Styles
 */

/* Star rating classes */
.one-star-rating::before,
.two-star-rating::before,
.three-star-rating::before,
.four-star-rating::before,
.five-star-rating::before {
  content: "";
  display: block;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cdefs%3E%3Cpolygon id='star' points='10,1 12.5,7 19,7 14,11 16,17 10,13 4,17 6,11 1,7 7.5,7' fill='%23fbbc04'/%3E%3C/defs%3E%3Cuse href='%23star' x='0'/%3E%3Cuse href='%23star' x='20'/%3E%3Cuse href='%23star' x='40'/%3E%3Cuse href='%23star' x='60'/%3E%3Cuse href='%23star' x='80'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

.one-star-rating::before {
  width: 20%;
}

.two-star-rating::before {
  width: 40%;
}

.three-star-rating::before {
  width: 60%;
}

.four-star-rating::before {
  width: 80%;
}

.five-star-rating::before {
  width: 100%;
}

/* Small stars for review count */
.small-stars {
  width: 60px;
  height: 12px;
  vertical-align: middle;
  margin-right: 5px;
}

/* Google Review Header Layout */
.google-reviews-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

.google-reviews-header > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.google-reviews-rating {
  display: flex;
  align-items: center;
  gap: 10px;
}

.g-rate-float {
  font-weight: bold;
  font-size: 18px;
  color: #202124;
  margin-left: 5px;
}

.g-rate-count {
  color: #5f6368;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
}

.button.write-review {
  display: inline-block;
  padding: 10px 24px;
  background-color: #1a73e8;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 500;
  transition: background-color 0.2s;
  align-self: flex-start;
}

.button.write-review:hover {
  background-color: #1765cc;
}