/* ========================================
   CENTRALIZED CEFR SYSTEM
   Consistent colors and blob shapes across the entire app
   Based on learning network standards
   ======================================== */

/* CEFR Level Colors - Official System */
:root {
    --cefr-pre-a1: #FFB6C1;
    --cefr-a1: #FFA07A;
    --cefr-a2: #FF9A9E;
    --cefr-b1: #98FB98;
    --cefr-b2: #87CEEB;
    --cefr-c1: #DDA0DD;
    --cefr-c2: #F0A0A0;
    --program-color: #007bff; /* Default program color */
}

/* CEFR Blob Base Styling */
.cefr-blob {
    display: inline-block;
    width: 12px;
    height: 14px;
    border-radius: 6px 8px 6px 4px;
    margin-left: 0px;
    margin-right: 0;
    flex-shrink: 0;
    vertical-align: text-bottom;
    position: relative;
    z-index: 10;
}

/* CEFR Blob Size Variants */
.cefr-blob.small {
    width: 12px;
    height: 14px;
    border-radius: 6px 8px 6px 4px;
}

.cefr-blob.medium {
    width: 18px;
    height: 22px;
    border-radius: 8px 12px 8px 6px;
}

.cefr-blob.large {
    width: 24px;
    height: 30px;
    border-radius: 10px 16px 10px 8px;
}

/* CEFR Level Colors */
.cefr-blob.pre-a1, .cefr-blob.prea1 { background-color: var(--cefr-pre-a1); }
.cefr-blob.a1 { background-color: var(--cefr-a1); }
.cefr-blob.a2 { background-color: var(--cefr-a2); }
.cefr-blob.b1 { background-color: var(--cefr-b1); }
.cefr-blob.b2 { background-color: var(--cefr-b2); }
.cefr-blob.c1 { background-color: var(--cefr-c1); }
.cefr-blob.c2 { background-color: var(--cefr-c2); }

/* CEFR Range Gradients */
.cefr-blob.pre-a1-to-a1 { background: linear-gradient(45deg, var(--cefr-pre-a1) 50%, var(--cefr-a1) 50%); }
.cefr-blob.a1-to-a2 { background: linear-gradient(45deg, var(--cefr-a1) 50%, var(--cefr-a2) 50%); }
.cefr-blob.a2-to-b1 { background: linear-gradient(45deg, var(--cefr-a2) 50%, var(--cefr-b1) 50%); }
.cefr-blob.b1-to-b2 { background: linear-gradient(45deg, var(--cefr-b1) 50%, var(--cefr-b2) 50%); }
.cefr-blob.b2-to-c1 { background: linear-gradient(45deg, var(--cefr-b2) 50%, var(--cefr-c1) 50%); }
.cefr-blob.c1-to-c2 { background: linear-gradient(45deg, var(--cefr-c1) 50%, var(--cefr-c2) 50%); }

/* CEFR Level Badge Styling */
.cefr-level {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #855CF8;
    background: none;
    padding: 0.1rem 0.4rem;
    border-radius: 15px;
    border: 1px solid #DCD1FF;
    margin-left: 0.5rem;
    vertical-align: middle;
    position: relative;
    z-index: 10;
    /* Prevent unwanted flex expansion */
    flex: none;
    text-align: center;
    width: auto;
    min-width: auto;
    max-width: none;
}

/* Force Visibility for All CEFR Elements */
.cefr-level,
.cefr-blob,
#student-cefr-level,
#student-cefr-blob {
    display: inline-block;
    visibility: visible;
    opacity: 1;
    position: static;
    top: auto;
    right: auto;
    left: auto;
    bottom: auto;
    float: none;
}

/* Override any conflicting flex or width styles */
.cefr-level,
#student-cefr-level {
    flex: none !important;
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    text-align: center !important;
}

/* Student Card CEFR Blob Alignment */
.student-card .cefr-blob,
.program-card .cefr-blob,
.detail-value .cefr-blob {
    margin-bottom: 0.25rem;
    vertical-align: middle;
}

