/* =========================================================================
   Elfsight Google Reviews — site-style overrides
   -------------------------------------------------------------------------
   The Google reviews feed on the homepage is the Elfsight widget
   <https://elfsightcdn.com/platform.js>. It renders plain DOM (no iframe,
   no shadow root) and tags every element with a stable `es-*` class, so
   we can fold its look into the .review section design with CSS alone.
   Scoped to the homepage app-id so it can't leak to any other Elfsight
   widget that might appear elsewhere on the site.

   Untouched (Google brand): the Google word-mark, the verified-badge
   tick, the avatar circles. Soften only the bright-blue CTA + the
   yellow stars (the latter to match the testimonial above).
   ========================================================================= */

.elfsight-app-a904b7b6-8d5c-4bb3-ba40-7bb17b2f3d94 {
  /* Extend the .review section's cream backdrop down through the widget so
     the testimonial + Google feed read as one "guest reviews" zone. */
  background: var(--cream);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: -1px; /* hug the .review section above — no seam */
  padding: 8px 0 80px;
}

/* Cap the widget's content to the page's max width. */
.elfsight-app-a904b7b6-8d5c-4bb3-ba40-7bb17b2f3d94 .es-embed-root {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 max(24px, 6vw);
}

/* Strip Elfsight's own panel chrome so the cream shows through. */
.elfsight-app-a904b7b6-8d5c-4bb3-ba40-7bb17b2f3d94 :is(
  .es-widget-background-container,
  .es-widget-background-wrapper,
  .es-background-base,
  .es-background-overlay,
  .es-review-background-container,
  .es-review-container
) {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* ----- Header strip (Google logo + rating + Write a Review) -------------- */
.elfsight-app-a904b7b6-8d5c-4bb3-ba40-7bb17b2f3d94 .es-header-component-top {
  padding-bottom: 28px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--rule);
}
.elfsight-app-a904b7b6-8d5c-4bb3-ba40-7bb17b2f3d94 .es-header-rating-reviews-count {
  font-family: var(--sans);
  color: var(--stone-dark);
}

/* "Write a Review" → navy outline button, matching the page's CTA tone. */
.elfsight-app-a904b7b6-8d5c-4bb3-ba40-7bb17b2f3d94 .es-header-write-review-button {
  background: transparent !important;
  color: var(--navy-deep) !important;
  border: 1px solid var(--navy-deep) !important;
  border-radius: 0 !important;
  padding: 11px 22px !important;
  font: 500 12px/1 var(--sans) !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: none !important;
  transition: background-color .2s ease, color .2s ease;
}
.elfsight-app-a904b7b6-8d5c-4bb3-ba40-7bb17b2f3d94 .es-header-write-review-button:hover {
  background: var(--navy-deep) !important;
  color: var(--cream) !important;
}
/* Elfsight wraps the label in an inner .es-button-base-overlay span and paints
   a faint white wash on it for its own hover/active highlight. On our flat
   navy-on-hover fill that overlay reads as a lighter-grey pill behind the
   label, so kill its background + radius. */
.elfsight-app-a904b7b6-8d5c-4bb3-ba40-7bb17b2f3d94 .es-header-write-review-button .es-button-base-overlay {
  background: transparent !important;
  border-radius: 0 !important;
}

/* ----- Stars — match the testimonial stars (--gold).
   The fill we care about is on the <path> inside each star SVG; Elfsight
   sets it via a styled-component, so we have to target the path directly
   (parent `color` doesn't propagate down to the path's fill). */
.elfsight-app-a904b7b6-8d5c-4bb3-ba40-7bb17b2f3d94 :is(
  .es-rating-item-filled,
  .es-rating-stars-item-filled
) svg path {
  fill: var(--gold) !important;
}
.elfsight-app-a904b7b6-8d5c-4bb3-ba40-7bb17b2f3d94 :is(
  .es-rating-item-unfilled,
  .es-rating-stars-item-unfilled
) svg path {
  fill: var(--rule) !important;
}

/* ----- Review body + meta colours -------------------------------------- */
.elfsight-app-a904b7b6-8d5c-4bb3-ba40-7bb17b2f3d94 :is(
  .es-review-content,
  .es-review-author-name
) {
  color: var(--navy-deep) !important;
}
.elfsight-app-a904b7b6-8d5c-4bb3-ba40-7bb17b2f3d94 .es-review-info-date {
  color: var(--stone) !important;
}
.elfsight-app-a904b7b6-8d5c-4bb3-ba40-7bb17b2f3d94 .es-review-align-container {
  padding: 4px 24px !important;
}

/* ----- Carousel arrows + bullets — match the page tones ---------------- */
.elfsight-app-a904b7b6-8d5c-4bb3-ba40-7bb17b2f3d94 .es-carousel-arrow-control-container {
  background: transparent !important;
  box-shadow: none !important;
}
.elfsight-app-a904b7b6-8d5c-4bb3-ba40-7bb17b2f3d94 .es-carousel-arrow-control-icon {
  color: var(--navy) !important;
}
.elfsight-app-a904b7b6-8d5c-4bb3-ba40-7bb17b2f3d94 .es-bullets-control-item {
  background: var(--stone) !important;
  opacity: .35;
}
.elfsight-app-a904b7b6-8d5c-4bb3-ba40-7bb17b2f3d94 .es-bullets-control-item-active {
  background: var(--navy-deep) !important;
  opacity: 1;
}

/* ----- Slider width — narrower on desktop/tablet, full on mobile -------
   Pull the carousel track in so cards aren't as wide and the reading
   line is shorter. Mobile keeps 100% so cards still feel touchable. */
@media (min-width: 768px) {
  .elfsight-app-a904b7b6-8d5c-4bb3-ba40-7bb17b2f3d94 .es-slider-layout-container {
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
  }
}