/* WPBurdy-branding voor SnappyMail. Ingevoegd via nginx sub_filter op </head> (zie vhost).
   Look = hero van wpburdy.com: landschap-achtergrond, logo linksboven, login links, Burdy rechts.
   Kleuren uit de Elementor-kit van wpburdy.com: teal #006778, lucht #9DE3EB, zand #F8D38C, donker #1E3744. */

@font-face { font-family: "Roboto Slab"; font-weight: 400; font-display: swap; src: url(/wpburdy/roboto-slab-400.woff2) format("woff2"); }
@font-face { font-family: "Roboto Slab"; font-weight: 700; font-display: swap; src: url(/wpburdy/roboto-slab-700.woff2) format("woff2"); }

/* ---------- laadscherm + loginpagina: landschap als achtergrond ---------- */
#rl-app:has(#rl-loading:not([hidden])),
#rl-app:has(.LoginView) {
	background: #9DE3EB url(/wpburdy/bg-home.jpg) center bottom / cover no-repeat fixed;
	overflow: hidden;
}

/* drijvende wolkjes (twee zachte witte vlekken die langzaam van links naar rechts trekken) */
#rl-app:has(.LoginView)::before,
#rl-app:has(.LoginView)::after {
	content: "";
	position: fixed;
	left: -30vw;
	top: 12vh;
	width: 26vw;
	height: 9vw;
	background: rgba(255, 255, 255, 0.55);
	border-radius: 50%;
	filter: blur(18px);
	pointer-events: none;
	z-index: 0;
	animation: wpb-cloud 80s linear infinite;
}
#rl-app:has(.LoginView)::after {
	top: 30vh;
	width: 17vw;
	height: 6vw;
	opacity: 0.7;
	animation-duration: 110s;
	animation-delay: -45s;
}
@keyframes wpb-cloud {
	from { transform: translateX(0); }
	to   { transform: translateX(165vw); }
}

/* laadscherm: logo in plaats van tekst */
#rl-loading-desc {
	font-size: 0;
	height: 94px;
	background: url(/wpburdy/logo.png) center / contain no-repeat;
}

/* ---------- loginpagina ---------- */
#rl-app .LoginView {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 0 8vw;
	box-sizing: border-box;
	position: relative;
	z-index: 1;
}

/* logo linksboven (de .descWrapper toont normaal de laadtekst) */
#rl-app .LoginView .descWrapper {
	position: fixed;
	top: 28px;
	left: 8vw;
	width: 200px;
	height: 63px;
	margin: 0;
	font-size: 0;
	background: url(/wpburdy/logo.png) left center / contain no-repeat;
	text-shadow: none;
}

/* Burdy rechts, op de plek van de mascotte op wpburdy.com */
#rl-app .LoginView::after {
	content: "";
	position: fixed;
	right: 8vw;
	top: 50%;
	width: 450px;
	height: 261px;
	max-width: 40vw;
	transform: translateY(-65%);
	background: url(/wpburdy/meet-burdy.gif) center / contain no-repeat;
	pointer-events: none;
}

/* het loginblok: witte kaart met slab-kop, zoals de hero-tekst */
#rl-app .LoginView form {
	width: 420px;
	max-width: 90vw;
	padding: 36px 40px 24px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 10px 40px rgba(30, 55, 68, 0.18);
	color: #1E3744;
}
#rl-app .LoginView form::before {
	content: "Log in op je mailbox";
	display: block;
	font-family: "Roboto Slab", Georgia, serif;
	font-weight: 700;
	font-size: 1.9em;
	line-height: 1.2;
	color: #1E3744;
	margin-bottom: 22px;
}
#rl-app .LoginView form * { color: #1E3744; }
#rl-app .LoginView input {
	border: 1px solid #b9dde3;
	border-radius: 6px;
	background: #fff;
}
#rl-app .LoginView input:focus,
#rl-app .LoginView input:hover { border-color: #006778; }
#rl-app .LoginView .buttonLogin,
#rl-app .LoginView .btn {
	background: #006778;
	border: 1px solid #006778;
	border-radius: 6px;
	color: #fff !important;
	text-transform: none;
	font-size: 100%;
}
#rl-app .LoginView .buttonLogin:hover,
#rl-app .LoginView .btn:hover { background: #00596a; border-color: #00596a; }

/* smal scherm: geen mascotte, login gecentreerd */
@media (max-width: 900px) {
	#rl-app .LoginView::after { display: none; }
	#rl-app .LoginView { align-items: center; padding: 90px 16px 16px; }
	#rl-app .LoginView .descWrapper { left: 16px; }
}