/* Risk Tolerance Quiz Widget - Clean & Simple */
/* High specificity to override WordPress theme styles */

.risk-quiz-widget {
    /* Reset and base styles */
    all: initial !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;

    /* Layout - Dark Theme */
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    background: #1f2937 !important;
    border: 1px solid #374151 !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin: 15px 0 !important;
    box-sizing: border-box !important;

    /* Typography reset - Dark Theme */
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: #e5e7eb !important;
    text-align: left !important;

    /* Clean appearance - Dark Theme */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
    overflow: hidden !important;
    position: relative !important;
}

/* Reset all nested elements */
.risk-quiz-widget * {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Header - Compact */
.risk-quiz-widget .quiz-header {
    margin-bottom: 15px !important;
}

.risk-quiz-widget .quiz-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #f9fafb !important;
    margin: 0 0 5px 0 !important;
    line-height: 1.3 !important;
}

.risk-quiz-widget .quiz-subtitle {
    font-size: 13px !important;
    color: #9ca3af !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

/* Question - Simple Dark */
.risk-quiz-widget .quiz-question {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #e5e7eb !important;
    margin: 0 0 15px 0 !important;
    line-height: 1.4 !important;
}

/* Options - Clean buttons */
.risk-quiz-widget .quiz-options {
    margin: 0 0 15px 0 !important;
}

.risk-quiz-widget .quiz-option {
    display: block !important;
    width: 100% !important;
    background: #374151 !important;
    border: 1px solid #4b5563 !important;
    border-radius: 6px !important;
    padding: 12px 15px !important;
    margin: 0 0 8px 0 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-align: left !important;
}

.risk-quiz-widget .quiz-option:hover {
    background: #4b5563 !important;
    border-color: #6b7280 !important;
}

.risk-quiz-widget .quiz-option.selected {
    background: #1e40af !important;
    border-color: #3b82f6 !important;
    color: #e0e7ff !important;
}

.risk-quiz-widget .quiz-option-label {
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    color: #e5e7eb !important;
}

/* Result - Inline with question, not at bottom - Dark */
.risk-quiz-widget .quiz-result {
    margin: 15px 0 0 0 !important;
    padding: 15px !important;
    background: #065f46 !important;
    border: 1px solid #059669 !important;
    border-radius: 6px !important;
    opacity: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

.risk-quiz-widget .quiz-result.show {
    opacity: 1 !important;
    max-height: 200px !important;
}

.risk-quiz-widget .quiz-result-type {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #34d399 !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.3 !important;
}

.risk-quiz-widget .quiz-result-text {
    font-size: 13px !important;
    color: #d1fae5 !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.4 !important;
}

/* Poll result - Simple */
.risk-quiz-widget .quiz-poll-result {
    margin: 10px 0 !important;
}

.risk-quiz-widget .quiz-poll-result strong {
    font-size: 13px !important;
    color: #d1fae5 !important;
    font-weight: 600 !important;
}

/* Poll bar - Simple approach */
.risk-quiz-widget .quiz-poll-bar {
    width: 100% !important;
    height: 8px !important;
    background: #374151 !important;
    border-radius: 4px !important;
    margin: 8px 0 !important;
    overflow: hidden !important;
    position: relative !important;
    display: block !important;
}

.risk-quiz-widget .quiz-poll-fill {
    height: 8px !important;
    background: #00ff88 !important;
    width: 0%;
    transition: width 1.5s ease !important;
    border-radius: 4px !important;
    display: block !important;
}

/* Allow JavaScript to override width */
.risk-quiz-widget .quiz-poll-fill[style*="width"] {
    width: inherit;
}

/* Actions - Simple buttons - Dark */
.risk-quiz-widget .quiz-actions {
    margin: 15px 0 0 0 !important;
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.risk-quiz-widget .quiz-btn {
    background: #4b5563 !important;
    border: 1px solid #6b7280 !important;
    border-radius: 6px !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #e5e7eb !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    display: inline-block !important;
    font-family: inherit !important;
}

.risk-quiz-widget .quiz-btn:hover {
    background: #6b7280 !important;
    color: #f9fafb !important;
    border-color: #9ca3af !important;
}

.risk-quiz-widget .quiz-btn.secondary {
    background: #374151 !important;
    color: #9ca3af !important;
    border-color: #4b5563 !important;
}

.risk-quiz-widget .quiz-btn.secondary:hover {
    background: #4b5563 !important;
    color: #e5e7eb !important;
    border-color: #6b7280 !important;
}

/* Loading and error states - Simple Dark */
.risk-quiz-widget .quiz-loading,
.risk-quiz-widget .quiz-error,
.risk-quiz-widget .quiz-fallback {
    text-align: center !important;
    padding: 20px !important;
    color: #9ca3af !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

.risk-quiz-widget .quiz-loading {
    background: #374151 !important;
}

.risk-quiz-widget .quiz-error {
    background: #7f1d1d !important;
    color: #fca5a5 !important;
    border: 1px solid #dc2626 !important;
    border-radius: 6px !important;
}

.risk-quiz-widget .quiz-spinner {
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    border: 2px solid #4b5563 !important;
    border-radius: 50% !important;
    border-top-color: #60a5fa !important;
    animation: quiz-spin 1s linear infinite !important;
    margin: 0 5px !important;
}

@keyframes quiz-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Mobile optimization */
@media (max-width: 480px) {
    .risk-quiz-widget {
        padding: 15px !important;
        margin: 10px 0 !important;
    }

    .risk-quiz-widget .quiz-title {
        font-size: 15px !important;
    }

    .risk-quiz-widget .quiz-question {
        font-size: 13px !important;
    }

    .risk-quiz-widget .quiz-option {
        padding: 10px 12px !important;
    }

    .risk-quiz-widget .quiz-actions {
        flex-direction: column !important;
    }

    .risk-quiz-widget .quiz-btn {
        width: 100% !important;
        text-align: center !important;
    }
}