/**
 * ULTIMATE HERO CENTERING CSS FOR ARABIC RTL
 * This file MUST load before all other CSS files
 * Version: 3.0 - Final Solution
 */

/* ============================================
   GLOBAL RTL CENTERING
   ============================================ */

/* Force entire page to center in RTL */
html[dir="rtl"] {
    text-align: center !important;
    direction: rtl !important;
}

html[dir="rtl"] body {
    text-align: center !important;
    direction: rtl !important;
}

/* ============================================
   HERO SECTION - NUCLEAR OPTION
   ============================================ */

/* Target EVERYTHING that could be a hero section */
html[dir="rtl"] .hero,
html[dir="rtl"] [class*="hero"],
html[dir="rtl"] [class*="Hero"],
html[dir="rtl"] [class*="landing"],
html[dir="rtl"] [class*="Landing"],
html[dir="rtl"] section[class*="hero"],
html[dir="rtl"] section[class*="banner"],
html[dir="rtl"] .hero-section,
html[dir="rtl"] [class*="hero-section"],
html[dir="rtl"] [class*="HeroSection"],
html[dir="rtl"] .banner,
html[dir="rtl"] [class*="banner"],
html[dir="rtl"] [class*="Banner"],
html[dir="rtl"] .header-section,
html[dir="rtl"] [class*="header-section"],
html[dir="rtl"] [class*="HeaderSection"],
html[dir="rtl"] main,
html[dir="rtl"] [class*="main"],
html[dir="rtl"] [class*="Main"],
html[dir="rtl"] [class*="container"],
html[dir="rtl"] .container,
html[dir="rtl"] [id*="hero"],
html[dir="rtl"] [id*="Hero"],
html[dir="rtl"] [id*="landing"],
html[dir="rtl"] [id*="main"] {
    text-align: center !important;
    direction: rtl !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
}

