/* Add custom CSS styles below */ 

/* ==================================================
   جمعية البر الخيرية بالخنقة - صفحات منتجات التبرع
   متوافق مع المنتجات العادية والمنتجات ذات العداد
   ================================================== */


/* ---------- العنوان الفرعي ---------- */

.khanqah-subtitle {
    display: block;
    width: 100%;
    margin-top: 8px !important;
    margin-bottom: 12px !important;
    line-height: 1.8;
}


/* ---------- خيارات مبالغ التبرع ---------- */

.khanqah-donation-box {
    width: 100%;
    margin-top: 8px !important;
    margin-bottom: 12px !important;
}


/* ---------- منطقة المبلغ المخصص / العداد ---------- */

.khanqah-custom-donation-box {
    width: 100%;
    margin-top: 8px !important;
    margin-bottom: 16px !important;
}


/* نحافظ على العرض الكامل لمكونات المبلغ */

.khanqah-custom-donation-box
.s-product-options-donation-input-group {
    width: 100%;
}


.khanqah-custom-donation-box
.s-product-options-donation-input-group input {
    width: 100%;
}



/* ==================================================
   تحسينات الجوال فقط
   ================================================== */

@media (max-width: 767px) {


    /* ---------- العنوان الفرعي ---------- */

    .khanqah-subtitle {
        width: 100%;
        margin-top: 5px !important;
        margin-bottom: 10px !important;
        line-height: 1.65;
    }


    /* ---------- خيارات التبرع ---------- */

    .khanqah-donation-box {
        width: 100%;
        margin-top: 6px !important;
        margin-bottom: 8px !important;
    }


    /*
     * لا نغير ارتفاع الحاوية هنا
     * حتى لا نتسبب في ضغط عداد مبلغ التبرع.
     */

    .khanqah-custom-donation-box {
        width: 100%;
        margin-top: 6px !important;
        margin-bottom: 14px !important;
    }


    /* ---------- خانة المبلغ المخصص ---------- */

    .khanqah-custom-donation-box
    .s-product-options-donation-input-group {
        width: 100%;
    }


    .khanqah-custom-donation-box
    .s-product-options-donation-input-group input {
        width: 100% !important;
        min-height: 52px;
        padding: 10px 14px;
        font-size: 17px;
        border-radius: 10px;
    }



    /* ==================================================
       زر أضف لسلة التبرعات
       ================================================== */

    salla-add-product-button[product-type="donating"] {
        display: block;
        width: 100% !important;
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }


    salla-add-product-button[product-type="donating"]
    .s-add-product-button-main {
        width: 100% !important;
    }


    salla-add-product-button[product-type="donating"]
    salla-button {
        display: block;
        width: 100% !important;
    }


    salla-add-product-button[product-type="donating"]
    .s-button-element {

        width: 100% !important;

        min-height: 58px !important;

        border-radius: 12px !important;

        background: #1B8CB5 !important;

        border: 1px solid #1B8CB5 !important;

        color: #ffffff !important;

        font-size: 17px !important;

        font-weight: 700 !important;

        box-shadow:
            0 4px 12px rgba(0, 0, 0, 0.08) !important;

        transition:
            opacity 0.2s ease,
            transform 0.2s ease;
    }


    /* النص والأيقونة باللون الأبيض */

    salla-add-product-button[product-type="donating"]
    .s-button-element * {
        color: #ffffff !important;
    }


    /* عند الضغط */

    salla-add-product-button[product-type="donating"]
    .s-button-element:active {
        transform: scale(0.99);
        opacity: 0.92;
    }

}