/* Right-to-left support for Urdu and Arabic.
   Loaded only when the page direction is RTL. Most of the layout is flex/grid,
   which mirrors on its own — these rules fix what direction alone cannot. */

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

/* Script-specific typography. Nastaliq needs far more line height than Latin. */
html[lang="ur"] body{font-family:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq",serif;line-height:2.1}
html[lang="ur"] h1,html[lang="ur"] h2,html[lang="ur"] h3,html[lang="ur"] h4,
html[lang="ur"] .ag-h2,html[lang="ur"] .ag-hero h1{font-family:"Noto Nastaliq Urdu",serif;line-height:1.9;letter-spacing:0}
html[lang="ur"] .ag-hero h1{font-size:clamp(1.6rem,4vw,2.6rem)}
html[lang="ur"] .ag-eyebrow,html[lang="ur"] .eyebrow{letter-spacing:0}
html[lang="ar"] body{font-family:"IBM Plex Sans Arabic","Noto Naskh Arabic",system-ui,sans-serif;line-height:1.85}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] .ag-h2{font-family:"IBM Plex Sans Arabic",sans-serif;letter-spacing:0}
html[dir="rtl"] .ag-eyebrow,html[dir="rtl"] .eyebrow,html[dir="rtl"] .ag-card-tag{letter-spacing:.04em}

/* Latin strings inside RTL text (brand, domain, emails, serials) stay LTR. */
html[dir="rtl"] .brand-name,html[dir="rtl"] .brand-name small,
html[dir="rtl"] .vf-mono,html[dir="rtl"] code,html[dir="rtl"] .hb-note{direction:ltr;text-align:start;unicode-bidi:isolate}
html[dir="rtl"] .brand{flex-direction:row}

/* Badges and ribbons that were pinned to one side. */
html[dir="rtl"] .ag-flag{right:auto;left:16px}
html[dir="rtl"] .ag-courses .home-course-cover>b{left:auto;right:10px}
html[dir="rtl"] .ag-contact-lines b,html[dir="rtl"] .ag-stack b{margin-left:0}

/* Left-accent cards become right-accent. */
html[dir="rtl"] .msg{border-left:1px solid #e4e8f0;border-right:4px solid #d7deea}
html[dir="rtl"] .msg.unread{border-right-color:#f5b93c}
html[dir="rtl"] .msg.held{border-right-color:#d97706}
html[dir="rtl"] .vf-btn-line,html[dir="rtl"] .vf-result{text-align:right}

/* Lists indent from the correct side. */
html[dir="rtl"] .ag-feature-list,html[dir="rtl"] .ag-learn-points,
html[dir="rtl"] .ag-stack ul,html[dir="rtl"] .vf-details{padding-right:0}
html[dir="rtl"] .structured-lesson-notes ul,html[dir="rtl"] .structured-lesson-notes ol{padding-left:0;padding-right:24px}

/* Numbered process cards. */
html[dir="rtl"] .ag-step::before{right:auto;left:20px}

/* Forms and inputs. */
html[dir="rtl"] .ag-field input,html[dir="rtl"] .ag-field select,html[dir="rtl"] .ag-field textarea,
html[dir="rtl"] .vf-input-row input,html[dir="rtl"] .sc-panel label input,html[dir="rtl"] .sc-panel label textarea{text-align:right}
html[dir="rtl"] input[type="email"],html[dir="rtl"] input[type="tel"],html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="password"],html[dir="rtl"] .vf-input-row input{direction:ltr;text-align:left}
html[dir="rtl"] .auth-card .password-field button{right:auto;left:8px}

/* Floating assistant. */
html[dir="rtl"] .hb-launcher{right:auto;left:18px}
html[dir="rtl"] .hb-panel{right:auto;left:18px}
html[dir="rtl"] .hb-msg.bot{border-bottom-left-radius:14px;border-bottom-right-radius:5px}
html[dir="rtl"] .hb-msg.me{border-bottom-right-radius:14px;border-bottom-left-radius:5px}
html[dir="rtl"] .hb-close{margin-left:0;margin-right:auto}
@media(max-width:480px){html[dir="rtl"] .hb-panel{right:8px;left:8px}html[dir="rtl"] .hb-launcher{right:auto;left:14px}}

/* Language switcher. */
.lang-switch{position:relative;display:inline-flex;align-items:center}
.lang-switch>button{display:inline-flex;align-items:center;gap:.35rem;border:1px solid #e0e4ee;background:#fff;color:#3d4c6b;font:inherit;font-size:.82rem;font-weight:700;border-radius:999px;padding:.35rem .7rem;cursor:pointer;line-height:1.4}
.lang-switch>button:hover{border-color:#6147df;color:#6147df}
.lang-switch>button svg{width:14px;height:14px}
.lang-menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;min-width:150px;background:#fff;border:1px solid #e2e7f0;border-radius:12px;box-shadow:0 16px 36px rgba(16,26,48,.16);padding:6px;display:none;z-index:120}
.lang-menu.is-open{display:block}
.lang-menu a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:.5rem .65rem;border-radius:8px;text-decoration:none;color:#33405c;font-size:.88rem;font-weight:600}
.lang-menu a:hover{background:#f2f5fb;color:#6147df}
.lang-menu a[aria-current="true"]{background:#eeeaff;color:#5335df}
.lang-menu a small{font-size:.7rem;color:#8b93a6;font-weight:700;letter-spacing:.08em}
@media(max-width:720px){.lang-menu{inset-inline-end:auto;inset-inline-start:0}}