/* W3T Student Dashboard - Enhanced Professional Modern Styling */

:root {
    --primary-color: #470170;
    --secondary-color: #be9bff;
    --accent-light: #e8d9ff;
    --accent-lighter: #f5f0ff;
    --text-primary: #2c3e50;
    --text-secondary: #718096;
    --text-light: #a0aec0;
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-card: #ffffff;
    --border-color: #e2e8f0;
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    --gradient-light: linear-gradient(135deg, var(--accent-lighter) 0%, var(--accent-light) 100%);
    --gradient-card: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    --border-radius: 16px;
    --border-radius-sm: 8px;
    --border-radius-lg: 24px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-secondary);
    overflow-x: hidden;
}

/* Main Dashboard Container */
.w3t-dashboard-container {
    display: flex;
    min-height: 100vh;
    background: var(--bg-secondary);
    position: relative;
}

/* Enhanced Sidebar Styling - No Scrollbar */
.w3t-dashboard-sidebar {
    width: 300px;
    background: var(--gradient-card);
    backdrop-filter: blur(20px);
    box-shadow: var(--shadow-xl);
    z-index: 10;
    position: absolute;
    height: 100vh;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Prevents scrolling */
}

/* Enhanced Dashboard Header */
.w3t-dashboard-header {
    padding: 1.5rem;
    background: var(--gradient-primary);
    color: white;
    position: relative;
    overflow: hidden;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    margin: 0.5rem 0.5rem 0 0.5rem;
    flex-shrink: 0; /* Prevent shrinking */
}

.w3t-dashboard-header::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -15%;
    width: 150px;
    height: 150px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    z-index: 1;
    filter: blur(20px);
}

.w3t-dashboard-header::after {
    content: '';
    position: absolute;
    bottom: -20%;
    left: -10%;
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    z-index: 1;
}

.w3t-user-avatar {
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    border: 2px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 2;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.w3t-avatar-initials {
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.w3t-user-info {
    position: relative;
    z-index: 2;
}

.w3t-user-info h3 {
    font-size: 0.875rem;
    opacity: 0.9;
    margin-bottom: 0.125rem;
    font-weight: 400;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    color: white !important;
}

.w3t-user-info h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    color: white !important;
}

.w3t-notification-date {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    opacity: 0.9;
    position: relative;
    z-index: 2;
}

.w3t-notification-icon {
    font-size: 0.875rem;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

/* Enhanced Navigation - Compact and No Scroll */
.w3t-dashboard-nav {
    flex: 1;
    padding: 0.75rem 0.5rem;
    overflow: hidden; /* Prevents scrolling */
}

.w3t-dashboard-nav ul {
    list-style: none;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly; /* Distribute items evenly */
}

.w3t-dashboard-nav li {
    margin: 0;
    flex: 1;
    display: flex;
    align-items: center;
}

.w3t-nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: var(--border-radius-sm);
    margin: 0 0.5rem;
    position: relative;
    overflow: hidden;
    width: calc(100% - 1rem);
    backdrop-filter: blur(10px);
}



.w3t-nav-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    color: white !important;
    background: white !important;
    transition: width 0.3s ease;
    border-radius: var(--border-radius-sm);
    z-index: 1;
}

.w3t-nav-link:hover::before,
.w3t-nav-link.active::before {
    width: 100%;
}

.w3t-nav-link:hover {
    color: white !important;
    transform: translateX(4px);
    box-shadow: var(--shadow-md);
}

.w3t-nav-link.active {
    color:  #000 !important;
    font-weight: 600;
    box-shadow: var(--shadow-lg);
}

.w3t-nav-icon,
.w3t-nav-link span:not(.w3t-nav-icon) {
    position: relative;
    z-index: 2;
}

.w3t-nav-icon {
    font-size: 1rem;
    width: 18px;
    text-align: center;
    transition: transform 0.3s ease;
}

.w3t-nav-link:hover .w3t-nav-icon,
.w3t-nav-link.active .w3t-nav-icon {
    transform: scale(1.1);
}

/* Main Content Area */
.w3t-dashboard-main {
    flex: 1;
    margin-left: 300px;
    background: var(--bg-secondary);
    min-height: 100vh;
}

/* Enhanced Toolbar */
.w3t-dashboard-toolbar {
    background: var(--gradient-card);
    padding: 1.5rem 2rem;
    box-shadow: var(--shadow-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(20px);
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    margin-bottom: 1rem;
}

.w3t-profile-photo-section {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--accent-lighter);
    padding: 0.75rem 1.25rem;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--accent-light);
    box-shadow: var(--shadow-sm);
}

.w3t-info-icon {
    font-size: 1.125rem;
    color: var(--primary-color);
}

.w3t-profile-photo-section span:not(.w3t-info-icon) {
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
}

/* Enhanced Button Styles */
.w3t-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--border-radius-sm);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
}

.w3t-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.w3t-btn:hover::before {
    left: 100%;
}

.w3t-btn-primary {
    background: var(--gradient-primary);
    color: white;
    box-shadow: var(--shadow-md);
}

.w3t-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.w3t-btn-secondary {
    background: var(--bg-primary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.w3t-btn-secondary:hover {
    background: var(--bg-secondary);
    border-color: var(--secondary-color);
    transform: translateY(-1px);
}

.w3t-btn-outline {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--secondary-color);
}

.w3t-btn-outline:hover {
    background: var(--secondary-color);
    color: white;
    transform: translateY(-2px);
}

.w3t-btn-logout {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    padding: 0.75rem 1.5rem;
    box-shadow: var(--shadow-md);
}

.w3t-btn-logout:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.w3t-btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
}

/* Enhanced Content Sections */
.w3t-dashboard-content {
    padding: 0 2rem 2rem 2rem;
}

.w3t-content-section {
    display: none;
    animation: fadeInUp 0.4s ease-out;
}

.w3t-content-section.active {
    display: block;
}

.w3t-section-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 2rem;
    position: relative;
    padding-bottom: 1rem;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.w3t-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80px;
    height: 4px;
    background: var(--gradient-primary);
    border-radius: 2px;
    box-shadow: var(--shadow-sm);
}

/* Enhanced Stats Grid */
.w3t-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.w3t-stat-card {
    background: var(--gradient-card);
    padding: 2.5rem 2rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 2rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(20px);
}

.w3t-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--gradient-primary);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.w3t-stat-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(190, 155, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(30%, -30%);
}

.w3t-stat-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--shadow-xl);
}

.w3t-stat-icon {
    width: 80px;
    height: 80px;
    background: var(--gradient-primary);
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: var(--shadow-md);
    position: relative;
    z-index: 2;
}

.w3t-stat-content {
    flex: 1;
    position: relative;
    z-index: 2;
}

.w3t-stat-content h3 {
    font-size: 3rem;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    line-height: 1;
}

.w3t-stat-content p {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Enhanced Profile Form */
.w3t-profile-form {
    background: var(--gradient-card);
    padding: 2.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    max-width: 700px;
    backdrop-filter: blur(20px);
}

.w3t-form-group {
    margin-bottom: 2rem;
}

.w3t-form-group label {
    display: block;
    margin-bottom: 0.75rem;
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.w3t-input-group {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.w3t-input-group input {
    flex: 1;
    padding: 1rem 1.25rem;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 0.9375rem;
    transition: all 0.3s ease;
    background: var(--bg-primary);
    box-shadow: var(--shadow-sm);
}

.w3t-input-group input:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 4px rgba(190, 155, 255, 0.15);
    transform: translateY(-1px);
}

.w3t-input-group input[readonly] {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: not-allowed;
}

.w3t-btn-edit {
    padding: 0.75rem 1.25rem;
    font-size: 0.8125rem;
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

.w3t-btn-edit:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.w3t-form-actions {
    display: flex;
    gap: 1.5rem;
    padding-top: 2rem;
    border-top: 2px solid var(--accent-light);
    margin-top: 2rem;
}

/* Enhanced Courses Grid */
.w3t-courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 2rem;
}

.w3t-course-card {
    background: var(--gradient-card);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(20px);
}

.w3t-course-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--shadow-xl);
}

.w3t-course-image {
    height: 200px;
    overflow: hidden;
    position: relative;
}

.w3t-course-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.w3t-course-card:hover .w3t-course-image img {
    transform: scale(1.1);
}

.w3t-course-content {
    padding: 2rem;
}

.w3t-course-content h4 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.w3t-course-level {
    color: var(--secondary-color);
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.w3t-course-progress {
    margin-bottom: 2rem;
}

.w3t-progress-bar {
    width: 100%;
    height: 8px;
    background: var(--accent-lighter);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.75rem;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.w3t-progress-fill {
    height: 100%;
    background: var(--gradient-primary);
    border-radius: 4px;
    transition: width 0.6s ease;
    box-shadow: var(--shadow-sm);
}

.w3t-course-progress span {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 600;
}

/* Enhanced Purchase Cards */
.w3t-purchases-grid {
    display: grid;
    gap: 2rem;
}

.w3t-purchase-card {
    background: var(--gradient-card);
    padding: 2.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    backdrop-filter: blur(20px);
    transition: all 0.3s ease;
}

.w3t-purchase-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.w3t-purchase-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--accent-light);
}

