/* ==========================================================================
   WebsiteToday Connect — custom login (navy aurora + glaskaart)
   Ontwerp: websitetoday-login/preview.html. Klant-instelbaar via
   Instellingen → WebsiteToday: positie (wtc-pos-left/right), eigen
   achtergrond (wtc-custom-bg), eigen logo (wtc-has-logo) en accentkleur
   (--wt-accent, standaard oranje). Geen !important — eigen klant-CSS wint.
   ========================================================================== */

:root {
	--wt-navy-950: #050b1d;
	--wt-navy-900: #0a1633;
	--wt-navy-800: #10214a;
	--wt-blue: #3b82f6;
	--wt-blue-bright: #60a5fa;
	--wt-ink: #eef2ff;
	--wt-ink-dim: #8ea0c9;
	--wt-glass: rgba(255, 255, 255, 0.045);
	--wt-glass-border: rgba(255, 255, 255, 0.09);
	--wt-font-display: "Poppins", sans-serif;
	--wt-font-body: "Inter", sans-serif;
}

body.login {
	--wt-accent: #f97316;
	background: var(--wt-navy-950);
	font-family: var(--wt-font-body);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow-x: hidden;
	position: relative;
}

/* --------------------------------------------------------------------------
   Decor: aurora-orbs, grid, lichtbundel, noise, particles
   -------------------------------------------------------------------------- */

