/* RTL (Right-to-Left) Styles for Arabic Language */

/* Apply RTL direction to the entire page */
html[lang="ar"], 
body[lang="ar"] {
    direction: rtl;
    text-align: right;
}

/* Reset specific elements that should maintain LTR */
html[lang="ar"] input[type="email"],
html[lang="ar"] input[type="url"],
html[lang="ar"] input[type="tel"],
html[lang="ar"] .ltr-content {
    direction: ltr;
    text-align: left;
}

/* Flip navigation and menu items */
html[lang="ar"] .navigation,
html[lang="ar"] .tgmenu__navbar-wrap ul {
    direction: rtl;
}

html[lang="ar"] .navigation li {
    float: right;
}

/* Flip dropdowns and submenus */
html[lang="ar"] .sub-menu {
    left: auto;
    right: 0;
}

/* Flip language switcher dropdown */
html[lang="ar"] .lang-switcher .lang-dropdown {
    left: auto;
    right: 0;
}

/* Flip mobile menu */
html[lang="ar"] .tgmobile__menu {
    left: auto;
    right: 0;
}

html[lang="ar"] .tgmobile__menu-backdrop {
    left: auto;
    right: 0;
}

/* Flip icons and arrows */
html[lang="ar"] .flaticon-right-arrow:before {
    transform: rotate(180deg);
    display: inline-block;
}

/* Flip flag icons and margins */
html[lang="ar"] .flag-icon {
    margin-right: 0;
    margin-left: 8px;
}

html[lang="ar"] .mobile-lang-switcher .flag-icon,
html[lang="ar"] .lang-dropdown .flag-icon {
    margin-right: 0;
    margin-left: 10px;
}

/* Flip padding and margins for RTL */
html[lang="ar"] .slider__content,
html[lang="ar"] .section__content {
    text-align: right;
}

/* Flip buttons and action items */
html[lang="ar"] .tgmenu__action {
    flex-direction: row-reverse;
}

/* Flip search popup */
html[lang="ar"] .search__popup-wrap {
    direction: rtl;
}

/* Flip footer content */
html[lang="ar"] .footer__content {
    text-align: right;
}

/* Flip lists */
html[lang="ar"] ul,
html[lang="ar"] ol {
    padding-right: 20px;
    padding-left: 0;
}

/* Flip tables */
html[lang="ar"] table {
    direction: rtl;
}

html[lang="ar"] th,
html[lang="ar"] td {
    text-align: right;
}

/* Flip forms */
html[lang="ar"] .form-group,
html[lang="ar"] .form-control {
    text-align: right;
}

/* Flip cards and containers */
html[lang="ar"] .card,
html[lang="ar"] .container {
    direction: rtl;
}

/* Flip grid layouts */
html[lang="ar"] .row {
    direction: rtl;
}

/* Fix for specific alignments */
html[lang="ar"] .text-left {
    text-align: right !important;
}

html[lang="ar"] .text-right {
    text-align: left !important;
}

html[lang="ar"] .float-left {
    float: right !important;
}

html[lang="ar"] .float-right {
    float: left !important;
}

/* Flip margins */
html[lang="ar"] .mr-1, 
html[lang="ar"] .me-1 {
    margin-right: 0 !important;
    margin-left: 0.25rem !important;
}

html[lang="ar"] .mr-2,
html[lang="ar"] .me-2 {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

html[lang="ar"] .mr-3,
html[lang="ar"] .me-3 {
    margin-right: 0 !important;
    margin-left: 1rem !important;
}

html[lang="ar"] .ml-1,
html[lang="ar"] .ms-1 {
    margin-left: 0 !important;
    margin-right: 0.25rem !important;
}

html[lang="ar"] .ml-2,
html[lang="ar"] .ms-2 {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
}

html[lang="ar"] .ml-3,
html[lang="ar"] .ms-3 {
    margin-left: 0 !important;
    margin-right: 1rem !important;
}

/* Flip padding */
html[lang="ar"] .pr-1,
html[lang="ar"] .pe-1 {
    padding-right: 0 !important;
    padding-left: 0.25rem !important;
}

html[lang="ar"] .pr-2,
html[lang="ar"] .pe-2 {
    padding-right: 0 !important;
    padding-left: 0.5rem !important;
}

html[lang="ar"] .pr-3,
html[lang="ar"] .pe-3 {
    padding-right: 0 !important;
    padding-left: 1rem !important;
}

html[lang="ar"] .pl-1,
html[lang="ar"] .ps-1 {
    padding-left: 0 !important;
    padding-right: 0.25rem !important;
}

html[lang="ar"] .pl-2,
html[lang="ar"] .ps-2 {
    padding-left: 0 !important;
    padding-right: 0.5rem !important;
}

html[lang="ar"] .pl-3,
html[lang="ar"] .ps-3 {
    padding-left: 0 !important;
    padding-right: 1rem !important;
}

/* Flip offCanvas sidebar */
html[lang="ar"] .offCanvas__wrap {
    right: auto;
    left: -370px;
}

html[lang="ar"] .offCanvas__wrap.offCanvas__opened {
    left: 0;
}

html[lang="ar"] .offCanvas__overlay {
    right: auto;
    left: 0;
}

/* Flip side toggle icon */
html[lang="ar"] .side-toggle-icon {
    transform: scaleX(-1);
}

/* Fix mobile menu position */
html[lang="ar"] .mobile-nav-toggler {
    float: left;
}

/* Flip trending guilds items */
html[lang="ar"] .trending__guilds-item {
    direction: rtl;
}

html[lang="ar"] .trending__guilds-thumb {
    margin-right: 0;
    margin-left: 15px;
}

/* Flip guild navigation buttons */
html[lang="ar"] .trending__guilds-navigation button {
    transform: scaleX(-1);
}

/* Ensure proper text direction for inputs */
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select {
    direction: rtl;
    text-align: right;
}

/* Keep specific content LTR (codes, IDs, technical content) */
html[lang="ar"] code,
html[lang="ar"] pre,
html[lang="ar"] .code-content,
html[lang="ar"] .technical-content {
    direction: ltr;
    text-align: left;
}

/* Flip social links */
html[lang="ar"] .social-links ul {
    direction: rtl;
}

/* Flip breadcrumbs */
html[lang="ar"] .breadcrumb {
    direction: rtl;
}

html[lang="ar"] .breadcrumb-item + .breadcrumb-item::before {
    float: right;
    padding-left: 0;
    padding-right: 0.5rem;
}