document.addEventListener("DOMContentLoaded", function() {
// 1. حقن تنسيق الـ CSS المخصص لعرض ARPrice (أفقياً ومتناسقاً)
const arPriceStyle = document.createElement('style');
arPriceStyle.innerHTML = `
/* حاوية العرض الرئيسية لتكون شبكية أفقية */
.arprice-grid-container {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
font-family: 'Cairo', tahoma, sans-serif;
margin: 30px auto;
max-width: 1000px;
}
/* تصميم البطاقة الواحدة */
.arprice-box-card {
background: #2c2c2c;
color: #ffffff;
border: 2px solid #444;
border-radius: 16px;
width: 280px;
padding: 25px;
box-shadow: 0 10px 25px rgba(0,0,0,0.3);
transition: all 0.3s ease;
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.arprice-box-card:hover {
transform: translateY(-8px);
border-color: #3b82f6;
box-shadow: 0 15px 30px rgba(59, 130, 246, 0.2);
}
/* الشعار أو الصورة في الأعلى */
.arprice-box-img {
width: 80px;
height: 80px;
border-radius: 50%;
border: 3px solid #fff;
object-fit: cover;
margin: 0 auto 15px auto;
}
/* العنوان والوصف */
.arprice-box-title {
font-size: 20px;
font-weight: bold;
margin: 10px 0 5px 0;
}
.arprice-box-desc {
font-size: 13px;
opacity: 0.85;
margin-bottom: 20px;
}
/* أزرار الإجراءات المتجاورة */
.arprice-buttons-wrap {
display: flex;
gap: 10px;
margin-top: auto;
}
.arprice-btn {
flex: 1;
padding: 10px;
border-radius: 8px;
font-weight: bold;
font-size: 13px;
text-decoration: none;
cursor: pointer;
transition: 0.2s;
text-align: center;
}
.arprice-btn-chat {
background: #3b82f6;
color: #fff;
border: none;
}
.arprice-btn-quote {
background: rgba(255,255,255,0.15);
color: #fff;
border: 1px solid rgba(255,255,255,0.2);
}
.arprice-btn:hover {
opacity: 0.9;
}
`;
document.head.appendChild(arPriceStyle);
// 2. تحويل الـ HTML القديم أو الروابط المبعثرة تلقائياً إلى شكل الـ ARPrice الأفقية
const targetArea = document.querySelector('.knowledge-base-article-content') || document.body;
// يمكنك إضافة منطق تحويل تلقائي للعناصر هنا إذا أردت سحب الروابط وترتيبها بداخل شبكة الـ ARPrice
});