.language-switcher-form {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.language-switcher-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-tertiary, var(--color-text-muted));
    white-space: nowrap;
}

.language-switcher-options {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.2rem;
    border: 1px solid var(--border-color, var(--color-border));
    border-radius: 999px;
    background: var(--bg-card, var(--color-surface-2));
}

.language-option-btn {
    border: 0;
    background: transparent;
    color: var(--text-tertiary, var(--color-text-muted));
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 999px;
    padding: 0.45rem 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.language-option-btn:hover {
    background: color-mix(in srgb, var(--palette-primary) 12%, transparent);
    color: var(--text-primary, var(--color-text-main));
}

.language-option-btn.active {
    background: var(--palette-primary-dark);
    color: var(--color-on-emphasis);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

html[dir="rtl"] .language-switcher-form {
    direction: rtl;
}

/* Keep language switcher tidy inside profile dropdown menus */
.profile-dropdown-menu .language-switcher-form,
.dropdown-menu .language-switcher-form {
    width: 100%;
    justify-content: space-between;
    padding: 0.5rem 0.25rem 0.75rem;
    border-bottom: 1px solid var(--border-color, var(--color-border));
    margin-bottom: 0.25rem;
}

.profile-dropdown-menu .language-switcher-label,
.dropdown-menu .language-switcher-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

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

html[dir="rtl"] .header,
html[dir="rtl"] .navbar,
html[dir="rtl"] .header-nav,
html[dir="rtl"] .nav-actions {
    direction: rtl;
}

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

/*
 * Do NOT force all inputs to text-align:right — it breaks number/currency fields
 * and absolute-positioned currency prefixes ($) on deposit / funds pages.
 */
html[dir="rtl"] input:not([type="number"]):not([type="email"]):not([type="tel"]):not([type="url"]):not([type="search"]),
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    text-align: right;
}

html[dir="rtl"] input[type="search"] {
    text-align: right;
}

/* Numbers, money, codes: always LTR inside RTL pages */
html[dir="rtl"] input[type="number"],
html[dir="rtl"] input.amount-input,
html[dir="rtl"] input[inputmode="decimal"],
html[dir="rtl"] input[inputmode="numeric"] {
    direction: ltr;
    text-align: left;
    unicode-bidi: isolate;
}

/* Funds step 1 — amount field: reserve a clean row for typed digits (hint is below, not overlaid) */
html[dir="rtl"] .funds-amount-wrap input[type="number"],
html[dir="rtl"] #funds_unified_amount {
    width: 100%;
    box-sizing: border-box;
}

/* Transfer: $ suffix uses logical “end”; in RTL that lands on the same side as LTR digits — pin to visual right */
html[dir="rtl"] .transfer-ref__currency-suffix {
    inset-inline-end: auto;
    inset-inline-start: auto;
    right: 1rem;
    left: auto;
}

/* Transfer: native select arrow on the start side in RTL; mirror padding so text does not sit under the chevron */
html[dir="rtl"] .transfer-ref__select {
    background-position: left 1rem center;
    padding: 0.95rem 1rem 0.95rem 2.5rem;
}

/* Deposit / funds: step wizard — keep LTR so step 1→2→3 order matches the progress bar */
html[dir="rtl"] .step-indicator,
html[dir="rtl"] .step-indicator .step-item {
    direction: ltr;
}

html[dir="rtl"] .step-indicator-line {
    left: 0;
    right: auto;
}

/* Currency + amount row: $ prefix uses left/top; keep group LTR */
html[dir="rtl"] .amount-input-group {
    direction: ltr;
}

html[dir="rtl"] .amount-input-group .currency-prefix {
    left: 18px;
    right: auto;
}

html[dir="rtl"] .amount-input-group .amount-input {
    padding-left: 50px;
    padding-right: var(--spacing-md, 16px);
}

/* Wallet / balance displays */
html[dir="rtl"] .balance-amount,
html[dir="rtl"] .balance-card .balance-amount {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: start;
}

html[dir="rtl"] .stat-value[data-balance],
html[dir="rtl"] [id="timer-display"],
html[dir="rtl"] #timer-minutes,
html[dir="rtl"] #timer-seconds,
html[dir="rtl"] .payment-detail-value,
html[dir="rtl"] #address-text {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: start;
}

html[dir="rtl"] .payment-address-box {
    direction: ltr;
}

/* Crypto currency dropdown / search */
html[dir="rtl"] .searchable-select-wrapper,
html[dir="rtl"] .selected-currency-display {
    direction: ltr;
}

html[dir="rtl"] .selected-currency-text {
    unicode-bidi: isolate;
}

/* Floating chat widget (included on customer base): mirror FAB + panel to the left in RTL */
html[dir="rtl"] .chatbot-widget {
    right: auto;
    left: 20px;
}

html[dir="rtl"] .chatbot-window {
    right: auto;
    left: 0;
}

html[dir="rtl"] .chat-toast {
    right: auto;
    left: 20px;
}

html[dir="rtl"] .chatbot-badge {
    right: auto;
    left: -5px;
}

/* OTP / 6-digit code rows: start typing from the visual right in RTL */
html[dir="rtl"] .code-input-container {
    flex-direction: row-reverse;
}

/* Single-digit OTP cells: keep digits LTR but centered (avoids cursor clash with rtl text-align) */
html[dir="rtl"] input.code-digit {
    text-align: center;
    direction: ltr;
    unicode-bidi: isolate;
}

/* Back / login links that use a leading arrow icon */
html[dir="rtl"] .btn-back .fa-arrow-left,
html[dir="rtl"] .back-link a .bi-arrow-left,
html[dir="rtl"] a.btn-secondary .bi-arrow-left {
    transform: scaleX(-1);
}

/* Email shown inside RTL copy stays readable */
html[dir="rtl"] .email-display,
html[dir="rtl"] .card-subtitle .ltr-embed {
    direction: ltr;
    unicode-bidi: isolate;
}

/* Dashboard / marketing quick-start row: chevron should follow reading direction */
html[dir="rtl"] .quick-start-cta .bi-arrow-right {
    transform: scaleX(-1);
}