/* کارت toast کمی مدرن‌تر */
#toast-container > .toast {
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,.22);
    opacity: 0.98;
}

/* عنوان و متن */
#toast-container > .toast .toast-title {
    font-weight: 700;
    margin-bottom: 4px;
}

#toast-container > .toast .toast-message {
    line-height: 1.35;
    word-break: break-word;
}

/* فاصله بین toast ها */
#toast-container > div {
    margin-top: 10px;
}

/* دکمه بستن تمیزتر */
#toast-container > .toast .toast-close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 18px;
    line-height: 1;
    opacity: .85;
    text-shadow: none;
}

#toast-container > .toast .toast-close-button:hover {
    opacity: 1;
}

/* اگر صفحه RTL بود، فقط همان موقع راست‌چین شود */
html[dir="rtl"] #toast-container > .toast {
    direction: rtl;
    text-align: right;
    padding-right: 52px; /* جا برای close */
}

html[dir="rtl"] #toast-container > .toast .toast-close-button {
    right: auto;
    left: 10px; /* در RTL بهتره سمت چپ */
}
/* ---- Fix icon + text overlap (LTR) ---- */
#toast-container > .toast {
    /* جای کافی برای آیکن سمت چپ */
    padding: 14px 16px 14px 52px !important;

    /* آیکن را به جای درست برگردان */
    background-position: 16px 18px !important;
    background-size: 20px 20px; /* اختیاری، بعضی تم‌ها بهتر میشه */
}

/* اگر عنوان داری، فاصله‌اش با آیکن بهتر میشه */
#toast-container > .toast .toast-title,
#toast-container > .toast .toast-message {
    margin-left: 0 !important;
}

/* close button در LTR بالا راست */
#toast-container > .toast .toast-close-button {
    position: absolute;
    top: 10px;
    right: 10px;
}

/* ---- RTL support (only when page is RTL) ---- */
html[dir="rtl"] #toast-container > .toast {
    padding: 14px 52px 14px 16px !important;   /* آیکن سمت راست */
    background-position: calc(100% - 16px) 18px !important;
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] #toast-container > .toast .toast-close-button {
    right: auto;
    left: 10px;
}