/*
 * Reviews row presentation.
 *
 * EVERY SELECTOR IS SCOPED UNDER .srr-band. Trustindex's classes are generic
 * enough (.ti-widget, .ti-review-item, .ti-inner) that an unscoped rule would
 * reach any other Trustindex widget on the site, including the one on the
 * /reviews/ page, and restyle it by accident. Scoping also means a class name
 * that turns out to be wrong costs nothing: the rule matches nothing and the
 * band still renders dark and compressed, because the wrapper is ours.
 *
 * THE LAYERS, in order of how sure I am they apply:
 *   1. .srr-*      our own markup. Always correct.
 *   2. .ti-widget, .ti-widget-container, .ti-review-item, .ti-inner
 *                  confirmed Trustindex structure.
 *   3. everything else
 *                  probable Trustindex names. Each one is cosmetic on its own,
 *                  so a miss degrades the look rather than breaking it.
 */

/* ========================================================== the band itself */

.site-footer .srr-band,
.srr-band {
  /* Bottom padding is deliberately small: the promise-card band below
     brings its own 2.4rem of top padding, and doubling them up is most of
     what made the first version look like it had a hole under it. */
  padding: 2rem 1.4rem 1rem;
  margin: 0;
}

/* Dark: merges into the footer rather than floating on it as a pale slab,
   which is what the light version looked like once it was live. */
.site-footer .srr-band.srr-dark,
.srr-band.srr-dark {
  background: #0A0A0C !important;
  border-top: none;
}

.site-footer .srr-band.srr-light,
.srr-band.srr-light {
  background: #F2F3F4 !important;
  border-top: 1px solid #E2E4E6;
}

.srr-inner { max-width: 1100px; margin: 0 auto; }

/* ============================================================= the head row */

.srr-head {
  display: flex;
  /* flex-end, not center: the rating line should sit on the same baseline as
     the sub-heading rather than floating in the middle of a two-line block. */
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}
.srr-head-text { min-width: 0; }

