/* --- إعدادات التواصل الموحدة (ثيم الأزرق الكحلي) --- */
:root {
    /* تم تغيير اللون الأساسي إلى الأزرق الكحلي */
    --primary: #003366;
    /* تم تعديل لون الخلفية الشفافة للكحلي */
    --primary-soft: rgba(0, 51, 102, 0.1);
    
    --bg-page: #fdfdfd;
    --card-bg: #ffffff;
    --text-head: #1a1a1a;
    --text-body: #2d3436;
    --text-muted: #7f8c8d;
    --border: #eeeeee;
}

[data-theme='dark'] {
    --bg-page: #0b0b0b;
    --card-bg: #151515;
    --text-head: #ffffff;
    --text-body: #e0e0e0;
    --text-muted: #a0a0a0;
    --border: #222222;

    /* تعديل: لون أزرق فاتح للوضع الليلي لضمان الوضوح */
    --primary: #3399ff;
    --primary-soft: rgba(51, 153, 255, 0.15);
}

body { background: var(--bg-page); color: var(--text-body); transition: 0.3s; font-family: 'Tajawal', sans-serif; }

/* حل مشكلة الهيدر المتكرر */
.contact-main-layout { padding: 20px 0 80px; }

.contact-header-inner {
    text-align: center;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 40px;
}

.contact-title { font-size: 2.5rem; font-weight: 800; color: var(--text-head); margin-bottom: 15px; }
.contact-title span { color: var(--primary); }
.contact-subtitle { color: var(--text-muted); font-size: 1.1rem; }

/* الشبكة الرئيسية */
.contact-grid { display: flex; gap: 40px; flex-wrap: wrap; }
.contact-info-sidebar { flex: 1; min-width: 300px; }
.contact-form-area { flex: 2; min-width: 350px; }

/* كروت المعلومات */
.info-card { background: var(--card-bg); padding: 30px; border-radius: 20px; border: 1px solid var(--border); }
.info-card h3 { margin-bottom: 25px; font-weight: 800; color: var(--text-head); }

.info-item { display: flex; align-items: center; gap: 15px; margin-bottom: 25px; }
.info-item i { width: 40px; height: 40px; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; border-radius: 10px; }
.info-item .text span { display: block; font-size: 0.8rem; color: var(--text-muted); }
.info-item .text a { text-decoration: none; color: var(--text-head); font-weight: 700; }

/* أيقونات السوشيال - أزرق كحلي موحد ومصفوفة أفقياً */
.contact-social-icons { display: flex; gap: 12px; margin-top: 30px; padding-top: 25px; border-top: 1px solid var(--border); }
.sh-btn { 
    width: 45px; height: 45px; background: var(--card-bg); color: var(--primary) !important; 
    display: flex; align-items: center; justify-content: center; border-radius: 12px; 
    border: 1px solid var(--border); font-size: 1.2rem; transition: 0.4s; 
}
.sh-btn:hover { background: var(--primary); color: #fff !important; transform: translateY(-5px) rotate(8deg); }

/* التنسيق للنموذج (Form) */
.form-wrapper { background: var(--card-bg); padding: 40px; border-radius: 20px; border: 1px solid var(--border); }
.form-row { display: flex; gap: 20px; margin-bottom: 20px; }
.form-group { flex: 1; margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 10px; font-weight: 700; color: var(--text-head); }
.form-group label i { color: var(--primary); margin-left: 5px; }

.form-group input, .form-group textarea {
    width: 100%; padding: 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-page); color: var(--text-body); transition: 0.3s;
}
.form-group input:focus, .form-group textarea:focus { border-color: var(--primary); outline: none; }

.contact-submit-btn {
    width: 100%; padding: 15px; background: var(--primary); color: #fff; border: none; border-radius: 12px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: 0.3s;
}
.contact-submit-btn:hover { background: var(--text-head); }

@media (max-width: 768px) {
    .contact-grid { flex-direction: column; }
    .form-row { flex-direction: column; }
}