/* ==========================================================================
   "This email is already registered" message.

   Injected by ajaxemail.asp into the checkout and the new account pages when
   the address typed already belongs to a real account. Those two pages load
   different stylesheets and this block arrives after render, so the rules are
   self-contained rather than built on the .c2 design tokens. #de256f is the
   brand pink, matching --c2-pink in cart2.css.
   ========================================================================== */

.eml-exists {
  background: #fdf1f6;
  border: 1px solid #f6cede;
  border-radius: 10px;
  color: #de256f;
  font-size: 13.5px;
  line-height: 1.5;
  margin: 8px 0 4px;
  padding: 12px 14px;
  text-align: left;
}

.eml-exists__head {
  align-items: baseline;
  display: flex;
  gap: 8px;
}

.eml-exists__head i {
  flex: 0 0 auto;
}

.eml-exists__mail {
  overflow-wrap: anywhere;
}

.eml-exists__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 10px;
}

/* Logging in is the outcome we want, so it is the only filled control here */
.eml-exists__btn {
  align-items: center;
  background: #de256f;
  border-radius: 8px;
  color: #fff !important;
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  gap: 7px;
  padding: 9px 16px;
  text-decoration: none;
  transition: background 0.15s ease;
}

.eml-exists__btn:hover,
.eml-exists__btn:focus {
  background: #b81c58;
  color: #fff !important;
  text-decoration: none;
}

.eml-exists__link {
  align-self: center;
  color: #de256f !important;
  font-size: 13px;
  text-decoration: underline;
}

.eml-exists__link:hover,
.eml-exists__link:focus {
  color: #b81c58 !important;
}