/* ============================
   FOOTER
   ============================ */
.gg-footer {
  border-top: 1px solid var(--line);
  background: var(--toolbar);
  color: var(--muted);
  text-align: center;
  padding: 18px 12px 26px;
  font-size: 0.9rem;
}

/* generic links (copyright etc.) */
.gg-footer a {
  color: var(--ink);
  text-decoration: none;
}

.gg-footer a:hover {
  text-decoration: underline;
}

/* ==================================
   SOCIAL ICON ROW (MATCH HTML: .gg-social)
   ================================== */
.gg-footer .gg-social {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin: 20px 0 10px;
}

/* icon “pill” */
.gg-footer .gg-social a {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card);
  border: 1px solid var(--line);
  text-decoration: none;
  transition: transform .2s ease,
              border-color .2s ease,
              box-shadow .2s ease;
}

/* icon image */
.gg-footer .gg-social img,
.gg-footer .gg-social svg {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

/* hover */
.gg-footer .gg-social a:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: 0 0 10px rgba(44, 211, 141, 0.4);
}

/* ================================
   FORCE WHITE ICON OVERLAY
   ================================ */
.gg-footer .gg-social img,
.gg-footer .gg-social svg {
  filter: brightness(0) invert(1) !important; /* turns any icon pure white */
  opacity: 1 !important;
}

/* Extra SVG fill fallback */
.gg-footer .gg-social svg path,
.gg-footer .gg-social svg circle,
.gg-footer .gg-social svg rect {
  fill: #ffffff !important;
  stroke: #ffffff !important;
}