/* Keuzehulp v8.0 Frontend - Beton Cire */

:root {
    --keuzehulp-brand-color: #135350;
    --keuzehulp-brand-light: #1a6b63;
    --keuzehulp-brand-dark: #0f423d;
    --keuzehulp-brand-gradient: linear-gradient(135deg, #135350, #0f423d);
    --keuzehulp-brand-shadow: rgba(19, 83, 80, 0.3);
}

.keuzehulp-v8-container {
    max-width: 1000px;
    margin: 0 auto;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    overflow: hidden;
    padding: 30px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.keuzehulp-v8-progress { margin-bottom: 30px; }
.progress-bar { width: 100%; height: 6px; background: #eee; border-radius: 3px; overflow: hidden; margin-bottom: 15px; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--keuzehulp-brand-color), var(--keuzehulp-brand-dark)); transition: width 0.5s ease; width: 0%; box-shadow: 0 0 10px var(--keuzehulp-brand-shadow); }
.progress-text { text-align: center; font-size: 0.9em; color: #666; font-weight: 500; }

.keuzehulp-v8-header { text-align: center; margin-bottom: 30px; }
.keuzehulp-v8-header h2 { font-size: 1.8em; color: #333; margin-bottom: 8px; font-weight: bold; }
.keuzehulp-v8-header p { font-size: 1em; color: #666; max-width: 600px; margin: 0 auto; line-height: 1.5; }

.step-container { display: none; }
.step-container.active { display: block; animation: keuzehulpV8FadeIn 0.4s ease-in-out; }
@keyframes keuzehulpV8FadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

.keuzehulp-v8-intro-text { font-size: 1em; color: #555; line-height: 1.6; max-width: 800px; margin: 0 auto 25px; text-align: left; }

.choices-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 15px; margin: 25px 0; }
.choices-grid-2 { grid-template-columns: repeat(2, 1fr); }
.choices-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 600px) { .choices-grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .choices-grid-3 { grid-template-columns: 1fr; } }

.choice-item-link { display: flex; flex-direction: column; align-items: center; min-height: 120px; }
.choice-result-button { margin-top: 12px; padding: 10px 20px; min-height: 44px; border-radius: 25px; border: 2px solid #fff; background: rgba(255,255,255,0.2); color: #fff; font-weight: 600; cursor: pointer; transition: all 0.3s ease; font-size: 0.95em; }
.choice-item-link .choice-result-button { background: var(--keuzehulp-brand-color); border-color: var(--keuzehulp-brand-color); color: #fff; }
.choice-item-link:hover .choice-result-button { background: var(--keuzehulp-brand-dark); border-color: var(--keuzehulp-brand-dark); }

.choice-item { background: #f8f9fa; border: 2px solid #e9ecef; border-radius: 12px; padding: 18px; text-align: center; cursor: pointer; transition: all 0.3s ease; position: relative; min-height: 100px; display: flex; flex-direction: column; justify-content: center; }
.choice-item:hover { border-color: var(--keuzehulp-brand-color); background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.1); transform: translateY(-1px); }
.choice-item.selected { border-color: var(--keuzehulp-brand-color); background: #fff; box-shadow: 0 4px 12px var(--keuzehulp-brand-shadow); transform: translateY(-1px); border-width: 3px; }

.choice-checkmark { position: absolute; top: 12px; right: 12px; background: var(--keuzehulp-brand-color); color: #fff; width: 24px; height: 24px; border-radius: 50%; display: none; align-items: center; justify-content: center; font-weight: bold; font-size: 1em; }
.choice-item.selected .choice-checkmark { display: flex; }

.choice-icon { font-size: 2em; margin-bottom: 8px; color: var(--keuzehulp-brand-color); min-height: 1.2em; display: block; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.choice-icon .choice-icon-img { max-width: 2em; max-height: 2em; width: auto; height: auto; vertical-align: middle; object-fit: contain; }
.choice-title { font-size: 1em; font-weight: bold; color: #333; margin-bottom: 6px; line-height: 1.3; }
.choice-description { color: #666; line-height: 1.4; font-size: 0.9em; }

.keuzehulp-v8-navigation { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; padding-top: 25px; border-top: 1px solid #eee; }
.nav-button { background: var(--keuzehulp-brand-color); color: #fff; border: none; padding: 12px 24px; border-radius: 25px; font-size: 1em; font-weight: 600; cursor: pointer; transition: all 0.3s ease; font-family: inherit; min-height: 44px; }
.nav-button:hover:not(:disabled) { background: var(--keuzehulp-brand-dark); transform: translateY(-1px); }
.nav-button:disabled { background: #ccc; cursor: not-allowed; transform: none; }
.nav-indicator { font-size: 0.9em; color: #666; font-weight: 500; }

.result-content { background: var(--keuzehulp-brand-gradient); color: #fff; padding: 30px; border-radius: 15px; text-align: center; max-width: 500px; margin: 0 auto; box-shadow: 0 8px 32px var(--keuzehulp-brand-shadow); }
.result-content h2, .result-content h3, .result-content p { color: #fff; }
.result-button { background: #fff; color: var(--keuzehulp-brand-color); border: none; padding: 12px 24px; min-height: 44px; border-radius: 25px; font-size: 1em; font-weight: 600; cursor: pointer; margin-top: 15px; transition: all 0.3s ease; font-family: inherit; }
.result-button:hover { background: #f8f9fa; color: var(--keuzehulp-brand-dark); transform: translateY(-1px); }

.debug-panel { background: #f8f9fa; border: 2px dashed var(--keuzehulp-brand-color); border-radius: 8px; padding: 15px; margin-top: 20px; font-size: 0.85em; }
.debug-panel h4 { margin: 0 0 10px 0; color: var(--keuzehulp-brand-color); }

@media (max-width: 600px) {
    .keuzehulp-v8-container { padding: 20px 15px; }
    .choices-grid { grid-template-columns: 1fr; }
    .keuzehulp-v8-navigation { flex-wrap: wrap; gap: 12px; }
    .keuzehulp-v8-header h2 { font-size: 1.4em; }
}
@media (prefers-reduced-motion: reduce) {
    .step-container.active, .choice-item, .nav-button, .result-button { animation: none; transition: none; }
}