/* ═══════════════════════════════════════════════════════
   RECENSIONI GOOGLE – widget dinamico
   Estende i token di assets/css/style.css (--navy, --card, --teal…)
   ═══════════════════════════════════════════════════════ */

.gr-widget { --gr-gold: #fbbc05; }

/* ── RIEPILOGO / BADGE ── */
.gr-summary {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 3px; padding: 20px 26px; margin-bottom: 26px;
}
.gr-glogo { width: 30px; height: 30px; flex-shrink: 0; }
.gr-summary-info { display: flex; align-items: center; gap: 14px; }
.gr-score {
  font-family: 'Cormorant Garamond', serif; font-size: 2.6rem;
  font-weight: 700; line-height: 1; color: #fff;
}
.gr-count { display: block; font-size: .78rem; color: var(--grey); margin-top: 4px; }
.gr-write {
  margin-left: auto; font-size: .76rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  border: 1.5px solid var(--teal); color: var(--teal);
  padding: 9px 20px; border-radius: 2px; transition: all .25s;
}
.gr-write:hover { background: var(--teal); color: var(--navy); }

/* ── STELLE (supportano i decimali: 4,8) ── */
.gr-stars {
  position: relative; display: inline-block; line-height: 1;
  font-size: 1rem; letter-spacing: 2px; white-space: nowrap;
}
.gr-stars-bg   { color: rgba(255,255,255,.2); }
.gr-stars-fill { position: absolute; inset: 0; overflow: hidden; color: var(--gr-gold); }

/* ── CARD ── */
.reviews-grid .review-card { position: relative; }
.review-card > .gr-stars { margin-bottom: 12px; }
.review-card .review-text { white-space: pre-line; }
.review-avatar { position: relative; overflow: hidden; }
.review-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gr-date { display: block; font-size: .74rem; color: var(--grey); margin-top: 2px; }
a.review-name:hover { color: var(--teal); }

.gr-more-link {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-style: normal; font-weight: 600;
  color: var(--teal); text-decoration: underline;
}
.gr-more-link:hover { color: var(--teal-l); }

/* ── AZIONI ── */
.gr-actions { text-align: center; margin-top: 28px; }
.gr-error {
  text-align: center; color: var(--grey); font-size: .85rem;
  margin-top: 18px;
}

/* ── SKELETON (mostrato prima del fetch) ── */
.gr-skel { pointer-events: none; }
.gr-skel-line {
  height: 10px; border-radius: 2px; margin-bottom: 10px;
  background: linear-gradient(90deg, rgba(255,255,255,.07) 25%, rgba(255,255,255,.14) 37%, rgba(255,255,255,.07) 63%);
  background-size: 400% 100%; animation: gr-shimmer 1.4s ease infinite;
}
.gr-skel-line.w60 { width: 60%; }
.gr-skel-line.w40 { width: 40%; margin-bottom: 22px; }
.gr-skel-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.gr-skel-dot {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,.09);
}
@keyframes gr-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .gr-skel-line { animation: none; } }

/* ── RESPONSIVE ── */
@media (max-width: 700px) {
  .gr-summary { gap: 14px; padding: 18px; }
  .gr-write { margin-left: 0; width: 100%; text-align: center; }
  .gr-score { font-size: 2.1rem; }
}