/* =========================================================================
   Reviews: shop colours (orange / amber stars, orange buttons + links)
   for WooCommerce product reviews and Dokan rating widgets.
   Vendor-review block colours live in the main plugin / store-page-style.css.
   ========================================================================= */
:root {
  --fmke-star: #F5A623;
  --fmke-star-off: #E3D9CC;
  /* filled 5-point star, used as a mask */
  --fmke-star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 1.8l3.2 6.9 7.5.9-5.5 5.2 1.5 7.4L12 18.4 5.3 22.2l1.5-7.4L1.3 9.6l7.5-.9z'/%3E%3C/svg%3E");
}

/* Star display (product cards, product pages, Dokan store rating).
   WooCommerce draws these with an icon font ("star"). On this site the font
   renders outline stars where filled ones belong, and its hidden "Rated 4.5
   out of 5" text can leak out below. So the stars are drawn here with CSS
   masks instead - no font involved:
     .star-rating            = the pale track (5 empty stars)
     .star-rating > span     = the filled part; Woo sets its width to the
                               rating % (e.g. 90% = 4.5 stars, half star ok)
   Size follows the element's font-size, as before. */
.star-rating.star-rating {
  position: relative !important;
  display: block;
  float: none;
  overflow: hidden !important;
  width: 5em !important;
  height: 1em !important;
  font-size: 1em;
  line-height: 1 !important;
  font-family: inherit !important;
  letter-spacing: 0 !important;
  color: transparent !important;
}
.star-rating.star-rating::before,
.star-rating.star-rating > span::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 5em !important; height: 1em !important;
  float: none !important;
  -webkit-mask: var(--fmke-star-mask) 0 0 / 1em 1em repeat-x;
          mask: var(--fmke-star-mask) 0 0 / 1em 1em repeat-x;
}
.star-rating.star-rating::before { background: var(--fmke-star-off) !important; }
.star-rating.star-rating > span {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  padding: 0 !important;
  float: none !important;
  font-size: inherit !important; /* the star size (em) is measured from this, so it must NOT be 0 */
  line-height: 1 !important;
  color: transparent !important; /* hides the "Rated x out of 5" text (also clipped by overflow) */
  text-indent: -9999px;
}
.star-rating.star-rating > span::before { background: var(--fmke-star) !important; }
/* cards with no reviews yet: just the pale empty stars (no extra fading) */
.fmke-card-rating--empty .star-rating { opacity: 1 !important; }

/* Star picker in the product review form */
.comment-form-rating p.stars a,
.comment-form-rating p.stars a::before,
p.stars a, p.stars a::before { color: var(--fmke-star) !important; }
p.stars:hover a::before { color: var(--fmke-star) !important; }
p.stars a:hover ~ a::before,
p.stars.selected a.active ~ a::before { color: var(--fmke-star-off) !important; }

/* Review list + form */
#reviews #comments ol.commentlist li .comment-text {
  border: 1px solid #F0E4D8 !important; border-radius: 14px; background: #FBF9F5; padding: 14px 16px !important;
}
#reviews .woocommerce-review__author { font-weight: 800; color: #1F3D2C; }
#reviews a, #review_form a { color: #E05A00; }
#reviews a:hover, #review_form a:hover { color: #FF6A00; }
#review_form #respond .form-submit input#submit,
#review_form #respond input#submit,
.woocommerce #respond input#submit {
  background: #FF6A00 !important; background-image: none !important; color: #fff !important;
  border: 0 !important; border-radius: 999px !important; padding: 12px 28px !important; font-weight: 800 !important; box-shadow: none !important;
}
#review_form #respond input#submit:hover { background: #E05A00 !important; }
#review_form textarea:focus, #review_form input[type="text"]:focus, #review_form input[type="email"]:focus {
  outline: none; border-color: #FF6A00; box-shadow: 0 0 0 3px rgba(255,106,0,.16);
}