/* =========================================
   COURSES PREMIUM LIGHT
========================================= */

/* GRID */

.courses-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fill, minmax(300px, 1fr));

    gap:1.5rem;
}

/* =========================================
   COURSE CARD
========================================= */

.course-card{

    background:rgba(255,255,255,.92);

    border:1px solid rgba(15,23,42,.06);

    border-radius:24px;

    padding:1.5rem;

    transition:.3s ease;

    box-shadow:
        0 10px 30px rgba(15,23,42,.05);
}

.course-card:hover{

    transform:translateY(-4px);

    border-color:rgba(212,175,55,.25);

    box-shadow:
        0 18px 35px rgba(15,23,42,.08),
        0 0 25px rgba(212,175,55,.08);
}

.course-card h3{

    margin-bottom:.5rem;

    color:#0f172a;

    font-size:1.25rem;

    line-height:1.3;
}
.course-thumb{

    width:100%;

    height:180px;

    object-fit:cover;

    border-radius:16px;

    margin-bottom:15px;

    display:block;
}
/* =========================================
   PROGRESSO
========================================= */

.course-progress-label{

    font-size:.88rem;

    color:#64748b;

    margin:.6rem 0 1rem;
}

/* =========================================
   ACTIONS
========================================= */

.course-card-actions{

    display:flex;

    gap:.7rem;

    flex-wrap:wrap;

    margin-top:1rem;
}

/* =========================================
   BOTÃO SECONDARY
========================================= */

.btn-secondary{

    background:#ffffff;

    border:1px solid #dbe2ea;

    color:#0f172a;

    border-radius:12px;

    transition:.2s ease;
}

.btn-secondary:hover{

    background:#f8fafc;

    border-color:#d4af37;

    color:#0f172a;
}

/* =========================================
   BACK LINK
========================================= */

.back-link{

    display:inline-flex;

    align-items:center;

    gap:.4rem;

    font-size:.88rem;

    color:#64748b;

    margin-bottom:.5rem;

    text-decoration:none;

    transition:.2s ease;
}

.back-link:hover{
    color:#0f172a;
}

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

.course-header{
    align-items:flex-start;
}

/* =========================================
   BADGE
========================================= */

.course-progress-badge{

    background:rgba(212,175,55,.12);

    color:#b8860b;

    padding:.5rem 1rem;

    border-radius:999px;

    font-weight:700;

    font-size:.85rem;

    border:1px solid rgba(212,175,55,.15);
}

/* =========================================
   PROGRESS BAR
========================================= */

.progress-bar-lg{

    height:12px;

    margin-bottom:1.25rem;

    border-radius:999px;

    overflow:hidden;
}

/* =========================================
   CONTINUE
========================================= */

.continue-banner{
    display:inline-block;
    margin-bottom:1.5rem;
}

/* =========================================
   MODULES
========================================= */

.modules-timeline{

    display:flex;

    flex-direction:column;

    gap:1.2rem;
}

.timeline-module{

    display:grid;

    grid-template-columns:48px 1fr;

    gap:1rem;
}

/* =========================================
   MARKER
========================================= */

.timeline-marker{

    display:flex;

    flex-direction:column;

    align-items:center;
}

.timeline-step{

    width:38px;

    height:38px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #b8860b,
        #d4af37
    );

    color:#111827;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    font-size:.9rem;

    box-shadow:
        0 8px 20px rgba(212,175,55,.18);
}

.timeline-module.locked .timeline-step{

    background:#e2e8f0;

    color:#94a3b8;

    box-shadow:none;
}

.timeline-module.completed .timeline-step{

    background:#22c55e;

    color:#fff;
}

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

.module-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:.75rem;
}

/* =========================================
   LESSONS
========================================= */

.lessons-list{
    list-style:none;
}

.lessons-list li{
    margin-bottom:.35rem;
}

.lessons-list li a{

    color:#334155;

    text-decoration:none;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:.5rem 0;

    transition:.2s ease;
}

.lessons-list li.done a{
    color:#16a34a;
}

.lessons-list li a:hover{
    color:#d4af37;
}

/* =========================================
   LESSON LAYOUT
========================================= */

.lesson-layout{

    display:flex;

    min-height:100vh;

    gap:1.5rem;
}

.lesson-main{

    flex:1;

    min-width:0;
}

/* =========================================
   PLAYER
========================================= */

.lesson-player video,
.lesson-player iframe{

    width:100%;

    max-height:70vh;

    border:none;

    border-radius:24px;

    background:#000;

    box-shadow:
        0 15px 40px rgba(15,23,42,.08);
}

.lesson-pdf{

    min-height:70vh;

    border:none;

    border-radius:24px;
}

/* =========================================
   LESSON TEXT
========================================= */

.lesson-text{

    padding:1.5rem;

    line-height:1.8;

    color:#334155;
}

/* =========================================
   ACTIONS
========================================= */

.lesson-actions{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    justify-content:space-between;

    gap:1rem;

    margin-top:1.5rem;
}

.lesson-nav{

    display:flex;

    gap:.7rem;
}

/* =========================================
   SIDEBAR
========================================= */

.lesson-sidebar{

    width:320px;

    border-left:1px solid rgba(15,23,42,.06);

    padding:1.5rem 1rem;

    background:rgba(255,255,255,.85);

    backdrop-filter:blur(10px);

    overflow-y:auto;
}

.lesson-sidebar h4{

    margin-bottom:1rem;

    color:#0f172a;
}

/* =========================================
   MINI MODULE
========================================= */

.mini-module{
    margin-bottom:1.2rem;
}

.mini-module ul{

    list-style:none;

    margin-top:.35rem;
}

