/* Trustpilot TrustBox wrappers. The iframe inside is Trustpilot's; these
   rules only give it a Clinicana-shaped frame and a quiet placeholder
   before it mounts. */
.tp-box { position: relative; }
.tp-box .trustpilot-widget { min-height: 20px; }
.tp-box .trustpilot-widget > a { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tp-box .trustpilot-widget iframe { display: block; }

/* ---- Home page Trustpilot section -------------------------------------
   Centred heading and score line like every other home section, then a
   carousel of real reviews as speech bubbles with the reviewer named
   underneath. Arrows and a progress bar make the cut at the right edge read
   as a carousel rather than an accident. */
.tpq { padding: 0 0 80px; background: #f3f9fa; }
.tpq .wrapper { padding-top: 80px; }

.tpq__sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Aside: the question first, then Trustpilot's own mark answering it. */
/* The question comes after the Trustpilot block so it sits next to the reviews
   it introduces, with the rule now separating it from above. */
.tpq__heading {
  margin: 26px 0 0; padding-top: 26px; border-top: 1px solid #dce9ec;
  font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -1.3px; color: #1a1c1e;
}
.tpq__logo {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none !important; color: #1a1c1e;
}
.tpq__logo-star { width: 52px; height: 50px; display: block; flex: none; }
.tpq__logo-word { font-size: 52px; font-weight: 700; line-height: 1; letter-spacing: -2.9px; }

.tpq__score {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 4px 12px; margin-top: 12px;
  font-size: 17px; letter-spacing: -0.5px; color: #4e5a65;
}
.tpq__rating { font-weight: 700; color: #1a1c1e; }
.tpq__rating span { font-weight: 500; color: #8d99a4; }

/* ---- Layout ----------------------------------------------------------- */
/* Desktop stacks the aside and its button in the left column, with the cards
   spanning both rows beside them. On a phone the button moves below the
   reviews, so the proof comes before the ask. */
.tpq__body {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  grid-template-areas:
    "aside cards"
    "cta   cards";
  column-gap: 60px;
  align-content: center;
}
.tpq__aside { grid-area: aside; }
.tpq__viewport { grid-area: cards; align-self: center; }
.tpq .btn.tpq__cta { grid-area: cta; justify-self: start; }

.tpq__aside { padding-bottom: 4px; }
.tpq__badge { margin-top: 18px; max-width: 300px; min-height: 24px; }
/* Shown instead of the official widget where Trustpilot has no translation. */
.tpq__badge-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 15px; font-weight: 600; letter-spacing: -0.3px; color: #1a1c1e;
  text-decoration: none !important;
  border-bottom: 1px solid #b9d3d8; padding-bottom: 2px;
}
.tpq__badge-link:hover { border-bottom-color: #1a1c1e; }
.tpq__badge-arrow { transition: transform .25s ease; }
.tpq__badge-link:hover .tpq__badge-arrow { transform: translateX(3px); }
html[dir="rtl"] .tpq__badge-arrow { transform: scaleX(-1); }
html[dir="rtl"] .tpq__badge-link:hover .tpq__badge-arrow { transform: scaleX(-1) translateX(3px); }
/* The site's own button, at its own size; only the width is adjusted so it
   hugs its label instead of the theme's fixed 400px. */
.tpq .btn.tpq__cta { width: auto; margin-top: 26px; }
.tpq__badge .tp-box { width: 100%; }

/* The track runs off the right edge of the screen, the way a carousel should. */
.tpq__viewport {
  /* A real scroller, so swipe on touch and drag on desktop both work; the
     drift is driven from JS on top of it rather than by a transform, which
     could not be interrupted. */
  overflow-x: auto; overflow-y: hidden;
  cursor: grab;
  overscroll-behavior-x: contain;
  margin-right: calc(50% - 50vw);
  padding: 10px 0 20px;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.tpq__viewport::-webkit-scrollbar { display: none; }
.tpq__viewport:focus-visible { outline: 2px solid #2da8e7; outline-offset: 6px; border-radius: 20px; }
.tpq__viewport.is-dragging { cursor: grabbing; }
.tpq__viewport.is-dragging .tpq-card { pointer-events: none; }
.tpq__track { display: flex; align-items: stretch; gap: 26px; width: max-content; padding-right: 26px; }

/* In RTL the row starts at the right edge, so the drift runs the other way. */

/* ---- Card ------------------------------------------------------------- */
.tpq-card {
  flex: 0 0 auto; width: 360px;
  display: flex; flex-direction: column;
  text-decoration: none !important; color: #1a1c1e;
}
.tpq-card__bubble {
  position: relative;
  display: flex; flex-direction: column; flex: 1;
  padding: 30px 30px 26px;
  background: #fff; border-radius: 30px;
  box-shadow: 0 20px 50px -22px rgba(28, 62, 80, 0.3);
  transition: transform .3s ease, box-shadow .3s ease;
}
/* The bubble's tail, pointing at the reviewer below it. */
.tpq-card__bubble::after {
  content: "";
  position: absolute; left: 34px; bottom: -15px;
  width: 34px; height: 16px;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 12% 100%);
  transition: transform .3s ease;
}
.tpq-card:hover .tpq-card__bubble { transform: translateY(-4px); box-shadow: 0 28px 64px -22px rgba(28, 62, 80, 0.4); }
.tpq-card:hover .tpq-card__bubble::after { transform: translateY(-4px); }

.tpq-card__title {
  margin: 0 0 10px; font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -0.7px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tpq-card__text {
  margin: 0 0 22px; font-size: 16px; line-height: 1.6; color: #4e5a65; letter-spacing: -0.2px;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.tpq-card__bubble .tp-stars { margin-top: auto; }

.tpq-card__author { display: flex; align-items: center; gap: 12px; padding: 26px 0 0 26px; }
.tpq-card__avatar {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: #e0f4f8; color: #1a1c1e;
  font-size: 19px; font-weight: 700; letter-spacing: -0.5px;
}
.tpq-card__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tpq-card__who strong { font-size: 16px; font-weight: 600; letter-spacing: -0.4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpq-card__who em { font-style: normal; font-size: 14px; color: #8d99a4; letter-spacing: -0.2px; }

/* ---- Stars (Trustpilot's green tile) ---------------------------------- */
.tp-stars { display: inline-flex; gap: 3px; }
.tp-star {
  width: 21px; height: 21px; border-radius: 3px; background: #00b67a;
  display: grid; place-items: center;
}
.tp-star--off { background: #dcdce6; }
.tp-star svg { width: 15px; height: 15px; fill: #fff; display: block; }

/* ---- Platform strip ----------------------------------------------------
   The review-platform tiles that used to sit under the Testimonials section,
   closing this one. Trustpilot is left out: the section already is Trustpilot. */
.tpq__platforms { margin-top: 56px; }
.tpq__platforms-title {
  margin: 0 0 20px; text-align: center;
  font-size: 15px; font-weight: 600; letter-spacing: -0.3px; color: #8d99a4;
}
/* Every tile the same width, set by the widest, rather than each sized to its
   own content — five different widths read as an accident. Equal flex basis
   with grow does that: they share the row evenly and none can be the odd one. */
/* The tiles' flex rules are scoped to .innerpage, whose inner wrapper is capped
   narrower than this section — which squeezed the tiles until the counts wrapped. */
.tpq .innerpage, .tpq .innerpage__content { max-width: none; width: 100%; padding: 0; margin: 0; }
.tpq .reviews-labels {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px; margin-bottom: 0;
  max-width: 1160px; margin-inline: auto;
}
/* A fixed count per row rather than letting flex grow decide: when five tiles
   wrapped to 3 + 2 the two rows worked out a few pixels apart. */
.tpq .reviews-labels .item {
  flex: 0 0 calc((100% - 40px) / 5);
  display: flex; align-items: center;
  min-width: 0;
}
.tpq .reviews-labels .item__wrapper { width: 100%; }
/* YouTube's second line is text where the others are a star image; both are
   pinned to one height so no tile ends up taller. */
.tpq .reviews-labels .item__stars,
.tpq .reviews-labels .item__subtext { height: 16px; display: flex; align-items: center; line-height: 1; }
.tpq .reviews-labels .item__stars img { max-height: 14px; width: auto; }

/* Five across needs the full two-column layout; once the aside stacks above
   the cards the row has less to work with, so three, then two. */
@media (max-width: 1199px) {
  .tpq .reviews-labels { max-width: 760px; }
  .tpq .reviews-labels .item { flex-basis: calc((100% - 20px) / 3); }
}

@media (max-width: 767px) {
  .tpq__platforms { margin-top: 36px; }
  .tpq__platforms-title { font-size: 14px; margin-bottom: 14px; }
}

/* Fallback: cached feed empty, official Carousel instead of the cards. */
.tpq__fallback { background: #fff; border-radius: 30px; padding: 24px; box-shadow: 0 20px 50px -22px rgba(28, 62, 80, 0.3); }

/* ---- Arabic and Farsi -------------------------------------------------
   The track bleeds off the opposite edge, drifts the other way, and the
   bubble's tail moves to the right-hand side. */
html[dir="rtl"] .tpq__viewport {
  margin-right: 0;
  margin-left: calc(50% - 50vw);
}
html[dir="rtl"] .tpq__track { padding-right: 0; padding-left: 26px; }
/* The reviews themselves are in English, so each card reads left-to-right even
   on an Arabic or Farsi page; only the layout around them mirrors. */
html[dir="rtl"] .tpq-card { direction: ltr; text-align: left; }
/* Trustpilot's lockup is a brand mark and never mirrors. */
html[dir="rtl"] .tpq__logo { direction: ltr; }

@media (max-width: 900px) {
  html[dir="rtl"] .tpq__viewport { margin-right: calc(50% - 50vw); }
}
@media (hover: none) {
  html[dir="rtl"] .tpq__track { padding-left: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .tpq__viewport { scroll-behavior: auto; }
}

@media (max-width: 1200px) {
  .tpq__logo-star { width: 46px; height: 44px; }
  .tpq__logo-word { font-size: 46px; letter-spacing: -2.5px; }
  .tpq__body { grid-template-columns: 280px minmax(0, 1fr); gap: 44px; }
  .tpq__heading { font-size: 25px; letter-spacing: -1.1px; }
  .tpq-card { width: 330px; }
}

@media (max-width: 900px) {
  .tpq .wrapper { padding-top: 60px; }
  .tpq__body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "aside" "cards" "cta";
    row-gap: 26px;
  }
  .tpq__viewport { align-self: auto; }
  .tpq__heading { margin-top: 20px; padding-top: 20px; }
  .tpq .btn.tpq__cta { margin-top: 0; }
  .tpq__badge { margin-top: 22px; }
  .tpq__viewport { margin-left: calc(50% - 50vw); padding-left: 30px; }
  .tpq__track { padding-right: 30px; }
}

@media (max-width: 767px) {
  .tpq { padding-bottom: 52px; }
  .tpq .wrapper { padding-top: 48px; }
  .tpq__logo { gap: 10px; }
  .tpq__logo-star { width: 38px; height: 36px; }
  .tpq__logo-word { font-size: 38px; letter-spacing: -2px; }
  /* Centred like every other block on a phone. The mark leaves ~150px spare
     beside it, so the score moves up onto that line; the count is dropped here
     because the official badge underneath already states it. */
  .tpq__aside {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas: "mark score" "badge badge" "heading heading";
    justify-content: center; align-items: center; column-gap: 14px;
    text-align: center;
  }
  .tpq .btn.tpq__cta { justify-self: center; }
  .tpq__heading { grid-area: heading; }
  .tpq__logo { grid-area: mark; }
  .tpq__score { grid-area: score; margin-top: 0; font-size: 16px; }
  .tpq__count { display: none; }
  .tpq__badge { grid-area: badge; margin-top: 16px; justify-self: center; max-width: none; }
  .tpq__heading { font-size: 22px; letter-spacing: -1px; padding-top: 18px; margin-top: 18px; }
  .tpq__viewport { padding-left: 20px; padding-bottom: 18px; }

  /* Every tile two lines like Facebook's: the count was wrapping under the
     rating on the longer ones, giving some three lines and some two. Scoped to
     this section so the landing page keeps its own layout. */
  /* Every tile the same width, half the row less the gap, rather than sized to
     its own content — which left them ragged and stranded the fifth. Flex with
     a centred last row does that exactly; a grid span resolved its percentage
     against a different box and came out wider. The logo and type step down so
     the longest count still fits on one line at 360px. */
  .tpq .reviews-labels {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 10px;
    max-width: 420px; margin-inline: auto;
  }
  .tpq .reviews-labels .item {
    flex: 0 0 calc(50% - 5px);
    padding: 10px;
    display: flex; align-items: center;
    min-width: 0;
  }
  .tpq .reviews-labels .item__wrapper { gap: 8px; min-width: 0; }
  .tpq .reviews-labels .item__logo { width: 30px; height: 30px; flex: none; }
  .tpq .reviews-labels .item__digits { white-space: nowrap; font-size: 11px; }
  /* YouTube's second line is text where the others are a star image; both are
     pinned to the same height so no tile ends up taller. */
  .tpq .reviews-labels .item__stars,
  .tpq .reviews-labels .item__subtext {
    height: 14px; display: flex; align-items: center; font-size: 11px; line-height: 1;
  }
  .tpq .reviews-labels .item__stars img { max-height: 11px; width: auto; }
  .tpq__track { gap: 18px; padding-right: 20px; }
  .tpq-card { width: 282px; }
  .tpq-card__bubble { padding: 26px 24px 24px; border-radius: 24px; }
  .tpq-card__title { font-size: 17px; }
  .tpq-card__text { font-size: 15px; margin-bottom: 20px; }
  .tpq-card__author { padding: 24px 0 0 20px; }
}

/* ---- Sitewide footer trust block ---------------------------------------
   Sits with the accreditation badges, not among the legal links. */
.tp-lockup { display: inline-flex; align-items: center; gap: 7px; }
.tp-lockup__star { width: 19px; height: 18px; display: block; flex: none; }
.tp-lockup__word { font-size: 19px; font-weight: 700; letter-spacing: -1px; line-height: 1; color: #1a1c1e; }

/* A white chip rather than a card: no shadow and no border, so it sits on the
   footer's pale ground instead of floating over it, grouped with the
   accreditation badges as one trust cluster. */
.footer__trust-col { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.footer__trust-col .footer-trust { align-self: flex-end; }

.footer-trust {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 9px 16px;
  background: #fff; border-radius: 14px;
  text-decoration: none !important;
  transition: background .25s ease;
}
.footer-trust:hover { background: #f6fbfc; }
.footer-trust .tp-stars { gap: 2px; }
.footer-trust .tp-star { width: 15px; height: 15px; border-radius: 2px; }
.footer-trust .tp-star svg { width: 11px; height: 11px; }
.footer-trust .tp-lockup__star { width: 17px; height: 16px; }
.footer-trust .tp-lockup__word { font-size: 17px; letter-spacing: -0.9px; }
.footer-trust__body { display: inline-flex; align-items: center; gap: 10px; }
.footer-trust__meta { font-size: 13px; color: #4e5a65; letter-spacing: -0.2px; white-space: nowrap; }
.footer-trust__meta strong { font-size: 14px; color: #1a1c1e; font-weight: 700; }
.footer-trust:hover .footer-trust__meta { color: #1a1c1e; }

html[dir="rtl"] .footer-trust,
html[dir="rtl"] .tp-lockup { direction: ltr; }
html[dir="rtl"] .footer__trust-col .footer-trust { align-self: flex-start; }
html[dir="rtl"] .footer .col.col-6 .footer-trust { align-self: flex-end; }

.footer .col.col-6 .footer__trust-col { margin-top: 20px; }
.footer .col.col-6 .footer-trust { align-self: flex-start; }

@media (max-width: 767px) {
  .footer__trust-col--bot { display: none; }

  /* The theme gives every footer column a third of the width, which squeezed
     the five accreditation badges onto three lines long before this card
     existed. The trust column alone gets the full width so they sit in one
     row; the link columns are untouched. */
  .footer .col.col-6 { width: 100%; }
  /* The theme caps this row at 120px, which is what folded the five badges
     onto three lines. */
  .footer .col.col-6 .footer__bot-right { max-width: none; flex-wrap: wrap; gap: 14px; }
}

/* Contact form: a single quiet line under the submit button. */
.cu-trust { margin-top: 16px; display: flex; justify-content: center; }
.cu-trust .tp-box { width: 100%; }

/* Footer: sits with the legal links, tinted like the surrounding text. */