/* =============================================================
   Nexus Lead Suite — Forms Runtime CSS
   All selectors are scoped under .nexus-st-form to prevent
   conflicts with the active theme and guarantee rendering
   inside popups and shortcode pages.
   ============================================================= */

/* ── Wrapper ─────────────────────────────────────────────── */
.nexus-st-form {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  font-family: var(--nexus-ls-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif) !important;
  font-size: 15px !important;
  color: #1e293b !important;
  line-height: 1.5 !important;
}
.nexus-st-form *,
.nexus-st-form *::before,
.nexus-st-form *::after {
  box-sizing: border-box !important;
}

/* ── Header / title — always hidden ─────────────────────── */
.nexus-st-form .nexus-st-form__header,
.nexus-st-form .nexus-st-form__title,
.nexus-st-form .nexus-st-step__title,
.nexus-st-form .nexus-st-step__subtitle {
  display: none !important;
}

/* ── Form body card ──────────────────────────────────────── */
.nexus-st-form .nexus-st-form__body {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 24px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.07) !important;
  width: 100% !important;
}

/* ── Grid / layout ───────────────────────────────────────── */
.nexus-st-form .nexus-st-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  width: 100% !important;
}

.nexus-st-form .nexus-st-layout {
  display: grid !important;
  gap: 14px !important;
  width: 100% !important;
}
.nexus-st-form .nexus-st-layout__col {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  min-width: 0 !important;
}
.nexus-st-form .nexus-st-layout--cols-1 { grid-template-columns: 1fr !important; }
.nexus-st-form .nexus-st-layout--cols-2 { grid-template-columns: 1fr 1fr !important; }
.nexus-st-form .nexus-st-layout--cols-3 { grid-template-columns: 1fr 1fr 1fr !important; }
.nexus-st-form .nexus-st-layout--cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr !important; }

@media (max-width: 600px) {
  .nexus-st-form .nexus-st-layout--cols-2,
  .nexus-st-form .nexus-st-layout--cols-3,
  .nexus-st-form .nexus-st-layout--cols-4 {
    grid-template-columns: 1fr !important;
  }
}
@media (min-width: 601px) and (max-width: 768px) {
  .nexus-st-form .nexus-st-layout--cols-3,
  .nexus-st-form .nexus-st-layout--cols-4 {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* Compound (inline 2-col for name pairs etc.) */
.nexus-st-form .nexus-st-compound {
  display: grid !important;
  gap: 12px !important;
}
.nexus-st-form .nexus-st-compound--2 {
  grid-template-columns: 1fr 1fr !important;
}
@media (max-width: 520px) {
  .nexus-st-form .nexus-st-compound--2 {
    grid-template-columns: 1fr !important;
  }
}

/* ── Field wrapper ───────────────────────────────────────── */
.nexus-st-form .nexus-st-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* ── Label ───────────────────────────────────────────────── */
.nexus-st-form .nexus-st-field__label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}
.nexus-st-form .nexus-st-req {
  color: #ef4444 !important;
  margin-left: 3px !important;
  font-weight: 700 !important;
}

/* ── Text inputs, textarea, select ──────────────────────── */
.nexus-st-form .nexus-st-input,
.nexus-st-form .nexus-st-textarea,
.nexus-st-form .nexus-st-select {
  display: block !important;
  width: 100% !important;
  padding: 11px 14px !important;
  font-size: 14px !important;
  font-family: inherit !important;
  color: #1e293b !important;
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.18s, box-shadow 0.18s !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}
.nexus-st-form .nexus-st-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 36px !important;
  cursor: pointer !important;
}
.nexus-st-form .nexus-st-textarea {
  min-height: 110px !important;
  resize: vertical !important;
}
.nexus-st-form .nexus-st-input:focus,
.nexus-st-form .nexus-st-textarea:focus,
.nexus-st-form .nexus-st-select:focus {
  border-color: #7c3aed !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
  background: #ffffff !important;
}
.nexus-st-form .nexus-st-input::placeholder,
.nexus-st-form .nexus-st-textarea::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}
.nexus-st-form .nexus-st-input--invalid {
  border-color: #f43f5e !important;
  box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.15) !important;
}

