/* Customer account chip: accurate linked/unlinked visual status.
 * CSS only. Authority = incumbent React-rendered data-linked attribute. */
button.customer-account-chip[data-linked] {
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
button.customer-account-chip[data-linked="false"] {
  background: rgba(255, 253, 248, .97);
  color: #285d80;
  border-color: rgba(147, 179, 200, .68);
}
button.customer-account-chip[data-linked="true"] {
  background: #edf8f1;
  color: #246b47;
  border-color: rgba(37, 136, 81, .53);
  box-shadow: 0 6px 19px rgba(34, 108, 67, .18);
}
button.customer-account-chip[data-linked]::after {
  box-sizing: border-box;
  position: absolute;
  right: -4px;
  bottom: -3px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  pointer-events: none;
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-weight: 800;
}
button.customer-account-chip[data-linked="false"]::after {
  content: "+";
  background: #fff;
  color: #285d80;
  border: 1px solid #86a8bd;
  font-size: 13px;
  line-height: 1;
}
button.customer-account-chip[data-linked="true"]::after {
  content: "✓";
  background: #248c52;
  color: #fff;
  border: 2px solid #fff;
  font-size: 10px;
  line-height: 1;
}
@media (prefers-reduced-motion: reduce) {
  button.customer-account-chip[data-linked] { transition: none; }
}