/* ============================================
   HEADINGS - FORCE CENTER
   ============================================ */

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"] .hero h1,
html[dir="rtl"] .hero h2,
html[dir="rtl"] .hero h3,
html[dir="rtl"] .hero h4,
html[dir="rtl"] .hero h5,
html[dir="rtl"] .hero h6,
html[dir="rtl"] [class*="hero"] h1,
html[dir="rtl"] [class*="hero"] h2,
html[dir="rtl"] [class*="hero"] h3,
html[dir="rtl"] [class*="hero"] h4,
html[dir="rtl"] [class*="hero"] h5,
html[dir="rtl"] [class*="hero"] h6,
html[dir="rtl"] [class*="Hero"] h1,
html[dir="rtl"] [class*="Hero"] h2,
html[dir="rtl"] [class*="Hero"] h3,
html[dir="rtl"] [class*="Hero"] h4,
html[dir="rtl"] [class*="Hero"] h5,
html[dir="rtl"] [class*="Hero"] h6,
html[dir="rtl"] main h1,
html[dir="rtl"] main h2,
html[dir="rtl"] main h3,
html[dir="rtl"] section h1,
html[dir="rtl"] section h2,
html[dir="rtl"] section h3 {
    text-align: center !important;
    direction: rtl !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ============================================
   PARAGRAPHS - FORCE CENTER
   ============================================ */

html[dir="rtl"] p,
html[dir="rtl"] .hero p,
html[dir="rtl"] [class*="hero"] p,
html[dir="rtl"] [class*="Hero"] p,
html[dir="rtl"] main p,
html[dir="rtl"] section p,
html[dir="rtl"] [class*="description"],
html[dir="rtl"] [class*="Description"] {
    text-align: center !important;
    direction: rtl !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    width: 100% !important;
}

/* ============================================
   SPANS - FORCE CENTER
   ============================================ */

html[dir="rtl"] span,
html[dir="rtl"] .hero span,
html[dir="rtl"] [class*="hero"] span,
html[dir="rtl"] [class*="Hero"] span,
html[dir="rtl"] main span {
    text-align: center !important;
    direction: rtl !important;
}

/* ============================================
   DIVS - FORCE CENTER IN HERO
   ============================================ */

html[dir="rtl"] .hero div,
html[dir="rtl"] [class*="hero"] div,
html[dir="rtl"] [class*="Hero"] div,
html[dir="rtl"] main div,
html[dir="rtl"] section div {
    text-align: center !important;
    direction: rtl !important;
}

/* Direct children of hero */
html[dir="rtl"] .hero > div,
html[dir="rtl"] [class*="hero"] > div,
html[dir="rtl"] [class*="Hero"] > div,
html[dir="rtl"] main > div,
html[dir="rtl"] section > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ============================================
   BUTTONS & LINKS - FORCE CENTER
   ============================================ */

html[dir="rtl"] button,
html[dir="rtl"] a,
html[dir="rtl"] .hero button,
html[dir="rtl"] [class*="hero"] button,
html[dir="rtl"] [class*="Hero"] button,
html[dir="rtl"] main button,
html[dir="rtl"] section button,
html[dir="rtl"] [class*="button"],
html[dir="rtl"] [class*="Button"],
html[dir="rtl"] [class*="cta"],
html[dir="rtl"] [class*="CTA"],
html[dir="rtl"] .btn,
html[dir="rtl"] [class*="btn"] {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

/* ============================================
   BADGE - FORCE CENTER
   ============================================ */

html[dir="rtl"] [class*="badge"],
html[dir="rtl"] [class*="Badge"],
html[dir="rtl"] .badge,
html[dir="rtl"] [class*="hero-badge"],
html[dir="rtl"] [class*="heroBadge"],
html[dir="rtl"] .hero-badge {
    text-align: center !important;
    display: inline-block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ============================================
   STATS GRID - FORCE CENTER
   ============================================ */

html[dir="rtl"] [class*="stats"],
html[dir="rtl"] [class*="Stats"],
html[dir="rtl"] [class*="stats-grid"],
html[dir="rtl"] [class*="statsGrid"],
html[dir="rtl"] [class*="hero-stats"],
html[dir="rtl"] [class*="heroStats"] {
    text-align: center !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

html[dir="rtl"] [class*="stats"] > *,
html[dir="rtl"] [class*="Stats"] > *,
html[dir="rtl"] [class*="stats-grid"] > * {
    text-align: center !important;
}

/* ============================================
   INLINE STYLE OVERRIDES
   ============================================ */

/* Override any inline text-align styles */
html[dir="rtl"] [style*="text-align"] {
    text-align: center !important;
}

/* Override any inline left alignment */
html[dir="rtl"] [style*="left"] {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
}

/* Override flex-start */
html[dir="rtl"] [style*="flex-start"] {
    justify-content: center !important;
    align-items: center !important;
}

/* ============================================
   REACT/FRAMEWORK SPECIFIC
   ============================================ */

/* Material-UI */
html[dir="rtl"] .MuiBox-root,
html[dir="rtl"] .MuiContainer-root,
html[dir="rtl"] .MuiTypography-root {
    text-align: center !important;
}

/* Tailwind CSS */
html[dir="rtl"] .text-left,
html[dir="rtl"] .text-start {
    text-align: center !important;
}

html[dir="rtl"] .items-start,
html[dir="rtl"] .justify-start {
    align-items: center !important;
    justify-content: center !important;
}

/* Bootstrap */
html[dir="rtl"] .text-left {
    text-align: center !important;
}

html[dir="rtl"] .float-left,
html[dir="rtl"] .float-start {
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ============================================
   WRAPPER ELEMENTS
   ============================================ */

html[dir="rtl"] [class*="wrapper"],
html[dir="rtl"] [class*="Wrapper"],
html[dir="rtl"] [class*="content-wrap"],
html[dir="rtl"] [class*="contentWrap"],
html[dir="rtl"] [class*="inner"],
html[dir="rtl"] [class*="Inner"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    html[dir="rtl"] .hero,
    html[dir="rtl"] [class*="hero"],
    html[dir="rtl"] [class*="Hero"],
    html[dir="rtl"] main,
    html[dir="rtl"] section {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        text-align: center !important;
    }

    html[dir="rtl"] h1,
    html[dir="rtl"] h2,
    html[dir="rtl"] h3 {
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: center !important;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    html[dir="rtl"] {
        text-align: center !important;
        direction: rtl !important;
    }

    html[dir="rtl"] .hero,
    html[dir="rtl"] [class*="hero"] {
        text-align: center !important;
    }
}