/* RTL Layout Adjustments for Arabic */
/* PRINCIPLE: Only text should be RTL, layout structure stays LTR */

/* Base: Force LTR for all layout elements */
[dir="rtl"] {
  direction: ltr; /* Force LTR to override browser default RTL behavior */
}

/* Force LTR for all major layout containers */
[dir="rtl"] main,
[dir="rtl"] section,
[dir="rtl"] div,
[dir="rtl"] article,
[dir="rtl"] aside,
[dir="rtl"] .container,
[dir="rtl"] .wrapper,
[dir="rtl"] .content,
[dir="rtl"] .grid,
[dir="rtl"] .flex,
[dir="rtl"] .block,
[dir="rtl"] [class*="layout"],
[dir="rtl"] [class*="section"],
[dir="rtl"] [class*="container"],
[dir="rtl"] [class*="wrapper"] {
  direction: ltr !important;
}

/* Navigation: Only text alignment, NOT layout structure */
[dir="rtl"] nav,
[dir="rtl"] header {
  direction: ltr; /* Keep navigation structure LTR */
}

/* Navigation text alignment */
[dir="rtl"] nav a,
[dir="rtl"] nav button,
[dir="rtl"] .nav-link {
  text-align: right; /* Only text alignment, not direction */
}

/* Fix specific components that should NOT be RTL */
[dir="rtl"] .logo,
[dir="rtl"] [class*="logo"],
[dir="rtl"] img,
[dir="rtl"] svg:not(.text-icon),
[dir="rtl"] video,
[dir="rtl"] canvas,
[dir="rtl"] .music-player,
[dir="rtl"] .audio-controls,
[dir="rtl"] audio {
  direction: ltr;
}

/* Music generator buttons and controls - prevent flipping */
[dir="rtl"] .music-generator,
[dir="rtl"] .generator-controls,
[dir="rtl"] .music-controls,
[dir="rtl"] [class*="music-"] button,
[dir="rtl"] [class*="generator"] button {
  direction: ltr;
}

/* Force LTR for all common page components */
[dir="rtl"] .hero,
[dir="rtl"] .features,
[dir="rtl"] .showcase,
[dir="rtl"] .testimonials,
[dir="rtl"] .cta,
[dir="rtl"] .footer,
[dir="rtl"] .banner,
[dir="rtl"] .faq,
[dir="rtl"] .creator-empowerment,
[dir="rtl"] .empowerment,
[dir="rtl"] .creator,
[dir="rtl"] [class*="hero"],
[dir="rtl"] [class*="feature"],
[dir="rtl"] [class*="showcase"],
[dir="rtl"] [class*="testimonial"],
[dir="rtl"] [class*="cta"],
[dir="rtl"] [class*="banner"],
[dir="rtl"] [class*="faq"],
[dir="rtl"] [class*="creator"],
[dir="rtl"] [class*="empowerment"] {
  direction: ltr !important;
}

/* ONLY text content should be RTL aligned - NOT structural direction */
[dir="rtl"] p,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6,
[dir="rtl"] span:not(.icon),
[dir="rtl"] label,
[dir="rtl"] li {
  direction: ltr !important; /* Force LTR structure */
  text-align: right; /* Only alignment change */
}

/* For pure text elements that need RTL flow */
[dir="rtl"] .rtl-text {
  direction: rtl;
  text-align: right;
}

/* Form inputs - only text alignment */
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
  text-align: right;
  /* Keep direction: ltr for form structure */
}

/* Keep number inputs LTR */
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="email"] {
  direction: ltr;
  text-align: left;
}

/* Showcase/case studies section - KEEP LTR */
[dir="rtl"] .showcase,
[dir="rtl"] .case-studies,
[dir="rtl"] .examples,
[dir="rtl"] [class*="showcase"],
[dir="rtl"] [class*="example"] {
  direction: ltr;
}

/* Showcase text can be RTL */
[dir="rtl"] .showcase p,
[dir="rtl"] .showcase h1,
[dir="rtl"] .showcase h2,
[dir="rtl"] .showcase h3,
[dir="rtl"] [class*="showcase"] p,
[dir="rtl"] [class*="showcase"] h1,
[dir="rtl"] [class*="showcase"] h2,
[dir="rtl"] [class*="showcase"] h3 {
  direction: rtl;
  text-align: right;
}

