.mco-email-verification {
  box-sizing: border-box;
  margin: 0 0 24px;
  padding: 24px;
  border: 1px solid #f0d5da;
  border-radius: 12px;
  background: #fff9fa;
  color: #334155;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.mco-email-verification [hidden],
.mco-email-verification[hidden] {
  display: none !important;
}

.mco-verification-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.mco-verification-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  height: 42px;
  border-radius: 12px;
  background: #fce7eb;
  color: #a61b2b;
  font-size: 24px;
  line-height: 1;
}

.mco-email-verification .mco-verification-title {
  margin: 0;
  color: #80121f;
  font: inherit;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}

.mco-email-verification .mco-verification-message {
  margin: 0;
}

.mco-email-verification .mco-verification-hint {
  margin: 16px 0;
  color: #64748b;
  font-size: 13px;
}

.mco-email-verification .mco-verification-field {
  display: block;
  margin-bottom: 12px;
  color: #334155;
  font-size: 13px;
  font-weight: 600;
}

.mco-email-verification .mco-verification-email,
.mco-email-verification .mco-verification-otp {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  margin: 6px 0 0;
  padding: 12px 14px;
  border: 1px solid #dce1e8;
  border-radius: 8px;
  background: #fff;
  color: #1e293b;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
}

.mco-email-verification .mco-resend-verification,
.mco-email-verification .mco-confirm-verification,
.mco-email-verification .mco-verification-success-login {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid #a61b2b;
  border-radius: 8px;
  background: #a61b2b;
  color: #fff;
  font: inherit;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease;
}

.mco-email-verification .mco-resend-verification:hover,
.mco-email-verification .mco-confirm-verification:hover,
.mco-email-verification .mco-verification-success-login:hover {
  border-color: #80121f;
  background: #80121f;
}

.mco-email-verification .mco-resend-verification:disabled,
.mco-email-verification .mco-confirm-verification:disabled {
  opacity: .6;
  cursor: wait;
}

.mco-email-verification .mco-verification-email:focus-visible,
.mco-email-verification .mco-verification-otp:focus-visible,
.mco-email-verification .mco-confirm-verification:focus-visible,
.mco-email-verification .mco-resend-verification:focus-visible,
.mco-email-verification a:focus-visible {
  outline: 3px solid #e9a9b3;
  outline-offset: 3px;
}

.mco-email-verification .mco-verification-login,
.mco-email-verification .mco-verification-register {
  display: block;
  margin-top: 16px;
  color: #a61b2b;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.mco-email-verification a:hover {
  text-decoration: underline;
}

.mco-email-verification[data-state="verified"],
.mco-email-verification[data-state="already_verified"] {
  border-color: #bbdfcc;
  background: #f0fdf4;
}

.mco-email-verification[data-state="verified"] .mco-verification-title,
.mco-email-verification[data-state="already_verified"] .mco-verification-title {
  color: #166534;
}

.mco-email-verification[data-state="verified"] .mco-verification-icon,
.mco-email-verification[data-state="already_verified"] .mco-verification-icon {
  background: #dcfce7;
  color: #166534;
}

/* The native login card becomes the confirmation step after email signup. */
.tutor-login-form-wrapper:has(> .mco-email-verification[data-state="verified"]) > .tutor-h3,
.tutor-login-form-wrapper:has(> .mco-email-verification[data-state="verified"]) > .tutor-fs-4,
.tutor-login-form-wrapper:has(> .mco-email-verification[data-state="verified"]) > #tutor-login-form,
.tutor-login-form-wrapper:has(> .mco-email-verification[data-state="verified"]) > .mco-google-auth,
.tutor-login-form-wrapper:has(> .mco-email-verification[data-awaiting="true"]) > .tutor-h3,
.tutor-login-form-wrapper:has(> .mco-email-verification[data-awaiting="true"]) > .tutor-fs-4,
.tutor-login-form-wrapper:has(> .mco-email-verification[data-awaiting="true"]) > #tutor-login-form,
.tutor-login-form-wrapper:has(> .mco-email-verification[data-awaiting="true"]) > .mco-google-auth {
  display: none;
}

.tutor-login-form-wrapper > .mco-email-verification[data-awaiting="true"] {
  margin-bottom: 0;
}

.mco-email-verification .mco-verification-otp {
  font-size: 24px;
  letter-spacing: 5px;
  text-align: center;
}

.mco-email-verification .mco-resend-verification {
  margin-top: 12px;
  background: #fff;
  color: #a61b2b;
}

.mco-email-verification .mco-resend-verification:hover {
  background: #fce7eb;
}

.mco-email-verification .mco-verification-success-login {
  margin-top: 20px;
}

/* Document signup uses the same OTP step inside its existing modal. */
.mco-modal-dialog:has(> .mco-email-verification[data-awaiting="true"]) > .mco-auth-pane,
.mco-modal-dialog:has(> .mco-email-verification[data-state="verified"]) > .mco-auth-pane {
  display: none !important;
}

.spm-auth-pane:has(> .mco-email-verification[data-awaiting="true"]) > :not(.mco-email-verification),
.spm-auth-pane:has(> .mco-email-verification[data-state="verified"]) > :not(.mco-email-verification) {
  display: none !important;
}

@media (max-width: 480px) {
  .mco-email-verification {
    padding: 18px;
  }
  .mco-email-verification .mco-verification-title {
    font-size: 18px;
  }
  .mco-verification-heading {
    align-items: flex-start;
    gap: 10px;
  }
  .mco-verification-icon {
    flex-basis: 36px;
    height: 36px;
    font-size: 22px;
  }
}