/**
 * GilReviews front-end widget styles.
 * Gilmedia-branded Google-style review widget.
 * Vanilla CSS, self-contained, no external fonts or images.
 * Note: no em dashes or en dashes anywhere in this file (ASCII hyphens only).
 */

/* ------------------------------------------------------------------ *
 * Design tokens
 * ------------------------------------------------------------------ */
.gr-widget,
.gr-cta {
  --gr-accent: #f37333;      /* Gilmedia orange */
  --gr-accent-dark: #d95d1f; /* hover / active */
  --gr-dark: #161616;
  --gr-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --gr-card-bg: #ffffff;
  --gr-card-border: #d9d9d9;
  --gr-card-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  --gr-radius: 12px;
  --gr-text: #202124;
  --gr-muted: #5f6368;
  --gr-blue: #1a73e8;
  --gr-gold: #fbbc04; /* Google star gold, never recolored */
  --gr-star-off: #dadce0;
  --gr-gap: 16px;
  --gr-columns: 3;
}

.gr-widget {
  box-sizing: border-box;
  position: relative;
  font-family: var(--gr-font);
  color: var(--gr-text);
  /* Never let the widget push the page into horizontal scroll. */
  max-width: 100%;
  margin: 0;
  /* Room on the sides so absolutely-positioned arrows do not clip. */
  padding: 0 6px;
}

.gr-widget *,
.gr-widget *::before,
.gr-widget *::after {
  box-sizing: border-box;
}

/* ------------------------------------------------------------------ *
 * Track: desktop grid by default (equal-height columns via stretch)
 * ------------------------------------------------------------------ */
.gr-track {
  display: grid;
  grid-template-columns: repeat(var(--gr-columns), minmax(0, 1fr));
  gap: var(--gr-gap);
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Summary layout is a 4-up grid whose first cell is the stats card. */
.gr-widget[data-layout="summary"] .gr-track {
  --gr-columns: 4;
  grid-template-columns: repeat(var(--gr-columns), minmax(0, 1fr));
}

/* ------------------------------------------------------------------ *
 * Card (flex column so the body can grow and equalize heights)
 * ------------------------------------------------------------------ */
.gr-card {
  position: relative; /* anchors the top-right Google "G" badge */
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--gr-card-bg);
  border: 1px solid var(--gr-card-border);
  border-radius: var(--gr-radius);
  box-shadow: var(--gr-card-shadow);
  padding: 20px;
  overflow: hidden;
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}

/* Lift-on-hover, matching the target widget. Guarded so users who prefer
   reduced motion never get the translate. */
@media (prefers-reduced-motion: no-preference) {
  .gr-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10);
  }
}

/* Colourful Google "G" pinned to the top-right corner of every card. */
.gr-card__g {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  line-height: 0;
  pointer-events: none;
}

.gr-card__g svg {
  display: block;
  width: 20px;
  height: 20px;
}

/* Non-Google review source label (Trustpilot, HomeStars, ...) in the card corner. */
.gr-card__src {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.05);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.5;
  white-space: nowrap;
  pointer-events: none;
}

.gr-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  /* Keep the name/time clear of the top-right "G" so long names never
     run underneath it (the G occupies the top-right ~34px). */
  padding-right: 28px;
}

/* ------------------------------------------------------------------ *
 * Avatar
 * ------------------------------------------------------------------ */
.gr-avatar {
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
}

.gr-avatar__img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: #f1f3f4;
}

.gr-avatar__initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  /* Background colour is supplied inline per reviewer (deterministic
     palette in the PHP); do NOT hardcode it here. */
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  user-select: none;
}

/* ------------------------------------------------------------------ *
 * Meta: name, verified tick, time
 * ------------------------------------------------------------------ */
.gr-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}

.gr-name {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: #000000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gr-verified {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  line-height: 0;
}

.gr-verified svg {
  display: block;
  width: 14px;
  height: 14px;
}

.gr-sub {
  display: block;
  min-width: 0;
}

.gr-time {
  font-size: 13px;
  color: var(--gr-muted);
  line-height: 1.3;
}

/* ------------------------------------------------------------------ *
 * Stars (Google gold, do not recolor)
 * ------------------------------------------------------------------ */
.gr-stars {
  display: flex;
  gap: 1px;
  margin-bottom: 10px;
  line-height: 1;
}

.gr-star {
  font-size: 17px;
  line-height: 1;
  color: var(--gr-star-off);
}

