/* Globale instellingen voor flexbox lay-out */
.pontifex-oi-candidates-list {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(0.75rem, 1vw + 0.3rem, 1.25rem) !important;
}

.pontifex-oi-candidate-row {
  display: flex !important;
  gap: clamp(1rem, 1vw + 0.5rem, 1.5rem) !important;
  align-items: flex-end !important;
  flex-wrap: wrap !important;
  position: relative !important;
}

.pontifex-oi-candidate-row > div {
  flex: 1 1 15% !important;
  min-inline-size: clamp(100px, 10vw, 140px) !important;
}

.pontifex-oi-row-group {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(0.3rem, 0.4vw + 0.2rem, 0.5rem) !important;
  margin-block-end: clamp(1rem, 1.5vw + 0.5rem, 1.5rem) !important;
}

.pontifex-oi-name-row,
.pontifex-oi-adres-row,
.pontifex-oi-contact-row {
  display: flex !important;
  gap: clamp(0.8rem, 1vw + 0.3rem, 1.2rem) !important;
  flex-wrap: wrap !important;
}

/* Twee kolommen */
.pontifex-oi-two-cols {
  display: flex !important;
  gap: clamp(0.8rem, 1vw + 0.3rem, 1.2rem) !important;
  align-items: flex-end !important;
  flex-wrap: nowrap !important;
}

#extra-material-checkboxes {
  padding-bottom: 1rem;
  margin-top: 0.5rem;
}

#extra-material-checkboxes > strong {
  display: block;
  margin-bottom: 0.35rem;
}

#extra-material-checkboxes label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.35rem 0;
  cursor: pointer;
}

.pontifex-oi-name-row .field,
.pontifex-oi-two-cols .field {
  flex: 1 1 0 !important;
}

.pontifex-oi-name-row label,
.pontifex-oi-two-cols .field label,
.pontifex-oi-contact-row.two-cols .field label {
  display: block !important;
  margin-block-end: 6px !important;
  font-weight: 600 !important;
  font-size: clamp(0.9rem, 1vw + 0.2rem, 1rem);
  color: var(--pontifex-black) !important;
}

.pontifex-oi-name-row .field input,
.pontifex-oi-two-cols .field input {
  inline-size: 100% !important;
  padding-block: clamp(0.3rem, 0.5vw + 0.2rem, 0.6rem) !important;
  padding-inline: clamp(0.5rem, 0.7vw + 0.3rem, 1rem) !important;
  border-radius: var(--pontifex-radius-sm) !important;
  border: 1px solid var(--pontifex-border) !important;
  font-size: clamp(0.9rem, 1vw + 0.3rem, 1rem) !important;
  font-family: var(--pontifex-font-main) !important;
  flex: 1 1 0 !important;
  min-inline-size: clamp(100px, 10vw, 140px) !important;
}

/* Contact 2 cols */
.pontifex-oi-contact-row.two-cols {
  display: flex !important;
  gap: clamp(0.8rem, 1vw + 0.3rem, 1.2rem) !important;
  align-items: flex-end !important;
  flex-wrap: nowrap !important;
}

.pontifex-oi-contact-row.two-cols .field {
  flex: 1 1 0;
}

/* Icons */
.pontifex-oi-submit-order i,
.pontifex-oi-submit-order .icon-arrow,
.pontifex-oi-save-btn i,
.pontifex-oi-home-button i {
  margin-inline-start: 7px;
}

/* Fields generic */
.pontifex-oi-candidate-row input[type="text"],
.pontifex-oi-candidate-row input[type="date"],
.pontifex-oi-order-form input {
  inline-size: 100% !important;
  padding-block: clamp(0.3rem, 0.5vw + 0.2rem, 0.6rem) !important;
  padding-inline: clamp(0.5rem, 0.7vw + 0.3rem, 1rem) !important;
  border-radius: var(--pontifex-radius-sm) !important;
  border: 1px solid var(--pontifex-border) !important;
  font-size: clamp(0.9rem, 1vw + 0.3rem, 1rem) !important;
  font-family: var(--pontifex-font-main) !important;
}

.pontifex-oi-candidate-row label {
  display: block !important;
  font-size: clamp(0.9rem, 1vw + 0.2rem, 1rem);
  font-family: var(--pontifex-font-main) !important;
  margin-block-end: 6px !important;
  font-weight: 600 !important;
  color: var(--pontifex-black) !important;
}

.pontifex-oi-order-form label {
  font-size: clamp(0.9rem, 1vw + 0.2rem, 1rem);
  font-weight: 600 !important;
}

