/* Google Reviews Strip for Jeff's Plumbing
 * Brand palette: #16798b (teal), #8b2327 (dark red), #e2383f (bright red), #0f5764 (dark teal text)
 */

.gr-strip-wrapper {
  width: 100%;
  overflow: hidden;
  margin: 32px 0;
  padding: 0 16px;
  box-sizing: border-box;
}

.gr-section-title {
  text-align: center;
  font-family: 'Lilita One', sans-serif;
  font-size: 2rem;
  color: #16798b;
  margin: 0 0 18px;
  font-style: italic;
  font-weight: normal;
}

/* Summary bar */
.gr-summary-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
  padding: 0 4px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.gr-overall { display: flex; align-items: center; gap: 12px; }
.gr-glogo { flex-shrink: 0; }
.gr-big-score {
  font-family: 'Lilita One', sans-serif;
  font-size: 2.6rem;
  font-weight: normal;
  color: #16798b;
  line-height: 1;
}
.gr-overall-right { display: flex; flex-direction: column; gap: 2px; }
.gr-stars--lg .gr-star { font-size: 1.2rem; }
.gr-total { font-size: 0.85rem; color: #666; margin-top: 2px; }

.gr-write-btn {
  display: inline-block;
  padding: 10px 20px;
  background: #16798b;
  color: #fff !important;
  text-decoration: none;
  border-radius: 6px;
  font-weight: bold;
  font-size: 0.95rem;
  border: 2px solid #16798b;
}
.gr-write-btn:hover, .gr-write-btn:focus {
  background: #0f5764;
  border-color: #0f5764;
  color: #fff !important;
}

/* Scrolling track */
.gr-track-outer {
  overflow: hidden;
  width: 100%;
  -webkit-mask: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.gr-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: gr-scroll 40s linear infinite;
}
@keyframes gr-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .gr-track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
  .gr-track-outer { -webkit-mask: none; mask: none; }
}

/* Review card */
.gr-card {
  flex-shrink: 0;
  width: 300px;
  background: #ffffff;
  border-radius: 8px;
  padding: 22px 20px;
  box-shadow: 0 2px 10px rgba(15, 87, 100, 0.10);
  border: 1px solid rgba(22, 121, 139, 0.18);
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
}
.gr-card-top { display: flex; align-items: flex-start; gap: 10px; }
.gr-avatar { flex-shrink: 0; }
.gr-avatar-img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: block; }
.gr-avatar-initial {
  width: 40px; height: 40px; border-radius: 50%;
  background: #d6e8ec; color: #16798b;
  display: flex; align-items: center; justify-content: center;
  font-weight: bold; font-size: 1.1rem;
  font-family: 'Lilita One', sans-serif;
}
.gr-meta { flex: 1; min-width: 0; }
.gr-name {
  display: block;
  font-weight: bold; font-size: 0.9rem;
  color: #0f5764;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gr-date { font-size: 0.78rem; color: #666; margin-top: 1px; }
.gr-badge { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-shrink: 0; }
.gr-badge span { font-size: 0.72rem; color: #666; font-weight: 500; }

/* Stars */
.gr-stars { display: flex; gap: 1px; line-height: 1; }
.gr-star { font-size: 1rem; color: #c8d8da; }
.gr-star--on { color: #FBBC05; }

/* Review text */
.gr-text {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #444;
  margin: 0;
  flex: 1;
}

/* Skeleton */
.gr-skeleton-row { display: flex; gap: 20px; overflow: hidden; padding: 4px 0; }
.gr-skel-card {
  flex-shrink: 0; width: 300px;
  background: #ffffff;
  border-radius: 8px;
  padding: 22px 20px;
  box-shadow: 0 2px 10px rgba(15, 87, 100, 0.10);
}
.gr-skel-row { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.gr-skel-circle {
  width: 40px; height: 40px; border-radius: 50%;
  background: #d6e8ec;
  animation: gr-pulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
.gr-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.gr-skel-line {
  height: 10px; border-radius: 6px;
  background: #d6e8ec;
  animation: gr-pulse 1.4s ease-in-out infinite;
}
.gr-skel-line.mt8 { margin-top: 8px; }
.gr-skel-line.mt6 { margin-top: 6px; }
.gr-skel-line.mt4 { margin-top: 4px; }
.gr-skel-line.w90 { width: 90%; }
.gr-skel-line.w75 { width: 75%; }
.gr-skel-line.w55 { width: 55%; }
.gr-skel-line.w45 { width: 45%; }
.gr-skel-line.w35 { width: 35%; }
@keyframes gr-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.9; }
}

/* Error */
.gr-error { text-align: center; color: #666; font-size: 0.95rem; padding: 24px 0; }
.gr-error a { color: #16798b; font-weight: bold; }
.gr-error a:hover, .gr-error a:focus { color: #8b2327; }

/* Mobile */
@media (max-width: 600px) {
  .gr-summary-bar { justify-content: center; text-align: center; }
  .gr-overall { justify-content: center; }
  .gr-card, .gr-skel-card { width: 280px; }
}