/* homepage.css - ملف CSS مُنظم ومُصحح */

/*
   ================================================
   1. تنسيق السلايدر (Slider)
   ================================================
*/
.main-slider-section {
    position: relative;
    width: 100%;
    overflow: hidden;
	margin-top: 0 !important; /* لضمان إلغاء أي هامش علوي موروث */
    padding-top: 0 !important;
   	
}

.slider-container {
    display: flex; 
    transition: transform 0.5s ease-in-out; 
}

.slider-item {
    min-width: 100%; 
    position: relative;
    height: 400px; 
}

.slider-image {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
}

/* التحكم في موضع الكتابة على السلايدر */
.slider-content {
    position: absolute;
    bottom: 20px; 
    right: 10%; 
    left: 10%;
    transform: none; 
    color: #fff;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 20px;
    border-radius: 8px;
}

/* -------------------- الأزرار والنقاط -------------------- */

.slider-controls button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    z-index: 10;
    font-size: 1.5rem;
    line-height: 1;
    transition: background 0.3s;
}

.slider-controls button:hover {
    background: rgba(0, 0, 0, 0.7);
}

/* ملاحظة: تم إزالة كود PHP وتعيين الموضع ثابت. 
   إذا كان RTL، يمكن تعديل الـ JS أو استخدام كلاس RTL منفصل
   لكننا نعتمد هنا على Left/Right الثابت.
*/
.slider-prev {
    /* الافتراض هو الاتجاه الأيسر */
    left: 20px; 
}

.slider-next {
    /* الافتراض هو الاتجاه الأيمن */
    right: 20px; 
}

.slider-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 8px;
}

.dot {
    height: 12px;
    width: 12px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.3s;
}

.dot.active {
    background-color: #007bff;
    transform: scale(1.2);
}


/*
   ================================================
   2. تنسيق الخدمات/المميزات (Features)
   ================================================
*/
.features-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* توزيع المسافة بين البطاقات */
    margin-left: -15px; /* هامش تعويضي لليمين واليسار */
    margin-right: -15px;
    margin-top: 30px;
}

.feature-item {
    display: flex; 
    flex-direction: column;
    align-items: center; 
    text-align: center; 
    
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%; 
    width: calc(33.3333% - 30px); 
    margin-left: 15px; 
    margin-right: 15px; 
    margin-bottom: 30px;
}

.feature-item:hover {
    /* تأثير الرفع والتظليل */
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.feature-item .feature-icon {
    font-size: 3rem;
    color: #007bff;
    margin-bottom: 15px;
    transition: color 0.3s ease;
}

.feature-item:hover .feature-icon {
    /* تغيير لون الأيقونة عند مرور الفأرة */
    color: #0056b3; 
}


/*
   ================================================
   3. تنسيق الأقسام الثابتة (Static Sections)
   ================================================
*/

/* تنسيق الأعمدة (Flexbox بدلاً من Bootstrap) */
.static-content-grid .content-wrapper {
    display: flex; 
    gap: 30px; 
    flex-wrap: wrap; 
	margin-bottom: 30px;
}

.static-content-grid .content-block {
    flex: 1; 
	width: calc(33.3333% - 20px);
    min-width: 300px; 
    /* تم إزالة الظل هنا ليتم وضعه على البطاقة الداخلية */
    border-radius: 8px;
    padding: 0; /* تم إزالة الحشو ليتم وضعه على البطاقة */
}

/* تنسيق البطاقة الداخلية للتأثير والتساوي في الارتفاع */
.static-content-grid .content-block .card {
    height: 100%;
    border: 1px solid #ddd;
    padding: 20px; /* الحشو داخلي */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* ظل بسيط */
    border-radius: 8px;
    /* الحركة والانتقال */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: flex;
    flex-direction: column;
    align-items: center; /* 👈 الإضافة الحاسمة: توسيط العناصر أفقياً */
    text-align: center;
}

/* تأثير مرور الفأرة على الأقسام الثابتة */
.static-content-grid .content-block .card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
    border-color: #007bff;
}


