/* MyEduStep clean RTL layer (V9)
   The active Academy LMS language determines dir="rtl". Bootstrap RTL handles
   Bootstrap spacing/alignment; this file only fixes theme-specific LTR rules. */

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

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

html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] .form-control,
html[dir="rtl"] .form-select,
html[dir="rtl"] .nice-select,
html[dir="rtl"] .dropdown-menu,
html[dir="rtl"] table,
html[dir="rtl"] th,
html[dir="rtl"] td {
    direction: rtl;
    text-align: right;
}

/* Inherit page direction in theme wrappers that otherwise keep LTR behavior. */
html[dir="rtl"] .row,
html[dir="rtl"] .header-area,
html[dir="rtl"] .header-area .container,
html[dir="rtl"] .header-area .row,
html[dir="rtl"] .sub-header,
html[dir="rtl"] .sub-header .container,
html[dir="rtl"] .sub-header .row,
html[dir="rtl"] .footer-area,
html[dir="rtl"] .footer-area .container,
html[dir="rtl"] .footer-area .row,
html[dir="rtl"] .student-profile-area,
html[dir="rtl"] .my-courses-area,
html[dir="rtl"] .dashboard-content {
    direction: rtl !important;
}

/* Menus and dropdowns */
html[dir="rtl"] .main-menu-ul,
html[dir="rtl"] .navbar-nav,
html[dir="rtl"] .dropdown-menu,
html[dir="rtl"] .mega_list,
html[dir="rtl"] .Userprofile .dropdown-menu {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .main-menu-ul { padding-right: 0; }
html[dir="rtl"] .dropdown-menu-end { right: auto; left: 0; }

/* Search icon/button moves to the logical end in RTL. */
html[dir="rtl"] .Esearch_entry button { right: auto; left: 0; }
html[dir="rtl"] .Esearch_entry .form-control { padding-right: 15px; padding-left: 45px; }

/* Keep media/video controls internally LTR; only the surrounding UI is RTL. */
html[dir="rtl"] .plyr { direction: ltr !important; }

/* V11 - Arabic top-bar language selector: one chevron, close to the label.
   Remove Bootstrap/native arrows and keep one niceSelect chevron a few pixels
   to the left of the Arabic label. */
html[dir="rtl"] .primary-end > form {
    margin: 0 !important;
}

html[dir="rtl"] .primary-end .nice-select.nice-control {
    direction: rtl !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    position: relative !important;
}

html[dir="rtl"] .primary-end .nice-select.nice-control .current {
    display: inline-block !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: right !important;
    white-space: nowrap !important;
    line-height: normal !important;
}

html[dir="rtl"] .primary-end .nice-select.nice-control::after {
    content: "" !important;
    display: inline-block !important;
    position: static !important;
    flex: 0 0 auto !important;
    width: 7px !important;
    height: 7px !important;
    margin: -3px 0 0 0 !important;
    border: 0 !important;
    border-bottom: 2px solid #667085 !important;
    border-right: 2px solid #667085 !important;
    background: transparent !important;
    transform: rotate(45deg) !important;
    transform-origin: 66% 66% !important;
}

html[dir="rtl"] .primary-end .nice-select.nice-control.open::after {
    transform: rotate(-135deg) !important;
    margin-top: 3px !important;
}

html[dir="rtl"] .primary-end .nice-select.nice-control .list {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    min-width: 120px !important;
    width: max-content !important;
    text-align: right !important;
}

html[dir="rtl"] .primary-end select#lng-selector.form-select {
    background-image: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}