/* * rtl_global.css — تصحيحات RTL العالمية لمنصة آفاق * يُضمَّن في كل صفحة. يعتمد على [dir="rtl"] فلا يؤثر على صفحات LTR. */ /* ── تحميل نظام التخطيط المتجاوب العالمي ── */ @import url('global_layout.css'); /* ══════════════════════════════════════════ خط عربي — الجسم والمدخلات UPDATED: استخدام clamp() للتدرج السلس ══════════════════════════════════════════ */ [dir="rtl"] body { font-family: 'Cairo', 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif; font-size: 15px; /* Fallback */ font-size: clamp(15px, 2.2vw, 18px); line-height: 1.6; direction: rtl; text-align: right; } [dir="rtl"] p, [dir="rtl"] span, [dir="rtl"] a, [dir="rtl"] li, [dir="rtl"] td, [dir="rtl"] th, [dir="rtl"] label, [dir="rtl"] button, [dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] textarea { font-family: 'Cairo', 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif; } /* ══════════════════════════════════════════ محاذاة عامة ══════════════════════════════════════════ */ [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6, [dir="rtl"] p, [dir="rtl"] label, [dir="rtl"] li, [dir="rtl"] td, [dir="rtl"] th { text-align: right; } [dir="rtl"] table { direction: rtl; } [dir="rtl"] th, [dir="rtl"] td { text-align: right; } /* ══════════════════════════════════════════ حقول الإدخال ══════════════════════════════════════════ */ [dir="rtl"] input[type="text"], [dir="rtl"] input[type="email"], [dir="rtl"] input[type="search"], [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="number"], [dir="rtl"] textarea, [dir="rtl"] select { text-align: right; direction: rtl; } /* حقول الأرقام والروابط تبقى LTR */ [dir="rtl"] input[type="number"], [dir="rtl"] input[type="url"], [dir="rtl"] input[type="email"] { direction: ltr; text-align: left; } /* ══════════════════════════════════════════ قوائم ══════════════════════════════════════════ */ [dir="rtl"] ul, [dir="rtl"] ol { padding-right: 1.6em; padding-left: 0; } /* ══════════════════════════════════════════ أيقونات داخل حقول (pattern شائع) ══════════════════════════════════════════ */ [dir="rtl"] .input-icon { right: 14px; left: auto; } [dir="rtl"] .input-icon-right { left: 14px; right: auto; } [dir="rtl"] .input-with-icon { padding-right: 42px; padding-left: 14px; } /* ══════════════════════════════════════════ بطاقات وبانلات ══════════════════════════════════════════ */ [dir="rtl"] .card-header, [dir="rtl"] .card-body, [dir="rtl"] .card-footer, [dir="rtl"] .panel-heading, [dir="rtl"] .panel-body { text-align: right; } /* ══════════════════════════════════════════ أزرار وشارات ══════════════════════════════════════════ */ [dir="rtl"] .badge { margin-left: 0; margin-right: 6px; } [dir="rtl"] .btn > i:first-child, [dir="rtl"] button > i:first-child { margin-left: 6px; margin-right: 0; } /* ══════════════════════════════════════════ تخطيط Flex ══════════════════════════════════════════ */ [dir="rtl"] .flex-row { flex-direction: row; } /* ══════════════════════════════════════════ الجداول ══════════════════════════════════════════ */ [dir="rtl"] .table { direction: rtl; } [dir="rtl"] .table > thead > tr > th, [dir="rtl"] .table > tbody > tr > td { text-align: right; } /* ══════════════════════════════════════════ الشريط الجانبي والتنقل ══════════════════════════════════════════ */ [dir="rtl"] .sidebar { right: 0; left: auto; border-left: none; border-right: 1px solid #eee; } [dir="rtl"] .sidebar-item { padding-right: 18px; padding-left: 8px; } [dir="rtl"] .sidebar-item i { margin-left: 10px; margin-right: 0; } /* ══════════════════════════════════════════ إشعارات وتنبيهات ══════════════════════════════════════════ */ [dir="rtl"] .alert { text-align: right; } [dir="rtl"] .toast { right: auto; left: 20px; } /* ══════════════════════════════════════════ فوتر ══════════════════════════════════════════ */ [dir="rtl"] .footer { text-align: right; } [dir="rtl"] .footer-links { padding-right: 0; } [dir="rtl"] .footer-links li { list-style: none; } /* ══════════════════════════════════════════ خاص بآفاق — تصحيحات صفحات بعينها ══════════════════════════════════════════ */ /* لوحة التحكم — قائمة جانبية */ [dir="rtl"] .nav-menu { text-align: right; } [dir="rtl"] .nav-menu a { padding-right: 18px; padding-left: 8px; } [dir="rtl"] .nav-menu a i { margin-left: 10px; margin-right: 0; } /* صفحة الحجز */ [dir="rtl"] .booking-step { text-align: right; } [dir="rtl"] .service-card { text-align: right; } /* وصف الخدمة */ [dir="rtl"] .service-desc { text-align: right; direction: rtl; } /* جدول المواعيد */ [dir="rtl"] .appt-row td:first-child { text-align: right; } /* أيقونات Font Awesome في النصوص */ [dir="rtl"] .fa-arrow-right { -webkit-transform: scaleX(-1); -ms-transform: scaleX(-1); transform: scaleX(-1); } [dir="rtl"] .fa-arrow-left { -webkit-transform: scaleX(-1); -ms-transform: scaleX(-1); transform: scaleX(-1); } [dir="rtl"] .fa-chevron-right { -webkit-transform: scaleX(-1); -ms-transform: scaleX(-1); transform: scaleX(-1); } [dir="rtl"] .fa-chevron-left { -webkit-transform: scaleX(-1); -ms-transform: scaleX(-1); transform: scaleX(-1); } /* تصحيح margin في العناصر المتداخلة */ [dir="rtl"] .ms-1 { margin-right: 0.25rem !important; margin-left: 0 !important; } [dir="rtl"] .ms-2 { margin-right: 0.5rem !important; margin-left: 0 !important; } [dir="rtl"] .ms-3 { margin-right: 1rem !important; margin-left: 0 !important; } [dir="rtl"] .me-1 { margin-left: 0.25rem !important; margin-right: 0 !important; } [dir="rtl"] .me-2 { margin-left: 0.5rem !important; margin-right: 0 !important; } [dir="rtl"] .me-3 { margin-left: 1rem !important; margin-right: 0 !important; } [dir="rtl"] .ps-1 { padding-right: 0.25rem !important; padding-left: 0 !important; } [dir="rtl"] .ps-2 { padding-right: 0.5rem !important; padding-left: 0 !important; } [dir="rtl"] .ps-3 { padding-right: 1rem !important; padding-left: 0 !important; } [dir="rtl"] .pe-1 { padding-left: 0.25rem !important; padding-right: 0 !important; } [dir="rtl"] .pe-2 { padding-left: 0.5rem !important; padding-right: 0 !important; } [dir="rtl"] .pe-3 { padding-left: 1rem !important; padding-right: 0 !important; } /* float */ [dir="rtl"] .float-start, [dir="rtl"] .float-left { float: right !important; } [dir="rtl"] .float-end, [dir="rtl"] .float-right { float: left !important; } /* text-align */ [dir="rtl"] .text-start { text-align: right !important; } [dir="rtl"] .text-end { text-align: left !important; }