/* ============================================================================
   hempkart.in — INSTRUMENTATION: WAITLIST BAND
   ----------------------------------------------------------------------------
   Minimal, ADDITIVE component for the honest "notify me when we launch"
   waitlist CTA (instrumentation pass instr-001). Composes ENTIRELY from
   tokens.css custom properties + the existing .btn-primary button recipe
   (components.css) — no new design primitives are invented here.

   Placed on: templates/homepage.html (#waitlist, primary), templates/onboarding.html,
   and index.html only. NOT loaded on the other 6 templates (product-finder, plp,
   pdp-food, pdp-gated, cart, vendor-storefront) — those carry only a plain footer
   link to homepage.html#waitlist and need no waitlist CSS.

   Load order: base -> tokens -> components -> (brand-v2, where present) -> instrument.
   ============================================================================ */

.waitlist-band {
  background: var(--color-trust-soft);
  border: 1px solid var(--color-trust);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-5);
  margin-block: var(--space-7);
  scroll-margin-top: var(--space-6); /* footer/nav anchor jumps land clear of any sticky chrome */
}

.waitlist-band__inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.waitlist-band__title {
  font-family: var(--font-head);
  font-size: var(--text-xl);
  font-weight: var(--weight-semi);
  color: var(--color-trust);
  margin: 0 0 var(--space-2) 0;
}

.waitlist-band__body {
  font-size: var(--text-base);
  color: var(--color-ink);
  margin: 0 0 var(--space-5) 0;
}

.waitlist-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  align-items: flex-end;
}

.waitlist-form__field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  flex: 1 1 260px;
  text-align: left;
}

.waitlist-form__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-med);
  color: var(--color-ink);
}

.waitlist-form__input {
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-line);
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
}
.waitlist-form__input:focus-visible {
  outline: 2px solid var(--color-trust);
  outline-offset: 2px;
}

.waitlist-form__submit {
  flex: 0 0 auto;
  cursor: pointer;
}
.waitlist-form__submit[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.waitlist-form__privacy {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  margin: var(--space-3) 0 0 0;
  text-align: center;
}

/* aria-live status region — always present in the DOM (empty text = nothing
   announced); state attribute only changes colour, never hides/fakes content. */
.waitlist-status {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-med);
  min-height: 1.4em;
  text-align: center;
}
.waitlist-status[data-state="success"] { color: var(--color-positive); }
.waitlist-status[data-state="error"]   { color: var(--color-error); }
.waitlist-status[data-state="degrade"] { color: var(--color-warn); }