/* ==========================================================
   DRAWER BACKDROP
========================================================== */

#lessonDrawerBackdrop{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:1200;

}

#lessonDrawerBackdrop.show{

    opacity:1;

    visibility:visible;

}

/* ==========================================================
   DRAWER
========================================================== */

#lessonDrawer{

    position:fixed;

    top:0;

    right:0;

    width:700px;

    max-width:100%;

    height:100vh;

    background:white;

    transform:translateX(100%);

    transition:.35s ease;

    display:flex;

    flex-direction:column;

    z-index:1300;

    box-shadow:-10px 0 40px rgba(0,0,0,.18);

}

#lessonDrawer.open{

    transform:translateX(0);

}

/* ==========================================================
   HEADER
========================================================== */

#lessonHeader{

    padding:28px;

    border-bottom:1px solid var(--gray-200);

}

.lesson-title{

    font-size:2rem;

    margin-bottom:10px;

}

.lesson-subtitle{

    color:var(--gray-500);

}

/* ==========================================================
   CONTENT
========================================================== */

#lessonContent{

    flex:1;

    overflow-y:auto;

    padding:35px;

}

.lesson-section{

    margin-bottom:45px;

}

.lesson-section h2{

    margin-bottom:18px;

}

.lesson-section p{

    margin-bottom:15px;

}

.lesson-example{

    background:var(--gray-100);

    border-left:5px solid var(--gold);

    padding:20px;

    border-radius:12px;

    margin:20px 0;

}

.lesson-note{

    background:#FFF8E8;

    border-left:5px solid var(--gold);

    padding:20px;

    border-radius:12px;

    margin:20px 0;

}

/* ==========================================================
   MATH BOX
========================================================== */

.math-box{

    background:white;

    border:2px solid var(--gray-200);

    border-radius:14px;

    padding:20px;

    margin:24px 0;

    text-align:center;

    font-size:1.3rem;

}

/* ==========================================================
   PRACTICE BOX
========================================================== */

.practice-card{

    background:var(--gray-50);

    border-radius:16px;

    padding:24px;

    margin:24px 0;

}

.practice-question{

    font-size:1.2rem;

    margin-bottom:20px;

}

.practice-answer{

    width:100%;

    padding:15px;

    border:2px solid var(--gray-300);

    border-radius:10px;

}

/* ==========================================================
   QUIZ BOX
========================================================== */

.quiz-card{

    background:white;

    border-radius:18px;

    padding:24px;

    border:2px solid var(--gray-200);

    margin:25px 0;

}

.quiz-option{

    padding:15px;

    margin-top:12px;

    border-radius:10px;

    background:var(--gray-100);

    cursor:pointer;

    transition:.2s;

}

.quiz-option:hover{

    background:var(--gold);

    color:var(--blueprint);

}

/* ==========================================================
   FOOTER
========================================================== */

#lessonFooter{

    padding:24px;

    border-top:1px solid var(--gray-200);

    display:flex;

    justify-content:space-between;

    gap:20px;

}

/* ==========================================================
   SCROLLBAR
========================================================== */

#lessonContent::-webkit-scrollbar{

    width:10px;

}

#lessonContent::-webkit-scrollbar-thumb{

    background:var(--gray-300);

    border-radius:999px;

}