/* ===========================================================================
 * Booking Service — Dark Mode + Language Switch styles
 * ===========================================================================
 * يُحقن متغيّرات لونيّة موحّدة على :root للوضع الفاتح، ثم تُستبدل
 * عبر [data-theme="dark"] للوضع الليلي. كل عنصر مستهدف يستخدم var()
 * للحصول على اللون من السياق الحالي تلقائياً.
 * --------------------------------------------------------------------------- */

:root {
    --bs-bg:            #f5f5f5;
    --bs-bg-soft:       #ffffff;
    --bs-bg-elev:       #ffffff;
    --bs-bg-muted:      #f8f9fa;
    --bs-text:          #1f1f1f;
    --bs-text-soft:     #555555;
    --bs-text-muted:    #888888;
    --bs-border:        #e2e4e7;
    --bs-border-soft:   #f0f0f0;
    --bs-shadow:        0 2px 6px rgba(0,0,0,0.06);
    --bs-card-bg:       #ffffff;
    --bs-input-bg:      #ffffff;
    --bs-input-border:  #d8dde3;
    --bs-link:          var(--primary-color, #0066cc);
}

/* ── الوضع الليلي ───────────────────────────────────────────────────── */
/* لوحة ألوان مُعاد تصميمها لتباين WCAG AA+ على كافة عناصر الواجهة */
html[data-theme="dark"] {
    --bs-bg:            #0b1018;   /* خلفية رئيسية أعمق لتباين أعلى */
    --bs-bg-soft:       #131a24;
    --bs-bg-elev:       #1c2533;   /* مستوى مرتفع (بطاقات) أوضح فصلاً */
    --bs-bg-muted:      #161e2a;
    --bs-text:          #f1f5f9;   /* نصّ رئيسي أبيض ناصع — تباين 16:1 */
    --bs-text-soft:     #cbd5e1;   /* نصّ ثانوي — تباين 11:1 */
    --bs-text-muted:    #a3b0c2;   /* نصّ خافت — تباين 7:1 (AA كبير + AAA صغير) */
    --bs-border:        #36435a;   /* حدود أوضح للفصل بين الأقسام */
    --bs-border-soft:   #283246;
    --bs-shadow:        0 4px 14px rgba(0,0,0,0.55);
    --bs-card-bg:       #1c2533;
    --bs-input-bg:      #131a24;
    --bs-input-border:  #3b4a64;
    --bs-link:          #7cc0ff;   /* رابط أزرق فاتح — تباين 9:1 */
    --bs-link-hover:    #a8d6ff;
    --bs-primary-tint:  #1e3a5f;   /* تنت لوني للأزرار الرئيسية */
    color-scheme: dark;
}

/* تطبيق المتغيّرات — مستهدف لتلافي تأثير غير مقصود على ألوان البراند */
html[data-theme="dark"] body {
    background-color: var(--bs-bg) !important;
    color: var(--bs-text) !important;
}

html[data-theme="dark"] .bs-site-header,
html[data-theme="dark"] .header-top-bar,
html[data-theme="dark"] .header-search-bar,
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] .footer-bottom,
html[data-theme="dark"] aside, html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .ad-card, html[data-theme="dark"] .bs-card,
html[data-theme="dark"] .container > article,
html[data-theme="dark"] .single-ad-content,
html[data-theme="dark"] .bs-cat-item, html[data-theme="dark"] .bs-section,
html[data-theme="dark"] .widget, html[data-theme="dark"] .menu-item,
html[data-theme="dark"] .login-box, html[data-theme="dark"] .dashboard-box,
html[data-theme="dark"] .bs-favorites-list,
html[data-theme="dark"] .bs-add-ad-form, html[data-theme="dark"] .bs-edit-ad-form,
html[data-theme="dark"] .bs-hb-header, html[data-theme="dark"] .bs-hb-row {
    background-color: var(--bs-card-bg) !important;
    color: var(--bs-text) !important;
    border-color: var(--bs-border) !important;
    box-shadow: var(--bs-shadow);
}

html[data-theme="dark"] .header-top-bar { background-color: var(--bs-bg-muted) !important; }

