/* ============================================================================
 * Beeasy waitlist form — shared styles for index.html and beeasy-lp.html.
 *
 * Self-contained: every visual token is defined inside .waitlist-form so the
 * component renders identically across both pages regardless of host theme.
 * Aesthetic matches beeasy-lp.html (warm honeycomb / dark) with character —
 * subtle hex texture, numbered steps, golden hairlines, field icons.
 * ============================================================================ */

.waitlist-form {
  --wf-bg-base:        #15120c;
  --wf-bg-soft:        #1a1611;
  --wf-bg-input:       rgba(255, 250, 240, 0.035);
  --wf-bg-input-hover: rgba(255, 250, 240, 0.06);
  --wf-bg-input-focus: rgba(255, 250, 240, 0.09);
  --wf-line:           rgba(245, 239, 227, 0.10);
  --wf-line-strong:    rgba(245, 239, 227, 0.20);
  --wf-line-focus:     #f5b700;
  --wf-ink:            #f5efe3;
  --wf-ink-dim:        #a8a095;
  --wf-ink-mute:       #6b6459;
  --wf-honey:          #f5b700;
  --wf-honey-deep:     #d99900;
  --wf-honey-soft:     #fde68a;
  --wf-error:          #ff7575;
  --wf-success:        #5fd0a0;
  --wf-radius:         16px;
  --wf-radius-sm:      10px;
  --wf-shadow:         0 30px 80px -20px rgba(0, 0, 0, 0.7),
                       0 8px 24px -8px rgba(0, 0, 0, 0.5);
  --wf-font-sans:      'Inter Tight', 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --wf-font-serif:     'Fraunces', Georgia, serif;
  --wf-font-mono:      'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
  padding: 40px 36px 32px;
  font-family: var(--wf-font-sans);
  color: var(--wf-ink);
  text-align: left;

  /* Layered background: top gold glow → base gradient → honeycomb texture */
  background:
    radial-gradient(120% 90% at 100% -10%, rgba(245, 183, 0, 0.13), transparent 55%),
    radial-gradient(80%  60% at 0% 110%,   rgba(245, 183, 0, 0.06), transparent 60%),
    linear-gradient(180deg, #2a2318 0%, #1e1812 100%);

  border: 1px solid var(--wf-line);
  border-radius: var(--wf-radius);
  box-shadow: var(--wf-shadow);
  position: relative;
  isolation: isolate;
  counter-reset: wf-step;
}

/* Subtle honeycomb texture, layered on top of the gradient. */
.waitlist-form::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64' fill='none' stroke='%23f5b700' stroke-opacity='0.05' stroke-width='1'><path d='M14 0L0 8v16l14 8 14-8V8zM42 0L28 8v16l14 8 14-8V8zM14 32L0 40v16l14 8 14-8V40zM42 32L28 40v16l14 8 14-8V40z'/></svg>");
  background-size: 56px 64px;
  opacity: 0.55;
  mix-blend-mode: screen;
  mask-image: linear-gradient(180deg, #000 0%, transparent 60%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Golden gradient border + soft top highlight. */
.waitlist-form::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg,
    rgba(245, 183, 0, 0.55) 0%,
    rgba(245, 183, 0, 0.10) 30%,
    transparent 60%,
    rgba(245, 183, 0, 0.18) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* All children sit above the bg layers. */
.waitlist-form > * { position: relative; z-index: 2; }

/* ============ HEADER ============ */
.waitlist-form-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  margin-bottom: 6px;
}

.waitlist-form-eyebrow {
  font-family: var(--wf-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wf-honey);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.waitlist-form-eyebrow::before,
.waitlist-form-eyebrow::after {
  content: '';
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--wf-honey));
}

.waitlist-form-eyebrow::after {
  background: linear-gradient(90deg, var(--wf-honey), transparent);
}

.waitlist-form-title {
  font-family: var(--wf-font-serif);
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--wf-ink);
  margin: 0;
}

.waitlist-form-subtitle {
  font-size: 14.5px;
  color: var(--wf-ink-dim);
  margin: 0;
  line-height: 1.55;
  max-width: 42ch;
}

/* ============ FIELDS ============ */
.waitlist-form-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  counter-increment: wf-step;
}

.waitlist-form-row label {
  font-size: 13px;
  font-weight: 500;
  color: var(--wf-ink);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  letter-spacing: 0.005em;
}

