.toc {
    max-height: 180px;
    /* ارتفاع بسته شده */
    overflow: hidden;
    position: relative;
    transition: max-height 0.5s ease-in-out;
    background: var(--body-color-main) !important;
    /* انیمیشن نرم */
}

/* ایجاد هاله محو (Gradient) */
.toc::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    /* ارتفاع هاله */
    background: linear-gradient(to bottom, rgba(249, 249, 249, 0), var(--main-menu-one) 80%);
    pointer-events: none;
    /* تا جلوی کلیک دکمه را نگیرد */
    transition: opacity 0.3s;
}

/* کلاسی که وقتی باز می‌شود اضافه می‌شود */
.toc.expanded {
    max-height: 3000px;
    /* ارتفاع زیاد برای نمایش کامل */
}

/* وقتی باز است، هاله مخفی شود */
.toc.expanded::after {
    opacity: 0;
    pointer-events: none;
}

/* استایل دکمه‌ای که با JS ساخته می‌شود */
.toc-toggle-btn {
    display: block;
    width: 100%;
    padding: 10px;
    margin-top: -5px;
    /* کمی برود بالا تا به باکس بچسبد */
    background-color: var(--body-color-main);
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 5px 5px;
    /* گرد کردن گوشه‌های پایین */
    cursor: pointer;
    font-family: inherit;
    font-weight: bold;
    color: var(--black-text-color);
    text-align: center;
    transition: background 0.3s;
    margin-bottom: 20px;
}

.toc-toggle-btn:hover {
    background-color: var(--main-menu-one);
    margin-bottom: 20px;
}