/* =========================
   BASE / RESET
========================= */
.doaf-form { width: 100% !important; }

.doaf-field { margin: 0 0 16px !important; }

.doaf-label {
  display: block !important;
  margin: 0 0 6px !important;
}

.doaf-input,
.doaf-select {
  width: 100% !important;
  max-width: 520px !important;
}

.doaf-error {
  display: none !important;
  margin-top: 6px !important;
  font-size: 0.9em !important;
}

.doaf-field.has-error .doaf-input,
.doaf-field.has-error .doaf-select {
  outline: 2px solid currentColor !important;
}

/* =========================
   FORM CONTAINER
========================= */
.doaf-form {
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 40px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.1) !important;
  box-sizing: border-box !important;
}

/* =========================
   STEPPER
========================= */
.doaf-stepper {
  margin-bottom: 32px !important;
}

.doaf-stepper__list {
  display: flex !important;
  gap: 16px !important;
  padding: 0 !important;
  list-style: none !important;
}

.doaf-stepper__item {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  border: 3px solid #e5e7eb !important;
  background: #f9fafb !important;
  color: #9ca3af !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: 20px !important;
}

.doaf-stepper__item.is-active {
  background: #bf0000 !important;
  border-color: #bf0000 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 6px rgba(191,0,0,.15) !important;
}

.doaf-stepper__item.is-done {
  background: #e5e7eb !important;
  color: #6b7280 !important;
  opacity: 1 !important;
}

/* =========================
   FIELDS
========================= */
.doaf-field {
  margin-bottom: 24px !important;
}

.doaf-label {
  margin-bottom: 8px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #374151 !important;
}

.doaf-required {
  color: #bf0000 !important;
  margin-left: 4px !important;
}

/* =========================
   INPUTS
========================= */
.doaf-input,
.doaf-select,
.doaf-field textarea {
  width: 100% !important;
  padding: 12px 16px !important;
  border-radius: 10px !important;
  border: 2px solid #e5e7eb !important;
  font-size: 15px !important;
  background: #ffffff !important;
  color: #1f2937 !important;
  box-sizing: border-box !important;
  transition: border .2s, box-shadow .2s !important;
}

.doaf-input:focus,
.doaf-select:focus,
.doaf-field textarea:focus {
  outline: none !important;
  border-color: #bf0000 !important;
  box-shadow: 0 0 0 3px rgba(191,0,0,.1) !important;
}

.doaf-input:disabled {
  background: #f3f4f6 !important;
  cursor: not-allowed !important;
  opacity: .6 !important;
}

/* =========================
   COMBOBOX (MERK / MODEL)
========================= */
.doaf-combobox {
  position: relative !important;
}

.doaf-combobox__list {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: 0 !important;
  background: #ffffff !important;
  border: 2px solid #e5e7eb !important;
  border-radius: 12px !important;
  max-height: 260px !important;
  overflow-y: auto !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.12) !important;
  z-index: 9999 !important;
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.doaf-combobox.is-open .doaf-combobox__list {
  display: block !important;
}

.doaf-combobox__option {
  padding: 12px 16px !important;
  cursor: pointer !important;
  font-size: 15px !important;
}

.doaf-combobox__option:hover,
.doaf-combobox__option.is-active {
  background: #bf0000 !important;
  color: #ffffff !important;
}

.doaf-combobox__option.is-empty {
  cursor: default !important;
  color: #6b7280 !important;
  background: #f9fafb !important;
}

/* =========================
   ERRORS
========================= */
.doaf-field.has-error .doaf-input,
.doaf-field.has-error .doaf-select {
  border-color: #dc2626 !important;
}

.doaf-error {
  display: none !important;
  margin-top: 6px !important;
  font-size: 13px !important;
  color: #dc2626 !important;
}

.doaf-field.has-error .doaf-error {
  display: block !important;
}

