/**
 * Google Reviews Badge — widgets/class-mvpf-google-reviews-badge.php
 *
 * Every visual value is a custom property on .mvpf-grb so one Elementor
 * control re-skins each part that uses it. Defaults below are the shipped
 * look; the widget's Style tab overwrites the properties, never the rules.
 */

.mvpf-grb {
  --grb-bg: #fff;
  --grb-radius: 999px;
  --grb-gap: 12px;
  --grb-star: #FBBC04;
  --grb-star-track: #DADCE0;
  --grb-star-size: 18px;
  --grb-star-gap: 2px;
  --grb-rating-color: #002738;
  --grb-count-color: #5F6368;
  --grb-logo-size: 22px;
  --grb-fill: 100%;

  display: flex;
  justify-content: flex-start;
}

.mvpf-grb-in {
  display: inline-flex;
  align-items: center;
  gap: var(--grb-gap);
  padding: 11px 18px;
  background: var(--grb-bg);
  /* Base hairline so the badge is bounded before anyone opens the Style tab.
     Elementor's Border group control writes to a higher-specificity selector,
     so touching it overrides this rather than fighting it. */
  border: 1px solid #E3E6EA;
  border-radius: var(--grb-radius);
  max-width: 100%;
}

/* Kit armor. The MVP theme paints bare links its accent red and uppercases
   them, which would turn this badge into red shouting caps the moment a
   Google listing URL is added. Pin every inherited text treatment. */
a.mvpf-grb-in,
a.mvpf-grb-in:hover,
a.mvpf-grb-in:focus,
a.mvpf-grb-in:visited {
  color: inherit !important;
  text-decoration: none !important;
}
.mvpf-grb-in,
.mvpf-grb-in * {
  text-transform: none !important;
  letter-spacing: normal !important;
  font-style: normal !important;
}

/* Only a linked badge behaves like something you can press. */
.mvpf-grb--link .mvpf-grb-in {
  transition: transform .15s ease, box-shadow .15s ease;
}
.mvpf-grb--link .mvpf-grb-in:hover {
  transform: translateY(-1px);
}
.mvpf-grb--link .mvpf-grb-in:focus-visible {
  outline: 2px solid var(--grb-rating-color);
  outline-offset: 3px;
}

/* ── Google mark ─────────────────────────────────────────────────────── */
.mvpf-grb-logo {
  display: flex;
  flex: none;
  line-height: 0;
}
.mvpf-grb-g {
  width: var(--grb-logo-size);
  height: var(--grb-logo-size);
  display: block;
}

/* ── Text block ──────────────────────────────────────────────────────── */
.mvpf-grb-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mvpf-grb-top {
  display: flex;
  align-items: center;
  gap: 7px;
}
.mvpf-grb-rating {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--grb-rating-color);
  font-variant-numeric: tabular-nums;
}
.mvpf-grb-count {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--grb-count-color);
}

/* ── Stars ───────────────────────────────────────────────────────────────
   Two identical rows: a grey track, and a coloured copy clipped to the
   rating percentage. The svgs carry a fixed flex-basis and never shrink, so
   the clip cuts a star mid-shape instead of squashing five smaller ones. */
.mvpf-grb-stars {
  position: relative;
  display: inline-block;
  line-height: 0;
  flex: none;
}
.mvpf-grb-stars-track,
.mvpf-grb-stars-fill {
  display: flex;
  gap: var(--grb-star-gap);
  line-height: 0;
}
.mvpf-grb-stars-track svg,
.mvpf-grb-stars-fill svg {
  flex: 0 0 var(--grb-star-size);
  width: var(--grb-star-size);
  height: var(--grb-star-size);
  display: block;
}
.mvpf-grb-stars-track svg { fill: var(--grb-star-track); }
.mvpf-grb-stars-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--grb-fill);
  overflow: hidden;
}
.mvpf-grb-stars-fill svg { fill: var(--grb-star); }

/* ── Stacked variant ─────────────────────────────────────────────────── */
.mvpf-grb--stacked .mvpf-grb-in {
  flex-direction: column;
  text-align: center;
}
.mvpf-grb--stacked .mvpf-grb-body { align-items: center; }
.mvpf-grb--stacked .mvpf-grb-top { justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .mvpf-grb--link .mvpf-grb-in { transition: none; }
  .mvpf-grb--link .mvpf-grb-in:hover { transform: none; }
}