/* Enquete-wizard (publiek, hoogste verkeer): statische component-CSS. De per-enquete dynamische
   merk-kleuren/achtergrond/font blijven inline in enquete/show.blade.php (:root --brand etc.);
   deze regels gebruiken die via var(--brand). Los gehouden zodat de wizard-CSS cachebaar +
   comprimeerbaar is i.p.v. bij elke respondent-weergave mee te reizen. */

    /* De gekozen achtergrond (op de body) altijd tot onderaan laten doorlopen, ook als de inhoud kort is
       (bijv. korte enquete of white-label zonder footer). Zonder deze minimumhoogte eindigt de body hoog
       en zie je onderaan een naad met de html-basiskleur. */
    body { min-height: 100vh; min-height: 100dvh; }

    .wz-header {
        width: 100%; aspect-ratio: 4 / 1; max-height: 220px; object-fit: cover;
        border-radius: 1rem; display: block; margin-bottom: 1rem;
    }
    .wz-header-wrap {
        position: relative; width: 100%; aspect-ratio: 4 / 1; min-height: 160px; max-height: 260px;
        border-radius: 1rem; overflow: hidden; background-size: cover; background-position: center;
        display: flex; align-items: flex-end; margin-bottom: 1rem;
    }
    .wz-header-wrap::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent, rgba(0,0,0,.6)); }
    .wz-header-title { position: relative; z-index: 1; padding: 1.1rem 1.25rem; color: #fff; }
    .wz-logo-overlay { max-height: 44px; margin-bottom: .4rem; display: block; }
    .wz-logo { max-height: 72px; width: auto; margin: 0 auto .25rem; display: block; }
    .wz-logo-wrap { text-align: center; }
    .wz-wrap { max-width: 640px; }
    /* Mobiele browsers (iOS) zoomen in zodra je een veld met lettergrootte < 16px aantikt. Alle
       invoervelden in de enquête op minimaal 16px zetten voorkomt dat inzoomen volledig. */
    .wz-wrap input, .wz-wrap select, .wz-wrap textarea { font-size: 16px !important; }
    /* Nette inline-foutmelding onder een vraag (i.p.v. een alert-popup). */
    .wz-err { color: #dc2626; font-weight: 600; font-size: .9rem; margin-top: .7rem; display: flex; align-items: center; gap: .35rem; animation: wzErrShake .38s; }
    .wz-err::before { content: '⚠'; font-size: 1rem; }
    @keyframes wzErrShake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-5px); } 40%,80% { transform: translateX(5px); } }
    @media (prefers-reduced-motion: reduce) { .wz-err { animation: none; } }
    /* Speelse voortgangsbalk voor kinderen: kleurverloop + strepen + ster aan de kop */
    .wz-progress { height: .9rem; border-radius: 999px; background: #eceaf3; overflow: visible; box-shadow: inset 0 1px 2px rgba(27,23,64,.09); }
    .wz-progress > span {
        display: block; height: 100%; min-width: .9rem; border-radius: 999px; position: relative;
        background: linear-gradient(90deg, var(--brand), var(--brand-accent));
        transition: width .4s cubic-bezier(.34,1.56,.64,1);
    }
    .wz-progress > span::before {
        content: ''; position: absolute; inset: 0; border-radius: 999px; opacity: .35;
        background-image: linear-gradient(45deg, rgba(255,255,255,.9) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.9) 50%, rgba(255,255,255,.9) 75%, transparent 75%);
        background-size: .95rem .95rem; animation: wz-stripes 1s linear infinite;
    }
    .wz-progress > span::after {
        content: '⭐'; position: absolute; right: -.2rem; top: 50%; transform: translateY(-50%);
        font-size: 1.2rem; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.18));
    }
    @keyframes wz-stripes { from { background-position: 0 0; } to { background-position: .95rem 0; } }
    @media (prefers-reduced-motion: reduce) { .wz-progress > span::before { animation: none; } }
    .wz-card { border: 1px solid #e8e8e8; border-radius: 1.25rem; }
    /* Multi-mode: elke vraag een eigen kaart voor duidelijk onderscheid. */
    .wz-bare { background: transparent !important; border: 0 !important; padding: 0 !important; }
    .wz-qcard {
        background: #fff; border: 1px solid #e9e9ee; border-radius: 1rem;
        padding: 1.15rem 1.25rem; margin-bottom: 1.1rem; box-shadow: 0 2px 10px rgba(27,23,64,.05);
    }
    .wz-qcard:last-child { margin-bottom: 0; }
    .wz-qcard.wz-statement { background: color-mix(in srgb, var(--brand) 5%, #fff); border-style: dashed; }
    .wz-qhead { font-weight: 700; font-size: 1.05rem; margin-bottom: .2rem; color: #1f2430; }
    .wz-opt {
        display: flex; align-items: center; gap: .75rem; width: 100%; text-align: left;
        border: 1.5px solid #e3e3e3; border-radius: .9rem; background: #fff; color: #1f2430;
        padding: .95rem 1.1rem; font-weight: 600;
        transition: border-color .15s ease, background .15s ease, transform .18s var(--sjk-ease-spring, cubic-bezier(.34,1.56,.64,1)), box-shadow .18s ease;
    }
    .wz-opt:hover { border-color: var(--brand); }
    .wz-opt:active { transform: scale(.98); }
    .wz-opt.selected { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, #fff);
        transform: translateY(-1px); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--brand) 55%, transparent); }
    .wz-opt .tick { margin-left: auto; color: var(--brand); opacity: 0; transform: scale(.4); transition: opacity .18s ease, transform .22s var(--sjk-ease-spring, cubic-bezier(.34,1.56,.64,1)); }
    .wz-opt.selected .tick { opacity: 1; transform: scale(1); }
    .wz-star { font-size: 2.2rem; cursor: pointer; color: #d7d7d7; line-height: 1;
        transition: transform .18s var(--sjk-ease-spring, cubic-bezier(.34,1.56,.64,1)), color .12s ease; }
    .wz-star:hover { transform: scale(1.12); }
    .wz-star.on { color: var(--brand); animation: wzPop .32s var(--sjk-ease-spring, cubic-bezier(.34,1.56,.64,1)); }
    @keyframes wzPop { 0% { transform: scale(.7); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
    .wz-nps { display: grid; grid-template-columns: repeat(10, 1fr); gap: .4rem; }
    .wz-nps button {
        border: 1.5px solid #e3e3e3; border-radius: .7rem; background: #fff; padding: .6rem 0;
        font-weight: 700; min-height: 3rem; color: #1f2430;
    }
    .wz-nps button.selected { border-color: var(--brand); background: var(--brand); color: #fff; }
    /* Op smalle schermen: twee nette rijen van vijf i.p.v. tien piepkleine knopjes. */
    @media (max-width: 560px) { .wz-nps { grid-template-columns: repeat(5, 1fr); gap: .45rem; } }
    .wz-smiley {
        font-size: 2rem; line-height: 1; border: 1.5px solid #e3e3e3; border-radius: .8rem;
        background: #fff; padding: .45rem .65rem; cursor: pointer; flex: 1;
    }
    .wz-smiley.selected { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, #fff); }
    .wz-scale {
        flex: 1; border: 1.5px solid #e3e3e3; border-radius: .7rem; background: #fff; color: #1f2430;
        padding: .6rem 0; font-weight: 700; min-height: 3rem;
    }
    .wz-scale.selected { border-color: var(--brand); background: var(--brand); color: #fff; }
    .wz-rank { border: 1.5px solid #e3e3e3; border-radius: .7rem; background: #fff; padding: .55rem .7rem; color: #1f2430; }
    .wz-rank-num {
        flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border-radius: 50%;
        background: var(--brand); color: #fff; display: grid; place-items: center;
        font-weight: 700; font-size: .8rem;
    }
    /* Terug-knop: witte pill met rand + donkere tekst → leesbaar op elke achtergrond (foto/licht/donker). */
    .wz-back {
        border: 1px solid rgba(27, 23, 64, .14); background: rgba(255, 255, 255, .95); color: #1f2430;
        font-weight: 600; border-radius: var(--sjk-radius-btn, 14px); padding: .5rem 1.1rem; min-height: 3rem;
        box-shadow: 0 2px 8px rgba(27, 23, 64, .12); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
        transition: background .12s, box-shadow .12s;
    }
    .wz-back:hover { background: #fff; box-shadow: 0 4px 12px rgba(27, 23, 64, .16); }

    /* Tactiele selectie op smiley / nps / schaal (veerkrachtige pop) */
    .wz-smiley, .wz-nps button, .wz-scale {
        transition: border-color .15s ease, background .15s ease, color .15s ease,
            transform .18s var(--sjk-ease-spring, cubic-bezier(.34,1.56,.64,1)), box-shadow .18s ease;
    }
    .wz-smiley:hover, .wz-nps button:hover, .wz-scale:hover { transform: translateY(-2px); }
    .wz-smiley:active, .wz-nps button:active, .wz-scale:active { transform: scale(.96); }
    .wz-smiley.selected { transform: scale(1.06); animation: wzPop .32s var(--sjk-ease-spring, cubic-bezier(.34,1.56,.64,1)); }
    .wz-nps button.selected, .wz-scale.selected { box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--brand) 55%, transparent); }

    /* Vloeiende overgang tussen vragen (single-mode): elke render schuift/faded in */
    #wz-question { animation: wzQIn .4s var(--sjk-ease-out, cubic-bezier(.22,.61,.36,1)); }
    @keyframes wzQIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
    #wizard.is-leaving #wz-question { opacity: 0; transform: translateY(-10px); transition: opacity .18s ease, transform .18s ease; }

    /* Bevredigende afronding op het bedankt-scherm */
    .wz-done-emoji { display: inline-block; animation: wzDonePop .6s var(--sjk-ease-spring, cubic-bezier(.34,1.56,.64,1)); }
    @keyframes wzDonePop { 0% { transform: scale(0) rotate(-25deg); opacity: 0; } 60% { transform: scale(1.2) rotate(8deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }
    /* Confetti-regen (puur CSS, zelf gehost) */
    .wz-confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
    .wz-confetti i { position: absolute; top: -12vh; width: 9px; height: 14px; border-radius: 2px; opacity: .9;
        animation: wzFall linear forwards; }
    @keyframes wzFall { to { transform: translateY(115vh) rotate(720deg); opacity: 1; } }

    @media (prefers-reduced-motion: reduce) {
        #wz-question, .wz-smiley.selected, .wz-star.on, .wz-done-emoji { animation: none !important; }
        .wz-confetti { display: none !important; }
    }