.pdc-calculator {
    font-family: 'Segoe UI', system-ui, sans-serif;
    max-width: 650px;
    margin: 40px auto;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    overflow: hidden;
    border: 1px solid #f0f0f0;
}

/* Knoppen Input */
.pdc-controls {
    padding: 25px 30px 10px;
    background: #fff;
}
.pdc-group-label {
    font-size: 13px; font-weight: 700; text-transform: uppercase; color: #999; margin: 15px 0 10px;
}
.pdc-grid { display: grid; gap: 10px; }
.pdc-grid-3 { grid-template-columns: repeat(3, 1fr); }
.pdc-grid-2 { grid-template-columns: repeat(2, 1fr); }

.pdc-btn {
    border: 1px solid #eee; background: #fdfdfd; padding: 10px; border-radius: 8px; cursor: pointer; text-align: center; transition: all 0.2s;
}
.pdc-btn:hover { border-color: #ddd; transform: translateY(-1px); }
.pdc-btn.selected { border-color: #f47621; background: #fff5f0; color: #d15600; font-weight: 600; }
.pdc-btn-title { display: block; font-size: 14px; }
.pdc-btn-meta { display: block; font-size: 11px; color: #888; }

/* SUMMARY BOX (Actiebar) */
.pdc-summary-box {
    background: #fdfdfd;
    padding: 25px 35px;
    border-top: 1px solid #eee;
}

/* Bovenste Rij: Badge en Knop naast elkaar */
.pdc-summary-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px; /* Ruimte naar de prijsregel eronder */
}

/* De "Totaal voordeel" pil */
.pdc-save-pill {
    display: inline-block;
    border: 2px solid #27ae60;
    color: #27ae60;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: 800; /* Het bedrag blijft dik */
    font-size: 17px;
    background: #fff;
    white-space: nowrap;
}

/* De tekst "Totaal voordeel:" (Dunner en iets kleiner) */
.pdc-label-light {
    font-weight: 400; /* Normaal gewicht */
    font-size: 15px;  /* Iets kleiner */
    margin-right: 4px;
    color: #27ae60;
}


/* De Knop */
.pdc-cta-button {
    display: inline-block;
    background: #f47621;
    color: #fff;
    text-decoration: none;
    padding: 12px 25px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 6px;
    transition: all 0.2s;
    white-space: nowrap;
    box-shadow: 0 4px 6px rgba(244, 118, 33, 0.2);
}
.pdc-cta-button:hover {
    background: #d15600;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(244, 118, 33, 0.3);
}
.pdc-cta-button .dashicons { vertical-align: middle; margin-left: 5px; font-size: 18px; }

/* Onderste Rij: Prijs tekst */
.pdc-mini-price-row {
    font-size: 15px;
    color: #555;
    text-align: left; /* Of center als je dat mooier vindt */
    padding-left: 5px; /* Uitlijnen met ronding van de pil erboven */
}
.pdc-mini-price-row strong {
    font-size: 20px;
    font-weight: 800;
    color: #333;
}

/* Mobiel: Alles onder elkaar */
@media(max-width: 600px) {
    .pdc-summary-top-row { flex-direction: column; gap: 15px; align-items: stretch; }
    .pdc-save-pill { text-align: center; }
    .pdc-cta-button { text-align: center; }
    .pdc-mini-price-row { text-align: center; margin-top: 10px; }
}


/* Toggle wrapper */
.pdc-toggle-wrapper {
    background: #fdfdfd;
    text-align: center;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0; /* Subtiele afsluiting als details dicht zijn */
}
.pdc-toggle-details {
    background: transparent; border: none; color: #999; font-size: 13px; cursor: pointer; text-decoration: underline;
}
.pdc-toggle-details:hover { color: #666; }


/* DETAILS PANEL */
.pdc-details-panel { background: #fff; border-top: 1px solid #e0e0e0; }
.pdc-detail-content { padding: 30px; }

.pdc-out-header { display: flex; justify-content: space-between; margin-bottom: 20px; }
.pdc-title-block h3 { margin: 0; color: #f47621; font-size: 20px; }
.pdc-deal-tag { background: #000; color: #fff; padding: 3px 8px; font-size: 12px; border-radius: 4px; display: inline-block; margin-top: 5px; }

.pdc-price-old { text-decoration: line-through; color: #bbb; }
.pdc-price-now { font-size: 24px; font-weight: 800; color: #333; }
.pdc-hr { border-top: 1px solid #eee; margin: 15px 0; }

.pdc-spec-row { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 14px; }
.pdc-spec-val .new { font-weight: 700; color: #333; }
.pdc-spec-val .free { font-weight: 700; color: #333; }
.pdc-spec-info span { display: block; font-size: 12px; color: #888; }