/* ============================================
   OLEE Custom Arabic - Minimal RTL Adaptation
   策略: 仅做最少的 RTL 适配，**不改动原版布局结构**
   1) 方向反转 (html/body)
   2) 文本对齐 (text-align: right)
   3) 浮动类反转 (`.fl` → right, `.fr` → left)
   4) 关键 margin-left ↔ margin-right 翻转（用于 LTR 硬编码 margin）
   5) 阿语字体引入
   ============================================ */

html[lang="ar"], html[dir="rtl"] {
    direction: rtl;
}

/* === 基础文字方向 === */
html[lang="ar"] body {
    direction: rtl;
    text-align: right;
    font-family: 'Tajawal', 'Amiri', 'Segoe UI', Tahoma, Arial, sans-serif;
}

/* === 全局字体替换 === */
html[lang="ar"] *, html[dir="rtl"] * {
    font-family: 'Tajawal', 'Amiri', 'Segoe UI', Tahoma, Arial, sans-serif;
}

/* === 文本对齐 (Arabic 字符需要 RTL) === */
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] h4, html[lang="ar"] h5, html[lang="ar"] h6,
html[lang="ar"] p, html[lang="ar"] a, html[lang="ar"] li,
html[lang="ar"] span:not([dir="ltr"]) {
    direction: rtl;
    text-align: right;
}

/* === ul / ol padding 反转 === */
html[lang="ar"] ul, html[lang="ar"] ol {
    padding-right: 20px;
    padding-left: 0;
}

/* === Float 类反转 (核心) === */
html[lang="ar"] .fl { float: right !important; }
html[lang="ar"] .fr { float: left !important; }

/* === 关键的 LTR 硬编码 margin 翻转 ===
   原 CSS 中部分容器使用 margin-left 让出空间 (假设左浮动)
   RTL 下需要 margin-right。
   只针对硬编码数值 margins 做翻转 (非 auto)。
*/
html[lang="ar"] .product .product-nav-nr .nr {
    margin-left: 0 !important;
    margin-right: 240px !important;
}
html[lang="ar"] .common-2 .about-olee .right {
    margin-left: 0 !important;
    margin-right: 845px !important;
}
html[lang="ar"] .common-4 .join-us .right {
    margin-left: 0 !important;
    margin-right: 800px !important;
}
html[lang="ar"] .common-2 .about-olee .left .swiper-slide .img {
    margin-left: 0 !important;
    margin-right: 117px !important;
}
html[lang="ar"] .product-details-box .product-details-nr {
    margin-left: 0 !important;
    margin-right: 194px !important;
}
/* === 关于我们 / 加入我们 文字方向 === */
html[lang="ar"] .about-olee .right,
html[lang="ar"] .join-us .right {
    text-align: right;
}

/* === Header 顶部 (logo 左浮动 → right) === */
html[lang="ar"] .head .logo { float: right; }
html[lang="ar"] .head .right { float: left; }

/* === 电话号码（保持 LTR） === */
html[lang="ar"] .head .right .telephone,
html[lang="ar"] .head .mobile-phone,
html[lang="ar"] .foot .telephone,
html[lang="ar"] [dir="ltr"] {
    direction: ltr !important;
    unicode-bidi: bidi-override !important;
    white-space: nowrap !important;
}
html[lang="ar"] .head .right .telephone a,
html[lang="ar"] .head .mobile-phone a {
    direction: ltr !important;
    unicode-bidi: bidi-override !important;
    white-space: nowrap !important;
    display: inline-block;
}

/* === Common title (PC 端左右排列) === */
html[lang="ar"] .common-title .title { float: right; }
html[lang="ar"] .common-title .more { float: left; }

/* === Breadcrumb 文字方向 === */
html[lang="ar"] .breadcrumb,
html[lang="ar"] nav[aria-label*="Breadcrumb"],
html[lang="ar"] nav[aria-label*="التنقل"] {
    direction: rtl;
    text-align: right;
}

/* === 产品页 product-tabs === */
html[lang="ar"] .product-tabs {
    direction: rtl;
    text-align: right;
}
html[lang="ar"] .product-tabs .tab {
    margin-left: 0 !important;
    margin-right: 10px !important;
}

/* === 产品详情页文字方向 === */
html[lang="ar"] .product-details-box {
    direction: rtl;
    text-align: right;
}
html[lang="ar"] .product-details-nr .product-introduce {
    direction: rtl;
    text-align: right;
}
html[lang="ar"] .product-details-nr .product-introduce .left > div {
    text-align: right;
}
html[lang="ar"] .product-details-nr .product-introduce .left > div span {
    padding-right: 10px !important;
    padding-left: 0 !important;
}
html[lang="ar"] .product-details-nr .product-introduce .left > div span .icon {
    left: auto !important;
    right: 0 !important;
}