.waitlist-form-row label::before {
  content: counter(wf-step, decimal-leading-zero);
  font-family: var(--wf-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--wf-honey);
  letter-spacing: 0.12em;
  background: rgba(245, 183, 0, 0.10);
  border: 1px solid rgba(245, 183, 0, 0.25);
  border-radius: 4px;
  padding: 2px 6px;
  line-height: 1;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.waitlist-form-row:focus-within label::before {
  background: rgba(245, 183, 0, 0.20);
  border-color: rgba(245, 183, 0, 0.55);
  box-shadow: 0 0 12px -2px rgba(245, 183, 0, 0.55);
}

.waitlist-form-row label .req {
  color: var(--wf-honey);
  font-weight: 700;
  margin-left: -4px;
}

.waitlist-form-row label .opt {
  font-family: var(--wf-font-mono);
  color: var(--wf-ink-mute);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(245, 239, 227, 0.05);
  border: 1px solid rgba(245, 239, 227, 0.10);
  border-radius: 4px;
  padding: 2px 7px;
  line-height: 1;
}

.waitlist-form-row input,
.waitlist-form-row textarea {
  font-family: inherit;
  font-size: 15px;
  color: var(--wf-ink);
  background-color: var(--wf-bg-input);
  background-repeat: no-repeat;
  border: 1px solid var(--wf-line);
  border-radius: var(--wf-radius-sm);
  padding: 14px 16px 14px 46px;
  width: 100%;
  outline: none;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.waitlist-form-row textarea {
  min-height: 96px;
  line-height: 1.5;
  padding: 14px 16px 14px 46px;
  background-position: 16px 14px;
  resize: vertical;
}

.waitlist-form-row input::placeholder,
.waitlist-form-row textarea::placeholder {
  color: var(--wf-ink-mute);
}

/* ============ NAME ROW (first + last side by side) ============ */
.waitlist-form-name-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  /* Each child .waitlist-form-row should NOT increment the counter twice */
}
/* Treat both name fields as a single numbered step */
.waitlist-form-name-row .waitlist-form-row:first-child {
  counter-increment: wf-step;
}
.waitlist-form-name-row .waitlist-form-row:last-child {
  counter-increment: none;
}
.waitlist-form-name-row .waitlist-form-row:last-child label::before {
  display: none;
}
@media (max-width: 520px) {
  .waitlist-form-name-row { grid-template-columns: 1fr; gap: 0; }
}

/* Field icons via background-image (no HTML changes). */
.waitlist-form-row input[name="first_name"],
.waitlist-form-row input[name="last_name"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8a095' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8'/></svg>");
  background-position: 14px 50%;
  background-size: 18px 18px;
}

.waitlist-form-row input[name="email"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8a095' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><path d='M3 7l9 6 9-6'/></svg>");
  background-position: 14px 50%;
  background-size: 18px 18px;
}

.waitlist-form-row input[name="social_handle"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8a095' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4'/><path d='M16 12v1.5a2.5 2.5 0 0 0 5 0V12a9 9 0 1 0-3.5 7.1'/></svg>");
  background-position: 14px 50%;
  background-size: 18px 18px;
}

.waitlist-form-row textarea[name="pain_point"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8a095' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M21 11.5a8.38 8.38 0 0 1-8.5 8.5 8.5 8.5 0 0 1-3.7-.85L3 21l1.85-5.8A8.5 8.5 0 1 1 21 11.5z'/></svg>");
  background-size: 18px 18px;
}

.waitlist-form-row input:hover,
.waitlist-form-row textarea:hover {
  background-color: var(--wf-bg-input-hover);
  border-color: var(--wf-line-strong);
}

.waitlist-form-row input:focus,
.waitlist-form-row textarea:focus {
  background-color: var(--wf-bg-input-focus);
  border-color: var(--wf-line-focus);
  box-shadow:
    0 0 0 3px rgba(245, 183, 0, 0.20),
    0 0 24px -6px rgba(245, 183, 0, 0.35);
}

.waitlist-form-row.has-error input,
.waitlist-form-row.has-error textarea {
  border-color: var(--wf-error);
  box-shadow: 0 0 0 3px rgba(255, 117, 117, 0.18);
}

.waitlist-form-row .field-error {
  font-size: 12px;
  color: var(--wf-error);
  margin: 0;
  min-height: 1em;
  letter-spacing: 0.01em;
}

/* ============ TURNSTILE ============ */
.waitlist-form-turnstile { min-height: 0; }
.waitlist-form-turnstile:not(:empty) { margin-top: 4px; }

/* ============ SUBMIT ============ */
.waitlist-form-submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 18px 24px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #1c1505;
  background: linear-gradient(135deg, var(--wf-honey-deep) 0%, var(--wf-honey) 50%, var(--wf-honey-soft) 100%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  border: 0;
  border-radius: var(--wf-radius-sm);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.25s ease, background-position 0.5s ease;
  box-shadow:
    0 10px 28px -6px rgba(245, 183, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  margin-top: 6px;
}

/* Sheen sweep on hover. */
.waitlist-form-submit::before {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
  pointer-events: none;
}

.waitlist-form-submit:hover:not(:disabled) {
  transform: translateY(-1px);
  background-position: 100% 50%;
  box-shadow:
    0 14px 36px -8px rgba(245, 183, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.waitlist-form-submit:hover:not(:disabled)::before {
  left: 130%;
}

.waitlist-form-submit:active:not(:disabled) {
  transform: translateY(0);
  box-shadow:
    0 6px 16px -4px rgba(245, 183, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.waitlist-form-submit:focus-visible {
  outline: 3px solid rgba(245, 183, 0, 0.6);
  outline-offset: 3px;
}

.waitlist-form-submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

.waitlist-form-submit-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(28, 21, 5, 0.3);
  border-top-color: #1c1505;
  border-radius: 50%;
  animation: waitlist-spin 0.8s linear infinite;
}

.waitlist-form.is-submitting .waitlist-form-submit-spinner { display: inline-block; }

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

/* ============ META + ERROR ============ */
.waitlist-form-meta {
  font-family: var(--wf-font-mono);
  font-size: 11px;
  color: var(--wf-ink-dim);
  text-align: center;
  margin: 0;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.waitlist-form-meta strong {
  color: var(--wf-ink);
  font-weight: 600;
}

.waitlist-form-error {
  background: rgba(255, 117, 117, 0.08);
  border: 1px solid rgba(255, 117, 117, 0.30);
  border-radius: var(--wf-radius-sm);
  padding: 12px 14px;
  font-size: 14px;
  color: var(--wf-error);
}

/* ============ SUCCESS ============ */
.waitlist-form.is-success > :not(.waitlist-form-success) { display: none; }
.waitlist-form.is-success::before,
.waitlist-form.is-success::after { /* keep card chrome */ }

.waitlist-form-success {
  display: none;
  flex-direction: column;
  gap: 18px;
  padding: 8px 0 4px;
  text-align: center;
  align-items: center;
}

.waitlist-form.is-success .waitlist-form-success { display: flex; }

.waitlist-form-success-eyebrow {
  font-family: var(--wf-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wf-success);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.waitlist-form-success-eyebrow::before {
  content: '✓';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--wf-success);
  color: #0d0b08;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 0 18px -2px rgba(95, 208, 160, 0.7);
}

.waitlist-form-success h3 {
  font-family: var(--wf-font-serif);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--wf-ink);
}

.waitlist-form-success-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
  max-width: 420px;
}

.waitlist-form-stat {
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(245, 183, 0, 0.10), transparent 60%),
    rgba(255, 250, 240, 0.025);
  border: 1px solid var(--wf-line);
  border-radius: var(--wf-radius-sm);
  padding: 16px 18px;
  text-align: left;
}

.waitlist-form-stat .k {
  font-family: var(--wf-font-mono);
  font-size: 10.5px;
  color: var(--wf-ink-mute);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 6px;
  font-weight: 500;
}

.waitlist-form-stat .v {
  font-family: var(--wf-font-serif);
  font-size: 26px;
  font-weight: 500;
  color: var(--wf-honey);
  line-height: 1;
}

.waitlist-form-stat .v.code {
  font-family: var(--wf-font-mono);
  font-size: 16px;
  color: var(--wf-ink);
  letter-spacing: 0.06em;
}

.waitlist-form-success-body {
  font-size: 14.5px;
  color: var(--wf-ink-dim);
  line-height: 1.6;
  margin: 0;
  max-width: 44ch;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 520px) {
  .waitlist-form { padding: 32px 22px 24px; gap: 18px; }
  .waitlist-form-row input,
  .waitlist-form-row textarea { padding: 13px 14px 13px 42px; }
  .waitlist-form-row input[name="first_name"],
  .waitlist-form-row input[name="last_name"],
  .waitlist-form-row input[name="email"],
  .waitlist-form-row input[name="social_handle"] {
    background-position: 13px 50%;
    background-size: 16px 16px;
  }
  .waitlist-form-row textarea[name="pain_point"] {
    background-position: 14px 12px;
    background-size: 16px 16px;
  }
  .waitlist-form-success-stats { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .waitlist-form-submit,
  .waitlist-form-submit::before,
  .waitlist-form-row input,
  .waitlist-form-row textarea { transition: none; }
  .waitlist-form-submit-spinner { animation: none; }
}