/* =====================================================
   PLAYER PRO — restyling area lezioni + materiali in evidenza
   =====================================================
   Caricato DOPO style.css e player-checkbox.css: sovrascrive solo
   ciò che serve, senza toccare la struttura esistente.
   ===================================================== */

:root {
    --jc-pro-pink: #d4637a;
    --jc-pro-pink-dark: #b94f66;
    --jc-pro-ink: #1d1d21;
    --jc-pro-muted: #6f6f78;
    --jc-pro-line: #e9e9ee;
    --jc-pro-bg: #f7f7fa;
}

/* ── Layout generale ─────────────────────────────── */
.jc-corso-player { background: var(--jc-pro-bg); }

.jc-player-sidebar {
    background: #fff;
    border-right: 1px solid var(--jc-pro-line);
}

.jc-player-main {
    padding: 28px 36px 56px;
    max-width: 1100px;
}

/* ── Sidebar: intestazione ───────────────────────── */
.jc-sidebar-header {
    padding: 20px 18px 18px;
    border-bottom: 1px solid var(--jc-pro-line);
    background: linear-gradient(180deg, #fff, #fcfcfd);
}
.jc-sidebar-header h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--jc-pro-ink);
    line-height: 1.35;
    margin: 0 0 12px;
}
.jc-progress-bar-track { height: 7px; background: #ececf1; }
.jc-progress-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--jc-pro-muted);
}

/* ── Sidebar: elenco lezioni ─────────────────────── */
.jc-modulo-nav-item {
    padding: 13px 16px;
    border-left-width: 3px;
    gap: 12px;
}
.jc-modulo-nav-item.active {
    background: linear-gradient(90deg, rgba(212, 99, 122, .10), rgba(212, 99, 122, 0));
    border-left-color: var(--jc-pro-pink);
}
.jc-nav-number {
    font-size: 10px;
    letter-spacing: .6px;
    color: #b3b3bd;
}
.jc-nav-title {
    font-size: 13.5px;
    color: #34343c;
    line-height: 1.45;
}
/* Una lezione completata resta leggibile: prima era barrata e sbiadita */
.jc-modulo-nav-item.completed .jc-nav-title {
    text-decoration: none;
    color: #8d8d97;
}
.jc-modulo-nav-item.completed.active .jc-nav-title { color: var(--jc-pro-pink); }

/* ── Sidebar: materiali ──────────────────────────── */
.jc-sidebar-allegati {
    margin: 14px 12px 4px;
    padding: 14px;
    border: 1px solid #f0d8de;
    border-top: 1px solid #f0d8de;
    border-radius: 12px;
    background: linear-gradient(160deg, #fdf3f6, #fff);
}
.jc-sidebar-allegati h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--jc-pro-pink);
    margin: 0 0 10px;
}
.jc-sidebar-allegati-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 99px;
    background: var(--jc-pro-pink);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
}
.jc-allegato-link {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 11px;
    margin-bottom: 6px;
    background: #fff;
    border: 1px solid #f0e2e6;
    border-radius: 9px;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.jc-allegato-link:last-child { margin-bottom: 0; }
.jc-allegato-link:hover {
    border-color: var(--jc-pro-pink);
    box-shadow: 0 3px 10px rgba(212, 99, 122, .14);
    transform: translateY(-1px);
}
.jc-allegato-link-nome {
    font-size: 13px;
    font-weight: 600;
    color: #34343c;
    line-height: 1.35;
}
.jc-allegato-link-meta {
    font-size: 11px;
    font-weight: 600;
    color: #a9a9b4;
    letter-spacing: .3px;
}

/* ── Video ───────────────────────────────────────── */
.jc-video-container {
    margin-bottom: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 34px rgba(20, 20, 30, .16);
    background: #000;
}
.jc-video-player {
    border-radius: 0;
    max-height: 68vh;
}
.jc-video-loading { border-radius: 0; }

.jc-video-buffer-bar {
    margin: 0 0 22px;
    border-radius: 0 0 4px 4px;
}

/* ── Blocco informazioni lezione ─────────────────── */
.jc-lesson-info {
    background: #fff;
    border: 1px solid var(--jc-pro-line);
    border-radius: 14px;
    padding: 22px 24px;
    margin-bottom: 22px;
}
.jc-lesson-eyebrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 8px;
}
.jc-lesson-counter {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--jc-pro-pink);
}
.jc-lesson-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #cfcfd8;
}
.jc-lesson-durata {
    font-size: 12px;
    font-weight: 600;
    color: var(--jc-pro-muted);
}
.jc-lesson-done-badge {
    padding: 3px 10px;
    border-radius: 99px;
    background: #e4f6ea;
    color: #1c7a3c;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
}
.jc-lesson-info h2.jc-lesson-title {
    font-size: 25px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--jc-pro-ink);
    margin: 0 0 8px;
}
.jc-lesson-description {
    font-size: 15px;
    line-height: 1.65;
    color: #55555f;
    margin: 0 0 18px;
}

