/* RTL (Right-to-Left) Support for Arabic and Kurdish */

/* ============================================
   SPACING ADJUSTMENTS
   ============================================ */

/* Reset horizontal spacing for RTL */
body.rtl .space-x-2 > * + *,
body.rtl .space-x-3 > * + *,
body.rtl .space-x-4 > * + *,
body.rtl .space-x-6 > * + *,
body.rtl .space-x-8 > * + * {
    margin-left: 0 !important;
}

/* Apply spacing on the right side for RTL */
body.rtl .space-x-2 > * + * {
    margin-right: 0.5rem;
}

body.rtl .space-x-3 > * + * {
    margin-right: 0.75rem;
}

body.rtl .space-x-4 > * + * {
    margin-right: 1rem;
}

body.rtl .space-x-6 > * + * {
    margin-right: 1.5rem;
}

body.rtl .space-x-8 > * + * {
    margin-right: 2rem;
}

/* ============================================
   TEXT ALIGNMENT
   ============================================ */

body.rtl {
    text-align: right;
}

body.rtl .text-left {
    text-align: right !important;
}

body.rtl .text-right {
    text-align: left !important;
}

body.rtl .text-center {
    text-align: center !important;
}

/* ============================================
   FLEX DIRECTION
   ============================================ */

/* Reverse flex direction for horizontal layouts */
body.rtl .flex:not(.flex-col):not(.flex-col-reverse) {
    flex-direction: row-reverse;
}

/* Specific flex reversals */
body.rtl .flex-row {
    flex-direction: row-reverse !important;
}

body.rtl .sm\\:flex-row {
    flex-direction: row-reverse !important;
}

/* Keep vertical flex as is */
body.rtl .flex-col,
body.rtl .flex-col-reverse {
    flex-direction: column;
}

/* ============================================
   NAVIGATION
   ============================================ */

/* Navigation bar - don't reverse the main container */
body.rtl nav .flex.items-center.justify-between {
    flex-direction: row !important;
}

/* Navbar logo and brand container - logo on left in RTL */
body.rtl nav .flex.items-center.space-x-3 {
    flex-direction: row-reverse !important;
}

body.rtl nav .flex.items-center.space-x-3 > * + * {
    margin-left: 0 !important;
    margin-right: 0.75rem !important;
}

/* Navigation links container - keep natural RTL order */
body.rtl nav .hidden.md\\:flex.space-x-8 {
    flex-direction: row !important;
}

body.rtl nav .hidden.md\\:flex.space-x-8 > * + * {
    margin-left: 0 !important;
    margin-right: 2rem !important;
}

body.rtl nav .md\\:flex.space-x-8 {
    gap: 2rem;
}

/* Ensure consistent spacing between nav items in RTL */
body.rtl nav .hidden.md\\:flex.space-x-8 a {
    margin: 0 !important;
}

/* Mobile menu button positioning - keep on left in RTL */
body.rtl #mobile-menu-btn {
    margin-left: auto;
    margin-right: 0;
}

/* ============================================
   BUTTONS & INLINE ELEMENTS
   ============================================ */

/* Inline flex elements (buttons with icons) */
body.rtl .inline-flex {
    flex-direction: row-reverse;
}

/* Button groups */
body.rtl .flex.gap-3,
body.rtl .flex.gap-4 {
    flex-direction: row-reverse;
}

/* Download buttons - ensure icon is on the right */
body.rtl .inline-flex.items-center svg {
    margin-left: 0.75rem;
    margin-right: 0;
}

body.rtl .inline-flex.items-center.space-x-3 {
    flex-direction: row-reverse;
}

/* ============================================
   GRID LAYOUTS
   ============================================ */

/* Grid direction for RTL */
body.rtl .grid {
    direction: rtl;
}

/* Hero section - reverse columns on desktop */
body.rtl .grid.md\\:grid-cols-2 {
    direction: rtl;
}

/* Ensure grid items maintain proper alignment */
body.rtl .grid > * {
    text-align: right;
}

body.rtl .grid .text-center {
    text-align: center !important;
}

/* ============================================
   LANGUAGE SWITCHER
   ============================================ */

/* Desktop positioning */
body.rtl #language-switcher {
    left: 2rem;
    right: auto;
}

/* Mobile positioning */
@media (max-width: 640px) {
    body.rtl #language-switcher {
        left: 1rem;
        right: auto;
    }
}

/* Language switcher button */
body.rtl #language-switcher-btn {
    flex-direction: row-reverse;
}

/* ============================================
   FOOTER
   ============================================ */

/* Social media icons */
body.rtl footer .flex.space-x-4 {
    flex-direction: row-reverse !important;
    justify-content: flex-end !important;
}

body.rtl footer .flex.space-x-4 > * + * {
    margin-left: 0 !important;
    margin-right: 1rem !important;
}