/*
   ================================================
   4. تنسيق النصوص المقيدة (Clamping Text)
   ================================================
*/
.feature-item p,
.text-clamped-3 {
    /* تحديد ارتفاع ثابت للوصف (3 أسطر) */
    height: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* الحد الأقصى للأسطر المرئية */
    -webkit-box-orient: vertical;
    margin-bottom: 15px;
    line-height: 1.5; /* لتحسين شكل الأسطر */
}

.card-text.text-clamped-3 {
    /* إلغاء المسافة السفلية للبطاقات */
    margin-bottom: 0;
}
/* -------------------- أيقونات الأقسام الثابتة -------------------- */

.section-icon {
    /* 🚨 ضمان التوسيط الأفقي: 🚨 */
    text-align: center; /* للتأكيد على توسيط العنصر الأب */
    margin-bottom: 20px;
}

.section-icon i {
    font-size: 3.5rem; 
    /* 🚨 جعل الأيقونة نفسها تتوسط البلوك عند الحاجة 🚨 */
    display: inline-block; 
    transition: transform 0.3s ease; 
}

/* تحريك الأيقونة داخل البطاقة عند مرور الفأرة عليها */
.static-content-grid .content-block .card:hover .section-icon i {
    transform: rotate(3deg) scale(1.05);
}

/*
   ================================================
   4. تنسيق الخريطة التفاعلية (Infographic Wheel) - كود مُصحح نهائي (إصدار الشعار)
   ================================================
*/
.interactive-infographic {
    padding-top: 50px;
    padding-bottom: 50px;
}

.infographic-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 550px; 
    
    /* 🎨 التدرج اللوني الجديد: من الأعلى (#f7f7f7) إلى الأسفل (#eeeeee) */
    background: linear-gradient(to bottom, #f7f7f7 0%, #eeeeee 100%); 
    
    border-radius: 20px; 
    padding: 30px; 
    
    /* يمكن زيادة الظل قليلاً ليتناسب مع الخلفية الأغمق */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); 
}

/* -------------------- الدائرة الرئيسية (Wheel) -------------------- */
.info-wheel {
    position: relative;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    
    border: 3px solid #ccc; /* جعل الحد أغمق قليلاً للبروز */
    
    /* 🎨 اللمسة الجمالية الجديدة: ظل خارجي وداخلي معاً */
    box-shadow: 
        /* 1. الظل الداخلي (Inset Shadow) لتبدو محفورة */
        inset 0 0 15px rgba(0, 0, 0, 0.15), 
        /* 2. الظل الخارجي (الناعم) لتبقى بارزة */
        0 0 20px rgba(0, 0, 0, 0.05);
}

.center-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250px; /* الحجم المُعدل */
    height: 250px; /* الحجم المُعدل */
    background: linear-gradient(135deg, #0056b3 0%, #00a0ff 100%); 
    /* #0056b3: أزرق غامق / #00a0ff: أزرق فاتح لامع */
    color: white;
    border-radius: 50%;
    display: flex; 
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 2;
    /* زيادة الظل لجعله أكثر بروزاً */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    /* تغيير التحول ليكون على جميع الخصائص المرئية (إضاءة/ظل) */
    transition: all 0.5s ease-in-out;
	overflow: hidden; /* لمنع تجاوز محتوى الدائرة */
}
.center-circle:hover {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); /* ظل أعمق */
    /* يمكنك إضافة تأثير ScaleUp خفيف جداً هنا */
}

/* تنسيق محتوى الشعار الافتراضي */
.center-circle .center-default-content {
    display: flex; 
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%; 
    width: 100%; 
    z-index: 4;
}

    
    /* للتأكد من أنها لا تتأثر بـ overflow: hidden إلا إذا كانت تجاوزت 250px */
    position: relative !important; 
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    
    border-radius: 50%; 
    object-fit: contain; 
}

/* إخفاء النص القديم لظهور الشعار فقط */
.center-circle .center-default-content h3, 
.center-circle .center-default-content p {
    display: none !important; 
}


/* -------------------- نقاط التفاعل (الأجزاء) -------------------- */
/* (تنسيقات الأجزاء 1، 2، 3، 4، 5 تبقى كما هي) */

