body { background-color: #f9fafb; color: #1f2937; -webkit-font-smoothing: antialiased; overflow-x: hidden; font-family: 'Plus Jakarta Sans', sans-serif; }
.ph{display:inline-block;width:1em;height:1em;flex-shrink:0;vertical-align:-0.125em}

/* Nederlands kentekenbord */
.plate-box {
    background-color: #FFD400; border: 2px solid #000; border-radius: 8px;
    display: flex; overflow: hidden; box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 4px 10px rgba(0,0,0,0.05);
}
.plate-eu {
    background-color: #003399; width: 40px; display: flex; flex-direction: column;
    justify-content: space-between; align-items: center; padding: 6px 0; border-right: 2px solid #000;
}
.plate-input-area {
    flex: 1; position: relative;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20200%2064%27%3E%3Ctext%20x%3D%27100%27%20y%3D%2736%27%20font-size%3D%2760%27%20fill%3D%27rgba%280%2C0%2C0%2C0.04%29%27%20font-family%3D%27sans-serif%27%20font-weight%3D%27bold%27%20text-anchor%3D%27middle%27%20dominant-baseline%3D%27middle%27%3ENL%3C/text%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: contain;
}
.plate-input-area input {
    width: 100%; height: 100%; background: transparent; border: none; outline: none;
    font-size: 28px; font-weight: 900; color: #000; text-align: center; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 0;
}
.plate-input-area input::placeholder { color: rgba(0,0,0,0.2); }
.plate-box.is-invalid { animation: shake 0.35s; border-color: #e11d48; }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* Tabs */
.tab-btn { border-bottom: 2px solid transparent; transition: all 0.2s; color: #6b7280; }
.tab-btn.active { border-bottom-color: #ff6600; color: #111827; font-weight: 700; }

/* Scorecirkel */
.score-circle {
    background: conic-gradient(#10B981 var(--val), #374151 0deg);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
}

/* Prijskaarten */
.pricing-card {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 16px;
    padding: 32px; display: flex; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s;
}
.pricing-card:hover { transform: translateY(-4px); box-shadow: 0 10px 40px -10px rgba(0,0,0,0.08); }
.pricing-card.is-muted { background: #f9fafb; }
.pricing-card.is-dark { background: #111827; color: #fff; border-color: #1f2937; }
.pricing-card.highlight { background: #111827; color: #fff; border-color: #111827; position: relative; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); }
@media (min-width: 1024px) {
    .pricing-card.highlight { transform: translateY(-16px); }
    .pricing-card.highlight:hover { transform: translateY(-20px); }
}
.badge-popular { position: absolute; top: -12px; right: 24px; background: #ff6600; color: white; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; text-transform: uppercase; }

/* Loader */
.loader { border: 3px solid rgba(255,255,255,0.3); border-radius: 50%; border-top: 3px solid white; width: 24px; height: 24px; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.img-fallback { background: linear-gradient(135deg, #1f2937, #374151); }

.nav-link.is-active { color: #ff6600; }
.star-btn.is-on { color: #ff8a3d; }

#toast { transform: translateX(-50%); transition: opacity 0.25s, transform 0.25s; }
#toast.is-hidden { opacity: 0; transform: translate(-50%, 12px); pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
    .animate-bounce { animation: none !important; }
    * { transition-duration: 0.01ms !important; }
}

/* Generieke print-modus: zet class="print-area" op het element dat je wilt
   printen/als PDF opslaan (bv. het rapport of het advies). Alles daarbuiten
   wordt verborgen; elementen met .no-print blijven ook verborgen erbinnen. */
@media print {
    body.is-printing * { visibility: hidden; }
    body.is-printing .print-area, body.is-printing .print-area * { visibility: visible; }
    body.is-printing .print-area { position: absolute; left: 0; top: 0; width: 100%; background: #fff !important; }
    body.is-printing .print-area .no-print { display: none !important; }
    body.is-printing header, body.is-printing footer, body.is-printing #toast, body.is-printing #auth-modal, body.is-printing #password-modal { display: none !important; }
}

/* ---------- Paginawissel: zachte fade-in i.p.v. harde flits ---------- */
body { opacity: 0; }
body.page-ready { opacity: 1; transition: opacity 0.35s ease; }

/* ---------- Scroll-reveal: secties glijden/faden in tijdens scrollen ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s cubic-bezier(.16,1,.3,1), transform 0.6s cubic-bezier(.16,1,.3,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1.is-visible { transition-delay: .08s; }
.reveal-delay-2.is-visible { transition-delay: .16s; }
.reveal-delay-3.is-visible { transition-delay: .24s; }

/* ---------- Microinteracties ---------- */
.btn-press { transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; }
.btn-press:active { transform: scale(0.97); }

.stat-tile { transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.stat-tile:hover { transform: translateY(-3px); border-color: rgba(255,102,0,0.4); box-shadow: 0 8px 24px -8px rgba(0,0,0,0.35); }

/* ---------- Skeleton loader ---------- */
.skeleton {
    background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 37%, #e5e7eb 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.4s ease infinite;
    border-radius: 8px;
}
.skeleton.dark {
    background: linear-gradient(90deg, #1f2937 25%, #374151 37%, #1f2937 63%);
    background-size: 400% 100%;
}
@keyframes skeleton-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    body { opacity: 1 !important; }
}