/* — 1. ACHTERGROND & BASIS — */
.ri-cookie-wrapper {
font-family: sans-serif;
color: #cbd5e1;
box-sizing: border-box;

/* De Tech Grid Achtergrond */
background-color: #0B1120;
background-image:
linear-gradient(180deg, #0B1120 0%, rgba(11, 17, 32, 0) 20%, rgba(11, 17, 32, 0) 80%, #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%, 24px 24px, 24px 24px;
background-repeat: no-repeat, repeat, repeat;

padding: 80px 20px;
min-height: 100vh;
}

.ri-container {
max-width: 900px;
margin: 0 auto;
}

.ri-cookie-wrapper * { box-sizing: border-box; }

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

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

.ri-title {
color: #ffffff; font-weight: 800; line-height: 1.1; margin: 0 0 24px 0;
font-size: clamp(32px, 5vw, 56px);
}

.ri-gradient-text {
background: linear-gradient(90deg, #60a5fa 0%, #ffffff 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
display: inline-block;
}

/* — 3. DOCUMENT STIJL — */
.ri-legal-doc {
background-color: #162033; /* Donkerblauw papier */
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 40px;
position: relative;
box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.3);
}

/* Bovenrand accent */
.ri-legal-doc::before {
content: ”; position: absolute; top: 0; left: 0; right: 0; height: 4px;
background: linear-gradient(90deg, #60a5fa, #10b981);
}

/* — 4. ARTIKELEN — */
.ri-article {
margin-bottom: 40px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
padding-bottom: 40px;
}
.ri-article:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.ri-art-title {
color: #ffffff; font-size: 20px; font-weight: 800; margin-bottom: 16px;
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}

.ri-art-badge {
background: rgba(255, 255, 255, 0.1);
color: #94a3b8; font-size: 12px; font-family: monospace;
padding: 4px 8px; border-radius: 4px; white-space: nowrap;
}

.ri-text-block {
line-height: 1.8; font-size: 15px; color: #cbd5e1;
}

.ri-text-block p { margin-bottom: 16px; }
.ri-text-block strong { color: white; }
.ri-text-block a { color: #60a5fa; text-decoration: underline; }
.ri-text-block ul { padding-left: 20px; margin-bottom: 16px; }
.ri-text-block li { margin-bottom: 8px; }

/* — 5. TABEL STIJL (Specifiek voor Cookies) — */
.ri-cookie-table {
width: 100%; border-collapse: collapse; margin-top: 20px; margin-bottom: 20px;
font-size: 14px; text-align: left;
}
.ri-cookie-table th {
background: rgba(255, 255, 255, 0.05);
color: #ffffff; font-weight: bold; text-transform: uppercase; font-size: 12px;
padding: 12px 16px; border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}
.ri-cookie-table td {
padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.05);
color: #cbd5e1; vertical-align: top;
}
.ri-cookie-table tr:hover td { background: rgba(255, 255, 255, 0.02); }

/* — 6. ALERT BOX (Voor instructies) — */
.ri-alert-box {
background: rgba(245, 158, 11, 0.1); /* Oranje */
border: 1px dashed #f59e0b;
color: #fcd34d;
padding: 16px; border-radius: 8px;
font-size: 13px; font-family: monospace;
margin: 20px 0;
}

@media (max-width: 768px) {
.ri-legal-doc { padding: 24px; }
.ri-cookie-table { display: block; overflow-x: auto; }
}