.w3t-purchase-header h4 {
    font-size: 1.25rem;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.w3t-purchase-date {
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
}

.w3t-purchase-course {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--accent-lighter);
    transition: all 0.2s ease;
}

.w3t-purchase-course:hover {
    background: var(--accent-lighter);
    margin: 0 -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: var(--border-radius-sm);
}

.w3t-purchase-course:last-child {
    border-bottom: none;
}

.w3t-course-name {
    font-weight: 600;
    color: var(--text-primary);
}

.w3t-purchase-total {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 3px solid var(--primary-color);
    text-align: right;
}

.w3t-purchase-total strong {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.5rem;
    font-weight: 800;
}

/* Enhanced Courses Redirect */
.w3t-courses-redirect {
    text-align: center;
    background: var(--gradient-card);
    padding: 4rem 3rem;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    backdrop-filter: blur(20px);
}

.w3t-courses-redirect p {
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
    font-size: 1.25rem;
    font-weight: 500;
}

/* Enhanced Loading and Empty States */
.w3t-loading {
    text-align: center;
    padding: 4rem;
    color: var(--text-secondary);
    font-style: italic;
    font-size: 1.125rem;
}

.w3t-no-content {
    text-align: center;
    padding: 4rem;
    color: var(--text-secondary);
    background: var(--gradient-card);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    backdrop-filter: blur(20px);
    font-size: 1.125rem;
}

