@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ── Wrapper — full bleed ── */
#wkf-wrap {
  font-family: 'DM Sans', sans-serif !important;
  color: #1a2744 !important;
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  box-sizing: border-box !important;
}

/* ── Header ── */
#wkf-wrap .wkf-header {
  background: #1a2744 !important;
  padding: 28px clamp(24px, calc(50vw - 560px), 9999px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
}
#wkf-wrap .wkf-header-brand {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}
#wkf-wrap .wkf-header-logo {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  background: #3ab5b5 !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'DM Serif Display', serif !important;
  font-size: 20px !important;
  color: #fff !important;
  line-height: 1 !important;
}
#wkf-wrap .wkf-header-text h1 {
  all: unset !important;
  display: block !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  color: #fff !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1.3 !important;
}
#wkf-wrap .wkf-header-text p {
  all: unset !important;
  display: block !important;
  font-size: 13px !important;
  color: rgba(255,255,255,0.5) !important;
  margin-top: 3px !important;
  font-family: 'DM Sans', sans-serif !important;
}
#wkf-wrap .wkf-header-quote {
  text-align: right !important;
}
#wkf-wrap .wkf-header-quote-label {
  display: block !important;
  font-size: 11px !important;
  color: rgba(255,255,255,0.4) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-family: 'DM Sans', sans-serif !important;
}
#wkf-wrap .wkf-header-quote-val {
  display: block !important;
  font-size: 13px !important;
  color: rgba(255,255,255,0.75) !important;
  margin-top: 2px !important;
  font-family: 'DM Sans', sans-serif !important;
}

/* ── Hero ── */
#wkf-wrap .wkf-hero {
  background: linear-gradient(135deg, #2a7f7f 0%, #1f6b6b 100%) !important;
  padding: 40px clamp(24px, calc(50vw - 560px), 9999px) 36px !important;
  box-sizing: border-box !important;
}
#wkf-wrap .wkf-hero h2 {
  all: unset !important;
  display: block !important;
  font-family: 'DM Serif Display', serif !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  color: #fff !important;
  margin-bottom: 10px !important;
  line-height: 1.25 !important;
}
#wkf-wrap .wkf-hero p {
  all: unset !important;
  display: block !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: rgba(255,255,255,0.82) !important;
  max-width: 620px !important;
  font-family: 'DM Sans', sans-serif !important;
}

/* ── Progress bar ── */
#wkf-wrap .wkf-progress {
  display: flex !important;
  background: #1a2744 !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  overflow-x: auto !important;
  padding: 0 clamp(24px, calc(50vw - 560px), 9999px) !important;
  box-sizing: border-box !important;
}
#wkf-wrap .wkf-step {
  all: unset !important;
  display: block !important;
  padding: 14px 20px 12px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: rgba(255,255,255,0.35) !important;
  border-bottom: 3px solid transparent !important;
  white-space: nowrap !important;
  cursor: default !important;
  transition: color 0.2s, border-color 0.2s !important;
  box-sizing: border-box !important;
}
#wkf-wrap .wkf-step.active {
  color: #3ab5b5 !important;
  border-bottom-color: #3ab5b5 !important;
}
#wkf-wrap .wkf-step.done {
  color: rgba(255,255,255,0.55) !important;
}

/* ── Body ── */
#wkf-wrap .wkf-body {
  max-width: 740px !important;
  margin: 0 auto !important;
  padding: 40px 24px 60px !important;
  box-sizing: border-box !important;
}

/* ── Section ── */
#wkf-wrap .wkf-section         { display: none !important; }
#wkf-wrap .wkf-section.active  { display: block !important; }

#wkf-wrap .wkf-section-header  { margin-bottom: 24px !important; }

#wkf-wrap .wkf-tag {
  display: block !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #3ab5b5 !important;
  margin-bottom: 6px !important;
}
#wkf-wrap .wkf-section-header h2 {
  all: unset !important;
  display: block !important;
  font-family: 'DM Serif Display', serif !important;
  font-size: 26px !important;
  font-weight: 400 !important;
  color: #1a2744 !important;
  margin-bottom: 6px !important;
  line-height: 1.2 !important;
}
#wkf-wrap .wkf-section-header p {
  all: unset !important;
  display: block !important;
  font-size: 14px !important;
  color: #6b7a9a !important;
  line-height: 1.6 !important;
  font-family: 'DM Sans', sans-serif !important;
}

