#trustpilot-rating-block {
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  padding: 45px 0 45px 0;
}

#trustpilot-rating-block .tp-header {
  display: flex;
  /* flex-start, not center: .tp-header__badge-wrap's height grows a lot
     once the card opens, and align-items:center would re-center the logo
     against that whole expanded height, dragging it down the page instead
     of keeping it pinned level with the badge row. */
  align-items: flex-start;
  gap: 10px;
  text-decoration: none;
}

#trustpilot-rating-block .tp-header__logo {
  width: auto;
}

/* Wraps the badge and the dropdown card together so the card aligns to the
   badge's left edge (under the stars, not under the whole logo+wordmark)
   instead of centering under the entire header row. Bonus: since the card
   is now a descendant of .tp-header__badge-wrap rather than a plain
   sibling, hovering down onto the open card never leaves .tp-header's own
   hoverable box — no separate dead-zone workaround needed any more. */
#trustpilot-rating-block .tp-header__badge-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  Padding-top: 12px;
}

#trustpilot-rating-block .tp-header__badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 4px;
  cursor: pointer;
}

#trustpilot-rating-block .tp-header__stars {
  display: flex;
  gap: 2px;
}

#trustpilot-rating-block .tp-header__star {
  display: inline-flex;
  width: 18px;
  height: 18px;
}

#trustpilot-rating-block .tp-header__star .tp-star {
  width: 100%;
  height: 100%;
}

#trustpilot-rating-block .tp-header__reviews {
  font-size: 14px;
  color: #191919;
  text-decoration: none;
  cursor: pointer;
}

#trustpilot-rating-block .tp-header__reviews:hover {
  color: #6D6E71;
}

#trustpilot-rating-block .tp-header__caret {
  display: inline-block;
  border-bottom: solid 1px #191919;
  border-left: solid 1px #191919;
  height: 5px;
  position: relative;
  transform: rotate(-45deg);
  width: 5px;
  transition: transform .2s;
}

/* Flip the caret to point up while the dropdown is open. Base state is
   rotate(-45deg) (points down); +180deg = rotate(135deg) points it up.
   Since .tp-rating-card is now a descendant of .tp-header (nested inside
   .tp-header__badge-wrap), .tp-header:hover alone stays true even once the
   cursor has moved onto the open card — no extra :has() rule needed. */
#trustpilot-rating-block .tp-header:hover .tp-header__caret {
  transform: rotate(135deg);
}

#trustpilot-rating-block .tp-rating-card {
  display: none;
  /* position: relative; */
  /* Normal flow (not position: absolute) — the block's own height grows to
     include the card when it opens, pushing whatever follows on the page
     down, rather than floating over it as a detached overlay. Fixed/capped
     width so it stays a compact card, not a full-width bar. Left-aligned
     to .tp-header__badge-wrap (flex-start), i.e. under the stars/reviews
     badge, not centered under the whole logo+wordmark+badge row. */
  min-width: 180px;
  max-width: 280px;
  margin-top: 12px;
  padding: 15px;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  border-radius: 2px;
  text-align: left;
}

/* Small pointer triangle connecting the card back up to the badge above,
   right-aligned under the "reviews" text/caret end of the badge. Adjust
   the `right` value if the badge's actual rendered width shifts this
   off-target. */
/* #trustpilot-rating-block .tp-rating-card::before {
  content: "";
  position: absolute;
  top: -8px;
  right: 24px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #ffffff;
} */

#trustpilot-rating-block .tp-header:hover .tp-rating-card,
#trustpilot-rating-block .tp-rating-card:hover {
  display: block;
}

#trustpilot-rating-block .tp-rating-card__heading {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  color: #191919;
}

#trustpilot-rating-block .tp-bar-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-size: 14px;
  color: #191919;
}

#trustpilot-rating-block .tp-bar-row__label {
  flex: 0 0 52px;
  font-size: 12px;
}

#trustpilot-rating-block .tp-bar-row__track {
  flex: 1 1 auto;
  display: block;
  height: 4px;
  background: #dcdce6;
  border-radius: 2px;
  overflow: hidden;
  margin: 0 12px 0 0;
}

#trustpilot-rating-block .tp-bar-row__fill {
  display: block;
  height: 100%;
}

#trustpilot-rating-block .tp-bar-row[data-stars="5"] .tp-bar-row__fill { background: #00b67a; }
#trustpilot-rating-block .tp-bar-row[data-stars="4"] .tp-bar-row__fill { background: #73cf11; }
#trustpilot-rating-block .tp-bar-row[data-stars="3"] .tp-bar-row__fill { background: #ffce00; }
#trustpilot-rating-block .tp-bar-row[data-stars="2"] .tp-bar-row__fill { background: #ff8622; }
#trustpilot-rating-block .tp-bar-row[data-stars="1"] .tp-bar-row__fill { background: #ff3722; }

#trustpilot-rating-block .tp-bar-row__count {
  flex: 0 0 auto;
  min-width: 40px;
  text-align: right;
  font-weight: 700;
  font-size: 12px;
}

/* Mobile: stack the logo above the badge instead of side by side, both
   centered — matches the target compact mobile layout. Adjust the
   breakpoint if the theme's own grid uses a different one. */
@media (max-width: 600px) {
  #trustpilot-rating-block .tp-header {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  #trustpilot-rating-block .tp-header__badge-wrap {
    align-items: center;
  }
}