/* ============================================================
   ARTINO — waitlist form additions (name, consent, honeypot,
   Turnstile, error + loading states). Loaded after the base
   stylesheets so it can extend .signup / .signup-done.
   ============================================================ */

/* Two inputs (name + email) share the row; button drops below. */
#signupWrap .signup { flex-wrap: wrap; }

/* Role-specific field groups — only the active role's block shows. */
.role-fields { margin-top: 10px; }
.role-fields[hidden] { display: none; }
.role-fields .signup { margin-top: 0; }

/* Searchable dropdown (Indian states) */
.combo { position: relative; flex: 1; min-width: 0; }
.combo .combo-input {
  width: 100%; font-family: var(--body); font-size: 15px; color: var(--cream);
  background: rgba(12,10,8,0.7); border: 1px solid var(--gold-line); border-radius: 14px;
  padding: 15px 20px; outline: none; box-shadow: 0 0 30px -8px rgba(232,163,61,0.4) inset;
  transition: border-color 0.3s;
}
.combo .combo-input::placeholder { color: var(--grey); }
.combo .combo-input:focus { border-color: var(--tungsten); }
.combo .combo-input.err { border-color: #c0564a; }
.combo-list {
  list-style: none; margin: 6px 0 0; padding: 5px;
  position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
  max-height: 240px; overflow-y: auto;
  /* Warm elevated surface + amber glow so it reads as part of the theme,
     not a flat black box. Mirrors the inputs' warm tone. */
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--gold-line); border-radius: 8px;
  box-shadow: 0 20px 48px -14px rgba(0,0,0,0.7), 0 0 40px -12px rgba(232,163,61,0.28);
  /* themed (warm) scrollbar instead of the stark default */
  scrollbar-width: thin;
  scrollbar-color: rgba(201,162,39,0.5) transparent;
}
.combo-list::-webkit-scrollbar { width: 10px; }
.combo-list::-webkit-scrollbar-track { background: transparent; }
.combo-list::-webkit-scrollbar-thumb {
  background: rgba(201,162,39,0.45); border-radius: 10px;
  border: 2px solid transparent; background-clip: padding-box;
}
.combo-list::-webkit-scrollbar-thumb:hover {
  background: rgba(232,163,61,0.7); background-clip: padding-box;
}
.combo-list[hidden] { display: none; }
.combo-list li {
  padding: 10px 14px; border-radius: 5px; font-family: var(--body); font-size: 14px;
  color: var(--cream); cursor: pointer; text-align: left;
  transition: background 0.15s, color 0.15s;
}
.combo-list li.active,
.combo-list li:hover { background: rgba(232,163,61,0.14); color: var(--halo); }
.combo-list li.empty { color: var(--grey); cursor: default; background: none; }

/* Honeypot — visually and from-AT hidden, still submitted by bots. */
.hp-wrap {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Consent checkbox row */
.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 480px;
  margin: 16px auto 0;
  text-align: left;
  font-family: var(--body);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--grey);
  cursor: pointer;
}
.consent input[type="checkbox"] {
  flex: none;
  width: 16px; height: 16px;
  margin-top: 1px;
  accent-color: var(--tungsten);
  cursor: pointer;
}
.consent a { color: var(--halo); text-decoration: underline; }
.consent.err span { color: #e0796b; }

/* Turnstile widget spacing */
.turnstile-wrap {
  display: flex;
  justify-content: center;
  margin: 16px auto 0;
  min-height: 65px;          /* reserve space → no layout shift */
}

/* Submit row */
.signup-actions {
  max-width: 480px;
  margin: 16px auto 0;
}
.signup-actions .btn { width: 100%; }

/* Loading / disabled state */
.btn.is-loading {
  opacity: 0.65;
  pointer-events: none;
  position: relative;
}
.btn.is-loading::after {
  content: "";
  position: absolute;
  right: 16px; top: 50%;
  width: 14px; height: 14px;
  margin-top: -7px;
  border: 2px solid rgba(26,18,6,0.35);
  border-top-color: #1a1206;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* Inline error message */
.form-error {
  max-width: 480px;
  margin: 14px auto 0;
  font-family: var(--body);
  font-size: 13px;
  color: #e0796b;
}
.form-error[hidden] { display: none; }

/* On mobile the inputs already stack via the base .signup rule. */
@media (max-width: 560px) {
  .consent, .signup-actions, .turnstile-wrap, .form-error { max-width: 100%; }
}