/* روابط — لون أزرق فاتح عالي التباين */
html[data-theme="dark"] a { color: var(--bs-link); }
html[data-theme="dark"] a:hover,
html[data-theme="dark"] a:focus { color: var(--bs-link-hover); filter: none; }

/* نصوص رأسية + عامّة — تطبيق صريح بأولوية كافية */
html[data-theme="dark"] .top-bar-menu li a,
html[data-theme="dark"] p, html[data-theme="dark"] li, html[data-theme="dark"] span,
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6,
html[data-theme="dark"] label, html[data-theme="dark"] td, html[data-theme="dark"] th,
html[data-theme="dark"] .ad-title, html[data-theme="dark"] .bs-cat-lb,
html[data-theme="dark"] .menu-item a, html[data-theme="dark"] .top-menu a {
    color: var(--bs-text) !important;
}
html[data-theme="dark"] .description, html[data-theme="dark"] small,
html[data-theme="dark"] .text-muted, html[data-theme="dark"] .ad-meta,
html[data-theme="dark"] .ad-price-old, html[data-theme="dark"] time,
html[data-theme="dark"] .post-meta { color: var(--bs-text-muted) !important; }

/* عناوين نشطة/أزرار رئيسية — تظليل بسيط لمنع تطابقها مع البطاقة */
html[data-theme="dark"] button:not(.btn-darkmode):not(.btn-lang):not([class*="primary"]),
html[data-theme="dark"] .btn-secondary {
    background-color: var(--bs-bg-muted);
    color: var(--bs-text);
    border-color: var(--bs-border);
}
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] [class*="btn-primary"] {
    color: #fff !important;
}

/* الحقول — تباين عالٍ + إطار واضح عند التركيز */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background-color: var(--bs-input-bg) !important;
    color: var(--bs-text) !important;
    border-color: var(--bs-input-border) !important;
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
    border-color: var(--bs-link) !important;
    outline: 2px solid rgba(124,192,255,.25);
    outline-offset: 1px;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--bs-text-muted) !important;
    opacity: 1;
}

/* فواصل وحدود */
html[data-theme="dark"] hr,
html[data-theme="dark"] .border, html[data-theme="dark"] .bs-divider {
    border-color: var(--bs-border) !important;
}

/* حالات تفاعل عامّة */
html[data-theme="dark"] .ad-card:hover,
html[data-theme="dark"] .bs-card:hover {
    background-color: var(--bs-bg-elev) !important;
    border-color: var(--bs-link) !important;
}

/* صور بيضاء قد تتباين سيّئاً مع الخلفية الداكنة — تخفيف بسيط */
html[data-theme="dark"] .ad-card img,
html[data-theme="dark"] .bs-cat-img,
html[data-theme="dark"] .single-ad-image img { filter: brightness(0.9) contrast(1.05); }

/* جداول/قوائم */
html[data-theme="dark"] table { border-color: var(--bs-border) !important; }
html[data-theme="dark"] tr:nth-child(even) { background-color: var(--bs-bg-muted) !important; }
html[data-theme="dark"] thead { background-color: var(--bs-bg-elev) !important; }

/* ===========================================================================
 * الشريط السفلي للجوال (mobile-bottom-nav) في الوضع الليلي
 * ---------------------------------------------------------------------------
 * الخلفية تُحدَّد inline من إعدادات الإدارة (افتراضياً أبيض)، وقاعدة الوضع
 * الليلي تُلوّن النصوص داخل الشريط لأبيض ⇒ نص أبيض على خلفية بيضاء.
 * هنا نفرض خلفية داكنة + نص ناصع لضمان تباين WCAG AA على كل العناصر،
 * مع الإبقاء على لون زرّ "أضف إعلانك" العائم كما حدّده المسؤول.
 * --------------------------------------------------------------------------- */
