/* ============================================
   Component: Google Reviews Widget
   Extracted from design-system.css
   ============================================ */
@property --grev-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes grev-spin {
  to { --grev-angle: 360deg; }
}
.grev-wrap {
  display: flex;
  justify-content: center;
}
/* Card uses padding-box + border-box technique:
   surface color fills the interior (padding-box),
   rotating conic-gradient fills only the 2px border area (border-box).
   Result: clean animated border, zero blob effect. */
.grev-card {
  width: 100%;
  max-width: min(600px, 100%);
  background:
    var(--dt-surface) padding-box,
    conic-gradient(
      from var(--grev-angle),
      transparent 0%,
      transparent 70%,
      #fbbc04 78%,
      #ed4700 84%,
      #fbbc04 90%,
      transparent 96%,
      transparent 100%
    ) border-box;
  border: 2px solid transparent;
  border-radius: 16px;
  animation: grev-spin 3s linear infinite;
  padding: var(--dt-space-7) var(--dt-space-10);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--dt-space-4);
}
.grev-header {
  display: flex;
  align-items: center;
  gap: var(--dt-space-3);
}
.grev-platform {
  font-size: var(--dt-text-sm);
  color: var(--dt-text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
/* Stars */
@keyframes grev-star-pop {
  0%   { transform: scale(1);    filter: none; }
  35%  { transform: scale(1.38); filter: drop-shadow(0 0 12px #fbbc04) drop-shadow(0 0 24px rgba(251,188,4,0.55)); }
  65%  { transform: scale(0.93); filter: drop-shadow(0 0 6px rgba(251,188,4,0.35)); }
  100% { transform: scale(1);    filter: none; }
}
@keyframes grev-star-shine {
  to { background-position: 200% center; }
}
.grev-stars {
  display: flex;
  gap: 6px;
  align-items: center;
}
.grev-star {
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  position: relative;
  display: inline-block;
  line-height: 1;
  background: linear-gradient(90deg, #fbbc04 40%, rgba(255,255,255,0.95) 50%, #fbbc04 60%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.grev-card.is-visible .grev-star:nth-child(1) { animation: grev-star-pop 0.55s ease-out 0.20s both, grev-star-shine 2s ease-in-out 0.70s infinite alternate; }
.grev-card.is-visible .grev-star:nth-child(2) { animation: grev-star-pop 0.55s ease-out 0.50s both, grev-star-shine 2s ease-in-out 1.00s infinite alternate; }
.grev-card.is-visible .grev-star:nth-child(3) { animation: grev-star-pop 0.55s ease-out 0.80s both, grev-star-shine 2s ease-in-out 1.30s infinite alternate; }
.grev-card.is-visible .grev-star:nth-child(4) { animation: grev-star-pop 0.55s ease-out 1.10s both, grev-star-shine 2s ease-in-out 1.60s infinite alternate; }
.grev-card.is-visible .grev-star:nth-child(5) { animation: grev-star-pop 0.55s ease-out 1.40s both, grev-star-shine 2s ease-in-out 1.90s infinite alternate; }
/* Stats */
.grev-stats {
  display: flex;
  gap: var(--dt-space-8);
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.grev-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.grev-stat-sep {
  width: 1px;
  height: 32px;
  background: var(--dt-border);
  flex-shrink: 0;
}
.grev-num {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 800;
  color: var(--dt-text);
  line-height: 1;
}
.grev-label {
  font-size: var(--dt-text-xs);
  color: var(--dt-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
/* CTA */
.grev-cta {
  margin-top: var(--dt-space-4);
  margin-bottom: var(--dt-space-6);
  font-size: 1.05rem;
  padding: 0.9rem 2.4rem;
}
@media (max-width: 600px) {
  .grev-card { padding: var(--dt-space-6) var(--dt-space-5); }
  .grev-stat-sep { display: none; }
  .grev-stats { gap: var(--dt-space-5); }
  .grev-star { font-size: clamp(1.4rem, 9vw, 1.9rem); }
  .grev-stars { gap: 3px; }
}
@media (max-width: 360px) {
  .grev-card { padding: var(--dt-space-5) var(--dt-space-4); }
  .grev-star { font-size: clamp(1.2rem, 8vw, 1.6rem); }
}