/* Meta Royale RTL support
   Applied when Arabic is selected and html/body dir="rtl". */

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

html[dir="rtl"] .ltr-layout {
    direction: ltr;
}

html[dir="rtl"] .rtl-layout {
    direction: rtl;
}

/* Keep game tags, numbers, IDs and hashes readable left-to-right. */
html[dir="rtl"] .tag,
html[dir="rtl"] .player-tag,
html[dir="rtl"] .clan-tag,
html[dir="rtl"] .deck-hash,
html[dir="rtl"] .trophy-count,
html[dir="rtl"] .rank-number,
html[dir="rtl"] code,
html[dir="rtl"] pre,
html[dir="rtl"] input[type="number"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="tel"] {
    direction: ltr;
    unicode-bidi: plaintext;
}

/* Text inputs should accept Arabic naturally. */
html[dir="rtl"] input[type="text"],
html[dir="rtl"] textarea,
html[dir="rtl"] .rz-textbox {
    direction: rtl;
    text-align: right;
}

/* Tags usually start with #, so keep them LTR even inside RTL forms when marked or near clan/player tag fields. */
html[dir="rtl"] input[name*="Tag"],
html[dir="rtl"] input[id*="Tag"],
html[dir="rtl"] .tag-input {
    direction: ltr;
    text-align: left;
}

/* Bootstrap directional utilities fallback when Bootstrap RTL css is not loaded. */
html[dir="rtl"] .text-start { text-align: right !important; }
html[dir="rtl"] .text-end { text-align: left !important; }

html[dir="rtl"] .ms-0 { margin-right: 0 !important; margin-left: 0 !important; }
html[dir="rtl"] .ms-1 { margin-right: .25rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ms-2 { margin-right: .5rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ms-3 { margin-right: 1rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ms-4 { margin-right: 1.5rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ms-5 { margin-right: 3rem !important; margin-left: 0 !important; }
html[dir="rtl"] .me-0 { margin-left: 0 !important; margin-right: 0 !important; }
html[dir="rtl"] .me-1 { margin-left: .25rem !important; margin-right: 0 !important; }
html[dir="rtl"] .me-2 { margin-left: .5rem !important; margin-right: 0 !important; }
html[dir="rtl"] .me-3 { margin-left: 1rem !important; margin-right: 0 !important; }
html[dir="rtl"] .me-4 { margin-left: 1.5rem !important; margin-right: 0 !important; }
html[dir="rtl"] .me-5 { margin-left: 3rem !important; margin-right: 0 !important; }

html[dir="rtl"] .ps-0 { padding-right: 0 !important; padding-left: 0 !important; }
html[dir="rtl"] .ps-1 { padding-right: .25rem !important; padding-left: 0 !important; }
html[dir="rtl"] .ps-2 { padding-right: .5rem !important; padding-left: 0 !important; }
html[dir="rtl"] .ps-3 { padding-right: 1rem !important; padding-left: 0 !important; }
html[dir="rtl"] .ps-4 { padding-right: 1.5rem !important; padding-left: 0 !important; }
html[dir="rtl"] .ps-5 { padding-right: 3rem !important; padding-left: 0 !important; }
html[dir="rtl"] .pe-0 { padding-left: 0 !important; padding-right: 0 !important; }
html[dir="rtl"] .pe-1 { padding-left: .25rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pe-2 { padding-left: .5rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pe-3 { padding-left: 1rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pe-4 { padding-left: 1.5rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pe-5 { padding-left: 3rem !important; padding-right: 0 !important; }

/* Menus and dropdowns */
html[dir="rtl"] .dropdown-menu {
    text-align: right;
}

html[dir="rtl"] .dropdown-item,
html[dir="rtl"] .nav-link,
html[dir="rtl"] .bottom-nav-item,
html[dir="rtl"] .hub-card,
html[dir="rtl"] .quick-card,
html[dir="rtl"] .about-card,
html[dir="rtl"] .card-desc,
html[dir="rtl"] .card-title {
    text-align: right;
}

/* Bootstrap offcanvas-start opens from the right in RTL. */
html[dir="rtl"] .offcanvas.offcanvas-start {
    right: 0;
    left: auto;
    transform: translateX(100%);
}

html[dir="rtl"] .offcanvas.offcanvas-start.show,
html[dir="rtl"] .offcanvas.offcanvas-start.showing {
    transform: none;
}

html[dir="rtl"] .offcanvas.offcanvas-end {
    left: 0;
    right: auto;
    transform: translateX(-100%);
}

html[dir="rtl"] .offcanvas.offcanvas-end.show,
html[dir="rtl"] .offcanvas.offcanvas-end.showing {
    transform: none;
}

/* Cards, leaderboards and rows */
html[dir="rtl"] .clan-rank-row,
html[dir="rtl"] .player-rank-row,
html[dir="rtl"] .deck-row,
html[dir="rtl"] .card-row,
html[dir="rtl"] .leaderboard-row,
html[dir="rtl"] .member-row {
    direction: rtl;
}

html[dir="rtl"] .trophy-info,
html[dir="rtl"] .rank-number,
html[dir="rtl"] .action-arrow {
    direction: ltr;
}

html[dir="rtl"] .action-arrow.bi-arrow-right,
html[dir="rtl"] .bi-arrow-right,
html[dir="rtl"] .bi-arrow-right-circle-fill {
    transform: scaleX(-1);
}

html[dir="rtl"] .bi-arrow-left-circle-fill {
    transform: scaleX(-1);
}

/* Modals / popups */
html[dir="rtl"] .modal,
html[dir="rtl"] .modal-content,
html[dir="rtl"] .rz-dialog,
html[dir="rtl"] .rz-notification,
html[dir="rtl"] .rz-popup,
html[dir="rtl"] .rz-dropdown-panel {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .rz-dropdown,
html[dir="rtl"] .rz-dropdown-label,
html[dir="rtl"] .rz-multiselect,
html[dir="rtl"] .rz-autocomplete,
html[dir="rtl"] .rz-inputtext {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .rz-dropdown-trigger {
    left: 0;
    right: auto;
}

/* Autocomplete flags should stay visually separated from Arabic text. */
html[dir="rtl"] .fi,
html[dir="rtl"] [class^="fi-"],
html[dir="rtl"] [class*=" fi-"] {
    margin-left: .35rem;
    margin-right: 0;
}

/* Tables */
html[dir="rtl"] table,
html[dir="rtl"] .table {
    direction: rtl;
    text-align: right;
}

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

html[dir="rtl"] .text-gold,
html[dir="rtl"] .official-disclaimer {
    unicode-bidi: plaintext;
}