/* =====================================================================
   AUTONEX Theme - Right-to-Left (RTL) Stylesheet
   ===================================================================== */

/* ── Typography & Global Direction ── */
body, html, input, select, textarea, button, p, h1, h2, h3, h4, h5, h6 {
    direction: rtl;
    text-align: right;
    font-family: 'Cairo', 'Inter', 'Segoe UI', sans-serif !important;
}

/* ── Mirroring Helper Rules ── */
.topbar-left, .topbar-right, .header-inner, .main-nav, .header-actions {
    /* Flex handles RTL naturally, but we force alignment direction if needed */
}

/* ── Topbar Spacing ── */
.topbar-item svg {
    margin-right: 0 !important;
    margin-left: 6px !important;
}

/* ── Logo Spacing ── */
.logo-img {
    margin-right: 0 !important;
    margin-left: 10px !important;
}

/* ── Navigation Chevrons & Indicators ── */
.nav-link .chevron,
.mega-arrow {
    transform: scaleX(-1) !important;
}
.nav-item:hover .nav-link .chevron {
    transform: rotate(180deg) scaleX(-1) !important;
}

/* ── Flyout Menus Alignment ── */
.mega-submenu-l2 {
    left: auto !important;
    right: 98% !important;
    transform: translateX(-10px) !important;
}
.mega-parent-item:hover > .mega-submenu-l2 {
    transform: translateX(0) !important;
}

.mega-submenu-l2.shift-up {
    transform: translateX(-10px) translateY(-50%) !important;
}
.mega-parent-item:hover > .mega-submenu-l2.shift-up {
    transform: translateX(0) translateY(-50%) !important;
}

.mega-submenu-l3 {
    left: auto !important;
    right: 98% !important;
    transform: translateX(-10px) !important;
}
.mega-sub-parent-item:hover > .mega-submenu-l3 {
    transform: translateX(0) !important;
}

.mega-submenu-l4 {
    left: auto !important;
    right: 98% !important;
    transform: translateX(-10px) !important;
}
.mega-sub-parent-item:hover > .mega-submenu-l4 {
    transform: translateX(0) !important;
}

.mega-submenu-l4.open-left {
    right: auto !important;
    left: 98% !important;
    transform: translateX(10px) !important;
}
.mega-sub-parent-item:hover > .mega-submenu-l4.open-left {
    transform: translateX(0) !important;
}

.mega-item-link:hover .mega-arrow,
.mega-sub-item:hover .mega-arrow,
.mega-sub-item-l3:hover .mega-arrow {
    transform: translateX(-2px) scaleX(-1) !important;
}

/* ── Dropdown Item layout ── */
.dropdown-item {
    text-align: right !important;
}

/* ── Homepage Components RTL ── */
.hero-eyebrow svg {
    margin-right: 0 !important;
    margin-left: 8px !important;
}

.hero-arrow.prev {
    left: auto !important;
    right: 40px !important;
}
.hero-arrow.next {
    right: auto !important;
    left: 40px !important;
}
.hero-arrow.prev svg,
.hero-arrow.next svg {
    transform: scaleX(-1) !important;
}
.hero-arrow.prev:hover svg {
    transform: translateX(3px) scaleX(-1) !important;
}
.hero-arrow.next:hover svg {
    transform: translateX(-3px) scaleX(-1) !important;
}

/* About Checklist Badges */
.about-badge {
    text-align: right !important;
}

/* Divisions */
.division-link svg {
    transform: scaleX(-1) !important;
    margin-right: 8px !important;
    margin-left: 0 !important;
}
.division-card:hover .division-link {
    gap: 10px !important;
}

/* Product Cards */
.product-card-badge {
    left: auto !important;
    right: 12px !important;
}

/* Services */
.service-icon {
    margin-right: 0 !important;
    margin-left: auto !important;
}

/* About Story Checklist & Pillars */
.pillar-item {
    flex-direction: row !important;
}
.pillar-dot {
    margin-right: 0 !important;
    margin-left: 12px !important;
}

/* Mobile Navigation */
.mobile-nav-link svg,
.mobile-sub-menu svg {
    transform: scaleX(-1) !important;
}
.mobile-sub-menu {
    padding-left: 0 !important;
    padding-right: 1rem !important;
}
.mobile-sub-link {
    text-align: right !important;
}

/* Force LTR scroll layout for both sliders in RTL to loop infinitely and seamlessly */
.certs-carousel, .certs-track, .brands-carousel, .brands-track {
    direction: ltr !important;
}

/* Buttons and Links */
.btn svg, .button svg {
    transform: scaleX(-1) !important;
    margin-right: 8px !important;
    margin-left: 0 !important;
}

/* WooCommerce Archive layout overrides for RTL loop */
.woocommerce .products ul, .woocommerce ul.products {
    margin-right: 0 !important;
}
.woocommerce-loop-product__title {
    text-align: right !important;
}

/* Fix float / flex properties for standard margins */
.m-l-auto { margin-right: auto !important; margin-left: 0 !important; }
.m-r-auto { margin-left: auto !important; margin-right: 0 !important; }

