/* RTL Stylesheet for Arabic (and other RTL languages)
   Load this AFTER the main style.css
*/

/* 0. Define Local Cairo Fonts */

@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url('./fonts/cairo-variable.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
    /* Override the main font variable to use Cairo first */
    --font-main: 'Cairo';
}

/* 1. Global Direction */
body {
    direction: rtl;
    text-align: right;
    font-family: var(--font-main); /* Ensure styling applies */
}

/* 2. Navigation */
.nav-logo {
    /* Gap handles spacing, direction:rtl handles order */
}

.nav-menu {
    /* Flexbox direction is handled automatically by body direction:rtl */
}

.nav-install-btn {
    margin-left: 0;
    margin-right: 10px; /* Flip margin */
}

/* Dropdown Menu Alignment */
.dropdown-content {
    right: auto; /* Reset LTR position */
    left: 0;     /* Align to left side in RTL */
    text-align: right; /* Ensure list items are right-aligned */
}

/* 3. Input Fields (The Search Bar) */
.input-group {
    /* Flex flow handles items order */
}

input[type="url"] {
    /* Original: padding: 18px 55px 18px 25px; (Right padding was for button space) */
    /* We flip padding-right and padding-left */
    padding: 18px 25px 18px 55px;
    font-family: var(--font-main); /* Ensure input text uses Arabic font */
}

#pasteBtn {
    right: auto; /* Reset LTR */
    left: 20px;  /* Position paste icon on the left */
}

/* 4. Results Area */
.result-container {
    text-align: right;
}

/* 5. Features & How To Steps */
/* Flexbox handles the swapping of Icon/Number and Text automatically */

.step-number {
    /* Usually no specific margin needed with gap, but ensure no LTR margins exist */
}

/* 6. SEO Article & Headings */
.seo-article h2 {
    text-align: right;
}

/* 7. FAQ Section */
.faq-item {
    border-left: none;        /* Remove LTR border */
    border-right: 4px solid var(--primary-color); /* Add RTL border */
}

/* 8. Footer */
.footer-content {
    text-align: right;
}

/* 9. Mobile Menu */
@media screen and (max-width: 768px) {
    .nav-menu {
        left: auto;
        right: 0; /* Slide menu from right or align to right edge */
    }
    
    input[type="url"] {
        /* Ensure mobile padding is also flipped if different */
        padding: 15px 15px 15px 45px; /* Adjusted for icon space on left */
    }

    #pasteBtn {
        right: auto;
        left: 15px;
    }
    
    .dropdown-content {
        padding-left: 0;
        padding-right: 15px; /* Indent dropdown items correctly on mobile */
    }
}