/*
 * Nect Salesforce Forms – shared styles.
 *
 * Loaded once per page that renders a Nect form. Shared across every preset;
 * presets differ only in which fields the server renders, never in CSS.
 *
 * @package NectSalesforceForms
 */

/* ---------- FORM BASE STYLES ---------- */

 .nect-webtolead {
  box-sizing: border-box;
  font-family: Inter, sans-serif;

  /* Auto-contrast token (default: dark text on light bg) */
  --sf-on-bg: #111827;
  --sf-on-bg-muted: rgba(17, 24, 39, 0.9);
  --sf-link-on-bg: #111827;

  /* Brand accent — "Digital Neon Green" */
  --sf-accent: #50ffba;

  /* Segment-card icon fill. We mask the uploaded SVG and force the color per
     mode, so the same single upload stays visible on light AND dark sections
     regardless of the SVG's own color. Light bg -> midnight. */
  --sf-segment-icon: #0A0C1B;

  /* Selected-card emphasis (border, inset ring, hover edge, icon tint). On a
     light bg Digital Neon Green is too low-contrast / harsh, so we use Midnight;
     on a dark bg the neon green is used instead (see .is-dark-bg). */
  --sf-segment-selected: #0A0C1B;

  /* Strong ease-out for interactions (built-in easings are too weak) */
  --sf-ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  /* Focus ring (high contrast on light backgrounds) */
  --sf-focus: #0A0C1B;

  /* Error tokens: border/fill stays vivid, text is darkened for AA contrast (>=4.5:1) */
  --sf-error: #ff4b4b;
  --sf-error-text: #b3261e;

  /* Submit button tokens (default: for light backgrounds) */
  --sf-btn-bg: #0A0C1B;
  --sf-btn-fg: #ffffff;
  --sf-btn-hover-bg: #50ffba;
  --sf-btn-hover-fg: #0A0C1B;

  /* Checkbox tokens (default: for light backgrounds) */
  --sf-checkbox-border: #D1D5DB;
  --sf-checkbox-bg: #ffffff;
  --sf-checkbox-checked-bg: #0A0C1B;
  --sf-checkbox-checked-border: #0A0C1B;
  --sf-checkbox-tick: #ffffff;

  max-width: 900px;
  margin: 0 auto;
}

 .nect-webtolead.is-dark-bg {
  /* Light text on dark bg */
  --sf-on-bg: #F9FAFB;
  --sf-on-bg-muted: rgba(249, 250, 251, 0.88);
  --sf-link-on-bg: #F9FAFB;
  /* Dark bg -> white segment icons */
  --sf-segment-icon: #F9FAFB;
  /* On dark bg the neon green has good contrast, so it drives the selection. */
  --sf-segment-selected: var(--sf-accent);
  /* On dark backgrounds we want a bright primary and a dark hover */
  --sf-btn-bg: #50ffba;
  --sf-btn-fg: #0A0C1B;
  --sf-btn-hover-bg: #ffffff;
  --sf-btn-hover-fg: #0A0C1B;

  /* Checkbox tokens (for dark backgrounds) */
  --sf-checkbox-border: rgba(249, 250, 251, 0.55);
  --sf-checkbox-bg: transparent;
  --sf-checkbox-checked-bg: var(--sf-accent);
  --sf-checkbox-checked-border: var(--sf-accent);
  --sf-checkbox-tick: #0A0C1B;

  /* Brighter error on dark backgrounds (iOS-style) */
  --sf-error: #ff453a;
  --sf-error-text: #ff8079;

  /* Focus ring (Digital Neon Green stands out on dark backgrounds) */
  --sf-focus: #50ffba;
}

 .nect-webtolead * {
  box-sizing: border-box;
  font-family: Inter, sans-serif;
}


/* ROW & COLUMN LAYOUT FOR MAIN FIELDS */
 .nect-webtolead .row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* ---------- INPUTS / SELECTS / TEXTAREA ---------- */

 .nect-webtolead input[type="text"],
 .nect-webtolead input[type="email"],
 .nect-webtolead input[type="tel"],
 .nect-webtolead select,
 .nect-webtolead textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  width: 100%;
  font-size: 16px;
  line-height: 1.15;
  padding: 14px;
  border: 1px solid #E5E7EB;
  background-color: #F9FAFB;
  border-radius: 8px;
  color: #111827;
}

