/* ===================================================== */
/*   استایلِ مشترکِ زیرصفحه‌های آموزش (سربرگ + مسیر + لیست)    */
/* ===================================================== */

.edu-page-card{

    flex:1;

    display:flex;

    flex-direction:column;

    min-height:0;

    overflow-y:auto;
}

.edu-page-head{

    display:flex;

    align-items:center;

    gap:12px;

    padding:18px 22px;

    border-bottom:1px solid rgba(var(--jn-overlay-rgb),.08);

    flex-shrink:0;
}

.edu-back-chip{

    font-size:11px;

    color:var(--jn-text-3);

    background:var(--jn-bg-2);

    border:1px solid rgba(var(--jn-overlay-rgb),.1);

    border-radius:16px;

    padding:6px 14px;

    text-decoration:none;

    white-space:nowrap;
}

.edu-back-chip:hover{

    color:var(--jn-cyan-text);

    border-color:rgba(var(--jn-cyan-rgb),.3);
}

.edu-crumb{

    display:flex;

    align-items:center;

    gap:6px;

    flex-wrap:wrap;
}

.edu-crumb-item{

    font-size:11px;

    color:var(--jn-text-3);

    background:var(--jn-bg-2);

    border:1px solid rgba(var(--jn-overlay-rgb),.08);

    border-radius:14px;

    padding:5px 12px;

    text-decoration:none;

    white-space:nowrap;
    transition:border-color .18s, color .18s;
}

a.edu-crumb-item:hover{

    color:var(--jn-cyan-text);

    border-color:rgba(var(--jn-cyan-rgb),.3);
}

.edu-crumb-item.current{

    color:var(--jn-cyan-text);

    background:rgba(var(--jn-cyan-rgb),.08);

    border-color:rgba(var(--jn-cyan-rgb),.3);

    font-weight:500;
}

.edu-crumb-sep{

    font-size:11px;

    color:var(--jn-text-3);
}

.edu-list-body{

    padding:20px 22px;

    display:flex;

    flex-direction:column;

    gap:10px;
}

.edu-list-item{

    display:flex;

    align-items:center;

    gap:14px;

    background:var(--jn-bg-2);

    border:1px solid rgba(var(--jn-overlay-rgb),.08);

    border-radius:12px;

    padding:14px 18px;

    text-decoration:none;

    color:inherit;

    transition:border-color .18s;
}

.edu-list-item:not(.disabled):hover{

    border-color:rgba(var(--jn-cyan-rgb),.3);
}

.edu-list-item.primary{

    border-color:rgba(var(--jn-cyan-rgb),.35);

    background:linear-gradient(160deg, rgba(var(--jn-cyan-rgb),.08), transparent);
}

.edu-list-item.disabled{

    opacity:.5;

    cursor:not-allowed;
}

.edu-list-item .num{

    width:26px;

    height:26px;

    border-radius:8px;

    background:var(--jn-bg-0);

    border:1px solid rgba(var(--jn-overlay-rgb),.14);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:11px;

    color:var(--jn-text-3);

    flex-shrink:0;
}

.edu-list-item.primary .num{

    background:var(--jn-cyan);

    color:var(--jn-ink);

    font-weight:800;

    border-color:transparent;
}

.edu-list-item .txt{

    flex:1;
}

.edu-list-item .txt h4{

    margin:0 0 3px;

    font-size:13px;
}

.edu-list-item .txt span{

    font-size:11px;

    color:var(--jn-text-3);
}

.edu-list-item .arrow{

    color:var(--jn-text-3);

    font-size:14px;
}


/* ===================================================== */
/*   زیرمجموعه‌ی تودرتو — نشون‌دادنِ اینکه این موارد زیرِ همون    */
/*   موردِ اصلیِ بالاسری قرار دارن (خطِ عمودیِ اتصال + تورفتگی)    */
/* ===================================================== */

.edu-sublist{

    display:flex;

    flex-direction:column;

    gap:8px;

    margin-right:22px;

    padding-right:16px;

    border-right:2px solid rgba(var(--jn-cyan-rgb),.2);
}

.edu-list-item.sub{

    padding:12px 16px;

    background:var(--jn-bg-3);

    border-color:rgba(var(--jn-overlay-rgb),.12);
}

.edu-list-item.sub:not(.disabled):hover{

    border-color:rgba(var(--jn-cyan-rgb),.35);

    background:var(--jn-bg-3);
}

.edu-list-item.sub .num{

    width:22px;

    height:22px;

    font-size:10px;
}

