/* === Basis kleuren =============================== */
:root{
  --background: #8752b6;
  --textcolor: #FFFFFF;
  --lightcolor: #f2ddff;
  --brand: #8752b6;
  --brand-darker: #694095;
  --brand-press: #19133C;
}

/* === Pagina-achtergrond + watermerk ==================================== */
body.login{
  background: linear-gradient(
    330deg,
    var(--brand) 0%,
    var(--brand-darker) 50%,
    var(--brand-press) 100%
  );
  color: var(--textcolor);
}

body.login::before{
  content:"";
  position: fixed;
  inset: 0; /* top/right/bottom/left */
  background: url('../assets/blikvooruit.svg') no-repeat center center;
  background-size: 100% auto; /* of 'cover' als je fullscreen wilt */
  z-index: 0!important; /* achter alles */
  pointer-events: none; /* klik "lekt" door naar links/knoppen */
}

/* === Login container (kaart) =========================================== */
body.login #login{
  width: 420px;
  max-width: 90%;
  position: relative;
  z-index: 1; /* boven watermerk */
}

/* === Form glas-effect =================================================== */
body.login form{
  margin: 24px 0;
  padding: 32px 28px;
  font-weight: 400;
  overflow: hidden;

  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

/* === Logo boven het formulier ========================================== */
.login h1 a{
  background-image: url('../assets/Sightkick-logo-darkmode.svg') !important;
  background-size: contain;
  background-repeat: no-repeat;
  width: 300px;
  height: 100px;
}

/* === Typografie & labels =============================================== */
.login label{
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500;
  display: inline-block;
  margin-bottom: 6px;
  color: var(--textcolor);
}

/* === Inputvelden ======================================================== */
.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"]{
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 16px;
}

.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus{
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 2px rgba(138,43,226,0.4) !important; /* paarse gloed */
  outline: none !important;
}

/* === Login-knop ========================================================= */
.wp-core-ui .button-primary{
  background: var(--brand-press);
  border-color: var(--brand-press);
  color:#fff;
  font-size: 16px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 8px;
  box-shadow: none;
  text-shadow: none;
  transition: background .2s ease, transform .1s ease;
}

.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus{
  background: var(--brand-darker);
  border-color: var(--brand-darker);
  transform: translateY(-1px);
}

.wp-core-ui .button-primary:active{
  background: var(--brand);
  border-color: var(--brand);
  transform: translateY(0);
}


/* Zet 'Ga naar …' en 'Je wachtwoord vergeten?' naast elkaar */
body.login #login > p#backtoblog,
body.login #login > p#nav{
  display: inline-block;      /* naast elkaar */
  margin: 12px 8px 0 0;       /* wat ruimte */
  position: relative;
  z-index: 2;                 /* gegarandeerd boven de overlay */
}

/* Leesbaarheid links onder de box verbeteren */
body.login #login > p#backtoblog a,
body.login #login > p#nav a{
  color: var(--brand-press);
}
body.login #login > p#backtoblog a:hover,
body.login #login > p#nav a:hover{
  color: var(--lightcolor);
}

/* === Login linkjes ==================================== */
.login #backtoblog a, .login #nav a {
text-decoration: none;
color: var(--brand-press);
}

.login #backtoblog a:hover, .login #nav a:hover, .login h1 a:hover {
color: var(--textcolor);
}

/* === Sightkick support styling ==================================== */
.sightkick-support {
	margin:20px 0;
	text-align:center;
	font-size:14px;
	font-weight:bold;
	color: var(--textcolor);
	text-shadow: 0 1px 2px rgba(0,0,0,.35);
	position:relative;
	z-index: 3; 
}

.sightkick-support a {
	color: var(--lightcolor);
	text-decoration:none;
}

/* Fallback via CSS, mocht een andere plugin de privacy link toch renderen */
.login .privacy-policy-page-link,
.login #language-switcher { display: none !important; }