/* Loopbaantest Pro — Frontend Styles | ambtenaar.online huisstijl */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap');

/* ─── Tokens ─── */
.ltp-test {
    --ltp-accent:       #E85C1A;
    --ltp-accent-light: #FEF0E8;
    --ltp-accent-dark:  #C24A12;
    --ltp-navy:         #0B1A36;
    --ltp-bg:           #FAF7F0;
    --ltp-surface:      #F0E9DC;
    --ltp-surface-2:    #E5DDD0;
    --ltp-text:         #0B1A36;
    --ltp-text-mid:     #4B5A72;
    --ltp-text-light:   #9AA5B4;
    --ltp-border:       #E0D8CB;
    --ltp-white:        #ffffff;
    --ltp-radius:       12px;
    --ltp-radius-sm:    8px;
    --ltp-sans:         'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --ltp-serif:        'Playfair Display', Georgia, serif;

    font-family: var(--ltp-sans);
    color: var(--ltp-text);
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
}

.ltp-test *, .ltp-test *::before, .ltp-test *::after { box-sizing: inherit; }

/* ─── Screen ─── */
.ltp-screen {
    background: var(--ltp-bg);
    border: 1px solid var(--ltp-border);
    border-radius: var(--ltp-radius);
    padding: 44px 48px 48px;
    max-width: 660px;
    margin: 0 auto;
}

@media (max-width: 600px) {
    .ltp-screen { padding: 28px 22px 32px; }
}

/* ─── Animation ─── */
@keyframes ltpUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ltp-anim { animation: ltpUp 0.35s ease forwards; }

/* ─── Label / eyebrow ─── */
.ltp-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ltp-accent);
    margin-bottom: 12px;
}

/* ─── Titles (serif) ─── */
.ltp-title {
    font-family: var(--ltp-serif);
    font-size: clamp(26px, 4.5vw, 38px);
    font-weight: 800;
    line-height: 1.12;
    color: var(--ltp-navy);
    margin: 0 0 14px;
}

.ltp-subtitle {
    font-size: 16px;
    color: var(--ltp-text-mid);
    line-height: 1.75;
    margin: 0 0 28px;
}

/* ─── Stat strip ─── */
.ltp-stats {
    display: flex;
    background: var(--ltp-white);
    border: 1px solid var(--ltp-border);
    border-radius: var(--ltp-radius-sm);
    overflow: hidden;
    margin-bottom: 28px;
}

.ltp-stat { flex: 1; text-align: center; padding: 16px 10px; }
.ltp-stat + .ltp-stat { border-left: 1px solid var(--ltp-border); }
.ltp-stat-num {
    display: block;
    font-family: var(--ltp-serif);
    font-size: 22px;
    font-weight: 700;
    color: var(--ltp-navy);
    line-height: 1.2;
}
.ltp-stat-label {
    display: block;
    font-size: 12px;
    color: var(--ltp-text-light);
    margin-top: 3px;
}

/* ─── Start button ─── */
.ltp-btn-start {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--ltp-accent);
    color: #fff;
    font-family: var(--ltp-sans);
    font-size: 15px;
    font-weight: 600;
    padding: 13px 26px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.18s, transform 0.14s;
}
.ltp-btn-start:hover  { background: var(--ltp-accent-dark); transform: translateY(-1px); }
.ltp-btn-start:active { transform: translateY(0); }

/* ─── Progress ─── */
.ltp-progress-wrap { margin-bottom: 32px; }
.ltp-progress-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 600;
    color: var(--ltp-text-mid);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ltp-progress-meta span:last-child { color: var(--ltp-text-light); font-weight: 400; text-transform: none; letter-spacing: 0; }
.ltp-progress-bar { height: 3px; background: var(--ltp-border); border-radius: 3px; overflow: hidden; }
.ltp-progress-fill { height: 100%; background: var(--ltp-accent); border-radius: 3px; transition: width 0.4s cubic-bezier(.4,0,.2,1); }

/* ─── Question ─── */
.ltp-q-num {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ltp-accent);
    margin-bottom: 10px;
}
.ltp-q-text {
    font-family: var(--ltp-serif);
    font-size: clamp(19px, 3vw, 24px);
    font-weight: 700;
    line-height: 1.3;
    color: var(--ltp-navy);
    margin-bottom: 26px;
}

