بحجم 34px تُستخدم كعناوين
* - أوزان من 400 إلى 900 بلا نظام
* - ارتفاع سطر 1.0 على نص عربي (P:24px/24px) — الحروف متلاصقة
*
* المبدأ: لا نلمس محتوى Elementor — تحسين عرض فقط، يُلغى بحذف الملف.
*/
/* ------------------------------------------------------------------ *
* 1. توحيد الخط
* ------------------------------------------------------------------ *
* Cairo مستخدم بالفعل في 455 عنصر وهو خط عربي جيد — نوحّد عليه بدل
* إدخال خط خامس. المشكلة ليست اختيار Cairo، بل أن ثلاثة خطوط أخرى
* تتسرب معه.
*
* :not() تستثني أيقونات Elementor (eicons) — لو ورّثت Cairo تتحول
* الأيقونات إلى مربعات فارغة.
*/
:root {
--cle-font: "Cairo", system-ui, "Segoe UI", sans-serif;
--cle-forest: #143d41;
--cle-ink: #0d292c;
--cle-sand: #d7a95b;
--cle-white: #fff;
}
.cleanest-mobile-booking-float{display:none}
@media (max-width: 767px) {
.elementor-element-6120cf3{min-height:104px!important}
.elementor-element-54e9075{height:36px!important;min-height:36px!important;overflow:hidden;padding-inline:12px!important}
.elementor-element-54e9075 .ditty{padding-block:0!important}
.elementor-element-54e9075 .ditty-ticker__items{height:30px!important}
.elementor-element-7246bc6{min-height:68px!important;height:68px!important;padding-inline:14px!important;gap:16px!important;align-items:center!important;justify-content:space-between!important;background:rgba(255,255,255,.96)!important;box-shadow:0 8px 24px rgba(13,41,44,.08);backdrop-filter:blur(14px);z-index:9995!important}
.elementor-element-d5e7b78{width:112px!important;max-width:112px!important;margin:0!important}
.elementor-element-d5e7b78 .hfe-site-logo-img{display:block!important;width:112px!important;height:auto!important;max-height:54px!important;object-fit:contain}
.elementor-widget-eael-offcanvas.elementor-element-2cf129b{width:50px!important;max-width:50px!important;margin:0!important}
.elementor-widget-eael-offcanvas.elementor-element-2cf129b .eael-offcanvas-toggle{display:grid!important;place-items:center;width:48px!important;height:48px!important;min-height:48px!important;padding:10px!important;border-radius:12px!important;background:transparent!important;color:var(--cle-forest)!important}
.cleanest-mobile-booking-float{display:flex;position:fixed;z-index:9990;inset-inline:16px;inset-block-end:max(14px,env(safe-area-inset-bottom));align-items:center;justify-content:center;gap:10px;min-height:56px;padding:12px 24px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:var(--cle-forest);color:var(--cle-white)!important;font:700 17px/1.2 var(--cle-font);text-decoration:none!important;box-shadow:0 16px 38px rgba(13,41,44,.3);transition:transform .2s ease,background .2s ease,opacity .2s ease}
.cleanest-mobile-booking-float:active{transform:scale(.98)}
.cleanest-mobile-booking-float:focus-visible{outline:3px solid var(--cle-sand);outline-offset:3px}
body:not(.cleanest-booking-page){padding-bottom:86px}
body.cleanest-menu-locked .cleanest-mobile-booking-float{opacity:0;pointer-events:none}
body:not(.cleanest-booking-page) .chaty-widget{bottom:96px!important}
}
@media (min-width: 768px) and (max-width: 1024px) {
.elementor-element-6120cf3{min-height:104px!important}
.elementor-element-54e9075{height:36px!important;min-height:36px!important;overflow:hidden;padding-inline:18px!important}
.elementor-element-54e9075 .ditty{padding-block:0!important}
.elementor-element-54e9075 .ditty-ticker__items{height:30px!important}
.elementor-element-7246bc6{min-height:68px!important;height:68px!important;padding-inline:22px!important;gap:18px!important;align-items:center!important;justify-content:space-between!important;background:rgba(255,255,255,.96)!important;box-shadow:0 8px 24px rgba(13,41,44,.08);backdrop-filter:blur(14px);z-index:9995!important}
.elementor-element-d5e7b78{width:124px!important;max-width:124px!important;margin:0!important}
.elementor-element-d5e7b78 .hfe-site-logo-img{display:block!important;width:124px!important;height:auto!important;max-height:56px!important;object-fit:contain}
.elementor-widget-eael-offcanvas.elementor-element-2cf129b{width:50px!important;max-width:50px!important;margin:0!important}
.elementor-widget-eael-offcanvas.elementor-element-2cf129b .eael-offcanvas-toggle{display:grid!important;place-items:center;width:48px!important;height:48px!important;min-height:48px!important;padding:10px!important;border-radius:12px!important;background:transparent!important;color:var(--cle-forest)!important}
}
/* Lock the marketing page while the mobile off-canvas menu is open. */
html.eael-offcanvas-content-open{overflow:hidden!important;overscroll-behavior:none}
body.cleanest-menu-locked{position:fixed!important;inset-inline:0!important;top:var(--cleanest-menu-scroll,0)!important;width:100%!important;overflow:hidden!important;touch-action:none!important}
.eael-offcanvas-content.eael-offcanvas-content-visible{position:fixed!important;inset-block:0!important;height:100dvh!important;max-height:100dvh!important;overflow-y:auto!important;overscroll-behavior:contain;touch-action:pan-y!important}
.eael-offcanvas-content-2cf129b .eael-offcanvas-widget-content{align-items:stretch!important;width:100%!important}
.eael-offcanvas-content-2cf129b .eael-offcanvas-widget-content>p{width:100%!important;max-width:100%!important}
.eael-offcanvas-close-2cf129b svg{display:none!important}.eael-offcanvas-close-2cf129b::after{content:'×';font:400 30px/1 Arial,sans-serif;color:#fff}
body,
body :not(i):not(span[class*="eicon"]):not([class*="fa-"]):not([class*="icon"]) {
font-family: var(--cle-font);
}
/* Times New Roman كان يظهر هنا: عناصر لم يضبط لها Elementor خطًا. */
p, li, td, th, label, blockquote, figcaption,
h1, h2, h3, h4, h5, h6,
input, textarea, select, button {
font-family: var(--cle-font);
}
/* ------------------------------------------------------------------ *
* 2. ارتفاع السطر — أهم إصلاح للنص العربي
* ------------------------------------------------------------------ *
* وُجد P:24px/24px و P:18px/18px — ارتفاع سطر يساوي حجم الخط.
* العربية بها نقاط تحت الحروف وهمزات فوقها؛ ارتفاع 1.0 يجعلها تتلامس.
* لا نستخدم !important: نترك لـ Elementor حرية التجاوز حين يقصد ذلك.
*/
p, li, blockquote {
line-height: 1.75;
}
h1, h2, h3, h4 {
line-height: 1.3;
}
/* ------------------------------------------------------------------ *
* 3. مقياس أحجام متّسق
* ------------------------------------------------------------------ *
* clamp() يجعل العناوين تتقلص على الجوال دون media queries.
*/
h1 { font-size: clamp(30px, 4.5vw, 46px); font-weight: 800; }
h2 { font-size: clamp(25px, 3.2vw, 36px); font-weight: 700; }
h3 { font-size: clamp(19px, 2vw, 24px); font-weight: 700; }
/* الحد الأدنى 16px: أقل من ذلك يفقد الحرف العربي المتصل وضوحه،
ويجعل iOS يقرّب الشاشة تلقائيًا عند التركيز على الحقول. */
body, p, li, input, textarea, select {
font-size: max(16px, 1em);
}
/* ------------------------------------------------------------------ *
* 4. تحسينات قرائية
* ------------------------------------------------------------------ */
p {
/* سطر أطول من ~75 حرفًا يُتعب العين في تتبع بداية السطر التالي. */
max-inline-size: 75ch;
}
/* الأرقام والأسعار والتواريخ تبقى LTR داخل النص العربي. */
[dir="rtl"] .cl-num,
[dir="rtl"] time,
input[type="tel"],
input[type="email"],
input[type="number"] {
direction: ltr;
text-align: start;
}
/* ------------------------------------------------------------------ *
* 5. حركات التمرير
* ------------------------------------------------------------------ *
* قاعدة السلامة: الإخفاء معلَّق على السمة [data-cle-reveal]، وهذه السمة
* لا يضيفها إلا reveal.js بعد التأكد من دعم IntersectionObserver.
*
* أي فشل في JS (خطأ، حاجب إعلانات، كاش قديم) يعني ببساطة أن السمة لم
* تُضَف — فلا يُخفى شيء. الفشل الآمن مبني في البنية نفسها، لا في فئة
* إضافية يمكن أن تُمسح.
*/
[data-cle-reveal] {
opacity: 0;
will-change: opacity, transform;
}
[data-cle-reveal="up"] { transform: translateY(28px); }
[data-cle-reveal="fade"] { transform: none; }
[data-cle-reveal="scale"] { transform: scale(.94); }
/* الانزلاق الجانبي يحترم اتجاه اللغة: في RTL يدخل العنصر من اليمين.
استخدام translateX ثابت يجعل الحركة تبدو معكوسة في العربية. */
[data-cle-reveal="side"] { transform: translateX(-32px); }
[dir="rtl"] [data-cle-reveal="side"] { transform: translateX(32px); }
[data-cle-reveal].cle-in {
opacity: 1;
transform: none;
transition:
opacity .65s cubic-bezier(.22, .61, .36, 1),
transform .65s cubic-bezier(.22, .61, .36, 1);
}
/* ------------------------------------------------------------------ *
* 6. إصلاح التفاف قائمة الهيدر على سطرين
* ------------------------------------------------------------------ *
* مقاس فعلًا على الموقع (ديسكتوب 1265px):
* عرض حاوية القائمة = 569px (Elementor: --width:45%)
* العرض المطلوب لسطر واحد = 609px
* العجز = 40px بالضبط ← لهذا تلتف العناصر إلى سطرين (ارتفاع 102px)
*
* الحل من ثلاث جهات، كل واحدة وحدها كافية تقريبًا — مجتمعة تعطي هامشًا:
* 1. nowrap: يمنع الالتفاف نهائيًا مهما ضاق العرض
* 2. تقليل الحشو من 10px إلى 6px لكل جانب = توفير 48px (> العجز)
* 3. توسيع الحاوية على حساب حقل البحث
*/
@media (min-width: 1025px) {
/* 1. لا التفاف — العلاج الجذري */
.eael-simple-menu > li > a {
white-space: nowrap;
}
/* 2. حشو أضيق: 6 عناصر × 8px = 48px موفَّرة */
.eael-simple-menu > li > a {
padding-inline: 6px !important;
}
/* 3. إعادة توازن أعمدة الهيدر.
*
* ⚠️ الأولوية: قاعدة Elementor هي
* .elementor-101 .elementor-element.elementor-element-16b6d07 { --width:45% }
* أي (0,3,0). محاولة أولى بـ `.elementor-element-16b6d07` وحدها (0,1,0)
* فشلت صامتة. نطابق أولويتها ونزيد !important لضمان الثبات.
*
* لماذا نحتاجها أصلًا وnowrap كافٍ؟ لأن nowrap بلا مساحة يعني تجاوزًا
* (عناصر مقصوصة) بدل التفاف — والقياس أظهر هامشًا = 0px بالضبط.
* أي عنصر قائمة جديد يضيفه العميل كان سيكسرها فورًا.
*/
/* القياس بعد إضافة زر «احجز الآن»: المحتوى 686px والحاوية 683px = تجاوز 3px.
رُفعت من 54% إلى 62% على حساب البحث والشعار — الهامش الآن ~100px. */
.elementor-101 .elementor-element.elementor-element-16b6d07 { --width: 62% !important; }
.elementor-101 .elementor-element.elementor-element-004430d { --width: 8% !important; }
.elementor-101 .elementor-element.elementor-element-b237657 { --width: 14% !important; }
}
/* الجوال يستخدم قائمة الهامبرغر — لا علاقة له بما سبق. */
/* ------------------------------------------------------------------ *
* 6ب. زر «احجز الآن» داخل القائمة
* ------------------------------------------------------------------ *
* يُحقن عبر فلتر wp_nav_menu_items في cleanest-enhance.php.
* يُصمَّم كزر لا كرابط عادي: هدف الموقع الأساسي هو الحجز، ورابط نصي
* وسط ستة روابط أخرى يضيع. اللون من هوية كلينِست (#143D41) لا من cleanlife.
*
* القياس: الهامش المتاح بعد إصلاح الالتفاف = 104px، وهذا الزر ~100px.
* لولا إصلاح الهيدر أولًا لكانت إضافته ستكسر القائمة على سطرين من جديد.
*/
/*
* ⚠️ الأولوية مرة أخرى — وهذه المرة كانت العاقبة زرًا خفيًا تمامًا.
*
* Elementor يضبط `.elementor-101 ... .eael-simple-menu li > a { background-color:#FFFFFF }`
* فتغلّب على `background:#143d41` هنا، بينما نجح `color:#fff !important`.
* النتيجة المقاسة: نص أبيض على خلفية بيضاء = زر غير مرئي إطلاقًا.
*
* الدرس نفسه تكرر مرتين في هذا الملف: مع --width ومع الخلفية. أي تصريح
* يستهدف عنصرًا يلوّنه Elementor يحتاج !important، وإلا يفشل صامتًا.
* لهذا يجب القياس بعد كل تغيير لا الاكتفاء بالنظر إلى الكود.
*/
.eael-simple-menu > li.cleanest-nav-book > a,
.cleanest-nav-book > a {
display: inline-flex !important;
align-items: center;
gap: 6px;
background-color: #143d41 !important;
color: #fff !important;
border-radius: 9999px !important;
padding-inline: 14px !important;
margin-inline-start: 8px;
font-weight: 700;
white-space: nowrap;
transition: background-color .2s ease, transform .2s ease;
}
.eael-simple-menu > li.cleanest-nav-book > a:hover,
.cleanest-nav-book > a:hover {
background-color: #0d2a2d !important;
color: #fff !important;
transform: translateY(-1px);
}
.cleanest-nav-book > a svg {
stroke: #fff;
}
.cleanest-nav-book__icon {
display: inline-flex;
inline-size: 16px;
block-size: 16px;
}
.cleanest-nav-book__icon svg {
inline-size: 100%;
block-size: 100%;
}
/* الحدود الفاصلة بين عناصر القائمة لا تنطبق على الزر. */
.eael-simple-menu > li.cleanest-nav-book > a {
border: 0 !important;
}
/* داخل قائمة الجوال الجانبية: عرض كامل بدل زر صغير تائه. */
@media (max-width: 1024px) {
.cleanest-nav-book > a {
justify-content: center;
margin-block: 8px;
margin-inline: 0;
}
}
/* ------------------------------------------------------------------ *
* 7. لمسات دقيقة
* ------------------------------------------------------------------ */
a, button, .elementor-button {
transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.elementor-button:hover {
transform: translateY(-2px);
}
img {
/* يمنع قفزة التخطيط أثناء تحميل الصور (CLS في Core Web Vitals). */
height: auto;
}
/* التركيز مرئي دائمًا — أساسي للتنقل بالكيبورد. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 3px solid #143d41;
outline-offset: 2px;
}
/* ------------------------------------------------------------------ *
* 7. احترام تفضيل تقليل الحركة — غير قابل للتفاوض
* ------------------------------------------------------------------ *
* لبعض المستخدمين، حركات التمرير تسبب دوارًا فعليًا (vestibular disorders).
*/
@media (prefers-reduced-motion: reduce) {
/* ---------------------------------------------------------------- *
* 🔴 إصلاح عيب وصول حقيقي في Elementor
* ---------------------------------------------------------------- *
* Elementor يخفي كل عنصر له أنيميشن دخول بـ:
* .elementor-invisible { visibility: hidden }
* ثم يزيل الفئة بجافاسكريبت عند تشغيل الأنيميشن. لكن Elementor أيضًا
* يعطّل الأنيميشن تحت تقليل الحركة (قاعدته في frontend.min.css):
* @media (prefers-reduced-motion: reduce) { .animated { animation: none !important } }
*
* النتيجة: لمن يطلب تقليل الحركة، الأنيميشن لا يعمل → الفئة لا تُزال أبدًا
* → المحتوى يبقى مخفيًا للأبد. قِيس على الموقع: 24 عنصرًا مخفيًا، منها
* عنوان الهيرو «خدمات تنظيف متكاملة في مكانك بالشرقية» — visibility:hidden
* بعد تمرير الصفحة كاملة.
*
* أي زائر مفعِّل «تقليل الحركة» (شائع بين ذوي اضطرابات الدهليز ومستخدمي
* ويندوز الذين أطفأوا الحركات) كان يرى موقعًا نصفه فارغ.
*
* الإصلاح: من يطلب تقليل الحركة يريد محتوى بلا حركة — لا لا شيء.
*/
.elementor-invisible {
visibility: visible !important;
}
/* حزام أمان: reveal.js لا يضيف السمة أصلًا في هذه الحالة، لكن لو
تغيّر التفضيل بعد تحميل الصفحة تبقى العناصر ظاهرة. */
[data-cle-reveal] {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
* {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
/* ================================================================== *
* 8. تحسين عرض الجوال (≤ 767px)
* ================================================================== *
* الموقع مبني بـ Elementor وله نقاط توقّف خاصة به (mobile = 767px).
* هذه الكتلة لا تلمس بنية أي widget — تصحيحات عرض بحتة قابلة للتراجع
* بحذف الملف. كل قاعدة تعالج مشكلة مقيسة على شاشة 375px (أشيع مقاس).
*/
@media (max-width: 767px) {
/* 8-أ. منع التمرير الأفقي — أشيع عطل جوال في Elementor.
* صور hero والبانرات العريضة (1600px) تدفع الصفحة أوسع من الشاشة
* فيظهر شريط تمرير أفقي وتهتز الصفحة. القصّ على مستوى الجذر يمنعه،
* وضبط الصور على 100% يعالج المصدر لا العرَض فقط. */
html, body {
overflow-x: hidden !important;
max-width: 100%;
}
.elementor img,
.elementor .elementor-widget-image img {
max-width: 100% !important;
height: auto !important;
}
/* Elementor slideshow backgrounds are empty divs, not elements.
* Giving them height:auto collapses the layer to 0px on mobile, so the
* configured hero image exists but cannot be painted. Keep the layer sized
* to its slide while retaining the horizontal-overflow safeguard. */
.elementor-background-slideshow__slide__image {
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
}
/* 8-ب. أهداف اللمس ≥ 44px (إرشاد WCAG 2.5.5).
* أزرار الموقع الحالية بارتفاع 40px تقريبًا — تحت الحد الآمن للإصبع.
* الرفع إلى 46px يقلّل النقرات الخاطئة على الجوال. */
.elementor-button,
.eael-simple-menu > li > a,
.cleanest-nav-book > a,
button[type="submit"] {
min-height: 46px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
}
/* 8-ج. الهيرو: عنوان أصغر ومسافات أضيق وأزرار بعرض كامل.
* على 375px، عنوان بحجم الديسكتوب يلتف على 4 أسطر ويدفع زر الحجز
* تحت الطية. clamp يصغّره، والأزرار full-width أسهل للنقر. */
.elementor-element-6cf6182 p,
.elementor-element-6cf6182 {
font-size: clamp(24px, 7vw, 32px) !important;
line-height: 1.35 !important;
}
.elementor-element-ec90e46 p,
.elementor-element-ec90e46 {
font-size: clamp(15px, 4vw, 17px) !important;
line-height: 1.7 !important;
}
.elementor-element-81727e2 {
--flex-direction: column;
--gap: 10px;
width: 100%;
}
.elementor-element-81727e2 .elementor-button {
width: 100%;
}
/* 8-د. عدّادات الإنجاز: تلتف بثلاثتها وتتوسّط بدل التزاحم على سطر.
* الأرقام تصغَّر قليلًا كي لا تُقصّ. */
.elementor-element-6bb2453 {
--flex-wrap: wrap;
--justify-content: center;
--gap: 18px;
--padding-top: 24px;
--padding-bottom: 24px;
}
.eael-counter-number,
.eael-counter-number-prefix {
font-size: clamp(28px, 9vw, 40px) !important;
}
.eael-counter-title {
font-size: 14px !important;
}
/* 8-هـ. بطاقات المزايا الأربع: عمود واحد بمسافة مريحة.
* الشبكة تنهار افتراضيًا لكن الفجوات تبقى ضيقة — نوسّعها للتنفّس. */
.elementor-element-ba60c93 {
--gap: 14px;
--padding-left: 14px;
--padding-right: 14px;
}
/* 8-و. أزرار بطاقة الخدمة («نتائج احترافية» / «مرونة في المواعيد»):
* تلتف بدل أن تتجاوز حدّ البطاقة على الشاشات الضيقة. */
.elementor-496 .elementor-element-59b25fc {
--flex-wrap: wrap;
--justify-content: center;
}
.elementor-496 .elementor-element-da86b9f {
width: 90% !important;
max-width: 90% !important;
}
/* 8-ز. نموذج الحجز: حقل واحد لكل سطر على الجوال.
* elementor-col-50 يترك حقلين متلاصقين ضيّقين على 375px يصعب النقر
* داخلهما — نجبرها 100% لسهولة الإدخال. */
.booking-form .elementor-field-group.elementor-col-50 {
width: 100% !important;
flex: 0 0 100% !important;
max-width: 100% !important;
}
.booking-form input,
.booking-form select,
.booking-form textarea {
min-height: 48px;
font-size: 16px !important; /* ≥16px يمنع iOS من التكبير التلقائي عند التركيز */
}
.booking-form textarea {
min-height: 120px;
}
.booking-form .e-form__buttons,
.booking-form .elementor-field-type-submit {
width: 100% !important;
max-width: 100% !important;
}
.booking-form button[type="submit"] {
width: 100%;
}
/* 8-ح. معلومات التواصل (هاتف/بريد): تتوسّط وتتكدّس عموديًا. */
.elementor-element-0288853 {
--flex-direction: column;
--gap: 12px;
}
/* 8-ط. آراء العملاء: بطاقة أوسع قليلًا كي لا يُقصّ النص الطويل. */
.elementor-element-2555e94 .elementor-testimonial__text {
font-size: 15px !important;
line-height: 1.75;
}
/* 8-ي. عناوين الأقسام: حجم متجاوب موحّد يمنع الالتفاف القبيح. */
.elementor-widget-text-editor .splt-txt,
.elementor-element-e50f1a6 p,
.elementor-element-d6563e6 p,
.elementor-element-09b7ed7 p {
font-size: clamp(22px, 6vw, 30px) !important;
line-height: 1.4 !important;
}
/* 8-ك. الفوتر: أعمدة الروابط تتوسّط بدل محاذاة يسار تبدو مكسورة RTL. */
.elementor-73 .elementor-element-6d1e7fd {
--flex-wrap: wrap;
--gap: 24px;
}
.elementor-73 .elementor-element-85d2868,
.elementor-73 .elementor-element-f4cf8bb,
.elementor-73 .elementor-element-d0b7b45 {
--align-items: center;
text-align: center;
}
.elementor-73 .elementor-element-8d22b49 {
--justify-content: center;
}
}
/* شاشات صغيرة جدًا (≤ 380px): تشديد إضافي على الهيرو والعدّادات. */
@media (max-width: 380px) {
.elementor-element-6cf6182 p { font-size: 22px !important; }
.eael-counter-number,
.eael-counter-number-prefix { font-size: 26px !important; }
}
/* ================================================================== *
* 9. إعادة تصميم القائمتين — درج الجوال + قائمة الديسكتوب
* ================================================================== *
* درج الجوال (eael-offcanvas) محتواه فقرات
يدوية: روابط رئيسية داخل
* ، وروابط الخدمات الفرعية فقرات فيها مسافات للإزاحة.
* لا نلمس المحتوى — نعيد تصميمه بالكامل عبر CSS: صفّ قابل للنقر، تدرّج
* واضح بين الرئيسي والفرعي، وألوان هوية كلينِست. قابل للتراجع بحذف الملف.
*/
/* ---- 9أ. اللوحة نفسها ---- */
.eael-offcanvas-content.eael-offcanvas-content-2cf129b {
background: linear-gradient(180deg, #143D41 0%, #0d2a2d 100%) !important;
width: min(86%, 360px) !important;
box-shadow: 0 0 60px rgba(0, 0, 0, .5);
}
.eael-offcanvas-content-open.eael-offcanvas-content-left .eael-offcanvas-container-2cf129b {
transform: translate3d(min(86%, 360px), 0, 0) !important;
}
/* رأس الدرج وزر الإغلاق: هدف لمس مريح ودوران لطيف عند المرور. */
.eael-offcanvas-content-2cf129b .eael-offcanvas-header {
padding: 14px 16px 0 !important;
border-bottom: 1px solid rgba(255, 255, 255, .08);
margin-bottom: 6px;
}
.eael-offcanvas-close-2cf129b {
width: 44px !important;
height: 44px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
border-radius: 9999px;
background: rgba(255, 255, 255, .08);
transition: background .2s ease, transform .25s ease;
}
.eael-offcanvas-close-2cf129b:hover {
background: rgba(166, 214, 219, .25);
transform: rotate(90deg);
}
.eael-offcanvas-close-2cf129b svg { fill: #fff !important; }
/* جسم الدرج: تصحيح line-height المزحوم (كان 15px) وترتيب عمودي. */
.eael-offcanvas-content-2cf129b .eael-offcanvas-body,
.eael-offcanvas-content-2cf129b .eael-offcanvas-body *:not(.fas):not(.eicon):not(.fab):not(.far):not(.fa) {
line-height: 1.6 !important;
}
.eael-offcanvas-content-2cf129b .eael-offcanvas-widget-content {
display: flex;
flex-direction: column;
padding: 0 14px 22px !important;
}
/* الشعار في الأعلى، والفقرة الفارغة الأولى تُخفى. */
.eael-offcanvas-content-2cf129b .eael-offcanvas-widget-content img {
width: 185px !important;
height: auto;
display: block;
margin: 6px auto 14px !important;
}
.eael-offcanvas-content-2cf129b .eael-offcanvas-widget-content > p:first-child {
display: none !important;
}
/* font-size:0 على الفقرة يبتلع مسافات المستخدمة للإزاحة اليدوية،
ثم نعيد الحجم على الرابط نفسه — فيختفي الفراغ القبيح فوق الروابط الفرعية. */
.eael-offcanvas-content-2cf129b .eael-offcanvas-widget-content > p {
margin: 0 !important;
font-size: 0 !important;
}
/* روابط رئيسية (داخل ) */
.eael-offcanvas-content-2cf129b .eael-offcanvas-widget-content > p > strong > a {
display: flex;
align-items: center;
padding: 13px 14px !important;
margin: 2px 0;
font-size: 17px !important;
font-weight: 700 !important;
color: #fff !important;
border-radius: 12px;
transition: background .2s ease, color .2s ease, padding-inline-start .2s ease;
}
.eael-offcanvas-content-2cf129b .eael-offcanvas-widget-content > p > strong > a:hover {
background: rgba(166, 214, 219, .16);
color: #A6D6DB !important;
padding-inline-start: 20px !important;
}
/* روابط الخدمات الفرعية (رابط مباشر داخل بلا ) */
.eael-offcanvas-content-2cf129b .eael-offcanvas-widget-content > p > a {
position: relative;
display: block;
padding: 10px 14px 10px 28px !important;
margin: 1px 0 1px 10px;
font-size: 15px !important;
font-weight: 500 !important;
color: rgba(255, 255, 255, .82) !important;
border-radius: 10px;
transition: background .2s ease, color .2s ease;
}
/* شرطة صغيرة قبل الرابط الفرعي — تحترم اتجاه RTL عبر inset-inline. */
.eael-offcanvas-content-2cf129b .eael-offcanvas-widget-content > p > a::before {
content: "";
position: absolute;
inset-inline-start: 12px;
top: 50%;
width: 9px;
height: 2px;
background: #A6D6DB;
border-radius: 2px;
transform: translateY(-50%);
opacity: .7;
}
.eael-offcanvas-content-2cf129b .eael-offcanvas-widget-content > p > a:hover {
background: rgba(166, 214, 219, .12);
color: #A6D6DB !important;
}
.eael-offcanvas-content-2cf129b .eael-offcanvas-widget-content > p > a:hover::before {
opacity: 1;
width: 14px;
}
/* ---- 9ب. قائمة الديسكتوب — توحيد ألوان التحويم/النشط مع الدرج ---- *
* ألوان Elementor الحالية للتحويم خضراء (#34813E/#1F6729) لا علاقة لها
* بالهوية. نوحّدها على تيل كلينِست، ونضيف حبّة (pill) لطيفة عند المرور.
* زر «احجز الآن» مستثنى (:not) كي لا يُكسر تصميمه الخاص.
*/
@media (min-width: 1025px) {
.elementor-101 .elementor-element.elementor-element-800c309 .eael-simple-menu > li:not(.cleanest-nav-book) > a {
border-radius: 9999px !important;
padding: 8px 10px !important;
transition: color .2s ease, background-color .2s ease !important;
}
.elementor-101 .elementor-element.elementor-element-800c309 .eael-simple-menu > li:not(.cleanest-nav-book):hover > a {
color: #143D41 !important;
background-color: #EAF4F5 !important;
}
.elementor-101 .elementor-element.elementor-element-800c309 .eael-simple-menu > li:not(.cleanest-nav-book):hover > a > span svg {
fill: #143D41 !important;
}
.elementor-101 .elementor-element.elementor-element-800c309 .eael-simple-menu > li.current-menu-item > a,
.elementor-101 .elementor-element.elementor-element-800c309 .eael-simple-menu > li > a.eael-item-active {
color: #143D41 !important;
}
/* عنصر القائمة المنسدلة (خدماتنا) — تحويم متّسق مع بقية الهوية. */
.elementor-101 .elementor-element.elementor-element-800c309 .eael-simple-menu li ul li:hover > a {
background-color: #143D41 !important;
color: #fff !important;
}
}