/* =============================================================================
   Atlas Backend — Waitlist Integration Styles
   Drop this in alongside waitlist.js. It only adds the states the static
   mockup form didn't need (inline errors, loading spinner, banner message)
   and reuses the CSS custom properties already defined on the landing
   page's :root (--accent, --hairline-strong, --text-secondary, etc.) rather
   than redefining the palette. If those variables aren't present, everything
   here still degrades to sensible fallback colors.
   ========================================================================= */

.field.has-error input,
.field.has-error select,
.field.has-error textarea,
.field.has-error .combobox-trigger {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.06);
}

.field-error {
  display: none;
  font-size: 12.5px;
  color: #f87171;
  margin-top: 2px;
}

.field.has-error .field-error {
  display: block;
}

@keyframes atlas-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

.field.has-error input,
.field.has-error select,
.field.has-error .combobox-trigger {
  animation: atlas-shake 0.4s ease;
}

.form-banner {
  display: none;
  align-items: flex-start;
  gap: 10px;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 18px;
}

.form-banner.show {
  display: flex;
}

.form-banner.error {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

.field.full { grid-column: 1 / -1; }

.field textarea {
  background: var(--bg, #06070A);
  border: 1px solid var(--hairline-strong, rgba(255,255,255,0.13));
  border-radius: 9px;
  padding: 12px 14px;
  color: var(--text-primary, #F5F5F7);
  font-family: var(--font-body, inherit);
  font-size: 14px;
  outline: none;
  resize: vertical;
  min-height: 84px;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.field textarea:focus {
  border-color: var(--accent, #4C6FFF);
  background: rgba(76,111,255,0.04);
}

/* Honeypot field: present in the DOM for bots to fill, invisible and
   unreachable for humans. display:none is intentionally avoided since some
   spam bots skip fields hidden that way — this uses an off-screen position
   instead, which is harder for simple scrapers to special-case. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Button loading state ---- */
.btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(6,7,10,0.25);
  border-top-color: #06070A;
  border-radius: 50%;
  animation: atlas-spin 0.7s linear infinite;
}

.btn-ghost.is-loading::after {
  border: 2px solid rgba(245,245,247,0.25);
  border-top-color: #F5F5F7;
}

@keyframes atlas-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .field.has-error input,
  .field.has-error select,
  .field.has-error .combobox-trigger {
    animation: none;
  }
  .btn.is-loading::after {
    animation-duration: 1.4s;
  }
}