/* 1. Auth section - reduce side padding */
.main-login-container{
    padding: calc(130px + 5%) 45px 30px !important;
}
#content_wrapper{
    margin: 0px 15px !important;
}

body{
    background: #fff !important;
}
.public-switch-language-btn .arrow-icon {
    color: #CE1126 !important;
}
.welcome-section-wrapper:before{
    background: rgba(0,0,0,0) !important;
}
.bh-btn-lang{
    position: absolute !important;
    top: 15px !important;
    z-index: 10 !important;
}

/* 3. Login button color #113073 */
.login-actions .btn-login {
    background: var(--primary-color) !important;
    border-radius: 14px !important;
    min-height: 50px !important;
    position: relative !important;
}

/* 4. Input icons for username and password */
#login_wrapper :is(input[type=text], input[type=password]){
    min-height: 50px !important;
    border-radius: 14px !important;
    border-color: #dfdfdf !important;
    border: 1px solid #dfdfdf !important;
    transition: border-color 0.2s ease !important;
}
#UserUsername{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: 20px !important;
    background-position: 15px center !important;
    padding-left: 45px !important;
}
#UserPassword{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: 20px !important;
    background-position: 15px center !important;
    padding-left: 45px !important;
}
/* 4. RTL support for input icons */
.is-rtl #UserUsername,
.is-rtl #UserPassword{
    background-position: calc(100% - 15px) center !important;
    padding-left: 15px !important;
    padding-right: 45px !important;
}

/* 5. Active/focus border on inputs #113073 */
#login_wrapper input[type=text]:focus,
#login_wrapper input[type=password]:focus{
    border: 1px solid #113073 !important;
    box-shadow: 0 0 0 1px rgba(17,48,115,0.15) !important;
    outline: none !important;
}

/* 6. Forgot password - more visible */
.btn-forgot-container {
    padding: 10px 0 10px !important;
}
.btn-forgot{
    font-weight: 600 !important;
    color: #113073 !important;
    font-size: 14px !important;
}


/* 8. Hero text - away from edges */
.bh-hero-section{
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
}
.bh-hero-section .welcome-section-wrapper{
    position: relative !important;
    overflow: hidden !important;
}
.bh-hero-text-overlay{
    position: absolute !important;
    bottom: 10% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 2 !important;
    padding: 0 60px !important;
    text-align: left !important;
}
.bh-hero-text-overlay h2{
    font-size: 4em !important;
    font-weight: bold !important;
    color: #fff !important;
    margin: 0 0 15px !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    line-height: 1.2 !important;
}
.bh-hero-text-overlay .bh-hero-line{
    width: 110px !important;
    height: 4px !important;
    background: #CE1126 !important;
    border: none !important;
    margin: 0 0 15px !important;
}
.bh-hero-text-overlay p{
    font-size: 1.8em !important;
    color: rgba(255,255,255,0.9) !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3) !important;
}
.is-rtl .bh-hero-text-overlay{
    text-align: right !important;
}

/* 9. Logos 125px and move to top-left */
.bh-login-logos{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 15px !important;
    height: auto !important;
    margin-top: 10px !important;
    margin-bottom: 25px !important;
}
.bh-login-logos img{
    height: 110px !important;
    width: auto !important;
}
.is-rtl .bh-login-logos{
    justify-content: flex-end !important;
}

.bh-welcome-heading{
    font-size: 32px !important;
    font-weight: 500 !important;
    color: var(--primary-color) !important;
    margin: 0 0 4px !important;
    margin-top: 30px !important;
}
.row{
    margin: 0px !important;
}

.login-with-links-wrapper{
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 20px !important;
}
#signInButtonLive.btn-microsoft img {
    width: 50px !important;
    height: 50px !important;
    margin: 0px !important;
    padding: 0px !important;
}
.bh-welcome-subtitle{
    color: #8f8f8f !important;
    font-size: 16px !important;
    margin: 0 0 20px !important;
    margin-top: 40px !important;
}
.login-with-links-wrapper .login-with-social-btn {
    border: 1px solid #dfdfdf !important;
    border-radius: 14px !important;
    height: 50px !important;
    color: var(--primary-color) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0px 10px !important;
}
.login-with-links-wrapper .login-with-social-btn :is(i, img) {
    position: relative !important;
    transform: translateY(0) !important;
    top: 0px !important;
    width: auto !important;
    height: unset !important;
    margin: 0px !important;
    padding: 0px !important;
}
#ekeySignInButton img{
    width: 24px !important;
    height: 24px !important;
    max-height: 24px !important;
    object-fit: contain !important;
    margin: 0px !important;
    padding: 0px !important;
}
#signInButton.btn-google img,
.login-with-links-wrapper .btn-google img {
    width: 22px !important;
    height: 22px !important;
    max-height: 22px !important;
}
#ekeySignInButton img{
    width: 28px !important;
    height: 28px !important;
}
.login-with-links-wrapper .login-with-social-btn,
.login-with-links-wrapper .login-with-social-btn:hover,
.login-with-links-wrapper .login-with-social-btn:focus,
.login-with-links-wrapper .login-with-social-btn label,
.login-with-links-wrapper .login-with-social-btn:hover label {
    text-decoration: none !important;
}
.login-with-links-wrapper .login-with-social-btn label {
    font-weight: 600 !important;
}
.icon-chevron-right{
    color: var(--primary-color) !important;
}
.bh-security-footer{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    color: #888 !important;
    margin-top: 10px !important;
}
.btn-login .icon-chevron-right{
    margin-left: 8px !important;
    position: absolute !important;
    right: 10px !important;
    color: #fff !important;
    font-size: 22px !important;
}
.login-with-links-wrapper a:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.3s ease !important;
}
@media screen and (max-width: 500px) {
    .main-login-container{
        padding: calc(90px + 5%) 9% 30px !important;
    }
    .bh-login-logos {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        position: relative !important;
    }

}