/* ── MATERIALI IN EVIDENZA (colonna principale) ──── */
.jc-materiali-box {
    background: #fff;
    border: 2px solid #f2d9df;
    border-radius: 16px;
    padding: 22px 24px;
    margin-bottom: 22px;
    scroll-margin-top: 90px;
}
.jc-materiali-head { margin-bottom: 16px; }
.jc-materiali-head h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    color: var(--jc-pro-ink);
    margin: 0 0 4px;
}
.jc-materiali-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    border-radius: 99px;
    background: var(--jc-pro-pink);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}
.jc-materiali-head p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--jc-pro-muted);
}

.jc-materiali-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
}
.jc-materiale-card {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 15px;
    background: #fff;
    border: 1px solid var(--jc-pro-line);
    border-radius: 12px;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.jc-materiale-card:hover {
    border-color: var(--jc-pro-pink);
    box-shadow: 0 6px 18px rgba(212, 99, 122, .16);
    transform: translateY(-2px);
}
.jc-materiale-icon {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #fdf2f5;
    color: var(--jc-pro-pink);
}
.jc-materiale-ext {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 7.5px;
    font-weight: 800;
    letter-spacing: .3px;
    color: var(--jc-pro-pink);
}
.jc-materiale-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.jc-materiale-nome {
    font-size: 14px;
    font-weight: 600;
    color: #2b2b33;
    line-height: 1.35;
    word-break: break-word;
}
.jc-materiale-meta {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .3px;
    color: #a9a9b4;
}
.jc-materiale-dl {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--jc-pro-pink);
}
.jc-materiale-dl-txt {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
}

/* ── Test finale e navigazione ───────────────────── */
.jc-google-form-section {
    background: linear-gradient(135deg, #fdf2f5, #fff);
    border: 2px solid #f2d9df;
    border-radius: 16px;
    padding: 22px 24px;
    margin-bottom: 22px;
}
.jc-lesson-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 4px;
}

/* ── Mobile ──────────────────────────────────────── */
.jc-mob-materiali-jump {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding: 12px 14px;
    background: #fff;
    border: 2px solid var(--jc-pro-pink);
    border-radius: 10px;
    color: var(--jc-pro-pink);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}
.jc-mob-materiali-jump-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 99px;
    background: var(--jc-pro-pink);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 900px) {
    .jc-player-main { padding: 18px 16px 40px; }
    .jc-lesson-info { padding: 18px; border-radius: 12px; }
    .jc-lesson-info h2.jc-lesson-title { font-size: 21px; }
    .jc-materiali-box { padding: 18px; border-radius: 12px; }
    .jc-materiali-grid { grid-template-columns: 1fr; }
    .jc-video-container { border-radius: 10px; }
    .jc-lesson-navigation { flex-direction: column; align-items: stretch; }
}

/* Il box materiali dentro la vista mobile: eredita tutto, si adatta al contenitore */
.jc-mob-allegati { padding: 0 !important; background: transparent !important; border-top: none !important; }
.jc-materiali-box-mobile {
    margin: 16px;
    scroll-margin-top: 16px;
}