/* DoubleLock disselslot-keuzehulp — styling
   Alle selectors zijn geprefixt met dl- zodat ze het shopthema niet raken.

   KLEUREN
   De keuzehulp neemt de kleuren over van het thema waar hij op staat.
   Tekst en lettertype worden geërfd; de accentkleur en de achtergrond
   worden door keuzehulp-thema.js uit het thema gelezen en als
   --dl-* variabelen gezet. Wordt er niets gevonden, dan blijven de
   DoubleLock-standaardkleuren hieronder staan.

   Twee kleuren:
     --dl-accent   sfeerkleur (voortgangsbalk, actieve rand) — de balk bovenaan de shop
     --dl-button   actiekleur (productknop) — de knoppen van de shop
     --dl-button-ink  dezelfde kleur, leesbaar gemaakt voor tekst (links, "Vorige stap")

   Zelf vastzetten op een site (wint altijd van het script):
     <style>#dl-choice-helper{--dl-accent:#ff9933;--dl-button:#0a5eee;--dl-button-text:#fff;}</style>
   Automatisch ophalen uitzetten:
     <div id="dl-choice-helper" data-dl-theme="off">
*/

/* --- Variabelen ---------------------------------------------------
   De --dl-* variabelen worden bewust NIET gedeclareerd, alleen
   uitgelezen met een standaardwaarde erachter. Zo kan het script zien
   of jij er zelf al een hebt gezet (dan blijft hij met rust) en blijft
   er altijd een werkende kleur over.                                */

#dl-choice-helper {
    --_accent:      var(--dl-accent, #b5121b);
    --_button:      var(--dl-button, var(--_accent));
    --_button-text: var(--dl-button-text, #ffffff);
    --_button-ink:  var(--dl-button-ink, var(--_button));
    --_bg:          var(--dl-bg, #ffffff);
    --_radius:      var(--dl-radius, 4px);
    /* Vlakken krijgen een begrensde radius: een pill-vormige themaknop
       mag geen pill-vormige kaart of antwoordknop opleveren. */
    --_radius-box:  min(calc(var(--_radius) * 1.25), 12px);

    /* Afgeleiden — eenvoudige fallback voor oudere browsers */
    --_border:  rgba(130, 130, 130, .42);
    --_surface: rgba(130, 130, 130, .10);
    --_muted:   rgba(130, 130, 130, 1);
    --_hover:   var(--_button);

    /* Standaard de volle breedte van de contentkolom.
       Smaller willen? Zet --dl-max-width, bijv. 760px. */
    max-width: var(--dl-max-width, 100%);
    margin: 25px 0;
    font-family: inherit;
    color: inherit;
}

/* Randen en grijstinten uit de eigen tekst- en achtergrondkleur, zodat
   het contrast ook op een donker thema klopt.                        */
@supports (color: color-mix(in srgb, red, blue)) {
    #dl-choice-helper {
        --_border:  color-mix(in srgb, currentColor 20%, transparent);
        --_surface: color-mix(in srgb, var(--_bg) 93%, currentColor);
        --_muted:   color-mix(in srgb, currentColor 62%, var(--_bg));
        --_hover:   color-mix(in srgb, var(--_button) 86%, currentColor);
    }
}

#dl-choice-helper * {
    box-sizing: border-box;
}

#dl-choice-helper .dl-card {
    border: 1px solid var(--_border);
    border-radius: var(--_radius-box);
    background: var(--_bg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
    overflow: hidden;
}

#dl-choice-helper .dl-progress {
    height: 5px;
    background: var(--_surface);
}

#dl-choice-helper .dl-progress-bar {
    width: 0;
    height: 100%;
    background: var(--_accent);
    transition: width .2s ease;
}

#dl-choice-helper .dl-content {
    padding: 24px;
}

#dl-choice-helper .dl-step {
    font-size: 14px;
    color: var(--_muted);
    margin-bottom: 8px;
}

#dl-choice-helper .dl-title {
    margin: 0 0 12px;
    font-size: 23px;
    line-height: 1.3;
    color: inherit;
}

#dl-choice-helper .dl-text {
    margin: 0 0 20px;
    line-height: 1.55;
}

#dl-choice-helper .dl-options {
    display: grid;
    gap: 10px;
}

#dl-choice-helper .dl-option {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid var(--_border);
    border-radius: var(--_radius-box);
    background: var(--_bg);
    color: inherit;
    text-align: left;
    font-size: 15px;
    line-height: 1.35;
    font-family: inherit;
    cursor: pointer;
}

#dl-choice-helper .dl-option:hover,
#dl-choice-helper .dl-option:focus {
    border-color: var(--_accent);
    background: var(--_surface);
}

#dl-choice-helper .dl-option strong {
    display: block;
    margin-bottom: 3px;
}

#dl-choice-helper .dl-option small {
    display: block;
    color: var(--_muted);
    font-size: 13px;
}

#dl-choice-helper .dl-actions {
    display: flex;
    gap: 10px;
    padding: 0 24px 24px;
}

#dl-choice-helper .dl-btn {
    padding: 10px 15px;
    border-radius: var(--_radius);
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
}

#dl-choice-helper .dl-btn-secondary {
    border: 1px solid var(--_button-ink);
    background: transparent;
    color: var(--_button-ink);
}

#dl-choice-helper .dl-btn-secondary:hover,
#dl-choice-helper .dl-btn-secondary:focus {
    background: var(--_button);
    border-color: var(--_button);
    color: var(--_button-text);
}

#dl-choice-helper .dl-result {
    padding: 18px;
    border: 1px solid var(--_border);
    border-radius: var(--_radius-box);
    background: var(--_surface);
}

#dl-choice-helper .dl-result h3 {
    margin: 0 0 10px;
    font-size: 21px;
    color: inherit;
}

#dl-choice-helper .dl-result p {
    line-height: 1.55;
}

#dl-choice-helper .dl-result ul {
    margin: 15px 0;
    padding-left: 20px;
    list-style: disc;
}

#dl-choice-helper .dl-result li {
    margin-bottom: 6px;
}

#dl-choice-helper .dl-product-link {
    display: inline-block;
    margin-top: 8px;
    padding: 12px 17px;
    border-radius: var(--_radius);
    background: var(--_button);
    color: var(--_button-text) !important;
    text-decoration: none;
    font-weight: bold;
}

#dl-choice-helper .dl-product-link:hover,
#dl-choice-helper .dl-product-link:focus {
    background: var(--_hover);
    color: var(--_button-text) !important;
    text-decoration: none;
}

#dl-choice-helper .dl-help {
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid var(--_border);
    font-size: 14px;
    line-height: 1.5;
}

#dl-choice-helper .dl-help a {
    color: var(--_button-ink);
    text-decoration: underline;
}

/* Toetsenbordbediening zichtbaar houden op elk thema */
#dl-choice-helper :focus-visible {
    outline: 2px solid var(--_button-ink);
    outline-offset: 2px;
}

@media (max-width: 600px) {
    #dl-choice-helper .dl-content {
        padding: 19px;
    }

    #dl-choice-helper .dl-actions {
        padding: 0 19px 19px;
        flex-wrap: wrap;
    }

    #dl-choice-helper .dl-title {
        font-size: 20px;
    }
}