/* Van Thats Quick — authentic Google review badge.
   Self-contained, scoped, theme-aware (class-based .dark). Asset-free
   (inline SVG Google "G"). Load anywhere the badge appears: hero,
   money pages, footer. Numbers are real GBP figures — never seed fakes. */

.vtq-review { display: inline-block; max-width: 340px; width: 100%; }
.vtq-review--center { margin-left: auto; margin-right: auto; }

/* Paired layout — Google + Yell side by side (AEWD-style two-up) */
.vtq-review-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 460px;
  width: 100%;
}
.vtq-review-pair--center { margin-left: auto; margin-right: auto; }
.vtq-review-pair .rev-badge { height: 100%; }
@media (max-width: 400px) { .vtq-review-pair { grid-template-columns: 1fr; } }

.rev-badge {
  display: block;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  background: #ffffff;
  color: #202124;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 16px;
  padding: 16px 18px 15px;
  box-shadow: 0 12px 30px -18px rgba(0, 0, 0, 0.45);
  font-family: Roboto, Inter, Arial, "Helvetica Neue", Helvetica, sans-serif;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.rev-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.55);
}
/* Google-coloured top accent bar */
.rev-badge--google::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #4285F4, #EA4335 33%, #FBBC05 66%, #34A853);
  pointer-events: none;
}

.rev-badge__top { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.rev-badge__logo { width: 22px; height: 22px; flex: 0 0 22px; display: block; }
.rev-badge__brand { font-size: 0.96rem; font-weight: 500; color: #5f6368; letter-spacing: 0.1px; }
.g-word { font-weight: 500; }
.g-word i { font-style: normal; }
.g-word .c1 { color: #4285F4; } .g-word .c2 { color: #EA4335; } .g-word .c3 { color: #FBBC05; }
.g-word .c4 { color: #4285F4; } .g-word .c5 { color: #34A853; } .g-word .c6 { color: #EA4335; }

.rev-badge__rate { display: flex; align-items: baseline; gap: 10px; }
.rev-badge__num { font-size: 1.85rem; font-weight: 700; color: #202124; line-height: 1; font-family: Arial, "Helvetica Neue", sans-serif; }
.rev-stars {
  --pct: calc(var(--rating) / 5 * 100%);
  display: inline-block; font-size: 18px; line-height: 1; letter-spacing: 2px; transform: translateY(1px);
}
.rev-stars::before {
  content: "\2605\2605\2605\2605\2605";
  background: linear-gradient(90deg, #fbbc04 var(--pct), #dadce0 var(--pct));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.rev-badge__count { display: block; margin-top: 9px; font-size: 0.8rem; color: #5f6368; }
.rev-badge__count strong { font-weight: 700; color: #202124; }
.rev-badge__more { display: block; margin-top: 10px; font-size: 0.78rem; font-weight: 600; color: #1a73e8; }

/* ---- Hero variant: a touch larger + confident shadow ---- */
.rev-badge--hero { padding: 18px 20px 17px; border-radius: 18px; }
.rev-badge--hero .rev-badge__num { font-size: 2.1rem; }
.rev-badge--hero .rev-stars { font-size: 20px; }

/* ---- Mini variant: footer / tight spots (hides the "more" line) ---- */
.rev-badge--mini { padding: 12px 14px 11px; border-radius: 14px; }
.rev-badge--mini .rev-badge__top { margin-bottom: 8px; gap: 7px; }
.rev-badge--mini .rev-badge__logo { width: 18px; height: 18px; flex-basis: 18px; }
.rev-badge--mini .rev-badge__brand { font-size: 0.82rem; }
.rev-badge--mini .rev-badge__num { font-size: 1.5rem; }
.rev-badge--mini .rev-stars { font-size: 15px; }
.rev-badge--mini .rev-badge__count { margin-top: 6px; font-size: 0.72rem; }
.rev-badge--mini .rev-badge__more { display: none; }

/* ---- Yell variant ---- */
.rev-badge--yell::before { display: none; }              /* no Google gradient bar */
.rev-badge--yell { border-top: 3px solid #ffcf01; }      /* Yell yellow */
.rev-badge__logo--yell { border-radius: 5px; background: #ffcf01; color: #17242b; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; font-family: Arial, sans-serif; }
.y-word { font-weight: 800; color: #17242b; letter-spacing: -0.4px; }
.rev-badge--yell .rev-badge__more { color: #17242b; }

/* ---- Dark theme (site toggles .dark on <html>) ---- */
.dark .rev-badge {
  background: #1f2937;
  color: #f9fafb;
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 12px 34px -18px rgba(0, 0, 0, 0.8);
}
.dark .rev-badge__brand { color: #9aa0a6; }
.dark .rev-badge__num { color: #ffffff; }
.dark .rev-badge__count { color: #9aa0a6; }
.dark .rev-badge__count strong { color: #ffffff; }
.dark .rev-badge__more { color: #8ab4f8; }
.dark .g-word .c2 { color: #f26b5e; } /* nudge red for contrast on dark */
.dark .rev-badge--yell .y-word { color: #ffffff; }
.dark .rev-badge--yell .rev-badge__more { color: #ffcf01; }