* {
    --bg-color: #FFFFFF;
    --text-color: #594F67;
    --heading-color: #18142B;
    --subheading-color: #594F67;
    --separator-color: #D9D9D9;
    --list-bullet-color: #666666;
}

/* --- LTR DEFAULTS (Ensure these are the base styles) --- */
body, .card-body, p, label, input, button, section, div {
    text-align: left; /* Default alignment for LTR */
}

.form-check {
    padding-left: 1.5em; /* Default Bootstrap padding */
    padding-right: 0;
    text-align: left;
}

.form-check-input {
    float: left;
    margin-left: -1.5em; /* Default Bootstrap positioning */
    margin-right: 0;
}

.languageSlect {
    text-align: right; /* Language selector itself might float right */
}

.LoginBtnList a {
    text-align: right; /* Forgot password link might align right */
}


/* --- RTL OVERRIDES (Using the standard dir attribute) --- */
[dir="rtl"] body,
[dir="rtl"] .card-body,
[dir="rtl"] p,
[dir="rtl"] label, /* Apply to labels */
[dir="rtl"] h4, /* Apply to headings */
[dir="rtl"] section,
[dir="rtl"] div:not(.input-group) { /* Apply broadly, exclude input-group which needs LTR for button order */
    text-align: right;
}

/* Ensure input text aligns right in RTL */
[dir="rtl"] input.form-control,
[dir="rtl"] textarea.form-control {
    text-align: right;
}

/* RTL Icon Positioning */
[dir="rtl"] .login-input-icon {
    left: auto; /* Reset left */
    right: 0.75rem; /* Position on the right */
}

/* RTL Input/Label Padding */
[dir="rtl"] .form-floating > .form-control {
    padding-left: 0.75rem; /* Reset left padding */
    padding-right: 2.8rem; /* Add right padding for icon */
}

[dir="rtl"] .form-floating > label {
    padding-left: 0.75rem; /* Reset left padding */
    padding-right: 2.8rem; /* Add right padding for icon */
    /* Bootstrap should handle label translation in RTL, check if override needed */
    /* transform-origin: right center; */ /* Might be needed */
}

/* RTL Input Group (Password) - Keep group LTR for button order, but float input right */
[dir="rtl"] .input-group {
    direction: ltr; /* Keep button order LTR */
}

    [dir="rtl"] .input-group .form-floating {
        direction: rtl; /* Float label content RTL */
    }
    /* Adjust button borders for RTL */
    [dir="rtl"] .input-group .password-toggle-btn {
        border-right: 0;
        border-left: 1px solid #dee2e6; /* Add border to the left */
        border-radius: 0.375rem 0 0 0.375rem; /* Adjust border radius */
    }

    [dir="rtl"] .input-group > .form-floating:not(:first-child) { /* Adjust radius of the input part */
        border-radius: 0 0.375rem 0.375rem 0;
    }


/* RTL Checkbox */
[dir="rtl"] .form-check {
    padding-left: 0; /* Reset LTR padding */
    padding-right: 1.5em; /* Add RTL padding */
    text-align: right;
}

[dir="rtl"] .form-check-input {
    float: right;
    margin-left: 0; /* Reset LTR margin */
    margin-right: -1.5em; /* RTL positioning */
}

/* RTL Language Selector / Forgot Password Link */
[dir="rtl"] .languageSlect {
    text-align: left; /* Align language selector left in RTL */
}

[dir="rtl"] .LoginBtnList a {
    text-align: left; /* Align forgot password left in RTL */
}

/* --- END RTL OVERRIDES --- */


.password_show_hide {
    position: absolute;
    top: 50%; /* Position top edge at the vertical middle of the parent */
    transform: translateY(-50%); /* Shift the button up by half its own height */
    right: 10px; /* LTR position - adjust spacing as needed */
    background: none;
    border: none;
    padding: 0.25rem; /* Add some padding to make clicking easier */
    line-height: 1; /* Prevent extra line height */
    z-index: 3; /* Keep above input */
    cursor: pointer;
    display: flex; /* Use flex to center icon if button has padding */
    align-items: center;
    justify-content: center;
}

    .password_show_hide img {
        width: 18px;
        height: auto;
        display: block; /* Prevents extra space below image */
    }

[dir="rtl"] .password_show_hide {
    right: auto; /* Reset right */
    left: 10px; /* Position from the left in RTL - adjust spacing */
}
.yaslogoclass {
    height: 100%;
    max-height: 82px;
    object-fit: contain;
    padding: 10px 0;
}