.wt-scene {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.wt-aurora {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	opacity: 0.55;
	will-change: transform;
}

.wt-aurora--blue {
	width: 55vw;
	height: 55vw;
	min-width: 480px;
	min-height: 480px;
	left: -12vw;
	top: -18vw;
	background: radial-gradient(circle at 35% 35%, #2563eb 0%, #1d4ed8 35%, transparent 70%);
	animation: wt-drift-a 26s ease-in-out infinite alternate;
}

.wt-aurora--orange {
	width: 42vw;
	height: 42vw;
	min-width: 380px;
	min-height: 380px;
	right: -14vw;
	bottom: -16vw;
	background: radial-gradient(circle at 60% 40%, #f97316 0%, #c2410c 40%, transparent 72%);
	opacity: 0.38;
	animation: wt-drift-b 32s ease-in-out infinite alternate;
}

.wt-aurora--teal {
	width: 30vw;
	height: 30vw;
	min-width: 300px;
	min-height: 300px;
	right: 8vw;
	top: -12vw;
	background: radial-gradient(circle at 50% 50%, #0ea5e9 0%, transparent 70%);
	opacity: 0.28;
	animation: wt-drift-c 22s ease-in-out infinite alternate;
}

@keyframes wt-drift-a {
	from { transform: translate(0, 0) scale(1); }
	to   { transform: translate(9vw, 7vh) scale(1.15); }
}

@keyframes wt-drift-b {
	from { transform: translate(0, 0) scale(1); }
	to   { transform: translate(-8vw, -9vh) scale(1.12); }
}

@keyframes wt-drift-c {
	from { transform: translate(0, 0) scale(1); }
	to   { transform: translate(-6vw, 8vh) scale(0.9); }
}

.wt-grid {
	position: absolute;
	inset: -2px;
	background-image:
		linear-gradient(rgba(120, 150, 220, 0.055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(120, 150, 220, 0.055) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(ellipse 90% 75% at 50% 45%, black 30%, transparent 78%);
	-webkit-mask-image: radial-gradient(ellipse 90% 75% at 50% 45%, black 30%, transparent 78%);
}

.wt-beam {
	position: absolute;
	top: -30%;
	left: 50%;
	width: 140px;
	height: 160%;
	background: linear-gradient(180deg, transparent, rgba(96, 165, 250, 0.07), transparent);
	transform: translateX(-50%) rotate(18deg);
	animation: wt-beam-sweep 14s ease-in-out infinite;
}

@keyframes wt-beam-sweep {
	0%, 100% { transform: translateX(-46vw) rotate(18deg); opacity: 0; }
	10%      { opacity: 1; }
	50%      { transform: translateX(46vw) rotate(18deg); opacity: 1; }
	60%, 99% { opacity: 0; }
}

#wt-particles {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.wt-noise {
	position: absolute;
	inset: 0;
	opacity: 0.5;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Eigen achtergrondafbeelding: decorlagen uit, donkere overlay erover
   zodat kaart en tekst leesbaar blijven (afbeelding zelf komt via
   inline-CSS op body.login.wtc-custom-bg). */
body.login.wtc-custom-bg .wt-aurora,
body.login.wtc-custom-bg .wt-grid,
body.login.wtc-custom-bg .wt-beam,
body.login.wtc-custom-bg #wt-particles {
	display: none;
}

body.login.wtc-custom-bg .wt-scene {
	background: linear-gradient(rgba(5, 11, 29, 0.52), rgba(5, 11, 29, 0.68));
}

/* --------------------------------------------------------------------------
   Kaart + logo + positie
   -------------------------------------------------------------------------- */

#login {
	position: relative;
	z-index: 1;
	width: 400px;
	max-width: calc(100vw - 32px);
	padding: 5vh 0 0;
	margin: 0 auto;
}

/* Positie van de kaart — klant-instelling. Op klein scherm altijd centraal. */
@media (min-width: 1024px) {
	body.login.wtc-pos-left #login {
		margin-left: 8vw;
		margin-right: auto;
	}

	body.login.wtc-pos-right #login {
		margin-left: auto;
		margin-right: 8vw;
	}
}

body.login h1,
body.login .wp-login-logo {
	margin-bottom: 28px;
	animation: wt-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.login h1 a,
body.login .wp-login-logo a {
	background: none;
	width: auto;
	height: auto;
	text-indent: 0;
	overflow: visible;
	font-family: var(--wt-font-display);
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--wt-ink);
	line-height: 1.2;
	display: block;
	text-align: center;
	outline: none;
}

body.login h1 a::after,
body.login .wp-login-logo a::after {
	content: ".";
	color: var(--wt-accent);
	font-size: 1.15em;
}

body.login h1 a:focus,
body.login .wp-login-logo a:focus {
	box-shadow: none;
	color: var(--wt-ink);
}

/* Eigen logo: afbeelding i.p.v. wordmark (url via inline-CSS). */
body.login.wtc-has-logo h1 a,
body.login.wtc-has-logo .wp-login-logo a {
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
	max-width: 340px;
	height: 88px;
	margin: 0 auto;
	text-indent: -9999px;
	overflow: hidden;
}

body.login.wtc-has-logo h1 a::after,
body.login.wtc-has-logo .wp-login-logo a::after {
	content: none;
}

body.login form {
	background: var(--wt-glass);
	border: 1px solid var(--wt-glass-border);
	border-radius: 20px;
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	box-shadow:
		0 30px 80px -20px rgba(3, 8, 25, 0.9),
		0 0 0 1px rgba(255, 255, 255, 0.02) inset,
		0 1px 0 rgba(255, 255, 255, 0.08) inset;
	padding: 34px 32px 30px;
	margin-top: 0;
	position: relative;
	animation: wt-rise 0.7s 0.08s cubic-bezier(0.22, 1, 0.36, 1) both;
	transform-style: preserve-3d;
	transition: box-shadow 0.4s ease;
}

/* gradient-randje bovenop de kaart */
body.login form::before {
	content: "";
	position: absolute;
	top: 0;
	left: 24px;
	right: 24px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, transparent, var(--wt-blue), var(--wt-accent), transparent);
	opacity: 0.9;
}

/* zachte gloed onder de kaart */
body.login form::after {
	content: "";
	position: absolute;
	left: 12%;
	right: 12%;
	bottom: -26px;
	height: 50px;
	background: radial-gradient(ellipse at center, color-mix(in srgb, var(--wt-accent) 22%, transparent), transparent 70%);
	filter: blur(14px);
	z-index: -1;
}

@keyframes wt-rise {
	from { opacity: 0; transform: translateY(26px) scale(0.97); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* --------------------------------------------------------------------------
   Velden
   -------------------------------------------------------------------------- */

body.login form p,
body.login form .user-pass-wrap {
	animation: wt-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.login form > p:nth-of-type(1),
body.login form .user-login-wrap { animation-delay: 0.16s; }
body.login form .user-pass-wrap  { animation-delay: 0.24s; }
body.login form .forgetmenot     { animation-delay: 0.32s; }
body.login form .submit          { animation-delay: 0.38s; }

body.login label {
	color: var(--wt-ink-dim);
	font-family: var(--wt-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 6px;
	display: block;
}

body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"],
body.login input[type="tel"],
body.login input[type="number"] {
	background: rgba(5, 11, 29, 0.55);
	border: 1px solid rgba(142, 160, 201, 0.22);
	border-radius: 12px;
	color: var(--wt-ink);
	font-family: var(--wt-font-body);
	font-size: 15px;
	padding: 12px 14px;
	width: 100%;
	min-height: 48px;
	box-shadow: none;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
	caret-color: var(--wt-accent);
}

body.login input[type="text"]:focus,
body.login input[type="password"]:focus,
body.login input[type="email"]:focus,
body.login input[type="tel"]:focus,
body.login input[type="number"]:focus {
	border-color: var(--wt-blue);
	background: rgba(8, 16, 40, 0.75);
	box-shadow:
		0 0 0 3px rgba(59, 130, 246, 0.22),
		0 0 24px -4px rgba(59, 130, 246, 0.35);
	outline: none;
}

body.login input:-webkit-autofill,
body.login input:-webkit-autofill:hover,
body.login input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--wt-ink);
	-webkit-box-shadow: 0 0 0 100px var(--wt-navy-900) inset;
	transition: background-color 9999s ease-in-out 0s;
}

/* wachtwoord-toon-knopje */
body.login .wp-pwd {
	position: relative;
}

body.login .button.wp-hide-pw {
	color: var(--wt-ink-dim);
	min-height: 44px;
	right: 4px;
}

body.login .button.wp-hide-pw:hover,
body.login .button.wp-hide-pw:focus {
	color: var(--wt-accent);
	background: transparent;
	box-shadow: none;
	border: none;
}

/* onthoud mij — custom checkbox */
body.login .forgetmenot {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
}

body.login .forgetmenot label {
	text-transform: none;
	letter-spacing: 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--wt-ink-dim);
	margin: 0;
	display: inline;
}

body.login input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	min-width: 18px;
	border: 1px solid rgba(142, 160, 201, 0.4);
	border-radius: 5px;
	background: rgba(5, 11, 29, 0.55);
	margin: 0;
	cursor: pointer;
	position: relative;
	transition: background 0.2s ease, border-color 0.2s ease;
	box-shadow: none;
}

body.login input[type="checkbox"]:checked {
	background: linear-gradient(135deg, var(--wt-blue), #2563eb);
	border-color: var(--wt-blue);
}

body.login input[type="checkbox"]:checked::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 10px;
	height: 6px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: translateY(-1px) rotate(-45deg);
	float: none;
}

body.login input[type="checkbox"]:focus {
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
	outline: none;
}

/* --------------------------------------------------------------------------
   Knop — accentkleur-gestuurd (standaard oranje)
   -------------------------------------------------------------------------- */

body.login .wp-core-ui .button-primary,
body.login #wp-submit {
	background: linear-gradient(
		120deg,
		var(--wt-accent) 0%,
		color-mix(in srgb, var(--wt-accent) 80%, #1f1206) 55%,
		var(--wt-accent) 100%
	);
	background-size: 200% 100%;
	border: none;
	border-radius: 12px;
	color: #fff;
	font-family: var(--wt-font-display);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
	width: 100%;
	min-height: 50px;
	margin-top: 10px;
	cursor: pointer;
	text-shadow: none;
	box-shadow:
		0 12px 28px -8px color-mix(in srgb, var(--wt-accent) 55%, transparent),
		0 1px 0 rgba(255, 255, 255, 0.25) inset;
	transition: transform 0.2s ease, box-shadow 0.25s ease, background-position 0.5s ease;
	position: relative;
	overflow: hidden;
}

body.login .wp-core-ui .button-primary:hover,
body.login #wp-submit:hover {
	background-position: 100% 0;
	transform: translateY(-2px);
	box-shadow:
		0 18px 36px -8px color-mix(in srgb, var(--wt-accent) 65%, transparent),
		0 1px 0 rgba(255, 255, 255, 0.25) inset;
}

