/* =========================================================
   MODERN STAR RATING - WATERCOLOR STYLE
   Clean, airy look to match the dcwatercolor.com theme
   ========================================================= */

/* Base container */
.pg-rate-box {
  float: left;
  display: flex;
  align-items: center;
  gap: 0.4em;
}

/* General list reset */
.star-rating,
.star-rating-small {
  display: inline-flex;
  list-style: none;
  margin: 6px 0;
  padding: 0;
}

/* Individual stars */
.star-rating li,
.star-rating-small li {
  cursor: pointer;
  color: #d0d8e2; /* unfilled color */
  transition: color 0.25s ease, transform 0.2s ease;
  font-size: 1.3em;
}

/* Hover & active state (bright watercolor blue to golden tones) */
.star-rating li:hover,
.star-rating li:hover ~ li {
  color: #d0d8e2; /* keep only up to hovered star colored */
}

.star-rating li:hover,
.star-rating li:hover ~ li {
  transform: scale(1.1);
}

/* When rating is selected or filled */
.star-rating li.filled,
.star-rating-small li.filled {
  color: #f4c542; /* soft golden star color */
}

/* Optional gradient: watercolor glow */
.star-rating li.filled::before,
.star-rating-small li.filled::before {
  content: "★";
  position: absolute;
  background: linear-gradient(120deg, #f7d860, #f0b429);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Default star symbol */
.star-rating li::before,
.star-rating-small li::before {
  content: "★";
  font-weight: 700;
  display: inline-block;
  line-height: 1;
}

/* Small version */
.star-rating-small li {
  font-size: 0.9em;
  color: #c7d2de;
}

/* Hover blue tint for interaction feedback */
.star-rating li:hover::before,
.star-rating-small li:hover::before {
  background: linear-gradient(120deg, #5da9dd, #2a73b9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Smooth fade for rating change */
.star-rating,
.star-rating-small {
  transition: transform 0.3s ease;
}
.star-rating:hover,
.star-rating-small:hover {
  transform: scale(1.02);
}

/* Optional numeric value */
.pg-rate-value {
  font-size: 1em;
  color: var(--pg-muted, #666);
  margin-left: 0.4em;
}

/* Example: static stars for display only */
.star-rating.static li,
.star-rating-small.static li {
  pointer-events: none;
  transform: none !important;
}