/* Arabic (RTL) overrides — loaded after style.css on every /ar/ page.
   Flex and grid containers reverse automatically under dir="rtl"; this file only
   fixes the things that were written with physical left/right values. */

html[dir="rtl"] body{font-family:'Tajawal','Plus Jakarta Sans',system-ui,sans-serif; line-height:1.8; text-align:right;}
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4{font-family:'Cairo','Sora',sans-serif; letter-spacing:0; line-height:1.4;}
html[dir="rtl"] .hero h1{line-height:1.3;}
html[dir="rtl"] .faq-q, html[dir="rtl"] .btn, html[dir="rtl"] .main-nav a, html[dir="rtl"] .post-card-link{font-family:'Cairo','Plus Jakarta Sans',sans-serif;}

/* Latin-script uppercase styling and tracking look wrong on Arabic */
html[dir="rtl"] .eyebrow, html[dir="rtl"] .pricing-badge, html[dir="rtl"] .post-card-tag,
html[dir="rtl"] .report-mock-badge, html[dir="rtl"] .pricing-addon-label, html[dir="rtl"] .footer-col h4,
html[dir="rtl"] .source-list h4, html[dir="rtl"] .related-posts h4{text-transform:none; letter-spacing:0;}

/* Lists and bullets */
html[dir="rtl"] .check-list li, html[dir="rtl"] .pricing-features li, html[dir="rtl"] .article-body ul li{padding-left:0; padding-right:30px;}
html[dir="rtl"] .check-list li::before, html[dir="rtl"] .pricing-features li::before, html[dir="rtl"] .article-body ul li::before{left:auto; right:0;}
html[dir="rtl"] .source-list ul li{padding-right:0;}

/* Text alignment that was hard-coded left */
html[dir="rtl"] .pricing-features, html[dir="rtl"] .faq-q, html[dir="rtl"] .contact-form, html[dir="rtl"] .gr-card,
html[dir="rtl"] .report-mock{text-align:right;}
html[dir="rtl"] .section-head, html[dir="rtl"] .stat-card, html[dir="rtl"] .step, html[dir="rtl"] .pricing-card,
html[dir="rtl"] .founding-section, html[dir="rtl"] .cta-section, html[dir="rtl"] .article-cta, html[dir="rtl"] .footer-bottom,
html[dir="rtl"] .form-success, html[dir="rtl"] .page-hero, html[dir="rtl"] .stat-footnote{text-align:center;}

/* Header layout stays identical to English (brand left, buttons right) so the language switch never changes position.
   Only the text inside each item runs right-to-left. */
html[dir="rtl"] .header-inner{direction:ltr;}
html[dir="rtl"] .main-nav, html[dir="rtl"] .header-actions .btn, html[dir="rtl"] .lang-switch{direction:rtl;}
html[dir="rtl"] .lang-switch{direction:ltr;}
/* Keep the browser scrollbar on the right (as on English pages) so nothing shifts by a scrollbar width when switching language.
   The page content itself still runs right-to-left. */
html[dir="rtl"]{direction:ltr;}
html[dir="rtl"] body{direction:rtl;}

/* Header and dropdown */
html[dir="rtl"] .nav-caret-btn{margin-left:0; margin-right:1px;}
html[dir="rtl"] .brand{direction:ltr;}

/* Hero visual */
html[dir="rtl"] .msg-out{border-bottom-left-radius:14px; border-bottom-right-radius:4px;}
html[dir="rtl"] .msg-in{border-bottom-right-radius:14px; border-bottom-left-radius:4px;}
html[dir="rtl"] .card-rating{right:auto; left:0;}
html[dir="rtl"] .card-count{left:auto; right:-4%;}
html[dir="rtl"] .stars, html[dir="rtl"] .stars-small, html[dir="rtl"] .gr-stars{direction:ltr;}

/* Cards, arrows and forms */
html[dir="rtl"] .post-card:hover .post-card-link .arrow{transform:translateX(-4px);}
html[dir="rtl"] .contact-form select{background-position:left 14px center; padding-right:16px; padding-left:34px;}
html[dir="rtl"] .browser-mock-url{margin-left:0; margin-right:8px;}
html[dir="rtl"] .chat-bubble-pop{right:auto; left:16px;}
html[dir="rtl"] .breadcrumb{direction:rtl;}

/* Numbers, prices and Latin brand text keep their natural left-to-right order */
html[dir="rtl"] .price-amount, html[dir="rtl"] .stat-num, html[dir="rtl"] .stat-callout-num,
html[dir="rtl"] .rating-count, html[dir="rtl"] .count-plus, html[dir="rtl"] .gr-score, html[dir="rtl"] .gr-count{direction:ltr; unicode-bidi:isolate;}

@media (max-width:980px){
  html[dir="rtl"] .main-nav a{text-align:right;}
  html[dir="rtl"] .nav-caret-btn{right:auto; left:16px;}
  html[dir="rtl"] .nav-dropdown a{padding:11px 40px 11px 28px;}
  html[dir="rtl"] .hero-grid{text-align:center;}
}

html[dir="rtl"] .example-chip, html[dir="rtl"] .hero-visual-note, html[dir="rtl"] .mock-note{letter-spacing:0; text-transform:none;}

@media (min-width:981px) and (max-width:1199px){
  html[dir="rtl"] .main-nav a{text-align:right;}
  html[dir="rtl"] .nav-caret-btn{right:auto; left:16px;}
  html[dir="rtl"] .nav-dropdown a{padding:11px 40px 11px 28px;}
}