/* 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 {
    inset-inline-start: 14px;
    inset-inline-end: auto;
}

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

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

/* Keep the card usable on narrow screens in RTL */
.fino-auth-form-wrap {
    max-width: 480px;
    margin: 0 auto;
}

@media (max-width: 767px) {
    .fino-auth-form-main {
        padding: 28px 28px 20px;
        justify-content: center;
    }

    .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;
    }
}

@media (max-width: 400px) {
    .fino-auth-form-main {
        padding-inline: 20px;
    }
}

@media (max-height: 700px) and (min-width: 768px) {
    .fino-auth-form-main {
        align-items: flex-start;
        padding-top: 52px;
    }
}