/* ==========================================================================
   QUICK DONATION FIX - FINAL
   ========================================================================== */

/* 1. تنسيق الزر وإجباره على الزاوية اليسرى السفلية */
#quick-donation__trigger {
    position: fixed !important;
    left: 20px !important;
    bottom: 25px !important;
    top: auto !important;   /* منع التوسط العمودي */
    right: auto !important; /* منع التوسط الأفقي */
    margin: 0 !important;   /* إزالة أي هوامش خارجية */
    transform: none !important; /* إزالة أي تأثيرات حركية تسبب التشويه */
    z-index: 90 !important; /* طبقة منخفضة لتكون خلف النوافذ المنبثقة */

    /* الحجم والشكل */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: auto !important;
    min-width: 140px !important;
    height: 50px !important;
    padding: 0 20px !important;
    border-radius: 50px !important;
    
    /* الألوان */
    background: #004956 !important;
    border: 2px solid #fff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}

/* 2. إظهار النص إجبارياً */
#quick-donation__trigger span {
    display: block !important; /* تأكيد الظهور */
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 14px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    font-family: inherit !important;
    white-space: nowrap !important;
}

#quick-donation__trigger i {
    font-size: 20px !important;
    color: #fff !important;
    display: block !important;
}

/* 3. (الحل الجذري) إخفاء الزر عند طلب رقم الجوال */
/* تم إضافة الكلاس modal-is-open بناءً على الكود المصدري */
body.modal-is-open #quick-donation__trigger,
body.s-modal-open #quick-donation__trigger,
html.is-scroll-locked #quick-donation__trigger {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 4. الفقاعة العلوية */
#quick-donation__trigger::before {
    content: "فاعل خير";
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%);
    background: #14b87a;
    color: #fff;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    pointer-events: none;
}