/* The "Become a Reviewer" star, with short rays around it.
 *
 * The same star as the ratings (rating-stars.css: same polygon, same #f5a623)
 * so the menu entry reads as part of the review system, plus eight short rays
 * so it stands out from the grey Account / Saved / Compare / Sellers icons.
 * Static on purpose: no animation.
 *
 * One SVG, used twice:
 *   - Desktop: the top_menu item that sql/207 tags with .mavi-reviewer-cta.
 *     The theme draws that item's icon as an icomoon glyph in a::before with
 *     content !important, so content has to be overridden the same way.
 *   - Phone: the off-canvas quick links in common/header.twig
 *     (.mql-ico-reviewer, on both "Become a Reviewer" and "Reviewer Panel").
 *
 * The rays reach past the icon's box. Rather than let the box grow and push the
 * label sideways, the box is drawn larger and pulled back in with negative
 * margins, so it still takes the same space as the icon next to it
 * (26px on desktop, 20px on the phone). */
:root {
  --mavi-reviewer-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-21 -21 42 42'%3E%3Cpath d='M5.93 -14.32L7.27 -17.55M14.32 -5.93L17.55 -7.27M14.32 5.93L17.55 7.27M5.93 14.32L7.27 17.55M-5.93 14.32L-7.27 17.55M-14.32 5.93L-17.55 7.27M-14.32 -5.93L-17.55 -7.27M-5.93 -14.32L-7.27 -17.55' stroke='%23f5a623' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpolygon points='0.00,-10.85 2.70,-2.56 11.41,-2.56 4.36,2.56 7.05,10.85 0.00,5.73 -7.05,10.85 -4.36,2.56 -11.41,-2.56 -2.70,-2.56' fill='%23f5a623'/%3E%3C/svg%3E");
}

/* Desktop header: 50px drawn, 26px taken, plus 6px more space before the
 * label than the other icons get, so the right-hand rays don't touch the text. */
div.secondary-menu .top-menu > .j-menu > .menu-item.mavi-reviewer-cta > a::before {
  content: '' !important;
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  margin: -12px calc(var(--j-gap-spacing-gap-2) - 6px) -12px -12px;
  background: var(--mavi-reviewer-star) center / 50px 50px no-repeat;
}

/* Phone menu: 38px drawn, 20px taken, full colour (the other icons are at 0.75). */
.mobile-quick-links .mql-ico.mql-ico-reviewer {
  display: inline-block;
  width: 38px;
  height: 38px;
  margin: -9px 5px -9px -9px;
  opacity: 1;
  background: var(--mavi-reviewer-star) center / 38px 38px no-repeat;
}