/* uniform heights for inputs + selects */
 .nect-webtolead input[type="text"],
 .nect-webtolead input[type="email"],
 .nect-webtolead input[type="tel"],
 .nect-webtolead select {
  height: 48px;
}

/* Textarea sizing */
 .nect-webtolead textarea {
  min-height: 130px;
  resize: vertical;
}

/* ---------- CUSTOM CARET / CHEVRON FOR SELECT ---------- */

 .nect-webtolead select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 8 10 12 14 8'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
  padding-right: 44px !important;
}

 .nect-webtolead.is-dark-bg select {
  /* On dark sections, our selects are still light, so the chevron should be dark (midnight) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none' stroke='%230A0C1B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 8 10 12 14 8'%3E%3C/polyline%3E%3C/svg%3E");
}

/* ---------- CHECKBOX ---------- */

 .nect-webtolead input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  margin-right: 0;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 2px solid var(--sf-checkbox-border);
  background-color: var(--sf-checkbox-bg);
  display: inline-block;
  position: relative;
  cursor: pointer;
  outline: none;
  box-shadow: none;
  color: var(--sf-checkbox-tick);
}

 .nect-webtolead input[type="checkbox"]:checked {
  background-color: var(--sf-checkbox-checked-bg) !important;
  border-color: var(--sf-checkbox-checked-border) !important;
}

 .nect-webtolead input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: 2px solid currentColor;
  border-top: 0;
  border-left: 0;
  transform: rotate(45deg);
}


 .nect-webtolead.is-dark-bg input[type="checkbox"] {
  border-color: var(--sf-checkbox-border);
  background-color: var(--sf-checkbox-bg);
}

 .nect-webtolead input[type="checkbox"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(80, 255, 186, 0.35);
}

/* ---------- FIELD LABELS ---------- */

 .nect-webtolead .nect-label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sf-on-bg);
}

/* Screen-reader-only labels keep the placeholder-only look while staying accessible */
 .nect-webtolead .nect-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

 .nect-webtolead .nect-segment-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  width: 100%;
}

 .nect-webtolead .nect-segment-fieldset > legend.nect-label {
  padding: 0;
}

/* ---------- SEGMENT (partner-type radio cards) ---------- */

 .nect-webtolead .nect-segment {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  width: 100%;
}

 .nect-webtolead .nect-segment-option {
  flex: 1 1 240px;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 20px 18px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  background-color: #F9FAFB;
  cursor: pointer;
  transition: border-color .15s var(--sf-ease-out), box-shadow .15s var(--sf-ease-out), background-color .15s var(--sf-ease-out), transform .16s var(--sf-ease-out);
}

/* Subtle press feedback on the selectable cards */
 .nect-webtolead .nect-segment-option:active {
  transform: scale(0.99);
}

 .nect-webtolead .nect-segment-icon {
  display: block;
  width: 32px;
  height: 32px;
  margin-bottom: 4px;
  /* The uploaded SVG is used as a mask (shape only); the fill comes from the
     token, so it is always visible in both light and dark mode. */
  background-color: var(--sf-segment-icon);
  -webkit-mask: var(--nsf-seg-icon) center / contain no-repeat;
  mask: var(--nsf-seg-icon) center / contain no-repeat;
}

/* Selected card: tint the icon with the selection color (Midnight on light,
   Digital Neon Green on dark) to reinforce selection. */
 .nect-webtolead .nect-segment-option.is-selected .nect-segment-icon,
 .nect-webtolead .nect-segment-option:has(> input[type="radio"]:checked) .nect-segment-icon {
  background-color: var(--sf-segment-selected);
}

 .nect-webtolead .nect-segment-option > input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

 .nect-webtolead .nect-segment-title {
  font-weight: 700;
  font-size: 16px;
  color: #111827;
}

 .nect-webtolead .nect-segment-desc {
  font-size: 13px;
  line-height: 1.4;
  color: #6B7280;
}