/* Enhanced Error Styling */
.w3t-error {
    color: #d32f2f;
    background: linear-gradient(135deg, #ffebee 0%, #fce4ec 100%);
    padding: 1.5rem;
    border-radius: var(--border-radius-sm);
    border-left: 5px solid #d32f2f;
    box-shadow: var(--shadow-md);
    font-weight: 500;
}

/* Enhanced Responsive Design */
@media (max-width: 1024px) {
    .w3t-dashboard-sidebar {
        width: 280px;
    }
    
    .w3t-dashboard-main {
        margin-left: 280px;
    }
    
    .w3t-stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
    }
    
    .w3t-courses-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

@media (max-width: 768px) {
    .w3t-dashboard-container {
        flex-direction: column;
    }
    
    .w3t-dashboard-sidebar {
        width: 100%;
        height: auto;
        position: relative;
        max-height: 400px;
        overflow-y: auto;
    }
    
    .w3t-dashboard-nav ul {
        flex-direction: row;
        overflow-x: auto;
        justify-content: flex-start;
        gap: 0.5rem;
        padding: 0 1rem;
    }
    
    .w3t-dashboard-nav li {
        flex: none;
    }
    
    .w3t-nav-link {
        white-space: nowrap;
        min-width: 120px;
        justify-content: center;
        font-size: 0.8125rem;
        padding: 0.5rem 0.75rem;
    }
    
    .w3t-dashboard-main {
        margin-left: 0;
    }
    
    .w3t-dashboard-content {
        padding: 1rem;
    }
    
    .w3t-dashboard-toolbar {
        padding: 1rem;
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .w3t-profile-photo-section {
        justify-content: center;
    }
    
    .w3t-stats-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .w3t-courses-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .w3t-section-title {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .w3t-dashboard-header {
        padding: 1rem;
        margin: 0.25rem;
    }
    
    .w3t-user-avatar {
        width: 50px;
        height: 50px;
    }
    
    .w3t-avatar-initials {
        font-size: 1rem;
    }
    
    .w3t-user-info h2 {
        font-size: 1.125rem;
    }
    
    .w3t-stat-card {
        padding: 1.5rem;
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .w3t-stat-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
}

/* Course Cards - Match Courses Page Style */
.w3t-courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.w3t-course-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.w3t-course-card:hover {
    transform: translateY(-5px);
}

.w3t-course-image {
    position: relative;
    height: 180px;
    overflow: hidden;
}

.w3t-course-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.w3t-course-info-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.w3t-course-content {
    padding: 15px;
}

.w3t-course-content h3 {
    margin: 0 0 10px;
    font-size: 18px;
    color: #333;
}

.w3t-course-content p {
    color: #666;
    font-size: 14px;
    margin-bottom: 15px;
}

.w3t-course-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.w3t-course-level {
    background: #f0f0f0;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    text-transform: capitalize;
}

.w3t-course-price {
    font-weight: bold;
    color: #2d3748;
}

.w3t-course-actions {
    display: flex;
    justify-content: center;
}

/* Order Cards */
.w3t-order-card {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.w3t-order-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.w3t-order-id {
    font-weight: bold;
}

.w3t-order-total {
    color: #4CAF50;
    font-weight: bold;
}

.w3t-order-courses {
    margin-bottom: 15px;
}

.w3t-course-tag {
    display: inline-block;
    background: #f0f0f0;
    padding: 5px 10px;
    margin: 0 5px 5px 0;
    border-radius: 4px;
    font-size: 14px;
}

.w3t-order-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

/* Modal Styles */
.w3t-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    overflow-y: auto;
}

.w3t-modal-content {
    background: #fff;
    margin: 50px auto;
    max-width: 800px;
    border-radius: 8px;
    overflow: hidden;
}

.w3t-modal-header {
    padding: 20px;
    border-bottom: 1px solid #eee;
    position: relative;
}

.w3t-modal-title {
    margin: 0;
}

.w3t-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
}

.w3t-modal-tabs {
    display: flex;
    border-bottom: 1px solid #eee;
}

.w3t-tab-button {
    padding: 12px 20px;
    background: none;
    border: none;
    cursor: pointer;
    border-bottom: 3px solid transparent;
}

.w3t-tab-button.active {
    border-bottom-color: #4CAF50;
    font-weight: bold;
}

.w3t-modal-body {
    padding: 20px;
}

.w3t-tab-content {
    display: none;
}

.w3t-tab-content.active {
    display: block;
}

.w3t-detail-item {
    margin-bottom: 15px;
}

.w3t-detail-label {
    font-weight: bold;
    margin-bottom: 5px;
}

.w3t-detail-value {
    color: #555;
}

/* Accordion for Curriculum */
.w3t-accordion-item {
    margin-bottom: 10px;
    border: 1px solid #eee;
    border-radius: 4px;
}

.w3t-accordion-header {
    padding: 10px 15px;
    background: #f9f9f9;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.w3t-accordion-content {
    padding: 15px;
    display: none;
}

.w3t-accordion-item.active .w3t-accordion-content {
    display: block;
}






/* Course Info Icon Styling */
.w3t-course-info-icon {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #470170, #be9bff);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    font-family: serif;
    box-shadow: 0 4px 12px rgba(71, 1, 112, 0.3);
    transition: all 0.3s ease;
    z-index: 10;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.w3t-course-info-icon:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(71, 1, 112, 0.4);
    background: linear-gradient(135deg, #be9bff, #470170);
}

.w3t-course-info-icon:active {
    transform: scale(0.95);
}

/* Course Details Modal */
.w3t-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(71, 1, 112, 0.8);
    backdrop-filter: blur(8px);
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.w3t-modal-content {
    background: linear-gradient(145deg, #ffffff, #f8f9fa);
    margin: 2% auto;
    padding: 0;
    border: none;
    width: 90%;
    max-width: 900px;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(71, 1, 112, 0.3);
    position: relative;
    animation: slideIn 0.4s ease;
    overflow: hidden;
}

@keyframes slideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.w3t-modal-close {
    position: absolute;
    top: 20px;
    right: 25px;
    color: #470170;
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    background: rgba(190, 155, 255, 0.1);
}

.w3t-modal-close:hover {
    background: linear-gradient(135deg, #470170, #be9bff);
    color: white;
    transform: rotate(90deg);
}

/* Modal Header */
.w3t-modal-header {
    background: linear-gradient(135deg, #470170, #be9bff);
    color: white;
    padding: 30px;
    position: relative;
}

.w3t-modal-header h2 {
    margin: 0 0 20px 0;
    font-size: 28px;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Modal Tabs */
.w3t-modal-tabs {
    display: flex;
    gap: 8px;
    margin-top: 20px;
}

.w3t-tab-btn {
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.w3t-tab-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

.w3t-tab-btn.active {
    background: white;
    color: #470170;
    border-color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Modal Body */
.w3t-modal-body {
    padding: 30px;
    max-height: 60vh;
    overflow-y: auto;
}

.w3t-modal-body::-webkit-scrollbar {
    width: 8px;
}

.w3t-modal-body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.w3t-modal-body::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #470170, #be9bff);
    border-radius: 4px;
}

.w3t-modal-body::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #be9bff, #470170);
}

/* Tab Content */
.w3t-tab-content {
    display: none;
    animation: fadeInUp 0.3s ease;
}

.w3t-tab-content.active {
    display: block;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Course Image in Modal */
.w3t-course-image img {
    width: 100%;
    max-height: 250px;
    object-fit: cover;
    border-radius: 12px;
    
    box-shadow: 0 8px 24px rgba(71, 1, 112, 0.2);
}

/* Course Description */
.w3t-course-description {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 20px;
    text-align: justify;
}

/* Course Meta */
.w3t-course-meta {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-top: 20px;
}

.w3t-difficulty {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.w3t-difficulty.beginner {
    background: linear-gradient(135deg, #4ade80, #22c55e);
    color: white;
}

.w3t-difficulty.intermediate {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.w3t-difficulty.advanced {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

.w3t-price {
    padding: 8px 16px;
    background: linear-gradient(135deg, #470170, #be9bff);
    color: white;
    border-radius: 20px;
    font-weight: 700;
    font-size: 16px;
}

/* Accordion Styling */
.w3t-accordion {
    margin-top: 10px;
}

.w3t-accordion-item {
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(71, 1, 112, 0.1);
}

.w3t-accordion-item:hover {
    border-color: #be9bff;
    box-shadow: 0 4px 16px rgba(71, 1, 112, 0.15);
}

.w3t-accordion-item.active {
    border-color: #470170;
    box-shadow: 0 8px 24px rgba(71, 1, 112, 0.2);
}

.w3t-accordion-header {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    padding: 18px 24px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: #374151;
    transition: all 0.3s ease;
}

.w3t-accordion-item:hover .w3t-accordion-header {
    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
    color: #470170;
}

.w3t-accordion-item.active .w3t-accordion-header {
    background: linear-gradient(135deg, #470170, #be9bff);
    color: white;
}

.w3t-accordion-toggle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(71, 1, 112, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.w3t-accordion-item.active .w3t-accordion-toggle {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(45deg);
}

.w3t-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: white;
}

.w3t-accordion-item.active .w3t-accordion-content {
    max-height: 200px;
    padding: 20px 24px;
    border-top: 1px solid rgba(71, 1, 112, 0.1);
}

.w3t-accordion-content p {
    margin: 0;
    color: #6b7280;
    line-height: 1.6;
    font-size: 14px;
}

/* Additional Info Section */
.w3t-additional-info h3 {
    color: #470170;
    font-size: 20px;
    font-weight: 700;
    margin: 30px 0 15px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #be9bff;
    position: relative;
}

.w3t-additional-info h3:first-child {
    margin-top: 0;
}

.w3t-additional-info h3::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 40px;
    height: 2px;
    background: #470170;
}

.w3t-additional-info div {
    background: #f8fafc;
    padding: 16px;
    border-radius: 8px;
    border-left: 4px solid #be9bff;
    margin-bottom: 20px;
    color: #374151;
    line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 768px) {
    .w3t-modal-content {
        width: 95%;
        margin: 5% auto;
    }
    
    .w3t-modal-header {
        padding: 20px;
    }
    
    .w3t-modal-header h2 {
        font-size: 24px;
    }
    
    .w3t-modal-body {
        padding: 20px;
    }
    
    .w3t-modal-tabs {
        /* flex-wrap: wrap; */
        gap: 6px;
    }
    
    .w3t-tab-btn {
        padding: 10px 16px;
        font-size: 13px;
    }
    
    .w3t-accordion-header {
        padding: 14px 16px;
        font-size: 14px;
    }
    
    .w3t-accordion-content {
        padding: 16px !important;
    }
}

/*Course Video Page*/
.w3t-course-card { display: grid; gap: .75rem; }
.w3t-course-content { display: grid; gap: .5rem; }
.w3t-card-actions { margin-top: .5rem; }
.w3t-btn-details { display: inline-block; padding: .5rem .9rem; border-radius: 10px; font-weight: 600; }

/* Layout */
.w3t-course-detail { max-width: 1100px; margin: 0 auto; padding: 1.25rem; }
.w3t-course-hero { display: grid; grid-template-columns: 280px 1fr; gap: 1rem; align-items: center; margin-bottom: 1.25rem; }
.w3t-hero-img { width: 100%; border-radius: 14px; display:block; }
.w3t-badges { display:flex; gap:.5rem; margin:.5rem 0; flex-wrap:wrap; }
.w3t-chip { background:#ededff; padding:.25rem .6rem; border-radius:999px; font-weight:600; font-size:.85rem; }
.w3t-chip-muted { background:#f2f2f2; }

.w3t-two-col { display:grid; 
    grid-template-columns: 1fr; 
    gap: 1.25rem; }
.w3t-col-main { min-width: 0; }

/* .w3t-col-aside { position: sticky; top: 90px; height: fit-content; background-color: #22c55e; } */

.w3t-section { background:#fff; border-radius:14px; padding:1rem 1.1rem; box-shadow:0 1px 6px rgba(0,0,0,.06); margin-bottom:1rem; }
.w3t-section h2 { margin:0 0 .5rem; font-size:1.25rem; }
.w3t-body p { margin:.4rem 0; line-height:1.55; }

.w3t-bullets { padding-left: 1.25rem; margin: 0; }
.w3t-bullets li { margin:.25rem 0; }

.w3t-accordion .w3t-acc { border:1px solid #eee; border-radius:10px; padding:.6rem .8rem; margin:.5rem 0; }
.w3t-accordion summary { cursor:pointer; font-weight:600; }

/* .w3t-aside-card { background:#fff; border-radius:14px; padding:1rem; box-shadow:0 1px 6px rgba(0,0,0,.06); }
.w3t-price-row { display:flex; 
    align-items:baseline; 
    gap:.5rem; margin-bottom:.75rem; }
.w3t-price { font-size:1.6rem; font-weight:800; }
.w3t-strike { text-decoration: line-through; opacity:.6; }

.w3t-quickfacts { list-style:none; padding:0; margin:0 0 1rem; display:grid; gap:.35rem; } */

/* Course cards small tweaks */
.w3t-card-actions { display:flex; gap:.5rem; }
.w3t-btn { cursor:pointer; }

/* Course detail polish */
.w3t-title{font-size:2.4rem;line-height:1.15;font-weight:800;color:#1C1243;margin:.2rem 0 .4rem}
.w3t-title h1{
    text-align: left !important;
}
.w3t-badges{display:flex;gap:.5rem;flex-wrap:wrap}
/* .w3t-chip{background:#eef; color:#4b33b5} */
.w3t-chip-muted{background:#f5f5f7; color:#555}
.w3t-aside-card .w3t-btn-primary{display:inline-flex;align-items:center;gap:.5rem}

@media (max-width: 1100px){
  .w3t-two-col{grid-template-columns:1fr}
  /* .w3t-col-aside{position:static} */
}



/* .w3t-course-image img{display:block;width:100%;border-radius:12px}
.w3t-card-actions{margin-top:.5rem;display:flex;gap:.5rem}
.w3t-btn-details{
  display:inline-block;padding:.5rem .9rem;border-radius:10px;
  font-weight:600;background:#5B2AE6;color:#fff;text-decoration:none
}
.w3t-btn-details:hover{opacity:.92} */





/* Shared button styles */
.w3t-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.55rem .95rem;
  border-radius:12px;
  font-weight:700;
  line-height:1;
  text-decoration:none;
  transition:all .2s ease;
  cursor:pointer;
}

/* Variants */
.w3t-btn-primary{
  background:#6d28d9; /* purple */
  color:#fff;
  box-shadow:0 6px 14px rgba(109,40,217,.25);
}
.w3t-btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 18px rgba(109,40,217,.32);
}

.w3t-btn-outline{
  background:#fff;
  border:1px solid #e5e7eb;
  color:#111827;
}
.w3t-btn-outline:hover{
  border-color:#6d28d9;
  color:#6d28d9;
  box-shadow:0 8px 16px rgba(109,40,217,.12);
}

/* Details button (inherits outline look) */
.w3t-btn-details{
    display:inline-block;
    background:#5B2AE6;
    color:#fff;
    border-radius:10px;
    padding:.5rem .9rem;
    font-weight:600;
    text-decoration:none;
 }

/* Actions row spacing */
.w3t-card-actions{ margin-top:.6rem; }


.w3t-course-image{ position:relative; }
.w3t-course-image .w3t-btn-details{
  position:absolute; left:12px; bottom:12px;
  backdrop-filter: blur(6px);
}


/* ————— Course Detail Layout & Polish ————— */

/* Container */
.w3t-course-detail{max-width:1100px;margin:0 auto;padding:24px 16px}
.w3t-course-detail *{box-sizing:border-box}

/* HERO */
.w3t-course-hero{
  display:grid;
  grid-template-columns: clamp(220px, 28vw, 320px) 1fr;
  gap:20px;
  align-items:center;
  margin-bottom:18px;
}
.w3t-hero-img{
  width:100%;
  aspect-ratio: 16 / 10;
  object-fit:cover;
  border-radius:14px;
  display:block;
}
.w3t-hero-text{
	min-width:0;
	margin:auto;
}

/* Title that won’t overflow on mobile */
.w3t-title{
  font-weight:800;
  letter-spacing:-.015em;
  line-height:1.2;
  /* scales down on mobile; never overflows */
  font-size:clamp(1.55rem, 1.15rem + 2.2vw, 2.4rem);
  overflow-wrap:anywhere;
  word-break:break-word;
  hyphens:auto;
  margin:.2rem 0 .5rem;
  color:#3e9e18;
}

/* Chips */
.w3t-badges{display:flex;gap:.5rem;flex-wrap:wrap;margin:.5rem 0 0}
.w3t-chip{background:#eef;padding:.3rem .65rem;border-radius:999px;font-weight:600;font-size:.85rem;color:#4b33b5; margin:auto}
.w3t-chip-muted{background:#f5f5f7;color:#555}

/* Two-column body */
.w3t-two-col{display:grid;grid-template-columns:1fr 320px;gap:20px}
.w3t-col-main{min-width:0}
.w3t-col-aside{position:sticky;top:84px;height:fit-content}

/* Cards */
.w3t-section,
.w3t-aside-card{
  background:#fff;
  border-radius:14px;
  box-shadow:0 1px 6px rgba(0,0,0,.06);
  padding:16px 18px;
}
.w3t-section{margin-bottom:16px}
.w3t-section h2{margin:0 0 .6rem;font-size:1.25rem}
.w3t-body p{margin:.45rem 0;line-height:1.6}

/* Lists generated from text areas */
.w3t-bullets{padding-left:1.25rem;margin:.25rem 0}
.w3t-bullets li{margin:.25rem 0}

/* Accordion */
.w3t-accordion .w3t-acc{border:1px solid #eee;border-radius:10px;padding:.6rem .8rem;margin:.5rem 0}
.w3t-accordion summary{cursor:pointer;font-weight:600}

/* Aside pricing */
.w3t-price-row{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.8rem}
.w3t-price{font-size:1.6rem;font-weight:800}
.w3t-strike{text-decoration:line-through;opacity:.6}
.w3t-quickfacts{list-style:none;padding:0;margin:0 0 1rem;display:grid;gap:.35rem}

/* Buttons */
.w3t-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.55rem .95rem;border-radius:12px;font-weight:700;line-height:1;
  text-decoration:none;transition:all .18s ease;cursor:pointer
}
.w3t-btn-primary{background:#6d28d9;color:#fff;box-shadow:0 6px 14px rgba(109,40,217,.25)}
.w3t-btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 18px rgba(109,40,217,.32)}
.w3t-btn-outline{background:#fff;border:1px solid #e5e7eb;color:#111827}
.w3t-btn-outline:hover{border-color:#6d28d9;color:#6d28d9;box-shadow:0 8px 16px rgba(109,40,217,.12)}

/* Course card “Details” in dashboard list */
.w3t-card-actions{margin-top:.6rem;display:flex;gap:.5rem}
.w3t-btn-details{display:inline-block;background:#5B2AE6;color:#fff;border-radius:10px;padding:.5rem .9rem;font-weight:600;text-decoration:none}
.w3t-btn-details:hover{opacity:.92}
/* Tabs for the content */
.w3t-tab-nav{display:flex;gap:1.25rem;list-style:none;margin:1rem 0 .75rem;padding:0;border-bottom:1px solid #e5e7eb}
.w3t-tab-nav li{cursor:pointer;padding:.75rem .25rem;font-weight:600;color:#334155;position:relative;white-space:nowrap}
.w3t-tab-nav li.active{color:#5933b5;font-weight:700}
.w3t-tab-nav li.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#5933b5}
/* ========== Responsive enhancements ========== */
@media (max-width: 768px){
  .w3t-tab-nav{
    gap:.5rem;                 /* tighter gaps */
    flex-wrap:nowrap;          /* keep one line */
    overflow:hidden;           /* no overflow outside parent */
  }
  .w3t-tab-nav li{
    flex:1 1 0;                /* allow each tab to compress evenly */
    min-width:0;               /* allow flex items to shrink past content width */
    text-align:center;
    padding:.55rem .2rem;      /* smaller padding */
    font-size:clamp(12px, 2.8vw, 14px); /* responsive shrink */
    white-space:nowrap;        /* stay on one line */
    overflow:hidden;           /* enable ellipsis when squeezed */
    text-overflow:ellipsis;
  }
  .w3t-tab-nav li.active::after{
    bottom:-1px; height:2px;
  }
}

@media (max-width: 480px){
  .w3t-tab-nav{ gap:.35rem; }
  .w3t-tab-nav li{
    padding:.5rem .15rem;
    font-size:clamp(11px, 3.2vw, 13px);
  }
}

/* Optional: better keyboard focus without changing layout */
.w3t-tab-nav li:focus-visible{
  outline:2px solid #5933b5;
  outline-offset:2px;
  border-radius:6px;
}
@media (min-width: 990px) and (max-width: 1200px) {
  .w3t-tab-nav {
    gap: .75rem;              /* reduce gap a little */
  }
  .w3t-tab-nav li {
    flex: 1 1 0;              /* allow squeezing */
    min-width: 0;
    text-align: center;
    padding: .6rem .25rem;    /* slightly smaller padding */
    font-size: 0.9rem;        /* reduce font size */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;  /* show … if text too long */
  }
}
/* details layout */
.w3t-course-detail{max-width:1100px;margin:0 auto;padding:1.25rem}
.w3t-course-hero{display:grid;grid-template-columns:280px 1fr;gap:1rem;align-items:center;margin-bottom:1.25rem}
.w3t-hero-img{width:100%;border-radius:14px;display:block}
.w3t-title{font-size:2.25rem;line-height:1.15;font-weight:800;color:#1C1243;margin:.2rem 0 .4rem;word-break:break-word}
.w3t-badges{display:flex;gap:.5rem;flex-wrap:wrap}
.w3t-chip{background:#eef;color:#4b33b5;padding:.25rem .6rem;border-radius:999px;font-weight:600;font-size:.85rem}

.w3t-two-col{display:grid;grid-template-columns:1fr 320px;gap:1.25rem}
.w3t-section{background:#fff;border-radius:14px;padding:1rem 1.1rem;box-shadow:0 1px 6px rgba(0,0,0,.06);margin-bottom:1rem}
.w3t-section h2{margin:0 0 .5rem;font-size:1.25rem}
.w3t-body p{margin:.4rem 0;line-height:1.55}
.w3t-bullets{padding-left:1.25rem;margin:0}
.w3t-bullets li{margin:.25rem 0}

.w3t-accordion .w3t-acc{border:1px solid #eee;border-radius:10px;padding:.6rem .8rem;margin:.5rem 0}
.w3t-accordion summary{cursor:pointer;font-weight:600}
.w3t-curr-list{list-style:none;margin:.5rem 0 0;padding:0;display:grid;gap:.4rem}
.w3t-tag{display:inline-block;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:999px;font-size:.75rem;padding:.15rem .5rem;margin-right:.4rem}
.w3t-curr-title{font-weight:600}
.w3t-curr-summary{margin-top:.3rem}

.w3t-aside-card{background:#fff;border-radius:14px;padding:1rem;box-shadow:0 1px 6px rgba(0,0,0,.06)}
.w3t-price-row{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.75rem}
.w3t-price{font-size:1.6rem;font-weight:800}
.w3t-strike{text-decoration:line-through;opacity:.6}
.w3t-quickfacts{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.35rem}

@media (max-width:1024px){
  .w3t-two-col{grid-template-columns:1fr}
  .w3t-col-aside{position:static}
}
@media (max-width:640px){
  .w3t-course-hero{grid-template-columns:1fr}
  .w3t-title{font-size:1.6rem}
}





/* ==========================================================
   W3T Course Detail · Pro Skin v3 (reference-styled)
   (PHP untouched; scoped to .w3t-course-detail)
   ========================================================== */

.w3t-course-detail{
  /* tokens */
  --ink:#14122e; --ink2:#60637a;
  --line:#e7e9f2; --line2:#dfe3ee;
  --surface:#fff; --bg:#f7f8fc;
  --primary:#4b33b5; --primary2:#845ef7;
  --shadow:0 18px 36px rgba(24,22,60,.08);

  color:var(--ink);
  max-width:1200px;
  margin:24px auto;
  padding:18px;
  border-radius:22px;
  border:1px solid var(--line);
  background:
    radial-gradient(70% 50% at 0% 0%, rgba(132,94,247,.05), transparent 48%),
    radial-gradient(60% 40% at 100% 0%, rgba(75,51,181,.05), transparent 44%),
    var(--surface);
  box-shadow:var(--shadow);
  position:relative;
}
.w3t-course-detail::after{
  content:""; position:absolute; inset:8px; border:1px solid var(--line2);
  border-radius:18px; pointer-events:none; opacity:.75;
}

/* ============ Layout: LEFT sticky aside ============ */
/* .w3t-course-detail .w3t-two-col{
  display:grid;
  grid-template-columns:360px minmax(0,1fr);
  grid-template-areas:"aside main";
  gap:18px; align-items:start;
}
.w3t-course-detail .w3t-col-aside{ grid-area:aside; position:sticky; top:92px; height:fit-content; }
.w3t-course-detail .w3t-col-main{  grid-area:main;  min-width:0; }
@media (max-width:1100px){
  .w3t-course-detail{ padding:12px; border-radius:18px; }
  .w3t-course-detail .w3t-two-col{ grid-template-columns:1fr; grid-template-areas:"aside" "main"; }
  .w3t-course-detail .w3t-col-aside{ position:static; }
} */

/* ============ Hero ============ */
.w3t-course-detail .w3t-course-hero{
  display:grid; grid-template-columns:320px 1fr; gap:16px; align-items:center; margin-bottom:8px;
}
@media (max-width:900px){ .w3t-course-detail .w3t-course-hero{ grid-template-columns:1fr; } }

.w3t-course-detail .w3t-hero-img{
  width:100%; aspect-ratio:16/10; object-fit:cover;
  border-radius:16px; box-shadow:0 12px 24px rgba(0,0,0,.09);
}
.w3t-course-detail .w3t-title{
  font-weight:850; letter-spacing:-.015em; line-height:1.16;
  font-size:clamp(1.7rem,1.15rem + 2.6vw,2.7rem);
  margin:0 0 .35rem;
}
.w3t-course-detail .w3t-badges{ display:flex; gap:.5rem; flex-wrap:wrap; margin:.4rem 0 .1rem; }
.w3t-course-detail .w3t-chip{
  background:#eef0ff; color:var(--primary);
  padding:.38rem .7rem; border-radius:999px; font-weight:700; font-size:.86rem;
}
.w3t-course-detail .w3t-chip-muted{ background:#f5f6fb; color:#59607a; }

/* ============ Section cards ============ */
.w3t-course-detail .w3t-section{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px;
  box-shadow:0 10px 22px rgba(0,0,0,.06);
  margin-bottom:14px;
}
.w3t-course-detail .w3t-section h2{
  margin:0 0 .55rem; font-size:1.08rem; font-weight:800; letter-spacing:.2px;
  display:flex; align-items:center; gap:.6rem;
}
.w3t-course-detail .w3t-section h2::before{
  content:""; width:10px; height:10px; border-radius:3px;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  box-shadow:0 0 0 3px rgba(111,82,255,.16);
}
.w3t-course-detail .w3t-body p{ margin:.45rem 0; line-height:1.68; color:var(--ink2); }

/* Video */
.w3t-course-detail .w3t-video-wrap{
  position:relative; padding-top:56.25%; height:0; overflow:hidden;
  border-radius:16px; background:#000; box-shadow:0 16px 30px rgba(0,0,0,.12);
}
.w3t-course-detail .w3t-video-wrap iframe,
.w3t-course-detail .w3t-video-wrap video{
  position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:inherit;
}

/* ============ Lists (with check icons) ============ */
.w3t-course-detail .w3t-bullets{ list-style:none; padding:0; margin:.2rem 0 0; }
.w3t-course-detail .w3t-bullets li{
  position:relative; padding:.18rem 0 .18rem 26px; color:var(--ink2);
}
.w3t-course-detail .w3t-bullets li::before{
  content:""; position:absolute; left:0; top:.44rem; width:16px; height:16px;
  background:var(--primary);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 6.709a1 1 0 0 1 0 1.414l-9 9a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L10.5 14.086l8.293-8.293a1 1 0 0 1 1.492.916Z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 6.709a1 1 0 0 1 0 1.414l-9 9a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L10.5 14.086l8.293-8.293a1 1 0 0 1 1.492.916Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ============ Curriculum ============ */
/* .w3t-course-detail .w3t-accordion{ display:grid; gap:.6rem; }
.w3t-course-detail .w3t-acc{ background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.w3t-course-detail .w3t-acc > summary{
  cursor:pointer; list-style:none; padding:.95rem 1rem; font-weight:750; position:relative;
}
.w3t-course-detail .w3t-acc > summary::-webkit-details-marker{ display:none; }
.w3t-course-detail .w3t-acc > summary::after{
  content:""; width:.6rem; height:.6rem; border:2px solid currentColor;
  border-left-color:transparent; border-top-color:transparent;
  transform:rotate(45deg); position:absolute; right:1rem; top:1.25rem; transition:transform .2s ease;
}
.w3t-course-detail details[open] > summary::after{ transform:rotate(-135deg); }
.w3t-course-detail .w3t-acc .w3t-body{ padding:0 1rem .8rem; color:var(--ink2); }
.w3t-course-detail .w3t-curr-list{ list-style:none; margin:0; padding:.2rem 1rem 1rem; display:grid; gap:.55rem; }
.w3t-course-detail .w3t-curr-list li{
  padding:.65rem .75rem; border:1px dashed var(--line); background:#fafbff; border-radius:10px;
}
.w3t-course-detail .w3t-tag{
  font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  color:var(--primary); background:#eef0ff; padding:.22rem .5rem; border-radius:999px;
}
.w3t-course-detail .w3t-curr-title{ font-weight:750; } */


/* Accordion wrapper */
.w3t-course-detail .w3t-accordion {
  display: grid;
  gap: 1rem;
}

/* Each accordion card */
.w3t-course-detail .w3t-acc {
  background: #fff;
  border: 1px solid #e5e7eb; /* soft gray */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.w3t-course-detail .w3t-acc:hover {
  border-color: #d1d5db;
  box-shadow: 0 4px 10px rgba(0,0,0,.06);
}
/* 1) Make the card and its children able to shrink */
.w3t-col-right .w3t-curr-list,
.w3t-col-right .w3t-curr-item,
.w3t-col-right .w3t-curr-item > *,
.w3t-col-right .w3t-curr-head,
.w3t-col-right .w3t-curr-title,
.w3t-col-right .w3t-curr-body,
.w3t-col-right .w3t-curr-meta {
  max-width: 100%;
  min-width: 0;              /* critical when a parent is flex/grid */
  box-sizing: border-box;
}

/* 2) Break long words/URLs instead of overflowing */
.w3t-col-right .w3t-curr-body,
.w3t-col-right .w3t-curr-meta {
  overflow-wrap: anywhere;   /* modern; breaks super-long tokens */
  word-break: break-word;
}

/* 3) Keep links from pushing the card wide */
.w3t-col-right .w3t-curr-meta a {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;   /* or remove these two lines if you prefer wrapping */
  white-space: nowrap;
}

/* If you prefer multi-line wrapping for links, use this instead: */

.w3t-col-right .w3t-curr-meta a {
  white-space: normal;
  word-break: break-all;
}


/* 4) Images should never overflow */
.w3t-col-right .w3t-curr-media img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 5) Safety net: hide any accidental horizontal overflow at the list level */
.w3t-col-right .w3t-curr-list {
  overflow-x: hidden;
}
/* Base link in meta stays subtle */
.w3t-col-right .w3t-curr-meta .w3t-link{
  text-decoration: none;
  font-weight: 600;
  color: #2563eb;
}
/* watch video  */
/* Video links -> compact pill button with play icon */
.w3t-col-right .w3t-curr-meta .w3t-link[href*="youtube"],
.w3t-col-right .w3t-curr-meta .w3t-link[href*="youtu.be"],
.w3t-col-right .w3t-curr-meta .w3t-link[href*="vimeo"],
.w3t-col-right .w3t-curr-meta .w3t-link[href$=".mp4"],
.w3t-col-right .w3t-curr-meta .w3t-link[href$=".webm"],
.w3t-col-right .w3t-curr-meta .w3t-link[href$=".mov"]{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .65rem;
  border-radius: 999px;
  background: #eef2ff;            /* light indigo */
  color: #4338ca;                 /* indigo-700 */
  border: 1px solid #e0e7ff;
  line-height: 1;
  white-space: nowrap;
  transition: background .2s ease, border-color .2s ease, transform .06s ease;
}

/* Play icon */
.w3t-col-right .w3t-curr-meta .w3t-link[href*="youtube"]::before,
.w3t-col-right .w3t-curr-meta .w3t-link[href*="youtu.be"]::before,
.w3t-col-right .w3t-curr-meta .w3t-link[href*="vimeo"]::before,
.w3t-col-right .w3t-curr-meta .w3t-link[href$=".mp4"]::before,
.w3t-col-right .w3t-curr-meta .w3t-link[href$=".webm"]::before,
.w3t-col-right .w3t-curr-meta .w3t-link[href$=".mov"]::before{
  content: "";
  width: 16px; height: 16px;
  display: inline-block;
  background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='%234338ca' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 5v14l11-7-11-7z'/%3E%3C/svg%3E") center/16px 16px no-repeat;
}

/* Hover/active/focus states */
.w3t-col-right .w3t-curr-meta .w3t-link[href*="youtube"]:hover,
.w3t-col-right .w3t-curr-meta .w3t-link[href*="youtu.be"]:hover,
.w3t-col-right .w3t-curr-meta .w3t-link[href*="vimeo"]:hover,
.w3t-col-right .w3t-curr-meta .w3t-link[href$=".mp4"]:hover,
.w3t-col-right .w3t-curr-meta .w3t-link[href$=".webm"]:hover,
.w3t-col-right .w3t-curr-meta .w3t-link[href$=".mov"]:hover{
  background: #e0e7ff;
  border-color: #c7d2fe;
  transform: translateY(-1px);
}
.w3t-col-right .w3t-curr-meta .w3t-link[href*="youtube"]:active,
.w3t-col-right .w3t-curr-meta .w3t-link[href*="youtu.be"]:active,
.w3t-col-right .w3t-curr-meta .w3t-link[href*="vimeo"]:active,
.w3t-col-right .w3t-curr-meta .w3t-link[href$=".mp4"]:active,
.w3t-col-right .w3t-curr-meta .w3t-link[href$=".webm"]:active,
.w3t-col-right .w3t-curr-meta .w3t-link[href$=".mov"]:active{
  transform: translateY(0);
}
.w3t-col-right .w3t-curr-meta .w3t-link[href*="youtube"]:focus-visible,
.w3t-col-right .w3t-curr-meta .w3t-link[href*="youtu.be"]:focus-visible,
.w3t-col-right .w3t-curr-meta .w3t-link[href*="vimeo"]:focus-visible,
.w3t-col-right .w3t-curr-meta .w3t-link[href$=".mp4"]:focus-visible,
.w3t-col-right .w3t-curr-meta .w3t-link[href$=".webm"]:focus-visible,
.w3t-col-right .w3t-curr-meta .w3t-link[href$=".mov"]:focus-visible{
  outline: 2px solid #818cf8;      /* indigo-400 */
  outline-offset: 2px;
  border-radius: 999px;
}

/* Keep it from overflowing long URLs/titles */
.w3t-col-right .w3t-curr-meta .w3t-link{
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Start Quiz – lesson-like purple pill */
.w3t-col-right .w3t-type-quiz .button{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.35rem .75rem;
  border-radius:999px;
  font-size:.85rem; font-weight:600; line-height:1.2;
  background:#ede9fe;                 /* soft purple */
  border:1px solid #c4b5fd;
  margin-top: 15px;
  color:#5933b5;
  transition: background .2s, border-color .2s, color .2s, transform .06s;
  max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.w3t-col-right .w3t-type-quiz .button::before{
  content:""; width:12px; height:12px; display:inline-block;
  background:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='%235933b5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 5v14l11-7-11-7z'/%3E%3C/svg%3E") center/12px 12px no-repeat;
}
.w3t-col-right .w3t-type-quiz .button:hover:not([disabled]){
  background:#ddd6fe; border-color:#a78bfa; color:#4c1d95; transform:translateY(-1px);
}
.w3t-col-right .w3t-type-quiz .button:active:not([disabled]){
  background:#c4b5fd; border-color:#8b5cf6; color:#fff; transform:translateY(0);
}

/* Disabled state – keep pretty but clearly disabled */
.w3t-col-right .w3t-type-quiz .button[disabled]{
  background:#f3f4f6;           /* neutral soft bg */
  border:1px solid #e5e7eb;
  color:#9ca3af;
  opacity:1;                    /* keep readable */
  cursor:not-allowed;
  transform:none;
}
.w3t-col-right .w3t-type-quiz .button[disabled]::before{
  background:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='%239ca3af' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 5v14l11-7-11-7z'/%3E%3C/svg%3E") center/12px 12px no-repeat;
}

/* ===== ASSIGNMENT CARD ===== */
.w3t-assignment-card{
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid #ddd6fe;     /* light purple border */
  border-radius: 10px;
  background: #f9f8ff;           /* soft purple background */
  box-shadow: 0 2px 6px rgba(89,51,181,.08);
}

/* Submission status */
.w3t-assignment-card .w3t-submission-status{
  font-size: 0.9rem;
  color: #374151;
  line-height: 1.5;
}
.w3t-assignment-card .w3t-submission-status p{
  margin: .35rem 0;
}
.w3t-assignment-card .w3t-submission-status strong{
  color: #5933b5;
}

/* File link */
.w3t-assignment-card .w3t-submission-status a{
  color: #5933b5;
  font-weight: 600;
  text-decoration: none;
}
.w3t-assignment-card .w3t-submission-status a:hover{
  text-decoration: underline;
}

/* ===== ASSIGNMENT UPLOAD FORM ===== */
.w3t-assignment-upload{
  display: grid;
  gap: .6rem;
}
.w3t-assignment-upload label{
    display: none;
  font-size: .85rem;
  font-weight: 600;
  color: #4b5563;
}
.w3t-assignment-upload input[type="file"] {
  display: block;
  width: 100%;          /* squeeze into parent */
  max-width: 100%;      /* no overflow */
  box-sizing: border-box;
  
  padding: .4rem;
  border-radius: 6px;
  font-size: .85rem;
  background: #fff;
  color: #374151;
  cursor: pointer;
  overflow: hidden;     /* avoid spilling */
}

/* .w3t-assignment-upload input[type="file"]:hover{
  border-color: #a78bfa;
} */

/* Submit button (lesson/quiz style, purple pill) */
.w3t-assignment-upload .button.button-primary{
  align-self: start;
  display: inline-flex; align-items: center; justify-content: center;
  padding: .4rem .85rem;
  border-radius: 999px;
  font-size: .85rem; font-weight: 600;
  background: #ede9fe;
  border: 1px solid #c4b5fd;
  color: #5933b5;
  transition: all .2s ease;
}
.w3t-assignment-upload .button.button-primary:hover{
  background:#ddd6fe;
  border-color:#a78bfa;
  color:#4c1d95;
}
.w3t-assignment-upload .button.button-primary:active{
  background:#c4b5fd;
  border-color:#8b5cf6;
  color:#fff;
}

/* Upload note (small info/error text) */
.w3t-assignment-upload .w3t-upload-note{

  font-size:.8rem;
  color:#6b7280;
}
/* Ensure file input respects parent width */
.w3t-assignment-upload input[type="file"] {
  display: block;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  color: transparent;   /* hide filename text */
}

/* Hide default "No file chosen" text */
.w3t-assignment-upload input[type="file"]::-ms-value {
  display: none;   /* old IE/Edge */
}


/* Accordion header */
.w3t-course-detail .w3t-acc > summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 1.25rem;
  font-weight: 700;
  font-size: 1rem;
  color: #111827; /* slate-900 */
  background: #f9fafb; /* light background */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.w3t-course-detail .w3t-acc > summary::-webkit-details-marker {
  display: none;
}

/* Chevron */
.w3t-course-detail .w3t-acc > summary::after {
  content: "";
  width: .6rem;
  height: .6rem;
  border: 2px solid currentColor;
  border-left-color: transparent;
  border-top-color: transparent;
  transform: rotate(45deg);
  position: absolute;
  right: 1.25rem;
  top: 1.25rem;
  transition: transform .2s ease;
}
.w3t-course-detail details[open] > summary::after {
  transform: rotate(-135deg);
}


/* Accordion body */
.w3t-course-detail .w3t-acc .w3t-body {
  padding: 0.75rem 1.25rem 1rem;
  color: #374151; /* slate-700 */
  font-size: .95rem;
  line-height: 1.5;
}

/* Curriculum list */
.w3t-course-detail .w3t-curr-list {
  list-style: none;
  margin: 0;
  padding: .75rem 1.25rem 1.25rem;
  display: grid;
  gap: .75rem;
}

/* Each curriculum item card */
.w3t-course-detail .w3t-curr-list li {
  padding: .9rem 1rem;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  border-radius: 10px;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.w3t-course-detail .w3t-curr-list li:hover {
  background: #fff;
  border-color: #d1d5db;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
}

/* Tag / pill */
.w3t-course-detail .w3t-tag {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #4338ca; /* indigo-700 */
  background: #eef2ff;
  padding: .25rem .6rem;
  border-radius: 999px;
  border: 1px solid #e0e7ff;
}

/* Item title */
.w3t-course-detail .w3t-curr-title {
  font-weight: 700;
  font-size: .95rem;
  color: #111827;
}
/* ==== Feedback container ==== */
.w3t-topic {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f9fafb;
}

/* Summary row (avg + total) */
.w3t-topic-feedback-summary {
  font-size: .9rem;
  font-weight: 600;
  color: #374151; /* slate-700 */
  margin-bottom: .6rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.w3t-topic-feedback-summary .w3t-fb-avg {
  font-size: 1rem;
  font-weight: 700;
  color: #f59e0b; /* amber */
}
.w3t-topic-feedback-summary .w3t-fb-total {
  font-size: .85rem;
  color: #6b7280; /* slate-500 */
}


/* ============ Left sticky card ============ */
/* .w3t-course-detail .w3t-aside-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px;
  padding:16px 16px 18px;
  box-shadow:0 16px 28px rgba(0,0,0,.08);
}
 */
/* Price badge (pill) + strike */
.w3t-course-detail .w3t-price-row{ display:flex; align-items:center; gap:.55rem; margin-bottom:.95rem; }
.w3t-course-detail .w3t-price{
  font-size:1.95rem; font-weight:900; letter-spacing:-.01em; color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  padding:.26rem .6rem; border-radius:12px; box-shadow:0 8px 18px rgba(75,51,181,.26), inset 0 -2px 0 rgba(0,0,0,.08);
}
.w3t-course-detail .w3t-strike{ text-decoration:line-through; opacity:.55; }

/* Quick facts with icons (1:duration, 2:updated, 3:access, 4:certificate) */
.w3t-course-detail .w3t-quickfacts{ list-style:none; padding:0; margin:0 0 1rem; display:grid; gap:.42rem; color:var(--ink2); }
.w3t-course-detail .w3t-quickfacts li{ display:flex; align-items:center; gap:.6rem; padding:.25rem 0; }
.w3t-course-detail .w3t-quickfacts li::before{
  content:""; width:18px; height:18px; background:var(--primary); opacity:.9; flex:0 0 18px;
  -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
/* clock */
.w3t-course-detail .w3t-quickfacts li:nth-child(1)::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2Zm1 11h3a1 1 0 0 0 0-2h-2V7a1 1 0 0 0-2 0v5a1 1 0 0 0 1 1Z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2Zm1 11h3a1 1 0 0 0 0-2h-2V7a1 1 0 0 0-2 0v5a1 1 0 0 0 1 1Z'/%3E%3C/svg%3E");
}
/* calendar */
.w3t-course-detail .w3t-quickfacts li:nth-child(2)::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3a1 1 0 1 0 0 2h1v1a1 1 0 0 0 2 0V5h6v1a1 1 0 1 0 2 0V5h1a1 1 0 1 0 0-2H6ZM4 9a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V9Z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3a1 1 0 1 0 0 2h1v1a1 1 0 0 0 2 0V5h6v1a1 1 0 1 0 2 0V5h1a1 1 0 1 0 0-2H6ZM4 9a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V9Z'/%3E%3C/svg%3E");
}
/* infinity (lifetime) */
.w3t-course-detail .w3t-quickfacts li:nth-child(3)::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 8C4 8 2 10 2 12s2 4 4.5 4c2.3 0 4-1.7 5.5-4 1.5 2.3 3.2 4 5.5 4C20 16 22 14 22 12s-2-4-4.5-4c-2.3 0-4 1.7-5.5 4C10.5 9.7 8.8 8 6.5 8Z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 8C4 8 2 10 2 12s2 4 4.5 4c2.3 0 4-1.7 5.5-4 1.5 2.3 3.2 4 5.5 4C20 16 22 14 22 12s-2-4-4.5-4c-2.3 0-4 1.7-5.5 4C10.5 9.7 8.8 8 6.5 8Z'/%3E%3C/svg%3E");
}
/* certificate */
.w3t-course-detail .w3t-quickfacts li:nth-child(4)::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 2 7l10 5 10-5-10-5Zm0 7L4 7l8-4 8 4-8 2Zm0 5 10-5v8a2 2 0 0 1-1.105 1.789L12 22l-8.895-4.211A2 2 0 0 1 2 17V9l10 5Z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 2 7l10 5 10-5-10-5Zm0 7L4 7l8-4 8 4-8 2Zm0 5 10-5v8a2 2 0 0 1-1.105 1.789L12 22l-8.895-4.211A2 2 0 0 1 2 17V9l10 5Z'/%3E%3C/svg%3E");
}

/* CTA */
.w3t-course-detail .w3t-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:750; border-radius:12px; padding:.74rem .98rem; text-decoration:none;
  transition:transform .06s ease, box-shadow .2s ease, filter .2s ease;
}
.w3t-course-detail .w3t-btn-primary{
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  color:#fff; box-shadow:0 12px 24px rgba(75,51,181,.25);
}
.w3t-course-detail .w3t-btn-primary:hover{ transform:translateY(-1px); filter:saturate(1.06); }
.w3t-course-detail .w3t-btn-primary:active{ transform:translateY(0); }

/* Support elements */
.w3t-course-detail .w3t-instructors{ margin-top:.35rem; color:var(--ink2); }



/* ----- Put the cover image INSIDE the aside card on desktop ----- */
.w3t-course-detail .w3t-aside-thumb{
  display:none;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:14px;
  box-shadow:0 10px 22px rgba(0,0,0,.08);
  margin-bottom:12px;
}

/* desktop: hide hero image, show aside image */
@media (min-width:1101px){
  .w3t-course-detail .w3t-hero-img{ display:none !important; }
  /* .w3t-course-detail .w3t-aside-thumb{ display:block; } */
}

/* mobile: keep hero image (nice for small screens), hide the aside copy */
@media (max-width:1100px){
  .w3t-course-detail .w3t-aside-thumb{ display:none !important; }
  .w3t-hero-img{ display:none !important; }
}

/* tighten hero text block since image is gone on desktop */
@media (min-width:1101px){
  .w3t-course-detail .w3t-course-hero{
    grid-template-columns: 1fr;   /* only text now */
    padding: 10px 6px 0 6px;
  }
  .w3t-course-detail .w3t-title{ margin-bottom: .25rem; }
  .w3t-course-detail .w3t-badges{ margin-top: .2rem; }
}

/* optional: soften the title/chips look a touch */
.w3t-course-detail .w3t-chip{
  background:#efeefe;
  color:#3f2ea7;
}

/* additional styles */
.w3t-course-detail .w3t-chip{
  background:#efeefe;
  color:#3f2ea7;
}

/* =============== Layout =============== */
.w3t-two-col{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:1rem;
  align-items:start;
}
/* .w3t-course-detail{
    border: none !important;
} */

/* =============== Tabs under the video =============== */
.w3t-tab-nav{
  display:flex;
  gap:.6rem;
  list-style:none;
  margin:.25rem 0 .5rem;
  padding:0;
  border-bottom:1px solid #e8eaee;
}

.w3t-tab-nav li{
  flex:1 1 0;                  /* let each tab shrink equally */
  min-width:0;                 /* required for ellipsis to work */
  text-align:center;
  font-weight:700;
  color:#334155;
  position:relative;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;      /* cut off text with … */
  cursor:pointer;
  padding:.8rem .3rem;
  font-size:.95rem;
  line-height:1.2;
}

.w3t-tab-nav li.active{ color:#111827; }
.w3t-tab-nav li.active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:2px;
  background:#111827;
}

/* Tighter at the mid range (990–1028px) */
@media (min-width:990px) and (max-width:1028px){
  .w3t-tab-nav li{
    font-size:.9rem;
    padding:.7rem .25rem;
  }
}

/* Smaller devices: shrink text further */
@media (max-width:768px){
  .w3t-tab-nav li{
    font-size:.85rem;
    padding:.65rem .25rem;
  }
}


/* =============== Left column (content cards) =============== */
.w3t-col-main .w3t-section{
  background:transparent;
  border:0;
  padding:0;
  margin:0 0 .65rem 0;
}
.w3t-col-main .w3t-section > h2{
  margin:.25rem 0 .4rem; padding:0;
  font-size:1rem; font-weight:800; color:#111827;
}
.w3t-col-main .w3t-body{ color:#374151; }
.w3t-col-main .w3t-bullets{ margin:.25rem 0 0; padding-left:1rem; }
.w3t-col-main .w3t-bullets li{ margin:.25rem 0; }

/* =============== Right column: Course content (no heavy borders) =============== */
.w3t-col-right{
  background:#fff !important;
  border:0 !important;
  border-left:1px solid #eef0f3 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  position:sticky !important;
  top:0 !important;
  height:100vh !important;
  overflow-y:scroll !important;
  padding:0 !important;

  /* Hide scrollbar visuals */
  scrollbar-width:none !important;     /* Firefox */
}
.w3t-col-right::-webkit-scrollbar{
  display:none !important;            /* Chrome, Safari, Edge */
}

/* Section title row */
.w3t-col-right .w3t-section{
  margin:0; padding:0; border:0;
}
.w3t-col-right .w3t-section > h2{
  margin:0; padding:.8rem 1rem;
  font-size:1rem; font-weight:800; color:#111827;
  border-bottom:1px solid #eef0f3;   /* subtle divider */
}

/* =============== Accordion sections =============== */
.w3t-col-right .w3t-accordion{ padding:0; }

/* Section header */
.w3t-col-right .w3t-acc{
  background:#fff; border:0; border-bottom:1px solid #f0f2f5; border-radius:0; overflow:hidden;
}
.w3t-col-right .w3t-acc > summary{
  list-style:none; cursor:pointer; padding:.9rem 1rem;
  background:#f7f8fb; color:#111827; font-weight:800; position:relative;
}
.w3t-col-right .w3t-acc > summary::-webkit-details-marker{ display:none; }
.w3t-col-right .w3t-acc > summary::after{
  content:""; width:.5rem; height:.5rem; position:absolute; right:1rem; top:1.25rem;
  border:2px solid currentColor; border-left-color:transparent; border-top-color:transparent;
  transform:rotate(45deg); transition:transform .2s ease;
}
.w3t-col-right details[open] > summary::after{ transform:rotate(-135deg); }

/* Optional summary/description text inside a section */
.w3t-col-right .w3t-acc .w3t-body{
  padding:.6rem 1rem; color:#4b5563; background:#fff;
}

/* =============== Item rows inside sections (dense, clean) =============== */
.w3t-col-right .w3t-curr-list{ list-style:none; margin:0; padding:0; }
.w3t-col-right .w3t-curr-item{
  padding:.65rem 1rem;
  border-top:1px solid #f1f3f6;      /* subtle row divider */
}
.w3t-col-right .w3t-curr-item:first-child{ border-top-color:transparent; }

/* row header */
.w3t-col-right .w3t-curr-head{
  display:flex; align-items:center; gap:.55rem; min-width:0;
}
.w3t-col-right .w3t-curr-head::before{
  content:""; flex:0 0 18px; height:18px;
  border:1.4px solid #9ca3af; border-radius:3px; /* faux checkbox */
}
.w3t-col-right .w3t-curr-title{
  font-weight:700; color:#111827; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* small meta line + right-side actions */
.w3t-col-right .w3t-curr-meta{
  margin-top:.25rem; color:#6b7280; font-size:.82rem;
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
}
.w3t-col-right .w3t-sep{ color:#d1d5db; }

/* “Watch video / Resources / Download” chips */
.w3t-col-right .w3t-curr-meta .w3t-link{
  margin-left:auto;
  display:inline-flex; align-items:center;
  padding:.25rem .55rem; line-height:1;
  border:1px solid #e6e8ed; border-radius:6px;
  background:#fff; color:#334155; text-decoration:none; font-weight:700; white-space:nowrap;
}
.w3t-col-right .w3t-curr-meta .w3t-link:hover{
  background:#f8fafc; border-color:#d8dce2;
}

/* Optional selected/hover visual like screenshot’s gray highlight */
.w3t-col-right .w3t-curr-item:hover{ background:#f6f7fb; }

/* =============== Topic feedback (keep compact) =============== */
.w3t-topic-feedback-summary{ margin:.45rem 1rem .25rem; font-size:.8rem; color:#6b7280; }
.w3t-topic-feedback{ border-top:1px solid #f1f3f6; margin:.35rem 0 0; padding:.6rem 1rem; background:#fff; }
.w3t-fb-stars{ display:inline-flex; gap:2px; }
.w3t-star{ border:0; background:transparent; font-size:16px; opacity:.5; cursor:pointer; line-height:1; }
.w3t-star.active, .w3t-star:hover{ opacity:1; color:#f59e0b; }

/* =============== Assignment upload (simple, non-intrusive) =============== */
.w3t-assignment-card{ margin:.5rem 1rem 0; padding:.75rem; border:1px solid #eef0f3; border-radius:8px; background:#fff; }
.w3t-assignment-upload{ display:grid; gap:.5rem; }
.w3t-assignment-upload label{ display:none; }
.w3t-assignment-upload input[type="file"]{
  display:block; width:100%; max-width:100%; box-sizing:border-box;
  padding:.4rem; border:1px solid #d1d5db; border-radius:6px; background:#fff; /* hide 'No file chosen' */
}
.w3t-assignment-upload input[type="file"]::-webkit-file-upload-text{ display:none; }
.w3t-assignment-upload input[type="file"]::-ms-value{ display:none; }
.w3t-assignment-upload input[type="file"]::file-selector-button{
  padding:.35rem .75rem; border-radius:6px; border:1px solid #d1d5db; background:#f3f4f6; color:#333; font-weight:600; cursor:pointer;
}
.w3t-assignment-upload input[type="file"]::file-selector-button:hover{ background:#e5e7eb; }
.w3t-assignment-upload .button.button-primary{
  align-self:start; padding:.4rem .75rem; border-radius:6px; font-size:.85rem; font-weight:700;
  background:#f3f4f6; border:1px solid #d1d5db; color:#111827;
}
.w3t-assignment-upload .button.button-primary:hover{ background:#e5e7eb; }

/* =============== Quiz button (compact, subtle) =============== */
.w3t-col-right .w3t-type-quiz .button{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.35rem .7rem; border-radius:999px; font-size:.85rem; font-weight:700;
  background:#ede9fe; border:1px solid #c4b5fd; color:#5933b5;
}
.w3t-col-right .w3t-type-quiz .button[disabled]{
  background:#f3f4f6; border-color:#e5e7eb; color:#9ca3af;
}

/* =============== Little global helpers =============== */
.w3t-course-detail, .w3t-course-detail *{ min-width:0; }
/* Remove faux checkbox before lesson/assignment/quiz rows */
.w3t-col-right .w3t-curr-head::before {
  display: none !important;
  content: none !important;
}
/* ================= MOBILE STYLES ================= */
@media (max-width: 1008px) {

  /* Stack columns (no side-by-side) */
  .w3t-two-col {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  /* Right column (curriculum) moves under main content */
  .w3t-col-right {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    max-height: none !important;
    border-left: none !important;
    border-top: 1px solid #eef0f3 !important;
    overflow: visible !important;
    padding: 0 0.75rem !important;
  }

  /* Section headings */
  .w3t-col-right .w3t-section > h2,
  .w3t-col-main .w3t-section > h2 {
    font-size: 0.95rem !important;
    padding: 0.6rem 0 !important;
  }

  /* Accordion summary */
  .w3t-col-right .w3t-acc > summary {
    padding: 0.75rem 0.5rem !important;
    font-size: 0.95rem !important;
  }

  /* Accordion items */
  .w3t-col-right .w3t-curr-item {
    padding: 0.6rem 0.5rem !important;
    font-size: 0.9rem !important;
  }

  /* Meta lines (video/download chips) */
  .w3t-col-right .w3t-curr-meta {
    font-size: 0.78rem !important;
    gap: 0.35rem !important;
  }

  .w3t-col-right .w3t-curr-meta .w3t-link {
    padding: 0.2rem 0.4rem !important;
    font-size: 0.78rem !important;
  }

  /* Feedback block */
  .w3t-topic-feedback {
    padding: 0.5rem !important;
  }
  .w3t-fb-comment {
    font-size: 13px !important;
    min-height: 60px !important;
  }
  .w3t-fb-save {
    font-size: 13px !important;
    padding: 5px 12px !important;
  }

  /* Assignment card */
  .w3t-assignment-card {
    margin: 0.5rem 0 0 !important;
    padding: 0.6rem !important;
  }
  .w3t-assignment-upload input[type="file"]::file-selector-button {
    font-size: 0.8rem !important;
    padding: 0.3rem 0.5rem !important;
  }
  .w3t-assignment-upload .button.button-primary {
    font-size: 0.8rem !important;
    padding: 0.35rem 0.6rem !important;
  }

  /* Quiz button */
  .w3t-col-right .w3t-type-quiz .button {
    font-size: 0.8rem !important;
    padding: 0.3rem 0.6rem !important;
  }

  /* Tabs */
  .w3t-tab-nav {
    gap: 0.4rem !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
  }
  .w3t-tab-nav li {
    font-size: 0.85rem !important;
    padding: 0.6rem 0.25rem !important;
  }
}
/* ===== Base tabs ===== */
.w3t-tab-nav{
  display:flex; align-items:flex-end; gap:1rem;
  list-style:none; margin:.25rem 0 .5rem; padding:0;
  border-bottom:1px solid #e8eaee;
}
.w3t-tab-nav li{
  cursor:pointer; position:relative; white-space:nowrap;
  padding:.9rem .3rem; font-weight:700; color:#334155;
}
.w3t-tab-nav li.active{ color:#111827; }
.w3t-tab-nav li.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:#111827;
}

/* Panels: show only active */
.w3t-tab-content{ width:100%; }
.w3t-tab-panel{ display:none; }
.w3t-tab-panel.active{ display:block; }

/* ===== Mid-width squeeze (990px–1028px) ===== */
@media (min-width:900px) and (max-width:1028px){
  .w3t-tab-nav{ gap:.6rem; }
  .w3t-tab-nav li{
    flex:1 1 0; min-width:0; text-align:center;
    font-size:.95rem; overflow:hidden; text-overflow:ellipsis; padding:.8rem .25rem;
  }
}

/* ===== Mobile (<=768px): single line + horizontal scroll ===== */
@media (max-width:768px){
  .w3t-tab-nav{
    gap:.5rem;
    overflow-x:auto; overflow-y:hidden;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    margin:.25rem -12px .5rem;          /* edge-to-edge */
    padding:0 12px .25rem;               /* breathing space */
  }
  .w3t-tab-nav::-webkit-scrollbar{ display:none; }  /* hide scrollbar */
  .w3t-tab-nav{ scrollbar-width:none; }              /* Firefox */

  .w3t-tab-nav li{
    font-size:.9rem; padding:.7rem .35rem;
    scroll-snap-align:start;
  }
  .w3t-tab-nav li.active::after{ height:2px; }

  /* Optional: sticky tabbar under hero/video */
  .w3t-tab-nav{
    position:sticky; top:0; z-index:5; background:#fff;
  }
}

/* ===== Very small phones (<=480px) ===== */
@media (max-width:480px){
  .w3t-tab-nav{ gap:.4rem; }
  .w3t-tab-nav li{ font-size:.85rem; padding:.6rem .25rem; }
}

/* ===== Optional: focus styles for keyboard users ===== */
.w3t-tab-nav li:focus-visible{
  outline:2px solid #5933b5; outline-offset:3px; border-radius:4px;
}