.pdc-wrap{
  --bg:#fff;
  --muted:#6b7280;
  --txt:#0f172a;
  --pri:#1B7BC0;
  --pri-contrast:#fff;
  --ring:#cfe7f8;
  --ring-2:#9cd0f3;
  --green:#88b71b;
  --shadow:0 10px 30px rgba(2,6,23,.08);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

.pdc-card{
  width:100%;
  max-width:500px;
  margin:24px auto;
  background:var(--bg);
  border-radius:5px;
  box-shadow:var(--shadow);
  overflow:hidden;
  border:1px solid var(--ring);
}

.pdc-header{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:stretch;
  justify-content:center;
  padding:16px 16px 8px;
}

.pdc-title{
  margin:0;
  font-size:18px;
  color:#0b1b4a;
  text-align:center;
}

.pdc-seg-toggle-wide{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.pdc-seg{
  background:#ffddc4;
  border:1px solid #ffddc4;
  padding:8px 12px;
  border-radius:5px;
  cursor:pointer;
  font-weight:700;
  width:100%;
  color:#000;
}

.pdc-seg.wide{
  width:100%;
}

.pdc-seg:not(.is-active):hover{
  background:#f69248;
  color:#fff;
  border-color:#f69248;
}

.pdc-seg.is-active{
  background:var(--pri);
  color:var(--pri-contrast);
  border-color:var(--pri);
}

.pdc-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  padding:12px 16px;
}

.pdc-col-span-2{
  grid-column:1/-1;
}

.pdc-label{
  display:block;
  font-size:13px;
  color:var(--muted);
  margin-bottom:6px;
}

.pdc-input{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--ring);
  border-radius:5px;
  font-size:15px;
  background:#fff;
}

.pdc-input[readonly]{
  background:#f6f8fb;
}

.pdc-input:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(27,123,192,.15);
  border-color:var(--ring-2);
}