/* Buttons and controls - keep LTR structure */
[dir="rtl"] button,
[dir="rtl"] .btn,
[dir="rtl"] [role="button"] {
  direction: ltr;
}

/* Button text alignment only */
[dir="rtl"] button span,
[dir="rtl"] .btn span {
  text-align: right;
  /* Keep direction: ltr for button structure */
}

/* Icon buttons stay LTR */
[dir="rtl"] .icon-button,
[dir="rtl"] [class*="icon-btn"],
[dir="rtl"] button.icon-only {
  direction: ltr;
}

/* Progress bars and sliders stay LTR */
[dir="rtl"] progress,
[dir="rtl"] input[type="range"],
[dir="rtl"] .progress-bar,
[dir="rtl"] .slider {
  direction: ltr;
}

/* Code blocks stay LTR */
[dir="rtl"] pre,
[dir="rtl"] code {
  direction: ltr;
  text-align: left;
}

/* Play/pause buttons should not flip */
[dir="rtl"] [class*="play"],
[dir="rtl"] [class*="pause"],
[dir="rtl"] [class*="stop"] {
  direction: ltr;
}

/* Icons and visual elements stay LTR */
[dir="rtl"] .icon,
[dir="rtl"] [class*="icon"]:not(.text-icon),
[dir="rtl"] .social-icons svg,
[dir="rtl"] [class*="social"] svg {
  direction: ltr;
}

/* Charts and graphs stay LTR */
[dir="rtl"] .chart,
[dir="rtl"] .graph {
  direction: ltr;
}

/* Dropdown menus */
[dir="rtl"] .dropdown-menu {
  text-align: right;
  direction: rtl;
}

[dir="rtl"] .dropdown-menu svg {
  direction: ltr;
}

/* Cards and content blocks - keep LTR structure */
[dir="rtl"] .card,
[dir="rtl"] [class*="card"] {
  direction: ltr; /* Keep card structure LTR */
}

/* Card text alignment */
[dir="rtl"] .card p,
[dir="rtl"] .card h1,
[dir="rtl"] .card h2,
[dir="rtl"] .card h3,
[dir="rtl"] [class*="card"] p,
[dir="rtl"] [class*="card"] h1,
[dir="rtl"] [class*="card"] h2,
[dir="rtl"] [class*="card"] h3 {
  text-align: right; /* Only text alignment */
}

/* Force LTR for Flexbox and Grid layouts */
[dir="rtl"] .flex,
[dir="rtl"] .grid,
[dir="rtl"] [class*="flex"],
[dir="rtl"] [class*="grid"],
[dir="rtl"] .d-flex,
[dir="rtl"] .row,
[dir="rtl"] .col,
[dir="rtl"] [class*="col-"] {
  direction: ltr !important;
}

/* Force LTR for any remaining page blocks */
[dir="rtl"] .page-section,
[dir="rtl"] .content-block,
[dir="rtl"] .module,
[dir="rtl"] .component,
[dir="rtl"] .steps,
[dir="rtl"] .process,
[dir="rtl"] .how-it-works,
[dir="rtl"] [class*="section"],
[dir="rtl"] [class*="block"],
[dir="rtl"] [class*="module"],
[dir="rtl"] [class*="component"],
[dir="rtl"] [class*="step"],
[dir="rtl"] [class*="process"],
[dir="rtl"] [class*="how"],
[dir="rtl"] [class*="work"] {
  direction: ltr !important;
}

/* Nuclear option: Force ALL elements to LTR except specific text elements */
[dir="rtl"] * {
  direction: ltr !important;
}

/* Then specifically allow text alignment for content */
[dir="rtl"] p,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6,
[dir="rtl"] span:not(.icon),
[dir="rtl"] label,
[dir="rtl"] li {
  text-align: right !important;
}

/* Margin and padding adjustments */
[dir="rtl"] .ml-auto {
  margin-left: 0;
  margin-right: auto;
}

[dir="rtl"] .mr-auto {
  margin-right: 0;
  margin-left: auto;
}