.site-footer .srr-band .srr-eyebrow,
.srr-band .srr-eyebrow {
  margin: 0 0 .35rem;
  font-family: var(--ts-display, inherit);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .72rem;
  line-height: 1;
  color: var(--ts-accent, #C8102E) !important;
}

.site-footer .srr-band h2,
.srr-band h2 {
  font-family: var(--ts-display, inherit);
  text-transform: uppercase;
  font-size: 1.9rem;
  line-height: 1.1;
  margin: 0;
  border-left: 7px solid var(--ts-accent, #C8102E);
  padding-left: .7rem;
}
.site-footer .srr-band.srr-dark h2,
.srr-band.srr-dark h2 { color: #FFFFFF !important; }
.site-footer .srr-band.srr-light h2,
.srr-band.srr-light h2 { color: #0A0A0C !important; }

.site-footer .srr-band .srr-sub,
.srr-band .srr-sub { margin: .4rem 0 0; font-size: .92rem; }
.site-footer .srr-band.srr-dark .srr-sub,
.srr-band.srr-dark .srr-sub { color: #A2A6AD !important; }
.site-footer .srr-band.srr-light .srr-sub,
.srr-band.srr-light .srr-sub { color: #5A5F66 !important; }

/* The script builds a one-line rating in here and hides Trustindex's own
   summary. Until it does, or if it cannot read the numbers, this stays empty
   and takes no space, and Trustindex's block is left exactly where it was. */
.srr-head-rating { flex: 0 0 auto; }
.srr-head-rating:empty { display: none; }

/* ONCE REPLACED, the original goes. Not `visibility`, not opacity: it is a
   300px-tall stacked column and anything that leaves it in the flow leaves the
   hole it was making. */
.srr-band.srr-summary-replaced .ti-header,
.srr-band.srr-summary-replaced .ti-widget-header,
.srr-band.srr-summary-replaced .ti-rating-box { display: none !important; }

.srr-rating {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  font-size: .85rem;
  line-height: 1.2;
}
.srr-band.srr-dark .srr-rating { color: #A2A6AD; }
.srr-band.srr-light .srr-rating { color: #5A5F66; }

.srr-stars { display: inline-flex; gap: 1px; letter-spacing: 0; }
.srr-star { color: #3A3A42; font-size: 15px; line-height: 1; }
.srr-band.srr-light .srr-star { color: #C9CCD1; }
.srr-star.is-on { color: #FBBC04; }
/* Half a star, drawn by clipping a full one rather than shipping a glyph for
   it: the half-star character is missing from a lot of system fonts. */
.srr-star.is-half {
  color: #FBBC04;
  -webkit-mask-image: linear-gradient(to right, #000 50%, transparent 50%);
  mask-image: linear-gradient(to right, #000 50%, transparent 50%);
}

.srr-rating-value { font-weight: 700; }
.srr-band.srr-dark .srr-rating-value { color: #FFFFFF; }
.srr-band.srr-light .srr-rating-value { color: #0A0A0C; }

.srr-rating-count { white-space: nowrap; }

.site-footer .srr-band .srr-rating-link,
.srr-band .srr-rating-link {
  color: var(--ts-accent, #C8102E) !important;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  white-space: nowrap;
}
.site-footer .srr-band .srr-rating-link:hover,
.srr-band .srr-rating-link:hover { opacity: .8; }

/* ================================================== the reviews, as a strip */

/* Layout "row": force a single horizontal scrolling line of cards.
   Layout "auto" leaves Trustindex's own layout alone and only recolours. */

.srr-band[data-layout="row"] .ti-widget,
.srr-band[data-layout="row"] .ti-widget-container {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}

.srr-band[data-layout="row"] .ti-widget-container {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: .85rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;

  /* NO `scroll-behavior: smooth` HERE, deliberately. The drift script nudges
     scrollLeft once a frame; with smooth scrolling every one of those becomes
     its own animation and they fight each other, so the strip stutters or sits
     still. Native momentum on touch is unaffected. */
  padding-bottom: .5rem !important;

  /* The scrollbar is left visible but made thin, because a strip that scrolls
     with no affordance at all reads as a strip that is simply cut off. */
  scrollbar-width: thin;
  scrollbar-color: #3A3A42 transparent;
}
.srr-band[data-layout="row"] .ti-widget-container::-webkit-scrollbar { height: 6px; }
.srr-band[data-layout="row"] .ti-widget-container::-webkit-scrollbar-track { background: transparent; }
.srr-band[data-layout="row"] .ti-widget-container::-webkit-scrollbar-thumb { background: #3A3A42; border-radius: 3px; }

.srr-band[data-layout="row"] .ti-review-item {
  flex: 0 0 clamp(250px, 72vw, 320px) !important;
  width: clamp(250px, 72vw, 320px) !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  scroll-snap-align: start;
  /* Trustindex's own slider positions items absolutely in some layouts. Left
     alone, every card would stack on top of the first one. */
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  float: none !important;
  display: block !important;
}

/* A card cut off flat at the container edge reads as a rendering fault. Fading
   it says the strip continues, which is the thing the scrollbar alone was not
   communicating at a glance. */
.srr-band[data-layout="row"] .srr-widget { position: relative; }
.srr-band[data-layout="row"] .srr-widget::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 56px;
  pointer-events: none;
  /* Behind Trustindex's own next arrow, which sits at the right edge in their
     slider layouts. In front of it the arrow reads as half faded out. */
  z-index: 0;
}
.srr-band .ti-next, .srr-band .ti-prev { z-index: 2; position: relative; }
.srr-band.srr-dark[data-layout="row"] .srr-widget::after {
  background: linear-gradient(to right, rgba(10, 10, 12, 0), rgba(10, 10, 12, .95));
}
.srr-band.srr-light[data-layout="row"] .srr-widget::after {
  background: linear-gradient(to right, rgba(242, 243, 244, 0), rgba(242, 243, 244, .95));
}

/* ------------------------------------------------------------- card itself */

.srr-band .ti-review-item > .ti-inner {
  padding: .95rem 1rem 1rem !important;
  border-radius: 10px;
  height: 100% !important;
  box-sizing: border-box;
}
.srr-band.srr-dark .ti-review-item > .ti-inner {
  background: #141418 !important;
  border: 1px solid #26262C !important;
  color: #D6D8DC !important;
  box-shadow: none !important;
}
.srr-band.srr-light .ti-review-item > .ti-inner {
  background: #FFFFFF !important;
  border: 1px solid #D5D7DA !important;
  color: #2B2F35 !important;
}

/* COMPRESSION. The live version was tall because each card printed the whole
   review. Three lines is enough to judge the tone; the rest is one click away
   on the Google profile the widget already links to. */
.srr-band .ti-review-text,
.srr-band .ti-review-content {
  font-size: .86rem !important;
  line-height: 1.5 !important;
  margin: .45rem 0 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.srr-band.srr-dark .ti-review-text,
.srr-band.srr-dark .ti-review-content { color: #C3C6CB !important; }

.srr-band .ti-name,
.srr-band .ti-profile-name {
  font-size: .88rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
}
.srr-band.srr-dark .ti-name,
.srr-band.srr-dark .ti-profile-name { color: #FFFFFF !important; }

.srr-band .ti-date { font-size: .74rem !important; margin: 0 !important; }
.srr-band.srr-dark .ti-date { color: #8A8F97 !important; }

.srr-band .ti-profile-img img,
.srr-band .ti-profile-img { width: 34px !important; height: 34px !important; }
.srr-band .ti-profile-img img { border-radius: 50% !important; }

.srr-band .ti-stars { margin: .3rem 0 0 !important; }
.srr-band .ti-stars img,
.srr-band .ti-stars svg { height: 14px !important; width: auto !important; }

/* The "Verified by Trustindex" badge is a licence condition of the free tier,
   so it is kept. It is just made to stop being the loudest thing in the band. */
.srr-band .ti-footer,
.srr-band .ti-verified-by-trustindex {
  opacity: .5;
  transform: scale(.85);
  transform-origin: right center;
  margin-top: .3rem !important;
}
.srr-band .ti-footer:hover,
.srr-band .ti-verified-by-trustindex:hover { opacity: .9; }

/* Trustindex's own prev/next buttons assume a light card behind them. */
.srr-band.srr-dark .ti-next,
.srr-band.srr-dark .ti-prev {
  background: rgba(255, 255, 255, .08) !important;
  border: 1px solid #2E2E36 !important;
  color: #FFFFFF !important;
}

/* A stray link colour from .site-footer would turn every name into a link. */
.site-footer .srr-band a { color: inherit !important; }
.site-footer .srr-band .ti-review-text a,
.site-footer .srr-band .ti-footer a { color: #8A8F97 !important; }

/* ==================================================================== phone */

@media (max-width: 767px) {
  .site-footer .srr-band,
  .srr-band { padding: 1.4rem 1rem .8rem; }

  /* On a phone the rating drops under the heading rather than fighting it for
     the same line. */
  .srr-rating { font-size: .78rem; gap: .4rem; }
  .srr-star { font-size: 13px; }
  .srr-band[data-layout="row"] .srr-widget::after { width: 32px; }
  .site-footer .srr-band h2,
  .srr-band h2 { font-size: 1.35rem; border-left-width: 5px; }
  .srr-head { align-items: flex-start; margin-bottom: .85rem; }
  .site-footer .srr-band .srr-sub,
  .srr-band .srr-sub { font-size: .86rem; }
}

/* Motion is a preference, not a decision this band gets to make. */
@media (prefers-reduced-motion: reduce) {
  .srr-band[data-layout="row"] .ti-widget-container { scroll-snap-type: none; }
}