/* =========================================================
   RTL Production Styles
   Safe for Mobile + Prevent Horizontal Overflow
   Supports: html.rtl  OR  dir="rtl"
   ========================================================= */

/* -------- Base Direction -------- */
html[dir="rtl"],
html.rtl {
    direction: rtl;
}

    html[dir="rtl"] body,
    html.rtl body {
        direction: rtl;
        text-align: right;
    }


    /* =========================================================
   CRITICAL FIX 1
   Prevent horizontal scroll / blank space on right
   ========================================================= */
    html[dir="rtl"],
    html[dir="rtl"] body,
    html.rtl,
    html.rtl body {
        overflow-x: hidden !important;
        width: 100%;
        max-width: 100%;
    }

/* Modern browsers */
@supports (overflow-x: clip) {
    html[dir="rtl"],
    html[dir="rtl"] body,
    html.rtl,
    html.rtl body {
        overflow-x: clip !important;
    }
}


/* =========================================================
   CRITICAL FIX 2
   Reset page shift (root cause of 1290px offset)
   ========================================================= */
html[dir="rtl"] main.page,
html[dir="rtl"] .page,
html.rtl main.page,
html.rtl .page {
    transform: none !important;
    translate: none !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative;
}


/* =========================================================
   Containers Safety
   ========================================================= */
html[dir="rtl"] .container,
html[dir="rtl"] .section,
html.rtl .container,
html.rtl .section {
    max-width: 100%;
}


/* =========================================================
   Media Safety (images/videos causing overflow)
   ========================================================= */
html[dir="rtl"] img,
html[dir="rtl"] video,
html[dir="rtl"] iframe,
html.rtl img,
html.rtl video,
html.rtl iframe {
    max-width: 100%;
    height: auto;
}


/* =========================================================
   Text & Inline Elements
   ========================================================= */
html[dir="rtl"] .text-left,
html.rtl .text-left {
    text-align: right !important;
}

html[dir="rtl"] .text-right,
html.rtl .text-right {
    text-align: left !important;
}


/* =========================================================
   Flex / Grid Direction Fixes (if used)
   ========================================================= */
html[dir="rtl"] .flex-row,
html.rtl .flex-row {
    flex-direction: row-reverse;
}


/* =========================================================
   Inputs & Forms
   ========================================================= */
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html.rtl input,
html.rtl textarea {
    text-align: right;
}


/* =========================================================
   Prevent accidental nowrap overflow
   ========================================================= */
html[dir="rtl"] *,
html.rtl * {
    box-sizing: border-box;
}