/* Centered Sections Fix */
.section-header.centered,
.section-header.centered h1,
.section-header.centered h2,
.section-header.centered h3,
.section-header.centered p,
.text-center {
    text-align: center !important;
}
.about-vm-header h2,
.about-what-header h2,
.about-partners-header h2,
.about-cta h2,
.about-hero h1 {
    text-align: center !important;
}

/* ── WooCommerce Single Product Gallery Custom Layout & Hover Zoom ── */
.woocommerce-product-gallery,
.woocommerce-product-gallery * {
  direction: ltr !important;
  text-align: left !important;
}
.woocommerce-product-gallery {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}
.woocommerce-product-gallery__image {
  position: relative !important;
  overflow: hidden !important;
  cursor: zoom-in !important;
  border-radius: var(--radius-xl);
}
.woocommerce-product-gallery__image a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}
.woocommerce-product-gallery__image img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  transition: transform 0.2s ease-out !important;
}

/* ── Fix Lists Padding for RTL ── */
html[dir="rtl"] .woocommerce-product-details__short-description ul,
html[dir="rtl"] .product-details ul,
html[dir="rtl"] .product-meta ul,
html[dir="rtl"] .product-info ul,
html[dir="rtl"] .woocommerce-tabs ul,
html[dir="rtl"] .panel ul,
html[dir="rtl"] .woocommerce-Tabs-panel ul,
html[dir="rtl"] .autonex-product-meta ul {
    padding-left: 0 !important;
    padding-right: 25px !important;
}

html[dir="rtl"] .woocommerce-product-details__short-description ol,
html[dir="rtl"] .product-details ol,
html[dir="rtl"] .product-meta ol,
html[dir="rtl"] .product-info ol,
html[dir="rtl"] .woocommerce-tabs ol,
html[dir="rtl"] .panel ol,
html[dir="rtl"] .woocommerce-Tabs-panel ol,
html[dir="rtl"] .autonex-product-meta ol {
    padding-left: 0 !important;
    padding-right: 25px !important;
}

html[dir="rtl"] .woocommerce-product-details__short-description li,
html[dir="rtl"] .product-meta li,
html[dir="rtl"] .autonex-product-meta li,
html[dir="rtl"] .woocommerce-Tabs-panel li {
    text-align: right;
}

/* ── Footer Column Title Underlines ── */
html[dir="rtl"] .footer-col-title {
    display: inline-block !important;
    padding-bottom: 10px !important;
}
html[dir="rtl"] .footer-col-title::after {
    left: auto !important;
    right: 0 !important;
}

/* ── Custom Bullet Fixes for RTL ── */
html[dir="rtl"] body .tab-panel ul li::before,
html[dir="rtl"] body .woocommerce-Tabs-panel ul li::before,
html[dir="rtl"] body .prose ul li::before {
    left: auto !important;
    right: 0 !important;
}

html[dir="rtl"] body .tab-panel ul li,
html[dir="rtl"] body .woocommerce-Tabs-panel ul li,
html[dir="rtl"] body .prose ul li {
    padding-left: 0 !important;
    padding-right: 18px !important;
    text-align: right !important;
}

/* =====================================================================
   SERVICE PAGES (.svc-*) RTL ALIGNMENT FIXES
   Applies to: Engineering, Installation, Commissioning, Vendor, Maintenance
   ===================================================================== */

/* 1. Fix .svc-grid.rev children - the .rev trick sets direction:ltr on all
      child columns which breaks text direction for Arabic content inside them */
html[dir="rtl"] .svc-grid.rev > * {
    direction: rtl !important;
}

/* 2. Ensure all svc-content text is right-aligned */
html[dir="rtl"] .svc-content,
html[dir="rtl"] .svc-content .label,
html[dir="rtl"] .svc-content h2,
html[dir="rtl"] .svc-content p {
    text-align: right !important;
    direction: rtl !important;
}

/* 3. Center the cards-section header (h2 + p) - overrides body text-align:right */
html[dir="rtl"] .svc-cards-header {
    text-align: center !important;
}
html[dir="rtl"] .svc-cards-header h2,
html[dir="rtl"] .svc-cards-header p {
    text-align: center !important;
}

/* 4. Center the CTA section content */
html[dir="rtl"] .svc-cta h2,
html[dir="rtl"] .svc-cta p {
    text-align: center !important;
}

/* 5. Fix bullet checklist in RTL - flip flex row so the checkmark (.chk)
      appears on the RIGHT side and text flows to the left of it */
html[dir="rtl"] .svc-list li {
    flex-direction: row-reverse !important;
    text-align: right !important;
}

/* 6. Fix svc-card text alignment - icon on top, text right-aligned */
html[dir="rtl"] .svc-card h3,
html[dir="rtl"] .svc-card p {
    text-align: right !important;
}

/* 7. Hero text right-alignment fix */
html[dir="rtl"] .svc-hero h1,
html[dir="rtl"] .svc-hero p,
html[dir="rtl"] .svc-breadcrumb {
    text-align: right !important;
    direction: rtl !important;
}

/* 8. Breadcrumb separator direction */
html[dir="rtl"] .svc-breadcrumb span.sep {
    margin: 0 8px !important;
}