/* ─── Lead modal ─────────────────────────────────────────── */
.lead-modal {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lead-modal[hidden] {
  display: none;
}

.lead-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.lead-modal.is-open .lead-modal-overlay {
  opacity: 1;
}

.lead-modal-body {
  position: relative;
  width: 600px;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--color-bg);
  border-radius: var(--radius);
  padding: 40px;
  opacity: 0;
  transform: translateY(24px) scale(0.96);
  transition:
    opacity 320ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 440ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.lead-modal.is-open .lead-modal-body {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 80ms;
}

@media (prefers-reduced-motion: reduce) {
  .lead-modal-overlay,
  .lead-modal-body {
    transition: none;
  }
}

.lead-modal-body h3 {
  font: 600 29px/1.3 'Inter', sans-serif;
  margin: 0 0 var(--space-4);
}

.lead-bedrijf-naam {
  font: 600 18px/1.3 'Inter', sans-serif;
  color: var(--color-accent);
  margin: 0 0 var(--space-24);
}

.lead-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: #D9D9D9;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.lead-modal-close:hover {
  background: var(--color-muted);
}

.lead-samenvatting {
  padding: var(--space-12) var(--space-16);
  background: rgba(0, 0, 0, 0.04);
  border-radius: var(--radius);
  margin-bottom: var(--space-16);
  font: 600 16px/1.5 'Inter', sans-serif;
}

.lead-keuzes li {
  font-weight: 400;
  display: flex;
  align-items: baseline;
}

.lead-keuzes {
  list-style: none;
  padding: 0;
  margin: var(--space-8) 0 0;
}

.lead-keuzes li::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: var(--color-accent);
  -webkit-mask: url('/assets/svg/check-accent.svg') no-repeat center / contain;
          mask: url('/assets/svg/check-accent.svg') no-repeat center / contain;
  margin-right: var(--space-8);
  vertical-align: middle;
  flex-shrink: 0;
}

.lead-keuzes li {
  padding: 2px 0;
}

.lead-row {
  display: flex;
  gap: 15px;
}

.lead-row .lead-input {
  flex: 1;
  min-width: 0;
}

.lead-input {
  display: block;
  width: 100%;
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font: 400 16px/1.5 'Inter', sans-serif;
  margin-bottom: var(--space-12);
  background: var(--color-surface);
}

.lead-input:focus {
  border-color: var(--color-accent);
  outline: none;
}

.lead-textarea {
  min-height: 110px;
  resize: vertical;
}

.lead-upload {
  margin: var(--space-4) 0 var(--space-12);
}

.lead-upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.lead-upload-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12);
  cursor: pointer;
}

.lead-upload-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 var(--space-16);
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font: 600 16px/1 'Inter', sans-serif;
  transition: background 160ms, color 160ms, border-color 160ms;
}

.lead-upload-label:hover .lead-upload-button,
.lead-upload:focus-within .lead-upload-button {
  background: #000;
  color: #fff;
  border-color: #000;
}

.lead-upload-hint {
  font: 400 16px/1.4 'Inter', sans-serif;
  color: var(--color-text);
}

.lead-upload-filename {
  flex-basis: 100%;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font: 400 16px/1.4 'Inter', sans-serif;
  color: var(--color-text);
  word-break: break-all;
}

.lead-upload-filename[hidden] {
  display: none;
}

.lead-upload-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  padding: 3px;
  border-radius: 50%;
  background: #059669;
  color: #fff;
}

.lead-upload-error {
  margin: var(--space-8) 0 0;
  font: 400 16px/1.4 'Inter', sans-serif;
  color: var(--color-accent);
}

.lead-submit {
  width: 100%;
  margin-top: var(--space-8);
  background: var(--color-accent);
  color: var(--color-surface);
  border-color: var(--color-accent);
}

.lead-submit:hover {
  background: var(--color-text);
  border-color: var(--color-text);
}

.lead-success {
  text-align: center;
  padding: var(--space-32) 0;
}

.lead-success-icoon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #059669;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-16);
}

.lead-success h3 {
  font: 600 24px/1.3 'Inter', sans-serif;
  margin: 0 0 var(--space-24);
}

.lead-success p {
  font: 400 16px/1.5 'Inter', sans-serif;
  color: var(--color-text);
  margin: 0 0 var(--space-24);
}

.lead-success-close {
  width: 210px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font: 700 16px/1 'Inter', sans-serif;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  padding: 0;
}

.lead-success-close:hover {
  background: #000;
  color: #fff;
  border-color: #000;
}