/* Questionnaire Option Styles - CSS-based for smooth transitions */

.questionnaire-option {
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.questionnaire-option:hover {
    border-color: var(--border-hover);
    transform: translateY(-1px);
}

.questionnaire-option.selected {
    background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
    border-color: #10B981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

/* Icon container */
.questionnaire-option .icon-container {
    background: var(--bg-tertiary);
    transition: background 0.3s ease;
}

.questionnaire-option.selected .icon-container {
    background: rgba(16, 185, 129, 0.12);
}

/* Icon */
.questionnaire-option i {
    color: var(--accent-primary);
    transition: color 0.3s ease;
}

.questionnaire-option.selected i {
    color: #10B981;
}

/* Text */
.questionnaire-option .option-label {
    color: var(--text-primary);
    transition: color 0.3s ease;
}

.questionnaire-option.selected .option-label {
    color: #065F46;
}

.questionnaire-option .option-description {
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.questionnaire-option.selected .option-description {
    color: #047857;
}

/* Radio indicator */
.radio-indicator {
    border: 2px solid var(--border-color);
    background: transparent;
    transition: all 0.3s ease;
}

.questionnaire-option.selected .radio-indicator {
    border-color: #10B981;
    background: #10B981;
}

/* Check icon - always present but hidden until selected */
.questionnaire-option .check-icon {
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.3s ease;
}

.questionnaire-option.selected .check-icon {
    opacity: 1;
    transform: scale(1);
}