/* Base HTML font size for rem units - 1rem = 16px by default */
html {
    font-size: 16px;
}

/* Program Page Styles */

/* Universal font for CEFR level text */
.cefr-level-text {
    font-family: 'Quicksand', Arial, sans-serif;
    color: #444;
    font-size: .8rem;
    font-weight: 750;
    letter-spacing: 0.5px;
}

/* Simple padding control for CEFR level display */
.cefr-level-display {
    padding-top: 6px;    /* Space above the entire CEFR section */
    padding-bottom: 6px; /* Space below the entire CEFR section */
}

/* CEFR blob styling removed - now using centralized cefr-system.css */

/* Course List Styles */
.course-list-cefr-image {
    max-width: 56.25rem; /* 900px / 16 = 56.25rem */
}

/* Placement Quiz Styles */
.placement-quiz-progress-fill {
    width: 0%;
    transition: width 0.3s ease;
}

.placement-quiz-prev-btn {
    display: none;
}

/* Teacher Program Styles */
.teacher-program-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.teacher-program-detail-image {
    max-height: 18.75rem; /* 300px / 16 = 18.75rem */
}

.teacher-program-custom-structure-group {
    display: none;
}

/* Program Navigation Styles */
.main-program-nav {
    margin-bottom: 2rem;
}

.program-nav-list {
    display: flex;
    justify-content: center;
    gap: 2rem;
    list-style: none;
    padding: 0;
}

.nav-link-disabled {
    pointer-events: none;
    opacity: 0.5;
}

/* Payment Form Styles */
.payment-form-visa {
    display: none;
}

.payment-form-alipay {
    display: none;
}

.payment-form-crypto {
    display: none;
}

/* ESL Learning Network Subway Map Styles */
.learning-network-header {
    padding: 1.875rem 1.25rem; /* 30px 20px */
    text-align: center;
}

.learning-network-header h1 {
    color: #333;
    font-size: 2.5rem; /* 40px / 16 = 2.5rem */
    margin-bottom: 0.5rem; /* 8px / 16 = 0.5rem */
    font-weight: 300;
    letter-spacing: -0.03125rem; /* -0.5px / 16 = -0.03125rem */
}

.learning-network-header p {
    color: #666;
    font-size: 1rem; /* 16px / 16 = 1rem */
    font-weight: 300;
}

.learning-map-container {
    position: relative;
    width: 100%;
    min-height: 80vh;
    padding: 3.75rem 2.5rem; /* 60px 40px */
    overflow: hidden;
}

/* All subway map CSS removed here */

/* All program-specific hover card and subway map CSS removed here */

/* Teacher Programs Page Card Grid */
.programs-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.card {
    border-radius: 1rem;

    border: 1px solid #e5e7eb;
    background: #fff;
    transition: box-shadow 0.2s, transform 0.2s;
}
.card:hover {

    transform: translateY(-2px) scale(1.01);
}
.card-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2;
    display: inline;
}
.card-text {
    color: #6b7280;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}
.card-footer {
    background: none;
    border-top: none;
    padding-top: 0.5rem;
}
.badge.bg-primary {
    background: #2ecc71 !important;
    color: #fff !important;
    font-size: 0.95rem;
    padding: 0.3em .5em;
    border-radius: 0.5em;
    font-weight: 600;
}

@media (max-width: 768px) {
    .programs-card-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}