/* ==========================================================================
   MACHROMA — Judge.me reviews widget overrides
   Same look on both Judge.me widgets:
   - the "Happy Customers" widget (v2025)           .jdgm-all-reviews-widget-v2025
   - the Review Widget (product reviews) on product pages
       matched by its class, its data-widget attribute, or the
       theme app block wrapper (block id judge_me_reviews_review_widget_*)
   Loaded from layout/theme.liquid. Remove that one line to switch it all off.
   ========================================================================== */


/* 1. Regular font weight everywhere in the widget
      (reviewer name, review title, "Write a review" button, tabs) */
:is(.jdgm-all-reviews-widget-v2025, [class*="jdgm-review-widget"], [data-widget*="review-widget"], [id*="judge_me_reviews_review_widget"]),
:is(.jdgm-all-reviews-widget-v2025, [class*="jdgm-review-widget"], [data-widget*="review-widget"], [id*="judge_me_reviews_review_widget"]) * {
  font-weight: 400 !important;
}


/* 2. Remove the green tint behind the "Review for <product>" box */
:is(.jdgm-all-reviews-widget-v2025, [class*="jdgm-review-widget"], [data-widget*="review-widget"], [id*="judge_me_reviews_review_widget"]) {
  --jdgm-secondary-color: transparent;
}
:is(.jdgm-all-reviews-widget-v2025, [class*="jdgm-review-widget"], [data-widget*="review-widget"], [id*="judge_me_reviews_review_widget"]) :is([class*="prod"], [class*="reference"], [class*="variant"]):has(img),
:is(.jdgm-all-reviews-widget-v2025, [class*="jdgm-review-widget"], [data-widget*="review-widget"], [id*="judge_me_reviews_review_widget"]) :has(> img):has(a[href*="/products/"]) {
  background: transparent !important;
}


/* 3. Smaller stars (summary line under "Reviews") */
:is(.jdgm-all-reviews-widget-v2025, [class*="jdgm-review-widget"], [data-widget*="review-widget"], [id*="judge_me_reviews_review_widget"]) :is([class*="star"]:not([class*="start"]), [class*="rating"]) svg,
:is(.jdgm-all-reviews-widget-v2025, [class*="jdgm-review-widget"], [data-widget*="review-widget"], [id*="judge_me_reviews_review_widget"]) svg[class*="star"] {
  width: 10px !important;
  height: 10px !important;
}


/* 4. Stars on each review -> "5/5 stars"
      The number is the count of filled star icons in that review.
      The summary line at the top keeps its (smaller) star icons. */

/* 4a-e. Each review's star group (outermost only, so nested groups don't reset the count) */
:is(.jdgm-all-reviews-widget-v2025, [class*="jdgm-review-widget"], [data-widget*="review-widget"], [id*="judge_me_reviews_review_widget"]) :is([class*="star"]:not([class*="start"]), [class*="rating"]):has(svg):has(> :nth-child(2)):not([class*="average"], [class*="summary"], [class*="histogram"], [class*="filter"], [class*="breakdown"], [class*="chart"]):not(:is([class*="header"], [class*="summary"], [class*="average"], [class*="histogram"], [class*="filter"], [class*="breakdown"], [class*="chart"]) *):not(:has(> [class*="text"], > [class*="count"], > [class*="average"], > [class*="number"], > [class*="value"], > [class*="label"], > [class*="author"], > [class*="name"], > [class*="avatar"], > [class*="date"], > [class*="title"])):not(:is(:is([class*="star"]:not([class*="start"]), [class*="rating"]):has(svg):has(> :nth-child(2)):not([class*="average"], [class*="summary"], [class*="histogram"], [class*="filter"], [class*="breakdown"], [class*="chart"]):not(:is([class*="header"], [class*="summary"], [class*="average"], [class*="histogram"], [class*="filter"], [class*="breakdown"], [class*="chart"]) *):not(:has(> [class*="text"], > [class*="count"], > [class*="average"], > [class*="number"], > [class*="value"], > [class*="label"], > [class*="author"], > [class*="name"], > [class*="avatar"], > [class*="date"], > [class*="title"]))) *) {
  counter-reset: jm-stars;

  /* hide the icons (visually only; screen readers still get them) */
  & > svg,
  & > :is([class*="star"]:not([class*="start"]), [class*="rating"]),
  & > [class*="icon"],
  & svg {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }

  /* show the text instead */
  &::after {
    content: counter(jm-stars) "/5 stars";
    display: inline-block;
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: normal;
    color: #0C0C0D;
  }

  /* if Judge.me stores the rating in an attribute, use that number */
  &[data-score]::after { content: attr(data-score) "/5 stars"; }
  &[data-rating]::after { content: attr(data-rating) "/5 stars"; }
}

/* Count filled stars only */
:is(.jdgm-all-reviews-widget-v2025, [class*="jdgm-review-widget"], [data-widget*="review-widget"], [id*="judge_me_reviews_review_widget"]) :is([class*="star"]:not([class*="start"]), [class*="rating"]) svg {
  counter-increment: jm-stars;
}
:is(.jdgm-all-reviews-widget-v2025, [class*="jdgm-review-widget"], [data-widget*="review-widget"], [id*="judge_me_reviews_review_widget"]) :is([class*="star"]:not([class*="start"]), [class*="rating"]) :is([class*="empty"], [class*="off"], [class*="outline"], [class*="inactive"]) svg,
:is(.jdgm-all-reviews-widget-v2025, [class*="jdgm-review-widget"], [data-widget*="review-widget"], [id*="judge_me_reviews_review_widget"]) :is([class*="star"]:not([class*="start"]), [class*="rating"]) svg:is([class*="empty"], [class*="off"], [class*="outline"], [class*="inactive"]) {
  counter-increment: none !important;
}


/* 5. Product Review Widget: hide review dates
      (the Happy Customers widget has dates turned off in Judge.me).
      Delete this rule to show dates on product reviews. */
:is([class*="jdgm-review-widget"], [data-widget*="review-widget"], [id*="judge_me_reviews_review_widget"]) :is(time, [class*="timestamp"]) {
  display: none !important;
}