/* ============================================
   GOOGLE REVIEWS BADGE — FULL NAME, FLOATING
   Paste into: Appearance > Customize > Additional CSS
   ============================================ */

/* Step 1: Hide the blurry original image */
a[href*="g.page"] img {
  display: none !important;
}

/* Step 2: Style as a floating pill — same glass effect as social icons,
   but wider to fit the full Google name */
a[href*="g.page"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 48px !important;
  padding: 0 16px !important;
  width: auto !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.20) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.40) !important;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.18),
    0 1px 4px rgba(0, 0, 0, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-decoration: none !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
}

/* Same hover lift as the social icons */
a[href*="g.page"]:hover {
  background: rgba(255, 255, 255, 0.35) !important;
  transform: translateY(-5px) scale(1.05) !important;
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.26),
    0 4px 8px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  border-color: rgba(255, 255, 255, 0.60) !important;
}

/* Step 3: Full "Google" wordmark in official brand colors (vector SVG — always sharp) */
a[href*="g.page"]::before {
  content: '' !important;
  display: block !important;
  width: 62px !important;
  height: 22px !important;
  flex-shrink: 0 !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 75 26'%3E%3Ctext font-family='Arial%2C sans-serif' font-weight='bold' font-size='22'%3E%3Ctspan x='0' y='22' fill='%234285F4'%3EG%3C%2Ftspan%3E%3Ctspan fill='%23EA4335'%3Eo%3C%2Ftspan%3E%3Ctspan fill='%23FBBC05'%3Eo%3C%2Ftspan%3E%3Ctspan fill='%234285F4'%3Eg%3C%2Ftspan%3E%3Ctspan fill='%2334A853'%3El%3C%2Ftspan%3E%3Ctspan fill='%23EA4335'%3Ee%3C%2Ftspan%3E%3C%2Ftext%3E%3C%2Fsvg%3E") !important;
}

/* Step 4: Gold stars sitting beside the Google name */
a[href*="g.page"]::after {
  content: "\2605\2605\2605\2605\2605" !important;
  font-size: 10px !important;
  color: #FBBC05 !important;
  letter-spacing: 1px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}