@media (hover: hover) and (pointer: fine) {
   .nect-webtolead .nect-segment-option:hover {
    border-color: var(--sf-segment-selected);
  }
}

 .nect-webtolead .nect-segment-option.is-selected,
 .nect-webtolead .nect-segment-option:has(> input[type="radio"]:checked) {
  border-color: var(--sf-segment-selected);
  box-shadow: 0 0 0 2px var(--sf-segment-selected) inset;
  background-color: #ffffff;
}

 .nect-webtolead .nect-segment-option:has(> input[type="radio"]:focus-visible) {
  box-shadow: 0 0 0 3px rgba(80, 255, 186, 0.35);
}

 .nect-webtolead .nect-segment-option.invalid-active,
 .nect-webtolead .nect-segment .invalid-active {
  border-color: var(--sf-error) !important;
}

/* Dark background variant */
 .nect-webtolead.is-dark-bg .nect-segment-option {
  border-color: rgba(249, 250, 251, 0.25);
  background-color: rgba(249, 250, 251, 0.04);
}

 .nect-webtolead.is-dark-bg .nect-segment-title {
  color: var(--sf-on-bg);
}

 .nect-webtolead.is-dark-bg .nect-segment-desc {
  color: var(--sf-on-bg-muted);
}

 .nect-webtolead.is-dark-bg .nect-segment-option.is-selected,
 .nect-webtolead.is-dark-bg .nect-segment-option:has(> input[type="radio"]:checked) {
  background-color: rgba(80, 255, 186, 0.08);
}

@media (max-width: 640px) {
  .nect-webtolead .nect-segment {
    flex-direction: column;
    gap: 12px;
  }
}

/* ---------- FOCUS & TOUCH ---------- */

/* Cut the ~300ms tap delay on mobile for all interactive controls */
 .nect-webtolead input[type="text"],
 .nect-webtolead input[type="email"],
 .nect-webtolead input[type="tel"],
 .nect-webtolead select,
 .nect-webtolead textarea,
 .nect-webtolead input[type="checkbox"],
 .nect-webtolead input[type="radio"],
 .nect-webtolead button[type="submit"] {
  touch-action: manipulation;
}

/* Visible keyboard focus ring on every field (WCAG focus-visible) */
 .nect-webtolead input[type="text"]:focus-visible,
 .nect-webtolead input[type="email"]:focus-visible,
 .nect-webtolead input[type="tel"]:focus-visible,
 .nect-webtolead select:focus-visible,
 .nect-webtolead textarea:focus-visible,
 .nect-webtolead button[type="submit"]:focus-visible {
  outline: 2px solid var(--sf-focus);
  outline-offset: 2px;
}

 .nect-webtolead input[type="text"]:focus-visible,
 .nect-webtolead input[type="email"]:focus-visible,
 .nect-webtolead input[type="tel"]:focus-visible,
 .nect-webtolead select:focus-visible,
 .nect-webtolead textarea:focus-visible {
  border-color: var(--sf-focus);
}

/* Enlarge the checkbox tap area (web equivalent of hitSlop). Width stays within
   the gap before the text so it never steals taps from the inline links. */
 .nect-webtolead .checkbox-row > input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
}

/* ---------- BUTTON ---------- */

 .nect-webtolead button[type="submit"] {
  width: 50% !important;
  min-width: 240px;
  max-width: 520px;
  display: inline-block;
  margin: 0; /* left-aligned */
  background-color: var(--sf-btn-bg) !important;
  color: var(--sf-btn-fg) !important;
  padding: 14px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: background-color .15s var(--sf-ease-out), color .15s var(--sf-ease-out), opacity .15s var(--sf-ease-out), transform .16s var(--sf-ease-out);
}

/* Pressed/focused states apply on every device; hover is gated for touch below. */
 .nect-webtolead button[type="submit"]:focus-visible,
 .nect-webtolead button[type="submit"]:active {
  background-color: var(--sf-btn-hover-bg) !important;
  color: var(--sf-btn-hover-fg) !important;
}

/* Subtle press feedback on touch/click */
 .nect-webtolead button[type="submit"]:active {
  transform: scale(0.98);
}