/* ─── Options ─── */
.ltp-options { display: flex; flex-direction: column; gap: 10px; }

.ltp-option {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--ltp-white);
    border: 1.5px solid var(--ltp-border);
    border-radius: var(--ltp-radius-sm);
    padding: 14px 18px;
    cursor: pointer;
    font-family: var(--ltp-sans);
    text-align: left;
    width: 100%;
    transition: border-color 0.16s, background 0.16s, transform 0.13s;
}
.ltp-option:hover    { border-color: var(--ltp-accent); background: var(--ltp-accent-light); transform: translateX(3px); }
.ltp-option.is-selected { border-color: var(--ltp-accent); background: var(--ltp-accent-light); }

.ltp-option-letter {
    flex-shrink: 0;
    width: 26px; height: 26px;
    border-radius: 4px;
    background: var(--ltp-surface);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
    color: var(--ltp-text-mid);
    transition: background 0.16s, color 0.16s;
    margin-top: 1px;
}
.ltp-option:hover .ltp-option-letter,
.ltp-option.is-selected .ltp-option-letter { background: var(--ltp-accent); color: #fff; }

.ltp-option-text { font-size: 15px; color: var(--ltp-text); line-height: 1.5; padding-top: 3px; }

/* ─── Result ─── */
.ltp-result-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--ltp-accent-light);
    color: var(--ltp-accent-dark);
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    padding: 5px 12px; border-radius: 4px;
    margin-bottom: 16px;
}
.ltp-result-dot { width: 6px; height: 6px; background: var(--ltp-accent); border-radius: 50%; }

.ltp-result-sector {
    font-family: var(--ltp-serif);
    font-size: clamp(26px, 5vw, 40px);
    font-weight: 800;
    line-height: 1.1;
    color: var(--ltp-navy);
    margin: 0 0 14px;
}
.ltp-result-desc {
    font-size: 16px;
    color: var(--ltp-text-mid);
    line-height: 1.8;
    margin: 0 0 32px;
    max-width: 520px;
}

/* ─── Result cards ─── */
.ltp-result-card {
    background: var(--ltp-white);
    border: 1px solid var(--ltp-border);
    border-radius: var(--ltp-radius-sm);
    padding: 22px 24px;
    margin-bottom: 14px;
}
.ltp-result-card-label {
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--ltp-text-light);
    margin-bottom: 14px;
}

/* Tags */
.ltp-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.ltp-tag {
    background: var(--ltp-surface);
    color: var(--ltp-text);
    font-family: var(--ltp-sans);
    font-size: 13px; font-weight: 500;
    padding: 5px 13px;
    border-radius: 4px;
}

/* Chart */
.ltp-chart { display: flex; flex-direction: column; gap: 13px; }
.ltp-chart-row { display: flex; align-items: center; gap: 10px; }
.ltp-chart-name { font-size: 13px; color: var(--ltp-text); width: 170px; flex-shrink: 0; }
.ltp-chart-name.is-top { font-weight: 700; color: var(--ltp-navy); }
.ltp-chart-bar-wrap { flex: 1; height: 5px; background: var(--ltp-surface); border-radius: 5px; overflow: hidden; }
.ltp-chart-bar { height: 100%; border-radius: 5px; background: var(--ltp-accent); width: 0%; transition: width 0.9s cubic-bezier(.4,0,.2,1); }
.ltp-chart-bar.is-secondary { background: var(--ltp-surface-2); }
.ltp-chart-val { font-size: 12px; color: var(--ltp-text-light); width: 18px; text-align: right; }

/* Actions */
.ltp-result-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

.ltp-btn-cta {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--ltp-accent); color: #fff;
    font-family: var(--ltp-sans); font-size: 14px; font-weight: 600;
    padding: 11px 22px; border: none; border-radius: 6px;
    cursor: pointer; text-decoration: none;
    transition: background 0.16s;
}
.ltp-btn-cta:hover { background: var(--ltp-accent-dark); }

.ltp-btn-restart {
    background: none;
    border: 1.5px solid var(--ltp-border);
    color: var(--ltp-text-mid);
    font-family: var(--ltp-sans); font-size: 14px; font-weight: 500;
    padding: 10px 20px; border-radius: 6px; cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.ltp-btn-restart:hover { border-color: var(--ltp-accent); color: var(--ltp-accent); }