/* منطقة المجموع */
.total-area { 
    margin-top: 30px; 
    text-align: center; 
    background: var(--primary); /* الخلفية الحمراء */
    color: #fff;                /* 🔥 النص أبيض دائماً لضمان الوضوح 🔥 */
    padding: 30px; 
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(217, 4, 41, 0.2);
    position: relative;         /* ضروري لضبط تموضع العناصر */
}

/* عنوان "التكلفة التقديرية" */
.total-area h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: #fff !important; /* التأكيد على اللون الأبيض */
}

/* سعر التكلفة */
.total-price { 
    font-size: 3rem; 
    font-weight: 900; 
    display: block;
    margin: 20px 0;
    direction: ltr;
    color: #fff !important; /* التأكيد على اللون الأبيض */
}

/* النص الصغير أسفل السعر */
.total-area p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8) !important; /* أبيض شفاف قليلاً للتمييز */
    margin-bottom: 25px;
}

/* زر "اطلب عرض سعر" */
.total-area a {
    display: inline-flex; align-items: center; gap: 10px;
    background: rgba(255, 255, 255, 0.2); /* خلفية شفافة للزر */
    color: #fff !important;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: bold;
    text-decoration: none;
    transition: 0.3s;
    border: 1px solid rgba(255, 255, 255, 0.5);
}
.total-area a:hover {
    background: #fff; /* يصبح الزر أبيض عند الهوفر */
    color: var(--primary) !important; /* ويصبح النص أحمر */
}