@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap');

html[dir="rtl"] body {
    font-family: 'Abhaya Libre';
    text-align: right;
}

/* Card RTL Adjustments - V2 */

/* General text alignment for card sections */
html[dir="rtl"] .cargrid-title-area .title,
html[dir="rtl"] .cargrid-title-area .info,
html[dir="rtl"] .cargrid-price-view,
html[dir="rtl"] .cargrid-price-view .prices {
    text-align: right;
}

/* Position bookmark and top-left text to the left in RTL */
html[dir="rtl"] .grid-list-bookmark {
    right: auto;
    left: 16px;
}

html[dir="rtl"] .card-light-text {
    left: auto;
    right: 16px;
}

/* Correctly align and space the icon list */
html[dir="rtl"] .cargrid-list-items {
    justify-content: space-between; /* Keep the same distribution */
    direction: rtl; /* This will reverse the order of flex items */
}

html[dir="rtl"] .cargrid-list-items li {
    text-align: center;
}

/* Reverse the padding for the list items to create correct spacing */
html[dir="rtl"] .cargrid-list-items li:not(:last-child) {
    padding-right: 0;
    padding-left: 25px; /* Mirrored from the original padding-right */
}

/* Ensure the pseudo-element separator is on the correct side if it were used */
html[dir="rtl"] .cargrid-list-items li:not(:last-child)::after {
    right: auto;
    left: 0;
}

/* Adjust button alignment if necessary */
html[dir="rtl"] .cargrid-price-view.d-flex {
    flex-direction: row-reverse;
}

html[dir="rtl"] .cargrid-price-view .prices {
     margin-left: auto;
     margin-right: 0;
}

/* Trusted Companies Section */
html[dir="rtl"] .trusted-companies-section .in-title-36px {
    text-align: right;
}

html[dir="rtl"] .logo-slider-container {
    direction: ltr; /* Prevent the marquee/slider direction from being affected by the global RTL setting */
}

/* Search Filter Section - V4 (Final Correction) */
html[dir="rtl"] .atn-search-nav-pills {
    direction: rtl;
}



/* Remove all separators and paddings first */


/* Add separator back only to items that are not the first or last child */


html[dir="rtl"] .atn-search-filter-wrap .real-search-filter-border::after, .atn-search-filter-wrap .atn-single-search-item::after {
    display: none;
}

@media (max-width: 767px) {
    html[dir="rtl"] .atn-single-search-item {
        padding-right: 5px;
    }
}


html[dir="rtl"] .atn-search-filter-label {
    text-align: right;
        margin-right: 25px;
}
/*
 * قواعد لعكس اتجاه المؤشر والخط في القوائم المنسدلة (nice-select)
 * تأكد من تطبيق هذه القواعد بعد أي قواعد افتراضية لـ nice-select
 * لضمان التجاوز الصحيح.
 */

html[dir="rtl"] .nice-select.at-nice-select {
    direction: rtl; /* لجعل اتجاه العنصر بالكامل من اليمين لليسار */
    text-align: right !important; /* لضمان محاذاة النص داخل الزر لليمين، متجاوزاً أي left !important; */
    padding: 12px 26px 20px 26px; /* حافظ على padding إذا كان مناسباً لـ RTL */
    border-radius: 12px 0 0 12px; /* عكس نصف قطر الحدود إذا كانت الزوايا مهمة */
    /* يمكنك تعديل border-radius بناءً على تصميمك النهائي، مثلاً: 12px لجميع الزوايا */
}

/* تعديل موضع السهم (المؤشر) داخل زر nice-select */
html[dir="rtl"] .nice-select.at-nice-select::after {
    right: auto; /* إلغاء أي right سابق */
    left: 20px; /* وضع السهم على اليسار بمسافة 20px من الحافة */
    transform: translateY(-50%) rotate(0deg) !important; /* إزالة أي دوران غير مرغوب فيه وتوسيته عمودياً */
    /* إذا كان السهم يحتاج إلى أن يكون معكوسًا أفقياً ليناسب اتجاه RTL، استخدم: transform: translateY(-50%) rotate(0deg) scaleX(-1) !important; */
}

/* محاذاة النص الحالي داخل الزر */
html[dir="rtl"] .nice-select.at-nice-select .current {
    text-align: right !important; /* محاذاة نص "اختر العلامة التجارية" لليمين */
}

/* تعديل اتجاه ومحاذاة عناصر القائمة المنسدلة عند فتحها */
html[dir="rtl"] .nice-select.at-nice-select .list {
    right: 0; /* لجعل القائمة المنسدلة تظهر من اليمين */
    left: auto; /* إلغاء أي left سابق */
    text-align: right; /* محاذاة النص داخل القائمة لليمين */
    direction: rtl; /* تطبيق RTL على القائمة نفسها */
}

/* محاذاة كل خيار (option) داخل القائمة المنسدلة */
html[dir="rtl"] .nice-select.at-nice-select .list .option {
    text-align: right; /* محاذاة خيارات القائمة لليمين */
    padding-left: 20px; /* ضبط الحشوة الداخلية لليمين */
    padding-right: 20px; /* ضبط الحشوة الداخلية لليسار */
}

html[dir="rtl"] .at-home-nav-link {
    display: flex; /* تحويل الرابط إلى حاوية فليكس بوكس */
    align-items: center; /* لمحاذاة العناصر عمودياً في المنتصف */
    /* قم بإزالة flex-direction: row-reverse; هنا مؤقتاً لتجربة هذا الحل. */
    /* justify-content: space-between; */ /* يمكننا تفعيله لاحقاً إذا لزم الأمر */
    text-align: right; /* لضمان محاذاة النص داخل العنصر لليمين */
    width: 100%; /* للتأكد من أن الرابط يأخذ العرض الكامل المتاح له */
}

