/* ========================================= RTL Stylesheet for Primecare Child Theme ========================================= */ /* --- 1. الأساسيات وتوجيه الصفحة --- */ body { direction: rtl; unicode-bidi: embed; text-align: right; } /* إصلاح عام لعرض الحروف العربية المقطعة */ p, h1, h2, h3, h4, h5, h6, li, a, span { unicode-bidi: embed; } /* --- 2. الهيدر والقائمة الرئيسية (Header & Main Menu) --- */ /* عكس اتجاه القائمة الرئيسية */ .main-menu { justify-content: flex-start; /* كانت flex-end */ } /* تعديلات القوائم المنسدلة (الأسهم والمكان) */ .main-menu ul li.menu-item-has-children > a:after { margin-left: 0; margin-right: 8px; /* كانت margin-left */ } .main-menu ul ul li.menu-item-has-children > a:after { transform: rotate(90deg); /* كانت -90deg لعكس السهم */ } .main-menu ul ul { left: auto; right: 0; /* كانت left: 0 */ } .main-menu ul ul ul { left: auto; right: 100%; /* كانت left: 100% */ } /* تعديل نقطة بداية حركة القائمة */ .main-menu ul li.highlighted-menu a:after { transform-origin: top right; /* كانت top left */ } /* نقل زر الموبايل (الهامبرجر) إلى اليسار */ .slicknav_btn { float: left; /* كانت right */ } /* --- 3. المحاذاة العامة للصور والمحتوى --- */ .alignleft { float: right; margin: 5px 0 20px 20px !important; } .alignright { float: left; margin: 5px 20px 20px 0 !important; } a img.alignleft { float: right; margin: 5px 0 20px 20px; } a img.alignright { float: left; margin: 5px 20px 20px 0; } /* --- 4. تعديلات خاصة بويدجات Elementor --- */ /* تعديل اتجاه الأيقونة والنص في Icon Box */ .elementor-widget-icon-box .elementor-icon-box-wrapper { display: flex; text-align: right; } /* هذا الكود يعكس اتجاه الأيقونة والنص إذا كانا بجانب بعضهما */ .elementor-widget-icon-box.elementor-position-left .elementor-icon-box-wrapper, .elementor-widget-icon-box.elementor-position-right .elementor-icon-box-wrapper { flex-direction: row-reverse; } /* عكس الهوامش بين الأيقونة والنص */ .elementor-widget-icon-box.elementor-position-left .elementor-icon-box-wrapper .elementor-icon { margin-right: 0; margin-left: 15px; } .elementor-widget-icon-box.elementor-position-right .elementor-icon-box-wrapper .elementor-icon { margin-left: 0; margin-right: 15px; } /* تعديل padding العناوين الصغيرة التي بجانبها أيقونة */ .section-title .elementor-heading-title { padding-left: 0; padding-right: 28px; /* كانت padding-left */ } .section-title .elementor-heading-title::before { left: auto; right: 0; /* كانت left: 0 */ } /* --- 5. تعديلات خاصة بالأزرار والصفحات الداخلية --- */ /* تعديل padding الأزرار ليتناسب مع الأيقونة */ .btn-default { padding: 19px 30px 19px 60px; /* عكس الـ padding */ } .btn-default::before { right: auto; left: 0; /* كانت right: 0 */ transform: translate(30px, -50%); } .btn-default:hover::before { transform: translate(30px, -50%) rotate(45deg); } /* تعديل اتجاه الـ blockquote */ .post-entry blockquote, .editor-styles-wrapper blockquote { background-position: top 40px right 35px; /* كانت left */ padding: 30px 120px 30px 30px !important; /* عكس الـ padding */ } /* تعديل اتجاه أزرار المشاركة الاجتماعية */ .post-social-sharing { text-align: left; /* كانت right */ } .post-social-sharing ul li { margin-right: 0; margin-left: 12px; } /* ========================================= RTL Fixes - Part 2 ========================================= */ /* --- لإصلاح مشكلة العناوين المتقطعة (إذا استمرت) --- */ /* هذا الكود هو محاولة لإيقاف التأثير الحركي الذي يسبب المشكلة */ h1.elementor-heading-title > div, h2.elementor-heading-title > div { transform: none !important; } /* ========================================= RTL Fixes for Specific Widgets ========================================= */ /* --- 3. إصلاح اتجاه أيقونات الـ Info Box (مثل "طبيب ذو خبرة") --- */ .elementskit-infobox.icon-top-align, .elementskit-infobox.text-left { text-align: right; } /* ========================================= RTL Fixes for Testimonial Slider & General Alignment ========================================= */ /* --- 1. لإصلاح محاذاة النص العامة داخل الويدجات --- */ /* * هذا الكود يجبر كل العناوين والفقرات داخل حاويات ويدجات Elementor * على أن تبدأ من اليمين، ليحل مشكلة المحاذاة العامة. */ .elementor-widget-container h1, .elementor-widget-container h2, .elementor-widget-container h3, .elementor-widget-container h4, .elementor-widget-container p, .elementskit-commentor-content { text-align: right !important; } /* --- 2. لإصلاح المسافة وشكل كاتب الشهادة --- */ /* * هذا الكود يعكس اتجاه العناصر (الصورة والنص) ويضيف هامشًا صحيحًا. */ .elementkit-commentor-details { display: flex; flex-direction: row-reverse; } .elementkit-commentor-details .elementskit-profile-info { margin-right: 15px !important; /* إضافة هامش على يمين النص */ margin-left: 0 !important; } /* ========================================= Fix for spacing in "Read More" button (ElementsKit) ========================================= */ body.rtl .elementskit-btn svg { margin-right: 8px !important; /* إضافة هامش على يمين الأيقونة */ margin-left: 0 !important; /* إلغاء أي هامش على اليسار */ } /* ========================================= Definitive RTL Fix for Google Rating Widget using CSS Order ========================================= */ /* أولاً: نجعل الحاوية الرئيسية Flex container ونضبط التوسيط والمسافات */ body.rtl .elementor-element.elementor-element-53a4feb > .e-con-inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; /* للسماح بالتفاف العناصر لو الشاشة صغرت */ gap: 10px; /* لإضافة مسافة بين العناصر */ } /* ثانياً: نعيد ترتيب العناصر باستخدام خاصية 'order' */ /* 1. العنوان "تقييم Google" (أول عنصر يظهر من اليمين) */ body.rtl .elementor-element.elementor-element-f9da24a { order: 1; } /* 2. النجوم (ثاني عنصر يظهر) */ body.rtl .elementor-element.elementor-element-8b6aa67 { order: 2; } /* 3. الرقم "5.0" (ثالث عنصر يظهر) */ body.rtl .elementor-element.elementor-element-372de64 { order: 3; } /* 4. عدد المراجعات (آخر عنصر يظهر من اليسار) */ body.rtl .elementor-element.elementor-element-54d357c { order: 4; } /* ========================================= Definitive & Final RTL Fix for Elementor Icon List ========================================= */ /* * هذا الكود يستخدم محددًا قويًا ويطبق القواعد الأساسية * لعرض العناصر بشكل صحيح من اليمين لليسار. */ body.rtl .elementor-widget-icon-list .elementor-icon-list-items .elementor-icon-list-item { display: flex !important; flex-direction: row !important; /* الترتيب الطبيعي في RTL هو من اليمين لليسار */ align-items: center !important; } /* * هذا الكود يضمن وجود مسافة صحيحة بين الأيقونة والنص. */ body.rtl .elementor-widget-icon-list .elementor-icon-list-items .elementor-icon-list-item .elementor-icon-list-icon { margin-right: 0 !important; margin-left: 8px !important; /* إضافة مسافة على يسار الأيقونة */ } /* ========================================= Final Missing RTL Fixes (Additions Only) ========================================= */ /* --- 1. لإصلاح محاذاة وترتيب قائمة الأيقونات بشكل نهائي --- */ body.rtl .elementor-widget-icon-list .elementor-icon-list-items { justify-content: flex-start !important; } /* --- 2. لإصلاح مشكلة الـ unicode-bidi التي قد تؤثر على بعض العناصر --- */ body.rtl { unicode-bidi: embed; } body.rtl p, body.rtl h1, body.rtl h2, body.rtl h3, body.rtl h4, body.rtl h5, body.rtl h6, body.rtl li, body.rtl a, body.rtl span { unicode-bidi: embed; } /* --- 3. لإصلاح الهوامش المفقودة في القائمة الرئيسية --- */ body.rtl .main-menu ul li { margin: 0 4px; } body.rtl .main-menu ul ul li.menu-item-has-children > a:after { right: auto; left: 15px; } body.rtl .slicknav_nav .slicknav_arrow:after { float: left; } /* --- 4. لإصلاح هامش الأرقام في الأكورديون --- */ body.rtl .how-work-accordion .elementskit-card .elementskit-card-header .number { margin-right: 0; margin-left: 20px; } /* ========================================= RTL Fix: Reordering Footer Info Columns (Forced) ========================================= */ /* 1. "ساعات العمل" تكون أول عنصر من اليمين */ body.rtl .elementor-element.elementor-element-b7a1960 { order: 1 !important; } /* 2. "هل تحتاج لخدمات؟" تكون العنصر الثاني في المنتصف */ body.rtl .elementor-element.elementor-element-bb5e4c3 { order: 2 !important; } /* 3. زر "حدد موعدًا" يكون آخر عنصر من اليسار */ body.rtl .elementor-element.elementor-element-00d602f { order: 3 !important; } /* ========================================= RTL FIX: Final Force Accordion Alignment ========================================= */ /* * هذا الكود يجبر الحاوية الرئيسية للعنوان (الرابط) على أن تبدأ من اليمين * ويضع الأيقونة قبل العنوان */ body.rtl .how-work-accordion .elementskit-card-header .ekit-accordion--toggler { display: flex !important; flex-direction: row-reverse !important; justify-content: flex-start !important; } /* * هذا الكود هو الأهم: * إنه يجبر العنوان النصي نفسه داخل الحاوية على أن يكون بمحاذاة اليمين */ body.rtl .how-work-accordion .ekit-accordion-title { text-align: right !important; width: 100%; /* نعطي العنوان عرضًا كاملًا ليتمكن من المحاذاة */ } /* للتأكيد على أن النص الداخلي يبدأ من اليمين أيضًا */ body.rtl .how-work-accordion .elementskit-card-body { text-align: right !important; } /* ========================================= RTL FIX: Reversing the Reverse on Footer Icons ========================================= */ body.rtl .elementor-element[data-id="0b3b991"] .elementor-icon-box-wrapper, body.rtl .elementor-element[data-id="0d6f3e2"] .elementor-icon-box-wrapper { flex-direction: row !important; /* هذا يلغي العكس الخاطئ ويعيد الترتيب الصحيح */ } /* ========================================= RTL FIX: FAQ Accordion Spacing ========================================= */ /* 1. This rule adjusts the padding for the entire accordion header */ body.rtl .elementskit-accordion .elementskit-card .elementskit-card-header a { padding: 15px 20px !important; } /* 2. This rule adjusts the padding for the icon specifically */ body.rtl .elementskit-accordion .elementskit-card .elementskit-card-header .ekit_accordion_icon_group { padding: 0px 14px !important; } /* ========================================= REUSABLE RTL FIX for Testimonial Slider Arrows ========================================= */ /* This positions the arrows correctly on ANY page */ body.rtl .elementskit-testimonial-slider .swiper-button-prev { left: auto !important; right: 45% !important; /* Adjust if needed */ } body.rtl .elementskit-testimonial-slider .swiper-button-next { left: auto !important; right: 56% !important; /* Adjust if needed */ } /* This flips the arrow icon direction on ANY page */ body.rtl .elementskit-testimonial-slider .swiper-navigation-button svg { transform: scaleX(-1) !important; } /* ========================================= RTL FIX: Add Space to Testimonial Author ========================================= */ body.rtl .elementor-testimonial-meta-inner .elementor-testimonial-details { margin-right: 15px; /* Adds space to the right of the text */ } /* ========================================= REUSABLE & RESPONSIVE RTL Fix for Experience Badge Using the existing ".about-experience" class ========================================= */ /* --- Desktop Styles --- */ body.rtl .about-experience { top: -65px !important; left: auto !important; right: 260px !important; position: absolute !important; /* Keep it absolute for desktop */ } /* --- Mobile Styles (Using Your Discovered Values) --- */ @media (max-width: 767px) { body.rtl .about-experience { position: relative !important; display: block !important; /* Your position values */ top: 560px !important; right: auto !important; left: auto !important; /* Your margin values */ margin-top: -95px !important; margin-bottom: 30px !important; margin-left: auto !important; margin-right: auto !important; /* Your size values */ width: 140px; height: 140px; } } /* ========================================= REUSABLE & FINAL RTL FIX for Testimonial Dots ========================================= */ /* 1. This rule targets the main container of the dots */ body.rtl .elementskit-testimonial-slider .swiper-pagination-bullets { display: flex !important; justify-content: center !important; /* Center the dots container */ width: 100% !important; padding: 0 !important; /* Reset any default padding */ } /* 2. This rule targets each individual dot */ body.rtl .elementskit-testimonial-slider .swiper-pagination-bullet { float: none !important; /* Remove any old float properties */ margin: 0 5px !important; /* Reset old margins and add NEW, EQUAL spacing on both sides */ } /* ========================================= FINAL & REUSABLE RTL Design for ALL Forms ========================================= */ /* Use the 'contact-form' class from the Elementor widget */ .contact-form .wpcf7-form { direction: rtl !important; } /* 1. Fix text alignment and font for ALL fields */ .contact-form .wpcf7-form .form-control, .contact-form .wpcf7-form .form-control::placeholder { font-family: 'Alexandria', sans-serif !important; text-align: right !important; font-size: 14px !important; } /* 2. Set placeholder font-weight to MEDIUM */ .contact-form .wpcf7-form input.form-control::placeholder, .contact-form .wpcf7-form textarea.form-control::placeholder { font-weight: 500 !important; } /* 3. Fix cut-off letters in single-line inputs */ .contact-form .wpcf7-form input.form-control { height: 55px !important; line-height: 55px !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* 4. Adjust multi-line textarea */ .contact-form .wpcf7-form textarea.form-control { height: auto !important; line-height: 1.7em !important; padding-top: 15px !important; padding-bottom: 15px !important; } /* ========================================= FINAL & CORRECT RTL Design for ALL Forms ========================================= */ /* Use the 'contact-form' class from the Elementor widget */ /* 1. Fix text alignment, font, and font-size for ALL fields */ body.rtl .contact-form .wpcf7-form .form-control { font-family: 'Alexandria', sans-serif !important; text-align: right !important; font-size: 14px !important; } /* 2. Set placeholder font-weight to MEDIUM */ body.rtl .contact-form .wpcf7-form .form-control::placeholder { font-weight: 500 !important; } /* 3. Fix cut-off letters in single-line inputs */ body.rtl .contact-form .wpcf7-form input.form-control { height: 55px !important; line-height: 55px !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* 4. Adjust multi-line textarea */ body.rtl .contact-form .wpcf7-form textarea.form-control { height: auto !important; line-height: 1.7em !important; padding-top: 15px !important; padding-bottom: 15px !important; } /* 5. Style for ANY submit button inside the form */ body.rtl .contact-form .wpcf7-form .wpcf7-submit { font-family: 'Alexandria', sans-serif !important; /* Correct padding for RTL button with icon */ padding: 15px 50px 15px 30px !important; } /* 6. Move the arrow icon to the left */ body.rtl .contact-form .wpcf7-form .wpcf7-submit::after { right: auto !important; left: 25px !important; } /* 7. Reverse the hover animation for the arrow */ body.rtl .contact-form .wpcf7-form .wpcf7-submit:hover::after { transform: translateY(-50%) rotate(-45deg) !important; } /* 8. Align the button container to the right */ body.rtl .contact-form .wpcf7-form .form-btn { text-align: right !important; } /* 9. Fix the dropdown menu arrow position */ body.rtl .contact-form .wpcf7-form select.form-control { background-position: left 15px center !important; padding-right: 20px !important; padding-left: 50px !important; } /* 8. Align the button container to the right */ .contact-form .wpcf7-form .form-btn { text-align: right !important; } /* ========================================= RTL FIX: Contact Form 7 Dropdown (