/* ========================================================
   استایل مدال اختصاصی و مدرن آلتین‌بافت (راست‌چین کامل)
   ======================================================== */

/* تنظیمات پایه مدال */
.custom-rtl-modal {
    direction: rtl !important;
    font-family: Tahoma, 'Segoe UI', Arial, sans-serif !important;
    text-align: right !important;
}

/* تیره شدن پس‌زمینه */
.modal-backdrop.show {
    opacity: 0.55 !important;
}

/* کادر و ابعاد مدال */
#myModal .modal-dialog,
.custom-rtl-modal .modal-dialog {
    width: 380px !important;
    max-width: 90vw !important;
    min-width: 280px !important;
    height: auto !important;
    min-height: auto !important;
    margin: 1.75rem auto !important;
}

/* کادر سفید داخلی */
#myModal .modal-content,
.custom-rtl-modal .modal-content {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 22px 20px 20px 20px !important;
    border-radius: 16px !important;
    border: none !important;
    background: #ffffff !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;
    box-sizing: border-box !important;
}

/* --------------------------------------------------------
   عنوان مدال (کاملاً راست‌چین با قابلیت قرارگیری آیکون)
   -------------------------------------------------------- */
#myModal #myModalLabelHeader,
.custom-rtl-modal h2,
.custom-rtl-modal .modal-header-inline {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* چسبیدن کامل به راست */
    gap: 8px !important; /* فاصله آیکون تا متن */
    width: 100% !important;
    font-size: 17px !important;
    font-weight: bold !important;
    color: #2c2c2c !important;
    margin: 0 0 14px 0 !important;
    text-align: right !important;
}

    /* آیکون در صورت قرارگیری در کنار عنوان */
    #myModal #myModalLabelHeader img,
    .custom-rtl-modal h2 img,
    .custom-rtl-modal .modal-header-inline img {
        width: 24px !important;
        height: 24px !important;
        margin: 0 !important;
        object-fit: contain !important;
    }

/* دکمه بستن (ضربدر سمت چپ) */
.custom-rtl-modal .close-btn {
    position: absolute !important;
    top: 15px !important;
    left: 15px !important;
    right: auto !important;
    font-size: 22px !important;
    line-height: 1 !important;
    color: #a0aec0 !important;
    border: none !important;
    background: transparent !important;
    outline: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: color 0.2s !important;
}

    .custom-rtl-modal .close-btn:hover {
        color: #d33c4b !important;
    }

/* --------------------------------------------------------
   بدنه و متن پیام مدال
   -------------------------------------------------------- */
#myModal #myModalBody,
.custom-rtl-modal #myModalBody {
    min-height: auto !important;
    height: auto !important;
    padding: 5px 0 15px 0 !important;
    text-align: right !important; /* راست‌چین شدن متن پیام */
}

    /* آیکون جداگانه وسط بدنه (در صورت استفاده) */
    #myModal #myModalBody img {
        width: 50px !important;
        height: 50px !important;
        display: block !important;
        margin: 5px auto 12px auto !important;
    }

#myModal #myModalLabel,
.custom-rtl-modal p {
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: #555555 !important;
    text-align: right !important; /* راست‌چین شدن متن */
    margin: 0 0 15px 0 !important;
    white-space: normal !important;
    word-break: break-word !important;
}

/* --------------------------------------------------------
   دکمه تایید (قرمز آلتین‌بافت)
   -------------------------------------------------------- */
#myModal .action-btn,
.custom-rtl-modal .action-btn {
    width: 100% !important;
    height: 44px !important;
    padding: 0 !important;
    line-height: 44px !important;
    background: linear-gradient(135deg, #d33c4b, #e05361) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(211, 60, 75, 0.3) !important;
    transition: all 0.25s ease !important;
    margin-top: 5px !important;
}

    #myModal .action-btn:hover,
    .custom-rtl-modal .action-btn:hover {
        background: linear-gradient(135deg, #b82d3b, #cb404e) !important;
        box-shadow: 0 6px 16px rgba(211, 60, 75, 0.45) !important;
    }