.wheel-item {
    position: absolute;
    width: 150px; 
    height: 80px; 
    /*line-height: 80px;*/ 
    background-color: #f8f8f8;
    border: 1px solid #ccc;
    border-radius: 60% 60% 10px 10px / 100px 100px 10px 10px; 
    cursor: pointer;
    text-align: center;
    /*white-space: nowrap;*/
    z-index: 3;
    transition: all 0.3s ease-in-out;
    padding: 0 10px; 
	display: flex;
	flex-direction: column; /* جعل العناصر داخل النقطة تتراصف عمودياً */
    justify-content: center; /* وسطة عمودية */
    align-items: center; /* وسطة أفقية */
    text-align: center;
    padding: 5px 10px; /* ضبط الـ Padding */
}
.wheel-item:hover, .wheel-item.active {
    background-color: #007bff;
    color: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.wheel-item .item-title {
    font-weight: bold;
    display: inline-block; 
}
.wheel-item i {
    margin: 0 5px;
}

/* تحديد مواقع الأجزاء الخمسة المُصححة */
/* الجزء 1: علوي يمين (كبير) */
.wheel-item[data-item-id="1"] { 
    top: 65px; 
    right: 25px; 
    transform: rotate(40deg); 
    width: 180px;
    background: linear-gradient(90deg, #ADD8E6, #4682B4) !important; 
    color: #FFF !important;	
}

/* الجزء 2: علوي يسار (كبير) */
.wheel-item[data-item-id="2"] { 
    top: 65px; 
    left: 25px; 
    transform: rotate(-40deg); 
    width: 180px; 
	background: linear-gradient(90deg, #F08080, #B22222) !important; 
    color: #FFF !important;
}

/* الجزء 3: سفلي أوسط (موقعه bottom: 5px) */
.wheel-item[data-item-id="3"] { 
    bottom: 5px; 
    left: 50%; 
    transform: translateX(-50%) scaleY(-1) rotate(0deg); 
    width: 150px; 
	background: linear-gradient(90deg, #F0E68C, #DAA520) !important; 
    color: #000 !important;
}


/* الجزء 4: سفلي يمين (تم نقله إلى اليسار) */
.wheel-item[data-item-id="4"] { 
    bottom: 90px !important; 
    left: 1px !important;
    background: linear-gradient(90deg, #90EE90, #228B22) !important; 
    color: #FFF !important;	
    transform: scaleY(-1) rotate(-50deg) !important; 
    width: 170px; 
}

/* الجزء 5: سفلي يسار (تم نقله إلى اليمين) */
.wheel-item[data-item-id="5"] { 
    bottom: 90px !important; 
    right: 1px !important; 
	background: linear-gradient(90deg, #DDA0DD, #800080) !important; 
    color: #FFF !important;
    transform: scaleY(-1) rotate(50deg) !important; 
    width: 170px; 
}

/* -------------------- الشرح التفاعلي داخل الدائرة (Popup in Center) -------------------- */
.center-circle .info-popup {
    /* 🚨🚨 إخفائه بشكل افتراضي (يظهر عبر JS) 🚨🚨 */
    display: none; 
    position: absolute; 
    top: 0;
    left: 0;
    /* 🚨 ضمان أن النص مرئي 🚨 */
    color: white !important; 
    background: transparent !important;
    padding: 15px; 
    height: 100%;
    width: 100%;
    z-index: 5 !important; /* 🚨🚨 يجب أن يكون أعلى من الشعار (z-index: 4) 🚨🚨 */
    /* لضمان رؤية الـ Popup عندما يظهر */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* 🚨🚨 إخفاء الـ Popup افتراضياً بعد تعيين Flexbox له 🚨🚨 */
/* هذا السطر مهم لضمان أن الـ JS يقوم بإظهاره/إخفائه بشكل صحيح */
.center-circle .info-popup {
    display: none;
}


.center-circle .info-popup h3 {
    font-size: 1.2rem;
    margin-bottom: 8px;
    color: white !important; 
}

.center-circle .info-popup p {
    font-size: 0.9rem;
    line-height: 1.3;
    height: 4.2em; 
    overflow: hidden;
    color: #f1f1f1 !important; 
}


/* -------------------- تصحيح اتجاه النص في الأقسام المقلوبة -------------------- */
.wheel-item[data-item-id="3"] .item-title,
.wheel-item[data-item-id="4"] .item-title,
.wheel-item[data-item-id="5"] .item-title,
.wheel-item[data-item-id="3"] i,
.wheel-item[data-item-id="4"] i,
.wheel-item[data-item-id="5"] i {
    transform: scaleY(-1) translateY(5px); 
    display: inline-block; 
}

/* -------------------- تنسيق الشاشات الصغيرة (Responsive) -------------------- */
@media (max-width: 768px) {
    /* (إبقاء تنسيقات الـ Responsive كما هي) */
    .infographic-wrapper { min-height: 500px; }
    .info-wheel { width: 350px; height: 350px; }
    .center-circle { width: 120px; height: 120px; }
    .wheel-item { width: 120px; height: 45px; line-height: 45px; font-size: 0.8rem; }

    /* الأجزاء العلوية */
    .wheel-item[data-item-id="1"] { top: 15%; right: 0%; transform: rotate(45deg); width: 150px; }
    .wheel-item[data-item-id="2"] { top: 15%; left: 0%; transform: rotate(-45deg); width: 150px; }
    
    /* الجزء 3: سفلي أوسط */
    .wheel-item[data-item-id="3"] { 
        bottom: 20px; left: 50%; 
        transform: translateX(-50%) rotate(0deg); 
        width: 150px; 
        border-radius: 10px 10px 60% 60% / 10px 10px 100% 100%; 
    }

    /* الأجزاء 4 و 5 (مقلوبة ومتبادلة) */
    .wheel-item[data-item-id="4"] { bottom: 40px; left: 5px; transform: scaleY(-1) rotate(65deg); width: 170px; }
    .wheel-item[data-item-id="5"] { bottom: 40px; right: 5px; transform: scaleY(-1) rotate(-65deg); width: 170px; }
    
    /* تصحيح النص */
    .wheel-item[data-item-id="3"] .item-title, .wheel-item[data-item-id="4"] .item-title, .wheel-item[data-item-id="5"] .item-title,
    .wheel-item[data-item-id="3"] i, .wheel-item[data-item-id="4"] i, .wheel-item[data-item-id="5"] i {
        transform: scaleY(-1); 
        display: inline-block; 
    }
 }
/*
   ================================================
    تنسيق الخريطة التفاعلية (Infographic Wheel)
   ================================================
   نهاية الخريطه التفاعليه
*/

/* 1. إعداد الحاوية الرئيسية (لجعل المربعات متجاورة) */
.cta-flex-container {
    display: flex; /* 🚨 تفعيل Flexbox 🚨 */
    justify-content: center; /* وسطة العناصر أفقياً */
    align-items: stretch; /* لجعلهم بنفس الارتفاع */
    gap: 20px; /* مسافة بين المربعين */
    flex-wrap: wrap; /* للسماح لهم بالنزول لسطر جديد على الشاشات الصغيرة */
    padding: 20px; /* حشو داخلي للحاوية */
}

/* 2. تنسيق الأقسام الفردية (لجعلها أقرب للمربع) */
.cta-split-item {
    /* 🚨 تحديد عرض مرن ليتقاسموا المساحة 🚨 */
    flex: 1; /* لكل عنصر أن يأخذ حصة متساوية من المساحة المتاحة */
    max-width: 450px; /* الحد الأقصى للعرض لكل مربع */
    min-width: 300px; /* الحد الأدنى للعرض قبل النزول لسطر جديد */
    min-height: 280px; /* ارتفاع مناسب ليصبح مربعاً تقريباً */
    
    padding: 30px; 
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;
    text-align: center;
    
    border-radius: 10px; 
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15); 
    
    transition: all 0.4s ease-in-out;
}

/* 3. تنسيق الألوان الجديدة (فاتحة وجذابة) */
.primary-focus {
    /* أزرق فاتح وودي */
    background: linear-gradient(135deg, #6bb9f0 0%, #3498db 100%); 
}

.secondary-focus {
    /* أخضر مريح (بديل للأرجواني الداكن) */
    background: linear-gradient(135deg, #a8d582 0%, #8bc34a 100%); 
}
.cta-split-item.special-focus {
    background-color: #007bff; /* لون أزرق فاتح مميز */
    /* أو يمكنك استخدام لون أخضر مثلاً: background-color: #28a745; */
    border: 3px solid #ffffff; /* الإطار الأبيض الذي أضفناه في HTML */
    box-shadow: 0 0 20px rgba(0, 123, 255, 0.7); /* ظل حول البطاقة لزيادة التميز */
}

/* زر الحفظ الأبيض داخل البطاقة المميزة */
.cta-split-item.special-focus .btn-white-fill {
    background-color: #ffffff;
    color: #007bff; /* لون النص داخل الزر بنفس لون خلفية البطاقة */
    border: none;
    font-weight: bold;
}

/* زر إطار أبيض (للبطاقات الأخرى) */
.btn-white-border {
    border: 2px solid #ffffff;
    background-color: transparent;
    color: #ffffff;
}

/* 4. تنسيق الأزرار */
.btn-white-border {
    background-color: transparent;
    color: white;
    border: 2px solid white; 
    padding: 8px 30px; 
    border-radius: 50px;
    font-weight: 600;
}

/* 5. تنسيق النصوص */
.cta-split-item h3 {
    font-size: 1.7rem; 
}
.cta-split-item .small-desc {
    font-size: 0.9rem; 
    margin-bottom: 20px;
    opacity: 0.85;
}

/* 6. تأثير التفاعل (Hover) */
.cta-split-item:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    transform: translateY(-5px);
}
.btn-white-border:hover {
    background-color: white;
    color: #3498db; /* يتغير لون النص للون الأزرق الأساسي */
}

/* تصحيح الشاشات الصغيرة: عندما لا يتسعوا، ينزلون لسطر جديد */
@media (max-width: 767px) {
    .cta-flex-container {
        flex-direction: column; /* الأقسام فوق بعضها على الموبايل */
        align-items: center; /* وسطة العناصر في المنتصف */
    }
    .cta-split-item {
        margin-bottom: 20px; /* مسافة بين المربعات في الوضع العمودي */
        width: 100%; /* تأخذ عرض 100% على الموبايل */
        max-width: 400px; /* لتبدو بشكل جيد حتى على الموبايل */
    }
}

/* ==================================== */
/* 3. تنسيق شبكة المنتجات (Product Grid) */
/* ==================================== */

/* التنسيق العام لصفحة المنتجات */
.products-list {
    background-color: #f8f8f8;
    padding: 50px 0;
}

/* 🚨 أهم جزء لضمان 3 أعمدة متجاورة 🚨 */
.products-grid {
    display: grid;
    /* 3 أعمدة بأبعاد متساوية (1fr) */
    grid-template-columns: repeat(3, 1fr); 
    gap: 20px; /* مسافة بين البطاقات */
    margin-top: 50px;
}

/* تنسيق الحاوية لكل بطاقة (اختياري لكنه يساعد في المرونة) */
.grid-item {
    /* يجعل العنصر يتبع نظام Grid */
}

/* ---------------------------------- */
/* تنسيق البطاقة الفعلية (.product-card) */
/* ---------------------------------- */
.product-card {
    background-color: #fff;
    border-radius: 10px; 
    padding: 20px; 
    /* الظل الأنيق الذي يعطيها مظهر البطاقة */
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-height: 320px; 
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* يدفع العناصر إلى الأعلى والأسفل */
    height: 100%; /* ضمان أن كل البطاقات بنفس الارتفاع */
	position: relative; /* مهم لـ z-index للأطفال */
    z-index: 1;
	pointer-events: auto;
}

/* تأثير التفاعل (Hover) */
.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); 
}

/* تنسيق العنوان والوصف */
.product-name {
    font-size: 1.3rem;
    color: #0f4c75; 
    margin-bottom: 8px;
}
.product-description {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
    margin-bottom: 15px;
}

/* ---------------------------------- */
/* تنسيق قسم الميزات (النسبة المئوية) */
/* ---------------------------------- */
.product-features {
    /* خصائص الإطار المميز */
    background-color: #f7f9fd; /* خلفية فاتحة لتمييز المربع */
    border: 1px solid #e0e6f0; /* حدود ناعمة */
    border-radius: 8px; /* حواف دائرية */
    padding: 20px; /* توسيع داخلي */
    margin-bottom: 20px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* ظل خفيف */
    text-align: center; /* توسيط محتوى البطاقة بالكامل (للأمان) */
}
.rate-item {
    display: flex; /* تحويل إلى فليكس بوكس */
    flex-direction: column; /* **المفتاح: جعل العناصر تتكدس عمودياً** */
    align-items: center; /* **المفتاح: توسيط العناصر أفقياً داخل العمود** */
    justify-content: center; 
    margin: 0;
    font-size: 1rem;
    font-weight: 500; 
    color: #1E3A8A; 
}
.rate-item i {
    color: #4CAF50; /* لون الأيقونة */
    margin-bottom: 8px; /* فصل الأيقونة عن النص */
    font-size: 2.0rem; /* تكبير الأيقونة */
}

/* تنسيق التسمية */
.rate-item span {
    font-size: 0.95rem;
    color: #777;
    margin-bottom: 5px; /* فصل التسمية عن الرقم */
}

/* تنسيق النسبة المئوية نفسها */
.rate-item strong {
    color: #D9534F; /* لون مميز للنسبة (أحمر بارز) */
    font-size: 1.5rem; /* تكبير الرقم لتمييزه */
    font-weight: 600;
}

/* ---------------------------------- */
/* تنسيق الأزرار (Card Actions) */
/* ---------------------------------- */
.card-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
	position: relative; /* قد تحتاجها الأزرار */
    z-index: 5;
}

/* تنسيق زر الشروط (الجديد) */
.btn-product-terms {
    background-color: #6c757d; 
    color: white;
    padding: 8px 15px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
    font-size: 0.9rem;
}

.btn-product-terms:hover {
    background-color: #5a6268;
}

/* تنسيق زر التفاصيل */
.btn-product-details {
    display: inline-block;
    background-color: #00a0ff; 
    color: white;
    padding: 8px 15px;
    border-radius: 50px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
    font-size: 0.9rem;
    flex-grow: 1; /* للسماح له بالتمدد إذا كان هناك مساحة */
    margin-inline-start: 10px;
	position: relative; 
    z-index: 10; /* 🚨 نرفعه لأعلى مستوى لضمان الضغط عليه 🚨 */
    cursor: pointer;
	pointer-events: auto !important;
}

.btn-product-details:hover {
    background-color: #007bff;
}

/* ---------------------------------- */
/* Media Queries (لضمان المرونة) */
/* ---------------------------------- */
@media (max-width: 1200px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr); /* عمودين على الأجهزة اللوحية */
    }
}

@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: 1fr; /* عمود واحد على الموبايل */
        gap: 15px;
    }
}

