/* Full height page */
html, body { height: 100%; margin: 0; }

#existingCustomerLoginModal .modal-body {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	padding: 0;
}

#existingCustomerLoginModal .modal-body > div {
	padding: 15px;
}

#existingCustomerLoginModal .modal-body .modal-left-col {
	display: none;	
}

@media (min-width: 768px) {
	#existingCustomerLoginModal .modal-body .modal-left-col {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		width: 35%;
		background-image: url('/images/v5/search-background-1000px.jpg'); 
		background-position: left; 
		background-repeat: no-repeat; 
		background-size: cover; 
		min-height: 500px; 
		border-top-left-radius: 6px; 
		border-bottom-left-radius: 6px;
	}
}

@media (min-width: 992px) {
	#existingCustomerLoginModal .modal-body .modal-left-col {
		width: 50%;
	}
}

#existingCustomerLoginModal .modal-body .modal-right-col {
	flex-basis: 50%;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
}


#home-page-container .lmm-main-dark {
  	background-image: url('/images/v5/search-background-2000px.jpg'); 
}

.button-spinner {
	position: absolute;
	font-size: 12px;

	@media (max-width: 767px) {
		right: 27px;
		top: 12px;
	}

	@media (min-width: 768px) {
		bottom: 7px;
		text-align: center;
	}
}

.loginLogo {
	height: 54px; 
	width: 80px;
	@media (min-width: 768px) {
		height: 108px; 
		width: 160px;
	}
}

.login-features-list {
	background-color: rgba(255, 255, 255, 0.8); 
	padding:30px; 
	border-radius: 4px;
}


.v-center {
    /* Desktop & normal cases → classic 100vh flex centering (your original layout) */
	min-height: -webkit-fill-available; /* iOS < 15 hack */
	height: 100vh;      /* works everywhere else */
	height: 100svh;     /* great fallback, works on iOS 15+ and recent Android */
	height: 100dvh;     /* ideal on modern phones */
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.sign-in-panel-max-width {
	@media (min-width: 768px) {
		max-width: 800px;
		margin: 0 auto 0 auto;
	}
}

.login-hr {
	margin: 12px 0 0 0;
}

.login_btn {
    border: 1px solid #ccc;
    padding: 6px;
    border-radius: 8px;
    cursor: pointer;
}

/* Mobile only – spacing between the three social buttons */
.social-row .col-xs-12 {
    margin-bottom: 15px;
}

/* Desktop */
@media (min-width: 768px) {
    .social-row .col-xs-12 {
        margin-bottom: 0;
    }

    .login_btn {
        border: 0;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0.8em;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-weight: 700;
        transition: background .22s, border .22s;
        color: #000;
    }
}

.login_btn_content {
	display: flex;
	align-items: center;
	justify-content: center;

	@media (min-width: 768px) {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		user-select: none;
		width: 100%;
		padding: 1rem;
	}
}

.social-icon {
	width: 16px;
	height: 16px;
	float: left;
	@media (min-width: 768px) {
		width: 52px;
		height: 52px;
		flex-shrink: 0;
	}
}

.login_btn_red {
	@media (min-width: 768px) {
		border: solid 2px rgba(219, 68, 55, .25);
		background: rgba(219, 68, 55, .1);
	}
}

.login_btn_red:hover {
	@media (min-width: 768px) {
		background: #ea433533;
		border: solid 2px rgba(219, 68, 55, .8);
	}
}

.login_btn_blue {
	@media (min-width: 768px) {
		border: solid 2px rgba(66, 103, 178, .25) !important;
		background: rgba(66, 103, 178, .1) !important;
	}
}
.login_btn_blue:hover {
	@media (min-width: 768px) {
		background: #4267b233 !important;
		border: solid 2px rgba(66, 103, 178, .8) !important;
	}
}

.login_btn_white {
	@media (min-width: 768px) {
		border: solid 2px rgba(0, 0, 0, .125);
	}
}
.login_btn_white:hover {
	@media (min-width: 768px) {
		border: solid 2px rgba(0, 0, 0, .8);
	}
}

.panel { overflow: hidden; }

.errors-list ul {
	margin-bottom: 0 !important;
}

.role-btn {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    border-radius: 8px;
    border: solid 2px rgba(0, 0, 0, .15);
    background: rgba(255, 255, 255, .9);
    transition: all .22s ease;
    cursor: pointer;
    padding: 1rem;
    text-align: center;
    /*color: #c06014;*/
}

.role-btn:hover {
    background: #f8f9fa !important;
    border: solid 2px rgba(0, 0, 0, .4) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,.1);
}

.role-btn-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    user-select: none;
    width: 100%;
}

.role-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    flex-shrink: 0;
}