/* ── File upload — custom styled wrapper ─────────────────── */
.nexus-st-form .nexus-st-file-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  width: 100% !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #f8fafc !important;
  transition: border-color 0.18s !important;
}
.nexus-st-form .nexus-st-file-wrap:focus-within {
  border-color: #7c3aed !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
}
.nexus-st-form .nexus-st-file-btn {
  flex-shrink: 0 !important;
  padding: 11px 16px !important;
  background: #e8e3ff !important;
  color: #5b21b6 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  border: none !important;
  border-right: 1.5px solid #e2e8f0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.nexus-st-form .nexus-st-file-name {
  flex: 1 !important;
  padding: 11px 14px !important;
  font-size: 13px !important;
  color: #94a3b8 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.nexus-st-form input[type="file"].nexus-st-input {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  width: 100% !important;
  height: 100% !important;
  cursor: pointer !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  z-index: 2 !important;
}

/* ── Radio / Checkbox options ────────────────────────────── */
.nexus-st-form .nexus-st-options {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.nexus-st-form .nexus-st-options--inline {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}
.nexus-st-form .nexus-st-option {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 14px !important;
  color: #334155 !important;
  cursor: pointer !important;
}
.nexus-st-form .nexus-st-option input[type="radio"],
.nexus-st-form .nexus-st-option input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  accent-color: #7c3aed !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

/* ── Consent / terms ─────────────────────────────────────── */
.nexus-st-form .nexus-st-consent {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  font-size: 13px !important;
  color: #475569 !important;
  line-height: 1.5 !important;
}
.nexus-st-form .nexus-st-consent input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  accent-color: #7c3aed !important;
  margin-top: 2px !important;
  flex-shrink: 0 !important;
}
.nexus-st-form .nexus-st-consent a {
  color: #7c3aed !important;
  text-decoration: underline !important;
}

/* ── Actions row ─────────────────────────────────────────── */
.nexus-st-form .nexus-st-actions {
  display: flex !important;
  gap: 10px !important;
  margin-top: 20px !important;
  flex-wrap: wrap !important;
}
.nexus-st-form .nexus-st-btn {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 13px 18px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  border: 1.5px solid transparent !important;
  transition: background 0.18s, opacity 0.18s, transform 0.12s !important;
  text-align: center !important;
  line-height: 1.4 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}
.nexus-st-form .nexus-st-btn--primary {
  background: #7c3aed !important;
  border-color: #7c3aed !important;
  color: #ffffff !important;
}
.nexus-st-form .nexus-st-btn--primary:hover {
  background: #6d28d9 !important;
  border-color: #6d28d9 !important;
  transform: translateY(-1px) !important;
}
.nexus-st-form .nexus-st-btn--secondary {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #475569 !important;
}
.nexus-st-form .nexus-st-btn--secondary:hover {
  background: #f8fafc !important;
}
.nexus-st-form .nexus-st-btn:disabled,
.nexus-st-form .nexus-st-btn:disabled:hover {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* ── Submission feedback messages ────────────────────────── */
.nexus-st-form .nexus-st-success {
  padding: 14px 18px !important;
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  border-radius: 10px !important;
  color: #15803d !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin-top: 8px !important;
}
.nexus-st-form .nexus-st-error {
  padding: 14px 18px !important;
  background: #fff1f2 !important;
  border: 1px solid #fecdd3 !important;
  border-radius: 10px !important;
  color: #be123c !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin-top: 8px !important;
}

/* ── Inside popup: remove double card ───────────────────── */
.nexus-popup__body .nexus-st-form .nexus-st-form__body {
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* ── Responsive: full width on small screens ─────────────── */
@media (max-width: 480px) {
  .nexus-st-form .nexus-st-form__body {
    padding: 16px !important;
    border-radius: 12px !important;
  }
  .nexus-st-form .nexus-st-btn {
    font-size: 14px !important;
    padding: 12px 14px !important;
  }
  .nexus-st-form .nexus-st-input,
  .nexus-st-form .nexus-st-textarea,
  .nexus-st-form .nexus-st-select {
    font-size: 16px !important; /* prevents iOS zoom on focus */
  }
}