/* ============================================
   Kandidattest – Frontend Styles v1.1.0
   ============================================ */

.kt-container { max-width: 720px; margin: 0 auto; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #2c3e50; line-height: 1.6; }
.kt-container * { box-sizing: border-box; }
.kt-screen { display: none; }
.kt-screen.kt-active { display: block; }

/* Buttons */
.kt-btn { display: inline-block; padding: 12px 28px; border: none; border-radius: 8px; font-size: 1em; font-weight: 600; cursor: pointer; transition: all 0.2s ease; text-decoration: none; }
.kt-btn-primary { background: var(--kt-primary, #2c3e50); color: #fff; }
.kt-btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
.kt-btn-secondary { background: #ecf0f1; color: #2c3e50; }
.kt-btn-secondary:hover { background: #dce1e3; }
.kt-btn-skip { background: transparent; color: #95a5a6; border: 1px solid #bdc3c7; padding: 8px 20px; font-size: 0.9em; }
.kt-btn-skip:hover { background: #f9f9f9; }

/* Intro */
.kt-intro-content { text-align: center; padding: 40px 0; }
.kt-intro-content h2 { font-size: 1.8em; margin-bottom: 12px; }
.kt-intro-content p { font-size: 1.1em; color: #555; max-width: 500px; margin: 0 auto 24px; }
.kt-intro-stats { display: flex; justify-content: center; gap: 32px; margin: 32px 0; }
.kt-intro-stat { text-align: center; }
.kt-intro-stat-num { display: block; font-size: 2em; font-weight: 700; color: var(--kt-primary, #2c3e50); }
.kt-intro-stat-label { font-size: 0.85em; color: #7f8c8d; }
.kt-gdpr { font-size: 0.8em !important; color: #95a5a6 !important; max-width: 500px; margin: 20px auto !important; padding: 12px; background: #f8f9fa; border-radius: 8px; }

/* Progress */
.kt-progress-container { margin-bottom: 24px; }
.kt-progress-bar { width: 100%; height: 8px; background: #ecf0f1; border-radius: 4px; overflow: hidden; }
.kt-progress-fill { height: 100%; background: var(--kt-accent, #e74c3c); border-radius: 4px; transition: width 0.4s ease; width: 0%; }
.kt-progress-text { text-align: center; font-size: 0.85em; color: #7f8c8d; margin-top: 6px; }

/* Category label */
.kt-category-label { display: inline-block; background: var(--kt-primary, #2c3e50); color: #fff; padding: 4px 14px; border-radius: 20px; font-size: 0.8em; font-weight: 600; margin-bottom: 16px; letter-spacing: 0.5px; }

/* Question card */
.kt-question-card { background: #fff; border: 1px solid #e8ecef; border-radius: 16px; padding: 32px; box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
.kt-question-text { font-size: 1.3em; font-weight: 600; margin: 0 0 8px 0; line-height: 1.4; }
.kt-question-desc { color: #7f8c8d; font-size: 0.9em; margin: 0 0 24px 0; }
.kt-question-desc:empty { display: none; }

/* Answer buttons */
.kt-answer-options { display: flex; flex-direction: column; gap: 10px; }
.kt-answer-btn { width: 100%; padding: 14px 20px; border: 2px solid #e8ecef; border-radius: 10px; background: #fff; font-size: 1em; font-weight: 500; cursor: pointer; transition: all 0.2s ease; text-align: left; color: #2c3e50; }
.kt-answer-btn:hover { border-color: var(--kt-primary, #2c3e50); background: #f8f9fa; transform: translateX(4px); }
.kt-answer-btn.kt-selected { border-color: var(--kt-primary, #2c3e50); background: var(--kt-primary, #2c3e50); color: #fff; }
.kt-answer-btn[data-value="5"]::before { content: "👍 "; }
.kt-answer-btn[data-value="4"]::before { content: "🤔 "; }
.kt-answer-btn[data-value="3"]::before { content: "😐 "; }
.kt-answer-btn[data-value="2"]::before { content: "🤷 "; }
.kt-answer-btn[data-value="1"]::before { content: "👎 "; }

/* Importance */
.kt-importance-toggle { margin-top: 16px; padding-top: 12px; border-top: 1px solid #f0f0f0; }
.kt-importance-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.9em; color: #666; }
.kt-importance-label input { transform: scale(1.2); }
.kt-importance-label.kt-important-active { color: var(--kt-accent, #e74c3c); font-weight: 600; }

/* Nav */
.kt-nav-buttons { display: flex; justify-content: space-between; margin-top: 20px; }

/* Loading */
.kt-screen-loading { text-align: center; padding: 80px 0; }
.kt-spinner { width: 48px; height: 48px; border: 4px solid #ecf0f1; border-top-color: var(--kt-accent, #e74c3c); border-radius: 50%; animation: kt-spin 0.8s linear infinite; margin: 0 auto 20px; }
@keyframes kt-spin { to { transform: rotate(360deg); } }

/* Results */
.kt-screen-results h2 { text-align: center; font-size: 1.6em; margin-bottom: 24px; }
.kt-top-match { background: linear-gradient(135deg, var(--kt-primary, #2c3e50), #3a5068); color: #fff; border-radius: 16px; padding: 32px; text-align: center; margin-bottom: 32px; box-shadow: 0 8px 30px rgba(44,62,80,0.2); }
.kt-top-match-label { font-size: 0.85em; text-transform: uppercase; letter-spacing: 2px; opacity: 0.8; margin-bottom: 12px; }
.kt-top-match-photo { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 4px solid rgba(255,255,255,0.3); margin: 12px auto; display: block; }
.kt-top-match-name { font-size: 1.5em; font-weight: 700; margin: 8px 0 4px; }
.kt-top-match-party { font-size: 0.95em; opacity: 0.85; }
.kt-top-match-pct { font-size: 2.5em; font-weight: 800; margin: 16px 0 4px; }
.kt-top-match-pct-label { font-size: 0.85em; opacity: 0.7; }

/* Ranking */
.kt-full-ranking { margin: 24px 0; }
.kt-full-ranking h3 { font-size: 1.1em; margin-bottom: 16px; color: #555; }
.kt-rank-item { display: flex; align-items: center; padding: 12px 16px; border: 1px solid #e8ecef; border-radius: 10px; margin-bottom: 8px; background: #fff; transition: transform 0.2s; cursor: pointer; flex-wrap: wrap; }
.kt-rank-item:hover { transform: translateX(4px); }
.kt-rank-item.kt-rank-top { border-color: var(--kt-accent, #e74c3c); border-width: 2px; }
.kt-rank-position { font-size: 1.1em; font-weight: 700; color: #95a5a6; min-width: 36px; text-align: center; }
.kt-rank-item.kt-rank-top .kt-rank-position { color: var(--kt-accent, #e74c3c); }
.kt-rank-photo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; margin: 0 12px; }
.kt-rank-photo-placeholder { width: 40px; height: 40px; border-radius: 50%; background: #ecf0f1; margin: 0 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2em; }
.kt-rank-details { flex: 1; min-width: 0; }
.kt-rank-name { font-weight: 600; font-size: 0.95em; }
.kt-rank-party-label { font-size: 0.8em; color: #7f8c8d; }
.kt-rank-match { text-align: right; min-width: 60px; }
.kt-rank-match-pct { font-size: 1.2em; font-weight: 700; color: var(--kt-primary, #2c3e50); }
.kt-rank-match-bar { width: 80px; height: 6px; background: #ecf0f1; border-radius: 3px; overflow: hidden; margin-top: 4px; }
.kt-rank-match-fill { height: 100%; border-radius: 3px; transition: width 0.6s ease; }

/* Expanded detail */
.kt-rank-expanded { display: none; width: 100%; padding: 16px 16px 8px 64px; font-size: 0.9em; color: #555; border-top: 1px solid #f0f0f0; margin-top: 12px; }
.kt-rank-expanded.kt-show { display: block; }
.kt-rank-bio { margin-bottom: 8px; }
.kt-rank-compare-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.kt-rank-compare-table th, .kt-rank-compare-table td { padding: 6px 8px; border-bottom: 1px solid #f0f0f0; text-align: left; font-size: 0.9em; }
.kt-rank-compare-table th { color: #95a5a6; font-weight: 600; }
.kt-match-agree { color: #27ae60; }
.kt-match-neutral { color: #f39c12; }
.kt-match-disagree { color: #e74c3c; }

/* Category breakdown */
.kt-category-breakdown { margin: 32px 0; background: #f8f9fa; border-radius: 12px; padding: 24px; }
.kt-category-breakdown h3 { font-size: 1.1em; margin: 0 0 16px 0; }
.kt-cat-bar-item { margin-bottom: 12px; }
.kt-cat-bar-label { display: flex; justify-content: space-between; font-size: 0.9em; margin-bottom: 4px; }
.kt-cat-bar { height: 8px; background: #dfe6e9; border-radius: 4px; overflow: hidden; }
.kt-cat-bar-fill { height: 100%; border-radius: 4px; transition: width 0.8s ease; }

/* Bottom match */
.kt-bottom-match { background: #f8f9fa; border: 1px solid #e8ecef; border-radius: 12px; padding: 20px; margin: 24px 0; text-align: center; }
.kt-bottom-match-label { font-size: 0.85em; color: #95a5a6; margin-bottom: 8px; }
.kt-bottom-match-name { font-weight: 600; }
.kt-bottom-match-pct { font-size: 1.4em; font-weight: 700; color: #e74c3c; }

/* Share */
.kt-share { text-align: center; margin: 24px 0; padding: 24px; background: #f8f9fa; border-radius: 12px; }
.kt-share h3 { margin-bottom: 12px; }
.kt-share-buttons { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.kt-share-btn { padding: 10px 20px; border: none; border-radius: 8px; font-size: 0.9em; font-weight: 600; cursor: pointer; color: #fff; transition: opacity 0.2s; }
.kt-share-btn:hover { opacity: 0.85; }
.kt-share-facebook { background: #1877f2; }
.kt-share-twitter { background: #1da1f2; }
.kt-share-linkedin { background: #0a66c2; }
.kt-share-copy { background: #6c757d; }

/* Restart */
.kt-restart { text-align: center; margin: 32px 0; }

/* Public stats */
.kt-stats-public { max-width: 600px; margin: 0 auto; }
.kt-stats-total { font-size: 1.1em; text-align: center; margin-bottom: 24px; }
.kt-public-ranking { margin: 16px 0; }
.kt-public-rank-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid #f0f0f0; }
.kt-rank-num { font-weight: 700; color: #95a5a6; min-width: 30px; }
.kt-rank-info { flex: 1; }
.kt-rank-info strong { display: block; font-size: 0.95em; }
.kt-rank-party { font-size: 0.8em; color: #7f8c8d; }
.kt-rank-bar-container { width: 120px; display: flex; align-items: center; gap: 8px; }
.kt-rank-bar { height: 8px; background: var(--kt-accent, #e74c3c); border-radius: 4px; min-width: 4px; }
.kt-rank-pct { font-size: 0.85em; font-weight: 600; color: #555; }

/* Counter */
.kt-counter { text-align: center; padding: 16px; }
.kt-counter-num { font-size: 2em; font-weight: 700; color: var(--kt-primary, #2c3e50); }
.kt-counter-label { display: block; font-size: 0.9em; color: #7f8c8d; }

/* Notice */
.kt-notice { background: #fff3cd; border: 1px solid #ffc107; border-radius: 8px; padding: 16px 20px; text-align: center; color: #856404; }

/* ── NEW: Constituency filter ── */
.kt-constituency-filter { margin: 20px auto; max-width: 320px; text-align: center; }
.kt-constituency-filter label { display: block; font-size: 0.9em; color: #555; margin-bottom: 6px; }
.kt-constituency-filter select { width: 100%; padding: 10px 14px; border: 2px solid #e8ecef; border-radius: 8px; font-size: 1em; color: #2c3e50; background: #fff; cursor: pointer; }
.kt-constituency-filter select:focus { outline: none; border-color: var(--kt-primary, #2c3e50); }

/* ── NEW: Party results ── */
.kt-party-results { margin: 24px 0; background: #f0f4f8; border-radius: 12px; padding: 24px; }
.kt-party-results h3 { font-size: 1.1em; margin: 0 0 16px 0; }

/* ── NEW: Repeat notice ── */
.kt-repeat-notice { margin-top: 16px; padding: 12px 16px; background: #fef9e7; border: 1px solid #f1c40f; border-radius: 8px; font-size: 0.9em; }
.kt-repeat-notice p { margin: 0; }
.kt-repeat-notice a { color: var(--kt-primary, #2c3e50); font-weight: 600; }

/* ── NEW: Compare ── */
.kt-compare h2 { text-align: center; margin-bottom: 20px; }
.kt-compare-form { text-align: center; margin-bottom: 24px; }
.kt-compare-selects { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.kt-compare-select { padding: 10px 14px; border: 2px solid #e8ecef; border-radius: 8px; font-size: 0.95em; min-width: 220px; color: #2c3e50; }
.kt-compare-vs { font-weight: 700; font-size: 1.1em; color: var(--kt-accent, #e74c3c); }
.kt-compare-header { display: flex; justify-content: space-around; align-items: center; background: linear-gradient(135deg, #2c3e50, #3a5068); color: #fff; border-radius: 16px; padding: 24px; margin-bottom: 24px; text-align: center; }
.kt-compare-cand { text-align: center; }
.kt-compare-cand strong { display: block; font-size: 1.1em; margin-top: 8px; }
.kt-compare-cand span { opacity: 0.8; font-size: 0.9em; }
.kt-compare-photo { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255,255,255,0.3); }
.kt-compare-score { text-align: center; }
.kt-compare-pct { font-size: 2.2em; font-weight: 800; }
.kt-compare-pct-label { font-size: 0.8em; opacity: 0.7; }
.kt-compare-table { width: 100%; border-collapse: collapse; }
.kt-compare-table th, .kt-compare-table td { padding: 10px 12px; border-bottom: 1px solid #e8ecef; text-align: left; font-size: 0.9em; }
.kt-compare-table th { background: #f8f9fa; font-weight: 600; color: #555; position: sticky; top: 0; }
.kt-compare-table td:last-child { text-align: center; width: 40px; }
.kt-compare-cat-row td { background: #f0f4f8 !important; border-top: 2px solid #c0cadf; font-size: 0.85em; }

/* ── Responsive ── */
@media (max-width: 600px) {
    .kt-container { padding: 8px 16px; }
    .kt-container, .kt-container * { text-align: center; }
    .kt-intro-content { padding: 20px 0; }
    .kt-intro-content h2 { font-size: 1.5em; }
    .kt-intro-content p { font-size: 1em; }
    .kt-intro-stats { gap: 20px; }
    .kt-intro-stat-num { font-size: 1.6em; }
    .kt-question-card { padding: 20px; }
    .kt-question-text { font-size: 1.1em; text-align: left; }
    .kt-question-desc { text-align: left; }
    .kt-answer-btn { text-align: left; }
    .kt-importance-label { justify-content: center; }
    .kt-nav-buttons { justify-content: center; gap: 12px; }
    .kt-top-match { padding: 24px 16px; }
    .kt-top-match-pct { font-size: 2em; }
    .kt-rank-item { text-align: left; }
    .kt-rank-match-bar { width: 50px; }
    .kt-share-buttons { flex-direction: column; align-items: center; }
    .kt-share-btn { width: 100%; max-width: 280px; }
    .kt-rank-expanded { padding-left: 16px; text-align: left; }
    .kt-compare-selects { flex-direction: column; }
    .kt-compare-header { flex-direction: column; gap: 12px; }
    .kt-constituency-filter { max-width: 100%; }
    .kt-constituency-filter select { text-align: center; text-align-last: center; }
    .kt-repeat-notice { text-align: center; }
    .kt-gdpr { font-size: 0.75em !important; }
    .kt-full-ranking h3, .kt-party-results h3, .kt-category-breakdown h3 { text-align: left; }
}