/* ═══════════════════════════════════════════════════════
   100CLAN — Global RTL Overrides
   Applied when <html dir="rtl"> OR <html class="lang-ar">
   Works on all pages without touching inline <style> blocks.
   ─────────────────────────────────────────────────────── */

/* ─── Root direction + default text alignment ─── */
html[dir="rtl"],
html.lang-ar {
  direction: rtl;
  text-align: right;
}

/* Allow LTR bubbles inside RTL content (emails, handles, URLs, code) */
html[dir="rtl"] [dir="ltr"],
html.lang-ar [dir="ltr"] {
  direction: ltr;
  text-align: left;
  unicode-bidi: embed;
}

/* Numbers, emails, handles → stay LTR inline (user requested) */
html[dir="rtl"] .ltr-text,
html[dir="rtl"] code,
html[dir="rtl"] time,
html.lang-ar .ltr-text,
html.lang-ar code,
html.lang-ar time {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* ─── Universal block-level text alignment ─── */
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6,
html[dir="rtl"] p, html[dir="rtl"] li, html[dir="rtl"] label,
html.lang-ar h1, html.lang-ar h2, html.lang-ar h3,
html.lang-ar h4, html.lang-ar h5, html.lang-ar h6,
html.lang-ar p, html.lang-ar li, html.lang-ar label {
  text-align: right;
}

/* Text alignment for section headers + subs */
html[dir="rtl"] .section-label,
html[dir="rtl"] .section-title,
html[dir="rtl"] .section-sub,
html[dir="rtl"] .section-header,
html.lang-ar  .section-label,
html.lang-ar  .section-title,
html.lang-ar  .section-sub,
html.lang-ar  .section-header {
  text-align: right;
}

/* ─── Form inputs: align start correctly + flip placeholder ─── */
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] .form-field,
html[dir="rtl"] .input,
html.lang-ar  input,
html.lang-ar  textarea,
html.lang-ar  select,
html.lang-ar  .form-field,
html.lang-ar  .input {
  direction: rtl;
  text-align: right;
}

/* Keep email / URL / tel / number inputs LTR even in Arabic */
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] input[type="password"],
html.lang-ar  input[type="email"],
html.lang-ar  input[type="url"],
html.lang-ar  input[type="tel"],
html.lang-ar  input[type="number"],
html.lang-ar  input[type="password"] {
  direction: ltr;
  text-align: right; /* still right-aligned in the flow */
}

/* ─── Navigation (top bar) ─── */
html[dir="rtl"] .nav-inner,
html[dir="rtl"] .nav-links,
html[dir="rtl"] .nav-cta,
html[dir="rtl"] .nav-right,
html[dir="rtl"] .nav-left,
html.lang-ar  .nav-inner,
html.lang-ar  .nav-links,
html.lang-ar  .nav-cta,
html.lang-ar  .nav-right,
html.lang-ar  .nav-left {
  flex-direction: row-reverse;
}

/* Mobile menu */
html[dir="rtl"] .mobile-menu,
html[dir="rtl"] .mobile-menu a,
html.lang-ar  .mobile-menu,
html.lang-ar  .mobile-menu a {
  text-align: right;
}

/* ─── Hero section ─── */
html[dir="rtl"] .hero-text,
html[dir="rtl"] .hero-title,
html[dir="rtl"] .hero-sub,
html[dir="rtl"] .hero-headline,
html.lang-ar  .hero-text,
html.lang-ar  .hero-title,
html.lang-ar  .hero-sub,
html.lang-ar  .hero-headline {
  text-align: right;
}

html[dir="rtl"] .hero-badge,
html[dir="rtl"] .hero-actions,
html[dir="rtl"] .hero-trust,
html[dir="rtl"] .btn-primary,
html[dir="rtl"] .btn-outline,
html[dir="rtl"] .btn-hero-primary,
html[dir="rtl"] .btn-hero-outline,
html.lang-ar  .hero-badge,
html.lang-ar  .hero-actions,
html.lang-ar  .hero-trust,
html.lang-ar  .btn-primary,
html.lang-ar  .btn-outline,
html.lang-ar  .btn-hero-primary,
html.lang-ar  .btn-hero-outline {
  flex-direction: row-reverse;
}