html[data-theme="dark"] .mobile-bottom-nav {
    /* اللون قابل للتخصيص من «إعدادات القالب ← الجوال ← لون خلفية الشريط
       السفلي (الوضع الليلي)»، مع لون بطاقة داكنة كقيمة احتياطية. */
    background-color: var(--bs-mobile-nav-bg-dark, var(--bs-card-bg)) !important;
    border-top: 1px solid var(--bs-border);
    box-shadow: 0 -4px 14px rgba(0,0,0,0.55);
}
html[data-theme="dark"] .mobile-bottom-nav,
html[data-theme="dark"] .mobile-bottom-nav .mobile-nav-list li a,
html[data-theme="dark"] .mobile-bottom-nav .mobile-nav-list li a span,
html[data-theme="dark"] .mobile-bottom-nav .mobile-nav-list li a i,
html[data-theme="dark"] .mobile-bottom-nav .mobile-nav-list li a .mn-emoji {
    color: var(--bs-text) !important;
}
html[data-theme="dark"] .mobile-bottom-nav .mobile-nav-list li a:hover,
html[data-theme="dark"] .mobile-bottom-nav .mobile-nav-list li a:focus-visible {
    color: var(--bs-link-hover) !important;
}
html[data-theme="dark"] .mobile-bottom-nav .mobile-nav-list li a:focus-visible {
    outline: 2px solid var(--bs-link);
    outline-offset: 2px;
    border-radius: 8px;
}
/* زرّ "أضف إعلانك" العائم — يُبقي على خلفيته الملوّنة (inline) ولكن
   نضمن أن النص داخله أبيض ناصع للتباين بصرف النظر عن اللون المختار. */
html[data-theme="dark"] .mobile-bottom-nav .mobile-nav-list li.bs-mn-floating > a,
html[data-theme="dark"] .mobile-bottom-nav .mobile-nav-list li.add-ad-item > a,
html[data-theme="dark"] .mobile-bottom-nav .mobile-nav-list li.bs-mn-floating > a span,
html[data-theme="dark"] .mobile-bottom-nav .mobile-nav-list li.add-ad-item > a span,
html[data-theme="dark"] .mobile-bottom-nav .mobile-nav-list li.bs-mn-floating > a i,
html[data-theme="dark"] .mobile-bottom-nav .mobile-nav-list li.add-ad-item > a i {
    color: #ffffff !important;
}

/* ===========================================================================
 * زرّ تبديل الوضع الليلي — مشابه لزر اللغة (خفيف وغير بارز)
 * --------------------------------------------------------------------------- */
.btn-darkmode {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.75);
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
    line-height: 1;
}
.btn-darkmode:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-color: rgba(255,255,255,0.5);
}
.btn-darkmode:focus-visible {
    outline: 2px solid rgba(255,255,255,0.6);
    outline-offset: 2px;
}
.btn-darkmode .dark-icon {
    font-size: 14px;
    line-height: 1;
}
.btn-darkmode .dark-code {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    opacity: 0.9;
}
/* الوضع الليلي — إضاءة خفيفة كمؤشر على الحالة */
html[data-theme="dark"] .btn-darkmode {
    border-color: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.65);
}
html[data-theme="dark"] .btn-darkmode:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border-color: rgba(255,255,255,0.3);
}
html[data-theme="dark"] .btn-darkmode[aria-pressed="true"] {
    border-color: rgba(255,255,255,0.5);
    color: #fff;
}

/* زرّ اللغة — خفيف وغير بارز، يندمج مع لون الهيدر */
.btn-lang {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.75);
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
    line-height: 1;
}
.btn-lang:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-color: rgba(255,255,255,0.5);
}
.btn-lang:focus-visible {
    outline: 2px solid rgba(255,255,255,0.6);
    outline-offset: 2px;
}
.btn-lang .lang-flag {
    font-size: 14px;
    line-height: 1;
}
.btn-lang .lang-code {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    opacity: 0.9;
}
/* الوضع الليلي */
html[data-theme="dark"] .btn-lang {
    border-color: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.65);
}
html[data-theme="dark"] .btn-lang:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border-color: rgba(255,255,255,0.3);
}
/* عند التبديل للإنجليزية — إضاءة خفيفة للزر كمؤشر */
html[data-lang="en"] .btn-lang {
    border-color: rgba(255,255,255,0.5);
    color: #fff;
}

/* ===========================================================================
 * الوضع الليلي — منطقة الهيدر الكاملة (من أعلى الصفحة حتى بداية الإعلانات)
 * ---------------------------------------------------------------------------
 * يُعالج التباين المفقود في:
 *   • شريط الأقسام  (.header-cats-bar)
 *   • شريط البحث    (.header-search-bar وعناصره الداخلية)
 *   • زرّ "أضف إعلانك" (.btn-add-ad)
 * =========================================================================== */

