/* ─────────────────────────────────────────────────────────────────────
   Email Spell Checker CSS for WordPress Forminato
──────────────────────────────────────────────────────────────────── */

/* make parent wrapper relative */
.forminator-field {
  position: relative;
}

/* input field states (unchanged) */
.forminator-field input.email-spell-checker {
  transition: all 0.3s ease;
  position: relative;
}
.forminator-field input.email-spell-checker.email-error {
  border-color: #e74c3c !important;
  background-color: #fdf2f2 !important;
  box-shadow: 0 0 0 2px rgba(231,76,60,0.1) !important;
}
.forminator-field input.email-spell-checker.email-warning {
  border-color: #f39c12 !important;
  background-color: #fef9e7 !important;
  box-shadow: 0 0 0 2px rgba(243,156,18,0.1) !important;
}
.forminator-field input.email-spell-checker.email-success {
  border-color: #27ae60 !important;
  background-color: #f0f9f4 !important;
  box-shadow: 0 0 0 2px rgba(39,174,96,0.1) !important;
}

/* ─── Validation message box ──────────────────────────────────────── */
.email-validation-message {
  display: block;
  margin-top: 4px;               /* even vertical spacing */
  font-size: 12px !important;
  font-weight: 500;
  padding: 2px 6px !important;    /* tight padding */
  border: none !important;        /* remove border */
  border-radius: 4px !important;  /* consistent rounding */
  position: relative;
  z-index: 100;
  animation: slideIn 0.3s ease-out;
}

/* hide helper class */
.email-validation-message.hide {
  display: none !important;
}

/* error state */
.email-validation-message.error {
  background: #FDECEA;  /* very light red */
  color:      #C62828;  /* darker red  */
}

/* success state */
.email-validation-message.success {
  background: #E8FBE8;  /* very light green */
  color:      #2E7D32;  /* darker green */
}

/* warning/info (optional tweaks) */
.email-validation-message.warning {
  background: #FEF9E7;
  color:      #D68910;
}
.email-validation-message.info {
  background: #E8F4F8;
  color:      #2C3E50;
}

/* slide-in animation */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── “Use this” button ───────────────────────────────────────────── */
.email-suggestion-button {
  margin: 0 !important;           /* no extra gap */
  font-size: 12px !important;
  font-weight: 500;
  padding: 2px 6px !important;
  background: none !important;
  border: none !important;
  border-radius: 4px !important;
  text-decoration: underline;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.email-suggestion-button:hover {
  background-color: rgba(52,152,219,0.05);
  color:            #2980b9;
}

/* ─── Domain suggestions dropdown ─────────────────────────────────── */
.email-suggestions {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: #fff;
  border: none !important;        /* remove outer border */
  border-radius: 4px !important;  /* match message rounding */
  margin-top: 4px !important;     /* consistent spacing */
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  max-height: 200px;
  overflow-y: auto;
  display: none;
  z-index: 1000;
}

/* each suggestion item */
.email-domain-suggestion {
  padding: 8px 12px;              /* match tighter padding */
  cursor: pointer;
  border: none !important;        /* remove separators */
  font-size: 14px;
  color: #2c3e50;
  transition: background-color 0.2s, color 0.2s;
}

/* hover + highlighted states */
.email-domain-suggestion:hover,
.email-domain-suggestion.highlighted {
  background-color: #E3F2FD;
  color:            #1976d2;
}

/* ─── Responsive & Dark Mode ──────────────────────────────────────── */
@media (max-width: 768px) {
  .email-suggestions .email-domain-suggestion {
    padding: 10px 12px;
    font-size: 16px;
  }
}
@media (prefers-color-scheme: dark) {
  .email-suggestions {
    background: #2c3e50;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  }
  .email-domain-suggestion {
    color: #ecf0f1;
  }
  .email-domain-suggestion:hover,
  .email-domain-suggestion.highlighted {
    background: #2980b9;
    color:      #fff;
  }
}

/* optional loading spinner state */
@keyframes spin { to { transform: rotate(360deg); } }
.forminator-field input.email-spell-checker.validating {
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>');
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  animation: spin 1s linear infinite;
}