/**
 * RTL (Right-to-Left) Styles for Arabic and other RTL languages
 * This file is automatically loaded by WordPress when site language is RTL
 */

/* ============================================
   Top Bar RTL Adjustments
   ============================================ */

/* Reverse the order of items in top bar */
.rtl .bg-gray-900 .container {
    flex-direction: row-reverse;
}

/* ============================================
   Header Navigation RTL Adjustments
   ============================================ */

/* Reverse header layout */
.rtl header .container {
    flex-direction: row-reverse;
}

/* Logo and company name */
.rtl header .flex.items-center.gap-3 {
    flex-direction: row-reverse;
}

.rtl header i.mr-2 {
    margin-right: 0;
    margin-left: 0.5rem;
}

/* ============================================
   Language Switcher RTL Adjustments
   ============================================ */

/* Submenu positioning */
.rtl .language-switcher .wpml-ls-sub-menu {
    right: 0;
    left: auto;
}

/* ============================================
   Mega Menu RTL Adjustments
   ============================================ */

/* Mega menu positioning */
.rtl .mega-menu {
    right: 0;
    left: auto;
}

.rtl .mega-menu::before {
    right: 0;
    left: auto;
}

/* ============================================
   Footer RTL Adjustments
   ============================================ */

/* Icon positioning in footer */
.rtl footer i.mr-2,
.rtl footer i.mt-1 {
    margin-right: 0;
    margin-left: 0.75rem;
}

/* Contact info icon layout */
.rtl footer .flex.items-start.gap-3 {
    flex-direction: row-reverse;
}

/* Footer bottom bar */
.rtl footer .flex.flex-col.md\\:row {
    flex-direction: column-reverse;
}

@media (min-width: 768px) {
    .rtl footer .flex.flex-col.md\\:row {
        flex-direction: row-reverse;
    }
}

/* Social media icons */
.rtl footer .flex.gap-6.mt-4.md\\:mt-0 {
    flex-direction: row-reverse;
}

/* ============================================
   WhatsApp Floating Button RTL Adjustments
   ============================================ */

/* Move WhatsApp button to left side */
.rtl .fixed.bottom-8.right-8 {
    right: auto;
    left: 2rem;
}

/* ============================================
   Text Alignment RTL Adjustments
   ============================================ */

/* Global text alignment for RTL */
.rtl {
    direction: rtl;
    text-align: right;
}

/* Justified text adjustments */
.rtl .space-y-4 p,
.rtl .timeline-card p,
.rtl .qa-answer p,
.rtl .product-description p,
.rtl .description p {
    text-align: justify;
    text-align-last: right;
}

/* ============================================
   Modal RTL Adjustments
   ============================================ */

/* Close buttons positioning */
.rtl #close-inquiry-modal {
    right: auto;
    left: 1rem;
}

.rtl #close-lightbox {
    right: auto;
    left: 1.5rem;
}

/* Modal layout - reverse columns */
.rtl #inquiry-form-modal > div {
    flex-direction: row-reverse;
}

/* Border side for inquiry modal */
.rtl #inquiry-form-modal .border-l {
    border-left: none;
    border-right: 1px solid #f3f4f6;
}

/* ============================================
   Q&A Accordion RTL Adjustments
   ============================================ */

/* Icon rotation for RTL */
.rtl .qa-icon {
    transform: rotate(180deg);
}

.rtl .qa-item.active .qa-icon {
    transform: rotate(225deg);
}

/* ============================================
   Animation Adjustments
   ============================================ */

/* Fade directions for RTL */
.rtl [data-animate="fade-left"] {
    transform: translate3d(18px, 0, 0);
}

.rtl [data-animate="fade-right"] {
    transform: translate3d(-18px, 0, 0);
}

/* ============================================
   Navigation Menu RTL Adjustments
   ============================================ */

/* Main navigation menu */
.rtl nav.flex.items-center {
    flex-direction: row-reverse;
}

/* ============================================
   Search Modal RTL Adjustments
   ============================================ */

/* If search modal has positioning */
.rtl #search-modal-container {
    text-align: right;
}

/* ============================================
   Form RTL Adjustments
   ============================================ */

/* Form labels and icons */
.rtl form label {
    text-align: right;
}

/* ============================================
   Social Icons RTL Adjustments
   ============================================ */

/* Top bar social icons separator */
.rtl .border-l.border-gray-700.pl-3 {
    border-left: none;
    border-right: 1px solid #374151;
    padding-left: 0;
    padding-right: 0.75rem;
}

/* ============================================
   Button RTL Adjustments
   ============================================ */

/* Buttons with icons */
.rtl button i,
.rtl a i.mr-2 {
    margin-right: 0;
    margin-left: 0.5rem;
}

.rtl button i.ml-2 {
    margin-left: 0;
    margin-right: 0.5rem;
}

/* ============================================
   Pagination RTL Adjustments
   ============================================ */

/* If pagination arrows exist */
.rtl .pagination i.fa-chevron-left {
    transform: rotate(180deg);
}

.rtl .pagination i.fa-chevron-right {
    transform: rotate(180deg);
}

/* ============================================
   Product Card RTL Adjustments
   ============================================ */

/* Product card content */
.rtl .product-card {
    text-align: right;
}

/* ============================================
   Timeline RTL Adjustments
   ============================================ */

/* Timeline direction */
.rtl .timeline {
    direction: rtl;
}

