.homepro-join {
  max-width: 560px;
  width: 100%;
}

.homepro-join__form {
  display: grid;
  gap: 16px;
}

.homepro-join__field {
  display: grid;
  gap: 8px;
  position: relative;
}

.homepro-join__field input,
.homepro-join__field button {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.homepro-join__field button {
  background: var(--homepro-join-button-color, #214A9E);
  border-color: var(--homepro-join-button-color, #214A9E);
  color: var(--homepro-join-button-text-color, #FFFFFF);
  cursor: pointer;
}

.homepro-join__field button:hover,
.homepro-join__field button:focus {
  background: var(--homepro-join-button-hover-color, #2B5BC0);
  border-color: var(--homepro-join-button-hover-color, #2B5BC0);
}

.elementor-editor-active .homepro-join__form,
.elementor-element-edit-mode .homepro-join__form {
  gap: 16px;
}

.elementor-editor-active .homepro-join__field,
.elementor-element-edit-mode .homepro-join__field {
  gap: 8px;
}

.homepro-join__suggestions {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid #ddd;
  max-height: 220px;
  overflow: auto;
}

.homepro-join__suggestions:empty {
  display: none;
}

.homepro-join__suggestions li {
  padding: 8px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

.homepro-join__suggestions li:hover {
  background: #f5f5f5;
}

.homepro-join__message--error {
  color: #b00020;
}

.homepro-join__message--success {
  color: #0a7d30;
}