/* Tool UX - popupstijl (v3.17) */
    /* ===== Popup overlay ===== */
    .dgtux-overlay {
        position: fixed;
        inset: 0;
        background: rgba(46, 70, 53, 0.55);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 99998;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        opacity: 0;
        transition: opacity 0.25s ease-out;
        pointer-events: none;
    }
    .dgtux-overlay.dgtux-visible {
        opacity: 1;
        pointer-events: auto;
    }

    /* ===== Popup card ===== */
    .dgtux-popup {
        background: #FBF8F1;
        border-radius: 18px;
        box-shadow: 0 24px 60px rgba(0,0,0,0.22), 0 8px 20px rgba(0,0,0,0.12);
        max-width: 480px;
        width: 100%;
        max-height: 90vh;
        overflow: auto;
        position: relative;
        transform: translateY(20px) scale(0.96);
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
        font-family: Georgia, serif;
    }
    .dgtux-overlay.dgtux-visible .dgtux-popup {
        transform: translateY(0) scale(1);
    }

    /* ===== v3.7 — 'BESTAAT AL'-VARIANT. Was een heel ander ontwerp:
       mintgroene bol, gecentreerde tekst, dikke knop. Hij staat maar
       zeven tienden van een seconde in beeld, en juist daarom moet hij
       aanvoelen als dezelfde kaart. Nu dezelfde bijbel, dezelfde
       versregel, dezelfde titel en hetzelfde dunne balkje, alleen dan
       in één keer vol. Geen weetje en geen sponsorbalk: daar is de tijd
       te kort voor en het zou de bezoeker alleen ophouden. ===== */
    .dgtux-b-rfill { width: 0; animation: dgtuxRFill 0.75s ease-out forwards; }
    @keyframes dgtuxRFill { from { width: 0; } to { width: 100%; } }
    .dgtux-redirect-link {
        display: inline-block;
        margin-top: 15px;
        font-family: 'DM Sans', system-ui, sans-serif;
        font-size: 16px;
        font-weight: 600;
        color: #A68A64;
        text-decoration: none;
        border-bottom: 1.5px solid rgba(198, 164, 110, 0.5);
        transition: color 0.18s, border-color 0.18s;
    }
    .dgtux-redirect-link:hover { color: #2E4635; border-bottom-color: #2E4635; }


    /* ===== Steps list ===== */
    .dgtux-steps {
        padding: 22px 30px;
        list-style: none;
        margin: 0;
    }
    .dgtux-step {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 14px 0;
        font-family: Georgia, serif;
        font-size: 1.12rem;
        color: #8a937f;
        transition: color 0.3s, opacity 0.3s;
        line-height: 1.35;
    }
    .dgtux-step.dgtux-step-active {
        color: #2E4635;
        font-weight: 700;
    }
    .dgtux-step.dgtux-step-done {
        color: #4a7a5e;
        font-weight: 600;
    }
    .dgtux-step-text strong {
        display: block;
        font-weight: inherit;
    }

    /* v2.8 — DRIE DUIDELIJKE STATEN. Wachtend: een rustige open ring,
       duidelijk nog niet aan de beurt. Bezig: gouden ring die zacht ademt,
       zodat je ziet waar hij nu is. Klaar: massief bosgroen met een wit
       vinkje. Voorheen leken bezig en klaar te veel op elkaar (donkergroen
       naast iets lichter groen) en sprong het vinkje er niet uit. */
    .dgtux-step-icon {
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #FBF8F1;
        border: 2px solid rgba(46, 70, 53, 0.18);
        color: #9aa693;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
    }
    .dgtux-step.dgtux-step-active .dgtux-step-icon {
        background: #FBF8F1;
        border-color: #C6A46E;
        color: #7a5f2e;
        transform: scale(1.06);
        animation: dgtuxBreathe 1.8s ease-in-out infinite;
    }
    @keyframes dgtuxBreathe {
        0%, 100% { box-shadow: 0 0 0 0 rgba(198, 164, 110, 0.55); }
        50%      { box-shadow: 0 0 0 7px rgba(198, 164, 110, 0); }
    }
    @media (prefers-reduced-motion: reduce) {
        .dgtux-step.dgtux-step-active .dgtux-step-icon { animation: none; box-shadow: 0 0 0 4px rgba(198, 164, 110, 0.28); }
    }
    .dgtux-step.dgtux-step-done .dgtux-step-icon {
        background: #2E4635;
        border-color: #2E4635;
        color: #FBF8F1;
        transform: scale(1);
    }
    .dgtux-step-icon svg {
        width: 18px; height: 18px;
        stroke-width: 3;
    }

    .dgtux-step-text {
        flex: 1;
    }

    /* ===== Progress bar at the bottom ===== */
    .dgtux-progress-wrap {
        padding: 6px 30px 24px;
    }
    .dgtux-progress {
        height: 12px;
        background: rgba(46, 70, 53, 0.08);
        border-radius: 50px;
        overflow: hidden;
        position: relative;
    }
    .dgtux-progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #6FD0AA 0%, #4a7a5e 100%);
        width: 0%;
        border-radius: 50px;
        transition: width 0.4s ease-out;
    }
    .dgtux-progress-pct {
        text-align: center;
        margin-top: 12px;
        font-size: 1rem;
        font-weight: 700;
        color: #2E4635;
        font-family: Georgia, serif;
        font-variant-numeric: tabular-nums;
    }

    /* ===== v3.1 — MOBIEL EERST. 90% van het verkeer is telefoon, en
       daar brak de vorige popup op elke regel af: een lijst van vijf
       stappen, een voet met twee kolommen, een kaart in een kaart. Nu
       drie rustige lagen onder elkaar, allemaal op volle breedte, en
       per laag maar één ding om te lezen. ===== */
    .dgtux-b-in { padding: 26px 26px 22px; }
    .dgtux-b-top { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
    /* v3.2: een pulserend stipje is wat elke laadbalk doet. Hier bladert
       een open bijbel: twee bladzijden slaan om over de rug, met een
       kleine vertraging tussen de twee zodat het nooit stokt. Puur CSS,
       dus geen extra bestand en geen haperingen op een oude telefoon. */
    .dgtux-b-book {
        position: relative; flex: 0 0 26px; width: 26px; height: 19px;
        color: #C6A46E; perspective: 340px; perspective-origin: 50% 50%;
    }
    .dgtux-b-book svg { width: 26px; height: 19px; display: block; }
    .dgtux-b-leaf {
        position: absolute; top: 11%; height: 76%;
        left: 50%; width: 40%;
        background: #FBF8F1;
        border: 1.3px solid currentColor; border-left: 0;
        border-radius: 0 3px 3px 0;
        transform-origin: left center;
        transform: rotateY(-10deg); opacity: 0;
        animation: dgtuxLeaf 2.6s linear infinite;
    }
    .dgtux-b-leaf2 { animation-delay: -1.3s; } /* negatief: begint meteen halverwege, geen lege eerste ronde */
    /* De bladzijde is alleen zichtbaar terwijl hij ECHT onderweg is. Hij
       gaat nooit plat op de linker of rechter pagina liggen, want dan
       dekt hij de omslag af en lijkt het boek dicht te klappen. */
    @keyframes dgtuxLeaf {
        0%       { transform: rotateY(-10deg);  opacity: 0; }
        12%      { transform: rotateY(-30deg);  opacity: 1; }
        56%      { transform: rotateY(-128deg); opacity: 1; }
        74%      { transform: rotateY(-164deg); opacity: 0; }
        75%,100% { transform: rotateY(-10deg);  opacity: 0; }
    }
    @media (prefers-reduced-motion: reduce) {
        .dgtux-b-leaf { animation: none; opacity: 0; }
    }
    .dgtux-b-ref {
        font-family: 'DM Sans', system-ui, sans-serif; font-size: 14px; font-weight: 700;
        letter-spacing: 0.12em; text-transform: uppercase; color: #A68A64; line-height: 1.2;
    }
    .dgtux-b-title {
        font-family: Georgia, serif; font-size: 1.3rem; color: #2E4635;
        line-height: 1.3; font-weight: 700; margin: 0;
    }
    /* v3.5: het icoon van de stap staat weer links van de regel, zoals in
       de oude lijst. Nu maar één icoon in beeld, dat van de stap die
       draait, en het wisselt mee met een zachte fade. */
    .dgtux-b-nowrow { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
    .dgtux-b-nowic {
        flex: 0 0 21px; width: 21px; height: 21px; color: #A68A64;
        display: flex; align-items: center; justify-content: center;
    }
    .dgtux-b-nowic svg { width: 21px; height: 21px; display: block; animation: dgtuxIcoIn 0.4s ease-out; }
    @keyframes dgtuxIcoIn {
        from { opacity: 0; transform: scale(0.82); }
        to   { opacity: 1; transform: scale(1); }
    }
    @media (prefers-reduced-motion: reduce) { .dgtux-b-nowic svg { animation: none; } }
    .dgtux-b-now {
        font-family: 'DM Sans', system-ui, sans-serif; font-size: 16px;
        color: #7c8a7e; line-height: 1.4; min-height: 1.4em; flex: 1;
    }
    .dgtux-b-bar { height: 4px; margin-top: 17px; background: rgba(46, 70, 53, 0.10); }
    .dgtux-b-bar .dgtux-progress-fill { background: linear-gradient(90deg, #2E4635, #C6A46E); }
    .dgtux-b-eta {
        font-family: 'DM Sans', system-ui, sans-serif; font-size: 16px; font-weight: 400;
        color: #9aa693; margin-top: 9px; text-align: left; line-height: 1.4;
    }

    /* ===== v2.9 — SPONSORHINT. Veel bezoekers weten niet dat je een vers
       kunt sponsoren. Dit wachtmoment is de eerlijkste plek om het te
       vertellen: ze zien op dat moment precies wat het werk oplevert.
       Opent in een NIEUW tabblad, zodat hun studie niet verloren gaat. ===== */
    /* v3.1: geen kaartje meer binnen de kaart, maar een donkergroene
       balk over de volle breedte onderaan. Het is het enige zware vlak
       op het scherm, dus het oog gaat er vanzelf heen zonder dat het
       schreeuwt. Opent in een NIEUW tabblad: de studie blijft staan. */
    .dgtux-sponsor {
        display: flex; align-items: center; gap: 14px;
        position: relative; overflow: hidden;
        margin: 0; padding: 18px 22px 19px 26px;
        background: #2E4635;
        border: 0; border-radius: 0;
        text-decoration: none;
        transition: background 0.2s ease;
    }
    /* v3.6: het losse halve bolletje was decoratie zonder betekenis. In
       plaats daarvan trekt er nu om de vijf seconden een zachte gouden
       lichtveeg over de hele voet, en het pijltje geeft precies op dat
       moment een klein zetje naar rechts. Zo valt het oog erop zonder
       dat er een knop bij hoeft die de kaart weer druk maakt. */
    .dgtux-sponsor:before {
        content: ''; position: absolute; top: -25%; bottom: -25%;
        left: -150px; width: 88px; z-index: 1;
        background: linear-gradient(100deg, rgba(198,164,110,0), rgba(198,164,110,0.22), rgba(198,164,110,0));
        transform: skewX(-14deg);
        animation: dgtuxSweep 5.2s ease-in-out infinite;
    }
    @keyframes dgtuxSweep { 0% { left: -150px; } 60%, 100% { left: 112%; } }
    .dgtux-sponsor:hover { background: #35513c; transform: none; box-shadow: none; }
    .dgtux-sponsor-tx { position: relative; z-index: 2; flex: 1; display: block; }
    .dgtux-sponsor-tx b {
        display: block; font-family: Georgia, serif; font-size: 17px;
        color: #ffffff; font-weight: 600; line-height: 1.3;
    }
    .dgtux-sponsor-tx span {
        display: block; font-family: 'DM Sans', system-ui, sans-serif;
        font-size: 16px; color: #c9d3c6; margin-top: 4px; line-height: 1.45;
    }
    .dgtux-sponsor-go {
        position: relative; z-index: 2;
        flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%;
        background: rgba(198, 164, 110, 0.16);
        border: 1.5px solid rgba(198, 164, 110, 0.55);
        color: #C6A46E;
        display: flex; align-items: center; justify-content: center;
        animation: dgtuxNudge 5.2s ease-in-out infinite;
    }
    .dgtux-sponsor-go svg { width: 18px; height: 18px; display: block; }
    @keyframes dgtuxNudge {
        0%, 42%, 100% { transform: translateX(0); }
        56%           { transform: translateX(4px); }
    }
    @media (prefers-reduced-motion: reduce) {
        .dgtux-sponsor:before { animation: none; opacity: 0; }
        .dgtux-sponsor-go { animation: none; }
    }

    /* ===== Bible fact box ===== */
    /* v3.0: geen kader meer. Er stond kader op kader op kader; nu is de
       sponsorkaart het ENIGE omlijnde element en valt hij dus op. */
    /* v3.1: band in plaats van kader. Loopt van rand tot rand, zodat de
       kaart drie duidelijke lagen krijgt in plaats van losse blokjes. */
    .dgtux-weetje {
        margin: 0;
        padding: 19px 26px 21px;
        background: #F4F1E8;
        border: 0;
        text-align: left;
    }
    .dgtux-weetje-label {
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.13em;
        color: #A68A64;
        font-family: 'DM Sans', system-ui, sans-serif;
        margin-bottom: 8px;
    }
    .dgtux-weetje-text {
        font-size: 16px;
        color: #3f4a40;
        font-family: Georgia, serif;
        font-style: italic;
        line-height: 1.62;
        min-height: 4.8em;
        display: block;
        opacity: 1;
        transition: opacity 0.28s ease;
    }

    /* ===== v3.10: het blok onder het eerste deel ===== */
    .dgtux-more {
        margin: 26px 0 8px; padding: 20px 22px 22px;
        background: #F4F1E8; border-radius: 14px; text-align: center;
    }
    .dgtux-more-t {
        font-family: Georgia, serif; font-size: 17px; font-weight: 700; color: #2E4635; line-height: 1.35;
    }
    .dgtux-more-s {
        font-family: 'DM Sans', system-ui, sans-serif; font-size: 16px; color: #7c8a7e; margin-top: 6px; line-height: 1.45;
    }
    .dgtux-more-b {
        display: inline-block; position: relative; overflow: hidden;
        margin-top: 14px; padding: 12px 24px; border-radius: 50px;
        font-family: 'DM Sans', system-ui, sans-serif; font-size: 16px; font-weight: 700;
        background: rgba(46, 70, 53, 0.14); color: #7c8a7e; text-decoration: none;
        cursor: default; transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
    }
    .dgtux-more-ready .dgtux-more-b {
        background: #2E4635; color: #FBF8F1; cursor: pointer;
        box-shadow: 0 4px 14px rgba(46, 70, 53, 0.22);
    }
    .dgtux-more-ready .dgtux-more-b:hover { background: #35513c; }
    .dgtux-more-fill {
        position: absolute; left: 0; top: 0; bottom: 0; width: 0;
        background: rgba(46, 70, 53, 0.16); transition: width 1s linear;
    }
    .dgtux-more-ready .dgtux-more-fill { display: none; }
    .dgtux-more-lbl, .dgtux-more-cnt { position: relative; }
    .dgtux-more-cnt {
        font-weight: 400; font-size: 14px; opacity: 0.72; margin-left: 9px;
        font-variant-numeric: tabular-nums;
    }
    @media (max-width: 520px) {
        .dgtux-more { padding: 18px 18px 20px; }
        .dgtux-more-b { display: block; }
    }

    /* ===== Mobile ===== */
    @media (max-width: 520px) {
        .dgtux-overlay { padding: 14px; }
        .dgtux-popup { max-height: 95vh; }
        .dgtux-steps { padding: 16px 22px; }
        .dgtux-step { font-size: 1.05rem; padding: 12px 0; }
        .dgtux-progress-wrap { padding: 0 22px 18px; }
        .dgtux-b-in { padding: 24px 22px 20px; }
        .dgtux-b-title { font-size: 1.22rem; }
        .dgtux-weetje { padding: 17px 22px 19px; }
        .dgtux-sponsor { padding: 17px 20px 18px 22px; gap: 12px; }
        .dgtux-sponsor-tx b { font-size: 16.5px; }
        .dgtux-sponsor-go { flex: 0 0 36px; width: 36px; height: 36px; }
    }
    /* v2.1: kid-friendly variant — more cheerful, softer, mint accent */
    .dgtux-overlay-kids .dgtux-popup {
        background: #FFFFFF;
        border: 3px solid #6FD0AA;
        border-radius: 28px;
    }
    .dgtux-overlay-kids .dgtux-b-title {
        color: #2E4635;
        font-size: 1.4rem;
    }
    .dgtux-overlay-kids .dgtux-b-book { color: #6FD0AA; }
    .dgtux-overlay-kids .dgtux-b-nowic { color: #4a9c7d; }
    .dgtux-overlay-kids .dgtux-b-leaf { background: #FFFFFF; }
    .dgtux-overlay-kids .dgtux-b-ref { color: #4a9c7d; }
    .dgtux-overlay-kids .dgtux-b-bar .dgtux-progress-fill {
        background: linear-gradient(90deg, #6FD0AA, #5DB593) !important;
    }
    .dgtux-overlay-kids .dgtux-progress-fill {
        background: linear-gradient(90deg, #6FD0AA 0%, #5DB593 100%) !important;
    }
    /* v2.8: kids houdt zijn eigen kleur, maar volgt dezelfde drie staten. */
    .dgtux-overlay-kids .dgtux-step.dgtux-step-active .dgtux-step-icon {
        background: #6FD0AA;
        border-color: #6FD0AA;
    }
    .dgtux-overlay-kids .dgtux-step.dgtux-step-done .dgtux-step-icon {
        background: #5DB593;
        border-color: #5DB593;
    }
    .dgtux-overlay-kids .dgtux-weetje {
        background: #F0FBF6;
        border-left: 0;
    }
    .dgtux-overlay-kids .dgtux-weetje-label {
        color: #4a9c7d;
    }
    .dgtux-overlay-kids .dgtux-weetje-text {
        font-size: 1rem;
        line-height: 1.55;
    }