/* ================================
   Google Reviews Widget – FULL CSS
   ================================ */

/* ---- Base / tokens ---- */
.gr-widget {
  --card-w: 340px;
  --gap: 18px;
  --radius: 14px;
}

/* ---- Header (pro layout) ---- */
.gr-header{
  display:flex; align-items:center; gap:6px; margin-bottom:14px;
  flex-wrap:wrap;
}
/* Make the logo+text act like a single tight block */
.gr-brand{
  display:inline-grid;
  grid-template-rows:auto auto;
  justify-items:center;
  row-gap:2px;              /* tighten the gap */
  width:var(--logo-w,auto);
  line-height:0;            /* collapse stray inline line-box space */
}

/* Kill baseline gap on images */
.gr-badge{
  display:block;            /* no inline baseline */
  vertical-align:middle;    /* extra safety if it ever becomes inline again */
  width:var(--logo-w,auto);
  height:auto;
}

/* Zero margins & a compact line-height for the caption */
.gr-brand__txt{
  margin:0;
  line-height:1;            /* compact */
  font:500 12px/1 "Roboto","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  letter-spacing:.12px;
  color:#5f6368;
  text-align:center;
  transform:translateY(-1px); /* micro-adjust down; tweak/remove as needed */
}


.gr-metrics{
  display:flex; align-items:baseline; gap:12px; flex:1 1 auto; min-width:220px;
  color:#111827;
}
.gr-score__num{font-size:28px; font-weight:800; line-height:1;}
.gr-score__of{color:#667085; margin-left:4px; font-weight:600;}
.gr-count{color:#667085;}
.gr-sep{
  width:1px; height:18px; background:#e5e7eb; display:inline-block; align-self:center;
}

/* CTA button on the right (becomes centered on mobile) */
.gr-linkbtn{
  margin-left:auto; padding:8px 12px;  
  background:rgba(26,115,232,.08); color:#1a73e8; text-decoration:none;
  font-weight:600; transition:background .15s ease, transform .15s ease;
  white-space:nowrap;
}
.gr-linkbtn:hover{ background:rgba(26,115,232,.14); transform:translateY(-1px); }
.gr-linkbtn:active{ transform:none; }

/* ---- Slider area ---- */
.gr-viewport{ overflow: hidden; padding-bottom: 2px; } /* gives the border room */

.gr-track {
  display:flex; gap:var(--gap);
  will-change:transform; transition:transform .35s ease;
}

/* ---- Review card ---- */
.gr-card {
  flex:0 0 var(--card-w);
  background:#f9f9f9;
  border:1px solid #c2c2c2;
  padding:16px 18px;
  box-shadow:0 6px 18px rgba(16,24,40,.06);
}
.gr-text { margin:10px 0 12px; line-height:1.55; font-size:15px; color:#111827; }
.gr-author { display:flex; align-items:center; gap:10px; }
.gr-author img { width:32px; height:32px; border-radius:50%; object-fit:cover; }
.gr-name { font-weight:700; }
.gr-src  { font-size:12px; color:#6b7280; }

/* ---- Stars ---- */
.gr-stars { color:#f6b400; font-size:18px; letter-spacing:1px; }
.gr-star { opacity:.25; }
.gr-star.is-full { opacity:1; }

/* ---- Bottom controls (blue pill buttons) ---- */
.gr-controls {
  display:flex; justify-content:center; align-items:center;
  gap:10px; margin-top:14px;
}
.gr-nav {
  position:static; /* ensure not overlaying cards */
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border:0; border-radius:999px;
  background:#1a73e8; color:#fff; cursor:pointer;
  box-shadow:0 6px 16px rgba(26,115,232,.25);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.gr-nav svg { width:22px; height:22px; fill:currentColor; }
.gr-nav:hover   { transform:translateY(-1px); box-shadow:0 8px 20px rgba(26,115,232,.35); }
.gr-nav:active  { transform:none; }
.gr-nav:disabled{ opacity:.4; cursor:not-allowed; box-shadow:none; }

/* ---- Responsive ---- */

@media (max-width: 640px){
  .gr-brand { flex-direction: column; gap:4px; }
  .gr-brand__txt { font-size:12px; line-height:1.2; }
  .gr-widget { --card-w: 86vw; }
  .gr-header{ justify-content:center; text-align:center; gap:10px; }
  .gr-linkbtn{ margin-left:0; }
  .gr-metrics{ justify-content:center; }
}