/* RTL overrides for auth pages */
html {
    direction: rtl;
}

/* In RTL, flexbox row flows right-to-left automatically,
   so the brand panel (first child) appears on the right and
   the form panel appears on the left — which is correct for RTL. */

.fino-auth-form-side .form-control,
.fino-login-field .form-control {
    text-align: right;
}

.fino-auth-form-side .form-check {
    padding-right: 1.5em;
    padding-left: 0;
}

.fino-auth-form-side .form-check .form-check-input {
    margin-right: -1.5em;
    margin-left: 0;
    float: right;
}

/* Ensure logical-property overrides work across browsers in RTL */
.fino-login-field .form-control {
    padding-inline-start: 46px;
    padding-inline-end: 46px;
}

.fino-field-icon {
    left: auto;
    inset-inline-start: 14px;
    inset-inline-end: auto;
}

.fino-eye-btn {
    right: auto;
    inset-inline-end: 10px;
    inset-inline-start: auto;
}

.fino-input {
    padding-inline-start: 46px;
    padding-inline-end: 44px;
}

/* Keep weekly series chronological (Mon → Sun). Do not mirror with dir=rtl. */
.fino-brand-chart {
    direction: ltr;
    unicode-bidi: isolate;
}

.fino-password-toggle {
    inset-inline-end: 12px;
    inset-inline-start: auto;
}

.fino-login-mode-toggle {
    inset-inline-end: 16px;
    inset-inline-start: auto;
}

.fino-auth-form-wrap {
    max-width: var(--f-form-max, 400px);
    margin: 0 auto;
}

@media (max-width: 767px) {
    .fino-auth-form-wrap {
        max-width: 100%;
    }

    .fino-auth-form-side .custom-login-form .form-group.mb-4 .d-flex {
        align-items: flex-start !important;
        flex-direction: column;
        gap: 12px;
    }
}