/* CTG PANEL — Google Reviews display section (compact). Display only. Every selector is scoped to .gr-section. */
.gr-section{--gr-star:13px;position:relative;width:100%;max-width:560px;margin:0 auto;padding:4px 14px 0;background:transparent;border:0;box-shadow:none;color:#111827;text-align:left;box-sizing:border-box}
.gr-section *{box-sizing:border-box}
.gr-row{display:flex;align-items:center;gap:10px;min-width:0}
.gr-logo{position:relative;flex:0 0 auto;width:54px;height:54px;display:grid;place-items:center}
.gr-logo svg{position:relative;z-index:1;width:32px;height:32px;overflow:visible}
.gr-glow{position:absolute;inset:-6px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.26) 0%,rgba(236,72,153,.1) 45%,transparent 70%);pointer-events:none}
.gr-logo::after{content:"";position:absolute;inset:4px;border-radius:50%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.9) 50%,transparent 60%);background-size:260% 100%;background-position:130% 0;pointer-events:none;z-index:2}
.gr-copy{flex:1 1 auto;min-width:0}
.gr-title-line{display:flex;align-items:center;gap:5px}
.gr-title{margin:0;font-size:15px;font-weight:700;line-height:1.15;color:inherit}
.gr-verified{width:13px;height:13px;flex:0 0 auto}
.gr-stat{display:flex;align-items:center;flex-wrap:wrap;gap:2px 6px;margin-top:1px}
.gr-stars{display:flex;gap:2px}
.gr-star{position:relative;display:block;width:var(--gr-star);height:var(--gr-star)}
.gr-star>svg{display:block;width:100%;height:100%}
.gr-star-bg{fill:#d1d5db}
.gr-star-fill{position:absolute;left:0;top:0;height:100%;overflow:hidden}
.gr-star-fill>svg{width:var(--gr-star);height:var(--gr-star);display:block}
.gr-star-fill path{fill:#fbbc05}
.gr-meta{display:flex;align-items:baseline;gap:4px;font-size:13px;white-space:nowrap}
.gr-rating{font-size:13px;font-weight:700}
.gr-count{color:#6b7280;font-size:12px}
.gr-desc{margin:1px 0 0;color:#6b7280;font-size:12px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gr-avatars{display:flex;align-items:center;margin-top:4px;flex-wrap:wrap}
.gr-av{width:28px;height:28px;flex:0 0 auto;border-radius:50%;overflow:hidden;border:2px solid #fff;margin-left:-7px;background:#e5e7eb;display:inline-block;padding:0}
.gr-av img{display:block;width:100%;height:100%;object-fit:cover}
.gr-av:first-child{margin-left:0}
.gr-av-plus{margin-left:-7px;height:28px;padding:0 9px;border-radius:999px;display:inline-grid;place-items:center;background:#ede9fe;color:#6d28d9;font-weight:700;font-size:12px}

/* Animations: only when enabled in admin (classes on .gr-section control them). */
.gr-section:not(.gr-no-logo) .gr-logo{animation:gr-logo-in .9s cubic-bezier(.2,.8,.2,1) both}
.gr-section:not(.gr-no-logo) .gr-logo::after{animation:gr-shine 4.5s ease-in-out 1.2s infinite}
.gr-section:not(.gr-no-glow) .gr-glow{animation:gr-pulse 2.6s ease-in-out infinite}
.gr-section.gr-no-glow .gr-glow{display:none}
.gr-section:not(.gr-no-star-anim) .gr-star{opacity:0;transform:scale(.4);animation:gr-star-loop 3.6s ease-in-out infinite;animation-delay:calc(var(--i) * .22s)}
.gr-section:not(.gr-no-star-anim) .gr-meta,
.gr-section:not(.gr-no-star-anim) .gr-desc,
.gr-section:not(.gr-no-star-anim) .gr-avatars{opacity:0;animation:gr-fade .5s ease-out 1.5s forwards}

@keyframes gr-logo-in{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}
@keyframes gr-pulse{0%,100%{opacity:.55;transform:scale(.96)}50%{opacity:1;transform:scale(1.06)}}
@keyframes gr-shine{0%{background-position:130% 0}55%,100%{background-position:-30% 0}}
@keyframes gr-star-loop{
  0%{opacity:0;transform:scale(.4);filter:drop-shadow(0 0 0 rgba(251,188,5,0))}
  12%{opacity:1;transform:scale(1.18);filter:drop-shadow(0 0 5px rgba(251,188,5,.75))}
  18%{opacity:1;transform:scale(1);filter:drop-shadow(0 0 0 rgba(251,188,5,0))}
  78%{opacity:1;transform:scale(1);filter:drop-shadow(0 0 0 rgba(251,188,5,0))}
  90%,100%{opacity:0;transform:scale(.4);filter:drop-shadow(0 0 0 rgba(251,188,5,0))}
}
@keyframes gr-fade{to{opacity:1}}

/* When the section is shown, centre the existing "#1 SMM Panel" badge under it. */
.gr-section ~ .hero-grid .hero-pill{display:flex;width:max-content;max-width:100%;margin:12px auto 0;justify-content:center}

/* Dark mode (body.menu-dark is set by the theme switcher). */
.menu-dark .gr-section{color:#f3f4f6}
.menu-dark .gr-star-bg{fill:#4b5563}
.menu-dark .gr-count,.menu-dark .gr-desc{color:#9ca3af}
.menu-dark .gr-av-plus{background:#2e1065;color:#ddd6fe}

/* Reduced motion: show everything at once, no movement. */
@media (prefers-reduced-motion: reduce){
  .gr-section *,.gr-section::before,.gr-section::after{animation:none!important;transition:none!important}
  .gr-section .gr-star{opacity:1;transform:none}
  .gr-section .gr-meta,.gr-section .gr-desc,.gr-section .gr-avatars{opacity:1}
}

/* Small phones: slightly smaller still, so the section never takes much height. */
@media (max-width:380px){
  .gr-section{padding:3px 10px 0}
  .gr-logo{width:46px;height:46px}
  .gr-logo svg{width:28px;height:28px}
  .gr-title{font-size:14px}
  .gr-section{--gr-star:12px}
  .gr-av{width:26px;height:26px}
  .gr-av-plus{height:26px;font-size:11px}
}