body.rtl footer .grid > div:last-child {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

body.rtl footer .grid > div:last-child h4 {
    text-align: right;
}

/* Footer grid items */
body.rtl footer .grid > div {
    text-align: right;
}

/* Footer first column - logo and brand - keep logo first (right side in RTL) */
body.rtl footer .grid > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
}

body.rtl footer .grid > div:first-child .flex {
    flex-direction: row !important;
}

body.rtl footer .grid > div:first-child .flex.items-center.space-x-3 {
    justify-content: flex-end !important;
}

body.rtl footer .grid > div:first-child .flex.items-center.space-x-3 > * + * {
    margin-left: 0.75rem !important;
    margin-right: 0 !important;
}

/* Footer links */
body.rtl footer ul {
    text-align: right;
}

/* ============================================
   IMAGES & ICONS
   ============================================ */

/* Ensure images don't flip */
body.rtl img {
    direction: ltr;
}

/* Fix SVG icons direction */
body.rtl svg {
    direction: ltr;
}

/* Logo and brand images */
body.rtl .h-10.w-10,
body.rtl .h-16.w-16 {
    direction: ltr;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

/* Mobile: Ensure proper stacking */
@media (max-width: 640px) {
    body.rtl .flex-col {
        align-items: stretch;
    }
    
    body.rtl .text-center {
        text-align: center !important;
    }
}

/* Tablet: Adjust spacing */
@media (min-width: 641px) and (max-width: 1024px) {
    body.rtl .container {
        padding-right: 1rem;
        padding-left: 1rem;
    }
}

/* Desktop: Full RTL layout */
@media (min-width: 1025px) {
    body.rtl .container {
        direction: rtl;
    }
}

/* ============================================
   SPECIFIC COMPONENT FIXES
   ============================================ */

/* Hero section buttons */
body.rtl #home .flex.flex-col.sm\\:flex-row {
    flex-direction: column !important;
    align-items: stretch;
}

@media (min-width: 640px) {
    body.rtl #home .flex.flex-col.sm\\:flex-row {
        flex-direction: row-reverse !important;
        justify-content: flex-end !important;
    }
    
    body.rtl #home .flex.flex-col.sm\\:flex-row a {
        text-align: center;
    }
}

/* Download section buttons */
body.rtl #download .flex.flex-col.sm\\:flex-row {
    flex-direction: column;
}

@media (min-width: 640px) {
    body.rtl #download .flex.flex-col.sm\\:flex-row {
        flex-direction: row-reverse;
    }
}

/* Contact section grid */
body.rtl #contact .grid {
    direction: rtl;
}

/* About section cards */
body.rtl #about .grid > div {
    text-align: center !important;
}

body.rtl #about h3,
body.rtl #about p {
    text-align: center !important;
    direction: rtl;
}

body.rtl #about .text-center {
    text-align: center !important;
}

body.rtl #about .text-lg,
body.rtl #about .text-xl {
    text-align: center !important;
}

/* Screenshots section */
body.rtl #screenshots .grid {
    direction: rtl;
}

body.rtl #screenshots .text-center {
    text-align: center !important;
}

body.rtl #screenshots p {
    text-align: center !important;
    direction: rtl;
}

body.rtl #screenshots .text-lg,
body.rtl #screenshots .text-xl {
    text-align: center !important;
}

/* ============================================
   LANGUAGE POPUP
   ============================================ */

/* Language popup grid */
body.rtl #language-popup-overlay .grid {
    direction: ltr; /* Keep language options in original order */
}

/* ============================================
   UTILITY OVERRIDES
   ============================================ */

/* Justify content */
body.rtl .justify-start {
    justify-content: flex-end !important;
}

body.rtl .justify-end {
    justify-content: flex-start !important;
}

body.rtl .justify-between {
    justify-content: space-between !important;
}

body.rtl .justify-center {
    justify-content: center !important;
}

/* Items alignment */
body.rtl .items-start {
    align-items: flex-start !important;
}

body.rtl .items-end {
    align-items: flex-end !important;
}

