/**
 * DPS aanvraagformulier v2 — styling
 *
 * Wordt geladen door includes/form-v2.php via wp_enqueue_style.
 * Alle selectors zijn gescoped met :is(#dpsFormV2, .dps-form-v2) zodat WP-thema
 * en Elementor de styling niet kunnen overschrijven (vandaar ook de
 * !important's).
 *
 * WAAROM DIE :is() (2026-10-29)
 * Het formulier is opgeknipt in losse shortcodes, dus er is niet langer één
 * element met id="dpsFormV2" waar alles in zit; elk blok draagt nu de class
 * .dps-form-v2. Platweg de id door die class vervangen kon niet: iets meer dan
 * de helft van de declaraties hier heeft geen !important en haalt zijn gewicht
 * uit die id. Een class weegt lichter, en dan wint Elementor alsnog.
 *
 * :is() lost dat op: zo'n lijst krijgt de specificiteit van zijn ZWAARSTE
 * argument. :is(#dpsFormV2, .dps-form-v2) weegt dus als een id, ook waar hij
 * op de class matcht. De oude id blijft daarnaast gewoon werken.
 *
 * Huisstijl-kleuren De Party Service:
 *   Primary rose:  #E64E8C    (knoppen, accenten)
 *   Dark purple:   #282A6C    (titels, hover, active text)
 *   Light pink bg: #fef1f6    (active-state achtergrond)
 *   Peach:         #FE807D    (secundair accent)
 *   Tangerine:     #F39916    (highlight)
 */

/* ============================================================ */
/* RESET + ISOLATION                                            */
/* ============================================================ */