body.login .wp-core-ui .button-primary:active,
body.login #wp-submit:active {
	transform: translateY(0);
}

body.login .wp-core-ui .button-primary:focus,
body.login #wp-submit:focus {
	box-shadow:
		0 0 0 3px color-mix(in srgb, var(--wt-accent) 40%, transparent),
		0 12px 28px -8px color-mix(in srgb, var(--wt-accent) 55%, transparent);
	outline: none;
}

/* glans die over de knop veegt */
body.login #wp-submit::after {
	content: "";
	position: absolute;
	top: 0;
	left: -80%;
	width: 50%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
	transform: skewX(-20deg);
	animation: wt-sheen 4.5s ease-in-out infinite;
}

@keyframes wt-sheen {
	0%, 60%  { left: -80%; }
	100%     { left: 160%; }
}

/* --------------------------------------------------------------------------
   Links, meldingen, footer
   -------------------------------------------------------------------------- */

body.login #nav,
body.login #backtoblog {
	text-align: center;
	padding: 0;
	margin: 18px 0 0;
	animation: wt-rise 0.6s 0.46s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.login #backtoblog {
	margin-top: 8px;
	animation-delay: 0.52s;
}

body.login #nav a,
body.login #backtoblog a {
	color: var(--wt-ink-dim);
	font-size: 13px;
	font-weight: 500;
	transition: color 0.2s ease;
}