.required {
  color: #d60000 !important;
  font-weight: bold !important;
}

/* Checkbox size (scoped) */
.pontifex-oi-candidate-form .pontifex-oi-checkbox-row input[type="checkbox"] {
  inline-size: clamp(18px, 1.2vw + 14px, 22px) !important;
  block-size: clamp(18px, 1.2vw + 14px, 22px) !important;
}

.pontifex-oi-checkbox-row input[type="checkbox"] + label {
  margin-inline-start: clamp(3px, 0.3vw + 2px, 6px) !important;
}

/* Remove candidate */
.pontifex-oi-remove-candidate {
  position: absolute !important;
  inset-inline-end: -29px;
  inset-block-start: 57%;
  transform: translateY(-50%) !important;
  inline-size: 1.65em !important;
  block-size: 1.65em !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--pontifex-orange) !important;
  border: none !important;
  display: flex;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.25em !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
  z-index: 1 !important;
  box-shadow: none !important;
}

.pontifex-oi-remove-candidate:hover,
.pontifex-oi-remove-candidate:focus {
  color: var(--pontifex-black) !important;
  background: transparent !important;
  border: none !important;
}

/* Add row link */
.pontifex-oi-candidate-addrow {
  margin-block-start: clamp(0.4rem, 0.5vw + 0.2rem, 0.8rem) !important;
  text-align: right !important;
  inline-size: 100% !important;
}

.pontifex-oi-add-candidate {
  background: none !important;
  border: none !important;
  color: var(--pontifex-orange) !important;
  font-family: var(--pontifex-font-main) !important;
  font-size: clamp(0.9rem, 1vw + 0.3rem, 1rem) !important;
  cursor: pointer !important;
  display: inline;
  text-decoration: underline !important;
  padding: 0 !important;
  margin: 0 !important;
  text-transform: none !important;
}

.kandidaat-titel {
  font-family: var(--pontifex-font-main) !important;
  font-size: 1.3rem !important;
  font-weight: var(--pontifex-title-weight) !important;
  line-height: 1.2 !important;
  color: var(--pontifex-orange) !important;
}

.pontifex-oi-add-candidate:hover {
  color: var(--pontifex-black) !important;
}

.pontifex-oi-add-candidate:focus {
  color: var(--pontifex-orange) !important;
}

/* Links in terms */
.pontifex-oi-terms a {
  color: var(--pontifex-orange) !important;
  text-decoration: underline !important;
  transition: color 0.18s !important;
}

.pontifex-oi-terms a:hover {
  color: var(--pontifex-black) !important;
}

/* Summary */
.pontifex-oi-summary-table {
  inline-size: 100% !important;
  border-collapse: collapse !important;
  font-size: clamp(1rem, 1vw + 0.2rem, 1.05rem) !important;
}

.pontifex-oi-summary-table td {
  padding-block: 0.4em !important;
  padding-inline: 0.2em !important;
}

.besteloverzicht-stap2 {
  background: #f9f9f9 !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  padding-block: clamp(1rem, 1.5vw + 0.7rem, 1.5rem) !important;
  padding-inline: clamp(1.5rem, 2vw + 0.7rem, 2.5rem) !important;
  margin-block: 30px 20px;
  margin-inline-end: 37px;
  font-family: var(--pontifex-font-main, Arial, sans-serif) !important;
}

.bo-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-block-end: 12px !important;
  font-size: clamp(0.9rem, 1vw + 0.2rem, 1rem) !important;
  border-block-end: 1px solid #e0e0e0 !important;
  padding-block-end: 6px !important;
  font-weight: 400 !important;
  color: #222 !important;
}

.bo-item:last-child,
.bo-item.totaal {
  border-block-end: none !important;
  font-size: clamp(1rem, 1vw + 0.3rem, 1.1rem) !important;
  font-weight: 600 !important;
  color: var(--pontifex-orange) !important;
  margin-block-start: 18px !important;
  letter-spacing: 0.02em !important;
}

.bo-item strong {
  font-weight: 500 !important;
  color: #333 !important;
  min-inline-size: clamp(90px, 10vw, 110px) !important;
  display: inline-block !important;
}

.bo-item span {
  text-align: right !important;
  min-inline-size: clamp(50px, 8vw, 70px) !important;
  display: inline-block !important;
  letter-spacing: 0.01em !important;
}

.pontifex-oi-terms {
  margin-block-start: 20px !important;
}

.pontifex-oi-terms label {
  font-size: clamp(0.9rem, 1vw + 0.2rem, 1rem) !important;
}

.pontifex-oi-terms input[type="checkbox"] {
  margin-inline-end: 0.45rem !important;
}