/* CEFR Level Display Component */
.cefr-level-display {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
}

.cefr-level-display .cefr-blob {
    margin: 0;
    flex-shrink: 0;
}

/* Student CEFR Blob Specific Styling */
#student-cefr-blob {
    display: inline-block;
    width: 24px;
    height: 28px;
    border-radius: 10px 12px 10px 8px;
    margin-left: 0.5rem;
    margin-right: 0.25rem;
    vertical-align: middle;
    position: relative;
    z-index: 10;
    flex-shrink: 0;
}

/* Large CEFR Blobs for Program Pages */
.cefr-blob.large {
    width: 120px;
    height: 120px;
    border-radius: 50% 60% 55% 70% / 60% 55% 70% 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    position: relative;
    border: none;

}

.cefr-blob.large:hover {
    transform: scale(1.1) rotate(-2deg);

}

/* Program CEFR Blob Styling */
.program-cefr-blob {
    width: 20px;
    height: 20px;
    border-radius: 50% 60% 55% 70% / 60% 55% 70% 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    border: none;

    font-size: 0.75rem;
}

.program-cefr-blob:hover {
    transform: scale(1.1) rotate(-2deg);

}

.program-cefr-blob.pre-a1 { background-color: var(--cefr-pre-a1); }
.program-cefr-blob.a1 { background-color: var(--cefr-a1); }
.program-cefr-blob.a2 { background-color: var(--cefr-a2); }
.program-cefr-blob.b1 { background-color: var(--cefr-b1); }
.program-cefr-blob.b2 { background-color: var(--cefr-b2); }
.program-cefr-blob.c1 { background-color: var(--cefr-c1); }
.program-cefr-blob.c2 { background-color: var(--cefr-c2); }

/* Route Legend Blob Styling */
.route-legend-blob {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 0.5rem;
    vertical-align: middle;
}

.route-cefr-pre-a1 { background-color: var(--cefr-pre-a1); }
.route-cefr-a1 { background-color: var(--cefr-a1); }
.route-cefr-a2 { background-color: var(--cefr-a2); }
.route-cefr-b1 { background-color: var(--cefr-b1); }
.route-cefr-b2 { background-color: var(--cefr-b2); }
.route-cefr-c1 { background-color: var(--cefr-c1); }
.route-cefr-c2 { background-color: var(--cefr-c2); }

/* Station CEFR Blob Styling */
.station-cefr-blob {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
    font-size: 0.8rem;
    margin: 0.5rem;

}

.station-code {
    font-size: 0.7rem;
    font-weight: bold;
    color: #666;
    text-align: center;
    margin-top: 0.25rem;
}

/* Level Name Styling */
.level-name::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 14px;
    border-radius: 6px 8px 6px 4px;
    margin-right: 0.5rem;
    vertical-align: middle;
}

.level-name.pre-a1::before { background-color: var(--cefr-pre-a1); }
.level-name.a1::before { background-color: var(--cefr-a1); }
.level-name.a2::before { background-color: var(--cefr-a2); }
.level-name.b1::before { background-color: var(--cefr-b1); }
.level-name.b2::before { background-color: var(--cefr-b2); }
.level-name.c1::before { background-color: var(--cefr-c1); }
.level-name.c2::before { background-color: var(--cefr-c2); }

/* CEFR System Component */
.cefr-system-component {
    background: white;
    border-radius: 12px;

    padding: 2rem;
    margin: 2rem 0;
    border: 1px solid #e9ecef;
}

/* CEFR Level Tabs */
.cefr-level-tabs {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.cefr-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    color: #333;
    font-weight: 500;
    min-width: 120px;
    justify-content: center;
}

.cefr-tab:hover {
    border-color: var(--program-color);
    transform: translateY(-2px);

    text-decoration: none;
    color: #333;
}

.cefr-tab.active {
    background: var(--program-color);
    border-color: var(--program-color);
    color: white;

}

