/*
 * Krafty Phone Verification: account-page-only styles.
 * Some themes style generic .button elements as transparent/hidden until hover.
 * Scope every override to this feature so product and theme buttons are unaffected.
 */
[data-kpp-phone-verification] {
  margin-top: 1.25rem;
}

[data-kpp-phone-verification] .form-row {
  margin: 0 0 1rem;
}

[data-kpp-phone-verification] .kpp-phone-button,
[data-kpp-phone-verification] button[data-kpp-send-code],
[data-kpp-phone-verification] button[data-kpp-verify-code] {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: .72rem 1.1rem !important;
  border: 1px solid #e6604f !important;
  border-radius: 0 !important;
  background: #ff725e !important;
  background-image: none !important;
  color: #fff !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: .02em !important;
  text-decoration: none !important;
  text-shadow: none !important;
  text-transform: none !important;
  white-space: normal !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 2 !important;
  cursor: pointer !important;
  transition: background-color .16s ease, border-color .16s ease, opacity .16s ease !important;
}

[data-kpp-phone-verification] .kpp-phone-button:hover,
[data-kpp-phone-verification] .kpp-phone-button:focus,
[data-kpp-phone-verification] button[data-kpp-send-code]:hover,
[data-kpp-phone-verification] button[data-kpp-send-code]:focus,
[data-kpp-phone-verification] button[data-kpp-verify-code]:hover,
[data-kpp-phone-verification] button[data-kpp-verify-code]:focus {
  background: #e6604f !important;
  border-color: #c94e3f !important;
  color: #fff !important;
  outline: 2px solid rgba(255, 114, 94, .35) !important;
  outline-offset: 2px !important;
}

[data-kpp-phone-verification] .kpp-phone-button:disabled,
[data-kpp-phone-verification] button[data-kpp-send-code]:disabled,
[data-kpp-phone-verification] button[data-kpp-verify-code]:disabled {
  opacity: .62 !important;
  cursor: wait !important;
}

[data-kpp-phone-verification] .kpp-otp-panel {
  display: none;
  margin: 1rem 0 0;
}

[data-kpp-phone-verification] .kpp-otp-panel.is-visible {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

[data-kpp-phone-verification] .kpp-phone-code-row input {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 260px !important;
  min-height: 42px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

[data-kpp-phone-verification] .kpp-phone-verify-row {
  display: block !important;
  margin: .9rem 0 0 !important;
}

[data-kpp-phone-verification] .kpp-phone-message {
  display: block !important;
  min-height: 1.35em;
  margin-top: .9rem !important;
}

[data-kpp-phone-verification] .kpp-phone-error { color: #b32d2e !important; }
[data-kpp-phone-verification] .kpp-phone-success { color: #0a6b36 !important; }

/* Completion state: used after a verified phone so the customer can return
   without seeing a new "send code" flow. */
.kpp-phone-complete-message {
  margin: 1rem 0 !important;
}

[data-kpp-phone-verification] .kpp-phone-return-button {
  display: inline-flex !important;
}

.kpp-phone-change-link {
  margin-top: 1rem !important;
}