/*
 * style-rtl.css — Arabic RTL Overrides
 * EveryWeb Theme V2
 * Loaded always (site is Arabic-only)
 */

/* ============================================================
   1. BASE
   ============================================================ */
html,
body {
    overflow-x: hidden;
    max-width: 100vw;
}

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

/* ============================================================
   2. LISTS — swap padding side for marker alignment
   ============================================================ */
[dir="rtl"] ol,
[dir="rtl"] ul {
    padding-right: 2rem;
    padding-left: 0;
}

[dir="rtl"] .device-section ol {
    padding-right: 20px;
    padding-left: 0;
}

/* ============================================================
   3. BOOTSTRAP SPACING — swap .ms-* / .me-*
      ms = margin-start (left in LTR → right in RTL)
      me = margin-end   (right in LTR → left in RTL)
   ============================================================ */
[dir="rtl"] .ms-11 {
    margin-right: 2.75rem !important;
    margin-left: 0 !important;
}

@media (max-width: 991px) {
    [dir="rtl"] .ms-11 {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}

[dir="rtl"] .me-1 {
    margin-left: .25rem !important;
    margin-right: 0 !important;
}

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

/* ============================================================
   4. POSITION UTILITIES — swap .start-0 / .end-0
   ============================================================ */
[dir="rtl"] .start-0 {
    right: 0 !important;
    left: auto !important;
}

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

/* ============================================================
   5. TEXT ALIGNMENT
   ============================================================ */
[dir="rtl"] .text-start {
    text-align: right !important;
}

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

/* ============================================================
   6. NAVBAR BRAND — swap margin side
   ============================================================ */
[dir="rtl"] .navbar-brand {
    margin-left: var(--bs-navbar-brand-margin-end);
    margin-right: 0;
}

/* ============================================================
   7. DOWNLOAD FORM — paste button & input padding
      Button moves from right → left in RTL
   ============================================================ */
[dir="rtl"] .btn-paste,
[dir="rtl"] #pasteBtn {
    right: auto !important;
    left: 15px !important;
}

[dir="rtl"] #url {
    padding-right: 20px !important;
    padding-left: 60px !important;
}

/* ============================================================
   8. DOWNLOAD RESULTS BUTTON — icon margin
   ============================================================ */
[dir="rtl"] .btn-ew-download svg {
    margin-left: 0;
    margin-right: 5px;
}

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

/* ============================================================
   9. ACCENT BORDERS — border-left → border-right
   ============================================================ */
[dir="rtl"] .no-watermark-note {
    border-left: none;
    border-right: 5px solid #ffc107;
    border-radius: 10px 0 0 10px;
}

[dir="rtl"] .tip-note {
    border-left: none;
    border-right: 5px solid #0c5460;
    border-radius: 10px 0 0 10px;
}

[dir="rtl"] .creative-uses-list li {
    border-left: none;
    border-right: 5px solid #667eea;
    padding-right: 20px;
    padding-left: 0;
}

/* ============================================================
   10. TABLES — right-align headers/cells
   ============================================================ */
[dir="rtl"] .comparison-table th,
[dir="rtl"] .comparison-table td {
    text-align: right;
}

/* ============================================================
   11. FEATURES LIST — icon on the right in RTL
   ============================================================ */
[dir="rtl"] .features-list li {
    flex-direction: row-reverse;
    text-align: right;
}

/* ============================================================
   12. READ MORE LINK — reverse icon direction
   ============================================================ */
[dir="rtl"] .ew-read-more {
    flex-direction: row-reverse;
}

/* ============================================================
   13. DEVICE SECTION heading (flex gap)
   ============================================================ */
[dir="rtl"] .device-section h3 {
    flex-direction: row-reverse;
}

/* ============================================================
   14. BLOG CARDS META — reverse flex row
   ============================================================ */
[dir="rtl"] .ew-meta {
    flex-direction: row-reverse;
}

/* ============================================================
   15. MOBILE: fix table cell alignment in results
   ============================================================ */
@media (max-width: 768px) {
    [dir="rtl"] .col-lg-7.text-end {
        text-align: center !important;
    }
}