/*
 * Stylesheet: landing/_includes/lead-step.css
 * Version: 1.0.0
 * Last Updated: 2026-08-31
 * Description: Scoped styling for the step-1 lead form (lead-step.php). Same rules as
 *              checkout-lead-form.css under the .pnls namespace, plus the step indicator
 *              and the "saved, continue below" line the two-step flow needs.
 *              Every rule lives under .pnls so the partial can drop into any landing
 *              page — mirrored Elementor clones included — without inheriting or
 *              leaking styles. Design intent: quiet, trustworthy, unmistakably a
 *              "two fields and continue" step, not a payment form.
 */

.pnls {
  --pnls-accent: #10B981;
  --pnls-accent-dark: #059669;
  --pnls-ink: #0F172A;
  --pnls-muted: #64748B;
  --pnls-line: #E2E8F0;
  --pnls-danger: #DC2626;
  --pnls-radius: 18px;

  box-sizing: border-box;
  padding: 48px 16px;
  background: #F8FAFC;
  font-family: "Assistant", "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  direction: rtl;
}

.pnls *,
.pnls *::before,
.pnls *::after { box-sizing: border-box; }

.pnls-card {
  max-width: 460px;
  margin: 0 auto;
  padding: 32px 28px;
  background: #FFFFFF;
  border: 1px solid var(--pnls-line);
  border-radius: var(--pnls-radius);
  box-shadow: 0 20px 45px -30px rgba(15, 23, 42, 0.45);
  text-align: right;
}

.pnls-eyebrow {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--pnls-accent-dark);
  text-transform: none;
}

.pnls-title {
  margin: 0 0 8px;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 800;
  color: var(--pnls-ink);
}

.pnls-subtitle {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--pnls-muted);
}

/* ---------- price summary ---------- */

.pnls-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 22px;
  padding: 14px 16px;
  background: #F1F5F9;
  border-radius: 12px;
}

.pnls-price-now { font-size: 26px; font-weight: 800; color: var(--pnls-ink); }
.pnls-price-was { font-size: 16px; color: var(--pnls-muted); text-decoration: line-through; }
.pnls-price-save {
  margin-inline-start: auto;
  padding: 3px 10px;
  font-size: 13px;
  font-weight: 700;
  color: #065F46;
  background: #D1FAE5;
  border-radius: 999px;
}

/* ---------- fields ---------- */

.pnls-field { display: flex; flex-direction: column; margin-bottom: 16px; }

.pnls-field label {
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--pnls-ink);
}

.pnls-optional { font-weight: 400; color: var(--pnls-muted); }

.pnls-field input {
  width: 100%;
  padding: 13px 14px;
  font-size: 16px; /* 16px keeps iOS from zooming on focus */
  font-family: inherit;
  color: var(--pnls-ink);
  background: #FFFFFF;
  border: 1.5px solid var(--pnls-line);
  border-radius: 11px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pnls-field input::placeholder { color: #94A3B8; }

.pnls-field input:focus {
  outline: none;
  border-color: var(--pnls-accent);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}

.pnls-field input.is-invalid { border-color: var(--pnls-danger); }

.pnls-field-error,
.pnls-error {
  display: none;
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--pnls-danger);
}

.pnls-field-error.is-visible,
.pnls-error.is-visible { display: block; }

.pnls-error.is-visible {
  margin: 4px 0 14px;
  padding: 10px 12px;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: 10px;
}

/* ---------- consent ---------- */

.pnls-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 4px 0 18px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--pnls-muted);
  cursor: pointer;
}

.pnls-check input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--pnls-accent);
}

/* ---------- submit ---------- */

.pnls-submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 20px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 800;
  color: #FFFFFF;
  background: var(--pnls-accent);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.08s ease;
}

.pnls-submit:hover:not(:disabled) { background: var(--pnls-accent-dark); }
.pnls-submit:active:not(:disabled) { transform: translateY(1px); }
.pnls-submit:disabled { opacity: 0.55; cursor: not-allowed; }

.pnls-spinner { display: none; width: 18px; height: 18px; }

.pnls-submit.is-loading .pnls-spinner {
  display: block;
  border: 2.5px solid rgba(255, 255, 255, 0.35);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: pnls-spin 0.7s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .pnls-submit.is-loading .pnls-spinner { animation-duration: 2s; }
  .pnls-submit:active:not(:disabled) { transform: none; }
}

/* ---------- footer ---------- */

.pnls-note {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--pnls-muted);
}

.pnls-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 16px 0 0;
  font-size: 12.5px;
  color: var(--pnls-muted);
}

@media (max-width: 480px) {
  .pnls { padding: 32px 12px; }
  .pnls-card { padding: 26px 20px; }
  .pnls-title { font-size: 21px; }
}


/* ---- Step indicator: 1 details → 2 payment (club-meetup-2026's shape) ---- */
.pnls-steps {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--pnls-muted);
}

.pnls-s {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.pnls-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #E2E8F0;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.pnls-s.is-active { color: var(--pnls-ink); }
.pnls-s.is-active .pnls-n { background: var(--pnls-accent); color: #fff; }
.pnls-s.is-done .pnls-n { background: var(--pnls-accent-dark); color: #fff; }

.pnls-sep {
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: var(--pnls-line);
}

/* ---- Shown in place of the form once the lead is banked ---- */
.pnls-done {
  margin: 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: #ECFDF5;
  color: #065F46;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}

.pnls-done[hidden] { display: none; }