/* — 1. PAGINA ACHTERGROND — */
.ri-scan-wrapper {
font-family: ‘Sora’, sans-serif;
box-sizing: border-box;
padding: 80px 20px;
min-height: 100vh;

background-color: #0B1120;
background-image:
linear-gradient(180deg, #0B1120 0%, rgba(11, 17, 32, 0.8) 50%, #0B1120 100%),
linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
background-size: 100% 100%, 30px 30px, 30px 30px;
background-repeat: no-repeat, repeat, repeat;
}
.ri-container { max-width: 900px; margin: 0 auto; }

/* — 2. HERO — */
.ri-scan-hero { text-align: center; margin-bottom: 60px; }

.ri-sys-label {
display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px;
background: rgba(168, 85, 247, 0.1); border: 1px solid rgba(168, 85, 247, 0.3);
border-radius: 50px; color: #c084fc; font-size: 12px; font-weight: bold;
font-family: monospace; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 24px;
}

.ri-title { color: white; font-weight: 800; font-size: clamp(32px, 5vw, 56px); line-height: 1.1; margin: 0 0 24px 0; }
.ri-gradient-text {
background: linear-gradient(90deg, #a855f7 0%, #ffffff 100%);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
display: inline-block;
}
.ri-desc { color: #94a3b8; font-size: 16px; line-height: 1.6; max-width: 600px; margin: 0 auto; }

/* — 3. DE SCANNER OVERRIDE (CONTRAST FIX) — */
/* We gebruiken #page-container om de specificiteit te verhogen en de plugin CSS te verslaan */

/* De Box eromheen */
#page-container .wpss-container {
font-family: ‘Sora’, sans-serif !important;
max-width: 100% !important;
background: #0f172a !important; /* Donkerblauw */
border: 1px solid rgba(168, 85, 247, 0.3) !important;
border-radius: 16px !important;
padding: 40px !important;
color: #cbd5e1 !important; /* LICHTE TEKST */
box-shadow: 0 0 60px -10px rgba(168, 85, 247, 0.1) !important;
margin-bottom: 60px;
}

/* Titel in de box */
#page-container .wpss-container h3 {
color: white !important;
font-size: 24px !important;
font-weight: 800 !important;
margin-top: 0 !important;
margin-bottom: 24px !important;
}

/* Input Veld */
#page-container .wpss-input {
background: #020617 !important; /* Bijna zwart */
border: 1px solid rgba(255, 255, 255, 0.1) !important;
color: white !important;
padding: 16px 20px !important;
border-radius: 8px !important;
font-size: 16px !important;
outline: none;
width: 100%;
box-sizing: border-box;
transition: border-color 0.3s;
}
#page-container .wpss-input:focus { border-color: #a855f7 !important; }

/* De Knop (Paars) */
#page-container .wpss-button {
background: #a855f7 !important; /* Fel Paars */
color: white !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
padding: 16px 32px !important;
border-radius: 8px !important;
transition: all 0.2s !important;
border: none; cursor: pointer;
}
#page-container .wpss-button:hover {
background: #9333ea !important;
transform: translateY(-2px);
box-shadow: 0 10px 20px -5px rgba(168, 85, 247, 0.4);
}

/* Resultaten Regels – HIER ZIT DE FIX VOOR LEESBAARHEID */
#page-container .wpss-result-item {
border-bottom: 1px solid rgba(255,255,255,0.05) !important;
padding: 16px 0 !important;
color: #cbd5e1 !important; /* FORCEER LICHTGRIJS */
font-size: 15px !important;
font-weight: 500 !important;
display: flex; justify-content: space-between; align-items: center;
}
#page-container .wpss-result-item:last-child { border-bottom: none !important; }

/* BADGES (Outline Style) */
#page-container .wpss-badge {
padding: 6px 12px !important;
border-radius: 6px !important;
font-size: 12px !important;
text-transform: uppercase !important;
font-weight: 800 !important;
letter-spacing: 0.5px;
background-color: transparent !important;
border-width: 1px !important;
border-style: solid !important;
}

/* Kleuren Badges */
#page-container .wpss-good {
color: #10b981 !important; border-color: #10b981 !important;
background-color: rgba(16, 185, 129, 0.1) !important;
}
#page-container .wpss-warn {
color: #f59e0b !important; border-color: #f59e0b !important;
background-color: rgba(245, 158, 11, 0.1) !important;
}
#page-container .wpss-bad {
color: #ef4444 !important; border-color: #ef4444 !important;
background-color: rgba(239, 68, 68, 0.1) !important;
}

/* Score Balk & Tekst */
#page-container .wpss-score {
color: white !important; /* FORCEER WIT */
margin-top: 30px !important;
font-weight: 800 !important;
font-size: 24px !important;
text-align: center;
}

#page-container .wpss-score-bar {
background: #020617 !important;
height: 12px !important;
border-radius: 50px !important;
border: 1px solid rgba(255,255,255,0.1) !important;
margin-top: 10px;
overflow: hidden;
}

/* — 4. UITLEG SECTIE (Advies) — */
.ri-advice-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px;
margin-top: 60px;
}

.ri-advice-card {
background: #162033; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 24px;
}
.ri-advice-icon { color: #c084fc; margin-bottom: 12px; }
.ri-advice-title { color: white; font-weight: bold; margin: 0 0 8px 0; font-size: 16px; }
.ri-advice-text { color: #94a3b8; font-size: 13px; line-height: 1.6; margin: 0; }

.ri-cta-box {
text-align: center; margin-top: 60px; padding: 40px;
background: rgba(168, 85, 247, 0.05); border: 1px dashed #a855f7; border-radius: 16px;
}