.cefr-tab .cefr-blob {
    width: 16px;
    height: 18px;
    border-radius: 8px 10px 8px 6px;
    margin: 0;
    flex-shrink: 0;
}

.cefr-tab:hover {
    border-color: var(--program-color);
    transform: translateY(-2px);

}

.cefr-tab-text {
    font-weight: 600;
    font-size: 0.9rem;
    text-align: center;
    flex: 1;
}

/* CEFR Content Container */
.cefr-content-container {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 2rem;
    margin-top: 1rem;
    border: 1px solid #e9ecef;
}

.cefr-content {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.cefr-content.fade-out {
    opacity: 0;
}

.cefr-content.fade-in {
    opacity: 1;
}

/* CEFR Level Name */
.cefr-level-name {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.cefr-level-name::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 28px;
    border-radius: 12px 16px 12px 8px;
    background-color: var(--program-color);
}

.cefr-level-name.pre-a1::before { background-color: var(--cefr-pre-a1); }
.cefr-level-name.a1::before { background-color: var(--cefr-a1); }
.cefr-level-name.a2::before { background-color: var(--cefr-a2); }
.cefr-level-name.b1::before { background-color: var(--cefr-b1); }
.cefr-level-name.b2::before { background-color: var(--cefr-b2); }
.cefr-level-name.c1::before { background-color: var(--cefr-c1); }
.cefr-level-name.c2::before { background-color: var(--cefr-c2); }

.cefr-tab .cefr-blob.pre-a1 { background-color: var(--cefr-pre-a1); }
.cefr-tab .cefr-blob.a1 { background-color: var(--cefr-a1); }
.cefr-tab .cefr-blob.a2 { background-color: var(--cefr-a2); }
.cefr-tab .cefr-blob.b1 { background-color: var(--cefr-b1); }
.cefr-tab .cefr-blob.b2 { background-color: var(--cefr-b2); }
.cefr-tab .cefr-blob.c1 { background-color: var(--cefr-c1); }
.cefr-tab .cefr-blob.c2 { background-color: var(--cefr-c2); }

/* CEFR Level Description */
.cefr-level-description {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 2rem;
    padding: 1rem;
    background: white;
    border-radius: 8px;
    border-left: 4px solid var(--program-color);
}

/* CEFR Level Details */
.cefr-level-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.cefr-detail-item {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

.cefr-detail-item:hover {
    transform: translateY(-2px);

}

.cefr-detail-label {
    font-weight: bold;
    color: var(--program-color);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
}

.cefr-detail-label.pre-a1 { color: var(--cefr-pre-a1); }
.cefr-detail-label.a1 { color: var(--cefr-a1); }
.cefr-detail-label.a2 { color: var(--cefr-a2); }
.cefr-detail-label.b1 { color: var(--cefr-b1); }
.cefr-detail-label.b2 { color: var(--cefr-b2); }
.cefr-detail-label.c1 { color: var(--cefr-c1); }
.cefr-detail-label.c2 { color: var(--cefr-c2); }

.cefr-detail-text {
    color: #666;
    line-height: 1.5;
    margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .cefr-level-tabs {
        flex-direction: column;
        align-items: center;
    }
    
    .cefr-tab {
        width: 100%;
        max-width: 300px;
    }
    
    .cefr-level-details {
        grid-template-columns: 1fr;
    }
    
    .cefr-level-name {
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    .cefr-tab {
        padding: 0.5rem 1rem;
        min-width: 100px;
    }
    
    .cefr-system-component {
        padding: 1rem;
        margin: 1rem 0;
    }
    
    .cefr-content-container {
        padding: 1rem;
    }
}

/* Individual Program Page Specific Styles */
.program-color-accent { 
    color: var(--program-color); 
}

.cefr-scale { 
    display: flex; 
    justify-content: center; 
    gap: 1rem; 
    margin: 2rem 0; 
    flex-wrap: wrap; 
}

/* Route Tabs for CEFR Levels */
.cefr-scale .route-tabs {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.cefr-scale .route-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0.5rem;
    border-radius: 0.5rem;
    min-width: 80px;
}

.cefr-scale .route-tab:hover {
    transform: translateY(-2px);

}

.cefr-scale .route-icon {
    width: 60px;
    height: 60px;
    border: 3px solid;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    background: white;
    transition: all 0.3s ease;
}

.cefr-scale .route-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    text-align: center;
}

.level-stops { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    position: relative; 
    margin: 2rem 0; 
}

.level-stop { 
    width: 60px; 
    height: 60px; 
    border-radius: 50% 60% 55% 70% / 60% 55% 70% 50%; 
    color: white; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: bold; 
    cursor: pointer; 
    transition: all 0.3s ease; 
    text-decoration: none; 
    border: none; 

    font-size: 0.9rem; 
}

.level-stop:hover { 
    transform: scale(1.1) rotate(-2deg); 

}

.grade-stop { 
    background: linear-gradient(135deg, var(--program-color), var(--program-color)aa); 
}

.level-stop:not(.grade-stop) { 
    background: var(--program-color); 
}

.subway-line { 
    height: 6px; 
    background: var(--program-color); 
    border-radius: 3px; 
    margin: 2rem 0; 
    position: relative; 
}

.books-grid { 
    display: flex; 
    flex-direction: column; 
    gap: 1rem; 
    margin: 2rem 0; 
}

.book-item { 
    transition: all 0.3s ease; 
    border: 2px solid #e9ecef; 
}

.book-item:hover { 
    border-color: var(--program-color); 
    transform: translateY(-2px); 

}

.book-emoji { 
    font-size: 2.5rem; 
    line-height: 1; 
}

/* Program Level Page Specific Styles */
.level-color-accent {
    color: var(--level-color);
}

.level-blob {
    width: 150px;
    height: 150px;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    background: var(--level-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: bold;
    color: white;
    margin: 0rem;
	
}

.lesson-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}

.lesson-stop {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--level-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 4px solid white;

    position: relative;
    margin: 0 auto;
}

.lesson-stop:hover {
    transform: scale(1.2);

} 

/* Lesson Journey Map: ring style */
.tpd-container .lesson-grid .lesson-stop {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #ffffff !important; /* white center */
    color: var(--level-color) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 6px solid var(--level-color) !important; /* thick colored ring */

    margin: 0 auto;
}

/* Provide a darker shade for Track B (lessons 31–60) */
:root {
    --level-color-dark: color-mix(in srgb, var(--level-color) 80%, black);
}
.tpd-container .lesson-grid .lesson-stop.track-b {
    border-color: var(--level-color-dark) !important;
    color: var(--level-color-dark) !important;
}

.tpd-container .lesson-grid .lesson-stop:hover {
    transform: scale(1.1);

}

/* CEFR Level Navigation - Medium Route Stops */
.cefr-scale .route-tabs {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    margin: 1rem 0;
}

.cefr-scale .route-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0.5rem;
    border-radius: 0.5rem;
    min-width: 80px;
}

.cefr-scale .route-tab:hover {
    transform: translateY(-2px);

}

.cefr-scale .route-icon {
    width: 60px;
    height: 60px;
    border: 3px solid;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    background: white;
    transition: all 0.3s ease;
}

.cefr-scale .route-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    text-align: center;
}

