/* ===================================================
   LEVERAGE STUDIO — i18n RTL + Language Switcher CSS
   Import after style.css on every page
   =================================================== */

/* ---- Arabic font (Noto Kufi Arabic — clean, technical) ---- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@300;400;500;600;700&display=swap');

/* ================================================
   LANGUAGE TOGGLE BUTTON
   ================================================ */
.lang-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  padding: 7px 14px;
  border: 1px solid var(--border-light, #333);
  border-radius: var(--radius, 4px);
  background: none;
  color: var(--text-dim, #8a8580);
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.5px;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.lang-toggle-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent-lime, #c8f542);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
  z-index: 0;
}

.lang-toggle-btn:hover::before { transform: scaleX(1); }

.lang-toggle-btn:hover {
  color: var(--bg, #0d0d0d);
  border-color: var(--accent-lime, #c8f542);
}

.lang-toggle-btn span,
.lang-toggle-btn { position: relative; z-index: 1; }

/* Globe icon before button text */
.lang-toggle-btn::after {
  content: '🌐';
  font-size: 13px;
  margin-left: 4px;
  position: relative;
  z-index: 1;
}

/* RTL: flip icon side */
[dir="rtl"] .lang-toggle-btn::after {
  margin-left: 0;
  margin-right: 4px;
}

/* Mobile menu language button */
.lang-mobile-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 0;
  border: none;
  background: none;
  color: var(--accent-lime, #c8f542);
  cursor: pointer;
  border-top: 1px solid var(--border, #2a2a2a);
  margin-top: 8px;
  width: 100%;
  text-align: left;
}
[dir="rtl"] .lang-mobile-btn { text-align: right; }

/* ================================================
   ARABIC FONT APPLICATION
   ================================================ */
[lang="ar"],
.rtl,
[dir="rtl"] {
  font-family: 'Noto Kufi Arabic', 'Tahoma', system-ui, sans-serif;
}

/* Keep display/mono fonts for specific elements in RTL */
[dir="rtl"] .logo,
[dir="rtl"] .logo-text {
  font-family: 'Bebas Neue', 'Impact', sans-serif;
  letter-spacing: 1px;
}

[dir="rtl"] .price-new,
[dir="rtl"] .stat-num,
[dir="rtl"] .how-num,
[dir="rtl"] .phase-number,
[dir="rtl"] .pareto-bg-text,
[dir="rtl"] .section-title,
[dir="rtl"] .hero-title {
  font-family: 'Bebas Neue', 'Impact', sans-serif;
}

/* Monospace elements stay monospace */
[dir="rtl"] .product-type-tag,
[dir="rtl"] .subcat-tag,
[dir="rtl"] .stat-label,
[dir="rtl"] .section-label,
[dir="rtl"] .nav-links a,
[dir="rtl"] .format-pill,
[dir="rtl"] .cat-count,
[dir="rtl"] .price-old,
[dir="rtl"] .btn-card,
[dir="rtl"] .btn-card-sm,
[dir="rtl"] .btn-hero,
[dir="rtl"] .btn-hero-ghost,
[dir="rtl"] .btn-primary,
[dir="rtl"] .btn-ghost {
  font-family: 'Space Mono', 'Courier New', monospace;
}

/* ================================================
   RTL LAYOUT FLIPS
   ================================================ */

/* --- Direction base --- */
[dir="rtl"] body { direction: rtl; }

/* --- Nav --- */
[dir="rtl"] .nav-inner { flex-direction: row-reverse; }
[dir="rtl"] .nav-links { flex-direction: row-reverse; }
[dir="rtl"] .nav-actions { flex-direction: row-reverse; }

/* --- Hero --- */
[dir="rtl"] .hero-inner { text-align: right; }
[dir="rtl"] .hero-tag { flex-direction: row-reverse; }
[dir="rtl"] .hero-cta { flex-direction: row-reverse; }
[dir="rtl"] .hero-stats { flex-direction: row-reverse; }

/* Flip hero arrows */
[dir="rtl"] .btn-hero,
[dir="rtl"] .btn-hero-ghost { direction: rtl; }

/* --- Section header --- */
[dir="rtl"] .section-header { direction: rtl; }
[dir="rtl"] .section-link { text-align: left; }

/* --- Categories --- */
[dir="rtl"] .subcats { flex-direction: row-reverse; justify-content: flex-end; }
[dir="rtl"] .cat-card { text-align: right; }
[dir="rtl"] .cat-accent { left: auto; right: 0; transform-origin: right; }

/* --- Product cards --- */
[dir="rtl"] .product-type-tag { left: auto; right: 12px; }
[dir="rtl"] .product-tags { flex-direction: row-reverse; justify-content: flex-end; }
[dir="rtl"] .product-footer { flex-direction: row-reverse; }
[dir="rtl"] .pareto-footer { flex-direction: row-reverse; }
[dir="rtl"] .product-body { text-align: right; }

/* --- Price --- */
[dir="rtl"] .price { flex-direction: row-reverse; }

/* --- How cards --- */
[dir="rtl"] .how-card { text-align: right; }

/* --- Pareto section --- */
[dir="rtl"] .pareto-bg-text { right: auto; left: -40px; }
[dir="rtl"] .pareto-card { text-align: right; }
[dir="rtl"] .pareto-badge { right: auto; left: 12px; }
[dir="rtl"] .pareto-content { text-align: right; }

/* --- Footer --- */
[dir="rtl"] .footer-grid { direction: rtl; }
[dir="rtl"] .footer-col { text-align: right; }
[dir="rtl"] .footer-brand { text-align: right; }
[dir="rtl"] .footer-bottom { flex-direction: row-reverse; }
[dir="rtl"] .footer-legal { flex-direction: row-reverse; }
[dir="rtl"] .social-links { flex-direction: row-reverse; justify-content: flex-end; }

/* --- CTA --- */
[dir="rtl"] .cta-inner { direction: rtl; }
[dir="rtl"] .cta-text { text-align: right; }

/* --- Format pills --- */
[dir="rtl"] .formats-inner { flex-direction: row-reverse; }
[dir="rtl"] .format-pill { flex-direction: row-reverse; }

/* --- Catalog sidebar --- */
[dir="rtl"] .catalog-layout { direction: rtl; }
[dir="rtl"] .filter-sidebar { border-right: none; border-left: 1px solid var(--border); }
[dir="rtl"] .filter-check { flex-direction: row-reverse; }
[dir="rtl"] .filter-row { flex-direction: row-reverse; }
[dir="rtl"] .section-card-header { flex-direction: row-reverse; }
[dir="rtl"] .catalog-topbar { flex-direction: row-reverse; }
[dir="rtl"] .active-filters { flex-direction: row-reverse; }
[dir="rtl"] .active-filter-chip { flex-direction: row-reverse; }
[dir="rtl"] .tag-cloud { flex-direction: row-reverse; justify-content: flex-end; }

/* --- Roadmap --- */
[dir="rtl"] .roadmap-layout { direction: rtl; }
[dir="rtl"] .roadmap-nav {
  border-right: none;
  border-left: 1px solid var(--border);
}
[dir="rtl"] .nav-skill { padding-right: 24px; padding-left: 8px; }
[dir="rtl"] .nav-phase-label { flex-direction: row-reverse; }
[dir="rtl"] .track-bar-inner { flex-direction: row-reverse; }
[dir="rtl"] .phase-header { flex-direction: row-reverse; }
[dir="rtl"] .skill-card-header { flex-direction: row-reverse; }
[dir="rtl"] .skill-card { text-align: right; }
[dir="rtl"] .skill-card-footer { flex-direction: row-reverse; }
[dir="rtl"] .progress-wrap { flex-direction: row-reverse; }
[dir="rtl"] .feature-list li { flex-direction: row-reverse; }
[dir="rtl"] .feature-list li::before { margin-right: 0; margin-left: 10px; }

/* --- Product detail --- */
[dir="rtl"] .product-layout { direction: rtl; }
[dir="rtl"] .product-meta { flex-direction: row-reverse; justify-content: flex-end; }
[dir="rtl"] .product-detail-title { text-align: right; }
[dir="rtl"] .product-tagline { border-left: none; border-right: 2px solid var(--accent-lime); padding-left: 0; padding-right: 14px; }
[dir="rtl"] .desc-tabs { flex-direction: row-reverse; }
[dir="rtl"] .gallery-thumbs { flex-direction: row-reverse; }
[dir="rtl"] .pareto-flag { flex-direction: row-reverse; }
[dir="rtl"] .how-grid { direction: rtl; }
[dir="rtl"] .breadcrumb { direction: rtl; text-align: right; }

/* --- Categories page --- */
[dir="rtl"] .cat-section-header { flex-direction: row-reverse; }
[dir="rtl"] .cat-section-info { text-align: right; }
[dir="rtl"] .subcat-card { text-align: right; }
[dir="rtl"] .subcat-arrow { right: auto; left: 16px; transform: rotate(180deg); }
[dir="rtl"] .subcat-card:hover .subcat-arrow { transform: rotate(180deg) translateX(4px); }
[dir="rtl"] .cat-products-preview { direction: rtl; }

/* --- Page hero --- */
[dir="rtl"] .page-hero-inner { text-align: right; }

/* ================================================
   TRANSITION — smooth lang switch
   ================================================ */
body {
  transition: direction 0s; /* instant direction switch */
}

/* Fade content on language switch */
body.lang-switching {
  opacity: 0;
  transition: opacity 0.15s ease;
}
body.lang-switched {
  opacity: 1;
  transition: opacity 0.15s ease;
}

/* ================================================
   ARABIC-SPECIFIC TYPOGRAPHY TWEAKS
   ================================================ */
[dir="rtl"] .hero-title {
  line-height: 1.05; /* Arabic needs slightly more line height */
  letter-spacing: 0;
}

[dir="rtl"] .section-title {
  letter-spacing: 0;
  line-height: 1.05;
}

[dir="rtl"] .hero-sub,
[dir="rtl"] .pareto-desc,
[dir="rtl"] .page-hero p {
  line-height: 1.9; /* Arabic body text needs more breathing room */
}

[dir="rtl"] p,
[dir="rtl"] .cat-card p,
[dir="rtl"] .how-card p,
[dir="rtl"] .skill-card-desc {
  line-height: 1.85;
}

/* Flip chevron/arrow icons logically in RTL */
[dir="rtl"] .fa-chevron-right::before { content: "\f053"; } /* flip to left */
[dir="rtl"] .fa-chevron-left::before  { content: "\f054"; } /* flip to right */

/* ================================================
   RESPONSIVE RTL
   ================================================ */
@media (max-width: 768px) {
  [dir="rtl"] .nav-inner { flex-direction: row-reverse; }
  [dir="rtl"] .mobile-menu { text-align: right; direction: rtl; }
  [dir="rtl"] .lang-mobile-btn { text-align: right; }

  [dir="rtl"] .hero-cta { justify-content: flex-end; }
  [dir="rtl"] .hero-stats { justify-content: flex-end; }
  [dir="rtl"] .section-header { text-align: right; }
}