.tcs-trust-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Rating chip. Colours follow the section it sits in, light or dark. */
.tcs-rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  border-radius: 999px;
  color: inherit;
  font: inherit;
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.tcs-rating__star,
.tcs-review__stars {
  color: #f2b01e;
}

.tcs-rating:focus-visible,
.tcs-reviews a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Reviews: quotes set in columns, no boxes. */
.tcs-reviews {
  width: 100%;
  font-size: 16px;
  line-height: 1.6;
  text-align: start;
}

.tcs-reviews__list {
  columns: 3 18rem;
  column-gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tcs-review {
  break-inside: avoid;
  margin: 0 0 32px;
  padding: 0;
}

.tcs-review figure,
.tcs-review blockquote,
.tcs-review p {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-style: normal;
  quotes: none;
}

.tcs-review blockquote::before,
.tcs-review blockquote::after {
  content: none;
}

.tcs-review__stars {
  margin-bottom: 8px;
  letter-spacing: 2px;
}

.tcs-review__text {
  overflow-wrap: break-word;
}

.tcs-review__meta {
  margin-top: 8px;
  font-size: 14px;
  opacity: 0.75;
}

.tcs-reviews a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tcs-reviews__all {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
}

/* WhatsApp button, bottom right. The configurator's floating button
   (#tcs-configurator-button, 51px tall) sits in that corner on every page with
   the configurator, so this one stacks 12px above it, on the same right edge.
   z-index 998 keeps it under every cookie banner, the lowest being live's old
   banner in an Elementor container at 999, and under the configurator's popups
   (10001 and up), which cover it while open. */
.tcs-whatsapp {
  --tcs-whatsapp-edge: var(--tcs-space-16, 16px);
  position: fixed;
  right: var(--tcs-whatsapp-edge);
  bottom: calc(var(--tcs-whatsapp-edge) + env(safe-area-inset-bottom, 0px));
  z-index: 998;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 52px;
  height: 52px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: #1c9e52;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.1), 0 4px 16px rgb(0 0 0 / 0.3);
  color: #fff;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  transition: background-color 160ms cubic-bezier(0.2, 0, 0, 1), transform 160ms cubic-bezier(0.2, 0, 0, 1);
}

body:has(#tcs-configurator-button) .tcs-whatsapp {
  bottom: calc(var(--tcs-whatsapp-edge) + 51px + 12px + env(safe-area-inset-bottom, 0px));
}

.tcs-whatsapp svg {
  display: block;
  width: 28px;
  height: 28px;
}

.tcs-whatsapp:active {
  transform: scale(0.97);
}

.tcs-whatsapp:focus-visible {
  outline: 2px solid #121212;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px #fff;
}

@media (hover: hover) and (pointer: fine) {
  .tcs-whatsapp:hover {
    background: #178544;
    color: #fff;
  }
}

@media (forced-colors: active) {
  .tcs-whatsapp {
    border: 2px solid LinkText;
  }
}

@media print {
  .tcs-whatsapp {
    display: none;
  }
}