/* CEFR Interactive System */
.cefr-levels {
    display: flex;
    gap: 12px;
    margin: 24px 0;
    flex-wrap: wrap;
}

.cefr-badge {
    width: 100px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    color: white;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    background: white;
    border: 2px solid #e0e0e0;
}

.cefr-badge::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 50px;
    z-index: -1;
    transition: all 0.3s ease;
}

.cefr-badge:hover {
    transform: translateY(-2px);
}

.cefr-badge.pre-a1::before { 
    background: #FFB6C1;
    border-radius: 48% 52% 60% 40% / 53% 47% 65% 35%;
}
.cefr-badge.a1::before { 
    background: #FFA07A;
    border-radius: 52% 48% 35% 65% / 47% 53% 40% 60%;
}
.cefr-badge.a2::before { 
    background: #FF9A9E;
    border-radius: 60% 40% 55% 45% / 65% 35% 50% 50%;
}
.cefr-badge.b1::before { 
    background: #98FB98;
    border-radius: 40% 60% 70% 30% / 50% 50% 60% 40%;
}
.cefr-badge.b2::before { 
    background: #87CEEB;
    border-radius: 55% 45% 40% 60% / 35% 65% 45% 55%;
}
.cefr-badge.c1::before { 
    background: #DDA0DD;
    border-radius: 45% 55% 50% 50% / 60% 40% 55% 45%;
}
.cefr-badge.c2::before { 
    background: #F0A0A0;
    border-radius: 50% 50% 45% 55% / 45% 55% 35% 65%;
}

