:root {
    --primary: #D97706;
    --primary-hover: #B45309;
    --dark-card: #1C1C1E;
    --dark-bg: #0F0F0F;
    --muted-text: #A0A0A0;
}

.course-detail-header {
    padding: 120px 0 60px;
    background: linear-gradient(180deg, rgba(15,15,15,0.8) 0%, var(--dark-bg) 100%);
}
.breadcrumb-custom { display:flex; align-items:center; gap:8px; font-size:0.9rem; margin-bottom:20px; }
.breadcrumb-tag { background:rgba(217,119,6,0.1); color:var(--primary); padding:4px 12px; border-radius:8px; font-weight:600; }
.course-title { font-size:2.5rem; font-weight:950; margin-bottom:25px; line-height:1.2; }
.course-stats-row { display:flex; flex-wrap:wrap; gap:25px; margin-bottom:30px; }
.stat-item { display:flex; align-items:center; gap:10px; color:var(--muted-text); font-size:1rem; }
.stat-item i { font-size:1.2rem; background:rgba(255,255,255,0.05); width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:10px; }
.course-meta-info { display:flex; gap:30px; font-size:0.95rem; color:var(--muted-text); margin-bottom:30px; }
.meta-item { display:flex; align-items:center; gap:10px; }
.meta-item i { color:var(--primary); }
.course-features { display:flex; flex-direction:column; gap:15px; }
.feature-check { display:flex; align-items:center; gap:12px; font-size:1.1rem; font-weight:500; }
.feature-check i { color:var(--primary); font-size:1.2rem; }

.secure-video-wrapper {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.secure-video-wrapper iframe { display:block; width:100%; aspect-ratio:16/9; }
.video-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: transparent;
    cursor: default;
    pointer-events: none; /* FIXED: was blocking clicks on video controls */
}
.video-controls-custom {
    position: absolute;
    bottom: 0;
    left: 0; right: 0;
    z-index: 15;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
}
.vc-btn {
    background: var(--primary);
    border: none;
    color: #000;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
}
.vc-progress { flex:1; height:4px; background:rgba(255,255,255,0.15); border-radius:4px; overflow:hidden; }
.vc-bar { width:0%; height:100%; background:var(--primary); border-radius:4px; transition:width 0.3s; }
.vc-time { color:#fff; font-size:0.8rem; min-width:40px; }

.secure-pdf-wrapper {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #111;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.pdf-iframe {
    width: 100%;
    height: 600px;
    border: none;
    display: none;
}
.pdf-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: transparent;
    pointer-events: none; /* FIXED: was blocking all clicks (pointer-events:all caused frozen page) */
}