body.login #nav a:hover,
body.login #backtoblog a:hover {
	color: var(--wt-accent);
}

body.login #login_error,
body.login .notice,
body.login .message,
body.login .success {
	background: rgba(10, 22, 51, 0.75);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--wt-glass-border);
	border-left: 3px solid var(--wt-blue);
	border-radius: 12px;
	color: var(--wt-ink);
	font-size: 13.5px;
	line-height: 1.55;
	padding: 14px 16px;
	margin-bottom: 18px;
	box-shadow: 0 16px 40px -16px rgba(3, 8, 25, 0.8);
	animation: wt-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.login #login_error,
body.login .notice-error {
	border-left-color: #ef4444;
}

body.login .success,
body.login .notice-success {
	border-left-color: #22c55e;
}

body.login #login_error a,
body.login .message a,
body.login .notice a {
	color: var(--wt-blue-bright);
}

body.login .privacy-policy-page-link {
	margin: 16px 0 0;
}

body.login .privacy-policy-page-link a {
	color: var(--wt-ink-dim);
	font-size: 12px;
}

/* "Vernieuwd"-pill — tijdelijke melding na de login-restyle (60 dagen) */
.wt-refresh-notice {
	position: relative;
	z-index: 1;
	width: fit-content;
	margin: 18px auto 10px;
	padding: 8px 16px;
	text-align: center;
	color: rgba(226, 232, 240, 0.92);
	font-family: var(--wt-font-body);
	font-size: 12.5px;
	line-height: 1.5;
	background: rgba(15, 23, 42, 0.45);
	border: 1px solid rgba(148, 163, 184, 0.25);
	border-radius: 100px;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.wt-refresh-notice span {
	color: rgba(251, 146, 60, 0.95);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 10.5px;
	letter-spacing: 1px;
	margin-right: 6px;
}

body.interim-login .wt-refresh-notice {
	display: none;
}

.wt-credit {
	position: relative;
	z-index: 1;
	text-align: center;
	color: rgba(142, 160, 201, 0.55);
	font-family: var(--wt-font-body);
	font-size: 11.5px;
	letter-spacing: 0.06em;
	margin: 26px 0 20px;
	animation: wt-rise 0.6s 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.wt-credit span {
	color: rgba(251, 146, 60, 0.75);
	font-weight: 600;
}

/* WebsiteToday-hoeklogo — altijd zichtbaar, klein en fijn */
.wtc-wt-corner {
	position: fixed;
	right: 18px;
	bottom: 16px;
	z-index: 2;
	opacity: 0.5;
	transition: opacity 0.2s ease;
	line-height: 0;
}

.wtc-wt-corner:hover,
.wtc-wt-corner:focus {
	opacity: 0.9;
}

.wtc-wt-corner img {
	height: 20px;
	width: auto;
	display: block;
}

body.login #login_error + p,
body.login p.message + p {
	margin-top: 0;
}

/* interim login (in modal) — decor uitschakelen */
body.interim-login .wt-scene,
body.interim-login .wt-credit,
body.interim-login .wtc-wt-corner {
	display: none;
}

/* --------------------------------------------------------------------------
   Toegankelijkheid & klein scherm
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	body.login *,
	body.login *::before,
	body.login *::after {
		animation-duration: 0.001s !important;
		animation-delay: 0s !important;
		transition-duration: 0.001s !important;
	}

	.wt-beam,
	#wt-particles {
		display: none;
	}
}

@media (max-width: 480px) {
	body.login form {
		padding: 26px 20px 24px;
	}

	body.login h1 a,
	body.login .wp-login-logo a {
		font-size: 26px;
	}
}