/* Looptijd */
.pdc-term-toggle{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.pdc-term-toggle.one-row{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:6px;
}

.pdc-term{
  border:1px solid var(--ring);
  background:#e9f4fb;
  border-radius:5px;
  padding:3px 8px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  width:100%;
  color:#000;
}

.pdc-term:hover{
  background:var(--pri);
  color:#fff;
  border-color:var(--pri);
}

.pdc-term.is-active{
  background:var(--pri);
  color:#fff;
  border-color:var(--pri);
}

.pdc-results{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:0 16px 12px;
}

.pdc-results-row{
  grid-template-columns:1fr 1fr;
}

.pdc-result{
  border:1px solid var(--ring);
  border-radius:5px;
  padding:12px;
}

.pdc-result-contrast{
  background:#f3f9fe;
  border-color:#cfe7f8;
}

.pdc-result-contrast2{
  background:#fdeadb;
  border-color:#fdeadb;
}

.pdc-result-label{
  color:var(--muted);
  font-size:13px;
}

.pdc-result-value{
  display:block;
  font-weight:800;
  font-size:18px;
  margin-top:4px;
  color:#0b1b4a;
}

.pdc-monthly-big{
  font-size:22px;
}

.pdc-divider{
  height:1px;
  background:var(--ring);
  margin:6px 0;
}

.pdc-subtitle{
  margin:6px 16px 0;
  font-size:15px;
  color:#0b1b4a;
}

/* Actie-knoppen onder de formulieren */
.pdc-actions{
  display:flex;
  gap:8px;
  justify-content:center; /* Verstuur centreren */
}

.pdc-btn{
  border:1px solid var(--ring);
  background:#d6eaf8;
  border-radius:5px;
  padding:10px 14px;
  font-weight:700;
  cursor:pointer;
}

.pdc-btn-primary{
  background:var(--pri);
  color:#fff;
  border-color:var(--pri);
}

.pdc-btn-back{
  color:#000;
}

.pdc-btn-back:hover{
  background:var(--pri);
  border-color:var(--pri);
  color:#fff;
}

.pdc-btn-cta{
  background:var(--green)!important;
  border-color:var(--green)!important;
}

/* Verstuur-knop in het offerteformulier */
.pdc-btn-send{
  min-width:210px; /* minimaal 210px breed */
  margin:0 auto;
}

/* Specifieke kleur voor Verstuur in offerte */
.pdc-quote .pdc-btn-send{
  background:#1b7bc0!important;
  border-color:#1b7bc0!important;
}

.pdc-btn-full{
  width:calc(100% - 32px);
  margin:0 16px 14px;
}

.pdc-hint{
  display:none;
}

.pdc-form-quote{
  padding-bottom:14px;
}

.pdc-msg{
  margin:6px 16px;
  font-size:13px;
  color:#000;
}

.pdc-free-note{
  margin:8px 16px 10px;
  font-size:12px;
  color:#0b1b4a;
  font-weight:700;
  text-align:center;
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
}

.pdc-free-icon{
  display:inline-flex;
}

.pdc-disclaimer{
  margin:8px 16px 0;
  font-size:11px;
  color:#4b5563;
  text-align:center;
}

.pdc-radio{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-right:16px;
}

/* Responsive */
@media (max-width:520px){
  .pdc-grid,
  .pdc-results{
    grid-template-columns:1fr;
  }

  .pdc-actions{
    justify-content:stretch; /* op mobiel mag hij gewoon full-width zijn */
  }

  .pdc-btn{
    width:100%;
  }

  .pdc-btn-full{
    width:calc(100% - 32px);
  }
}

/* Achtergrond per segment */
.pdc-wrap.seg-business .pdc-card{
  background:#ffffff !important; /* Zakelijk */
}

.pdc-wrap.seg-private .pdc-card{
  background:#ffffff !important; /* Particulier */
}

/* ZAKELIJK knop */
.pdc-seg[data-seg="business"] {
    background: #999999;
    border-color: #999999;
    color: #ffffff;
}

.pdc-seg[data-seg="business"].is-active {
    background: #1b7bc0;      /* actief */
    border-color: #1b7bc0;
    color: #fff;
}

/* PARTICULIER knop */
.pdc-seg[data-seg="private"] {
    background: #999999;
    border-color: #999999;
    color: #ffffff;
}

.pdc-seg[data-seg="private"].is-active {
    background: #f69248;      /* actief */
    border-color: #f69248;
    color: #fff;
}

/* Hover-states optioneel aanpassen (mooier zo) */
.pdc-seg[data-seg="business"]:not(.is-active):hover {
    background: #1b7bc0;
    border-color: #1b7bc0;
    color: #fff;
}

.pdc-seg[data-seg="private"]:not(.is-active):hover {
    background: #f69248;
    border-color: #f69248;
    color: #fff;
}

/* ----------------------------- */
/* Resultaat-blokken per segment */
/* ----------------------------- */

/* Zakelijk */
.pdc-wrap.seg-business .pdc-result-contrast {
    background: #f3f9fe !important;
    border-color: #cfe7f8 !important;
}

/* Particulier */
.pdc-wrap.seg-private .pdc-result-contrast {
    background: #ffddc4 !important;
    border-color: #ffddc4 !important;
}

/* Alle labels in het formulier bold maken */
.pdc-label {
    font-weight: bold !important;
}
/* --------------------------------------- */
/* Looptijd buttons – Particulier (oranje) */
/* --------------------------------------- */

.pdc-wrap.seg-private .pdc-term {
    background: #ffddc4 !important;   /* lichte oranje tint */
    border-color: #ffddc4 !important;
    color: #000 !important;
}

.pdc-wrap.seg-private .pdc-term:hover:not(.is-active) {
    background: #f69248 !important;   /* oranje hover */
    border-color: #f69248 !important;
    color: #fff !important;
}

.pdc-wrap.seg-private .pdc-term.is-active {
    background: #f69248 !important;   /* actieve button */
    border-color: #f69248 !important;
    color: #fff !important;
}
/* Verberg alleen het slottermijnveld bij particulier */
.pdc-wrap.seg-private #balloon,
.pdc-wrap.seg-private label[for="balloon"] {
    display: none !important;
}

/* Looptijd en looptijd-knoppen altijd gelijke breedte */
.pdc-term-toggle.one-row {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 6px;
}
/* Extra ruimte onder de looptijdknoppen bij particulier */
.pdc-wrap.seg-private .pdc-term-toggle.one-row {
    margin-bottom: 16px !important; /* ruimte vergroten naar wens */
}
/* Leasebedrag & Maandbedrag labels bold maken */
.pdc-result-label {
    font-weight: bold !important;
}
/* Alleen slottermijn verbergen bij particulier */
.pdc-wrap.seg-private .pdc-field label[for="balloon"],
.pdc-wrap.seg-private .pdc-field #balloon {
    display: none !important;
}
svg.fa-ok{
     width: 18px;
    height: 18px;
    fill: #88b71b;
}