.pontifex-oi-summary-label {
  text-align: right !important;
  color: #333 !important;
}

.pontifex-oi-summary-label-total {
  font-weight: bold !important;
  text-align: right !important;
}

.bo-divider {
  border-block-end: 1px solid #e0e0e0;
  margin-block: 8px 10px;
  margin-inline: 0;
  inline-size: 100%;
  display: block;
}

.pontifex-oi-table-divider {
  border-block-start: 1px solid #c7e6ff !important;
  block-size: 1rem !important;
}

.pontifex-oi-total {
  font-weight: bold !important;
}

.pontifex-oi-empty-row {
  block-size: 1rem !important;
}

.pontifex-oi-exam {
  font-weight: 600 !important;
}

.pontifex-oi-datetime-location {
  color: #666 !important;
  font-size: clamp(0.85rem, 1vw + 0.1rem, 0.97rem) !important;
}

/* Zet de twee blokken standaard naast elkaar */
.pontifex-oi-flex-row {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(1rem, 2vw, 2rem);
  align-items: flex-start;
  margin-top: 2rem;
}

/* Forceer 50/50 verdeling */
.pontifex-oi-order-form,
.pontifex-oi-order-summary {
  flex: 0 0 50%;
  max-inline-size: 50%;
  min-inline-size: 0; /* voorkomt overflow */
  float: none;
  clear: none;
  box-sizing: border-box;
}

/* Responsive stacking */
@media (max-width: 900px) {
  .pontifex-oi-flex-row {
    display: block;
  }
  .pontifex-oi-order-form,
  .pontifex-oi-order-summary {
    max-inline-size: 100%;
    flex: 1 1 100%;
    margin-block-start: 2rem;
  }
  .pontifex-oi-candidates-list {
    inline-size: 100%;
  }
  .pontifex-oi-remove-candidate {
    inset-inline-end: -25px;
    inset-block-start: 59%;
  }
  .besteloverzicht-stap2 {
    margin-block-start: 2rem;
    margin-inline: 0;
  }
  /* Back-link regel toegevoegd */
  .pontifex-oi-back-link {
    margin-block-start: 7px !important;
    line-height: 1.3em !important;
  }
}

/* Mobile field ordering & fixes */
@media (max-width: 700px) {
  .pontifex-oi-name-row-mobile {
    flex-wrap: wrap !important;
    gap: clamp(0.8rem, 1vw + 0.3rem, 1.2rem) !important;
  }
  .pontifex-oi-name-row-mobile .first-name-group,
  .pontifex-oi-name-row-mobile .middle-name-group {
    flex: 1 1 45% !important;
    order: 1 !important;
  }
  .pontifex-oi-name-row-mobile .last-name-group {
    flex: 1 1 100% !important;
    order: 2 !important;
  }
  .pontifex-oi-contact-row.two-cols {
    flex-direction: row !important;
    align-items: flex-end !important;
    flex-wrap: wrap !important;
  }
  .pontifex-oi-order-form .pontifex-oi-two-cols:nth-of-type(4) {
    flex-direction: row !important;
    align-items: flex-end !important;
    flex-wrap: wrap !important;
  }
  .pontifex-oi-candidate-addrow {
    text-align: right !important;
    padding-inline-end: clamp(0.25rem, 0.3vw + 0.1rem, 0.5rem) !important;
  }
  .pontifex-oi-remove-candidate {
    inset-inline-end: -1.15rem;
    inset-block-start: 79%;
  }
  .pontifex-oi-contact-row-labels {
    display: none !important;
  }
  .pontifex-oi-submit-order {
    margin-block-start: 1rem !important;
    margin-inline: auto !important;
  }
}

@media (max-width: 600px) {
  .besteloverzicht-stap2 {
    padding-block: clamp(0.75rem, 1vw + 0.3rem, 1rem) !important;
    padding-inline: clamp(0.4rem, 0.5vw + 0.2rem, 0.8rem) !important;
    max-inline-size: 98vw !important;
    margin-block: 0;
    margin-inline: 0;
  }
  .bo-item strong,
  .bo-item span {
    font-size: clamp(0.85rem, 0.9vw + 0.2rem, 0.97rem) !important;
  }
  .pontifex-oi-candidate-row label {
    font-size: clamp(0.8rem, 0.8vw + 0.2rem, 0.94rem) !important;
    line-height: 1em !important;
  }
  .pontifex-oi-order-form label {
    font-size: clamp(0.8rem, 0.8vw + 0.2rem, 0.94rem) !important;
  }
}