@media (hover: hover) and (pointer: fine) {
   .nect-webtolead button[type="submit"]:hover {
    background-color: var(--sf-btn-hover-bg) !important;
    color: var(--sf-btn-hover-fg) !important;
  }
}

/* Respect reduced-motion: drop non-essential transitions/transforms */
@media (prefers-reduced-motion: reduce) {
  .nect-webtolead button[type="submit"],
  .nect-webtolead .nect-segment-option,
  .nect-webtolead .checkbox-row a,
  .nect-webtolead select,
  .nect-webtolead input,
  .nect-webtolead textarea {
    transition: none !important;
  }
  .nect-webtolead button[type="submit"]:active,
  .nect-webtolead .nect-segment-option:active {
    transform: none;
  }
}

 .nect-webtolead button[type="submit"]:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ---------- ERROR STATES ---------- */

 .nect-webtolead .invalid-active:not(:focus):not(.focused) {
  border-color: #FF5A5A !important;
  background-color: #FFF5F5 !important;
}

/* ---------- RECAPTCHA ---------- */

 .nect-webtolead .g-recaptcha {
  transform: scale(0.9);
  transform-origin: 0 0;
}

/* Honeypot field (hidden from real users) */
 .nect-webtolead input[name="website"] {
  display: none !important;
}

/* Inline error text below fields */
.sf-error {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--sf-error-text);
  font-weight: 600;
}

/* Red outline for invalid text fields, selects and textareas */
 .nect-webtolead input[type="text"].invalid-active,
 .nect-webtolead input[type="email"].invalid-active,
 .nect-webtolead input[type="tel"].invalid-active,
 .nect-webtolead select.invalid-active,
 .nect-webtolead textarea.invalid-active {
  border-color: var(--sf-error) !important;
  box-shadow: 0 0 0 1px var(--sf-error) inset;
}

/* Checkbox: single red border, no double outline */
 .nect-webtolead input[type="checkbox"].invalid-active {
  border-color: var(--sf-error) !important;
  background-color: #FFF5F5;
}

 .nect-webtolead.is-dark-bg input[type="checkbox"].invalid-active {
  background-color: rgba(255, 69, 58, 0.12);
}

 .nect-webtolead .checkbox-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px;
  flex-wrap: wrap;
 }

 .nect-webtolead .checkbox-row > input[type="checkbox"] {
  flex: 0 0 18px;
  display: inline-block !important;
 }

 .nect-webtolead .checkbox-row span,
 .nect-webtolead .checkbox-row label {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
 }

 .nect-webtolead .checkbox-row label {
  cursor: pointer;
 }

 .nect-webtolead .checkbox-row .sf-error {
  flex-basis: 100%;
  margin-left: 26px;
}

/* ---------- CONSENT TEXT AUTO-CONTRAST ---------- */
 .nect-webtolead .checkbox-row {
  color: var(--sf-on-bg);
}

 .nect-webtolead .checkbox-row span,
 .nect-webtolead .checkbox-row label {
  color: var(--sf-on-bg);
}

 .nect-webtolead .checkbox-row a {
  color: var(--sf-link-on-bg);
  text-decoration: underline;
  font-size: inherit;
  font-weight: 500;
  transition: color .15s ease, opacity .15s ease;
}

/* Hover / focus behavior: light bg = Apple blue, dark bg = Digital Neon Green */
 .nect-webtolead .checkbox-row a:hover,
 .nect-webtolead .checkbox-row a:focus-visible {
  color: #007AFF;
}

 .nect-webtolead.is-dark-bg .checkbox-row a {
  opacity: 0.95;
}

 .nect-webtolead.is-dark-bg .checkbox-row a:hover,
 .nect-webtolead.is-dark-bg .checkbox-row a:focus-visible {
  color: var(--sf-accent);
}

