/**
 * Top Mannencadeaus Quiz PRO - Stylesheet
 */
.tmc-wrap{max-width:800px;margin:auto}
.tmc-quiz-box{
    position:relative;
    background:#fff;
    border:none;
    border-radius:24px;
    padding:36px;
    box-shadow:0 10px 40px rgba(0,0,0,.05),0 0 0 3px rgba(10,53,83,.15);
    box-sizing:border-box;
}
.tmc-logo-corner{position:absolute;top:12px;right:12px;width:30px;height:30px}
.tmc-logo-corner img{width:100%;height:100%;object-fit:contain;display:block}
@media(max-width:768px){.tmc-logo-corner{width:25px;height:25px;top:10px;right:10px}}

.tmc-progress{height:10px;background:#eee;border-radius:99px;margin:20px 0}
.tmc-bar{height:10px;background:#0a3553;border-radius:99px;transition:width .25s ease}

/* --- Vaste hoogte container --- */
.tmc-step-container{position:relative;height:400px;display:flex;flex-direction:column}
.tmc-step,.tmc-intro{display:none;flex-direction:column;height:100%;min-height:0}
.tmc-step.active,.tmc-intro.active{display:flex;animation:tmcStepIn .3s ease}
@keyframes tmcStepIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.tmc-step-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding-right:8px}
@media(max-width:768px){.tmc-step-container{height:300px}}
/* --- einde vaste hoogte --- */

/* --- Berekenscherm --- */
.tmc-loading-body{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;height:100%;
}
.tmc-spinner{
    width:44px;height:44px;border-radius:50%;
    border:4px solid #eaf1f6;border-top-color:#0a3553;
    animation:tmcSpin .8s linear infinite;margin-bottom:20px;
}
@keyframes tmcSpin{to{transform:rotate(360deg)}}
.tmc-loading-list{list-style:none;margin:16px 0 0 0;padding:0;text-align:left;width:100%;max-width:340px}
.tmc-loading-list li{
    display:flex;align-items:center;gap:10px;padding:8px 0;
    color:#9aa3a9;font-size:15px;transition:color .2s ease;
}
.tmc-loading-dot{
    flex:0 0 auto;width:18px;height:18px;border-radius:50%;border:2px solid #d7dde1;
    position:relative;transition:border-color .2s ease,background .2s ease;
}
.tmc-loading-list li.done{color:#0a3553;font-weight:600}
.tmc-loading-list li.done .tmc-loading-dot{
    border-color:#0a3553;background:#0a3553;
}
.tmc-loading-list li.done .tmc-loading-dot::after{
    content:"";position:absolute;left:5px;top:1px;width:5px;height:9px;
    border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}

.tmc-card{display:block;border:1px solid #ddd;padding:14px;border-radius:10px;margin:10px 0;cursor:pointer}
.tmc-card.selected{border-color:#111;font-weight:700}
.tmc-card:focus-within,.tmc-nav button:focus-visible,.tmc-name-input:focus-visible{
    outline:2px solid #0a3553;
    outline-offset:2px;
}
.tmc-nav{display:flex;justify-content:space-between;margin-top:20px;flex:0 0 auto}
.tmc-nav button{
    background:#D5A65B;color:#fff;border:none;border-radius:999px;
    padding:14px 28px;font-size:16px;font-weight:600;cursor:pointer;
    box-shadow:none;transition:none;
}
.tmc-nav button:hover{background:#D5A65B;color:#fff;transform:none;box-shadow:none}
.tmc-step h3{font-size:clamp(22px,4vw,32px)}
.tmc-card{font-size:clamp(16px,2vw,20px)}

/* --- Intro / beginscherm --- */
.tmc-intro-body{
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    text-align:center;height:100%;padding:0 8px;
}
.tmc-intro-body h1{
    font-size:clamp(38px,6vw,54px);font-weight:800;line-height:1.15;
    letter-spacing:-.5px;margin:0 0 28px 0;max-width:560px;
}
.tmc-intro-reasons{
    list-style:none;margin:20px auto 40px auto;padding:0;
    display:flex;flex-direction:column;gap:20px;width:fit-content;max-width:100%;
}
.tmc-intro-reasons li{
    display:flex;align-items:flex-start;gap:12px;font-size:clamp(16px,2.1vw,18px);
    line-height:1.4;color:#333;text-align:left;
}
.tmc-intro-reasons li span.tmc-check{
    flex:0 0 auto;width:24px;height:24px;margin-top:1px;border-radius:50%;
    background:#0a3553;color:#fff;font-size:13px;font-weight:700;
    display:flex;align-items:center;justify-content:center;
}
.tmc-intro .tmc-nav{justify-content:center}
@media(min-width:769px){.tmc-intro .tmc-nav{margin-top:40px}}
.tmc-intro .tmc-nav button{padding:16px 34px;font-size:clamp(16px,2vw,18px)}
.tmc-intro .tmc-nav button::after{content:"→";display:inline-block;margin-left:10px;transition:transform .2s ease}
.tmc-intro .tmc-nav button:hover::after{transform:translateX(3px)}

.tmc-visually-hidden{
    position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

@media(max-width:768px){
    .tmc-step h3{font-size:22px!important;line-height:1.3}
    .tmc-step-counter{font-size:15px}
    .tmc-card{font-size:16px!important}
    .tmc-nav button{font-size:15px!important;padding:12px 20px!important}
    .tmc-intro-body h1{font-size:30px!important;line-height:1.2;margin-bottom:14px!important;}
    .tmc-intro-reasons{gap:8px!important;margin-bottom:14px!important}
    .tmc-intro-reasons li{font-size:14px!important}
    .tmc-intro-reasons li span.tmc-check{width:20px!important;height:20px!important}
    .tmc-intro .tmc-nav{margin-top:8px!important}
    .tmc-intro .tmc-nav button{padding:12px 24px!important}
}

/* --- Donkerblauwe huisstijl voor ALLE schermen van de quiz ---
   Achtergrond #0A3553, licht doorschijnend, dunne witte rand, witte tekst
   en gouden (#D5A65B) accenten. */
.tmc-quiz-box{
    background:#0a3553;
    box-shadow:0 10px 40px rgba(0,0,0,.05),0 0 0 2px #fff;
    transition:background-color .25s ease;
}
/* Alleen het beginscherm is licht doorschijnend; alle andere schermen zijn dicht. */
.tmc-quiz-box:has(.tmc-intro.active){
    background:rgba(10,53,83,.92);
}
.tmc-logo-corner img{filter:brightness(0) invert(1)}

/* Koppen: wit, met het gekleurde woord in goud (overschrijft de inline grijze kleur) */
.tmc-step h3,
.tmc-intro-body h1{color:#fff}
.tmc-step h3 span:not(.tmcPerson),
.tmc-intro-body h1 span{color:#D5A65B!important}
.tmc-step-body > p{color:rgba(255,255,255,.75)!important}
.tmc-step-counter{color:rgba(255,255,255,.75)!important}

/* Voortgangsbalk */
.tmc-progress{background:rgba(255,255,255,.2)}
.tmc-bar{background:#D5A65B}

/* Antwoordkaarten */
.tmc-card{
    color:#fff;
    border-color:rgba(255,255,255,.35);
    background:rgba(255,255,255,.06);
    accent-color:#D5A65B;
}
.tmc-card.selected{
    border-color:#D5A65B;
    background:rgba(213,166,91,.18);
}

/* Focus-randen moeten zichtbaar zijn op donkerblauw */
.tmc-card:focus-within,
.tmc-nav button:focus-visible,
.tmc-name-input:focus-visible{outline-color:#D5A65B}

/* Beginscherm */
.tmc-intro-reasons li{color:#fff}
.tmc-intro-reasons li span.tmc-check{background:#D5A65B;color:#0a3553}
.tmc-intro .tmc-nav button:focus-visible{outline-color:#fff}

/* Berekenscherm */
.tmc-spinner{border-color:rgba(255,255,255,.2);border-top-color:#D5A65B}
.tmc-loading-list li{color:rgba(255,255,255,.55)}
.tmc-loading-dot{border-color:rgba(255,255,255,.35)}
.tmc-loading-list li.done{color:#fff}
.tmc-loading-list li.done .tmc-loading-dot{border-color:#D5A65B;background:#D5A65B}
.tmc-loading-list li.done .tmc-loading-dot::after{border-color:#0a3553}

/* Naamveld: witte tekst en witte rand op donkerblauw.
   Hoge specificiteit + !important, omdat thema's vaak een eigen kleur op
   input[type="text"] zetten die anders wint van deze plugin. */
.tmc-wrap .tmc-quiz-box input.tmc-name-input,
.tmc-wrap .tmc-quiz-box input.tmc-name-input[type="text"],
.tmc-wrap .tmc-quiz-box input.tmc-name-input:hover,
.tmc-wrap .tmc-quiz-box input.tmc-name-input:focus,
.tmc-wrap .tmc-quiz-box input.tmc-name-input:active{
    background:transparent!important;
    background-color:transparent!important;
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    caret-color:#fff!important;
    border:1px solid #fff!important;
    box-shadow:none!important;
}
.tmc-wrap .tmc-quiz-box input.tmc-name-input::placeholder{
    color:rgba(255,255,255,.6)!important;
    -webkit-text-fill-color:rgba(255,255,255,.6)!important;
    opacity:1;
}
.tmc-wrap .tmc-quiz-box input.tmc-name-input:-webkit-autofill,
.tmc-wrap .tmc-quiz-box input.tmc-name-input:-webkit-autofill:focus{
    -webkit-text-fill-color:#fff!important;
    box-shadow:0 0 0 1000px #0a3553 inset!important;
}