/* Veiera branded auth screens — deliberately framework-free (no Tailwind/
   build step) so this works the moment the plugin activates, matching the
   plain-CSS approach used elsewhere in the ecosystem's email templates. */

.vvm-auth {
  --vvm-accent: #1060DD;
  --vvm-accent-hover: #0B4DB8;
  --vvm-text: #1D1D1F;
  --vvm-text-soft: #6E6E73;
  --vvm-border: #E5E5EA;
  --vvm-danger: #D64545;
  --vvm-danger-soft: rgba(214,69,69,0.08);
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--vvm-text);
}

.vvm-auth__card {
  width: 100%;
  max-width: 400px;
  background: #fff;
  border: 1px solid var(--vvm-border);
  border-radius: 16px;
  padding: 40px 36px;
  box-shadow: 0 2px 24px rgba(0,0,0,0.04);
}

.vvm-auth__card--center { text-align: center; }

.vvm-auth__icon { font-size: 40px; margin-bottom: 8px; }

.vvm-auth__title { font-size: 22px; font-weight: 650; margin: 0 0 8px; }
.vvm-auth__sub { font-size: 14.5px; color: var(--vvm-text-soft); margin: 0 0 24px; line-height: 1.5; }

.vvm-auth__form { display: flex; flex-direction: column; gap: 16px; }

.vvm-field { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 600; }
.vvm-field input, .vvm-field select, .vvm-field textarea {
  font-size: 15px; font-weight: 400; padding: 11px 14px;
  border: 1px solid var(--vvm-border); border-radius: 9px; outline: none;
  transition: border-color .15s ease; font-family: inherit; background: #fff;
}
.vvm-field textarea { resize: vertical; }
.vvm-field input:focus, .vvm-field select:focus, .vvm-field textarea:focus { border-color: var(--vvm-accent); box-shadow: 0 0 0 3px rgba(16,96,221,0.12); }

.vvm-slug-input { display: flex; align-items: stretch; }
.vvm-slug-input input {
  border-radius: 9px 0 0 9px; border-right: none; flex: 1; min-width: 0;
}
.vvm-slug-input__suffix {
  display: flex; align-items: center; padding: 0 14px; font-size: 14px;
  color: var(--vvm-text-soft); background: #FAFAFA;
  border: 1px solid var(--vvm-border); border-left: none; border-radius: 0 9px 9px 0;
}
.vvm-slug-status { min-height: 16px; font-size: 12.5px; }
.vvm-slug-status[data-state="ok"] { color: #1E8E5A; }
.vvm-slug-status[data-state="taken"] { color: var(--vvm-danger); }

.vvm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600; padding: 12px 20px; border-radius: 9px;
  border: none; cursor: pointer; text-decoration: none; transition: background .15s ease;
}
.vvm-btn--block { width: 100%; }
.vvm-btn--primary { background: var(--vvm-accent); color: #fff; }
.vvm-btn--primary:hover { background: var(--vvm-accent-hover); }
.vvm-btn--secondary { background: #F2F2F4; color: var(--vvm-text); }
.vvm-btn--secondary:hover { background: #E9E9EC; }

.vvm-auth__switch { margin: 24px 0 0; text-align: center; font-size: 14px; color: var(--vvm-text-soft); }
.vvm-auth__switch a { color: var(--vvm-accent); font-weight: 600; text-decoration: none; }

.vvm-auth__error {
  background: var(--vvm-danger-soft); color: var(--vvm-danger);
  font-size: 13.5px; padding: 10px 14px; border-radius: 8px; margin-bottom: 18px;
}

/* Honeypot — off-screen rather than display:none/visibility:hidden, since
   some spam bots specifically skip fields hidden that way. Real users
   never see or reach this (tabindex="-1" keeps it out of tab order). */
.vvm-hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}