/* Shared look for the signed-out pages (login, register): a Bootstrap card over the background
   photo, with Bootstrap's primary color switched to AVITAS blue. */

/* Background on a fixed layer sized by 100vw/100vh, which include the scrollbar, so the image
   does not rescale when a scrollbar appears or disappears. */
body::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: -1;
	background-image: url(/images/backgroundEcommerce.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

body {
	background: transparent;
}

.auth-card {
	--bs-link-color-rgb: 3, 99, 173;
	--bs-link-hover-color-rgb: 2, 74, 130;
	--bs-border-color: rgb(3, 99, 173);
}

.auth-card .btn-primary {
	--bs-btn-bg: rgb(3, 99, 173);
	--bs-btn-border-color: rgb(3, 99, 173);
	--bs-btn-hover-bg: rgb(2, 80, 140);
	--bs-btn-hover-border-color: rgb(2, 80, 140);
	--bs-btn-active-bg: rgb(2, 74, 130);
	--bs-btn-active-border-color: rgb(2, 74, 130);
	--bs-btn-disabled-bg: rgb(3, 99, 173);
	--bs-btn-disabled-border-color: rgb(3, 99, 173);
}

.auth-card .form-control,
.auth-card .form-check-input {
	--bs-border-color: var(--bs-gray-400);
}

.auth-card .form-control:focus,
.auth-card .form-check-input:focus {
	border-color: rgb(3, 99, 173);
	box-shadow: 0 0 0 .25rem rgba(3, 99, 173, .25);
}

/* Chrome draws autofilled values in its own smaller font until the first interaction; pin the
   size so a saved username doesn't grow when the field gets focus. */
.auth-card .form-control:-webkit-autofill::first-line {
	font-family: var(--bs-body-font-family);
	font-size: 1rem;
}

.auth-card .form-check-input:checked {
	background-color: rgb(3, 99, 173);
	border-color: rgb(3, 99, 173);
}

.auth-logo {
	max-width: 250px;
}