/*
 * Bloom's Taxonomy Level Styling
 * Dedicated CSS to prevent styling conflicts and ensure consistency
 * Version: 1.0
 */

/* Base class for all Bloom's level badges */
.blooms-level-badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.5rem !important;
    font-size: 1.125rem !important;
    font-weight: bold !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    border: 2px solid !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
    color: white !important;
    text-decoration: none !important;
    margin: 0.25rem 0 !important;
}

/* Individual level styling */
.blooms-level-1 {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    border-color: #fca5a5 !important;
}

.blooms-level-2 {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    border-color: #fed7aa !important;
}

.blooms-level-3 {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    border-color: #fde68a !important;
}

.blooms-level-4 {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
    border-color: #a5f3fc !important;
    color: white !important;
}

.blooms-level-5 {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    border-color: #93c5fd !important;
}

.blooms-level-6 {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    border-color: #c4b5fd !important;
}

/* Force white text and icon colors */
.blooms-level-badge * {
    color: white !important;
}

.blooms-level-badge i {
    color: white !important;
    margin-right: 0.5rem !important;
}

/* Hover effects */
.blooms-level-badge:hover {
    transform: translateY(-1px) !important;
    transition: transform 0.2s ease !important;
}

/* Ensure visibility in all contexts */
.blooms-level-badge,
.blooms-level-badge span,
.blooms-level-badge i {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Override any potential conflicts */
.question-content .blooms-level-badge,
.question-header .blooms-level-badge,
.activity-content .blooms-level-badge {
    background: inherit !important;
    color: white !important;
}

/* Additional specificity for stubborn cases */
body .blooms-level-4,
html .blooms-level-4 {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
    color: white !important;
}

body .blooms-level-4 *,
html .blooms-level-4 * {
    color: white !important;
}