body#module-bsforcelogin-privatelogin {

    margin: 0;

    padding: 0;

    min-height: 100%;    

    background: url(/modules/bsforcelogin/views/image/background.jpg)

                center / cover no-repeat fixed;

	max-width:100%;			

}



#cl-vig-login {height: 100dvh;

    display: flex;	

    flex-direction: column;

    align-items: center;

    justify-content: center;

	max-width:100%;

	}

	

.cl-login-box {

    max-width: 500px;

    border-radius: 10px;

    text-align: center;

    color: #fff;

    background: #061e2a;

    box-shadow: 0 20px 60px rgba(0,0,0,0.5);

}



.cl-login-container {padding:50px 80px 5px 80px;}

.cl-login-logo { text-align:center; margin-bottom:25px;}

.cl-login-logo img { height:35px; width:100%;}





.cl-login-box h2 {

	font-size: 25px;
	line-height:25px;

	font-weight: 600;

	margin-bottom: 10px;

	text-transform: initial;

}



.cl-login-box p {

    font-size: 14px;

    opacity: 0.8;

    line-height: 1.6;

}





/* ===== Inputs ===== */

.cl-login-box input[type="email"],

.cl-login-box input[type="password"] {

    width: 100%;

    padding: 14px;

    margin-top: 15px;

    border-radius: 8px;

    border: 1px solid rgba(255,255,255,0.3);

    background: transparent;

    color: #fff;

    font-size: 14px;

}



.cl-login-box input::placeholder {

    color: rgba(255,255,255,0.6);

}



.cl-login-box .forgot-link {

    display: block;

    margin: 12px 0 20px;

    font-size: 13px;

    color: #FFFFFF;

    text-decoration: none;

}



.cl-login-box .forgot-link:hover {

    color: #ff2f8f;

}



.cl-login-box button {

    width: 100%;

    padding: 14px;

    border-radius: 8px;

    border: none;

    font-weight: 600;

    font-size: 15px;

    cursor: pointer;

    transition: 0.3s;



    background: #ff2f8f;

    color: #fff;

}



.cl-login-box button:hover {

    background: #e0217b;

}





/* ===== Request B2B Link ===== */

.cl-login-box .request-link {

    display: block;

    margin-top: 20px;

    font-weight: 600;

    color: #fff;

    text-decoration: none;

}



.cl-login-box .request-link:hover , .cl-login-footer a:hover {

    color: #ff2f8f;

}





.cl-login-footer {

    margin-top: 35px;

    font-size: 12px;

    opacity: 0.7;

}	



.cl-login-footer a { color:#FFFFFF;}	

.mr-5 { margin-right:5px;}

.ml-5 { margin-left:5px;}



.cl-login-footer-container {padding: 8px 50px;border-top:1px solid #ff2f8f;margin-top: 10px;}

.company-info { color:#ff2f8f;display:flex;justify-content: space-between;}



.lang-dropdown {

	position: relative;

	width: 100px;

	font-family: 'Poppins', sans-serif;

	float: right;

	margin: 10px;

	z-index:999999;

}



.lang-selected {

	background: #0c2a38;

	color: #fff;

	padding: 6px 10px;

	border-radius: 5px;

	border: 1px solid rgba(255, 255, 255, 0.4);

	cursor: pointer;

	display: flex;

	justify-content: space-between;

	align-items: center;

}



.lang-menu {

    position: absolute;

    top: 110%;

    left: 0;

    width: 100%;

    background: #0c2a38;

    border-radius: 10px;

    border: 1px solid rgba(255,255,255,0.2);

    list-style: none;

    padding: 10px 0;

    margin: 0;

    display: none;

    z-index: 999;

}



.lang-menu li {

    padding: 0;

}



.lang-menu li a {

    display: block;

    padding: 5px 16px;

    color: #fff;

    text-decoration: none;

    transition: 0.2s;

	text-align:left;

}



.lang-menu li a:hover {

    background: rgba(255,255,255,0.05);

}



.lang-menu li.active a {

    color: #ff2f8f;

    font-weight: 600;

}



.cl-login-container {

    position: relative;

}



/* ===== FLIP FIXED VERSION (NO HEIGHT BREAK) ===== */



.cl-flip-card {

    position: relative;

    perspective: 1200px;

}



.cl-flip-inner {

    position: relative;

    width: 100%;

    transition: transform 0.7s ease;

    transform-style: preserve-3d;

}



/* Make both sides take space */

.cl-flip-front,

.cl-flip-back {

    width: 100%;

    backface-visibility: hidden;

}



/* Stack back on top */

.cl-flip-back {

    position: absolute;

    top: 0;

    left: 0;

    transform: rotateY(180deg);

}



/* Flip */

.cl-flip-card.flip .cl-flip-inner {

    transform: rotateY(180deg);

}



/* Optional spacing */

#login-error,

#forgot-error {

    margin-top: 15px;

    color: #ff4d6d;

}



/* Back link */

.back-to-login {

    display: inline-block;

    margin-top: 10px;

    color: #ff2f8f;

    cursor: pointer;

}



.back-to-login:hover {

    color: #FFFFFF;

}



#forgot-btn {margin-top:15px;}





#TermsBox , #SignUpBox , #privacyBoxVigorise { background-color:#FFFFFF;}

#TermsBox .customPopup_content , #SignUpBox .customPopup_content , #privacyBoxVigorise .customPopup_content {width: 100%; overflow:hidden; padding:0; max-height:100%;height: 100dvh; margin-top:0;}

#TermsBox .customPopup_content iframe , #SignUpBox .customPopup_content iframe , #privacyBoxVigorise .customPopup_content iframe { width:100%; height:92dvh;}

#TermsBox.customPopup.show , #SignUpBox.customPopup.show , #privacyBoxVigorise.customPopup.show {z-index: 999999999;width: 95%;

    height: 95%;

    margin: auto;

    border-radius: 10px;

}

#TermsBox .customPopupClose:before , #SignUpBox .customPopupClose:before , #privacyBoxVigorise .customPopupClose:before {width:18px;height:18px;}





@media (max-width: 576px) {

.cl-login-container { padding:50px 20px 5px 20px;}

.company-info { display:block;}

.company-info span {

  margin-right:5px;

}



.company-info span:last-child {

  margin-right: 0;

}



#cl-vig-login {justify-content: flex-start; margin-top:10px;}

body#module-bsforcelogin-privatelogin { padding:10px;}

}