/* ============================================
   Utility Classes RTL Overrides
   ============================================ */

/* Common spacing overrides for RTL */
.rtl .mr-1 { margin-right: 0 !important; margin-left: 0.25rem !important; }
.rtl .mr-2 { margin-right: 0 !important; margin-left: 0.5rem !important; }
.rtl .mr-3 { margin-right: 0 !important; margin-left: 0.75rem !important; }
.rtl .mr-4 { margin-right: 0 !important; margin-left: 1rem !important; }

.rtl .ml-1 { margin-left: 0 !important; margin-right: 0.25rem !important; }
.rtl .ml-2 { margin-left: 0 !important; margin-right: 0.5rem !important; }
.rtl .ml-3 { margin-left: 0 !important; margin-right: 0.75rem !important; }
.rtl .ml-4 { margin-left: 0 !important; margin-right: 1rem !important; }

.rtl .pl-2 { padding-left: 0 !important; padding-right: 0.5rem !important; }
.rtl .pl-3 { padding-left: 0 !important; padding-right: 0.75rem !important; }
.rtl .pl-4 { padding-left: 0 !important; padding-right: 1rem !important; }

.rtl .pr-2 { padding-right: 0 !important; padding-left: 0.5rem !important; }
.rtl .pr-3 { padding-right: 0 !important; padding-left: 0.75rem !important; }
.rtl .pr-4 { padding-right: 0 !important; padding-left: 1rem !important; }

/* Border overrides */
.rtl .border-l { border-left: none !important; }
.rtl .border-r { border-right: none !important; }

/* Text alignment overrides */
.rtl .text-left { text-align: right !important; }
.rtl .text-right { text-align: left !important; }

/* Flex direction overrides */
.rtl .flex-row { flex-direction: row-reverse !important; }

/* ============================================
   Responsive RTL Adjustments
   ============================================ */

/* Mobile menu RTL */
.rtl #mobile-menu {
    text-align: right;
}

.rtl #mobile-menu ul {
    flex-direction: column;
}

/* Mobile RTL adjustments */
@media (max-width: 768px) {
    .rtl .bg-gray-900 .container {
        flex-direction: column-reverse;
        align-items: flex-start;
    }
    
    .rtl header .container {
        flex-direction: column-reverse;
    }
}

/* ============================================
   Additional RTL Specific Styles
   ============================================ */

/* Ensure Arabic fonts render correctly */
.rtl {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* RTL specific scrollbar styling (optional) */
.rtl ::-webkit-scrollbar {
    width: 8px;
}

.rtl ::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.rtl ::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.rtl ::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ============================================
   Product Detail Page (single-product.php) RTL
   ============================================ */

/*
 * 核心原则：使用 CSS direction:rtl 让文本自然从右向左排列
 * 不依赖 JS 操作 DOM，不依赖复杂的内联样式
 */

/* ---- Product Title & Model ---- */
.product-right-panel h1 {
    text-align: right !important;
}

/*
 * Model 行：direction:rtl 使整行从右向左显示
 * LTR:  Model: BG2M-BL-C
 * RTL:  BG2M-BL-C :Model    ← 阿拉伯文用户看到的效果
 */
#product-model-line {
    direction: rtl !important;
    text-align: right !important;
}

/* ---- Core Features (核心特性) ---- */
/* 容器：RTL 方向，文字靠右 */
#core-features-section,
#core-features-section .core-features-list {
    direction: rtl !important;
    text-align: right !important;
}

/* ---- Core Features 标题 → Core Features: ★ ---- */
h4.core-features-title {
    text-align: right !important;
}

/* ---- Core Features 列表项 → 文字内容 ✓ ---- */
div#core-features-section,
div.core-features-list,
li.core-feature-item,
span.core-feature-text {
    direction: rtl !important;
    text-align: right !important;
}
li.core-feature-item {
    flex-direction: row-reverse !important;
    justify-content: flex-end !important;
}

/* Tooltip 位置调整（RTL 下 tooltip 应该出现在左边） */
.core-feature-item .absolute.left-0 {
    left: auto !important;
    right: 0 !important;
}

/* ---- Section Titles (技术规格、产品描述等) ---- */
.product-right-panel h3.text-lg,
.product-right-panel h3.md\:text-xl,
section.mb-10 > h3:first-child {
    text-align: right !important;
    direction: rtl !important;
}

/* ---- Spec Selector Labels ---- */
.spec-label {
    text-align: right !important;
    direction: rtl !important;
}
.spec-label i {
    margin-right: 0 !important;
    margin-left: 6px !important;
}

/* ---- Inquiry Button ---- */
button.request-quote-btn {
    flex-direction: row-reverse;
}

/* ---- Related Products Scroll Arrows ---- */
.related-scroll-btn.left {
    left: auto !important;
    right: 0 !important;
}
.related-scroll-btn.right {
    right: auto !important;
    left: 0 !important;
}

/* ---- Technical Specs Table ---- */
.overflow-x-auto table th,
.overflow-x-auto table td {
    text-align: center !important;
}

/* ---- Share Tooltip ---- */
.share-container > .share-tooltip {
    left: auto !important;
    right: 50% !important;
    transform: translateX(50%) !important;
}

/* ---- Product Description ---- */
#product-description-section,
#product-description-section .prose,
#product-description-section .prose * {
    direction: rtl !important;
    text-align: right !important;
}