/* ---------- FLEX COLUMN UTILITIES FOR RESPONSIVE FORM ---------- */
 .nect-webtolead .col-100 {
  flex: 1 1 100px;
  min-width: 100px;
}

 .nect-webtolead .col-125 {
  flex: 1 1 125px;
  min-width: 125px;
}

 .nect-webtolead .col-150 {
  flex: 1 1 150px;
  min-width: 150px;
}

 .nect-webtolead .col-225 {
  flex: 1 1 225px;
  min-width: 225px;
}

 .nect-webtolead .col-250 {
  flex: 1 1 250px;
  min-width: 250px;
}

 .nect-webtolead .col-300 {
  flex: 1 1 300px;
  min-width: 300px;
}

 .nect-webtolead .col-full {
  flex: 1 1 100%;
  min-width: 100%;
}

/* Explicit width system (set per field in the settings: Drittel/Halb/Voll).
   The 16px row gap is shared, so each fraction subtracts its share. */
 .nect-webtolead .col-half {
  flex: 1 1 calc(50% - 8px);
  min-width: 0;
}

 .nect-webtolead .col-third {
  flex: 1 1 calc(33.333% - 11px);
  min-width: 0;
}

@media (max-width: 640px) {
  .nect-webtolead .row {
    flex-direction: column;
    gap: 12px;
  }

  .nect-webtolead .col-100,
  .nect-webtolead .col-125,
  .nect-webtolead .col-150,
  .nect-webtolead .col-225,
  .nect-webtolead .col-250,
  .nect-webtolead .col-300,
  .nect-webtolead .col-half,
  .nect-webtolead .col-third,
  .nect-webtolead .col-full {
    flex: 1 1 100%;
    min-width: 100%;
  }

  .nect-webtolead button[type="submit"] {
    width: 100% !important;
    min-width: 0;
    max-width: none;
    display: block;
  }

  /* Mobile: ensure checkbox + text start on the same row */
  .nect-webtolead .checkbox-row {
    display: grid !important;
    grid-template-columns: 18px 1fr;
    column-gap: 12px;
    align-items: center !important;
  }

  .nect-webtolead .checkbox-row > input[type="checkbox"] {
    margin: 0;
    justify-self: start;
    align-self: center;
    width: 18px;
    height: 18px;
    display: inline-block !important;
  }

  .nect-webtolead .checkbox-row span,
  .nect-webtolead .checkbox-row label {
    display: block;
  }

  /* Error message should align under the text column */
  .nect-webtolead .checkbox-row .sf-error {
    grid-column: 2;
    margin-left: 0;
  }
}

/* ---------- DEBUG OVERLAY (VISIBLE ONLY WHEN DEBUG_MODE = true) ---------- */
#nect-debug-overlay {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(17, 24, 39, 0.94);
  color: #F9FAFB;
  font-size: 12px;
  line-height: 1.35;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  pointer-events: auto;
  max-width: 360px;
}

#nect-debug-overlay.nect-debug-muted {
  opacity: 0.6;
}

#nect-debug-overlay .nect-debug-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 2px;
}

#nect-debug-overlay .nect-debug-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#nect-debug-overlay .nect-debug-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

#nect-debug-overlay .nect-debug-engagement-block {
  margin-top: 2px;
}

#nect-debug-overlay .nect-debug-engagement-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.8;
}

#nect-debug-overlay .nect-debug-engagement-value {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11px;
}

#nect-debug-overlay .nect-debug-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  opacity: 0.9;
}

#nect-debug-overlay .nect-debug-engagement {
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#nect-debug-overlay .nect-debug-button {
  border: 0;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 500;
  background: #F9FAFB;
  color: #111827;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.08s ease;
}

#nect-debug-overlay .nect-debug-button:hover {
  background: #50ffba;
  color: #0A0C1B;
  transform: translateY(-1px);
}

#nect-debug-overlay .nect-debug-payload {
  margin: 0;
  padding: 4px 6px;
  border-radius: 4px;
  background: rgba(31, 41, 55, 0.9);
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 10px;
  max-height: 140px;
  overflow: auto;
  white-space: pre;
}

@media (max-width: 640px) {
  #nect-debug-overlay {
    bottom: 8px;
    left: 8px;
    right: 8px;
    padding: 6px 8px;
    max-width: none;
  }

  #nect-debug-overlay .nect-debug-engagement {
    max-width: 140px;
  }

  #nect-debug-overlay .nect-debug-payload {
    max-height: 120px;
  }
}