/* === Switch Product 文字方向 === */
html[lang="ar"] .switch-product .left { float: right; }
html[lang="ar"] .switch-product .right {
    direction: rtl;
    text-align: right;
}

html[lang="ar"] .product-list li { float: right; }
html[lang="ar"] .product .left { float: right; }

/* === 产品列表卡片 (e.g. Mizhi Series card) === */
html[lang="ar"] .product-list .left.fl { float: right !important; }

/* === Two-nav 子导航 === */
html[lang="ar"] .two-nav, html[lang="ar"] .two-nav ul { direction: rtl; }
html[lang="ar"] .two-nav li { float: right; }

/* === Contact section === */
html[lang="ar"] .contact-us .nr { float: right; }
html[lang="ar"] .contact-us .img { float: left; }

/* === 历史时间轴 === */
html[lang="ar"] .course-time .coures-list { direction: rtl; }
html[lang="ar"] .course-time .time {
    direction: ltr;
    text-align: left;
}

/* === Footer === */
html[lang="ar"] .footer-list {
    direction: rtl;
    text-align: center;
}
html[lang="ar"] .footer-list li { display: inline-block; }
html[lang="ar"] .foot {
    direction: rtl;
    text-align: center;
}
html[lang="ar"] .foot .share a { direction: ltr; }

/* === About 区域: 关于我们/加入我们 (PC 端) === */
html[lang="ar"] .common-2 .about-olee .left.fl {
    float: right !important;
    width: 835px !important;
}
html[lang="ar"] .common-4 .join-us .left.fl {
    float: right !important;
    width: 800px !important;
}

/* === 产品详情缩略图swiper (PC 端) === */
html[lang="ar"] .product-details-box .product-details-left > div {
    float: right !important;
}

/* === Navigation dropdown (语言切换器) === */
html[lang="ar"] .header-nav .wp {
    direction: rtl;
    overflow: visible;
}
html[lang="ar"] .header-nav .wp::after {
    content: "";
    display: table;
    clear: both;
}
html[lang="ar"] .header-nav .lang-switcher .lang-dropdown {
    left: 0 !important;
    right: auto !important;
    text-align: right;
}
html[lang="ar"] .header-nav .lang-switcher:hover .lang-dropdown,
html[lang="ar"] .header-nav .lang-switcher:focus-within .lang-dropdown,
html[lang="ar"] .lang-dropdown:hover {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 9999 !important;
}
html[lang="ar"] .header-nav .lang-switcher:hover .arrow {
    transform: rotate(180deg);
}

/* === 顶部 nav dropdown menu === */
html[lang="ar"] .header-nav .seed {
    left: auto;
    right: 0;
    text-align: right;
}
html[lang="ar"] .header-nav .seed .left { float: right; }
html[lang="ar"] .header-nav .seed .seed-list {
    margin-left: 0;
    margin-right: 390px;
}
html[lang="ar"] .header-nav .seed .seed-list li { float: right; }
html[lang="ar"] .header-nav .seed .more-btn {
    text-align: left;
    transform: none;
}

/* === 顶部导航 (H5 端/移动端) ===
   在移动端，原 CSS 已经处理 nav 布局
   我们不要强制 .header-nav display，让原 CSS 工作
*/
html[lang="ar"] .header-nav .wp > li {
    float: right;  /* PC 端 RTL 反转 */
}

/* === Swiper (carousel) 保持 LTR (slide 排序) === */
html[lang="ar"] .swiper-container,
html[lang="ar"] .swiper-wrapper,
html[lang="ar"] .swiper-slide {
    direction: ltr !important;
}
html[lang="ar"] .banner { direction: ltr; }

/* === 移动端 media query (max-width: 768px) === */
@media screen and (max-width: 768px) {
    /* 让原 mobile CSS 工作，不强制 float */
    html[lang="ar"] .header-nav > ul > li {
        float: none !important;
    }
    html[lang="ar"] .mobile-menu-btn {
        left: 20px !important;
        right: auto !important;
    }
    /* 移动端不需要大 margin */
    html[lang="ar"] .common-2 .about-olee .right,
    html[lang="ar"] .common-4 .join-us .right,
    html[lang="ar"] .product .product-nav-nr .nr,
    html[lang="ar"] .product-details-box .product-details-nr,
    html[lang="ar"] .product-details-box .product-introduce .nr {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}

/* === Cookie notice === */
html[lang="ar"] #cookie-notice {
    direction: rtl;
    text-align: right;
}