/* تنسيق نص اللغة العربية (لضمان عمل أيقونة السهم) */
[dir="rtl"] .btn-product-details i {
    transform: scaleX(-1);
    margin-inline-start: 5px;
}
/* ==================================== */
/* 4. تنسيق صفحة اتصل بنا (Contact Form) */
/* ==================================== */

.contact-section {
    background-color: #f4f7f9;
    padding-top: 50px; /* إضافة مسافة علوية لراحة العين */
    padding-bottom: 50px;
}

.contact-heading {
    color: #0f4c75;
    font-weight: 700;
}

.contact-subheading {
    color: #6c757d;
    font-size: 1.1rem;
}

/* ---------------------------------- */
/* تخطيط الحاوية والأعمدة (دمج تعريفات الأعمدة) */
/* ---------------------------------- */
.contact-content {
    display: flex; /* لتمكين الأعمدة على نفس السطر */
    flex-wrap: wrap;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); /* ظل خفيف للحاوية البيضاء */
    overflow: hidden; 
}

/* تعريفات الأعمدة (Col-MD) لـ RTL/LTR */
.col-md-4, .col-md-8 {
    box-sizing: border-box; /* لضمان أن الـ padding لا يزيد العرض */
}
.col-md-4 {
    width: 33.3333%;
}
.col-md-8 {
    width: 66.6666%;
}
/* دمج Float بناءً على اتجاه LTR (افتراضي) و RTL */
.col-md-4, .col-md-8 {
    /* يُستخدم float: left/right إذا لم يتمكن display: flex من التعامل مع الأعمدة بشكل صحيح */
    float: right; 
}
[dir="rtl"] .col-md-8 {
    float: left; /* في RTL، الـ 8 أعمدة تكمل إلى اليسار */
}
[dir="ltr"] .col-md-4 {
    float: left; /* في LTR، الـ 4 أعمدة تبدأ من اليسار */
}
[dir="ltr"] .col-md-8 {
    float: right; /* في LTR، الـ 8 أعمدة تكمل إلى اليمين */
}


