/* Shared waitlist form styles — used by WaitlistInline.astro AND by
   raw HTML forms embedded in blog post markdown. Kept here (not in
   the .astro component) so the CSS loads on every page regardless of
   whether the component is rendered. */

.waitlist-inline {
  margin: 28px 0;
  padding: 22px 24px;
  background: linear-gradient(135deg, rgba(77, 159, 255, 0.06), rgba(77, 159, 255, 0.02));
  border: 1px solid rgba(77, 159, 255, 0.25);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.waitlist-copy strong {
  display: block;
  color: #fafafa;
  font-size: 1rem;
  margin-bottom: 4px;
}

.waitlist-copy span {
  display: block;
  color: #a1a1aa;
  font-size: 0.9rem;
  line-height: 1.5;
}

.waitlist-fields {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.waitlist-fields input[type="email"] {
  flex: 1 1 220px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border, #333);
  color: #fafafa;
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
}

.waitlist-fields input[type="email"]:focus {
  outline: none;
  border-color: #4d9fff;
  background: rgba(0, 0, 0, 0.5);
}

.waitlist-fields button {
  flex-shrink: 0;
  padding: 10px 20px;
  background: linear-gradient(135deg, #4d9fff, #2f7dd4);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.waitlist-fields button:hover {
  transform: translateY(-1px);
}

.waitlist-status {
  margin: 0;
  font-size: 0.9rem;
  color: #4d9fff;
  font-weight: 500;
}

.waitlist-status[data-state="error"] { color: #ff6b6b; }
.waitlist-status[data-state="success"] { color: #36d480; }

.waitlist-inline[data-submitted="true"] .waitlist-fields,
.waitlist-inline[data-submitted="true"] .waitlist-copy {
  opacity: 0.5;
  pointer-events: none;
}