/* ─── Feature cards ─── */
html[dir="rtl"] .features-header,
html[dir="rtl"] .fc-content,
html[dir="rtl"] .feature-title,
html[dir="rtl"] .feature-desc,
html.lang-ar  .features-header,
html.lang-ar  .fc-content,
html.lang-ar  .feature-title,
html.lang-ar  .feature-desc {
  text-align: right;
}

html[dir="rtl"] .feature-link,
html.lang-ar  .feature-link {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

/* ─── How it works section ─── */
html[dir="rtl"] .how .section-label,
html[dir="rtl"] .how .section-title,
html[dir="rtl"] .how .section-sub,
html[dir="rtl"] .step,
html[dir="rtl"] .step-content,
html[dir="rtl"] .profile-form,
html[dir="rtl"] .how-display-title,
html.lang-ar  .how .section-label,
html.lang-ar  .how .section-title,
html.lang-ar  .how .section-sub,
html.lang-ar  .step-content,
html.lang-ar  .profile-form,
html.lang-ar  .how-display-title {
  text-align: right;
}

html[dir="rtl"] .step,
html[dir="rtl"] .niche-tags,
html[dir="rtl"] .form-row,
html.lang-ar  .step,
html.lang-ar  .niche-tags,
html.lang-ar  .form-row {
  flex-direction: row-reverse;
}

/* ─── Dashboard layout ─── */
html[dir="rtl"] .dashboard-layout,
html.lang-ar  .dashboard-layout {
  direction: rtl;
}

html[dir="rtl"] .dash-sidebar,
html[dir="rtl"] .sidebar-profile-card,
html[dir="rtl"] .sidebar-nav,
html[dir="rtl"] .sidebar-nav-link,
html[dir="rtl"] .profile-name,
html[dir="rtl"] .profile-handle,
html[dir="rtl"] .niche-badge,
html.lang-ar  .dash-sidebar,
html.lang-ar  .sidebar-profile-card,
html.lang-ar  .sidebar-nav,
html.lang-ar  .sidebar-nav-link,
html.lang-ar  .profile-name,
html.lang-ar  .profile-handle,
html.lang-ar  .niche-badge {
  text-align: right;
}

html[dir="rtl"] .sidebar-stats,
html[dir="rtl"] .sidebar-stat,
html[dir="rtl"] .sidebar-nav-link,
html.lang-ar  .sidebar-stats,
html.lang-ar  .sidebar-stat,
html.lang-ar  .sidebar-nav-link {
  flex-direction: row-reverse;
}

/* Dashboard main content */
html[dir="rtl"] .dash-main,
html[dir="rtl"] .dash-content,
html[dir="rtl"] .dash-header,
html[dir="rtl"] .dash-card,
html[dir="rtl"] .action-panel,
html[dir="rtl"] .action-row,
html.lang-ar  .dash-main,
html.lang-ar  .dash-content,
html.lang-ar  .dash-header,
html.lang-ar  .dash-card,
html.lang-ar  .action-panel,
html.lang-ar  .action-row {
  text-align: right;
}

/* ─── Notifications dropdown ─── */
html[dir="rtl"] .notif-dropdown,
html.lang-ar  .notif-dropdown {
  right: auto;
  left: 0;
  text-align: right;
}

html[dir="rtl"] .notif-header,
html[dir="rtl"] .notif-item,
html.lang-ar  .notif-header,
html.lang-ar  .notif-item {
  flex-direction: row-reverse;
  text-align: right;
}

html[dir="rtl"] .notif-badge,
html.lang-ar  .notif-badge {
  right: auto;
  left: -4px;
}

/* ─── Testimonials ─── */
html[dir="rtl"] .testimonials-header,
html[dir="rtl"] .testimonial-text,
html[dir="rtl"] .testimonial-author-info,
html.lang-ar  .testimonials-header,
html.lang-ar  .testimonial-text,
html.lang-ar  .testimonial-author-info {
  text-align: right;
}

html[dir="rtl"] .testimonial-author,
html.lang-ar  .testimonial-author {
  flex-direction: row-reverse;
}

/* ─── CTA ─── */
html[dir="rtl"] .cta-inner,
html[dir="rtl"] .cta-title,
html[dir="rtl"] .cta-sub,
html.lang-ar  .cta-inner,
html.lang-ar  .cta-title,
html.lang-ar  .cta-sub {
  text-align: right;
}

/* ─── Footer ─── */
html[dir="rtl"] .footer-tagline,
html[dir="rtl"] .footer-links,
html[dir="rtl"] .footer-col,
html[dir="rtl"] .footer-col-title,
html[dir="rtl"] .footer-copy,
html.lang-ar  .footer-tagline,
html.lang-ar  .footer-links,
html.lang-ar  .footer-col,
html.lang-ar  .footer-col-title,
html.lang-ar  .footer-copy {
  text-align: right;
}

html[dir="rtl"] .footer-social,
html[dir="rtl"] .footer-bottom,
html[dir="rtl"] .footer-legal,
html.lang-ar  .footer-social,
html.lang-ar  .footer-bottom,
html.lang-ar  .footer-legal {
  flex-direction: row-reverse;
}

/* ─── Creator grid / profile / cards ─── */
html[dir="rtl"] .creator-card,
html[dir="rtl"] .creator-info,
html[dir="rtl"] .creator-name,
html[dir="rtl"] .creator-handle,
html[dir="rtl"] .creator-bio,
html[dir="rtl"] .profile-header,
html[dir="rtl"] .profile-info,
html[dir="rtl"] .profile-bio,
html[dir="rtl"] .profile-stats,
html.lang-ar  .creator-card,
html.lang-ar  .creator-info,
html.lang-ar  .creator-name,
html.lang-ar  .creator-handle,
html.lang-ar  .creator-bio,
html.lang-ar  .profile-header,
html.lang-ar  .profile-info,
html.lang-ar  .profile-bio,
html.lang-ar  .profile-stats {
  text-align: right;
}

html[dir="rtl"] .creator-card-header,
html[dir="rtl"] .creator-badges,
html[dir="rtl"] .creator-platforms,
html[dir="rtl"] .profile-header-row,
html[dir="rtl"] .profile-actions,
html.lang-ar  .creator-card-header,
html.lang-ar  .creator-badges,
html.lang-ar  .creator-platforms,
html.lang-ar  .profile-header-row,
html.lang-ar  .profile-actions {
  flex-direction: row-reverse;
}

/* ─── Modals ─── */
html[dir="rtl"] .modal,
html[dir="rtl"] .modal-content,
html[dir="rtl"] .modal-body,
html[dir="rtl"] .modal-header,
html.lang-ar  .modal,
html.lang-ar  .modal-content,
html.lang-ar  .modal-body,
html.lang-ar  .modal-header {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] .modal-actions,
html[dir="rtl"] .modal-footer,
html.lang-ar  .modal-actions,
html.lang-ar  .modal-footer {
  flex-direction: row-reverse;
}

/* Modal close button flips sides */
html[dir="rtl"] .modal-close,
html[dir="rtl"] .close-btn,
html.lang-ar  .modal-close,
html.lang-ar  .close-btn {
  right: auto;
  left: 16px;
}

/* ─── Chat / messaging ─── */
html[dir="rtl"] .chat-message,
html[dir="rtl"] .chat-bubble,
html[dir="rtl"] .chat-input,
html.lang-ar  .chat-message,
html.lang-ar  .chat-bubble,
html.lang-ar  .chat-input {
  text-align: right;
  direction: rtl;
}

/* ─── Tabs ─── */
html[dir="rtl"] .tabs,
html[dir="rtl"] .tab-list,
html.lang-ar  .tabs,
html.lang-ar  .tab-list {
  flex-direction: row-reverse;
}

/* ─── Collab / request cards ─── */
html[dir="rtl"] .request-card,
html[dir="rtl"] .collab-card,
html[dir="rtl"] .invitation-card,
html[dir="rtl"] .invite-card,
html.lang-ar  .request-card,
html.lang-ar  .collab-card,
html.lang-ar  .invitation-card,
html.lang-ar  .invite-card {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] .request-actions,
html[dir="rtl"] .card-actions,
html.lang-ar  .request-actions,
html.lang-ar  .card-actions {
  flex-direction: row-reverse;
}

/* ─── Search + filters ─── */
html[dir="rtl"] .search-bar,
html[dir="rtl"] .search-input,
html[dir="rtl"] .filter-bar,
html.lang-ar  .search-bar,
html.lang-ar  .search-input,
html.lang-ar  .filter-bar {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] .algolia-autocomplete-dropdown,
html.lang-ar  .algolia-autocomplete-dropdown {
  right: 0;
  left: 0;
  text-align: right;
}

html[dir="rtl"] .algolia-hit,
html.lang-ar  .algolia-hit {
  flex-direction: row-reverse;
  text-align: right;
}

/* ─── Tooltips / badges positioned right ─── */
html[dir="rtl"] .tooltip[data-position="right"],
html.lang-ar  .tooltip[data-position="right"] {
  right: auto;
  left: 100%;
}

/* ─── Cookie consent banner (GDPR) ─── */
html[dir="rtl"] #clan-cookie-banner,
html.lang-ar  #clan-cookie-banner {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] #clan-cookie-banner .actions,
html.lang-ar  #clan-cookie-banner .actions {
  flex-direction: row-reverse;
}