.lessons-list { display:flex; flex-direction:column; gap:8px; }
.lesson-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.25s ease;
}
.lesson-item:hover { background:rgba(217,119,6,0.06); border-color:rgba(217,119,6,0.15); }
.lesson-item.locked { opacity:0.5; }
.lesson-item.completed .lesson-num { background:rgba(16,185,129,0.15); color:#10b981; }
.lesson-left { display:flex; align-items:center; gap:14px; }
.lesson-num {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
}
.lesson-title { font-weight:600; font-size:0.95rem; }
.lesson-right { display:flex; align-items:center; gap:12px; }
.lesson-duration { color:var(--muted-text); font-size:0.85rem; }
.lesson-type-badge { font-size:1rem; }
.text-gold { color: var(--primary) !important; }

.course-tabs { display:flex; gap:15px; border-bottom:1px solid rgba(255,255,255,0.1); padding-bottom:20px; }
.tab-btn { background:rgba(255,255,255,0.05); border:none; color:#fff; padding:12px 30px; border-radius:12px; font-weight:700; transition:all 0.3s; cursor:pointer; }
.tab-btn:hover { background:rgba(255,255,255,0.1); }
.tab-btn.active { background:var(--primary); color:#000; }

.course-sidebar { position:sticky; top:100px; }
.sidebar-card { background:var(--dark-card); border-radius:24px; overflow:hidden; box-shadow:0 20px 40px rgba(0,0,0,0.4); border:1px solid rgba(255,255,255,0.05); }
.sidebar-content { padding:25px; }
.instructor-brief { display:flex; align-items:center; gap:15px; }
.instructor-img { width:60px; height:60px; border-radius:50%; border:2px solid var(--primary); object-fit:cover; }
.instructor-info h5 { margin:0; font-size:1.1rem; font-weight:700; }
.instructor-info p { margin:0; font-size:0.85rem; color:var(--muted-text); }
.price-badge { background:rgba(217,119,6,0.1); color:var(--primary); padding:4px 12px; border-radius:8px; font-size:0.85rem; font-weight:700; }
.price-badge.free { background:rgba(16,185,129,0.1); color:#10b981; }
.sidebar-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; background:rgba(255,255,255,0.03); padding:20px; border-radius:16px; margin-bottom:25px; }
.s-stat { display:flex; flex-direction:column; align-items:center; gap:5px; font-size:0.85rem; color:var(--muted-text); }
.s-stat i { font-size:1.2rem; color:#fff; }
.btn-subscribe-p { background:var(--primary); color:#000; width:100%; padding:16px; border-radius:16px; font-weight:800; font-size:1.1rem; border:none; transition:all 0.3s; margin-bottom:15px; cursor:pointer; }
.btn-subscribe-p:hover { background:var(--primary-hover); transform:translateY(-2px); box-shadow:0 10px 20px rgba(217,119,6,0.2); }

/* ── Video Notes Panel ── */
.vn-panel { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:16px; padding:20px; }
.vn-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; flex-wrap:wrap; gap:10px; }
.vn-header h6 { color:#fff; font-weight:700; margin:0; }
.vn-add-btn { background:var(--primary); color:#000; border:none; border-radius:20px; padding:6px 18px; font-size:0.82rem; font-weight:700; cursor:pointer; font-family:inherit; }
.vn-form { display:none; background:rgba(0,0,0,0.3); border-radius:12px; padding:16px; margin-bottom:16px; }
.vn-form-time { color:var(--primary); font-size:0.8rem; display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.vn-form-time span { color:rgba(255,255,255,0.3); font-size:0.75rem; }
.vn-textarea { width:100%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:10px; padding:10px; color:#fff; font-family:inherit; font-size:0.9rem; resize:vertical; outline:none; }
.vn-form-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:10px; }
.vn-btn-cancel { background:rgba(255,255,255,0.07); color:#fff; border:none; border-radius:20px; padding:6px 16px; font-size:0.82rem; cursor:pointer; font-family:inherit; }
.vn-btn-save { background:var(--primary); color:#000; border:none; border-radius:20px; padding:6px 18px; font-size:0.82rem; font-weight:700; cursor:pointer; font-family:inherit; }
.vn-note-card { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:12px; padding:14px; margin-bottom:10px; }
.vn-note-card:last-child { margin-bottom:0; }
.vn-note-top { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:8px; }
.vn-note-ts { background:rgba(217,119,6,0.12); color:var(--primary); padding:2px 10px; border-radius:8px; font-size:0.75rem; font-weight:700; white-space:nowrap; cursor:pointer; }
.vn-note-ts:hover { background:rgba(217,119,6,0.25); }
.vn-note-actions { display:flex; gap:6px; }
.vn-btn-edit, .vn-btn-del { background:rgba(255,255,255,0.06); border:none; border-radius:8px; padding:4px 8px; font-size:0.75rem; cursor:pointer; }
.vn-btn-edit { color:rgba(255,255,255,0.7); }
.vn-btn-del { color:#f87171; }
.vn-note-text { color:rgba(255,255,255,0.8); font-size:0.88rem; line-height:1.6; white-space:pre-wrap; }
.vn-empty { text-align:center; padding:20px; color:rgba(255,255,255,0.3); font-size:0.85rem; }

@media (max-width:991px) {
    .course-title { font-size:2rem; }
    .course-sidebar { margin-top:50px; position:static; }
    .course-meta-info { flex-direction:column; gap:10px; }
}

@media (max-width: 767px) {
    .course-detail-header {
        padding: 100px 0 40px;
    }

    .course-title {
        font-size: 1.75rem;
    }

    .breadcrumb-custom {
        font-size: 0.8rem;
        flex-wrap: wrap;
    }

    .breadcrumb-tag {
        padding: 3px 10px;
        font-size: 0.75rem;
    }

    .course-stats-row {
        gap: 12px;
    }

    .stat-item {
        font-size: 0.9rem;
    }

    .stat-item i {
        width: 34px;
        height: 34px;
        font-size: 1rem;
    }

    .course-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 12px;
        gap: 8px;
    }

    .course-tabs::-webkit-scrollbar {
        display: none;
    }

    .tab-btn {
        flex-shrink: 0;
        padding: 10px 20px;
        font-size: 0.85rem;
        white-space: nowrap;
    }

    .lesson-item {
        padding: 12px 14px;
    }

    .lesson-num {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }

    .lesson-title {
        font-size: 0.85rem;
    }

    .lesson-duration {
        font-size: 0.8rem;
    }

    .sidebar-card {
        border-radius: 16px;
    }

    .sidebar-content {
        padding: 20px;
    }

    .instructor-img {
        width: 50px;
        height: 50px;
    }

    .sidebar-stats {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 16px;
    }

    .btn-subscribe-p {
        padding: 14px;
        font-size: 1rem;
        min-height: 48px;
    }

    .pdf-iframe {
        height: 400px;
    }

    .vn-panel {
        padding: 16px;
    }

    .vn-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .course-title {
        font-size: 1.4rem;
    }

    .stat-item {
        font-size: 0.8rem;
    }

    .stat-item i {
        width: 30px;
        height: 30px;
    }

    .lesson-left {
        gap: 10px;
    }

    .lesson-num {
        width: 26px;
        height: 26px;
    }

    .lesson-title {
        font-size: 0.8rem;
    }

    .pdf-iframe {
        height: 300px;
    }
}