/* ===================================================================
   RTL (Right-to-Left) Framework for Arabic Language Support
   ================================================================== */

/* ===================================================================
   1. BASE RTL STYLES
   ================================================================== */

/* Apply RTL direction to all elements when html has dir="rtl" */
html[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

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

/* ===================================================================
   2. TEXT ALIGNMENT AND TYPOGRAPHY
   ================================================================== */

/* Default text alignment for RTL */
html[dir="rtl"] * {
    text-align: right;
}

/* Specific text alignment overrides */
html[dir="rtl"] .text-center {
    text-align: center !important;
}

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

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

/* Arabic font family for better rendering */
html[dir="rtl"] {
    font-family: 'HelveticaNeue', 'Montserrat', Arial, sans-serif;
}

/* ===================================================================
   3. FLEXBOX AND LAYOUT MIRRORING
   ================================================================== */

/* Reverse flex direction for horizontal layouts */
html[dir="rtl"] .flex {
    flex-direction: row-reverse;
}

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

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

/* Keep vertical flex as is */
html[dir="rtl"] .flex-col {
    flex-direction: column !important;
}

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

/* Justify content mirroring */
html[dir="rtl"] .justify-start {
    justify-content: flex-end !important;
}

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

html[dir="rtl"] .justify-between {
    justify-content: space-between !important;
}

html[dir="rtl"] .justify-center {
    justify-content: center !important;
}

/* Items alignment */
html[dir="rtl"] .items-start {
    align-items: flex-start !important;
}

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

html[dir="rtl"] .items-center {
    align-items: center !important;
}

/* ===================================================================
   4. SPACING AND MARGINS/PADDING MIRRORING
   ================================================================== */

/* Margin mirroring */
html[dir="rtl"] .ml-1 { margin-right: 0.25rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ml-2 { margin-right: 0.5rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ml-3 { margin-right: 0.75rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ml-4 { margin-right: 1rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ml-5 { margin-right: 1.25rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ml-6 { margin-right: 1.5rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ml-8 { margin-right: 2rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ml-10 { margin-right: 2.5rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ml-12 { margin-right: 3rem !important; margin-left: 0 !important; }

html[dir="rtl"] .mr-1 { margin-left: 0.25rem !important; margin-right: 0 !important; }
html[dir="rtl"] .mr-2 { margin-left: 0.5rem !important; margin-right: 0 !important; }
html[dir="rtl"] .mr-3 { margin-left: 0.75rem !important; margin-right: 0 !important; }
html[dir="rtl"] .mr-4 { margin-left: 1rem !important; margin-right: 0 !important; }
html[dir="rtl"] .mr-5 { margin-left: 1.25rem !important; margin-right: 0 !important; }
html[dir="rtl"] .mr-6 { margin-left: 1.5rem !important; margin-right: 0 !important; }
html[dir="rtl"] .mr-8 { margin-left: 2rem !important; margin-right: 0 !important; }
html[dir="rtl"] .mr-10 { margin-left: 2.5rem !important; margin-right: 0 !important; }
html[dir="rtl"] .mr-12 { margin-left: 3rem !important; margin-right: 0 !important; }

/* Padding mirroring */
html[dir="rtl"] .pl-1 { padding-right: 0.25rem !important; padding-left: 0 !important; }
html[dir="rtl"] .pl-2 { padding-right: 0.5rem !important; padding-left: 0 !important; }
html[dir="rtl"] .pl-3 { padding-right: 0.75rem !important; padding-left: 0 !important; }
html[dir="rtl"] .pl-4 { padding-right: 1rem !important; padding-left: 0 !important; }
html[dir="rtl"] .pl-5 { padding-right: 1.25rem !important; padding-left: 0 !important; }
html[dir="rtl"] .pl-6 { padding-right: 1.5rem !important; padding-left: 0 !important; }
html[dir="rtl"] .pl-8 { padding-right: 2rem !important; padding-left: 0 !important; }
html[dir="rtl"] .pl-10 { padding-right: 2.5rem !important; padding-left: 0 !important; }
html[dir="rtl"] .pl-12 { padding-right: 3rem !important; padding-left: 0 !important; }

html[dir="rtl"] .pr-1 { padding-left: 0.25rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pr-2 { padding-left: 0.5rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pr-3 { padding-left: 0.75rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pr-4 { padding-left: 1rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pr-5 { padding-left: 1.25rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pr-6 { padding-left: 1.5rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pr-8 { padding-left: 2rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pr-10 { padding-left: 2.5rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pr-12 { padding-left: 3rem !important; padding-right: 0 !important; }

/* Space between elements mirroring */
html[dir="rtl"] .space-x-1 > :not([hidden]) ~ :not([hidden]) {
    margin-right: 0.25rem !important;
    margin-left: 0 !important;
}

html[dir="rtl"] .space-x-2 > :not([hidden]) ~ :not([hidden]) {
    margin-right: 0.5rem !important;
    margin-left: 0 !important;
}

html[dir="rtl"] .space-x-3 > :not([hidden]) ~ :not([hidden]) {
    margin-right: 0.75rem !important;
    margin-left: 0 !important;
}

html[dir="rtl"] .space-x-4 > :not([hidden]) ~ :not([hidden]) {
    margin-right: 1rem !important;
    margin-left: 0 !important;
}

html[dir="rtl"] .space-x-6 > :not([hidden]) ~ :not([hidden]) {
    margin-right: 1.5rem !important;
    margin-left: 0 !important;
}

html[dir="rtl"] .space-x-8 > :not([hidden]) ~ :not([hidden]) {
    margin-right: 2rem !important;
    margin-left: 0 !important;
}

/* ===================================================================
   5. POSITIONING MIRRORING
   ================================================================== */

/* Left/Right positioning */
html[dir="rtl"] .left-0 { right: 0 !important; left: auto !important; }
html[dir="rtl"] .left-1 { right: 0.25rem !important; left: auto !important; }
html[dir="rtl"] .left-2 { right: 0.5rem !important; left: auto !important; }
html[dir="rtl"] .left-3 { right: 0.75rem !important; left: auto !important; }
html[dir="rtl"] .left-4 { right: 1rem !important; left: auto !important; }
html[dir="rtl"] .left-5 { right: 1.25rem !important; left: auto !important; }
html[dir="rtl"] .left-6 { right: 1.5rem !important; left: auto !important; }

html[dir="rtl"] .right-0 { left: 0 !important; right: auto !important; }
html[dir="rtl"] .right-1 { left: 0.25rem !important; right: auto !important; }
html[dir="rtl"] .right-2 { left: 0.5rem !important; right: auto !important; }
html[dir="rtl"] .right-3 { left: 0.75rem !important; right: auto !important; }
html[dir="rtl"] .right-4 { left: 1rem !important; right: auto !important; }
html[dir="rtl"] .right-5 { left: 1.25rem !important; right: auto !important; }
html[dir="rtl"] .right-6 { left: 1.5rem !important; right: auto !important; }

/* Inset mirroring */
html[dir="rtl"] .inset-x-0 { right: 0 !important; left: 0 !important; }

/* ===================================================================
   6. BORDER RADIUS MIRRORING
   ================================================================== */

/* Border radius mirroring for directional corners */
html[dir="rtl"] .rounded-l { border-top-right-radius: 0.25rem !important; border-bottom-right-radius: 0.25rem !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
html[dir="rtl"] .rounded-r { border-top-left-radius: 0.25rem !important; border-bottom-left-radius: 0.25rem !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }

html[dir="rtl"] .rounded-tl { border-top-right-radius: 0.25rem !important; border-top-left-radius: 0 !important; }
html[dir="rtl"] .rounded-tr { border-top-left-radius: 0.25rem !important; border-top-right-radius: 0 !important; }
html[dir="rtl"] .rounded-bl { border-bottom-right-radius: 0.25rem !important; border-bottom-left-radius: 0 !important; }
html[dir="rtl"] .rounded-br { border-bottom-left-radius: 0.25rem !important; border-bottom-right-radius: 0 !important; }

/* ===================================================================
   7. TRANSFORM MIRRORING
   ================================================================== */

/* Transform mirroring for animations and effects */
html[dir="rtl"] .transform {
    transform: scaleX(-1) !important;
}

/* Specific transform utilities that need RTL handling */
html[dir="rtl"] .translate-x-1 { transform: translateX(-0.25rem) !important; }
html[dir="rtl"] .translate-x-2 { transform: translateX(-0.5rem) !important; }
html[dir="rtl"] .translate-x-3 { transform: translateX(-0.75rem) !important; }
html[dir="rtl"] .translate-x-4 { transform: translateX(-1rem) !important; }
html[dir="rtl"] .translate-x-5 { transform: translateX(-1.25rem) !important; }
html[dir="rtl"] .translate-x-6 { transform: translateX(-1.5rem) !important; }

html[dir="rtl"] .-translate-x-1 { transform: translateX(0.25rem) !important; }
html[dir="rtl"] .-translate-x-2 { transform: translateX(0.5rem) !important; }
html[dir="rtl"] .-translate-x-3 { transform: translateX(0.75rem) !important; }
html[dir="rtl"] .-translate-x-4 { transform: translateX(1rem) !important; }
html[dir="rtl"] .-translate-x-5 { transform: translateX(1.25rem) !important; }
html[dir="rtl"] .-translate-x-6 { transform: translateX(1.5rem) !important; }

/* ===================================================================
   8. NAVIGATION AND MENU SPECIFIC RTL STYLES
   ================================================================== */

/* Navigation menu mirroring */
html[dir="rtl"] .nav-menu {
    direction: rtl;
}

html[dir="rtl"] .dropdown-menu {
    right: 0 !important;
    left: auto !important;
}

/* Mobile menu positioning */
html[dir="rtl"] .mobile-menu {
    right: 0 !important;
    left: auto !important;
}

/* Hamburger menu positioning */
html[dir="rtl"] .hamburger-menu {
    left: 1rem !important;
    right: auto !important;
}

/* ===================================================================
   9. BUTTON AND INTERACTIVE ELEMENT RTL STYLES
   ================================================================== */

/* Button content alignment */
html[dir="rtl"] .btn {
    text-align: center;
}

/* Icon positioning in buttons */
html[dir="rtl"] .btn svg {
    margin-left: 0.5rem !important;
    margin-right: 0 !important;
}

/* ===================================================================
   10. FORM ELEMENT RTL STYLES
   ================================================================== */

/* Form input alignment */
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    text-align: right !important;
    direction: rtl !important;
}

/* Placeholder text alignment */
html[dir="rtl"] input::placeholder,
html[dir="rtl"] textarea::placeholder {
    text-align: right !important;
    direction: rtl !important;
}

/* Form labels */
html[dir="rtl"] label {
    text-align: right !important;
}

/* ===================================================================
   11. GRID SYSTEM RTL SUPPORT
   ================================================================== */

/* Grid column ordering for RTL */
html[dir="rtl"] .grid {
    direction: rtl;
}

/* Grid gap mirroring */
html[dir="rtl"] .gap-x-1 { column-gap: 0.25rem !important; }
html[dir="rtl"] .gap-x-2 { column-gap: 0.5rem !important; }
html[dir="rtl"] .gap-x-3 { column-gap: 0.75rem !important; }
html[dir="rtl"] .gap-x-4 { column-gap: 1rem !important; }
html[dir="rtl"] .gap-x-6 { column-gap: 1.5rem !important; }
html[dir="rtl"] .gap-x-8 { column-gap: 2rem !important; }

/* ===================================================================
   12. RESPONSIVE RTL UTILITIES
   ================================================================== */

/* Mobile RTL adjustments */
@media (max-width: 768px) {
    html[dir="rtl"] .md\:flex-row {
        flex-direction: row-reverse !important;
    }

    html[dir="rtl"] .md\:justify-start {
        justify-content: flex-end !important;
    }

    html[dir="rtl"] .md\:justify-end {
        justify-content: flex-start !important;
    }

    html[dir="rtl"] .md\:text-left {
        text-align: right !important;
    }

    html[dir="rtl"] .md\:text-right {
        text-align: left !important;
    }
}

/* Large screen RTL adjustments */
@media (min-width: 1024px) {
    html[dir="rtl"] .lg\:flex-row {
        flex-direction: row-reverse !important;
    }

    html[dir="rtl"] .lg\:justify-start {
        justify-content: flex-end !important;
    }

    html[dir="rtl"] .lg\:justify-end {
        justify-content: flex-start !important;
    }

    html[dir="rtl"] .lg\:text-left {
        text-align: right !important;
    }

    html[dir="rtl"] .lg\:text-right {
        text-align: left !important;
    }
}

/* ===================================================================
   13. COMPONENT-SPECIFIC RTL STYLES
   ================================================================== */

/* Header RTL styles */
html[dir="rtl"] .header {
    direction: rtl;
}

html[dir="rtl"] .header .logo {
    margin-right: 0 !important;
    margin-left: auto !important;
}

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

/* Footer RTL styles */
html[dir="rtl"] .footer {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .footer-links {
    text-align: right;
}

/* Hero section RTL styles */
html[dir="rtl"] .hero-section {
    text-align: right;
    justify-content: flex-end;
}

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

/* Card component RTL styles */
html[dir="rtl"] .card {
    text-align: right;
}

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

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

/* ===================================================================
   14. ICON AND SVG RTL HANDLING
   ================================================================== */

/* Mirror directional icons */
html[dir="rtl"] .icon-arrow-right {
    transform: scaleX(-1) !important;
}

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

/* SVG mirroring for directional elements */
html[dir="rtl"] svg.mirror-rtl {
    transform: scaleX(-1) !important;
}

/* ===================================================================
   15. ANIMATION AND TRANSITION RTL SUPPORT
   ================================================================== */

/* Slide animations RTL */
html[dir="rtl"] .slide-in-left {
    animation: slideInRight 0.3s ease-out !important;
}

html[dir="rtl"] .slide-in-right {
    animation: slideInLeft 0.3s ease-out !important;
}

/* Dropdown animations RTL */
html[dir="rtl"] .dropdown-enter {
    transform: translateX(10px) !important;
}

html[dir="rtl"] .dropdown-enter-active {
    transform: translateX(0) !important;
}

/* ===================================================================
   16. CUSTOM RTL UTILITIES
   ================================================================== */

/* RTL-specific utility classes */
.rtl-only {
    display: none !important;
}

html[dir="rtl"] .rtl-only {
    display: block !important;
}

.ltr-only {
    display: block !important;
}

html[dir="rtl"] .ltr-only {
    display: none !important;
}

/* RTL text direction override */
.force-ltr {
    direction: ltr !important;
    text-align: left !important;
}

.force-rtl {
    direction: rtl !important;
    text-align: right !important;
}

/* ===================================================================
   17. BORDER AND OUTLINE RTL MIRRORING
   ================================================================== */

/* Border side mirroring */
html[dir="rtl"] .border-l {
    border-right: 1px solid !important;
    border-left: none !important;
}

html[dir="rtl"] .border-r {
    border-left: 1px solid !important;
    border-right: none !important;
}

html[dir="rtl"] .border-l-2 {
    border-right: 2px solid !important;
    border-left: none !important;
}

html[dir="rtl"] .border-r-2 {
    border-left: 2px solid !important;
    border-right: none !important;
}

/* ===================================================================
   18. OVERFLOW AND SCROLLING RTL SUPPORT
   ================================================================== */

/* Horizontal scrolling RTL */
html[dir="rtl"] .overflow-x-auto {
    direction: rtl;
}

html[dir="rtl"] .overflow-x-scroll {
    direction: rtl;
}

/* Scrollbar positioning */
html[dir="rtl"] .scrollbar-thin {
    direction: rtl;
}

/* ===================================================================
   19. SPECIFIC WEBSITE COMPONENT RTL STYLES
   ================================================================== */

/* Register Interest button RTL */
html[dir="rtl"] .ri-button::after {
    right: auto !important;
    left: -14px !important;
    transform: skewX(20deg) !important;
}

/* Mobile navigation RTL */
html[dir="rtl"] .mobile-nav-link {
    text-align: right !important;
}

/* Language switcher RTL */
html[dir="rtl"] .language-switcher {
    flex-direction: row-reverse !important;
}

html[dir="rtl"] .language-switcher img {
    margin-left: 0 !important;
    margin-right: 0.25rem !important;
}

/* Vertical icon bar RTL */
html[dir="rtl"] .vertical-icon-bar {
    right: auto !important;
    left: 1rem !important;
}

/* ===================================================================
   20. PRINT AND ACCESSIBILITY RTL SUPPORT
   ================================================================== */

/* Print styles RTL */
@media print {
    html[dir="rtl"] * {
        direction: rtl !important;
        text-align: right !important;
    }
}

/* High contrast mode RTL support */
@media (prefers-contrast: high) {
    html[dir="rtl"] .nav-link {
        border-right: 2px solid transparent !important;
        border-left: none !important;
    }

    html[dir="rtl"] .nav-link:focus {
        border-right-color: currentColor !important;
    }
}