.interactive-title {
    font-size: 20px;
    font-weight: 400;
    color: #333;
    margin-bottom: 40px;
    text-align: center;
    letter-spacing: -0.3px;
}

.level-tabs {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 40px;
    border: 2px solid #e0e0e0;
    display: inline-flex;
    margin-left: 50%;
    transform: translateX(-50%);
    border-radius: 8px;
    overflow: hidden;
}

.level-tab {
    width: 80px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    color: #333;
    background: white;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 0.3px;
    position: relative;
    z-index: 1;
}

.level-tab::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 40px;
    z-index: -1;
    opacity: 0;
    transition: all 0.3s ease;
}

.level-tab:hover::before {
    opacity: 0.3;
}

.level-tab.active {
    color: white;
}

.level-tab.active::before {
    opacity: 1;
}

.level-tab.pre-a1::before { 
    background: #FFB6C1;
    border-radius: 48% 52% 60% 40% / 53% 47% 65% 35%;
}
.level-tab.a1::before { 
    background: #FFA07A;
    border-radius: 52% 48% 35% 65% / 47% 53% 40% 60%;
}
.level-tab.a2::before { 
    background: #FF9A9E;
    border-radius: 60% 40% 55% 45% / 65% 35% 50% 50%;
}
.level-tab.b1::before { 
    background: #98FB98;
    border-radius: 40% 60% 70% 30% / 50% 50% 60% 40%;
}
.level-tab.b2::before { 
    background: #87CEEB;
    border-radius: 55% 45% 40% 60% / 35% 65% 45% 55%;
}
.level-tab.c1::before { 
    background: #DDA0DD;
    border-radius: 45% 55% 50% 50% / 60% 40% 55% 45%;
}
.level-tab.c2::before { 
    background: #F0A0A0;
    border-radius: 50% 50% 45% 55% / 45% 55% 35% 65%;
}

.level-content {
    text-align: center;
    padding: 40px;
    background: white;
    border: 1px solid #e8e8e8;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    justify-content: center;
}

.level-name {
    font-size: 18px;
    font-weight: 400;
    color: #333;
    margin-bottom: 12px;
    letter-spacing: -0.2px;
    position: relative;
}

.level-name::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 18px;
    border-radius: 6px 8px 6px 4px;
    opacity: 0.9;
}

