/* Public footer only. Local network marks retain their official colors. */
.site-footer .footer-payments {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  padding-block: 8px;
  border-top: 1px solid rgb(180 212 240 / 10%);
}
.footer-payment-assurance { display: flex; align-items: center; gap: 8px; min-width: 0; }
.footer-payment-assurance-text { color: #becfdd; font-size: 11px; font-weight: 450; line-height: 1.6; }
.footer-payment-assurance-text > span { padding-inline: 4px; color: #7595ab; }
.footer-payment-lock {
  display: inline-grid;
  place-items: center;
  position: relative;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  color: #8de8d3;
}
.footer-payment-lock::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #8de8d3;
  animation: footer-payment-breathe 7s ease-in-out infinite;
}
.site-footer .footer-payment-networks { display: flex; align-items: center; flex-wrap: nowrap; gap: 14px; margin: 0; padding: 0; list-style: none; }
.footer-payment-network {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  transition: opacity .2s ease;
}
/* This small neutral backing preserves the contrast of Visa's blue wordmark. */
.footer-payment-network--visa { width: 44px; padding-inline: 6px; border-radius: 4px; background: #edf3f8; }
.footer-payment-network img { display: block; max-width: 100%; max-height: 18px; object-fit: contain; }
@media (hover: hover) {
  .footer-payment-networks:hover .footer-payment-network { opacity: .7; }
  .footer-payment-networks .footer-payment-network:hover { opacity: 1; }
}
@keyframes footer-payment-breathe {
  0%, 30%, 80%, 100% { box-shadow: 0 0 0 0 rgb(141 232 211 / 0%); }
  50% { box-shadow: 0 0 0 3px rgb(141 232 211 / 10%); }
  65% { box-shadow: 0 0 0 5px rgb(141 232 211 / 0%); }
}
@media (max-width: 480px) {
  .site-footer .footer-payments { flex-wrap: wrap; gap: 10px 16px; }
  .footer-payment-assurance-text { font-size: 10px; }
  .site-footer .footer-payment-networks { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .footer-payment-lock::after { animation: none; }
  .footer-payment-network { transition: none; }
}