/* ─── شريط الأقسام (categories bar) ─────────────────────────────────────── */
html[data-theme="dark"] .header-cats-bar {
    background-color: var(--bs-bg-elev) !important;
    border-top: 1px solid var(--bs-border) !important;
    border-bottom: 1px solid var(--bs-border) !important;
}

html[data-theme="dark"] .cats-menu-list li a {
    color: var(--bs-text-soft) !important;
}

html[data-theme="dark"] .cats-menu-list li a .icon,
html[data-theme="dark"] .cats-menu-list li a .ph,
html[data-theme="dark"] .cats-menu-list li a i {
    color: var(--bs-text-muted) !important;
}

html[data-theme="dark"] .cats-menu-list li a:hover,
html[data-theme="dark"] .cats-menu-list li.current-menu-item > a,
html[data-theme="dark"] .cats-menu-list li.active > a {
    background-color: var(--bs-bg-muted) !important;
    color: var(--bs-link) !important;
}

html[data-theme="dark"] .cats-menu-list li a:hover .icon,
html[data-theme="dark"] .cats-menu-list li a:hover .ph,
html[data-theme="dark"] .cats-menu-list li a:hover i,
html[data-theme="dark"] .cats-menu-list li.current-menu-item > a .icon {
    color: var(--bs-link) !important;
}

/* صور أيقونات الأقسام — تخفيف بسيط لتتناسب مع الخلفية الداكنة */
html[data-theme="dark"] .cats-menu-list li a .icon img,
html[data-theme="dark"] .cats-menu-list .cat-icon img {
    filter: brightness(0.85) saturate(0.9);
}

/* ─── شريط البحث — حاوية النموذج ────────────────────────────────────────── */
html[data-theme="dark"] .search-form {
    background-color: var(--bs-input-bg) !important;
    border-color: var(--bs-input-border) !important;
}

html[data-theme="dark"] .search-category-dropdown {
    background-color: var(--bs-bg-muted) !important;
    border-color: var(--bs-border) !important;
}

html[data-theme="dark"] .search-category-dropdown select {
    color: var(--bs-text) !important;
    background-color: transparent !important;
}

html[data-theme="dark"] .search-field,
html[data-theme="dark"] input.search-field {
    background-color: var(--bs-input-bg) !important;
    color: var(--bs-text) !important;
    caret-color: var(--bs-text);
}