/* ---------------------------------- */
/* لوحة معلومات الاتصال (Panel) */
/* ---------------------------------- */
.contact-info-panel {
    /* تدرج حيوي مع لون أفتح */
    background: linear-gradient(135deg, #4da6ff, #007bff);
    color: #ffffff;
    padding: 30px;
    border-radius: 15px; /* لإظهار الظل على كامل اللوحة */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); /* ظل ثلاثي الأبعاد */
    z-index: 2; /* للبروز فوق اللوحة البيضاء */
    position: relative;
}

/* 🚨 تصحيح خاصية border-radius لـ RTL (تم وضعها خارج @media) 🚨 */
[dir="rtl"] .contact-content .contact-info-panel {
     border-radius: 0 15px 15px 0; /* حواف مستديرة لليسار في RTL */
}

.info-title {
    color: #ffffff; /* تم تصحيحه ليتناسب مع الخلفية الغامقة */
    font-size: 1.4rem;
    margin-bottom: 25px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.5); /* خط فاصل أفتح */
    padding-bottom: 10px;
}

.info-item {
    display: flex;
    margin-bottom: 20px;
    align-items: flex-start;
}

.info-item i {
    font-size: 1.2rem;
    margin-inline-end: 15px;
    margin-top: 5px;
    color: #ffc107; /* لون مميز للأيقونات */
}

