/**
 * استایل‌های پایه برای ویجت نمایش بیشتر متن
 * Version: 1.2
 */

/* کانتینر اصلی ویجت */
.smt-container {
    position: relative; /* ضروری برای جای‌گیری صحیح افکت محو شدگی */
    direction: rtl;
    overflow: hidden;   /* کمک می‌کند تا محتوا از گوشه‌های گرد بیرون نزند */
}

/* جعبه‌ای که متن اصلی در آن قرار دارد */
.smt-text-content {
    overflow: hidden;   /* محتوای اضافی را پنهان می‌کند */
    position: relative; /* ضروری برای جای‌گیری صحیح افکت محو شدگی */
    /* انیمیشن نرم برای باز و بسته شدن */
    transition: max-height 0.5s ease-in-out; 
}

/* افکت محو شدگی در انتهای متن (مهم‌ترین بخش) */
.smt-text-content::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 70px; /* ارتفاع ناحیه محو شده */
    pointer-events: none; /* اجازه می‌دهد روی متن زیر این لایه کلیک شود */
    transition: opacity 0.4s ease; /* انیمیشن نرم برای پنهان شدن خود افکت */
    
    /* * این بخش گرادینت را با استفاده از یک متغیر CSS ایجاد می‌کند.
     * رنگ این گرادینت (--smt-fade-color) از طریق کنترل "رنگ افکت محو شدگی" در تنظیمات ویجت تعیین می‌شود.
     * اگر رنگی تنظیم نشود، به صورت پیش‌فرض سفید خواهد بود.
    */
    background: linear-gradient(to bottom, transparent, var(--smt-fade-color, #ffffff) 90%);
}

/* زمانی که محتوا باز می‌شود، افکت محو شدگی را پنهان کن */
.smt-container.expanded .smt-text-content::after {
    opacity: 0;
}

/* پوشش دور دکمه برای مدیریت بهتر چینش و فاصله */
.smt-button-wrapper {
    /* فاصله از بالا و چینش متن (که دکمه را وسط‌چین می‌کند) از تنظیمات ویجت اعمال می‌شود */
}

/* استایل‌های پایه دکمه */
.smt-toggle-btn {
    border: none;
    cursor: pointer;
    font-weight: bold;
    user-select: none; /* جلوگیری از انتخاب متن دکمه */
    line-height: 1;    /* برای تراز عمودی بهتر متن دکمه */
    display: inline-block; /* برای اعمال صحیح استایل‌های چینش */

    /* انیمیشن نرم برای تمام تغییرات ظاهری دکمه (رنگ، پس‌زمینه، کادر و...) */
    transition: all 0.3s ease;
}