/* ─── Support widget (floating) ─── */
html[dir="rtl"] .support-widget,
html.lang-ar  .support-widget {
  right: auto;
  left: 24px;
}

html[dir="rtl"] .support-panel,
html.lang-ar  .support-panel {
  right: auto;
  left: 24px;
  text-align: right;
  direction: rtl;
}

/* ─── Icon mirroring: arrows that indicate direction ─── */
html[dir="rtl"] .icon-arrow-right,
html[dir="rtl"] .arrow-right,
html[dir="rtl"] .chevron-right,
html.lang-ar  .icon-arrow-right,
html.lang-ar  .arrow-right,
html.lang-ar  .chevron-right {
  transform: scaleX(-1);
}

/* ─── Numbers + arithmetic always LTR (user requirement) ─── */
html[dir="rtl"] .stat-val,
html[dir="rtl"] .stat-value,
html[dir="rtl"] .stat-num,
html[dir="rtl"] .sidebar-stat-val,
html[dir="rtl"] .sidebar-follow-value,
html[dir="rtl"] .followers,
html[dir="rtl"] .count,
html[dir="rtl"] .metric-value,
html[dir="rtl"] .number,
html.lang-ar  .stat-val,
html.lang-ar  .stat-value,
html.lang-ar  .stat-num,
html.lang-ar  .sidebar-stat-val,
html.lang-ar  .sidebar-follow-value,
html.lang-ar  .followers,
html.lang-ar  .count,
html.lang-ar  .metric-value,
html.lang-ar  .number {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Handles (@username) always LTR */
html[dir="rtl"] .handle,
html[dir="rtl"] .user-handle,
html[dir="rtl"] .profile-handle,
html[dir="rtl"] [class*="handle"],
html.lang-ar  .handle,
html.lang-ar  .user-handle,
html.lang-ar  .profile-handle,
html.lang-ar  [class*="handle"] {
  unicode-bidi: isolate;
}

/* Emails always LTR */
html[dir="rtl"] .email,
html[dir="rtl"] a[href^="mailto:"],
html.lang-ar  .email,
html.lang-ar  a[href^="mailto:"] {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* ─── Language switcher itself — keep LTR so EN/AR buttons stay in order ─── */
html[dir="rtl"] .lang-switcher,
html.lang-ar  .lang-switcher {
  direction: ltr;
}

/* ─── Disable transitions during lang switch (prevents animation jank) ─── */
html.lang-switching *,
html.lang-switching *::before,
html.lang-switching *::after {
  transition: none !important;
  animation-duration: 0s !important;
}

/* Note: reflow on lang toggle is handled by clan-lang-init.js
   (observer watches html.dir / html.class, forces compositor flush). */
