/* ============================================
   GES Logistics KSA - RTL (Arabic) Stylesheet
   Right-to-left layout overrides for Arabic pages
   ============================================ */

/* Only apply when html has lang="ar" or dir="rtl" */
html[lang="ar"],
html[dir="rtl"],
[dir="rtl"] {
  direction: rtl;
}

/* ===== Typography Adjustments ===== */

html[lang="ar"] body,
[dir="rtl"] body {
  font-family: var(--font-arabic);
  line-height: var(--line-height-loose); /* 1.8 for Arabic readability */
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
  font-family: var(--font-arabic);
  font-weight: var(--font-weight-bold);
}

/* ===== Text Alignment ===== */

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

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

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

/* ===== Lists ===== */

[dir="rtl"] ul,
[dir="rtl"] ol {
  margin-left: 0;
  margin-right: var(--space-6);
}

/* ===== Flex Direction Reversals ===== */

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

[dir="rtl"] .justify-start {
  justify-content: flex-end;
}

[dir="rtl"] .justify-end {
  justify-content: flex-start;
}

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

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

/* ===== Padding & Margin Flips ===== */

/* Padding Left → Right */
[dir="rtl"] .pl-1 { padding-right: var(--space-1); padding-left: 0; }
[dir="rtl"] .pl-2 { padding-right: var(--space-2); padding-left: 0; }
[dir="rtl"] .pl-4 { padding-right: var(--space-4); padding-left: 0; }
[dir="rtl"] .pl-6 { padding-right: var(--space-6); padding-left: 0; }
[dir="rtl"] .pl-8 { padding-right: var(--space-8); padding-left: 0; }

/* Padding Right → Left */
[dir="rtl"] .pr-1 { padding-left: var(--space-1); padding-right: 0; }
[dir="rtl"] .pr-2 { padding-left: var(--space-2); padding-right: 0; }
[dir="rtl"] .pr-4 { padding-left: var(--space-4); padding-right: 0; }
[dir="rtl"] .pr-6 { padding-left: var(--space-6); padding-right: 0; }
[dir="rtl"] .pr-8 { padding-left: var(--space-8); padding-right: 0; }

/* Margin Left → Right */
[dir="rtl"] .ml-1 { margin-right: var(--space-1); margin-left: 0; }
[dir="rtl"] .ml-2 { margin-right: var(--space-2); margin-left: 0; }
[dir="rtl"] .ml-4 { margin-right: var(--space-4); margin-left: 0; }
[dir="rtl"] .ml-6 { margin-right: var(--space-6); margin-left: 0; }
[dir="rtl"] .ml-8 { margin-right: var(--space-8); margin-left: 0; }
[dir="rtl"] .ml-auto { margin-right: auto; margin-left: 0; }

/* Margin Right → Left */
[dir="rtl"] .mr-1 { margin-left: var(--space-1); margin-right: 0; }
[dir="rtl"] .mr-2 { margin-left: var(--space-2); margin-right: 0; }
[dir="rtl"] .mr-4 { margin-left: var(--space-4); margin-right: 0; }
[dir="rtl"] .mr-6 { margin-left: var(--space-6); margin-right: 0; }
[dir="rtl"] .mr-8 { margin-left: var(--space-8); margin-right: 0; }
[dir="rtl"] .mr-auto { margin-left: auto; margin-right: 0; }

/* ===== Border Radius Flips ===== */

[dir="rtl"] .rounded-l { border-radius: 0 var(--radius-base) var(--radius-base) 0; }
[dir="rtl"] .rounded-r { border-radius: var(--radius-base) 0 0 var(--radius-base); }
[dir="rtl"] .rounded-tl { border-radius: 0 var(--radius-base) 0 0; }
[dir="rtl"] .rounded-tr { border-radius: var(--radius-base) 0 0 0; }
[dir="rtl"] .rounded-bl { border-radius: 0 0 var(--radius-base) 0; }
[dir="rtl"] .rounded-br { border-radius: 0 0 0 var(--radius-base); }

/* ===== Icon Flips (Arrows, Chevrons) ===== */

[dir="rtl"] .icon-arrow-right,
[dir="rtl"] .icon-chevron-right {
  transform: scaleX(-1);
}

[dir="rtl"] .icon-arrow-left,
[dir="rtl"] .icon-chevron-left {
  transform: scaleX(-1);
}

/* ===== Navigation (RTL) ===== */

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

[dir="rtl"] .nav-item {
  margin-left: 0;
  margin-right: var(--space-6);
}

[dir="rtl"] .nav-item:last-child {
  margin-right: 0;
}

/* ===== Forms (RTL) ===== */

[dir="rtl"] input[type="text"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] textarea,
[dir="rtl"] select {
  text-align: right;
}

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

[dir="rtl"] .form-checkbox,
[dir="rtl"] .form-radio {
  margin-right: 0;
  margin-left: var(--space-2);
}

/* ===== Buttons with Icons (RTL) ===== */

[dir="rtl"] .btn-icon-right {
  flex-direction: row-reverse;
}

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

/* ===== Cards (RTL) ===== */

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

[dir="rtl"] .card-icon {
  margin-left: var(--space-4);
  margin-right: 0;
}

/* ===== Breadcrumbs (RTL) ===== */

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

[dir="rtl"] .breadcrumb-separator {
  transform: scaleX(-1);
}

/* ===== Dropdown Menus (RTL) ===== */

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

/* ===== Tooltips (RTL) ===== */

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

/* ===== Shadows (RTL - if asymmetric) ===== */

[dir="rtl"] .shadow-left {
  box-shadow: 4px 0 8px rgba(0, 0, 0, 0.1);
}

[dir="rtl"] .shadow-right {
  box-shadow: -4px 0 8px rgba(0, 0, 0, 0.1);
}

/* ===== Floating Elements (RTL) ===== */

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

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

/* ===== Positioning (RTL) ===== */

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

/* ===== Animations (RTL) ===== */

/* Slide-in animations should reverse direction */
[dir="rtl"] @keyframes slideInRight {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

[dir="rtl"] @keyframes slideInLeft {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

/* ===== Grid Layouts (RTL) ===== */

/* Most CSS Grid layouts auto-adjust, but some may need manual reversal */
[dir="rtl"] .grid-flow-col {
  grid-auto-flow: column-reverse;
}

/* ===== Language-Specific Adjustments ===== */

/* Adjust letter spacing for Arabic (often needs to be 0 or negative) */
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3 {
  letter-spacing: 0;
}

/* Adjust number formatting (if using custom fonts) */
html[lang="ar"] .number {
  font-feature-settings: 'tnum' 1; /* Tabular numbers */
}

/* ===== Component-Specific RTL Overrides ===== */

/* These will be expanded when components are created */

/* Hero Section */
[dir="rtl"] .hero-content {
  text-align: right;
}

/* Service Cards */
[dir="rtl"] .service-card-icon {
  margin-left: var(--space-4);
  margin-right: 0;
}

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

/* ===== Debugging (Remove in production) ===== */

/* Uncomment to visualize RTL layout during development */
/*
[dir="rtl"] * {
  outline: 1px solid rgba(255, 0, 0, 0.2);
}
*/