body.rtl .items-center {
    align-items: center !important;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Ensure focus indicators work in RTL */
body.rtl *:focus {
    outline-offset: 2px;
}

/* Ensure proper reading order */
body.rtl [dir="ltr"] {
    direction: ltr;
    text-align: left;
}

/* ============================================
   PRIVACY PAGE SPECIFIC
   ============================================ */

/* Privacy page layout */
body.rtl .lg\\:flex-row {
    flex-direction: row-reverse !important;
}

/* Sidebar positioning for RTL */
body.rtl aside.lg\\:w-1\\/4 {
    order: 2;
}

body.rtl main.lg\\:w-3\\/4 {
    order: 1;
}

/* Sidebar links - border on right instead of left */
body.rtl .sidebar-link.active {
    border-left: none;
    border-right: 3px solid #6135B1;
}

/* Privacy page sidebar sticky positioning */
@media (min-width: 1024px) {
    body.rtl aside .sticky {
        text-align: right;
    }
}

/* Privacy page content sections */
body.rtl section h2,
body.rtl section h3 {
    text-align: right;
}

body.rtl section p,
body.rtl section ul,
body.rtl section li {
    text-align: right;
}

/* List items in RTL */
body.rtl .list-disc {
    padding-right: 1.5rem;
    padding-left: 0;
}

body.rtl .list-inside {
    list-style-position: inside;
}

/* Contact section icons */
body.rtl .flex.items-start.space-x-3 {
    flex-direction: row-reverse;
}

body.rtl .flex.items-start.space-x-3 > * + * {
    margin-left: 0;
    margin-right: 0.75rem;
}

/* Privacy page responsive */
@media (max-width: 1023px) {
    body.rtl .flex.flex-col.lg\\:flex-row {
        flex-direction: column;
    }
    
    body.rtl aside.lg\\:w-1\\/4,
    body.rtl main.lg\\:w-3\\/4 {
        order: 0;
        width: 100%;
    }
}


/* ============================================
   ADDITIONAL SPECIFIC RTL FIXES
   ============================================ */

/* Hero section - force button alignment to right */
body.rtl section#home .space-y-6 > div.flex {
    display: flex !important;
    flex-direction: row-reverse !important;
    justify-content: flex-end !important;
}

@media (max-width: 639px) {
    body.rtl section#home .space-y-6 > div.flex {
        flex-direction: column !important;
    }
}

/* Navigation - force proper spacing and order */
body.rtl nav .hidden.md\\:flex {
    display: flex !important;
    flex-direction: row !important;
    gap: 2rem !important;
}

body.rtl nav .hidden.md\\:flex a {
    margin: 0 !important;
}

/* Ensure navigation items have proper text alignment */
body.rtl nav .hidden.md\\:flex.space-x-8 a {
    text-align: center;
    white-space: nowrap;
}

/* Navigation container - ensure proper layout */
body.rtl nav > div > div.flex.items-center.justify-between {
    flex-direction: row !important;
}

/* Screenshots section - force center alignment */
body.rtl #screenshots .container .text-center p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.rtl #screenshots .grid > div p {
    text-align: center !important;
}

/* About section - force center alignment */
body.rtl #about .container > .text-center p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.rtl #about .grid .text-center p {
    text-align: center !important;
}

/* Footer - force logo and brand to right */
body.rtl footer .container > .grid > div:first-child {
    text-align: right !important;
}

body.rtl footer .container > .grid > div:first-child > .flex {
    justify-content: flex-end !important;
}

body.rtl footer .container > .grid > div:first-child p {
    text-align: right !important;
}

/* Footer - force social icons to right */
body.rtl footer .container > .grid > div:last-child {
    text-align: right !important;
}

body.rtl footer .container > .grid > div:last-child > .flex {
    justify-content: flex-end !important;
}

/* Contact section in download - force icons to right */
body.rtl #contact .grid {
    direction: rtl !important;
}

body.rtl #contact .grid > div {
    text-align: center !important;
}

/* Navbar brand - logo on left, text on right in RTL */
body.rtl nav > div > div > div:first-child {
    flex-direction: row-reverse !important;
}


/* Footer third column - Connect With Us section */
body.rtl footer .grid.sm\\:grid-cols-2.lg\\:grid-cols-3 > div:nth-child(3) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
}

body.rtl footer .grid.sm\\:grid-cols-2.lg\\:grid-cols-3 > div:nth-child(3) h4 {
    text-align: right !important;
    width: 100%;
}

body.rtl footer .grid.sm\\:grid-cols-2.lg\\:grid-cols-3 > div:nth-child(3) .flex.space-x-4 {
    flex-direction: row-reverse !important;
    justify-content: flex-start !important;
}

/* Footer second column - Quick Links */
body.rtl footer .grid.sm\\:grid-cols-2.lg\\:grid-cols-3 > div:nth-child(2) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
}

body.rtl footer .grid.sm\\:grid-cols-2.lg\\:grid-cols-3 > div:nth-child(2) h4 {
    text-align: right !important;
}

body.rtl footer .grid.sm\\:grid-cols-2.lg\\:grid-cols-3 > div:nth-child(2) ul {
    text-align: right !important;
    list-style: none;
}


/* Footer - ensure logo section is on the right side */
body.rtl footer .grid.sm\\:grid-cols-2.lg\\:grid-cols-3 {
    direction: rtl !important;
}

body.rtl footer .grid.sm\\:grid-cols-2.lg\\:grid-cols-3 > div:first-child {
    text-align: right !important;
    align-items: flex-end !important;
}

body.rtl footer .grid.sm\\:grid-cols-2.lg\\:grid-cols-3 > div:first-child .flex.items-center {
    justify-content: flex-end !important;
}

body.rtl footer .grid.sm\\:grid-cols-2.lg\\:grid-cols-3 > div:first-child p {
    text-align: right !important;
}