.tp-reviews-block {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  color: #191919;
  max-width: 640px;
  background: #ffffff;
  padding: 24px;
  /* Centered on the page the same way #trustpilot-rating-block is (that one
     centers via flex column + align-items:center since it has no max-width;
     this block has a fixed max-width, so margin:auto + text-align does the
     same job). Filters/list/review text override back to text-align:left
     below since centered paragraphs of review text are hard to read. */
  margin: 0 auto;
  text-align: center;
  /* Fills the fixed-height iframe (see the reviews-block template) so
     .tp-reviews-block__scroll below can flex to take up whatever space is
     left over, instead of needing its own separately-tuned max-height. */
  height: 100%;
  display: flex;
  flex-direction: column;
}

.tp-reviews-block__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  text-align: left;
}

.tp-reviews-block__score {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tp-reviews-block__stars {
  /* Sized to match the rating card's logo (.tp-header__logo, 170x42 via its
     width/height attributes) rather than a fixed per-star square size. */
  display: flex;
  gap: 2px;
  width: 170px;
  height: 36px;
  margin: 0 10px 0 0;
}

.tp-reviews-block .tp-header__star {
  display: inline-flex;
  flex: 1 1 0;
  height: 100%;
}

.tp-reviews-block .tp-header__star .tp-star {
  width: 100%;
  height: 100%;
}

.tp-reviews-block__score-value {
  align-items: center;
  color: #5c5c70;
  display: flex;
  font-size: 14px;
}

.tp-reviews-block__score-value .rating {
    color: #1b1b21;
    font-size: 24px;
    font-weight: 700;
    margin: 0 6px 0 0;
}
.tp-reviews-block__dot {
  color: #6d6e71;
  margin: 0 8px 0 8px;
}

.tp-reviews-block__count {
  font-size: 14px;
  color: #1b1b21;
}

.tp-reviews-block__logo {
  width: 110px;
  height: auto;
}

.tp-reviews-block__divider {
  border: none;
  border-top: 1px solid #dcdce6;
  margin: 10px 0;
}

.tp-reviews-block__heading {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 700;
  color: #000000;
}

.tp-reviews-block__heading-count {
  color: #6d6e71;
  font-weight: 400;
}

.tp-reviews-block__scroll {
  /* Whole panel below the summary row scrolls as one unit, matching
     Trustpilot's own widget (heading + filters + reviews + load more all
     share a single scrollbar, not just the review list on its own).
     flex:1 (with min-height:0, needed so a flex child can shrink below its
     content size) makes this auto-fill whatever height is left inside
     .tp-reviews-block after the fixed-size summary row/divider above it —
     so it always matches the iframe's own height with no separate value to
     keep in sync. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 10px;
  text-align: left;
}

.tp-reviews-block__filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
  width: 60%;
}

.tp-filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  cursor: pointer;
}

.tp-filter-row__checkbox {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.tp-filter-row__label {
  flex: 0 0 70px;
}

.tp-filter-row__track {
  flex: 1 1 auto;
  display: block;
  height: 10px;
  background: #dcdce6;
  border-radius: 2px;
  overflow: hidden;
}

.tp-filter-row__fill {
  display: block;
  height: 100%;
  background: #605e56;
}

/* Star-specific colour only kicks in once that row's checkbox is checked;
   otherwise every bar stays the neutral #605e56 above. */
.tp-filter-row__checkbox:checked ~ .tp-filter-row__track .tp-filter-row__fill[data-stars="5"] { background: #00b67a; }
.tp-filter-row__checkbox:checked ~ .tp-filter-row__track .tp-filter-row__fill[data-stars="4"] { background: #73cf11; }
.tp-filter-row__checkbox:checked ~ .tp-filter-row__track .tp-filter-row__fill[data-stars="3"] { background: #ffce00; }
.tp-filter-row__checkbox:checked ~ .tp-filter-row__track .tp-filter-row__fill[data-stars="2"] { background: #ff8622; }
.tp-filter-row__checkbox:checked ~ .tp-filter-row__track .tp-filter-row__fill[data-stars="1"] { background: #ff3722; }

.tp-filter-row__percent {
  flex: 0 0 40px;
  text-align: right;
  color: #6d6e71;
}

.tp-reviews-block__list {
  display: flex;
  flex-direction: column;
}

.tp-review {
  padding: 16px 0;
  border-top: 1px solid #dcdce6;
}

.tp-review:first-child {
  border-top: none;
}

.tp-review__meta {
  margin: 0 0 6px;
  padding-bottom: 0;
  font-size: 14px;
  color: #5c5c70;
}

.tp-review__name {
  font-weight: 700;
}

.tp-review__time {
  color: #6d6e71;
}

.tp-review__stars {
  display: flex;
  gap: 2px;
  margin-bottom: 8px;
}

.tp-review__star {
  display: inline-flex;
  width: 20px;
  height: 20px;
}

.tp-review__star .tp-star {
  width: 100%;
  height: 100%;
}

.tp-review__text {
  margin: 10px 0;
  padding-bottom: 0;
  font-size: 14px;
  line-height: 1.5;
}

.tp-widget-review__source {
  margin: 0;
}

.verification-label-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #4a4a4a;
  text-decoration: none;
}

.verification-label-link .label-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: #5c5c70;
}

.verification-label-link .label-text {
  font-size: 13px;
  text-decoration: underline;
}

.verification-label-link:hover .label-text {
  color: #191919;
}

.tp-reviews-block__load-more {
  display: block;
  margin: 20px auto 0;
  padding: 8px 0;
  border: none;
  background: none;
  color: #191919;
  font-size: 13px;
  cursor: pointer;
}

.tp-reviews-block__load-more:hover {
  text-decoration: underline;
}

.tp-reviews-block__load-more:disabled {
  opacity: 0.6;
  cursor: default;
  text-decoration: none;
}

/* Mobile: logo right-aligned on the same line as the stars (top-aligned via
   align-items:flex-start, not centered against the whole two-line score
   block); stars kept at their own fixed 170px box (not stretched to fill
   the row) with each star a fixed 32px so they render at their intended
   size instead of flex-growing to fill the container; the rating/review
   count text then wraps naturally onto the line below since it no longer
   fits beside the fixed-width stars within the space left by the logo. */
@media (max-width: 600px) {
  .tp-reviews-block__summary {
    align-items: flex-start;
  }

  .tp-reviews-block__score {
    flex-wrap: wrap;
    width: 180px;
  }

  .tp-reviews-block__stars {
    width: 170px;
    height: 32px;
  }

  .tp-reviews-block .tp-header__star {
    flex: none;
    width: 32px;
    margin-right: 1px;
  }

  .tp-reviews-block .tp-header__star:last-child {
    margin-right: 0;
  }

  .tp-reviews-block__logo {
    width: 90px;
    margin-top: 5px;
  }

  .tp-reviews-block__filters {  
  width: 90%;
}
}