/* VETInnovate Self-Assessment v4.0 */

/* ---- Layout ---- */
.vi-assess-layout { display: grid; grid-template-columns: 220px 1fr; gap: 32px; max-width: 960px; margin: 0 auto; }

/* ---- Sidebar ---- */
.vi-assess-sidebar { position: sticky; top: 100px; align-self: start; }
.vi-assess-sidebar-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding: 0 4px; }
.vi-assess-sidebar-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--vi-txt2, #555); }
.vi-assess-sidebar-overall { font-size: 11px; font-weight: 600; color: var(--vi-txt2, #555); }

.vi-assess-sidebar-nav { display: flex; flex-direction: column; gap: 2px; }

.vi-assess-sidebar-item {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px;
    border: none; background: none; cursor: pointer; text-align: left; width: 100%;
    font-family: inherit; transition: background 0.15s, color 0.15s;
    color: var(--vi-txt2, #555);
}
.vi-assess-sidebar-item:hover { background: var(--vi-bg, #f5f7fa); }
.vi-assess-sidebar-item.vi-current { background: #eef3fb; color: var(--vi, #1E3A5F); }
.vi-assess-sidebar-item.vi-status-complete { color: #2d8a4e; }
.vi-assess-sidebar-item.vi-status-complete.vi-current { color: var(--vi, #1E3A5F); }

.vi-assess-sidebar-icon { width: 20px; height: 20px; flex-shrink: 0; opacity: 0.6; }
.vi-assess-sidebar-item.vi-current .vi-assess-sidebar-icon,
.vi-assess-sidebar-item.vi-status-complete .vi-assess-sidebar-icon { opacity: 1; }
.vi-assess-sidebar-icon svg { width: 100%; height: 100%; }

.vi-assess-sidebar-info { flex: 1; min-width: 0; }
.vi-assess-sidebar-label { display: block; font-size: 13px; font-weight: 500; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vi-assess-sidebar-item.vi-current .vi-assess-sidebar-label { font-weight: 600; }

.vi-assess-sidebar-progress { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.vi-assess-sidebar-bar { flex: 1; height: 3px; background: var(--vi-bdr, #e0e0e0); border-radius: 2px; overflow: hidden; }
.vi-assess-sidebar-fill { height: 100%; background: var(--vi, #1E3A5F); border-radius: 2px; transition: width 0.3s ease-out; }
.vi-assess-sidebar-item.vi-status-complete .vi-assess-sidebar-fill { background: #2d8a4e; }
.vi-assess-sidebar-count { font-size: 10px; color: var(--vi-txt2, #555); font-weight: 600; white-space: nowrap; }
.vi-assess-sidebar-check { color: #2d8a4e; font-size: 14px; font-weight: 700; flex-shrink: 0; margin-left: auto; }

.vi-assess-sidebar-finish { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--vi-bdr, #e0e0e0); }
.vi-assess-sidebar-remaining { margin-top: 12px; padding: 0 4px; font-size: 12px; color: var(--vi-txt2, #555); }

/* ---- Main ---- */
.vi-assess-main { min-width: 0; }

.vi-assess-progress { margin-bottom: 24px; }
.vi-assess-progress-bar { height: 4px; background: var(--vi-bdr, #e0e0e0); border-radius: 2px; overflow: hidden; }
.vi-assess-progress-fill { height: 100%; background: var(--vi, #1E3A5F); transition: width 0.3s ease-out; border-radius: 2px; }

.vi-assess-pillar-header { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid #eee; }
.vi-assess-pillar-icon { width: 40px; height: 40px; color: var(--vi, #1E3A5F); flex-shrink: 0; }
.vi-assess-pillar-icon svg { width: 100%; height: 100%; }
.vi-assess-pillar-meta { flex: 1; }
.vi-assess-pillar-name { font-size: 16px; font-weight: 700; color: var(--vi, #1E3A5F); line-height: 1.3; }
.vi-assess-question-counter { font-size: 13px; color: var(--vi-txt2, #555); margin-top: 2px; }

.vi-assess-question-text { font-size: 18px; line-height: 1.55; color: var(--vi-txt, #333); margin-bottom: 24px; font-weight: 500; }

/* ---- Options ---- */
.vi-assess-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; }
.vi-assess-option {
    display: flex; flex-direction: column; gap: 3px;
    padding: 14px 16px; border: 2px solid var(--vi-bdr, #e0e0e0); border-radius: 10px;
    background: #fff; cursor: pointer; text-align: left;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
    font-family: inherit;
    word-wrap: break-word; overflow-wrap: break-word; white-space: normal;
    height: auto; min-height: auto; max-width: 100%; box-sizing: border-box;
}
.vi-assess-option:hover { border-color: #ccc; background: #fafafa; }
.vi-assess-option:active { transform: scale(0.99); }
.vi-assess-option.vi-selected { border-color: var(--vi, #1E3A5F); background: #eef3fb; box-shadow: inset 4px 0 0 0 var(--vi, #1E3A5F); }
.vi-assess-option-level { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--vi, #1E3A5F); }
.vi-assess-option-text { font-size: 14px; color: var(--vi-txt2, #555); line-height: 1.5; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; }
.vi-assess-option-na { border-style: dashed; }
.vi-assess-option-na .vi-assess-option-text { color: #888; }
.vi-selected .vi-assess-option-level { font-weight: 800; }

/* ---- Navigation ---- */
.vi-assess-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.vi-assess-nav .vi-btn svg { vertical-align: middle; margin-right: 4px; }

/* ---- Buttons ---- */
.vi-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; border: none; transition: background 0.15s, opacity 0.15s, transform 0.1s; font-family: inherit; }
.vi-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.vi-btn:active:not(:disabled) { transform: scale(0.97); }
.vi-btn-primary { background: var(--vi, #1E3A5F); color: #fff; }
.vi-btn-primary:hover:not(:disabled) { background: var(--vi-lt, #2a5080); }
.vi-btn-secondary { background: #e8e8e8; color: var(--vi-txt, #333); }
.vi-btn-secondary:hover { background: #ddd; }
.vi-btn-outline { background: transparent; color: var(--vi, #1E3A5F); border: 1.5px solid var(--vi, #1E3A5F); }
.vi-btn-outline:hover { background: #f0f4ff; }
.vi-btn-full { width: 100%; }

/* ---- Focus visible ---- */
.vi-assess-option:focus-visible, .vi-btn:focus-visible, .vi-assess-sidebar-item:focus-visible {
    outline: 2px solid var(--vi-acc, #2196F3) !important; outline-offset: 2px !important;
}

/* ---- Loading ---- */
.vi-assess-loading { display: flex; justify-content: center; padding: 80px 0; }
.vi-spinner { width: 32px; height: 32px; border: 3px solid #e8e8e8; border-top-color: var(--vi, #1E3A5F); border-radius: 50%; animation: vi-spin 0.6s linear infinite; }
@keyframes vi-spin { to { transform: rotate(360deg); } }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .vi-spinner { animation: none; }
    .vi-assess-progress-fill, .vi-assess-sidebar-fill, .vi-assess-option,
    .vi-assess-sidebar-item, .vi-btn { transition-duration: 0.01ms !important; }
}

/* ---- Kill Elementor text-shadow and font-weight on buttons ---- */
button.vi-assess-option,
button.vi-assess-option .vi-assess-option-text,
button.vi-assess-option .vi-assess-option-level,
.vi-assess-nav .vi-btn,
.vi-assess-sidebar-item,
#vi-assess-app button {
    text-shadow: none !important;
}
button.vi-assess-option { background: #fff !important; color: var(--vi-txt, #333) !important; border: 2px solid var(--vi-bdr, #e0e0e0) !important; border-radius: 10px !important; padding: 14px 16px !important; font-size: 14px !important; line-height: 1.5 !important; text-transform: none !important; letter-spacing: normal !important; width: 100% !important; white-space: normal !important; word-wrap: break-word !important; overflow-wrap: break-word !important; height: auto !important; min-height: auto !important; }
button.vi-assess-option:hover { background: #fafafa !important; border-color: #ccc !important; }
button.vi-assess-option.vi-selected { background: #eef3fb !important; border-color: var(--vi, #1E3A5F) !important; box-shadow: inset 4px 0 0 0 var(--vi, #1E3A5F) !important; }
button.vi-assess-option .vi-assess-option-text { color: var(--vi-txt2, #555) !important; font-weight: 400 !important; white-space: normal !important; word-wrap: break-word !important; }
button.vi-assess-option .vi-assess-option-level { color: var(--vi, #1E3A5F) !important; font-size: 11px !important; }
button.vi-assess-option.vi-selected .vi-assess-option-level { font-weight: 800 !important; }
button.vi-assess-option-na { border-style: dashed !important; }

/* ---- Results ---- */
.vi-assess-results { max-width: 700px; margin: 0 auto; }
.vi-assess-results-header h1 { font-size: 24px; color: var(--vi, #1E3A5F); margin: 0 0 4px; }
.vi-assess-overall { text-align: center; padding: 32px 0; }
.vi-assess-score-num { font-size: 56px; font-weight: 700; color: var(--vi, #1E3A5F); }
.vi-assess-score-max { font-size: 20px; color: #888; }
.vi-assess-overall-label { display: block; font-size: 14px; color: #888; margin-top: 4px; }
.vi-assess-chart-wrap { max-width: 450px; margin: 0 auto 40px; }
.vi-assess-breakdown { margin-bottom: 40px; }
.vi-assess-breakdown h2 { font-size: 18px; margin: 0 0 16px; color: var(--vi-txt, #333); }
.vi-assess-pillar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.vi-assess-pillar-label { flex: 0 0 200px; font-size: 13px; color: var(--vi-txt2, #555); }
.vi-assess-bar-track { flex: 1; height: 8px; background: #e8e8e8; border-radius: 4px; overflow: hidden; }
.vi-assess-bar-fill { height: 100%; background: var(--vi, #1E3A5F); border-radius: 4px; transition: width 0.5s ease-out; }
.vi-assess-pillar-score { flex: 0 0 36px; text-align: right; font-size: 14px; font-weight: 600; color: var(--vi, #1E3A5F); }
.vi-assess-recommendations { margin-bottom: 40px; }
.vi-assess-recommendations h2 { font-size: 18px; margin: 0 0 12px; color: var(--vi-txt, #333); }
.vi-assess-no-rec { color: #2d8a4e; font-weight: 500; }
.vi-assess-rec-card { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #fff8f0; border: 1px solid #ffd9a8; border-radius: 8px; margin-bottom: 8px; }
.vi-assess-rec-score { font-weight: 700; color: #c47a00; min-width: 50px; }
.vi-assess-rec-name { flex: 1; font-size: 14px; color: var(--vi-txt, #333); }
.vi-assess-login-cta { margin-bottom: 32px; }
.vi-assess-login-cta-card { text-align: center; padding: 32px; background: var(--vi-bg, #f5f7fa); border-radius: 12px; }
.vi-assess-login-cta-card h3 { font-size: 18px; color: var(--vi, #1E3A5F); margin: 0 0 8px; }
.vi-assess-login-cta-card p { color: var(--vi-txt2, #555); margin: 0 0 20px; line-height: 1.5; }
.vi-assess-result-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---- History (from PHP) ---- */
.vi-assess-history h1 { font-size: 24px; color: var(--vi, #1E3A5F); margin: 0 0 20px; }
.vi-assess-history-row { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid #e8e8e8; border-radius: 8px; margin-bottom: 8px; }
.vi-assess-history-info { flex: 1; }
.vi-assess-history-date { display: block; font-size: 14px; font-weight: 500; color: var(--vi-txt, #333); }
.vi-assess-history-pillars { font-size: 13px; color: #888; }
.vi-assess-history-score { font-size: 18px; font-weight: 700; color: var(--vi, #1E3A5F); }
.vi-assess-history-actions { margin-top: 20px; display: flex; gap: 10px; }

/* Hide WP page title */
.page-header { display: none; }

/* ---- Mobile ---- */
@media (max-width: 640px) {
    .vi-assess-layout { grid-template-columns: 1fr; gap: 0; }
    .vi-assess-sidebar {
        position: static; overflow-x: auto; -webkit-overflow-scrolling: touch;
        padding: 0 0 12px; margin-bottom: 16px; border-bottom: 1px solid #eee; scrollbar-width: thin;
    }
    .vi-assess-sidebar-head { display: none; }
    .vi-assess-sidebar-nav { flex-direction: row; gap: 6px; }
    .vi-assess-sidebar-item {
        flex-shrink: 0; padding: 6px 12px; border-radius: 20px;
        border: 1.5px solid var(--vi-bdr, #e0e0e0); background: #fff; flex-direction: column; gap: 2px;
        align-items: center; min-width: 80px;
    }
    .vi-assess-sidebar-item.vi-current { border-color: var(--vi, #1E3A5F); background: #eef3fb; }
    .vi-assess-sidebar-item.vi-status-complete { border-color: #c8e6c9; background: #f1f8f2; }
    .vi-assess-sidebar-info { text-align: center; }
    .vi-assess-sidebar-label { font-size: 10px; white-space: nowrap; }
    .vi-assess-sidebar-progress { justify-content: center; }
    .vi-assess-sidebar-bar { width: 40px; }
    .vi-assess-sidebar-count { font-size: 9px; }
    .vi-assess-sidebar-finish, .vi-assess-sidebar-remaining { display: none; }

    .vi-assess-question-text { font-size: 16px; }
    .vi-assess-pillar-label { flex: 0 0 120px; font-size: 12px; }
    .vi-assess-result-actions { flex-direction: column; }
    .vi-assess-nav { gap: 8px; }
}

/* === v4.0.1 HOTFIX: Override Elementor kit button styles on sidebar items === */
.vi-assess-sidebar-item,
button.vi-assess-sidebar-item {
    background: none !important;
    color: var(--vi-txt2, #555) !important;
    border: none !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.3 !important;
    border-radius: 8px !important;
    text-align: left !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
button.vi-assess-sidebar-item:hover {
    background: var(--vi-bg, #f5f7fa) !important;
}
button.vi-assess-sidebar-item.vi-current {
    background: #eef3fb !important;
    color: var(--vi, #1E3A5F) !important;
    font-weight: 600 !important;
}
button.vi-assess-sidebar-item.vi-status-complete {
    color: #2d8a4e !important;
}
button.vi-assess-sidebar-item.vi-status-complete.vi-current {
    color: var(--vi, #1E3A5F) !important;
}
/* Fix option text alignment — left align, not centered */
button.vi-assess-option {
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    align-items: flex-start !important;
}
/* Fix level label and text running together */
button.vi-assess-option .vi-assess-option-level {
    display: block !important;
    margin-bottom: 2px !important;
}
button.vi-assess-option .vi-assess-option-text {
    display: block !important;
}
/* Mobile sidebar pills override */
@media (max-width: 640px) {
    button.vi-assess-sidebar-item {
        flex-shrink: 0 !important;
        padding: 6px 12px !important;
        border-radius: 20px !important;
        border: 1.5px solid var(--vi-bdr, #e0e0e0) !important;
        background: #fff !important;
        flex-direction: column !important;
        gap: 2px !important;
        align-items: center !important;
        min-width: 80px !important;
        text-align: center !important;
        width: auto !important;
    }
    button.vi-assess-sidebar-item.vi-current {
        border-color: var(--vi, #1E3A5F) !important;
        background: #eef3fb !important;
    }
    button.vi-assess-sidebar-item.vi-status-complete {
        border-color: #c8e6c9 !important;
        background: #f1f8f2 !important;
    }
}

/* === v4.0.2: Results page alignment + back button style === */
.vi-assess-results { text-align: center; }
.vi-assess-results-header { text-align: center; margin-bottom: 8px; }
.vi-assess-results-header h1 { text-align: center; }
.vi-assess-breakdown { text-align: left; }
.vi-assess-recommendations { text-align: left; }
.vi-assess-result-actions { justify-content: center; }
/* Scores by Pillar — align label column consistently */
.vi-assess-pillar-row { max-width: 600px; margin-left: auto; margin-right: auto; }
.vi-assess-pillar-label { flex: 0 0 220px; text-align: right; padding-right: 16px; }
.vi-assess-breakdown h2,
.vi-assess-recommendations h2 { text-align: center; margin-bottom: 20px; }
.vi-assess-recommendations p { text-align: center; }
/* Back button as secondary */
.vi-assess-nav .vi-btn-secondary { display: inline-flex; align-items: center; gap: 4px; }

/* === v4.0.3: Ghost back button === */
.vi-btn-ghost {
    background: none !important;
    border: none !important;
    color: var(--vi, #1E3A5F) !important;
    padding: 10px 16px !important;
    font-weight: 600 !important;
    text-shadow: none !important;
}
.vi-btn-ghost:hover {
    background: var(--vi-bg, #f5f7fa) !important;
    border-radius: 8px !important;
}
.vi-btn-ghost svg {
    vertical-align: middle;
    margin-right: 4px;
}