/* ── Card ── */
#wkf-wrap .wkf-card {
  background: #fff !important;
  border: 1px solid #d4dce8 !important;
  border-radius: 12px !important;
  padding: 28px !important;
  margin-bottom: 16px !important;
  box-sizing: border-box !important;
}

/* ── Fields ── */
#wkf-wrap .wkf-field            { margin-bottom: 22px !important; }
#wkf-wrap .wkf-field:last-child { margin-bottom: 0 !important; }

#wkf-wrap .wkf-field > label {
  all: unset !important;
  display: block !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1a2744 !important;
  margin-bottom: 6px !important;
}
#wkf-wrap .wkf-field > label .req { color: #d94f4f !important; margin-left: 2px !important; }
#wkf-wrap .wkf-field > label .opt { font-weight: 400 !important; color: #a0aec0 !important; font-size: 12px !important; margin-left: 4px !important; }

#wkf-wrap .wkf-hint {
  all: unset !important;
  display: block !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  color: #6b7a9a !important;
  margin-bottom: 8px !important;
  line-height: 1.5 !important;
}
#wkf-wrap .wkf-hint a           { color: #2a7f7f !important; text-decoration: none !important; }
#wkf-wrap .wkf-hint a:hover     { text-decoration: underline !important; }

#wkf-wrap textarea {
  all: unset !important;
  display: block !important;
  width: 100% !important;
  padding: 10px 13px !important;
  border: 1.5px solid #d4dce8 !important;
  border-radius: 8px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  color: #1a2744 !important;
  background: #fff !important;
  resize: vertical !important;
  line-height: 1.5 !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
  min-height: 80px !important;
}
#wkf-wrap textarea:focus {
  border-color: #3ab5b5 !important;
  box-shadow: 0 0 0 3px rgba(58,181,181,0.12) !important;
  outline: none !important;
}

#wkf-wrap .wkf-divider {
  all: unset !important;
  display: block !important;
  border-top: 1px solid #d4dce8 !important;
  margin: 22px 0 !important;
}

/* ── Radios ── */
#wkf-wrap .wkf-radios        { display: flex !important; flex-direction: column !important; gap: 8px !important; }
#wkf-wrap .wkf-radios-inline { flex-direction: row !important; flex-wrap: wrap !important; }

#wkf-wrap .wkf-radio {
  all: unset !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  border: 1.5px solid #d4dce8 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #1a2744 !important;
  line-height: 1.4 !important;
  transition: border-color 0.15s, background 0.15s !important;
  user-select: none !important;
  box-sizing: border-box !important;
}
#wkf-wrap .wkf-radio:hover    { border-color: #3ab5b5 !important; background: #e8f4f4 !important; }
#wkf-wrap .wkf-radio.selected { border-color: #2a7f7f !important; background: #e8f4f4 !important; }
#wkf-wrap .wkf-radio input[type="radio"] {
  all: unset !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  border-radius: 50% !important;
  border: 2px solid #d4dce8 !important;
  background: #fff !important;
  cursor: pointer !important;
  accent-color: #2a7f7f !important;
  display: inline-block !important;
}
#wkf-wrap .wkf-radio input[type="radio"]:checked {
  accent-color: #2a7f7f !important;
  border-color: #2a7f7f !important;
}

/* ── Upload zones ── */
#wkf-wrap .wkf-upload-zone {
  border: 2px dashed #d4dce8 !important;
  border-radius: 10px !important;
  padding: 24px 20px 16px !important;
  text-align: center !important;
  cursor: pointer !important;
  position: relative !important;
  transition: border-color 0.2s, background 0.2s !important;
  box-sizing: border-box !important;
  background: #fff !important;
}
#wkf-wrap .wkf-upload-zone:hover,
#wkf-wrap .wkf-upload-zone.dragover { border-color: #3ab5b5 !important; background: #e8f4f4 !important; }

#wkf-wrap .wkf-upload-zone input[type="file"] {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  width: 100% !important;
  height: 100% !important;
  cursor: pointer !important;
}
#wkf-wrap .wkf-upload-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  pointer-events: none !important;
}
#wkf-wrap .wkf-upload-icon {
  width: 36px !important;
  height: 36px !important;
  background: #e8f4f4 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  color: #2a7f7f !important;
  margin-bottom: 6px !important;
}
#wkf-wrap .wkf-upload-inner strong {
  all: unset !important;
  display: block !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1a2744 !important;
}
#wkf-wrap .wkf-upload-inner span {
  all: unset !important;
  display: block !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  color: #6b7a9a !important;
}
#wkf-wrap .wkf-upload-note { color: #2a7f7f !important; font-weight: 500 !important; margin-top: 4px !important; }