.gr-star--on {
  color: var(--gr-gold);
}

/* ------------------------------------------------------------------ *
 * Body text with read-more clamp
 * ------------------------------------------------------------------ */
.gr-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto; /* grows so all cards in a row match the tallest */
}

.gr-text {
  margin: 0;
  font-size: 15px;
  line-height: 21.75px;
  color: var(--gr-text);
  overflow-wrap: break-word;
  word-wrap: break-word;

  /* Collapsed to exactly 4 lines by default. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Reserve a full 4-line block so a 1-line review occupies the same
     vertical space as a 10-line one. line-height is 21.75px, so 4 lines =
     87px. min-height keeps short text at 4 lines; max-height clamps long
     text so every card is the same height. */
  min-height: calc(21.75px * 4);
  max-height: calc(21.75px * 4);
}

/* Expanded state: show the full review text. */
.gr-card[data-expanded="1"] .gr-text {
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
  /* min-height stays (short text keeps its 4-line floor); only the cap lifts
     so long text can grow to its full length when expanded. */
  max-height: none;
}

.gr-readmore {
  align-self: flex-start;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  /* Black at 50% opacity, sentence case, no underline, to match the target. */
  color: #000000;
  opacity: 0.5;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 400;
  text-transform: none;
  text-decoration: none;
  /* Fixed height so the reserved slot is identical whether the button is
     shown or hidden. 13.5px * ~1.33 = 18px. */
  height: 18px;
  line-height: 18px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.gr-readmore:hover {
  opacity: 1;
  text-decoration: none;
}

.gr-readmore:focus-visible {
  outline: 2px solid var(--gr-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* JS hides the button when the text does not overflow. Until JS runs we
   keep it visible so the CSS-only fallback still lets people read on.
   Use visibility (not display:none) so the button's 18px slot is ALWAYS
   reserved - a card with no Read more ends at the same height as one that
   has it. The [hidden] attribute also drops it from the tab order. */
.gr-readmore[hidden] {
  display: block;
  visibility: hidden;
}

/* ------------------------------------------------------------------ *
 * Summary stats card (first cell of the summary layout)
 * ------------------------------------------------------------------ */
.gr-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  /* Plain, transparent badge that sits on the page: no border, no
     background, no shadow (matches the target widget). */
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.gr-summary__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.gr-summary__g {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.gr-summary__g svg {
  display: block;
}

.gr-summary__brandtext {
  font-size: 15px;
  font-weight: 600;
  color: var(--gr-text);
}

.gr-summary__rating {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.05;
  color: var(--gr-text);
}

/* "EXCELLENT" word rating at the top of the badge. */
.gr-summary__word {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.2;
  margin-bottom: 6px;
  text-transform: uppercase;
  color: #000000;
}

.gr-summary__stars {
  justify-content: center;
  margin-bottom: 2px;
}

.gr-summary__stars .gr-star {
  font-size: 30px;
}

/* Half star: the outer span shows a grey star (right half), and the inner
   fill span shows a gold star clipped to the left 50% so the star reads as
   half gold / half grey. */
.gr-star--half {
  position: relative;
  color: var(--gr-star-off);
}

.gr-star--half .gr-star__fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  overflow: hidden;
  color: var(--gr-gold);
}

.gr-summary__count {
  font-size: 15px;
  color: #000000;
  line-height: 1.4;
}

.gr-summary__count strong {
  font-weight: 700;
  color: #000000;
}

/* Colourful Google wordmark; each letter is already coloured inline. */
.gr-summary__google {
  margin-top: 2px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.1;
}

.gr-summary__cta {
  display: inline-block;
  margin-top: 10px;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--gr-accent);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.gr-summary__cta:hover,
.gr-summary__cta:focus-visible {
  background: var(--gr-accent-dark);
  color: #ffffff;
}

.gr-summary__cta:focus-visible {
  outline: 2px solid var(--gr-accent);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ *
 * Navigation arrows (visible only when the track is scrollable)
 * ------------------------------------------------------------------ */
.gr-nav {
  display: none; /* hidden in desktop grid; shown only in slider/carousel mode below */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  /* Flex centering keeps the SVG chevron dead center. !important defeats theme
     button styles (Flatsome) that would make the arrow oval/square or add padding. */
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid #d9d9d9 !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: #5e5e5e !important;
  line-height: 0 !important;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.gr-nav svg {
  display: block;
  width: 20px;
  height: 20px;
}

.gr-nav:hover {
  background: var(--gr-accent) !important;
  border-color: var(--gr-accent) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(243, 115, 51, 0.3), 0 4px 14px rgba(243, 115, 51, 0.2);
}

.gr-nav:focus-visible {
  outline: 2px solid var(--gr-accent);
  outline-offset: 2px;
}

/* Hide the arrow at a scroll end (clean look, like the target widget where
   only the active arrow shows). */
.gr-nav:disabled {
  opacity: 0;
  pointer-events: none;
  cursor: default;
}

.gr-nav:disabled:hover {
  background: #ffffff !important;
  border-color: #d9d9d9 !important;
  color: #5e5e5e !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
}

.gr-nav--prev {
  left: 4px;
}

.gr-nav--next {
  right: 4px;
}

/* ------------------------------------------------------------------ *
 * Carousel mode (auto-slider ON): a horizontal slider on desktop too.
 * The widget gets side gutters so the arrows sit OUTSIDE the cards and
 * never cover review text. A plain grid layout (auto-slider off) stays
 * a static grid with NO arrows.
 * ------------------------------------------------------------------ */
/* These carousel rules apply to the grid layouts with auto-slider ON. The
   Summary + Slider template has its own layout, so it is excluded here. */
.gr-widget[data-autoplay="1"]:not(.gr-widget--sslider) {
  padding: 0 48px;
}

.gr-widget[data-autoplay="1"]:not(.gr-widget--sslider) .gr-track {
  display: flex;
  grid-template-columns: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  align-items: stretch;
  padding-bottom: 6px;
}

.gr-widget[data-autoplay="1"]:not(.gr-widget--sslider) .gr-track::-webkit-scrollbar {
  display: none;
}

.gr-widget[data-autoplay="1"]:not(.gr-widget--sslider) .gr-card,
.gr-widget[data-autoplay="1"]:not(.gr-widget--sslider) .gr-summary {
  flex: 0 0 calc((100% - (var(--gr-columns) - 1) * var(--gr-gap)) / var(--gr-columns));
  scroll-snap-align: start;
}

.gr-widget[data-autoplay="1"]:not(.gr-widget--sslider) .gr-nav {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* ------------------------------------------------------------------ *
 * Mobile: force a slider regardless of the data-slider attribute,
 * showing roughly 1.1 cards so the next one peeks in.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
  /* Side gutters so the arrows live outside the cards, not over the text. */
  .gr-widget {
    padding: 0 42px;
  }

  .gr-track,
  .gr-widget[data-layout="summary"] .gr-track {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    align-items: stretch;
    padding-bottom: 6px;
  }

  .gr-track::-webkit-scrollbar {
    display: none;
  }

  .gr-card,
  .gr-summary {
    /* ~84% of the track so the next card peeks in (about 1.1 visible). */
    flex: 0 0 84%;
    scroll-snap-align: start;
  }

  .gr-nav {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  .gr-nav--prev {
    left: 2px;
  }

  .gr-nav--next {
    right: 2px;
  }
}

/* ------------------------------------------------------------------ *
 * Summary + Slider layout (homepage style): summary badge fixed on the
 * left, review cards in a horizontal slider on the right with its own
 * arrow context inside .gr-slider. This layout has its OWN arrows and is
 * deliberately kept clear of the data-autoplay / generic mobile arrow
 * rules so arrows are never double-shown or misplaced.
 * ------------------------------------------------------------------ */
.gr-widget--sslider {
  display: flex;
  flex-direction: column; /* mobile-first: stack summary over slider */
  gap: 16px;
  padding: 0;
}

.gr-widget--sslider .gr-summary {
  width: 100%;
}

/* The slider is the positioning context for its own prev/next arrows. */
.gr-widget--sslider .gr-slider {
  position: relative;
  min-width: 0;
  width: 100%;
}

/* Track is always a horizontal scroll-snap slider here (both breakpoints). */
.gr-slider .gr-track {
  display: flex;
  grid-template-columns: none;
  gap: var(--gr-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  align-items: stretch;
  margin: 0;
  padding: 0 0 6px;
  list-style: none;
}

.gr-slider .gr-track::-webkit-scrollbar {
  display: none;
}

.gr-slider .gr-card {
  /* Mobile default: about 1.1 cards visible so the next one peeks in. */
  flex: 0 0 84%;
  scroll-snap-align: start;
}

/* Arrows inside .gr-slider (shown on desktop; this wins over the base
   display:none and any autoplay rule via the two-class specificity). */
.gr-widget--sslider .gr-nav {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.gr-widget--sslider .gr-nav--prev {
  /* Sits in the gap between the summary and the cards (only visible once
     scrolled, so it never wastes space at the start). */
  left: -24px;
}

.gr-widget--sslider .gr-nav--next {
  right: 2px;
}

/* Desktop: summary fixed-width on the left, slider fills the rest. */
@media (min-width: 768px) {
  .gr-widget--sslider {
    flex-direction: row;
    gap: 32px;
    /* Cards define the row height; the summary is centered against it. */
    align-items: stretch;
  }

  .gr-widget--sslider .gr-summary {
    flex: 0 0 200px;
    width: auto;
    /* Vertically center the transparent badge against the taller card row. */
    align-self: center;
  }

  .gr-widget--sslider .gr-slider {
    flex: 1 1 auto;
    min-width: 0;
    /* Right gutter only, so the next arrow sits just outside the cards while
       the cards start right after the summary (no empty left gutter). */
    padding: 0 48px 0 0;
  }

  .gr-slider .gr-card {
    /* Exactly N whole cards fill the track (N = --gr-columns: 3 for the
       standard Summary + Slider, 4 for the "5 columns" design). The basis uses
       the SAME gap the track uses (var(--gr-gap)), so N cards + (N-1) gaps ==
       100% of the track with nothing left over. That is what stops a sliver of
       the next card peeking (the "line on the right"); the next card sits fully
       off-screen and the track clips it via overflow-x. */
    flex: 0 0 calc((100% - (var(--gr-columns) - 1) * var(--gr-gap)) / var(--gr-columns));
  }
}

/* Mobile: keep it stacked and never let arrows push the page sideways.
   This block comes after the generic mobile rules so it wins at equal
   specificity; the two-class selector also beats the generic .gr-nav. */
@media (max-width: 767px) {
  .gr-widget--sslider {
    padding: 0;
  }

  .gr-widget--sslider .gr-nav {
    display: none !important;
  }
}

/* ------------------------------------------------------------------ *
 * CTA bar (below the widget)
 * ------------------------------------------------------------------ */
.gr-cta {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 20px 0 0;
  text-align: center;
  font-family: var(--gr-font);
}

/* The CTA bar lives on external client themes (e.g. Flatsome) whose global
   "a" rules restyle links: underline, brand color, different padding, no
   background. We win with high-specificity selectors (.gr-cta a.gr-btn plus
   state pseudo-classes, including :visited which themes love to recolor) and
   !important on exactly the properties the theme fights. */
.gr-cta a.gr-btn,
.gr-cta a.gr-btn:link,
.gr-cta a.gr-btn:visited {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px; /* comfortable touch target */
  padding: 12px 22px !important;
  border-radius: 999px !important;
  border: 2px solid transparent !important;
  font-family: var(--gr-font);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2 !important;
  text-align: center;
  text-decoration: none !important;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.16), 0 2px 6px rgba(60, 64, 67, 0.12) !important;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.gr-cta a.gr-btn--primary,
.gr-cta a.gr-btn--primary:link,
.gr-cta a.gr-btn--primary:visited {
  background: var(--gr-accent) !important;
  border-color: var(--gr-accent) !important;
  color: #ffffff !important;
}

.gr-cta a.gr-btn--primary:hover,
.gr-cta a.gr-btn--primary:focus,
.gr-cta a.gr-btn--primary:focus-visible {
  background: var(--gr-accent-dark) !important;
  border-color: var(--gr-accent-dark) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(60, 64, 67, 0.22), 0 4px 10px rgba(60, 64, 67, 0.16) !important;
}

.gr-cta a.gr-btn--secondary,
.gr-cta a.gr-btn--secondary:link,
.gr-cta a.gr-btn--secondary:visited {
  background: #ffffff !important;
  border-color: var(--gr-accent) !important;
  color: var(--gr-accent) !important;
}

.gr-cta a.gr-btn--secondary:hover,
.gr-cta a.gr-btn--secondary:focus,
.gr-cta a.gr-btn--secondary:focus-visible {
  background: var(--gr-accent) !important;
  border-color: var(--gr-accent) !important;
  color: #ffffff !important;
}

.gr-cta a.gr-btn:focus-visible {
  outline: 2px solid var(--gr-accent) !important;
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ *
 * Reduced motion
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .gr-track {
    scroll-behavior: smooth;
  }
}

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