/* Add custom CSS styles below */ 
/* نجعل الحاوية الرئيسية عمودية */
.main-content.flex.flex-col.gap-5 {
    display: flex !important;
    flex-direction: column !important;
}

/* نخلي صندوق التبرع أول عنصر */
.main-content.flex.flex-col.gap-5 form.product-direct-options {
    order: 1 !important;
}

/* نخلي الوصف بعده */
.main-content.flex.flex-col.gap-5 .product__description {
    order: 2 !important;
}
/* تكبير زر أضف لسلة التبرعات + لون أغمق */
.s-button-element.s-button-primary {
    font-size: 20px !important;             /* تكبير الخط */
    padding: 16px 0 !important;             /* زيادة ارتفاع الزر */
    border-radius: 12px !important;         /* تدوير جميل */
    background-color: #005c61 !important;   /* لون أغمق */
    color: #fff !important;                 /* لون النص */
    width: 100% !important;                 /* عرضه كامل */
    font-weight: 700 !important;            /* خط أثقل */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);  /* ظل خفيف جميل */
}

/* تحسين حالة المرور */
.s-button-element.s-button-primary:hover {
    background-color: #00484c !important;   /* درجة أغمق عند المرور */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
/* تكبير خط الوصف وجعله أوضح */
.product__description,
.product__description p,
.product__description span,
.product__description div,
#more-content p,
#more-content span {
    font-size: 20px !important;     /* تكبير الخط */
    line-height: 1.9 !important;    /* زيادة تباعد الأسطر */
    color: #222 !important;         /* لون أوضح */
    font-weight: 400 !important;    /* سماكة مريحة للقراءة */
}