:root{ --font: 'Cairo', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
html[lang='ar'] body{ direction: rtl; }
html[lang='ar'] .nav ul{ justify-content:flex-start; }
html[lang='ar'] .nav a{ font-weight:700; }
html[lang='ar'] .modal-close{ left:12px; right:auto; }
html[lang='ar'] .modal-right{ border-left:none; border-right: 1px solid rgba(34,174,209,0.18); }

/* =========================================================
   QA HOTFIX (AR): Hero audience tabs
   - Keep EN look, but mirror the tab corners/dividers for RTL
   - Ensure list pointers (• / squares) appear on the RIGHT
   Scope: Arabic page only (html[lang="ar"])
   ========================================================= */

/* Ensure the component itself is truly RTL */
html[lang="ar"] .hero-why-card,
html[lang="ar"] .hero-why-card .why-tabs,
html[lang="ar"] .hero-why-card .why-tabbar,
html[lang="ar"] .hero-why-card .why-panels,
html[lang="ar"] .hero-why-card .why-panel,
html[lang="ar"] .hero-why-card .mini-list{
  direction: rtl;
  text-align: right;
}

/* Mirror the tab strip separators (EN uses border-right; RTL should use border-left) */
html[lang="ar"] .hero-why-card .why-tab{
  border-right: 0 !important;
  border-left: 1px solid rgba(148,210,234,.65) !important;
}
html[lang="ar"] .hero-why-card .why-tab:last-child{
  border-left: 0 !important;
}

/* Mirror the rounded top corners so the RTL outer edges match EN */
html[lang="ar"] .hero-why-card .why-tab:first-child{
  border-top-left-radius: 0 !important;
  border-top-right-radius: 16px !important;
}
html[lang="ar"] .hero-why-card .why-tab:last-child{
  border-top-right-radius: 0 !important;
  border-top-left-radius: 16px !important;
}

/* Force list bullets/pointers to the RIGHT (works with ::before bullets) */
html[lang="ar"] .hero-why-card .mini-list li{
  flex-direction: row-reverse !important;
  justify-content: flex-start !important; /* in row-reverse, start = right */
  text-align: right !important;
}
html[lang="ar"] .hero-why-card .mini-list li::before{
  margin-top: 4px !important;
}

/* =========================================================
   QC/QA FIX (AR): Checklist is TRUE RTL + bullet/pointer pinned on RIGHT
   Scope: ONLY the Why tabs checklist within the hero audience tabs.
   - Makes text flow RTL
   - Ensures the bullet appears on the RIGHT even if flex rules are overridden
   ========================================================= */
html[lang="ar"] .hero-why-card .why-panels .mini-list{
  direction: rtl !important;
  text-align: right !important;
}

/* Use a pinned marker so we don't rely on flex item order */
html[lang="ar"] .hero-why-card .why-panels .mini-list li{
  direction: rtl !important;
  unicode-bidi: plaintext !important;
  text-align: right !important;
  display: block !important;
  position: relative;
  padding-right: 18px !important;
  padding-left: 0 !important;
}

html[lang="ar"] .hero-why-card .why-panels .mini-list li::before{
  content: "•";
  position: absolute;
  right: 0;
  top: 0.15em;
  font-weight: 900;
  line-height: 1;
  color: var(--accent, #22aed1);
  margin: 0 !important;
}

/* QC/QA R18: Anti-spam container RTL safeguard (no visual changes beyond dot box wrap) */
html[dir="rtl"] .captcha-q{ direction: rtl; }

/* =========================================================
   QC/QA R22 (AR): "📦 باقات ترخيص جاهزة" list padding
   Issue: UL markers/text appear too close to the card border in RTL.
   Fix: move indentation to the RTL start edge (right) and add safe
        padding so bullets never touch the card border.
   Scope: ONLY the packages section.
   ========================================================= */
html[lang="ar"] #packages .package ul{
  /* RTL start edge = right */
  direction: rtl !important;
  unicode-bidi: plaintext !important;
  padding-right: 28px !important;
  padding-left: 0 !important;
  /* keep the list visually centered within the card padding */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  text-align: right;
}

/* =========================================================
   QC/QA R23 (AR): WebGL demo watermark positioning
   Fixes Arabic page watermark rendering outside the canvas area.
   Scope: ONLY the WebGL demo overlay elements.
   ========================================================= */
html[dir="rtl"] .demo-watermark{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  z-index: 1;
  opacity: 1;
  transition: opacity .38s ease, transform .38s ease, filter .38s ease;
}

html[dir="rtl"] .demo-watermark.is-hidden{
  opacity: 0;
  transform: scale(1.02);
  filter: blur(6px);
}

html[dir="rtl"] .demo-loader{
  z-index: 3;
}

/* =========================================================
   QC/QA R25: Mobile header/nav responsiveness fix
   - Scope: Header/nav/CTA layout on small screens only
   - Goal: Prevent CTA shrink (vertical text), keep nav usable, keep layout clean
   ========================================================= */
@media (max-width: 820px){
  header .nav{
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
  }
  header .nav .brand{
    flex: 0 0 auto;
  }
  header .nav .brand img{
    height: 46px;
    width: auto;
  }
  header .nav .cta{
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
  }
  header .nav .cta .btn{
    padding: 10px 12px;
    font-size: 14px;
    border-radius: 14px;
  }
  header .nav .cta .btn.primary{
    white-space: nowrap;
  }

  /* Make the menu usable on mobile without crushing the CTA */
  header .nav ul{
    flex: 1 1 100%;
    order: 3;
    gap: 10px;
    margin-top: 4px;
    padding-top: 10px;
    padding-bottom: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  header .nav ul::-webkit-scrollbar{ display:none; }
  header .nav ul li{ flex: 0 0 auto; }
  header .nav a{
    padding: 10px 10px;
    font-size: 13.5px;
  }
}

@media (max-width: 420px){
  header .nav .brand img{ height: 42px; }
  header .nav .cta .btn{ padding: 9px 10px; font-size: 13px; }
  header .nav a{ padding: 9px 9px; font-size: 13px; }
}

/* RTL tweaks: keep menu start aligned naturally on RTL and prevent CTA shrink */
@media (max-width: 820px){
  html[dir="rtl"] header .nav ul{
    justify-content: flex-start; /* flex-start == right in RTL */
  }
  html[dir="rtl"] header .nav .cta .btn.primary{
    white-space: nowrap;
  }
}


/* 2026 RTL polish for new components */
html[lang="ar"] .hero-slider-top-row{ flex-direction: row-reverse; }
html[lang="ar"] .hero-slide-grid{ direction: rtl; }
html[lang="ar"] .hero-slide-actions{ justify-content: flex-start; }
html[lang="ar"] .tabs-bar{ direction: rtl; }
html[lang="ar"] .tab-card{ direction: rtl; text-align: right; }
html[lang="ar"] .roi-grid,
html[lang="ar"] .roi-card{ direction: rtl; text-align: right; }
html[lang="ar"] .roi-row{ direction: rtl; }
html[lang="ar"] .pkg-list{ padding-left: 0; padding-right: 18px; }
html[lang="ar"] .modal-min{ right: auto; left: 52px; }
html[lang="ar"] .quote-dock{ left: auto; right: 22px; bottom: 74px; }


/* QC PATCH (AR): New hero slider + tabs viz + ROI status */
html[lang="ar"] .hero-slide-copy{ text-align: right; }
html[lang="ar"] .hero-slide-actions{ flex-direction: row-reverse; justify-content: flex-start; }
html[lang="ar"] .hero-slide-actions .btn{ text-align: center; }

html[lang="ar"] .viz-list{ padding-right: 18px; padding-left: 0; }
html[lang="ar"] .bar-row{ grid-template-columns: 1fr 150px; }
html[lang="ar"] .bar-row span{ text-align: right; }

html[lang="ar"] .kpi{ text-align: right; }
html[lang="ar"] .roi-status{ flex-direction: row-reverse; }
html[lang="ar"] .roi-status-pill{ flex-direction: row-reverse; }


/* QC PATCH v3 (AR): Hosting options + ROI currency row polish */
html[lang="ar"] #quoteModal .hosting-card input{ margin-left: 8px; margin-right: 0; }
html[lang="ar"] .roi-currency-row{ direction: rtl; }