.level-name.pre-a1::before { background: #FFB6C1; }
.level-name.a1::before { background: #FFA07A; }
.level-name.a2::before { background: #FF9A9E; }
.level-name.b1::before { background: #98FB98; }
.level-name.b2::before { background: #87CEEB; }
.level-name.c1::before { background: #DDA0DD; }
.level-name.c2::before { background: #F0A0A0; }

.level-description {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto 24px;
    text-align: left;
}

.level-description strong {
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
}

/* Program card description layout */
.program-card .level-description {
    text-align: left;
    max-width: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Main description - full width */
.program-card .level-description .main-description {
    width: 100%;
    text-align: left;
}

/* Skills and Ideal For grid - two columns */
.program-card .level-description .skills-ideal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: start;
    width: 100%;
}

/* Skills section styling */
.program-card .level-description .skills-section {
    text-align: left;
}

.program-card .level-description .skills-section .skills-content {
    text-align: left;
}

/* Ideal section styling */
.program-card .level-description .ideal-section {
    text-align: left;
}

.program-card .level-description .ideal-section .ideal-content {
    text-align: left;
}

/* Single column on mobile */
@media (max-width: 768px) {
    .program-card .level-description .skills-ideal-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.level-details {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
    overflow-x: hidden;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0; /* Prevent grid items from overflowing */
}

/* Responsive breakpoints for level-details */
@media (max-width: 1024px) {
    .level-details {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }
}

@media (max-width: 768px) {
    .level-details {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .level-details {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .level-content {
        padding: 1rem;
        overflow-x: hidden;
    }
}

.detail-label {
    font-size: 14px;
    font-weight: 600;
    color: #666;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
}

.detail-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 16px;
    border-radius: 6px 8px 6px 4px;
    opacity: 0.9;
}

.detail-label.active::before {
    opacity: 1;
}

.detail-label.pre-a1 { color: #666; }
.detail-label.pre-a1::before { background: #FFB6C1; }
.detail-label.a1 { color: #666; }
.detail-label.a1::before { background: #FFA07A; }
.detail-label.a2 { color: #666; }
.detail-label.a2::before { background: #FF9A9E; }
.detail-label.b1 { color: #666; }
.detail-label.b1::before { background: #98FB98; }
.detail-label.b2 { color: #666; }
.detail-label.b2::before { background: #87CEEB; }
.detail-label.c1 { color: #666; }
.detail-label.c1::before { background: #DDA0DD; }
.detail-label.c2 { color: #666; }
.detail-label.c2::before { background: #F0A0A0; }

.detail-text {
    font-size: 16px;
    color: #333;
    font-weight: 500;
    line-height: 1.4;
}

.fade-transition {
    transition: opacity 0.2s ease;
}

.fade-out {
    opacity: 0;
}

.fade-in {
    opacity: 1;
}

/* CEFR Scale */
.cefr-scale { 
    display: flex;
    justify-content: center; 
    flex-wrap: wrap; 
    gap: 15px; 
    margin: 30px 0; 
}

/* Legend Styles */
.legend-container { 
    position: fixed; 
    top: 50%; 
    right: 20px; 
    transform: translateY(-50%); 
    z-index: 1000;
    transition: all 0.3s ease;
} 

.legend-container.minimized { 
    left: -160px; 
    right: auto; 
    transform: translateY(-50%); 
} 

.legend-content { 
    background: white; 
    padding: 20px; 
    border-radius: 10px; 

    border: 2px solid #e0e0e0; 
    min-width: 200px; 
} 

.legend-header { 
    display: flex; 
    justify-content: space-between;
    align-items: center; 
    margin-bottom: 15px; 
    padding-bottom: 10px; 
    border-bottom: 2px solid #e0e0e0; 
} 

.legend-title { 
    font-size: 16px; 
    font-weight: bold; 
    color: #333;
    margin: 0; 
} 

.legend-item { 
    display: flex; 
    align-items: center; 
    gap: 10px;
    cursor: pointer; 
    padding: 8px 12px;
    border-radius: 6px; 
    transition: all 0.3s ease;
    text-decoration: none !important; 
    color: inherit !important;
} 

.legend-item:hover { 
    background: #f8f9fa; 
    transform: translateY(-2px); 

    color: inherit !important; 
    text-decoration: none !important; 
} 

.legend-color { 
    width: 20px; 
    height: 20px; 
    border-radius: 50%; 
    border: 4px solid; 
    background: white;
} 

.legend-color.rh { border-color: #8A2BE2; } 
.legend-color.bb { border-color: #FFD700; } 
.legend-color.bck { border-color: #FF69B4; } 
.legend-color.tc { border-color: #E74C3C; }
.legend-color.gt { border-color: #34495E; } 
.legend-color.w { border-color: #1ABC9C; }