/* === Container wp === */
html[lang="ar"] .wp { direction: rtl; }

/* === SEO content list === */
html[lang="ar"] .seo-content {
    direction: rtl;
    text-align: right;
}
html[lang="ar"] .seo-content ul,
html[lang="ar"] section ul {
    padding-right: 20px;
    padding-left: 0;
}

/* === Forms === */
html[lang="ar"] input, html[lang="ar"] textarea,
html[lang="ar"] select, html[lang="ar"] button {
    direction: rtl;
    text-align: right;
}
html[lang="ar"] input[type="tel"],
html[lang="ar"] input[type="email"],
html[lang="ar"] input[type="number"] {
    direction: ltr;
    text-align: left;
}

/* === 产品详情页: 缩略图和大图在同一行 (flex 横向布局) === */
html[lang="ar"] .product-details-box {
    height: auto !important;
    min-height: 600px !important;
    padding-top: 20px !important;
}
html[lang="ar"] .product-details-box > .wp > .nr {
    display: flex !important;
    flex-direction: row-reverse !important;  /* RTL: 缩略图在右 */
    align-items: flex-start !important;
    gap: 20px !important;
    background: #fff !important;
    box-shadow: 0px 7px 20px 1px rgba(0, 0, 0, 0.19) !important;
    position: relative !important;
    direction: rtl !important;
    padding: 20px !important;
}
/* 缩略图列表在右侧 */
html[lang="ar"] .product-details-box .product-details-left {
    flex: 0 0 200px !important;
    width: 200px !important;
    height: 600px !important;
    background: #fff !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    float: none !important;
    order: 2 !important;
}
html[lang="ar"] .product-details-box .product-details-left > div {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    position: relative !important;
    float: none !important;
}
html[lang="ar"] .product-details-box .product-details-left .swiper-container {
    height: 100% !important;
    width: 100% !important;
}
html[lang="ar"] .product-details-box .product-details-left .swiper-wrapper {
    height: 100% !important;
}
html[lang="ar"] .product-details-box .product-details-left .swiper-slide {
    width: 100% !important;
    height: 80px !important;
    margin-bottom: 5px !important;
    padding-bottom: 0 !important;
    position: relative !important;
    cursor: pointer !important;
}
html[lang="ar"] .product-details-box .product-details-left .swiper-slide img {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    object-fit: cover !important;
    border: 1px solid #eee !important;
}

/* 大图区在左侧 */
html[lang="ar"] .product-details-box .product-details-nr {
    flex: 1 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    direction: rtl !important;
    order: 1 !important;
}
html[lang="ar"] .product-details-box .product-details-nr > li {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    min-height: 500px !important;
    opacity: 0;
    display: none;
}
html[lang="ar"] .product-details-box .product-details-nr > li.active {
    display: block !important;
    opacity: 1 !important;
}
html[lang="ar"] .product-details-box .product-details-nr > li.active > .top-img {
    position: relative !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    height: 500px !important;
    overflow: hidden !important;
    margin: 0 !important;
}
html[lang="ar"] .product-details-box .product-details-nr > li.active > .top-img img {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
html[lang="ar"] .product-details-box .product-details-nr .top-video,
html[lang="ar"] .product-details-box .product-details-nr > li:not(.active) > .top-img {
    display: none !important;
}

/* 产品介绍 (大图下方) */
html[lang="ar"] .product-details-box .product-introduce {
    display: flex !important;
    flex-direction: row-reverse !important;
    line-height: 1.6 !important;
    padding: 20px !important;
    direction: rtl !important;
    text-align: right !important;
    background: #fafafa !important;
    width: 100% !important;
}
html[lang="ar"] .product-details-box .product-introduce .left {
    flex: 0 0 238px !important;
    width: 238px !important;
    padding: 0 !important;
    text-align: right !important;
}
html[lang="ar"] .product-details-box .product-introduce .left > div span {
    padding-right: 30px !important;
    padding-left: 0 !important;
}
html[lang="ar"] .product-details-box .product-introduce .left > div span .icon {
    left: auto !important;
    right: 0 !important;
}
html[lang="ar"] .product-details-box .product-introduce .nr {
    flex: 1 !important;
    margin: 0 !important;
    padding: 0 20px !important;
    text-align: right !important;
    direction: rtl !important;
}



@media print {
    html[lang="ar"] body { direction: rtl; }
}