/* Accountpopup: gedeelde CTA's, typografie en validatie blijven leidend. */
.mainSite .navbar #offcanvasNavbar { overflow: visible; background: transparent; }
.mainSite .navbar #offcanvasNavbar > .offcanvas-inner {
	position: relative;
	z-index: 1;
	transition: transform .5s cubic-bezier(.22,.8,.22,1);
}
.mainSite .navbar .account-popup {
	position: absolute;
	top: 50%;
	right: calc(100% + 1.5rem);
	z-index: 2;
	width: min(34rem, calc(100vw - var(--bs-offcanvas-width, 400px) - 3rem));
	max-height: calc(100dvh - 3rem);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(255,255,255,.35) transparent;
	padding: 2.75rem 2rem 2rem;
	border: 1px solid rgba(255,255,255,.18);
	border-radius: var(--glass-radius);
	background: var(--glass-bg);
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur));
	box-shadow: var(--glass-shadow);
	color: var(--color-white);
	text-shadow: var(--glass-textShadow);
	visibility: hidden;
	opacity: 0;
	transform: translate(1.25rem,-48%) scale(.97);
	transition: opacity .3s, transform .45s cubic-bezier(.22,.8,.22,1), visibility .3s;
}
.mainSite .navbar .account-popup.active {
	visibility: visible;
	opacity: 1;
	transform: translate(0,-50%) scale(1);
}
.mainSite .navbar .account-popup > .logo {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto 2rem;
}
.mainSite .navbar .account-popup .btn-close {
	position: absolute;
	top: .35rem;
	right: .35rem;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	color: inherit;
	opacity: .85;
	box-shadow: none;
}
.mainSite .navbar .account-popup .btn-close::before {
	content: "\f00d";
	font-family: "Font Awesome 7 Sharp";
	font-weight: 100;
	font-size: 1.25rem;
}
.mainSite .navbar .account-popup .btn-close:focus-visible {
	outline: none;
	border-radius: .5rem;
	background: rgba(255,255,255,.1);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
}
.mainSite .account-popup .formHolder h3 { margin-bottom: 1rem; }
.mainSite .account-popup .account-back { display: inline-block; margin-bottom: 1.25rem; }
.mainSite .account-popup .account-link { color: inherit; text-decoration: underline; }
.mainSite .account-popup .account-link,
.mainSite .account-popup .account-choice { transition: color .18s; }
.mainSite .account-popup .account-link:hover,
.mainSite .account-popup .account-link:focus-visible { color: var(--color-ter); }
.mainSite .account-popup .account-link:focus-visible {
	outline: none;
	background: rgba(255,255,255,.07);
}
.mainSite .account-popup .account-choices { margin-top: 1.5rem; }
.mainSite .account-popup .account-choice {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	padding: 1.25rem 0;
	border-bottom: 1px solid rgba(255,255,255,.35);
	color: inherit;
	text-decoration: none;
}
.mainSite .account-popup .account-choice:first-child { border-top: 1px solid rgba(255,255,255,.35); }
.mainSite .account-popup .account-choice-title { display: block; }
.mainSite .account-popup .account-choice small { display: block; margin-top: .35rem; }
.mainSite .account-popup .account-choice:focus-visible {
	outline: none;
	background: rgba(255,255,255,.07);
	border-bottom-color: var(--color-ter);
}
.mainSite .account-popup .account-choice-arrow {
	position: relative;
	display: inline-block;
	flex: 0 0 1.75rem;
	width: 1.75rem;
	height: 1.5rem;
	overflow: hidden;
}
.mainSite .account-popup .account-choice-arrow i {
	position: absolute;
	top: .25rem;
	left: .15rem;
	transition: transform .34s cubic-bezier(.22,.8,.22,1);
}
.mainSite .account-popup .account-choice-arrow i + i { left: -1.85rem; }
.mainSite .account-popup .account-choice-external .account-choice-arrow { transform: rotate(-45deg); }
.mainSite .account-popup .account-choice:hover .account-choice-arrow,
.mainSite .account-popup .account-choice:focus-visible .account-choice-arrow { color: var(--color-ter); }
.mainSite .account-popup .account-choice:hover .account-choice-arrow i,
.mainSite .account-popup .account-choice:focus-visible .account-choice-arrow i { transform: translateX(2rem); }
.mainSite .account-popup .form-control {
	padding: .75rem 1rem;
	border: 1px solid rgba(255,255,255,.22);
	border-radius: 1rem;
	background: rgba(255,255,255,.14);
	color: var(--color-white);
	transition: background-color .18s, border-color .18s;
}
.mainSite .account-popup .form-control::placeholder { color: rgba(255,255,255,.85); opacity: 1; }
.mainSite .account-popup .form-control:focus {
	outline: none;
	box-shadow: none;
	background: rgba(255,255,255,.23);
}
.mainSite .account-popup .form-control:not(.is-invalid):focus { border-color: rgba(255,255,255,.55); }
.mainSite .account-popup .form-floating > .form-control {
	height: calc(3.5rem + calc(var(--bs-border-width) * 2));
	min-height: calc(3.5rem + calc(var(--bs-border-width) * 2));
	padding: 1rem .75rem;
}
.mainSite .account-popup .form-floating > label {
	padding: 1rem .75rem;
	color: var(--color-white);
}
.mainSite .account-popup .form-floating > .form-control::placeholder { color: transparent; }
.mainSite .account-popup .form-floating > .form-control:focus,
.mainSite .account-popup .form-floating > .form-control:not(:placeholder-shown) {
	padding-top: 1.625rem;
	padding-bottom: .625rem;
}
.mainSite .account-popup .form-floating > .form-control:focus ~ label,
.mainSite .account-popup .form-floating > .form-control:not(:placeholder-shown) ~ label { color: rgba(255,255,255,.8); }
.mainSite .account-popup .form-control.is-invalid { border-color: var(--bs-form-invalid-border-color, #dc3545); }
.mainSite .account-popup .buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.5rem;
}
.mainSite .account-popup .buttons > .cta { margin-left: auto !important; }
.mainSite .account-popup .cta:focus-visible {
	outline: none;
	filter: brightness(1.08);
	box-shadow: 0 0 0 .15rem rgba(var(--color-ter-rgb),.18);
}
.mainSite .account-popup .account-register-link { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.2); }
.mainSite .account-popup .invalid-feedback { line-height: 1.4; }
.mainSite .navbar .loginMenu .accountPopupArrow {
	display: inline-block;
	width: 1em;
	overflow: hidden;
	white-space: nowrap;
	vertical-align: middle;
	animation: accountPopupArrowSpace .26s cubic-bezier(.22,.8,.22,1) both;
}
.mainSite .navbar .loginMenu .accountPopupArrow::before {
	display: block;
	animation: accountPopupArrowEnter .28s .23s cubic-bezier(.22,.8,.22,1) both;
}
.mainSite .navbar .loginMenu .cta .accountPopupArrow {
	position: relative;
	flex-shrink: 0;
	height: 0;
	line-height: 0;
	overflow: visible;
}
.mainSite .navbar .loginMenu .cta .accountPopupArrow::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 1em;
	line-height: 1;
	transform: translateY(-50%);
	animation-name: accountPopupCtaArrowEnter;
}
.mainSite .navbar .loginMenu .type-register > .cta {
	display: inline-flex;
	align-items: center;
	padding-block: .85rem;
}
@keyframes accountPopupCtaArrowEnter { from { opacity: 0; transform: translate(.6em,-50%); } to { opacity: 1; transform: translate(0,-50%); } }
@keyframes accountPopupArrowSpace { from { width: 0; margin-right: 0; } to { width: 1em; margin-right: 1rem; } }
@keyframes accountPopupArrowEnter { from { opacity: 0; transform: translateX(.6em); } to { opacity: 1; transform: none; } }
@media(max-width:899.98px) {
	.mainSite .navbar .account-popup {
		position: fixed;
		top: 5.5rem;
		left: 1rem;
		right: 1rem;
		width: auto;
		max-height: calc(100dvh - 6.5rem);
		padding: 2.75rem 1.5rem 1.5rem;
		transform: translateY(1rem) scale(.98);
	}
	.mainSite .navbar .account-popup.active { transform: none; transition-delay: .1s; }
	.mainSite .navbar #offcanvasNavbar.account-popup-open > .offcanvas-inner { transform: translateX(100%); pointer-events: none; }
	.mainSite:has(#offcanvasNavbar.account-popup-open.show) .menuBtn {
		opacity: 1;
		pointer-events: auto;
		position: relative;
		z-index: 1000001;
	}
}
@media(prefers-reduced-motion:reduce) {
	.mainSite .navbar .account-popup,
	.mainSite .navbar #offcanvasNavbar > .offcanvas-inner,
	.mainSite .navbar .loginMenu .accountPopupArrow,
	.mainSite .navbar .loginMenu .accountPopupArrow::before,
	.mainSite .account-popup .account-choice-arrow i { animation: none; transition: none; }
}