/* =========================
   NAV BUTTONS
========================= */
.doaf-nav {
  display: flex !important;
  gap: 16px !important;
  margin-top: 32px !important;
  padding-top: 24px !important;
  border-top: 2px solid #f3f4f6 !important;
}

.doaf-btn {
  padding: 16px 40px !important;
  border-radius: 12px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  transition: all .2s !important;
}

.doaf-btn--primary {
  background: #bf0000 !important;
  border: 2px solid #bf0000 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(191,0,0,.25) !important;
}

.doaf-btn--primary:hover:not(:disabled) {
  background: #a00000 !important;
  border-color: #a00000 !important;
}

.doaf-btn--secondary {
  background: #e5e7eb !important;
  color: #4b5563 !important;
  border: 2px solid transparent !important;
}

.doaf-btn--secondary:hover:not(:disabled) {
  background: #d1d5db !important;
}

.doaf-btn:disabled {
  opacity: .6 !important;
  cursor: not-allowed !important;
}

/* =========================
   UPLOAD
========================= */
.doaf-upload {
  border: 2px dashed #e5e7eb !important;
  border-radius: 12px !important;
  padding: 24px !important;
  text-align: center !important;
  cursor: pointer !important;
}

.doaf-upload.is-drag {
  border-color: #bf0000 !important;
  background: rgba(191,0,0,.05) !important;
}

.doaf-upload__drop {
  font-weight: 600 !important;
  color: #374151 !important;
}

/* =========================
   FEEDBACK
========================= */
.doaf-panel--feedback {
  text-align: center !important;
}

.doaf-feedback__success {
  background: #d1fae5 !important;
  color: #065f46 !important;
  border: 2px solid #6ee7b7 !important;
  padding: 16px !important;
  border-radius: 12px !important;
}

.doaf-feedback__error {
  background: #fee2e2 !important;
  color: #991b1b !important;
  border: 2px solid #fca5a5 !important;
  padding: 16px !important;
  border-radius: 12px !important;
}

/* =========================
   WIZARD CORE (ESSENTIEEL)
========================= */
.doaf-panel[data-step] { display: none !important; }
.doaf-panel[data-step].is-active { display: block !important; }

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 768px) {
  .doaf-form { padding: 24px !important; }
  .doaf-nav { flex-direction: column !important; }
  .doaf-btn { width: 100% !important; }
  .doaf-stepper__item {
    width: 48px !important;
    height: 48px !important;
    font-size: 18px !important;
  }
}
/* =========================
   FIELD GROUPS (DESKTOP / TABLET)
========================= */

/* Wrapper: we maken van panels een grid */
@media (min-width: 768px) {

  /* Maak van elke panel een grid */
  .doaf-panel {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    column-gap: 24px !important;
  }

  /* Standaard: velden nemen 1 kolom */
  .doaf-field {
    grid-column: span 1 !important;
  }

  /* -------------------------
     MERK + MODEL naast elkaar
  ------------------------- */
  .doaf-field[data-field="make"],
  .doaf-field[data-field="model"] {
    grid-column: span 1 !important;
  }

  /* -------------------------
     BOUWJAAR + BRANDSTOF naast elkaar
     (pas keys aan indien nodig)
  ------------------------- */
  .doaf-field[data-field="year"],
  .doaf-field[data-field="fuel"] {
    grid-column: span 1 !important;
  }

  /* -------------------------
     Velden die ALTIJD volle breedte moeten nemen
  ------------------------- */
  .doaf-field[data-field="photos"],
  .doaf-field[data-field="message"],
  .doaf-field[data-field="description"],
  .doaf-field[data-field="email"],
  .doaf-field[data-field="phone"] {
    grid-column: span 2 !important;
  }

  /* Navigatie (vorige / volgende) altijd volle breedte */
  .doaf-nav {
    grid-column: span 2 !important;
  }
}

/* =========================
   MOBILE: alles onder elkaar
========================= */
@media (max-width: 767px) {
  .doaf-panel {
    display: block !important;
  }
}