.edu-list-item.sub .txt h4{

    font-size:13px;

    color:var(--jn-text-1);
}

.edu-list-item.sub .txt span{

    font-size:11px;
}


/* ===================================================== */
/*   بازشدنِ درجاییِ «انواعِ اندیکاتورها» — بدونِ رفتن به صفحه‌ی    */
/*   جدید، همینجا زیرِ خودش باز می‌شه                          */
/* ===================================================== */

.edu-types-block{

    display:flex;

    flex-direction:column;
}

button.edu-list-item{

    width:100%;

    text-align:right;

    font-family:inherit;

    font-size:inherit;

    color:inherit;

    cursor:pointer;
}

.edu-toggle-arrow{

    display:inline-block;

    transition:transform .2s ease;
}

.edu-types-toggle[aria-expanded="true"] .edu-toggle-arrow{

    transform:rotate(180deg);
}

.edu-types-panel{

    overflow:hidden;

    max-height:0;

    opacity:0;

    margin:0 !important;

    transition:max-height .35s ease, opacity .3s ease, margin .35s ease;
}

.edu-types-panel.expanded{

    max-height:2000px;

    opacity:1;

    margin:2px 0 4px !important;
}

.edu-types-panel .edu-cat-list{

    padding-top:2px;
}


/* ===================================================== */
/*   بازشدنِ درجاییِ هر دسته — با کلیک روی کارتِ دسته، لیستِ       */
/*   اندیکاتورهای همون دسته زیرش باز می‌شه (مثلِ یک کشو)          */
/* ===================================================== */

.edu-cat-toggle[aria-expanded="true"] .edu-toggle-arrow{

    transform:rotate(180deg);
}

.edu-cat-sublist{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    overflow:hidden;

    max-height:0;

    opacity:0;

    margin:0 !important;

    padding-right:16px;

    border-right:2px solid rgba(var(--jn-cyan-rgb),.2);

    transition:max-height .32s ease, opacity .28s ease, margin .32s ease;
}

.edu-cat-sublist.expanded{

    max-height:600px;

    opacity:1;

    margin:8px 0 0 !important;
}

.edu-cat-sublist .edu-list-item.sub{

    flex:1 1 170px;

    max-width:230px;

    width:auto;
}

.edu-cat-empty{

    font-size:11.5px;

    color:var(--jn-text-3);

    background:var(--jn-bg-3);

    border:1px solid rgba(var(--jn-overlay-rgb),.08);

    border-radius:10px;

    padding:11px 14px;
}


/* ===================================================== */
/*        محتوای صفحه‌ی «انواعِ اندیکاتورها» (دسته‌ها)         */
/* ===================================================== */

.edu-content-body{

    padding:22px 26px 30px;
}

.edu-content-body h2{

    margin:0 0 8px;

    font-size:16.5px;
}

.edu-content-body > p.lead{

    font-size:12.5px;

    color:var(--jn-text-3);

    line-height:1.9;

    max-width:62ch;

    margin:0 0 22px;

    text-align:justify;
}

.edu-cat-list{

    display:flex;

    flex-direction:column;

    gap:14px;
}

.edu-cat-card{

    display:grid;

    grid-template-columns:120px 1fr auto;

    gap:18px;

    background:var(--jn-bg-2);

    border:1px solid rgba(var(--jn-overlay-rgb),.08);

    border-radius:14px;

    padding:16px 18px;

    align-items:center;

    width:100%;

    text-align:right;

    font-family:inherit;

    font-size:inherit;

    color:inherit;

    cursor:pointer;

    transition:border-color .18s;
}

button.edu-cat-card:hover{

    border-color:rgba(var(--jn-cyan-rgb),.28);
}

.edu-cat-txt{

    min-width:0;
}

.edu-cat-card .diagram{

    width:120px;

    height:70px;

    background:var(--jn-bg-0);

    border:1px solid rgba(var(--jn-overlay-rgb),.08);

    border-radius:10px;
}

.edu-cat-card h3{

    font-size:13.5px;

    margin:0 0 5px;

    display:flex;

    align-items:center;

    gap:8px;
}

.edu-cat-card h3 .dot{

    width:7px;

    height:7px;

    border-radius:50%;

    flex-shrink:0;
}

.edu-cat-card p{

    font-size:11.5px;

    color:var(--jn-text-3);

    text-align:justify;

    line-height:1.8;

    margin:0;
}

@media(max-width:720px){

    .edu-cat-card{

        grid-template-columns:1fr;
    }

    .edu-cat-card .diagram{

        width:100%;
    }
}