#account_username_field input:focus {
  outline-offset: 2px;
}
.dnd-username-indicator {
  display: inline-flex;
  width: 18px;
  height: 18px;
  margin-left: 8px;
  vertical-align: middle;
}

.dnd-username-indicator.loading { background: none; }

.dnd-username-indicator.loading::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-top-color: #2271b1;
  border-radius: 50%;
  animation: dnd-spin 0.8s linear infinite;
}

.dnd-username-indicator.valid {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2327ae60"><path d="M9 16.2l-3.5-3.5-1.4 1.4L9 19 20.3 7.7l-1.4-1.4z"/></svg>') no-repeat center/18px 18px;
}

.dnd-username-indicator.invalid {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23e74c3c"><path d="M19 6.4L17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z"/></svg>') no-repeat center/18px 18px;
}

.dnd-username-indicator.valid::after,
.dnd-username-indicator.invalid::after { display: none; }

@keyframes dnd-spin {
  to { transform: rotate(360deg); }
}

.woocommerce-input-wrapper { position: relative; }
.woocommerce-input-wrapper .dnd-username-indicator {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

/* Field border colors by state */
#account_username_field.woocommerce-validated input {
  border-color: #27ae60 !important; /* green */
  box-shadow: 0 0 0 1px rgba(39,174,96,.25);
  outline-color: #27ae60;
}

#account_username_field.woocommerce-invalid input {
  border-color: #e74c3c !important; /* red */
  box-shadow: 0 0 0 1px rgba(231,76,60,.2);
  outline-color: #e74c3c;
}

#account_username_field.dnd-validating input {
  border-color: #2271b1 !important; /* blue (WP primary) */
  box-shadow: 0 0 0 1px rgba(34,113,177,.25);
  outline-color: #2271b1;
}