/* MDP Lead Forms — front end.
   Colours and radii are variables so each site can restyle without a fork. */

.mdpf-wrap {
  --mdpf-text: #191919;
  --mdpf-muted: #6b6b6b;
  --mdpf-border: #d8d8d8;
  --mdpf-border-focus: #191919;
  --mdpf-error: #c0392b;
  --mdpf-accent: #191919;
  --mdpf-accent-text: #ffffff;
  --mdpf-radius: 6px;
  --mdpf-gap: 18px;

  font-family: inherit;
  color: var(--mdpf-text);
}

.mdpf-intro { margin-bottom: var(--mdpf-gap); }

.mdpf-fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mdpf-gap);
}

.mdpf-field {
  flex: 1 1 calc(var(--w, 100%) - var(--mdpf-gap));
  min-width: min(240px, 100%);
}

.mdpf-field[style*="--w:100%"] { flex-basis: 100%; }

/* A field switched off by its condition takes no space in the grid. */
.mdpf-field[hidden] { display: none; }

.mdpf-label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.mdpf-req { color: var(--mdpf-error); margin-left: 2px; }

.mdpf-input {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--mdpf-text);
  background: #fff;
  border: 1px solid var(--mdpf-border);
  border-radius: var(--mdpf-radius);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.mdpf-input:focus {
  outline: none;
  border-color: var(--mdpf-border-focus);
  box-shadow: 0 0 0 3px rgba(25, 25, 25, .08);
}

textarea.mdpf-input { resize: vertical; min-height: 96px; }

.mdpf-choices { display: flex; flex-direction: column; gap: 10px; }

.mdpf-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
}

.mdpf-choice input { margin-top: 3px; flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--mdpf-accent); }

.mdpf-choices--consent { font-size: 13px; color: var(--mdpf-muted); }
.mdpf-choices--consent a { color: inherit; text-decoration: underline; }

.mdpf-help { margin: 6px 0 0; font-size: 13px; color: var(--mdpf-muted); }

.mdpf-error {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--mdpf-error);
}

.mdpf-field.has-error .mdpf-input { border-color: var(--mdpf-error); }

.mdpf-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: var(--mdpf-gap);
}

.mdpf-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--mdpf-accent-text);
  background: var(--mdpf-accent);
  border: 1px solid var(--mdpf-accent);
  border-radius: var(--mdpf-radius);
  cursor: pointer;
  transition: opacity .15s ease;
}

.mdpf-btn:hover { opacity: .88; }
.mdpf-btn[disabled] { opacity: .6; cursor: default; }

/* Back reads as secondary so the forward action stays the obvious one. */
.mdpf-prev {
  color: var(--mdpf-text);
  background: transparent;
  border-color: var(--mdpf-border);
}

/* Only push the forward action right when there is a Back button beside it. */
.mdpf-actions:has(.mdpf-prev) .mdpf-next,
.mdpf-actions:has(.mdpf-prev) .mdpf-submit { margin-left: auto; }

.mdpf-spinner {
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: mdpf-spin .7s linear infinite;
}

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

.mdpf-message {
  margin: 14px 0 0;
  padding: 12px 14px;
  font-size: 14px;
  border-radius: var(--mdpf-radius);
  background: #eef7ee;
  border: 1px solid #cfe6cf;
}

.mdpf-message.is-error { background: #fdeeec; border-color: #f3c6c0; color: var(--mdpf-error); }

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.mdpf-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.mdpf-missing {
  padding: 12px;
  border: 1px dashed #c0392b;
  color: #c0392b;
  font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .mdpf-spinner { animation-duration: 2s; }
  .mdpf-input { transition: none; }
}


/* ── Steps ─────────────────────────────────────────────────────────────────── */

.mdpf-step[hidden] { display: none; }

.mdpf-step-title {
  margin: 0 0 var(--mdpf-gap);
  font-size: 20px;
  line-height: 1.3;
  font-weight: 600;
}

.mdpf-progress { margin-bottom: calc(var(--mdpf-gap) * 1.4); }

.mdpf-progress-track {
  height: 6px;
  background: #ececec;
  border-radius: 999px;
  overflow: hidden;
}

.mdpf-progress-fill {
  height: 100%;
  background: var(--mdpf-accent);
  border-radius: inherit;
  transition: width .3s ease;
}

.mdpf-progress-text {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--mdpf-muted);
}

.mdpf-progress-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mdpf-progress-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--mdpf-muted);
}

.mdpf-progress-step + .mdpf-progress-step::before {
  content: "";
  width: 24px;
  height: 2px;
  background: #ddd;
}

.mdpf-progress-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 2px solid #ddd;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 600;
  flex: 0 0 auto;
}

.mdpf-progress-step.is-active,
.mdpf-progress-step.is-done { color: var(--mdpf-text); }

.mdpf-progress-step.is-active .mdpf-progress-dot,
.mdpf-progress-step.is-done .mdpf-progress-dot {
  background: var(--mdpf-accent);
  border-color: var(--mdpf-accent);
  color: var(--mdpf-accent-text);
}

@media (max-width: 600px) {
  .mdpf-progress-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mdpf-progress-fill { transition: none; }
}