/* Shared by public account forms and onboarding; document contents stay LTR. */
body.auth-body { flex-direction: column; align-items: stretch; }
.auth-body > .main { width: 100%; justify-items: center; }
.account-language { padding: 12px 24px; background: #fff; }
.account-language form { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin: 0; }
.account-language__label { font-size: 13px; color: #595466; }
.account-language__options { display: inline-flex; flex-wrap: wrap; gap: 4px; border: 1px solid #e3d9fa; border-radius: 24px; padding: 4px; }
.account-language button { border: 0; border-radius: 20px; padding: 7px 14px; background: transparent; color: #30203f; font: inherit; font-size: 13px; cursor: pointer; }
.account-language button[aria-pressed="true"] { background: #30203f; color: #fff; }
.account-language button:focus-visible { outline: 2px solid #8765d7; outline-offset: 2px; }
.auth-body .auth-wrapper { min-width: 0; min-height: calc(100vh - 66px); }
.auth-flow .auth-field-hint { margin: 6px 0 0; color: #777; font-size: 12px; line-height: 1.5; text-align: start; }
.auth-wrapper.auth-flow .auth-reseller { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; font-size: 13px; }
.auth-reseller__name { max-width: 100%; padding: 6px 12px; border-radius: 999px; background: #f5f0ff; color: #8765d7; font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }
.auth-body input[type="email"], .auth-body input[type="tel"], .auth-body input[inputmode="numeric"], .auth-body input.otp-input { direction: ltr; text-align: start; }
.auth-body [dir="ltr"].agreement-legal-copy, .auth-body .proforma-document[dir="ltr"] { direction: ltr; text-align: left; }
[dir="rtl"] .auth-body { font-family: Tahoma, Arial, sans-serif; }
[dir="rtl"] .auth-flow .auth-mode-indicator { left: auto; right: 4px; }
[dir="rtl"] .auth-flow.is-register .auth-mode-indicator { transform: translateX(-100%); }
[dir="rtl"] .auth-flow .password-toggle { right: auto; left: 15px; }
[dir="rtl"] .auth-flow .password-field .form-control { padding-right: 16px; padding-left: 52px; }
[dir="rtl"] .auth-body .registration-field, [dir="rtl"] .auth-body .payment-method { text-align: start; }
[dir="rtl"] .auth-body .agreement-instructions ol { padding-inline-start: 0; }
[dir="rtl"] .auth-body .fta-connect__steps,
[dir="rtl"] .auth-body .payment-verification__next,
[dir="rtl"] .auth-body .payment-proof-card { text-align: start; }
[dir="rtl"] .auth-body .agreement-review-actions { justify-self: end; margin-left: 0; margin-right: auto; }
[dir="rtl"] .auth-body .payment-totals dd { text-align: end; }
[dir="rtl"] .auth-body .payment-method em,
[dir="rtl"] .auth-body .payment-fee-row strong em { margin-left: 0; margin-right: 8px; }
[dir="rtl"] .auth-body .payment-fee-row form button img { padding-right: 0; padding-left: 10px; }
[dir="rtl"] .auth-body .payment-plan-card li { text-align: start; }
[dir="rtl"] .auth-body .registration-banner { text-align: end; }
@media (max-width: 480px) {
    .account-language { padding: 10px 12px; }
    .account-language form { justify-content: center; gap: 8px; }
    .account-language__label { display: none; }
}

/* Login/Register only: one accessible selector, outside the decorative aria-hidden panel. */
.auth-body .auth-wrapper.auth-entry { position: relative; min-height: 100vh; }
.auth-entry > .account-language {
    position: absolute;
    z-index: 3;
    top: 32px;
    right: 24px;
    max-width: calc(50% - 48px);
    padding: 0;
    background: transparent;
}
.auth-entry > .account-language form { direction: ltr; justify-content: flex-end; }
.auth-entry .account-language__options { flex-wrap: nowrap; }
@media (min-width: 881px) {
    /* Keep the illustration and selector physically on the right in Arabic too. */
    [dir="rtl"] .auth-wrapper.auth-entry { flex-direction: row-reverse; }
}
@media (max-width: 880px) {
    .auth-body .auth-wrapper.auth-entry { max-width: none; }
    .auth-entry > .account-language {
        position: static;
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
        padding: 20px 24px 0;
    }
    .auth-wrapper.auth-entry .auth-left { width: 100%; max-width: 480px; align-self: center; }
}
@media (max-width: 480px) {
    .auth-entry > .account-language { padding: 16px 12px 0; }
}

/* Keep Exit after the language selector on the physical right, including RTL pages. */
.onboarding-header { display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding: 12px 24px; background: #fff; }
.onboarding-header__actions { display: flex; flex: 0 0 auto; align-items: center; gap: 16px; margin-left: auto; }
/* A footer in document flow: bottom-right on short pages, below content on long forms. */
.auth-body.onboarding-flow { justify-content: flex-start; }
.onboarding-flow > .main { flex: 1 0 auto; }
.onboarding-company-footer { display: flex; justify-content: flex-end; flex: 0 0 auto; margin-top: auto; padding: 16px 24px; }
.onboarding-company-selector { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; max-width: 100%; margin: 0; }
.onboarding-company-selector__control { position: relative; max-width: 100%; min-width: 0; }
.onboarding-company-selector__control::after { content: ""; position: absolute; top: 50%; right: 13px; width: 7px; height: 7px; border-right: 1.5px solid #757575; border-bottom: 1.5px solid #757575; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.onboarding-company-selector__select { display: block; appearance: none; width: 100%; max-width: 320px; min-height: 40px; padding: 8px 34px 8px 12px; border: 0; border-radius: 20px; background: transparent; color: #757575; font: inherit; font-size: 14px; text-overflow: ellipsis; cursor: pointer; }
.onboarding-company-selector__select option { background: #fff; color: #595466; }
.onboarding-company-selector__submit { flex: 0 0 auto; white-space: nowrap; }
.onboarding-company-selector__submit[hidden] { display: none; }
.onboarding-header .account-language { min-width: 0; padding: 0; }
.onboarding-header .account-language__options { flex-wrap: nowrap; }
.onboarding-exit { flex: 0 0 auto; margin: 0; }
.onboarding-exit__button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: 20px; background: transparent; color: #30203f; font: inherit; font-size: 14px; white-space: nowrap; cursor: pointer; }
.onboarding-exit__button img { flex: 0 0 auto; }
.onboarding-exit__button:hover, .onboarding-company-selector__select:hover { background: #f5f0ff; }
.onboarding-exit__button:focus-visible, .onboarding-company-selector__select:focus-visible { outline: 2px solid #8765d7; outline-offset: 2px; }
@media (max-width: 480px) {
    .onboarding-header { gap: 8px; padding: 10px 8px; }
    .onboarding-header__actions { gap: 8px; }
    .onboarding-header .account-language__options { gap: 2px; }
    .onboarding-header .account-language button { padding-inline: 8px; }
    .onboarding-exit__button { gap: 6px; padding-inline: 6px; font-size: 13px; }
    .onboarding-company-footer { padding: 12px; }
}