/* =========================================
   HUOTIAN — RTL Styles (Arabic)
   For pages with dir="rtl"
   ========================================= */

/* Base direction */
[dir="rtl"] body {
  direction: rtl;
  text-align: right;
}

/* ----- Header / Nav ----- */
[dir="rtl"] .header,
[dir="rtl"] .header-inner,
[dir="rtl"] .nav,
[dir="rtl"] .nav-links {
  direction: rtl;
}

[dir="rtl"] .nav-links a {
  margin-left: 0;
  margin-right: 0;
}

[dir="rtl"] .nav-links a + a {
  margin-right: 2rem;
}

/* ----- Language Selector ----- */
[dir="rtl"] .lang-selector select,
[dir="rtl"] .lang-switcher select {
  direction: rtl;
}

[dir="rtl"] .lang-selector {
  margin-left: 0;
  margin-right: auto;
}

/* ----- Hero ----- */
[dir="rtl"] .hero-section,
[dir="rtl"] .hero-content,
[dir="rtl"] .hero-text {
  text-align: right;
}

[dir="rtl"] .hero-buttons {
  justify-content: flex-start;
}

[dir="rtl"] .hero-badge {
  direction: rtl;
}

/* ----- Trust Bar ----- */
[dir="rtl"] .trust-grid {
  direction: rtl;
}

/* ----- Stats ----- */
[dir="rtl"] .stats-grid {
  direction: rtl;
}

/* ----- Categories / Filter ----- */
[dir="rtl"] .categories-nav {
  direction: rtl;
}

[dir="rtl"] .cat-filter {
  direction: rtl;
}

[dir="rtl"] .cat-btn + .cat-btn {
  margin-left: 0;
  margin-right: 0.5rem;
}

/* ----- Product Cards ----- */
[dir="rtl"] .product-grid,
[dir="rtl"] .products-grid {
  direction: rtl;
}

[dir="rtl"] .product-card {
  text-align: right;
}

[dir="rtl"] .product-card .btn-sm {
  direction: rtl;
}

[dir="rtl"] .model-tag {
  right: auto;
  left: 0.5rem;
}

/* ----- Product Detail ----- */
[dir="rtl"] .product-detail {
  text-align: right;
  direction: rtl;
}

[dir="rtl"] .product-info {
  text-align: right;
}

[dir="rtl"] .feature-list li,
[dir="rtl"] .app-list li {
  padding-left: 0;
  padding-right: 1.5rem;
}

[dir="rtl"] .feature-list li::before,
[dir="rtl"] .app-list li::before {
  left: auto;
  right: 0;
}

/* ----- About Page ----- */
[dir="rtl"] .about-page,
[dir="rtl"] .about-layout,
[dir="rtl"] .about-content {
  text-align: right;
  direction: rtl;
}

[dir="rtl"] .about-point {
  padding-left: 0;
  padding-right: 1.5rem;
}

/* ----- Contact Page ----- */
[dir="rtl"] .contact-page,
[dir="rtl"] .contact-layout {
  text-align: right;
  direction: rtl;
}

[dir="rtl"] .contact-form label {
  text-align: right;
}

[dir="rtl"] .contact-form input,
[dir="rtl"] .contact-form textarea {
  text-align: right;
}

[dir="rtl"] .contact-info-item {
  padding-left: 0;
  padding-right: 0.75rem;
}

/* ----- Why Us ----- */
[dir="rtl"] .why-section,
[dir="rtl"] .why-grid {
  direction: rtl;
  text-align: right;
}

/* ----- Footer ----- */
[dir="rtl"] .footer,
[dir="rtl"] .footer-inner,
[dir="rtl"] .footer-content,
[dir="rtl"] .footer-grid {
  direction: rtl;
  text-align: right;
}

[dir="rtl"] .footer-section {
  text-align: right;
}

[dir="rtl"] .footer-links a {
  padding-left: 0;
  padding-right: 0;
}

[dir="rtl"] .footer-col {
  text-align: right;
}

[dir="rtl"] .footer-contact p {
  padding-left: 0;
  padding-right: 0;
}

/* ----- Buttons (icon direction) ----- */
[dir="rtl"] .btn span,
[dir="rtl"] .btn-sm span,
[dir="rtl"] .btn-primary span,
[dir="rtl"] .btn-outline span,
[dir="rtl"] .hero-cta span {
  display: inline-block;
  transform: scaleX(-1);
}

[dir="rtl"] .back-link span,
[dir="rtl"] .back-to-blog span {
  display: inline-block;
  transform: scaleX(-1);
}

/* ----- Blog ----- */
[dir="rtl"] .blog-page,
[dir="rtl"] .blog-content {
  text-align: right;
  direction: rtl;
}

/* ----- Page Banner (about/contact titles) ----- */
[dir="rtl"] .page-banner {
  direction: rtl;
}

/* ----- Scenarios ----- */
[dir="rtl"] .scenarios-section,
[dir="rtl"] .scenarios-grid {
  direction: rtl;
  text-align: right;
}

/* ----- CTA ----- */
[dir="rtl"] .cta-section {
  direction: rtl;
  text-align: right;
}

/* ----- Buttons in RTL ----- */
[dir="rtl"] .btn {
  direction: rtl;
}

[dir="rtl"] .btn-arrow::after {
  content: "←";
  margin-left: 0;
  margin-right: 0.5rem;
}

[dir="rtl"] .btn-arrow::before {
  content: "";
  margin-right: 0;
}