html[data-theme="dark"] .search-submit {
    background-color: var(--bs-primary-tint, #1e3a5f) !important;
    color: var(--bs-link, #7cc0ff) !important;
    border-color: transparent !important;
}

html[data-theme="dark"] .search-submit:hover {
    background-color: #25497a !important;
    color: #fff !important;
}

/* ─── زر "أضف إعلانك" ───────────────────────────────────────────────────── */
html[data-theme="dark"] .btn-add-ad {
    background-color: #c9881a !important;   /* برتقالي أغمق يظهر على الداكن */
    color: #fff !important;
}

html[data-theme="dark"] .btn-add-ad:hover {
    background-color: #e69c22 !important;
    color: #fff !important;
}

/* ─── الشريط العلوي (top bar) — روابطه ──────────────────────────────────── */
html[data-theme="dark"] .top-bar-menu li a,
html[data-theme="dark"] .header-top-info .top-info-text,
html[data-theme="dark"] .header-top-info .top-info-phone {
    color: var(--bs-text-soft) !important;
}

html[data-theme="dark"] .top-bar-menu li a:hover,
html[data-theme="dark"] .header-top-info .top-info-phone:hover {
    color: var(--bs-link) !important;
}

/* ─── حدود فاصلة داخل الهيدر ────────────────────────────────────────────── */
html[data-theme="dark"] .bs-site-header,
html[data-theme="dark"] .header-top-bar,
html[data-theme="dark"] .header-search-bar {
    border-color: var(--bs-border) !important;
}

/* ===========================================================================
 * الوضع الليلي — البريدكرامبز (مسار التنقل)
 * يتجاوز الـ <style> المضمّن في PHP الذي يستخدم background:#fff ثابتة
 * =========================================================================== */
html[data-theme="dark"] .bs-breadcrumbs {
    background: var(--bs-bg-elev) !important;
    border-color: var(--bs-border) !important;
}
html[data-theme="dark"] .bs-breadcrumbs .bs-bc-item a {
    color: var(--bs-link) !important;
}
html[data-theme="dark"] .bs-breadcrumbs .bs-bc-item a:hover {
    background: rgba(255,255,255,0.07) !important;
    color: var(--bs-link-hover, #a8d6ff) !important;
}
html[data-theme="dark"] .bs-breadcrumbs .bs-bc-current span {
    color: var(--bs-text-muted) !important;
}
html[data-theme="dark"] .bs-breadcrumbs .bs-bc-sep {
    color: var(--bs-border) !important;
}
/* بريدكرامب صفحة الإعلان المفرد (single-ad.php) */
html[data-theme="dark"] .bs-breadcrumb {
    background: var(--bs-bg-elev) !important;
    border-color: var(--bs-border) !important;
    color: var(--bs-text) !important;
}
html[data-theme="dark"] .bs-breadcrumb a,
html[data-theme="dark"] .bs-breadcrumb-list a {
    color: var(--bs-link) !important;
}
html[data-theme="dark"] .bs-breadcrumb-sep {
    color: var(--bs-border) !important;
}

/* ===========================================================================
 * الوضع الليلي — الأقسام الفرعية (subcategories icon grid)
 * يتجاوز الـ <style> المضمّن في PHP (background:#f8fafc, #fff, color:#222)
 * =========================================================================== */
html[data-theme="dark"] .bs-cats-grid-wrap {
    background: var(--bs-bg-soft) !important;
    border-color: var(--bs-border) !important;
}
html[data-theme="dark"] .bs-cats-grid-wrap .bs-cats-grid-title {
    color: var(--bs-text) !important;
}
html[data-theme="dark"] .bs-cats-grid-wrap .bs-cats-grid-title i {
    color: var(--bs-link) !important;
}
html[data-theme="dark"] .bs-cats-grid-item {
    background: var(--bs-bg-elev) !important;
    border-color: var(--bs-border-soft) !important;
    color: var(--bs-text) !important;
}
html[data-theme="dark"] .bs-cats-grid-item:hover {
    border-color: rgba(100,160,255,0.4) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.4) !important;
}
html[data-theme="dark"] .bs-cats-grid-label {
    color: var(--bs-text) !important;
}

/* ===========================================================================
 * الوضع الليلي — ترويسة القسم في صفحة الأرشيف (bs-listing-header)
 * يتجاوز الألوان المضمّنة كـ inline style في archive-ad.php
 * =========================================================================== */
html[data-theme="dark"] .bs-listing-header {
    border-color: var(--bs-border) !important;
}
html[data-theme="dark"] .bs-listing-header h1,
html[data-theme="dark"] .bs-listing-header h2 {
    color: var(--bs-link) !important;
}
html[data-theme="dark"] .bs-listing-header span,
html[data-theme="dark"] .bs-listing-header p {
    color: var(--bs-text-muted) !important;
}

/* ===========================================================================
 * الوضع الليلي — شريط الأقسام (تعزيز التغطية الكاملة)
 * يتجاوز #fff الصلب من style.css بخصوصية أعلى + !important
 * =========================================================================== */
html[data-theme="dark"] .header-cats-bar,
html[data-theme="dark"] .header-cats-bar.cats-grid-mode,
html[data-theme="dark"] .cats-flex {
    background-color: var(--bs-bg-elev) !important;
    border-color: var(--bs-border) !important;
}

html[data-theme="dark"] .cats-menu-list li a,
html[data-theme="dark"] .cats-menu-list > li > a {
    color: var(--bs-text-soft) !important;
    background-color: transparent !important;
}

html[data-theme="dark"] .cats-menu-list li a .text,
html[data-theme="dark"] .cats-menu-list li a span.text {
    color: var(--bs-text-soft) !important;
}

html[data-theme="dark"] .cats-menu-list li a .icon,
html[data-theme="dark"] .cats-menu-list li a .icon i,
html[data-theme="dark"] .cats-menu-list li a i {
    color: var(--bs-text-muted) !important;
}

html[data-theme="dark"] .cats-menu-list li a:hover,
html[data-theme="dark"] .cats-menu-list li.current-menu-item > a,
html[data-theme="dark"] .cats-menu-list li.active > a {
    background-color: var(--bs-bg-muted) !important;
    color: var(--bs-link) !important;
}

html[data-theme="dark"] .cats-menu-list li a:hover .text,
html[data-theme="dark"] .cats-menu-list li.current-menu-item > a .text {
    color: var(--bs-link) !important;
}

/* ===========================================================================
 * الوضع الليلي — مربع المدن (bs-smart-switcher)
 * يتجاوز <style> المضمّن في PHP (bs_render_breadcrumbs_css_once)
 * الخلفية البيضاء linear-gradient(#f6fbff,#fff) + #fff على الروابط والرقائق
 * =========================================================================== */
html[data-theme="dark"] .bs-smart-switcher {
    background: var(--bs-bg-elev) !important;
    border-color: var(--bs-border) !important;
}

html[data-theme="dark"] .bs-ss-link-city {
    background: var(--bs-bg-muted) !important;
    color: var(--bs-link) !important;
    border-color: var(--bs-border) !important;
}

html[data-theme="dark"] .bs-ss-link-city:hover {
    background: var(--bs-bg-soft) !important;
    color: var(--bs-link-hover) !important;
}

html[data-theme="dark"] .bs-ss-cities {
    border-top-color: var(--bs-border) !important;
}

html[data-theme="dark"] .bs-ss-cities-title {
    color: var(--bs-text) !important;
}

html[data-theme="dark"] .bs-ss-cities-title i {
    color: var(--bs-link) !important;
}

html[data-theme="dark"] .bs-ss-chip {
    background: var(--bs-bg-muted) !important;
    border-color: var(--bs-border) !important;
    color: var(--bs-link) !important;
}

html[data-theme="dark"] .bs-ss-chip:hover {
    background: var(--bs-link) !important;
    color: #fff !important;
    border-color: var(--bs-link) !important;
}

html[data-theme="dark"] .bs-ss-chip i {
    color: inherit !important;
}

/* ===========================================================================
 * مفتاح اللغة — أنماط الإنجليزية
 * --------------------------------------------------------------------------- */
html[data-lang="en"] body {
    direction: ltr !important;
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
    text-align: left;
}
html[data-lang="en"] * {
    direction: ltr;
}
html[data-lang="en"] .container,
html[data-lang="en"] .header-top-flex,
html[data-lang="en"] .header-main-flex,
html[data-lang="en"] .header-search-flex,
html[data-lang="en"] .header-user-actions,
html[data-lang="en"] .top-bar-menu,
html[data-lang="en"] nav ul,
html[data-lang="en"] .menu,
html[data-lang="en"] .ad-card,
html[data-lang="en"] .bs-row,
html[data-lang="en"] .feed-filter-form,
html[data-lang="en"] form,
html[data-lang="en"] .search-form,
html[data-lang="en"] .sidebar-widget,
html[data-lang="en"] .single-ad-container,
html[data-lang="en"] .single-ad-meta-bar,
html[data-lang="en"] .single-ad-author-box,
html[data-lang="en"] .bs-share-buttons,
html[data-lang="en"] .mobile-nav-list,
html[data-lang="en"] .cats-flex,
html[data-lang="en"] .cats-menu-list,
html[data-lang="en"] .footer-widgets,
html[data-lang="en"] .footer-bottom {
    direction: ltr;
    text-align: left;
}
html[data-lang="en"] .top-bar-menu,
html[data-lang="en"] .header-user-actions,
html[data-lang="en"] .cats-menu-list,
html[data-lang="en"] .mobile-nav-list {
    flex-direction: row;
}
html[data-lang="en"] input,
html[data-lang="en"] textarea,
html[data-lang="en"] select {
    direction: ltr;
    text-align: left;
}
html[data-lang="en"] .search-category-dropdown {
    order: 1;
}
html[data-lang="en"] .search-container .search-field {
    order: 2;
}
html[data-lang="en"] .search-container .search-submit {
    order: 3;
}