.login-wrapper{
    display:flex;
    flex-direction:column;
    align-items:center;   /* 🔥 THIS IS MAIN FIX */
    justify-content:center;
    gap:15px;             /* space between logo & card */
    width:100%;
    max-width:420px;
	margin-top:-50px !important;
}

.login-card{
    width:100%;
    background:#ffffff;
    padding:50px 28px;

    border-radius:20px;   /* 🔥 more rounded */
    
    box-shadow:0 15px 50px rgba(0,0,0,0.08);  /* 🔥 soft shadow */

    border:1px solid #f3f3f3; /* 🔥 light border */

    transition:0.3s ease;
}


.login-card:hover{
    transform:none;
    box-shadow:0 15px 50px rgba(0,0,0,0.08);
}

.login-logo{
    width:100px;
    display:block;
}

.login-top{
    margin-bottom:20px;
}


/* 🔥 FORM ALIGNMENT FIX */

/* Forgot password right */
.login-card .text-end{
    display:flex;
    justify-content:flex-end;
}

/* LOGIN BUTTON CENTER */
.login-card .btn-orange{
    display:block;
    
    min-width:120px;
	margin-top:10px;
    margin-bottom:15px;
}

/* OTP LINK CENTER */
.switch-login{
    text-align:center;
    margin-top:10px;
}

.login-card h5{
    margin-bottom:6px;
}

.login-card p{
    margin-bottom:10px;
}

/* TAB ALIGN */
.tabs{
    display:flex;
    justify-content:center;
    gap:12px;   /* 🔥 reduce gap */
    margin-bottom:20px;
    border-bottom:none;   /* ❌ remove line */
}

/* 🔥 BUTTON STYLE */
.tabs a{
    padding:8px 18px;
    border-radius:20px;   /* capsule */

    background:#f3f3f3;   /* light grey */
     color:#888;

    font-size:14px;
    font-weight:600;

    text-decoration:none;
    transition:0.2s;
}

/* 🔥 ACTIVE BUTTON */
.tabs a.active{
    background:linear-gradient(135deg,#ff7a1a,#f15a00);
    color:#fff !important;   /* 🔥 THIS IS MAIN FIX */
    box-shadow:0 4px 12px rgba(241,90,0,0.3);
}

/* 🔥 HOVER */
.tabs a:hover{
    background:#ffe6d5;
    color:#f15a00;
}

.btn-orange{
    width:100%;
    padding:12px;
    border-radius:30px;   /* 🔥 capsule */

    background:linear-gradient(135deg,#ff7a1a,#f15a00);
    border:none;
    color:#fff;

    font-weight:600;
    font-size:15px;

    transition:0.2s;
}

/* hover */
.btn-orange:hover{
    background:linear-gradient(135deg,#f15a00,#d84300);
    transform:translateY(-1px);
}


.login-page{
    min-height:100vh;
    overflow-x:hidden;
	background: linear-gradient(135deg, #ff7a1a, #f15a00);
}

.login-page .main-content{
    height:100%;
    display:flex;
    justify-content:center;   /* horizontal center */
    align-items:center;       /* vertical center */
}

.login-card .form-control{
    border-radius:12px;
    border:1px solid #e5e5e5;
    padding:12px 14px;
    font-size:14px;
    box-shadow:none;
    transition:0.2s;
	
}

/* 🔥 focus effect */
.login-card .form-control:focus{
    border-color:#f15a00;
    box-shadow:0 0 0 2px rgba(241,90,0,0.08);
}






.login-top {
    display: flex;
    justify-content: center;  /* 🔥 center fix */
    align-items: center;
}

/* 🔥 Description text */
.desc-text{
    font-size:15px;   /* 🔥 14–15 range (perfect for mobile) */
    color:#666;
}

.form-divider{
    width:85%;
    height:1px;                  /* 🔥 IMPORTANT */
    background:#f15a00;          /* 🔥 line visible color */
    border:none;                 /* 🔥 remove default hr */
    margin:12px auto 20px;       /* 🔥 spacing */
	
	color:#333;

}

.login-card .mb-3{
    margin-bottom:20px !important;
}

/* 🔥 LABEL SPACING */

.login-card label{
    display:block;
    margin-bottom:8px;
    font-size:14px;
	font-weight:600;
    color:#555;
}



.switch-login a{
    font-size:14px;
    font-weight:600;        /* 🔥 BOLD */
    color:#f15a00;
    text-decoration:none;
    transition:0.2s;
}

.switch-login a:hover{
    color:#d84300;
    text-decoration:underline;
}

.top-alert-content{
    display: flex;
    align-items: center;        /* 🔥 center vertical */
    justify-content: space-between;
    
    padding: 10px 14px;         /* 🔥 reduce height */
    border-radius: 10px;
    gap: 8px;

    min-height: auto;           /* 🔥 IMPORTANT */
}

/* 🔥 TEXT */
#globalAlertText{
    flex: 1;
    font-size: 14px;
    line-height: 1.4;           /* 🔥 fix spacing */
    margin: 0;                  /* 🔥 remove extra space */
}

/* 🔥 CLOSE BUTTON */
.top-alert-close{
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;

    display: flex;              /* 🔥 center fix */
    align-items: center;
    justify-content: center;

    padding: 0;                 /* 🔥 remove extra space */
    margin: 0;                  /* 🔥 remove shift */
}










/* 🔥 MOBILE NEAT FIX */
@media (max-width: 480px){

    .login-wrapper{
        width:100%;
        max-width:100%;
        padding:0 15px;   /* 🔥 side gap (edge avoid) */
        margin-top:0 !important;
    }

    .login-card{
        width:100%;
       
        border-radius:12px;
    }

    /* 🔥 LOGO */
    .login-logo{
        width:80px;
        margin-bottom:10px;
    }

    /* 🔥 FONT SIZE CONTROL */
    .login-card label,
    .login-card input,
    .login-card a{
        font-size:14px;
    }

    /* 🔥 INPUT BOX */
    .login-card input{
        padding:10px 12px;
        border-radius:8px;
		 margin-bottom:14px;
    }

    /* 🔥 TABS */
     .tabs{
        gap:30px;            /* 🔥 mobile gap little reduced but clean */
        padding-top:25px;    /* 🔥 top space fix (main issue solved) */
    }

    .tabs a{
        font-size:15px;
        padding-bottom:6px;
    }

    /* 🔥 FORGOT PASSWORD */
    .login-card .text-end a{
        font-size:14px;
    }


    /* 🔥 LOGIN BUTTON */
    .btn-orange{
        width:100%;              /* 🔥 full width */
        padding:12px;
        font-size:15px;
        border-radius:25px;
    }

    /* 🔥 OTP LINK */
    .switch-login{
        margin-top:8px;
        font-size:14px;
    }

    /* 🔥 BACK BUTTON */
    .back-home-btn{
        font-size:14px;
        padding:8px 14px;
    }

}