/* ==========================================================================
   RTL.CSS - Right-to-Left Layout Support (Arabic)
   Future Software Solutions
   ========================================================================== */

/* Apply RTL styles when html has dir="rtl" or lang="ar" */
[dir="rtl"],
:lang(ar) {
  direction: rtl;
  text-align: right;
}

/* --------------------------------------------------------------------------
   Typography Adjustments
   -------------------------------------------------------------------------- */
[dir="rtl"] {
  /* Arabic-friendly font stack */
  --font-body: 'IBM Plex Sans Arabic', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Noto Serif Arabic', 'Fraunces', 'Georgia', serif;
}

/* Increase line height for Arabic text */
[dir="rtl"] body {
  line-height: var(--leading-relaxed);
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3 {
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Layout Flipping
   -------------------------------------------------------------------------- */

/* Flex direction */
[dir="rtl"] .flex {
  flex-direction: row-reverse;
}

[dir="rtl"] .flex-col {
  flex-direction: column;
}

/* Grid layouts don't need flipping in most cases */

/* Header */
[dir="rtl"] .header-inner {
  flex-direction: row-reverse;
}

[dir="rtl"] .site-nav {
  flex-direction: row-reverse;
}

[dir="rtl"] .header-actions {
  flex-direction: row-reverse;
}

/* Language Dropdown */
[dir="rtl"] .lang-dropdown {
  right: auto;
  left: 0;
}

[dir="rtl"] .lang-option {
  text-align: right;
}

/* Hero */
[dir="rtl"] .hero-inner {
  direction: rtl;
}

@media (min-width: 768px) {
  [dir="rtl"] .hero-content {
    order: 2;
  }

  [dir="rtl"] .hero-visual {
    order: 1;
  }
}

[dir="rtl"] .hero-actions {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

[dir="rtl"] .hero-meta {
  flex-direction: row-reverse;
}

/* Two Column Layout */
@media (min-width: 768px) {
  [dir="rtl"] .two-col .two-col-content {
    order: 2;
  }

  [dir="rtl"] .two-col .two-col-visual {
    order: 1;
  }

  [dir="rtl"] .two-col-reverse .two-col-content {
    order: 1;
  }

  [dir="rtl"] .two-col-reverse .two-col-visual {
    order: 2;
  }
}

/* --------------------------------------------------------------------------
   Components
   -------------------------------------------------------------------------- */

/* Buttons */
[dir="rtl"] .btn {
  flex-direction: row-reverse;
}

[dir="rtl"] .btn svg:first-child {
  margin-left: var(--space-2);
  margin-right: 0;
}

/* Store Buttons */
[dir="rtl"] .btn-store {
  flex-direction: row-reverse;
}

[dir="rtl"] .btn-store-text {
  align-items: flex-end;
}

/* Cards */
[dir="rtl"] .app-card-header {
  flex-direction: row-reverse;
}

[dir="rtl"] .category-card {
  text-align: right;
}

/* Forms */
[dir="rtl"] .form-label {
  text-align: right;
}

[dir="rtl"] .form-select {
  background-position: left var(--space-3) center;
  padding-left: var(--space-10);
  padding-right: var(--space-4);
}

/* Feature List */
[dir="rtl"] .feature-item {
  flex-direction: row-reverse;
}

/* Badges */
[dir="rtl"] .badge-no-ads {
  flex-direction: row-reverse;
}

[dir="rtl"] .platform-tag {
  flex-direction: row-reverse;
}

/* --------------------------------------------------------------------------
   Carousel RTL
   -------------------------------------------------------------------------- */
[dir="rtl"] .carousel-track {
  flex-direction: row-reverse;
  scroll-snap-align: end;
}

[dir="rtl"] .carousel-slide {
  scroll-snap-align: end;
}

[dir="rtl"] .carousel-controls {
  flex-direction: row-reverse;
}

/* Flip carousel arrow icons */
[dir="rtl"] .carousel-btn-prev svg {
  transform: rotate(180deg);
}

[dir="rtl"] .carousel-btn-next svg {
  transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

/* Breadcrumb */
[dir="rtl"] .breadcrumb {
  flex-direction: row-reverse;
}

[dir="rtl"] .breadcrumb-separator {
  transform: rotate(180deg);
}

/* Mobile Navigation */
[dir="rtl"] .mobile-nav-link {
  text-align: right;
}

[dir="rtl"] .mobile-lang-section h3 {
  text-align: right;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
[dir="rtl"] .footer-brand {
  text-align: right;
}

[dir="rtl"] .footer-logo {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

[dir="rtl"] .footer-links {
  align-items: flex-end;
}

[dir="rtl"] .footer-bottom {
  flex-direction: row-reverse;
}

[dir="rtl"] .footer-legal-links {
  flex-direction: row-reverse;
}

/* --------------------------------------------------------------------------
   App Page
   -------------------------------------------------------------------------- */
[dir="rtl"] .app-header {
  flex-direction: row-reverse;
}

[dir="rtl"] .app-hero-content {
  text-align: right;
}

[dir="rtl"] .app-store-buttons {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

[dir="rtl"] .app-attribution {
  text-align: right;
}

/* --------------------------------------------------------------------------
   Experience Section Stats
   -------------------------------------------------------------------------- */
[dir="rtl"] .experience-inner {
  direction: rtl;
}

@media (min-width: 768px) {
  [dir="rtl"] .experience-content {
    order: 2;
  }

  [dir="rtl"] .experience-stats-wrapper {
    order: 1;
  }
}

/* --------------------------------------------------------------------------
   Accordion
   -------------------------------------------------------------------------- */
[dir="rtl"] .accordion-trigger {
  flex-direction: row-reverse;
  text-align: right;
}

[dir="rtl"] .accordion-content {
  text-align: right;
}

/* --------------------------------------------------------------------------
   Contact Section
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  [dir="rtl"] .contact-grid {
    direction: rtl;
  }

  [dir="rtl"] .contact-info {
    order: 2;
  }

  [dir="rtl"] .contact-form-wrapper {
    order: 1;
  }
}

[dir="rtl"] .contact-info {
  text-align: right;
}

/* --------------------------------------------------------------------------
   Utility Class Overrides
   -------------------------------------------------------------------------- */
[dir="rtl"] .text-left {
  text-align: right;
}

[dir="rtl"] .text-right {
  text-align: left;
}

/* Keep center alignment */
[dir="rtl"] .text-center {
  text-align: center;
}

/* --------------------------------------------------------------------------
   Margin/Padding RTL Adjustments
   -------------------------------------------------------------------------- */
[dir="rtl"] .ml-auto {
  margin-left: 0;
  margin-right: auto;
}

[dir="rtl"] .mr-auto {
  margin-right: 0;
  margin-left: auto;
}

/* --------------------------------------------------------------------------
   Icons and Images
   -------------------------------------------------------------------------- */

/* Flip directional icons */
[dir="rtl"] .icon-arrow-right {
  transform: rotate(180deg);
}

[dir="rtl"] .icon-arrow-left {
  transform: rotate(180deg);
}

[dir="rtl"] .icon-chevron-right {
  transform: rotate(180deg);
}

[dir="rtl"] .icon-chevron-left {
  transform: rotate(180deg);
}

/* Don't flip non-directional elements */
[dir="rtl"] .app-icon,
[dir="rtl"] .site-logo img,
[dir="rtl"] .app-screenshot img,
[dir="rtl"] .hero-device img {
  transform: none;
}