.mini-module li a{

    font-size:.88rem;

    color:#64748b;

    text-decoration:none;

    display:block;

    padding:.35rem 0;

    transition:.2s ease;
}

.mini-module li a:hover{
    color:#0f172a;
}

.mini-module li.current a{

    color:#d4af37;

    font-weight:700;
}

.mini-module li.done a{
    color:#16a34a;
}

.mini-module.locked{
    opacity:.5;
}

/* =========================================
   PROGRESS
========================================= */

.lesson-progress-wrap{

    min-width:120px;

    text-align:right;
}

#lesson-progress-label{

    font-size:.85rem;

    color:#64748b;
}

/* =========================================
   CONTINUE LIST
========================================= */

.continue-list{
    list-style:none;
}

.continue-list li a{

    display:flex;

    justify-content:space-between;

    padding:.55rem 0;

    color:#334155;

    text-decoration:none;

    transition:.2s ease;
}

.continue-list li a:hover{
    color:#d4af37;
}

/* =========================================
   SIDEBAR
========================================= */

.sidebar nav a.disabled{

    opacity:.5;

    pointer-events:none;
}

/* =========================================
   USER
========================================= */

.sidebar-user{

    margin-top:2rem;

    padding:.9rem;

    font-size:.85rem;

    color:#64748b;

    border-top:1px solid rgba(15,23,42,.06);
}

/* =========================================
   EMPTY
========================================= */

.empty-state{

    text-align:center;

    padding:2rem;

    color:#64748b;
}

/* =========================================
   TITLES
========================================= */

.section-title{

    margin:1.5rem 0 1rem;

    font-size:1rem;

    color:#64748b;
}

.courses-section{
    margin-bottom:1rem;
}

/* =========================================
   PRICE
========================================= */

.checkout-price-sm{

    font-size:1.3rem;

    font-weight:800;

    color:#b8860b;

    margin:.5rem 0 1rem;
}

/* =========================================
   RESPONSIVO
========================================= */

@media(max-width:900px){

    .lesson-layout{

        flex-direction:column;
    }

    .lesson-sidebar{

        width:100%;

        border-left:none;

        border-top:1px solid rgba(15,23,42,.06);

        border-radius:22px;

        margin-top:1rem;
    }
}

/* =========================================
   MOBILE
========================================= */

@media(max-width:768px){

    .courses-grid{

        grid-template-columns:1fr;

        gap:1rem;
    }

    .course-card{

        padding:1.3rem;

        border-radius:20px;
    }

    .course-card h3{

        font-size:1.1rem;
    }

    .lesson-player video,
    .lesson-player iframe,
    .lesson-pdf{

        border-radius:18px;
    }

    .lesson-text{

        padding:1rem;
    }

    .lesson-actions{

        flex-direction:column;

        align-items:stretch;
    }

    .lesson-nav{

        width:100%;

        flex-direction:column;
    }

    .lesson-sidebar{

        padding:1rem;
    }

    .timeline-module{

        grid-template-columns:40px 1fr;

        gap:.8rem;
    }

    .timeline-step{

        width:32px;

        height:32px;

        font-size:.8rem;
    }
}

/* =========================================
   MOBILE PEQUENO
========================================= */

@media(max-width:480px){

    .course-card{

        padding:1.1rem;
    }

    .module-header{

        flex-direction:column;

        align-items:flex-start;

        gap:.5rem;
    }

    .lesson-progress-wrap{

        text-align:left;
    }

    .lesson-player video,
    .lesson-player iframe{

        max-height:240px;
    }

    .lesson-text{

        font-size:.95rem;

        line-height:1.7;
    }
}
/* =========================================
   STORE
========================================= */

.dashboard-content{
    margin-left:270px;
    width:calc(100% - 270px);
    max-width:none;
    padding:30px;
    min-height:100vh;
}

.store-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
    width:100%;
}

.course-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 8px 30px rgba(0,0,0,.08);
    transition:.3s;
    display:flex;
    flex-direction:column;
    min-height:460px;
}

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

.course-cover{
    position:relative;
}

.course-cover img{
    width:100%;
    height:220px;
    object-fit:cover;
    display:block;
}

.premium-badge{
    position:absolute;
    top:12px;
    right:12px;
    background:#f59e0b;
    color:#fff;
    font-size:12px;
    font-weight:700;
    padding:6px 12px;
    border-radius:999px;
}

.course-content{
    padding:20px;
    flex:1;
    display:flex;
    flex-direction:column;
}

.course-content h3{
    font-size:20px;
    margin-bottom:10px;
}

.course-content p{
    color:#64748b;
    line-height:1.5;
    min-height:70px;
}

.course-footer{
    margin-top:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
}

.price{
    font-size:28px;
    font-weight:700;
    color:#2563eb;
}

.btn-buy{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:#2563eb;
    color:#fff;
    text-decoration:none;
    padding:12px 18px;
    border-radius:10px;
    font-weight:600;
}

.btn-buy:hover{
    background:#1d4ed8;
}

/* TABLET */

@media (max-width: 992px){

    .dashboard-content{
        margin-left:270px;
        width:calc(100% - 270px);
    }

    .store-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

/* MOBILE */

@media (max-width: 768px){

    .dashboard-content{
        margin-left:0;
        width:100%;
        padding:20px;
    }

    .store-grid{
        grid-template-columns:1fr;
    }

    .course-card{
        min-height:auto;
    }

    .course-footer{
        flex-direction:column;
        align-items:stretch;
    }

    .btn-buy{
        width:100%;
    }

    .price{
        text-align:center;
    }

}