/* 🚨 تحسين لون الروابط داخل اللوحة (للوضوح) 🚨 */
.contact-info-panel a {
    color: #ffeb3b; /* لون أصفر فاتح للروابط */
    text-decoration: none;
    font-weight: 600;
}
.contact-info-panel a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.info-item p {
    margin: 0;
    line-height: 1.6;
    font-size: 0.95rem;
}
.info-item strong {
    font-weight: 600;
}


/* ---------------------------------- */
/* لوحة نموذج الاتصال (Form Panel) */
/* ---------------------------------- */
.contact-form-panel {
    padding: 30px;
    box-sizing: border-box;
}

.form-group {
    margin-bottom: 15px; /* تم تعديل التباعد ليصبح متوسطًا */
}

.form-control {
    width: 95%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.95rem;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-control:focus {
    border-color: #1b85b8;
    box-shadow: 0 0 0 0.2rem rgba(27, 133, 184, 0.25);
    outline: none;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 0.95rem;
    color: #333;
}

.btn-submit-contact {
    background-color: #1b85b8;
    color: white;
    padding: 10px 25px;
    border-radius: 50px;
    text-align: center;
    border: none;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
    font-size: 0.95rem;
    width: auto;
}

.btn-submit-contact:hover {
    background-color: #0f4c75;
    transform: translateY(-1px);
}

.btn-submit-contact i {
    margin-inline-start: 10px;
}

/* ---------------------------------- */
/* رسائل التنبيه (Alerts) */
/* ---------------------------------- */
.alert {
    padding: 15px;
    border-radius: 8px;
    font-weight: 600;
    margin-bottom: 25px;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border-color: #c3e6cb;
}

.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}

/* ---------------------------------- */
/* Media Queries (لأجهزة الجوال) */
/* ---------------------------------- */
@media (max-width: 768px) {
    /* إلغاء الـ float في الجوال */
    .col-md-4, .col-md-8 {
        width: 100%;
        float: none;
    }
    .contact-info-panel, .contact-form-panel {
        /* إزالة الظل من اللوحة البيضاء الأم لإظهارها بشكل أفضل في الجوال */
        box-shadow: none;
    }

    .contact-info-panel {
        order: 2; /* يظهر الجزء السفلي في الجوال */
        /* 🚨 تصحيح: إلغاء الحدود المكررة وإعادة الحواف كاملة */
        border-radius: 0 0 15px 15px !important; 
    }
    .contact-form-panel {
        order: 1; 
        border-radius: 15px 15px 0 0;
    }
}