/* ═══════════════════════════════════════════════════════════════
   GulfBot /ar/ — RTL + Arabic-type overrides on top of style.css.
   Loaded AFTER style.css. The English page never loads this file.
   Same theme, same components — only direction + script fixes.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --font:'IBM Plex Sans Arabic','Plus Jakarta Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono','IBM Plex Sans Arabic',monospace;
}

/* Arabic joined letterforms break under the Latin tracking the design uses.
   Zero it wherever Arabic text lands; Latin-only runs (KWD, plan names) are
   unaffected visually at 0. */
h1,h2,h3,.wordmark,.footer-logo,.stat-n,.f-title,.faq-q,.ask-bubble,.plan-was,
.eyebrow,.hero-badge,.features-tag,.band-time,.stat-l,.step-label,.step-value,
.engine-watch span,.engine-status,.reply-label,.reply-stamp,.rail-when,.rail-what,
.plan-badge,.plan-offer-name,.plan-foot,.plan-msgs,.plan-msgs-short,.scroll-cue,
.proof-l,.avatar-role,.avatar-name,.f-num,.f-meta,.faq-num,.footer-col h3,
.hero-h1,.plan-name,.plan-n,.plan-unit,.btn-primary,.btn-dark,.btn-white,.btn-glass,
.btn-nav,.start-submit,.ask-chip,.lang-word{letter-spacing:0}

/* fake-italic slants Arabic badly — emphasise with weight instead */
.hero-dare em{font-style:normal;font-weight:800}

/* the shine <span> inside the wordmark is an inline-block, which RTL bidi
   reorders to "BotGulf" — pin the brand LTR */
.wordmark,.footer-logo{direction:ltr;unicode-bidi:isolate}

/* progress bar fills from the reading edge (right) */
.progress-bar{left:auto;right:0}

/* hero stat dividers sit between cells — flip to the leading edge */
.stat-cell + .stat-cell{border-left:0;border-right:1px solid rgba(13,11,20,.08)}

/* reveal slides mirror the reading direction */
[data-reveal][data-slide="left"]{transform:translateX(56px)}
[data-reveal][data-slide="right"]{transform:translateX(-56px)}
.proof [data-reveal][data-slide="left"]{transform:translateX(36px)}
.proof [data-reveal][data-slide="right"]{transform:translateX(-36px)}
[data-reveal].revealed{transform:none}

/* engine demo: bubbles default LTR (asks arrive in any language),
   .rtl opts Arabic asks in; the bubble tail flips to the incoming side */
.ask-bubble{direction:ltr;text-align:left;border-radius:20px 20px 6px 20px}
.ask-bubble.rtl{direction:rtl;text-align:right}
.reply-text{direction:ltr;text-align:left}
.reply-text.rtl{direction:rtl;text-align:right}
.caret{margin-left:0;margin-right:3px}
#draftInput{direction:rtl;text-align:right}

/* feature rows */
.feature-row:hover{transform:translateX(-6px)}
.f-meta{text-align:left}

/* founder quote block */
.proof-honest{padding-left:0;border-left:0;padding-right:15px;border-right:2px solid rgba(109,63,242,.3)}

/* plan cards: badge + check bullets anchor on the right */
.plan-badge{left:auto;right:28px}
.plan-list li{padding-left:0;padding-right:23px}
.plan-list li::before{left:auto;right:0}

/* FAQ */
.faq-head{text-align:right}

/* forward arrows point the way the reader travels */
.btn-dark svg,.btn-white svg{transform:scaleX(-1)}

/* forms: phone digits stay LTR, dial-code face stays LTR */
input[name="phone"]{direction:ltr;text-align:right}
.cc-face{direction:ltr;unicode-bidi:isolate}

/* footer */
.site-footer{text-align:right}
.cta-card{text-align:right}

/* desktop build rail: the JS anchors the fill from the right in main-ar.js;
   flip the glow gradient so it sweeps with the fill */
.rail-fill{background:linear-gradient(270deg,#4b1fd6,#a855f7,#c084fc)}

@media (max-width:1023px){
  .plan-badge{right:20px}
  .plan-list li{padding-right:20px}
}

@media (max-width:767px){
  .btn-nav{margin-left:0;margin-right:auto}
  .nav-menu{right:auto;left:18px}
  .stat-cell + .stat-cell{border-right-color:rgba(13,11,20,.06)}
  .plan-badge{right:14px}
  .plan-list li{padding-right:18px}
  .proof-honest{padding-left:0;padding-right:11px}
  .rail-line{left:auto;right:16px;background:linear-gradient(180deg,#4b1fd6,#a855f7,#c084fc)}
  .rail-step{text-align:right}
}