/* لضبط أيقونة السهم داخل القائمة المنسدلة */
html[dir="rtl"] .at-home-nav-link svg {
    /* هذه هي القواعد الأساسية التي يجب أن تحركه */
    margin-left: 0; /* تأكد من إزالة أي هامش يسار قديم */
    margin-right: auto; /* هذا سيدفع السهم إلى أقصى اليسار */
    order: -1; /* تأكد من أن السهم هو أول عنصر في ترتيب فليكس بوكس */

    /* إذا كان السهم هو عنصر SVG ويحتوي على دوران داخلي، فقد تحتاج لتعطيله */
    transform: none !important; /* إزالة أي تحويلات قد تمنعه من التحرك */
    /* أو إذا كان السهم يشير لليسار وتريد عكسه لليمين ليناسب شكل القائمة: */
    /* transform: scaleX(-1); */
}

/* لضمان أن النص (شاحنات1) يظهر بشكل صحيح على اليمين */
html[dir="rtl"] .at-home-nav-link span {
    order: 1; /* يجعل عنصر النص يظهر في الترتيب الثاني (على اليمين) */
    margin-right: auto; /* يدفع النص إلى اليمين */
    margin-left: 0; /* تأكد من إزالة أي هامش يسار قديم */
}

html[dir="rtl"] .dropdown-menu.user-dropdown-menu {
    text-align: right !important; /* لضمان أن النص داخل القائمة يبدأ من اليمين */
    direction: rtl; /* لجعل محتوى القائمة بالكامل يتعامل باتجاه RTL */

    /* تعديل موضع القائمة المنسدلة لتظهر من اليمين */
    /* هذه الخصائص هي الأهم لإعادة تموضع القائمة */
    left: auto !important;  /* إلغاء أي left سابق قد يضعه على اليسار */
    right: 0px !important; /* لجعل القائمة تبدأ من اليمين، محاذاةً لزر التبديل الخاص بها */

   }

/* محاذاة عناصر القائمة الداخلية (مثل لوحة القيادة، تسجيل الخروج) */
html[dir="rtl"] .dropdown-menu.user-dropdown-menu .user-dropdown-item {
    text-align: right; /* محاذاة النص داخل كل عنصر لليمين */
    direction: rtl; /* ضمان اتجاه RTL لكل عنصر فرعي */
    padding-left: 1rem; /* ضبط H padding لـ RTL */
    padding-right: 1rem;
}

/* إذا كان هناك أيقونات (مثل svg أو span.icon) داخل user-dropdown-item،
   لجعل الأيقونة على اليسار والنص على اليمين */
html[dir="rtl"] .dropdown-menu.user-dropdown-menu .user-dropdown-item > svg,
html[dir="rtl"] .dropdown-menu.user-dropdown-menu .user-dropdown-item > .icon {
    margin-right: 0; /* إزالة هامش اليمين الافتراضي */
    margin-left: 10px; /* إضافة هامش على اليسار لفصل الأيقونة عن النص */
    order: -1; /* لجعل الأيقونة تظهر أولاً (على اليسار) إذا كان العنصر الأب flex */
}

/* محاذاة النص في قسم px-10px py-12px (مثل "تسجيل الخروج") */
html[dir="rtl"] .dropdown-menu.user-dropdown-menu .px-10px.py-12px {
    text-align: right; /* محاذاة النص لليمين */
    direction: rtl; /* ضمان اتجاه RTL */
    padding-left: 10px; /* ضبط H padding لـ RTL */
    padding-right: 10px;
}



















/* Header RTL Adjustments (Force LTR Layout, Align Text Right) */
html[dir="rtl"] .main-header-area,
html[dir="rtl"] .at-home-menu-wrap {
    direction: ltr;
}

html[dir="rtl"] .header-nav-list,
html[dir="rtl"] .header-buttons,
html[dir="rtl"] .have-sub-menu .first-sub-menu,
html[dir="rtl"] .at-home-nav-link,
html[dir="rtl"] .login {
    text-align: right;
}

/* Footer RTL Adjustments */
html[dir="rtl"] .main-footer-section {
    text-align: right;
}

html[dir="rtl"] .transparent2-nice-select {
    text-align: right;
}

/* --- Footer Top Area Width Correction --- */
.footer-top-area {
    width: 100% !important; /* Ensure it takes the width of its container */
    max-width: 100% !important; /* Prevent it from exceeding the container width */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

/* --- Footer Logo Text Wrapping Correction for RTL --- */
html[dir="rtl"] .footer-middle-logo .info {
    white-space: normal !important; /* Allow text to wrap naturally */
    word-wrap: break-word; /* Break long words if necessary */
}

html[dir="rtl"] .cap-breadcrumb-item + .cap-breadcrumb-item::before {
    float: right !important; /* **هام جدًا:** تغيير اتجاه float للفاصل */
    padding-left: 0.5rem !important; /* المسافة بعد الفاصل في RTL (على يسار الفاصل) */
    padding-right: 0.3rem !important;    /* إزالة أي حشو أيمن غير مرغوب فيه */
}

html[dir="rtl"] .subMit {
    position: absolute;
    left: 14px;
    top: 15px;
}

html[dir="rtl"] .me-3 {
    margin-left: 1rem !important;
}

.mh-title-highlight::after {
    position: absolute;
    content: "";
    top: 100%;
    aspect-ratio: 119.924 / 11;
    width: 90%;
    background: url(../images/icons/mh-highlight-shape.svg) no-repeat scroll
        center center / cover;
}

[dir="ltr"] .mh-title-highlight::after {
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

[dir="rtl"] .mh-title-highlight::after {
    right: 50%;
    transform: translateX(50%) translateY(-50%);
}