#wkf-wrap .wkf-file-list { list-style: none !important; margin: 12px 0 0 !important; padding: 0 !important; text-align: left !important; display: flex !important; flex-direction: column !important; gap: 6px !important; }
#wkf-wrap .wkf-file-item { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 7px 12px !important; background: #e8f4f4 !important; border-radius: 6px !important; font-size: 12px !important; color: #1a2744 !important; font-family: 'DM Sans', sans-serif !important; }
#wkf-wrap .wkf-file-item button { all: unset !important; cursor: pointer !important; color: #a0aec0 !important; font-size: 18px !important; line-height: 1 !important; }
#wkf-wrap .wkf-file-item button:hover { color: #d94f4f !important; }

/* ── Nav ── */
#wkf-wrap .wkf-nav { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-top: 24px !important; gap: 12px !important; }
#wkf-wrap .wkf-step-count { font-family: 'DM Sans', sans-serif !important; font-size: 13px !important; color: #a0aec0 !important; }

#wkf-wrap .wkf-btn {
  all: unset !important;
  display: inline-block !important;
  padding: 11px 26px !important;
  border-radius: 8px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background 0.15s, color 0.15s !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  text-align: center !important;
}
#wkf-wrap .wkf-btn-next             { background: #2a7f7f !important; color: #fff !important; }
#wkf-wrap .wkf-btn-next:hover       { background: #1f6b6b !important; }
#wkf-wrap .wkf-btn-back             { background: transparent !important; color: #6b7a9a !important; border: 1.5px solid #d4dce8 !important; }
#wkf-wrap .wkf-btn-back:hover       { border-color: #2a7f7f !important; color: #2a7f7f !important; }
#wkf-wrap .wkf-btn-submit           { background: #1a2744 !important; color: #fff !important; padding: 13px 32px !important; }
#wkf-wrap .wkf-btn-submit:hover     { background: #111e38 !important; }
#wkf-wrap .wkf-btn-submit:disabled  { opacity: 0.6 !important; cursor: not-allowed !important; }

/* ── Validation ── */
#wkf-wrap .wkf-field-error textarea { border-color: #d94f4f !important; }
#wkf-wrap .wkf-error-msg { display: block !important; font-family: 'DM Sans', sans-serif !important; font-size: 12px !important; color: #d94f4f !important; margin-top: 4px !important; }

/* ── Success ── */
#wkf-success { text-align: center !important; padding: 60px 24px !important; }
#wkf-wrap .wkf-success-icon { width: 64px !important; height: 64px !important; background: #e8f4f4 !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 28px !important; color: #2a7f7f !important; margin: 0 auto 20px !important; }
#wkf-success h3 { all: unset !important; display: block !important; font-family: 'DM Serif Display', serif !important; font-size: 26px !important; font-weight: 400 !important; color: #1a2744 !important; margin-bottom: 10px !important; }
#wkf-success p  { all: unset !important; display: block !important; font-family: 'DM Sans', sans-serif !important; font-size: 15px !important; color: #6b7a9a !important; max-width: 420px !important; margin: 0 auto !important; line-height: 1.6 !important; }

/* ── Error ── */
#wkf-error { background: #fff5f5 !important; border: 1px solid #feb2b2 !important; border-radius: 8px !important; padding: 16px 20px !important; font-size: 14px !important; color: #d94f4f !important; margin-top: 16px !important; font-family: 'DM Sans', sans-serif !important; }
#wkf-error a { color: #d94f4f !important; }

/* ── Mobile ── */
@media (max-width: 600px) {
  #wkf-wrap .wkf-header        { padding: 20px !important; flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
  #wkf-wrap .wkf-header-quote  { text-align: left !important; }
  #wkf-wrap .wkf-hero          { padding: 28px 20px !important; }
  #wkf-wrap .wkf-hero h2       { font-size: 22px !important; }
  #wkf-wrap .wkf-progress      { padding: 0 8px !important; }
  #wkf-wrap .wkf-step          { padding: 10px 8px !important; font-size: 11px !important; }
  #wkf-wrap .wkf-body          { padding: 24px 16px 40px !important; }
  #wkf-wrap .wkf-card          { padding: 18px 16px !important; }
  #wkf-wrap .wkf-radios-inline { flex-direction: column !important; }
}