:is(#dpsFormV2,.dps-form-v2),
:is(#dpsFormV2,.dps-form-v2) *,
:is(#dpsFormV2,.dps-form-v2) *::before,
:is(#dpsFormV2,.dps-form-v2) *::after { box-sizing: border-box !important; }

/*
 * Typografie, herzien 2026-09-04.
 *
 * Het formulier stond op Inter 13-14px terwijl de site zelf Roboto 16px/24
 * gebruikt, met Roboto Slab voor koppen en Roboto Condensed voor knoppen.
 * Naast elkaar oogde de plugin daardoor als kleine letters van een ander merk.
 * Gemeten op de live site, niet gegokt.
 *
 * inherit is bewust: verandert het thema ooit van lettertype, dan gaat dit mee.
 * De variabelen eronder zijn de enige plek waar een maat wordt vastgelegd.
 */
:is(#dpsFormV2,.dps-form-v2),
.dps-mandje {
    --dps-kop:    'Roboto Slab', Georgia, serif;
    --dps-knop:   'Roboto Condensed', 'Roboto', system-ui, sans-serif;
    --dps-xs:     12px;   /* artikelnummer, kleine bijschriften */
    --dps-sm:     13px;   /* hulpteksten */
    --dps-md:     15px;   /* secundaire regels */
    --dps-basis:  16px;   /* lopende tekst en invoervelden, gelijk aan de site */
    --dps-lg:     18px;   /* productnaam */
    --dps-xl:     22px;   /* koppen binnen het formulier */

    font-family: inherit !important;
    font-size: var(--dps-basis) !important;
    line-height: 1.5 !important;
    color: #1f2937 !important;
}

/* Productnaam in de mandjesregel: Roboto Condensed, net als de knoppen. */
:is(#dpsFormV2,.dps-form-v2) .dps-rij-naam,
.dps-mandje .dps-rij-naam { font-family: var(--dps-knop) !important; font-weight: 500 !important; }
/* Geen streep onder de productnaam. Was een stippellijn om aan te geven dat je
   erop kunt klikken; leest als een correctie in de tekst (2026-09-04). */
:is(#dpsFormV2,.dps-form-v2) .dps-rij-naam a,
.dps-mandje .dps-rij-naam a { border-bottom: 0 !important; text-decoration: none !important; }
:is(#dpsFormV2,.dps-form-v2) .dps-rij-naam a:hover,
.dps-mandje .dps-rij-naam a:hover { text-decoration: underline !important; }

/* Koppen in het lettertype van de site, niet in dat van het formulier. */
:is(#dpsFormV2,.dps-form-v2) h2,
:is(#dpsFormV2,.dps-form-v2) h3,
.dps-mandje h2,
.dps-mandje h3,
.dps-mandje-kop { font-family: var(--dps-kop) !important; }

/* Knoppen die als knop van de site moeten lezen. De plus/min-stepper en de
   optiepillen niet: dat zijn bedieningselementen, geen call-to-action. */
:is(#dpsFormV2,.dps-form-v2) .dps-btn-primary,
:is(#dpsFormV2,.dps-form-v2) .dps-btn-secondary,
.dps-mandje-knop,
.dps-mandje-knop-2 { font-family: var(--dps-knop) !important; letter-spacing: .2px !important; }

/* Ook op de mandjespagina, niet alleen in het formulier (2026-09-04).
   Stond hij er niet, dan drukte het thema zijn eigen text-transform:uppercase
   door en schreeuwden de optieknoppen in hoofdletters. */
:is(#dpsFormV2,.dps-form-v2) button,
.dps-mandje button {
    font-family: inherit !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    min-height: auto !important;
    min-width: auto !important;
}

:is(#dpsFormV2,.dps-form-v2) input,
:is(#dpsFormV2,.dps-form-v2) textarea,
:is(#dpsFormV2,.dps-form-v2) select {
    font-family: inherit !important;
    text-transform: none !important;
    line-height: 1.4 !important;
    min-height: auto !important;
}

:is(#dpsFormV2,.dps-form-v2) h2,
:is(#dpsFormV2,.dps-form-v2) h3,
:is(#dpsFormV2,.dps-form-v2) p {
    margin: 0 !important;
    padding: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

:is(#dpsFormV2,.dps-form-v2) .dps-form-wrap {
    /* Geen vaste max-width — laat de website-container de breedte bepalen */
    width: 100%;
    margin: 0 auto;
    padding: 16px 0;
}

/* ============================================================ */
/* PROGRESS BAR                                                  */
/* ============================================================ */

/* ======================================================================
 * DE VIER STAPPEN ALS TABBLADEN (herzien 2026-10-29)
 *
 * Waren genummerde bolletjes op een roze lijn. Dat nummerde hetzelfde als
 * het stappenplan erboven ([dps_stappen]), en bij vier stappen naast elkaar
 * werd de lijn het drukste element op het scherm terwijl hij niets zei wat
 * de bolletjes niet al zeiden.
 *
 * Nu: één grijze bak met vier vlakken. Waar je bent is wit met een
 * schaduwtje, wat je gehad hebt is leesbaar maar rustig, wat nog komt is
 * grijs. Drie standen die in vulling én kleur verschillen, niet alleen in
 * kleur.
 * ====================================================================== */
:is(#dpsFormV2,.dps-form-v2) .dps-progress {
    display: flex !important;
    gap: 4px !important;
    padding: 5px !important;
    margin-bottom: 20px !important;
    background: #f1f3f7 !important;
    border: 1px solid #e7eaf0 !important;
    border-radius: 12px !important;
    position: static !important;
    align-items: stretch !important;
    overflow-x: auto !important;          /* op een telefoon schuift hij */
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
}
:is(#dpsFormV2,.dps-form-v2) .dps-progress::-webkit-scrollbar { display: none !important; }

:is(#dpsFormV2,.dps-form-v2) .dps-step-btn {
    flex: 1 1 0 !important;
    min-width: 92px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #7c879c !important;
    font-family: var(--dps-knop) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    text-align: center !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: background .14s ease, color .14s ease !important;
}
:is(#dpsFormV2,.dps-form-v2) .dps-step-btn span { display: inline !important; }
:is(#dpsFormV2,.dps-form-v2) .dps-step-btn:hover { color: #334155 !important; }

/* Waar je nu bent. */
:is(#dpsFormV2,.dps-form-v2) .dps-step-btn.dps-current {
    background: #ffffff !important;
    border-color: #e2e6ee !important;
    color: #282A6C !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 3px rgba(15,23,42,.10) !important;
    cursor: default !important;
}

/* Al gehad: leesbaar, met een vinkje ervoor. Geen tweede witte vlak, want
   dan weet je niet meer waar je bent. */
:is(#dpsFormV2,.dps-form-v2) .dps-step-btn.dps-done { color: #047857 !important; }
:is(#dpsFormV2,.dps-form-v2) .dps-step-btn.dps-done:hover { color: #065f46 !important; }
:is(#dpsFormV2,.dps-form-v2) .dps-step-btn.dps-done::before {
    content: '' !important;
    flex: none !important;
    width: 13px !important; height: 13px !important;
    background: currentColor !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat !important;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat !important;
}

@media (max-width: 560px) {
    :is(#dpsFormV2,.dps-form-v2) .dps-step-btn { font-size: 13px !important; padding: 9px 10px !important; min-width: 84px !important; }
}

:is(#dpsFormV2,.dps-form-v2) .dps-step-btn.dps-current span,
:is(#dpsFormV2,.dps-form-v2) .dps-step-btn.dps-done span { color: #1f2937 !important; }

/* ============================================================ */
/* LAYOUT                                                        */
/* ============================================================ */

:is(#dpsFormV2,.dps-form-v2) .dps-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 900px) {
    :is(#dpsFormV2,.dps-form-v2) .dps-form-grid { grid-template-columns: 2fr 1fr; }
}

:is(#dpsFormV2,.dps-form-v2) .dps-form-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 24px;
}

/* ============================================================ */
/* STAP CONTENT                                                  */
/* ============================================================ */

:is(#dpsFormV2,.dps-form-v2) .dps-step { display: none; }
:is(#dpsFormV2,.dps-form-v2) .dps-step.dps-step-active { display: block; }

:is(#dpsFormV2,.dps-form-v2) .dps-step h2 {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #282A6C !important;
    margin: 0 0 4px !important;
}

:is(#dpsFormV2,.dps-form-v2) .dps-step .dps-sub {
    font-size: 15px !important;
    color: #64748b !important;
    margin: 0 0 16px !important;
}

:is(#dpsFormV2,.dps-form-v2) .dps-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    margin: 12px 0 6px;
}

:is(#dpsFormV2,.dps-form-v2) .dps-label .dps-opt {
    font-weight: 400;
    color: #94a3b8;
    font-size: 13px;
}

/* ============================================================ */
/* INPUT VELDEN                                                  */
/* ============================================================ */

:is(#dpsFormV2,.dps-form-v2) input[type="text"],
:is(#dpsFormV2,.dps-form-v2) input[type="email"],
:is(#dpsFormV2,.dps-form-v2) input[type="tel"],
:is(#dpsFormV2,.dps-form-v2) input[type="date"],
:is(#dpsFormV2,.dps-form-v2) textarea {
    width: 100% !important;
    padding: 10px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    background: #fff !important;
    color: #1f2937 !important;
    box-shadow: none !important;
}

:is(#dpsFormV2,.dps-form-v2) input:focus,
:is(#dpsFormV2,.dps-form-v2) textarea:focus {
    outline: none !important;
    border-color: #E64E8C !important;
    box-shadow: 0 0 0 1px #E64E8C33 !important;
}

:is(#dpsFormV2,.dps-form-v2) .dps-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* ============================================================ */
/* TOGGLE BUTTONS (Particulier/Zakelijk, Bezorgen/Afhalen)       */
/* ============================================================ */

:is(#dpsFormV2,.dps-form-v2) .dps-toggle-btn {
    padding: 14px !important;
    border: 2px solid #cbd5e1 !important;
    background: #fff !important;
    color: #1f2937 !important;
    border-radius: 8px !important;
    cursor: pointer;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-align: left !important;
    transition: all .15s;
    width: 100% !important;
}

:is(#dpsFormV2,.dps-form-v2) .dps-toggle-btn:hover {
    border-color: #94a3b8 !important;
    background: #fff !important;
    color: #1f2937 !important;
}

:is(#dpsFormV2,.dps-form-v2) .dps-toggle-btn.dps-active {
    border-color: #E64E8C !important;
    background: #fef1f6 !important;
    color: #282A6C !important;
}

:is(#dpsFormV2,.dps-form-v2) .dps-toggle-sub {
    display: block;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #64748b !important;
    margin-top: 2px;
}

:is(#dpsFormV2,.dps-form-v2) .dps-zakelijk {
/*    margin: 12px 0;
    padding: 12px;
    background: #fef1f6;
    border-radius: 4px;*/
}

/* ============================================================ */
/* ADRES GRID                                                    */
/* ============================================================ */

:is(#dpsFormV2,.dps-form-v2) .dps-addr-grid {
    display: grid;
    /* Mobiel: 12-col grid zodat Nr + Toevoeging naast elkaar passen.
       Andere velden krijgen via :nth-child span 12 zodat ze de hele breedte
       innemen. */
    grid-template-columns: repeat(12, 1fr);
    gap: 8px;
}
:is(#dpsFormV2,.dps-form-v2) .dps-addr-grid > *:nth-child(1) { grid-column: span 12; } /* Straatnaam */
:is(#dpsFormV2,.dps-form-v2) .dps-addr-grid > *:nth-child(2) { grid-column: span 5;  } /* Nr */
:is(#dpsFormV2,.dps-form-v2) .dps-addr-grid > *:nth-child(3) { grid-column: span 7;  } /* Toevoeging */
:is(#dpsFormV2,.dps-form-v2) .dps-addr-grid > *:nth-child(4) { grid-column: span 12; } /* Postcode */
:is(#dpsFormV2,.dps-form-v2) .dps-addr-grid > *:nth-child(5) { grid-column: span 12; } /* Plaats */
:is(#dpsFormV2,.dps-form-v2) .dps-addr-grid > *:nth-child(6) { grid-column: span 12; } /* Land */

@media (min-width: 600px) {
    /* 12-koloms grid zodat row 1 (Straat/Nr/Toev) én row 2 (Postcode/Plaats/Land)
       elk hun eigen ratio kunnen krijgen. */
    :is(#dpsFormV2,.dps-form-v2) .dps-addr-grid { grid-template-columns: repeat(12, 1fr); }
    /* Row 1 */
    :is(#dpsFormV2,.dps-form-v2) .dps-addr-grid > *:nth-child(1) { grid-column: span 7; } /* Straatnaam */
    :is(#dpsFormV2,.dps-form-v2) .dps-addr-grid > *:nth-child(2) { grid-column: span 2; } /* Nr */
    :is(#dpsFormV2,.dps-form-v2) .dps-addr-grid > *:nth-child(3) { grid-column: span 3; } /* Toevoeging */
    /* Row 2 */
    :is(#dpsFormV2,.dps-form-v2) .dps-addr-grid > *:nth-child(4) { grid-column: span 3; } /* Postcode */
    :is(#dpsFormV2,.dps-form-v2) .dps-addr-grid > *:nth-child(5) { grid-column: span 5; } /* Plaats */
    :is(#dpsFormV2,.dps-form-v2) .dps-addr-grid > *:nth-child(6) { grid-column: span 4; } /* Land */
}

:is(#dpsFormV2,.dps-form-v2) .dps-details {
    margin-top: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 14px 14px;
    cursor: pointer;
}

:is(#dpsFormV2,.dps-form-v2) .dps-details summary {
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    outline: none;
}

:is(#dpsFormV2,.dps-form-v2) .dps-details summary::-webkit-details-marker { display: none; }

:is(#dpsFormV2,.dps-form-v2) .dps-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    margin-top: 12px;
    cursor: pointer;
}

/* ============================================================ */
/* INDICATIEF LOGISTIEK BLOK                                     */
/* ============================================================ */

:is(#dpsFormV2,.dps-form-v2) .dps-logistiek {
    margin-top: 16px;
    background: linear-gradient(135deg, #fef1f6 0%, #eef2ff 100%);
    border: 2px dashed #f9a8d4;
    border-radius: 12px;
    padding: 18px 18px 16px;
}

:is(#dpsFormV2,.dps-form-v2) .dps-logistiek-head {
    font-size: 15px;
    font-weight: 700;
    color: #282A6C;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

:is(#dpsFormV2,.dps-form-v2) .dps-tag {
    font-size: 12px;
    background: #fff;
    color: #282A6C;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
    font-weight: 600;
}

:is(#dpsFormV2,.dps-form-v2) .dps-logistiek-row {
    background: rgba(255, 255, 255, .65);
    border: 1px solid #fff;
    border-radius: 8px;
    padding: 11px 14px;
    margin-top: 8px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 4px; /* alleen lichte ademruimte — woorden mogen niet uit elkaar springen */
}
:is(#dpsFormV2,.dps-form-v2) .dps-logistiek-row:first-of-type { margin-top: 0; }
/* Het icoon mag iets meer ruimte naar de tekst dan de woorden onderling */
:is(#dpsFormV2,.dps-form-v2) .dps-logistiek-row > .dps-ic { margin-right: 6px; }

/* Info-noot onderaan het logistiek-blok — flink luchtig gescheiden */
:is(#dpsFormV2,.dps-form-v2) .dps-logistiek-note {
    margin: 22px 0 0 !important;
    padding-top: 16px !important;
    border-top: 1px dashed rgba(40, 42, 108, 0.22) !important;
    font-size: 12px !important;
    color: #64748b !important;
    line-height: 1.55 !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
}
:is(#dpsFormV2,.dps-form-v2) .dps-logistiek-note .dps-ic {
    flex-shrink: 0;
    margin-top: 1px;
}
:is(#dpsFormV2,.dps-form-v2) .dps-logistiek-note .dps-ic svg {
    width: 14px;
    height: 14px;
    color: #94a3b8;
}

/* ============================================================ */
/* PLACEHOLDER + INFO BOX                                        */
/* ============================================================ */

:is(#dpsFormV2,.dps-form-v2) .dps-placeholder {
    background: #f9fafb;
    border: 1px dashed #cbd5e1;
    border-radius: 4px;
    padding: 20px;
    text-align: center;
    font-size: 14px;
    color: #64748b;
    margin-top: 14px;
}

:is(#dpsFormV2,.dps-form-v2) .dps-info-box {
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    border-radius: 4px;
    padding: 12px;
    margin-top: 14px;
}

/* ============================================================ */
/* TIJDSLOT BUTTONS (Ochtend/Middag/Flexibel)                    */
/* ============================================================ */

:is(#dpsFormV2,.dps-form-v2) .dps-slot-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
}

:is(#dpsFormV2,.dps-form-v2) .dps-slot {
    padding: 10px !important;
    border: 2px solid #cbd5e1 !important;
    background: #fff !important;
    color: #1f2937 !important;
    border-radius: 4px !important;
    cursor: pointer;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: center !important;
    line-height: 1.4 !important;
}

:is(#dpsFormV2,.dps-form-v2) .dps-slot:hover {
    border-color: #94a3b8 !important;
    background: #fff !important;
}

:is(#dpsFormV2,.dps-form-v2) .dps-slot.dps-active {
    border-color: #E64E8C !important;
    background: #fef1f6 !important;
    color: #282A6C !important;
}

:is(#dpsFormV2,.dps-form-v2) .dps-slot span {
    display: block;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #64748b !important;
}

/* ============================================================ */
/* NAVIGATION                                                    */
/* ============================================================ */

:is(#dpsFormV2,.dps-form-v2) .dps-nav-row {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
    gap: 8px;
}

:is(#dpsFormV2,.dps-form-v2) .dps-btn-primary {
    background: #E64E8C !important;
    color: #fff !important;
    border: 0 !important;
    padding: 12px 24px !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    cursor: pointer;
}

:is(#dpsFormV2,.dps-form-v2) .dps-btn-primary:hover {
    background: #282A6C !important;
    color: #fff !important;
}

:is(#dpsFormV2,.dps-form-v2) .dps-btn-secondary {
    background: #fff !important;
    color: #1f2937 !important;
    border: 1px solid #cbd5e1 !important;
    padding: 10px 20px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    cursor: pointer;
}

:is(#dpsFormV2,.dps-form-v2) .dps-btn-secondary:hover {
    background: #f9fafb !important;
    color: #1f2937 !important;
}

/* ============================================================ */
/* CART SIDEBAR                                                  */
/* ============================================================ */

:is(#dpsFormV2,.dps-form-v2) .dps-cart-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 18px;
    position: sticky;
    top: 16px;
}

:is(#dpsFormV2,.dps-form-v2) .dps-cart-card h3 {
    margin: 0 0 12px !important;
    font-size: 16px !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

:is(#dpsFormV2,.dps-form-v2) .dps-cart-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

:is(#dpsFormV2,.dps-form-v2) .dps-cart-list li {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 15px;
}

:is(#dpsFormV2,.dps-form-v2) .dps-cart-totals {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
}

:is(#dpsFormV2,.dps-form-v2) .dps-cart-totals > div {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    margin-top: 4px;
}

/* ============================================================ */
/* RESULT MELDINGEN                                              */
/* ============================================================ */

:is(#dpsFormV2,.dps-form-v2) .dps-result-success {
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    padding: 16px;
    border-radius: 8px;
    margin-top: 16px;
    color: #047857;
}

:is(#dpsFormV2,.dps-form-v2) .dps-result-error {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    padding: 16px;
    border-radius: 8px;
    margin-top: 16px;
    color: #991b1b;
}

/* ============================================================ */
/* LUCIDE ICOON WRAPPERS                                         */
/* ============================================================ */

:is(#dpsFormV2,.dps-form-v2) .dps-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 1;
}

:is(#dpsFormV2,.dps-form-v2) .dps-ic svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

:is(#dpsFormV2,.dps-form-v2) .dps-toggle-btn .dps-ic svg {
    width: 18px;
    height: 18px;
    color: #64748b;
}

:is(#dpsFormV2,.dps-form-v2) .dps-toggle-btn.dps-active .dps-ic svg { color: #282A6C; }

:is(#dpsFormV2,.dps-form-v2) .dps-slot .dps-ic svg {
    width: 16px;
    height: 16px;
    color: #64748b;
}

:is(#dpsFormV2,.dps-form-v2) .dps-slot.dps-active .dps-ic svg { color: #282A6C; }

:is(#dpsFormV2,.dps-form-v2) .dps-btn-primary .dps-ic svg {
    width: 16px;
    height: 16px;
    color: #fff;
}

:is(#dpsFormV2,.dps-form-v2) .dps-btn-secondary .dps-ic svg {
    width: 16px;
    height: 16px;
    color: #1f2937;
}

:is(#dpsFormV2,.dps-form-v2) .dps-ic-emerald svg { color: #10b981; }
:is(#dpsFormV2,.dps-form-v2) .dps-ic-slate svg { color: #64748b; }
:is(#dpsFormV2,.dps-form-v2) .dps-ic-indigo svg { color: #4f46e5; }

/* ====================================================================
   FLATPICKR — huisstijl-thema
   Override flatpickr-default kleuren naar De Party Service paarsroze.
   .dps-fp-input wordt door form-v2.php in onReady-callback op de
   zichtbare alt-input geplakt.
   ==================================================================== */

/* Zichtbaar veld — met roze kalender-icoon links */
:is(#dpsFormV2,.dps-form-v2) input.dps-fp-input {
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23E64E8C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='3'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>") no-repeat 14px 50% !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 11px 14px 11px 42px !important;
    font-size: 15px !important;
    color: #1f2937 !important;
    width: 100% !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: border-color .15s, box-shadow .15s;
}
:is(#dpsFormV2,.dps-form-v2) input.dps-fp-input:hover {
    border-color: #94a3b8 !important;
}
:is(#dpsFormV2,.dps-form-v2) input.dps-fp-input:focus,
:is(#dpsFormV2,.dps-form-v2) input.dps-fp-input.active {
    border-color: #E64E8C !important;
    box-shadow: 0 0 0 3px rgba(230,78,140,0.18) !important;
    outline: 0 !important;
}
:is(#dpsFormV2,.dps-form-v2) input.flatpickr-input[type="hidden"] { display: none !important; }

/* Popup-kalender */
.flatpickr-calendar {
    border-radius: 16px !important;
    box-shadow: 0 18px 48px rgba(15,23,42,0.22), 0 4px 10px rgba(15,23,42,0.06) !important;
    border: 0 !important;
    padding: 6px 10px 6px 6px !important; /* extra rechts zodat hover van zondag-cel zichtbaar blijft */
    font-family: inherit !important;
    /* overflow: hidden weggehaald — knipte de hover-state van de rechter-cellen af.
       De gradient-header heeft eigen border-radius dus blijft visueel correct. */
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after { display: none !important; }

/* Header met gradient — maand en jaar op één regel, gecentreerd, arrows aan zijkanten */
.flatpickr-months {
    background: linear-gradient(135deg, #fdf2f8 0%, #f3e8ff 100%) !important;
    border-radius: 16px 16px 0 0 !important; /* matched aan calendar (was 12px door overflow:hidden) */
    padding: 12px 8px !important;
    margin: -6px -10px 8px -6px !important; /* compenseert nieuwe padding van calendar */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 44px !important;
}
.flatpickr-months .flatpickr-month {
    flex: 1 !important;
    height: auto !important;
    overflow: visible !important;
    color: #1F2A55 !important;
}
.flatpickr-current-month {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    color: #1F2A55 !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    color: #1F2A55 !important;
    font-weight: 700 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.flatpickr-current-month .numInputWrapper {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    min-width: 56px !important;
}
.flatpickr-current-month input.cur-year {
    padding: 0 4px !important;
    text-align: left !important;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    position: static !important;
    color: #6b7280 !important;
    fill: #6b7280 !important;
    padding: 6px !important;
    border-radius: 8px !important;
    height: auto !important;
    line-height: 0 !important;
    flex-shrink: 0 !important;
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    background: rgba(230,78,140,0.10) !important;
    color: #E64E8C !important;
    fill: #E64E8C !important;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    width: 14px !important;
    height: 14px !important;
}

/* Weekdag-labels */
.flatpickr-weekday {
    color: #94a3b8 !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Dagen */
.flatpickr-day {
    border-radius: 8px !important;
    color: #1f2937 !important;
    font-weight: 500 !important;
    border: 1px solid transparent !important;
    line-height: 38px !important;
    height: 38px !important;
}
.flatpickr-day:hover {
    background: #fce7f3 !important;
    border-color: #fce7f3 !important;
    color: #9d174d !important;
}
.flatpickr-day.today,
.flatpickr-day.today:hover {
    border-color: #E64E8C !important;
    color: #E64E8C !important;
    background: #fff !important;
    font-weight: 700 !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.startRange,
.flatpickr-day.selected.endRange {
    background: #E64E8C !important;
    border-color: #E64E8C !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(230,78,140,0.35) !important;
    font-weight: 700 !important;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: #cbd5e1 !important;
    background: transparent !important;
    text-decoration: line-through;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #cbd5e1 !important;
}

/* ====================================================================
   TRANSPORT-OPTIES (radio-cards in stap 3, alleen bij 'Bezorgen')
   ==================================================================== */
:is(#dpsFormV2,.dps-form-v2) .dps-transport-list { display: flex !important; flex-direction: column !important; gap: 8px !important; margin-top: 10px !important; }
:is(#dpsFormV2,.dps-form-v2) .dps-transport-opt {
    display: flex; align-items: center; gap: 12px;
    border: 2px solid #e2e8f0; border-radius: 12px; background: #fff;
    padding: 12px 14px; cursor: pointer; transition: all .15s;
}
:is(#dpsFormV2,.dps-form-v2) .dps-transport-opt:hover { border-color: #cbd5e1; }
:is(#dpsFormV2,.dps-form-v2) .dps-transport-opt.dps-active {
    border-color: #E64E8C; background: #fdf2f8;
    box-shadow: 0 4px 12px rgba(230,78,140,0.10);
}
:is(#dpsFormV2,.dps-form-v2) .dps-transport-opt.dps-disabled { opacity: .4; cursor: not-allowed; }
:is(#dpsFormV2,.dps-form-v2) .dps-trans-ic {
    width: 36px; height: 36px; border-radius: 50%; background: #f1f5f9;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
:is(#dpsFormV2,.dps-form-v2) .dps-transport-opt.dps-active .dps-trans-ic { background: #fce7f3; }
:is(#dpsFormV2,.dps-form-v2) .dps-transport-opt.dps-active .dps-trans-ic svg { color: #E64E8C; }
:is(#dpsFormV2,.dps-form-v2) .dps-trans-ic svg { width: 16px; height: 16px; color: #64748b; }
:is(#dpsFormV2,.dps-form-v2) .dps-trans-info { flex: 1; min-width: 0; line-height: 1.35; }
:is(#dpsFormV2,.dps-form-v2) .dps-trans-info b { font-size: 15px; color: #1f2937; display: block; }
:is(#dpsFormV2,.dps-form-v2) .dps-trans-info span { font-size: 13px; color: #64748b; display: block; }
:is(#dpsFormV2,.dps-form-v2) .dps-trans-price { text-align: right; flex-shrink: 0; line-height: 1.2; }
:is(#dpsFormV2,.dps-form-v2) .dps-trans-price span { font-size: 12px; color: #64748b; display: block; }
:is(#dpsFormV2,.dps-form-v2) .dps-trans-price b { font-size: 15px; font-weight: 700; color: #1F2A55; display: block; }

/* ============================================================ */
/* ZIJBALK: AANTALLEN EN OPTIES BIJSTELLEN (2026-09-04)         */
/* ============================================================ */
/*
 * Deze klassen stonden eerst in render_styles_DEPRECATED() in
 * includes/form-v2.php. Die methode wordt nergens aangeroepen, dus de
 * knoppen kregen in het echt GEEN styling en het thema tekende zijn eigen
 * kolossale blokken. Alles wat het formulier toont hoort hier te staan.
 */

:is(#dpsFormV2,.dps-form-v2) .dps-qty , .dps-mandje .dps-qty {
    display: inline-flex !important;
    align-items: stretch !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #fff !important;
    padding: 0 !important;
    margin: 0 !important;
}
:is(#dpsFormV2,.dps-form-v2) .dps-qty button , .dps-mandje .dps-qty button {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #475569 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: none !important;
}
:is(#dpsFormV2,.dps-form-v2) .dps-qty button:hover , .dps-mandje .dps-qty button:hover { background: #f1f5f9 !important; color: #0f172a !important; }
:is(#dpsFormV2,.dps-form-v2) .dps-qty span , .dps-mandje .dps-qty span {
    min-width: 30px !important;
    padding: 0 2px !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    border-left: 1px solid #f1f5f9 !important;
    border-right: 1px solid #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ======================================================================
 * KEUZEGROEPEN BIJ EEN PRODUCT (herzien 2026-10-29, voorstel C)
 *
 * WAT ER WEG IS
 * De grijze strook met kader om elke groep. Die was even breed en zwaar als
 * de productregel zelf, bleef als een openstaande vraag staan nadat je hem
 * had beantwoord, en duwde de prijs en het aantal naar boven zodat de regel
 * scheef oogde naast een product zonder opties.
 *
 * WAT ERVOOR IN DE PLAATS KOMT
 * Beantwoord  -> één regel: vinkje, groepsnaam, je antwoord, potloodje.
 * Nog open    -> de groepsnaam met een schakelaar, meteen zichtbaar.
 * Klik je op de regel, dan klapt de schakelaar uit (class dps-optgroep-open,
 * gezet door koppel() in cart-ui.js).
 * ====================================================================== */
:is(#dpsFormV2,.dps-form-v2) .dps-optkeuze , .dps-mandje .dps-optkeuze {
    margin-top: 4px !important;
    display: flex !important; flex-direction: column !important; gap: 3px !important;
}
:is(#dpsFormV2,.dps-form-v2) .dps-optgroep , .dps-mandje .dps-optgroep {
    display: block !important;
    padding: 0 !important; border: 0 !important; background: none !important;
}

/* --- De dichte regel ------------------------------------------------- */
:is(#dpsFormV2,.dps-form-v2) .dps-optstaat , .dps-mandje .dps-optstaat {
    display: inline-flex !important; align-items: center !important; gap: 5px !important;
    width: auto !important; min-width: 0 !important; height: auto !important;
    margin: 0 !important; padding: 1px 0 !important;
    border: 0 !important; background: none !important;
    font-family: inherit !important; font-size: 13px !important; line-height: 1.4 !important;
    font-weight: 600 !important; text-align: left !important;
    text-transform: none !important; letter-spacing: normal !important;
    color: #475569 !important; cursor: pointer !important;
}
/* Kost de keuze iets, dan is hij groen: de klant neemt er iets bij af. */
:is(#dpsFormV2,.dps-form-v2) .dps-optstaat.kost , .dps-mandje .dps-optstaat.kost { color: #047857 !important; }
:is(#dpsFormV2,.dps-form-v2) .dps-optstaat:hover .dps-optstaat-waarde ,
.dps-mandje .dps-optstaat:hover .dps-optstaat-waarde { text-decoration: underline !important; }
:is(#dpsFormV2,.dps-form-v2) .dps-optstaat-kop , .dps-mandje .dps-optstaat-kop {
    color: #64748b !important; font-weight: 500 !important;
}
:is(#dpsFormV2,.dps-form-v2) .dps-optstaat-waarde , .dps-mandje .dps-optstaat-waarde { color: inherit !important; }
/* Zit de prijs niet in het producttotaal, dan hoort dat erbij te staan. */
:is(#dpsFormV2,.dps-form-v2) .dps-optlater , .dps-mandje .dps-optlater {
    color: #8b93a5 !important; font-weight: 400 !important; font-size: 12px !important;
}
/* Een keuze die vastligt (gas bijvoorbeeld) is geen knop: er valt niets te
   openen. Zelfde regel, maar zonder aanwijzer en zonder onderstreping. */
:is(#dpsFormV2,.dps-form-v2) .dps-optstaat.vast , .dps-mandje .dps-optstaat.vast {
    cursor: default !important;
}
:is(#dpsFormV2,.dps-form-v2) .dps-optstaat.vast:hover .dps-optstaat-waarde ,
.dps-mandje .dps-optstaat.vast:hover .dps-optstaat-waarde { text-decoration: none !important; }

/* Open: de samenvatting maakt plaats voor de keuze. */
:is(#dpsFormV2,.dps-form-v2) .dps-optgroep-open > .dps-optstaat ,
.dps-mandje .dps-optgroep-open > .dps-optstaat { display: none !important; }

/* --- De uitgeklapte keuze -------------------------------------------- */
:is(#dpsFormV2,.dps-form-v2) .dps-optopen , .dps-mandje .dps-optopen { display: none !important; }
:is(#dpsFormV2,.dps-form-v2) .dps-optgroep-open > .dps-optopen ,
.dps-mandje .dps-optgroep-open > .dps-optopen {
    display: flex !important; flex-wrap: wrap !important; align-items: center !important;
    gap: 4px 9px !important; margin-top: 3px !important;
}
:is(#dpsFormV2,.dps-form-v2) .dps-optkop , .dps-mandje .dps-optkop {
    flex: none !important; font-size: 13px !important; color: #64748b !important; font-weight: 500 !important;
}
/* De knoppen in één bakje: dat leest als één instelling in plaats van als
   twee losse vragen. */
:is(#dpsFormV2,.dps-form-v2) .dps-optknoppen , .dps-mandje .dps-optknoppen {
    display: inline-flex !important; flex-wrap: wrap !important; gap: 2px !important;
    padding: 2px !important; background: #f1f5f9 !important; border-radius: 8px !important;
}
:is(#dpsFormV2,.dps-form-v2) .dps-optknop , .dps-mandje .dps-optknop {
    display: inline-block !important;
    text-transform: none !important; letter-spacing: normal !important;
    width: auto !important; min-width: 0 !important; height: auto !important;
    padding: 5px 11px !important; margin: 0 !important;
    border: 0 !important; border-radius: 6px !important;
    background: transparent !important; color: #64748b !important;
    font-family: inherit !important; font-size: 13px !important; font-weight: 500 !important;
    line-height: 1.5 !important; white-space: nowrap !important; cursor: pointer !important;
}
:is(#dpsFormV2,.dps-form-v2) .dps-optknop:hover , .dps-mandje .dps-optknop:hover { color: #334155 !important; }
/* Gekozen: wit met een schaduwtje, zodat hij uit het bakje lijkt te komen.
   Verschilt in vulling, gewicht en kleur tegelijk — niet in kleur alleen. */
:is(#dpsFormV2,.dps-form-v2) .dps-optknop.aan , .dps-mandje .dps-optknop.aan {
    background: #ffffff !important; color: #047857 !important; font-weight: 600 !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.10) !important;
}
/* Kost de gekozen optie niets, dan is er niets afgenomen: neutraal donker in
   plaats van groen. Het rood van hiervoor las als een waarschuwing, terwijl er
   niets mis is met "nee, doe ik zelf". */
:is(#dpsFormV2,.dps-form-v2) .dps-optknop.aan.geen-prijs , .dps-mandje .dps-optknop.aan.geen-prijs {
    color: #334155 !important;
}
:is(#dpsFormV2,.dps-form-v2) .dps-optknop span , .dps-mandje .dps-optknop span { color: inherit !important; opacity: .75 !important; }

/* ============================================================ */
/* PAGINA "MIJN AANVRAAG"  (shortcode [dps_cart], 2026-09-04)   */
/* ============================================================ */
/*
 * De regels in de lijst komen uit assets/cart-ui.js en zijn identiek aan
 * die in de zijbalk van het aanvraagformulier. Hieronder staat alleen wat
 * eromheen hoort: de twee kolommen, de kaarten en de knoppen.
 */

/* Volledige breedte van de container waar de shortcode in staat.
   Stond eerst op max-width:1100px en dat viel te smal uit (2026-09-04). */
.dps-mandje { width: 100%; max-width: none; margin: 0; }
.dps-mandje,
.dps-mandje *,
.dps-mandje *::before,
.dps-mandje *::after { box-sizing: border-box !important; }

.dps-mandje-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
@media (max-width: 860px) {
    .dps-mandje-grid { grid-template-columns: minmax(0, 1fr); }
}

.dps-mandje-kaart {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    padding: 20px !important;
}
.dps-mandje-zij { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 16px; }
@media (max-width: 860px) { .dps-mandje-zij { position: static; } }

.dps-mandje-kop { margin: 0 0 4px !important; font-size: 22px !important; font-weight: 700 !important; color: #282A6C !important; }
.dps-mandje-hint { margin: 0 0 8px !important; font-size: 14px !important; color: #64748b !important; }
.dps-mandje-lijst { list-style: none !important; padding: 0 !important; margin: 0 !important; }

/* ======================================================================
 * HET TOTAALBLOK (herzien 2026-10-29)
 *
 * WAT ER KAPOT WAS
 * "Subtotaal (excl. items op aanvraag)" stond als label op dezelfde regel als
 * het bedrag. In een kolom van 320px duwde dat lange label het bedrag af en
 * brak het af: een € op de ene regel, 112,45 op de volgende. Het enige getal
 * dat in dit blok telt, onleesbaar gemaakt door zijn eigen opschrift.
 *
 * De oplossing zit in drie dingen: een kort label, het bedrag op nowrap, en
 * de uitzondering naar een eigen regeltje eronder.
 * ====================================================================== */
.dps-mandje-regel { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 16px; color: #1f2937; }
.dps-mandje-regel + .dps-mandje-regel { margin-top: 6px; }
.dps-mandje-regel-klein { font-size: 13.5px; color: #64748b; }
.dps-mandje-grijs { color: #94a3b8; font-style: italic; font-weight: 400; }

/* De telling is context bij het bedrag, dus hij staat erboven en niet
   ertussen — daar hing hij los tussen twee bedragen in. */
.dps-mandje-telling {
    font-size: 11px !important; font-weight: 700 !important;
    letter-spacing: .6px !important; text-transform: uppercase !important;
    color: #8b93a5 !important;
}
.dps-mandje-som {
    margin-top: 10px !important;
    display: flex !important; justify-content: space-between !important;
    align-items: baseline !important; gap: 10px !important;
}
.dps-mandje-som-kop { min-width: 0 !important; font-size: 15px !important; color: #64748b !important; }
/* flex:none plus nowrap: dit bedrag mag onder geen enkele breedte afbreken. */
.dps-mandje-som-bedrag {
    flex: none !important; white-space: nowrap !important;
    font-family: var(--dps-knop) !important;
    font-size: 27px !important; font-weight: 700 !important; line-height: 1.1 !important;
    color: #282A6C !important;
}
.dps-mandje-opaanvraag { margin-top: 4px !important; font-size: 12px !important; color: #8b93a5 !important; }

.dps-mandje-streep { margin: 14px 0 !important; height: 1px !important; background: #eef2f7 !important; }

/* "bereken je in de volgende stap" stond cursief grijs en las als een excuus.
   Een neutraal bolletje leest als een feit. */
.dps-mandje-chip {
    flex: none !important; padding: 3px 9px !important; border-radius: 999px !important;
    background: #f1f5f9 !important; font-size: 12px !important; font-weight: 600 !important;
    color: #475569 !important; white-space: nowrap !important;
}

.dps-mandje-knop {
    display: flex !important;
    align-items: center !important; justify-content: center !important; gap: 8px !important;
    margin-top: 16px !important;
    padding: 15px 20px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background-color: #E64E8C !important;
    background-image: linear-gradient(200deg, #E64E8C 0%, #F39916 100%) !important;
    box-shadow: 0 2px 8px rgba(230,78,140,.28) !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
}
.dps-mandje-knop svg {
    width: 17px !important; height: 17px !important; flex: none !important;
    fill: none !important; stroke: currentColor !important;
    stroke-width: 2.4 !important; stroke-linecap: round !important; stroke-linejoin: round !important;
}
.dps-mandje-knop:hover { filter: brightness(0.94); color: #fff !important; }

/* Rustig grijs in plaats van roze: twee roze knoppen onder elkaar vroegen om
   dezelfde aandacht, en dan weet de klant niet waar hij heen moet. */
.dps-mandje-terug {
    display: block !important;
    margin-top: 12px !important;
    text-align: center !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    text-decoration: none !important;
}
.dps-mandje-terug:hover { color: #282A6C !important; text-decoration: underline !important; }

/* Opsomming onder het totaalblok (2026-09-04), zoals in de prototype.
   .dps-mandje-voet stond hier eerder: één zin die hetzelfde zei als de
   eerste regel van deze lijst. */
.dps-mandje-usp { list-style: none !important; margin: 0 !important; padding: 2px 4px !important; display: flex !important; flex-direction: column !important; gap: 9px !important; }
.dps-mandje-usp li { display: flex !important; gap: 9px !important; align-items: flex-start !important; margin: 0 !important; padding: 0 !important; font-size: 14px !important; line-height: 1.45 !important; color: #64748b !important; }
.dps-mandje-usp li::marker { content: none !important; }
.dps-mandje-usp svg { width: 16px !important; height: 16px !important; flex: 0 0 16px; margin-top: 2px; stroke: #10b981; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Lege staat */
.dps-mandje-leeg {
    background: #fff !important;
    border: 1px dashed #e5e7eb !important;
    border-radius: 16px !important;
    padding: 40px 20px !important;
    text-align: center !important;
}
.dps-mandje-leegtekst { margin: 0 0 14px !important; font-size: 16px !important; color: #64748b !important; }
.dps-mandje-knop-2 {
    display: inline-block !important;
    padding: 11px 22px !important;
    border: 1px solid #E64E8C !important;
    border-radius: 8px !important;
    color: #E64E8C !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
.dps-mandje-knop-2:hover { background: #fef1f6 !important; }

/* ======================================================================
 * STAPPENBALK (2026-10-29) — [dps_stappen actief="1"]
 *
 * Losse shortcode, dus hij hangt niet onder .dps-form-v2: je zet hem in
 * Elementor waar je wil, ook op een pagina zonder formulier. Daarom hier
 * zijn eigen scope met !important, op dezelfde manier beschermd tegen het
 * thema als de rest van deze stylesheet.
 * ====================================================================== */
.dps-stappen {
    display: flex !important; align-items: center !important; gap: 0 !important;
    list-style: none !important; margin: 0 !important; padding: 0 !important;
    font-family: 'Roboto Condensed', 'Roboto', sans-serif !important;
}
.dps-stappen, .dps-stappen *, .dps-stappen *::before, .dps-stappen *::after {
    box-sizing: border-box !important;
}
.dps-stappen .dps-stap {
    display: flex !important; align-items: center !important;
    margin: 0 !important; padding: 0 !important;
    flex: 0 1 auto !important; min-width: 0 !important;
}
/* Het streepje tussen twee stappen. Niet voor de eerste, anders begint de
   balk met een los lijntje in het niets. */
.dps-stappen .dps-stap + .dps-stap::before {
    content: '' !important; display: block !important;
    width: 28px !important; height: 1px !important; flex: none !important;
    background: #d9dce6 !important; margin: 0 12px !important;
}
.dps-stappen .dps-stap-inhoud {
    display: flex !important; align-items: center !important; gap: 10px !important;
    text-decoration: none !important; border: 0 !important;
    min-width: 0 !important;
}
.dps-stappen a.dps-stap-inhoud:hover .dps-stap-naam { text-decoration: underline !important; }
.dps-stappen .dps-stap-bol {
    flex: none !important;
    width: 26px !important; height: 26px !important; border-radius: 999px !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important;
}
.dps-stappen .dps-stap-bol svg {
    width: 14px !important; height: 14px !important;
    fill: none !important; stroke: currentColor !important;
    stroke-width: 3 !important; stroke-linecap: round !important; stroke-linejoin: round !important;
}
.dps-stappen .dps-stap-naam {
    font-size: 15px !important; line-height: 1.2 !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}

/* Af: je bent er geweest en kunt terug. Groen vinkje, zoals in het ontwerp. */
.dps-stappen .dps-stap-af .dps-stap-bol  { background: #ecfdf5 !important; color: #059669 !important; border: 1px solid #a7f3d0 !important; }
.dps-stappen .dps-stap-af .dps-stap-naam { color: #047857 !important; font-weight: 500 !important; }

/* Nu: waar je staat. */
.dps-stappen .dps-stap-nu .dps-stap-bol  { background: #282A6C !important; color: #fff !important; border: 1px solid #282A6C !important; }
.dps-stappen .dps-stap-nu .dps-stap-naam { color: #282A6C !important; font-weight: 700 !important; }

/* Straks: nog niet aan toe, en dus ook geen link. */
.dps-stappen .dps-stap-straks .dps-stap-bol  { background: #f1f2f6 !important; color: #9aa0b5 !important; border: 1px solid #e3e5ed !important; }
.dps-stappen .dps-stap-straks .dps-stap-naam { color: #9aa0b5 !important; font-weight: 500 !important; }

/* Op een telefoon past alleen de stap waar je staat. De rest blijft als bolletje
   zichtbaar, zodat je ziet hoeveel stappen er zijn en waar je zit. */
@media (max-width: 600px) {
    .dps-stappen .dps-stap-af .dps-stap-naam,
    .dps-stappen .dps-stap-straks .dps-stap-naam { display: none !important; }
    .dps-stappen .dps-stap + .dps-stap::before { width: 18px !important; margin: 0 8px !important; }
}

/* ======================================================================
 * MANDJE-REGELS (2026-10-29)
 *  - prullenbak op Mijn aanvraag
 *  - vast aantal in de zijbalk van het formulier, waar niets te wijzigen is
 * ====================================================================== */
.dps-mandje .dps-rij-weg {
    flex: none !important;
    width: 34px !important; height: 34px !important; padding: 0 !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    border: 1px solid transparent !important; border-radius: 8px !important;
    background: transparent !important; color: #b6bccd !important; cursor: pointer !important;
    transition: color .12s ease, background .12s ease, border-color .12s ease !important;
}
.dps-mandje .dps-rij-weg:hover,
.dps-mandje .dps-rij-weg:focus-visible {
    color: #dc2626 !important; background: #fef2f2 !important; border-color: #fecaca !important;
}
.dps-mandje .dps-rij-weg svg {
    width: 17px !important; height: 17px !important;
    fill: none !important; stroke: currentColor !important;
    stroke-width: 1.8 !important; stroke-linecap: round !important; stroke-linejoin: round !important;
}

/* Het aantal zonder knoppen, naast de prijs. Bewust lichter dan het bedrag:
   de prijs is waar je naar kijkt, het aantal is de bijzin. */
:is(#dpsFormV2,.dps-form-v2) .dps-aantal-vast,
.dps-mandje .dps-aantal-vast {
    display: inline-block !important;
    font-size: 13px !important; font-weight: 500 !important; color: #8b93a5 !important;
    white-space: nowrap !important;
}

/* ----------------------------------------------------------------------
 * De voet van de zijbalk (2026-10-29)
 *
 * Zelfde opzet als het totaalblok op Mijn aanvraag, en om dezelfde reden:
 * "Subtotaal (excl. items op aanvraag)" naast een bedrag in een kolom van
 * 320px duwde het bedrag af en brak het af.
 * -------------------------------------------------------------------- */
:is(#dpsFormV2,.dps-form-v2) .dps-zij-voet {
    margin-top: 12px !important; padding-top: 12px !important;
    border-top: 1px solid #e5e7eb !important;
}
:is(#dpsFormV2,.dps-form-v2) .dps-zij-telling {
    font-size: 11px !important; font-weight: 700 !important;
    letter-spacing: .6px !important; text-transform: uppercase !important;
    color: #8b93a5 !important;
}
/* Btw-specificatie in de zijbalk (2026-10-30). Zelfde opbouw en dezelfde
 * bronfunctie als het totalenblok op "Mijn aanvraag" — zie specHtml() in
 * cart-ui.js. De !important's horen bij het patroon van dit hele bestand:
 * Elementor en het thema schilderen anders overheen. */
:is(#dpsFormV2,.dps-form-v2) .dps-zij-specregel {
    display: flex !important; justify-content: space-between !important;
    align-items: baseline !important; gap: 10px !important;
    font-size: 13px !important; color: #64748b !important;
}
:is(#dpsFormV2,.dps-form-v2) .dps-zij-specregel + .dps-zij-specregel { margin-top: 2px !important; }
:is(#dpsFormV2,.dps-form-v2) .dps-zij-specregel b {
    font-weight: 600 !important; color: #1f2937 !important;
    font-variant-numeric: tabular-nums !important;
}
/* Lucht tussen de telling erboven en deze specificatie — die telling heeft
 * zelf geen marge onder zich.
 *
 * LET OP: dit stond eerst op :first-child en deed daardoor niets. De
 * specregels zijn broers van .dps-zij-telling binnen .dps-zij-voet, dus het
 * eerste kind is de telling en nooit een specregel. Vandaar de broer-selector. */
:is(#dpsFormV2,.dps-form-v2) .dps-zij-telling + .dps-zij-specregel { margin-top: 14px !important; }

:is(#dpsFormV2,.dps-form-v2) .dps-zij-som {
    margin-top: 8px !important; padding-top: 8px !important;
    border-top: 1px solid #eef2f7 !important;
    display: flex !important; justify-content: space-between !important;
    align-items: baseline !important; gap: 10px !important;
}
:is(#dpsFormV2,.dps-form-v2) .dps-zij-som-kop { min-width: 0 !important; font-size: 14px !important; color: #64748b !important; }
:is(#dpsFormV2,.dps-form-v2) .dps-zij-som-bedrag {
    flex: none !important; white-space: nowrap !important;
    font-family: var(--dps-knop) !important;
    font-size: 23px !important; font-weight: 700 !important; line-height: 1.1 !important;
    color: #282A6C !important;
}
:is(#dpsFormV2,.dps-form-v2) .dps-zij-opaanvraag-bedrag {
    font-family: inherit !important; font-size: 14px !important;
    font-style: italic !important; font-weight: 400 !important; color: #94a3b8 !important;
}
:is(#dpsFormV2,.dps-form-v2) .dps-zij-opaanvraag {
    margin-top: 4px !important; font-size: 12px !important; color: #8b93a5 !important;
}

/* De gekozen opties onder een productnaam zijn een detail, geen tweede titel.
   De groepsnaam stond hier vet én donker en vocht daardoor met de productnaam
   om de aandacht (2026-10-29). */
:is(#dpsFormV2,.dps-form-v2) .dps-optlees , .dps-mandje .dps-optlees {
    margin-top: 2px !important;
    font-size: 12.5px !important; line-height: 1.45 !important;
    color: #8b93a5 !important; white-space: normal !important;
}
:is(#dpsFormV2,.dps-form-v2) .dps-optlees strong , .dps-mandje .dps-optlees strong {
    font-weight: 600 !important; color: #64748b !important;
}

/* "Aantallen of opties aanpassen" onder de zijbalk: de enige weg naar wijzigen. */
:is(#dpsFormV2,.dps-form-v2) .dps-zij-wijzig {
    display: block !important; margin-top: 12px !important;
    text-align: center !important; padding: 9px 12px !important;
    border: 1px solid #e5e7eb !important; border-radius: 8px !important;
    font-family: var(--dps-knop) !important; font-size: 13px !important; font-weight: 600 !important;
    color: #282A6C !important; text-decoration: none !important; background: #fff !important;
    transition: background .12s ease, border-color .12s ease !important;
}
:is(#dpsFormV2,.dps-form-v2) .dps-zij-wijzig:hover {
    background: #f8fafc !important; border-color: #cbd5e1 !important;
}

/* ======================================================================
 * [dps_aanvullen_knop] — de knop naar de aanvul-pagina (2026-10-29)
 *
 * Losse shortcode, dus met zijn eigen scope en !important: hij staat op een
 * pagina die je zelf in Elementor opmaakt, zonder formulier eromheen.
 * Wil je hem volledig zelf stylen, geef dan class="" mee; dan komt er een
 * kale link zonder deze regels.
 * ====================================================================== */
.dps-aanvullen-knop {
    display: inline-flex !important; align-items: center !important; gap: 10px !important;
    padding: 15px 28px !important;
    border: 0 !important; border-radius: 10px !important;
    background-color: #E64E8C !important;
    background-image: linear-gradient(200deg, #F58A4E 0%, #E64E8C 100%) !important;
    box-shadow: 0 2px 10px rgba(230,78,140,.26) !important;
    color: #fff !important;
    font-family: 'Roboto Condensed', Roboto, system-ui, sans-serif !important;
    font-size: 16px !important; font-weight: 700 !important; letter-spacing: .2px !important;
    line-height: 1.3 !important; text-decoration: none !important;
    transition: filter .15s ease !important;
}
.dps-aanvullen-knop:hover { filter: brightness(0.94) !important; color: #fff !important; }
.dps-aanvullen-knop::after {
    content: '' !important; flex: none !important;
    width: 16px !important; height: 16px !important;
    background: currentColor !important;
    /* Pijl naar rechts, als masker zodat hij de tekstkleur volgt. */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat !important;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat !important;
}