/* =========================
   LOGIN
   Inlogpagina voor de webshop. Losstaand van de rest van de site: geen navbar
   en geen footer, zodat er niets afleidt van het formulier.

   Let op de goudtinten. Op de andere pagina's zet de navbar --gold op #dfc47a.
   Die navbar staat hier niet, dus --gold is hier de donkere variant #C3922E uit
   style.css. Dat is bewust: witte tekst op #dfc47a levert te weinig contrast
   voor een knop waar je doorheen moet.
   ========================= */

:root{
  --login-gold:        var(--gold, #C3922E);
  --login-gold-dark:   #A87C22;
  --login-cream:       #EFE9DE;   /* gelijk aan de randen van de achtergrond */
  --login-card-w:      440px;
  --login-radius:      22px;
  --login-field-h:     58px;
}

html,
body {
  margin: 0;
  height: 100%;
}

.page-login {
  min-height: 100dvh;
  overflow: hidden;
}

.fqg-login {
  min-height: 100dvh;
  padding: 104px 20px 76px;
}

/* Deze site zet box-sizing per component in plaats van globaal. Zonder deze
   regel telt de padding bij de breedte op en wordt het wachtwoordveld (dat
   extra ruimte voor het oogje heeft) breder dan het veld erboven. */
.fqg-login,
.fqg-login *,
.fqg-login *::before,
.fqg-login *::after{
  box-sizing: border-box;
}

.fqg-login{
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 104px 20px 76px;
  overflow: hidden;
}

/* ---------------------------------------------------------------
   Achtergrond
   --------------------------------------------------------------- */
.fqg-login__bg{
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: url("../img/loginbackground.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--login-cream);
}

/* De bloemen in deze foto zitten aan de linker- en rechterrand; het midden is
   bewust leeg gelaten voor tekst. Op een staand scherm snijdt "cover" precies
   dat lege midden uit, waardoor je alleen crème ziet. Daarom schuiven we de
   uitsnede daar naar rechts, waar de roos en het gebladerte zitten. */
@media (max-aspect-ratio: 4/5){
  .fqg-login__bg{ background-position: 85% center; }
}

/* ---------------------------------------------------------------
   Bovenbalk: terug naar de site en taalkeuze
   --------------------------------------------------------------- */
.fqg-login__top{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px clamp(18px, 4vw, 40px);
}
.fqg-login__back{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--sm);
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.8);
  transition: background .18s ease;
}
.fqg-login__back:hover{ background: rgba(255,255,255,.95); color: var(--text); }

.fqg-login__langs{
  display: inline-flex;
  gap: 2px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.8);
}
.fqg-login__langs a{
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-muted);
  text-decoration: none;
  transition: background .16s ease, color .16s ease;
}
.fqg-login__langs a:hover{ color: var(--text); }
.fqg-login__langs a.is-active{
  background: var(--login-gold);
  color: #fff;
}

/* ---------------------------------------------------------------
   De kaart
   --------------------------------------------------------------- */
.fqg-login__card{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--login-card-w);
  padding: clamp(28px, 3.2vw, 38px) clamp(24px, 3.5vw, 36px);
  border-radius: var(--login-radius);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(22px) saturate(1.08);
  -webkit-backdrop-filter: blur(22px) saturate(1.08);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 30px 70px rgba(60,48,20,.16),
    0 6px 18px rgba(60,48,20,.08);
  text-align: center;
}

/* Dun gouden randje bovenlangs */
.fqg-login__card::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: var(--login-radius) var(--login-radius) 0 0;
  background: linear-gradient(90deg, transparent, var(--login-gold), transparent);
}

/* Logo en slogan zijn uit de achtergrondafbeelding verwijderd en staan hier
   als echte HTML. Daardoor blijven ze op elke schermverhouding op hun plek en
   kan de kaart er nooit overheen vallen. */
.fqg-login__logo{
  display: block;
  height: clamp(48px, 6vw, 62px);
  width: auto;
  margin: 0 auto 20px;
}

.fqg-login__eyebrow{
  margin: 0 0 6px 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--login-gold);
}
.fqg-login__title{
  margin: 0 0 8px 0;
  font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.1rem);
  letter-spacing: -0.02em;
}
.fqg-login__lead{
  margin: 0 0 20px 0;
  font-size: var(--sm);
  color: var(--text-secondary);
}

/* ---------------------------------------------------------------
   Velden met zwevend label
   --------------------------------------------------------------- */
.fqg-login__form{
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}

.fqg-field{ position: relative; }

.fqg-field__input{
  width: 100%;
  height: var(--login-field-h);
  padding: 22px 16px 8px;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: rgba(255,255,255,.75);
  border: 1px solid var(--border);
  border-radius: 12px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.fqg-field--pw .fqg-field__input{ padding-right: 52px; }

.fqg-field__input:hover{ border-color: #cfc7b6; }
.fqg-field__input:focus{
  background: #fff;
  border-color: var(--login-gold);
  box-shadow: 0 0 0 3px rgba(195,146,46,.16);
}

/* Het label staat middenin en schuift omhoog zodra het veld gevuld of actief
   is. Dat werkt op :placeholder-shown, vandaar de placeholder van één spatie
   in de markup. */
.fqg-field__label{
  position: absolute;
  left: 17px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: var(--text-muted);
  pointer-events: none;
  transition: transform .16s ease, font-size .16s ease, color .16s ease;
}
.fqg-field__input:focus + .fqg-field__label,
.fqg-field__input:not(:placeholder-shown) + .fqg-field__label{
  /* Het label wordt bij het omhoog schuiven ook kleiner, dus een percentage
     van de eigen hoogte pakt anders uit dan je op het oog zou verwachten.
     -102% zet het midden op ongeveer 15px, netjes binnen de padding-top. */
  transform: translateY(-102%);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--login-gold);
}

/* Oogje om het wachtwoord te tonen */
.fqg-field__toggle{
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.fqg-field__toggle:hover{ background: rgba(0,0,0,.05); color: var(--text); }
.fqg-field__toggle:focus-visible{ outline: 2px solid var(--login-gold); outline-offset: 2px; }

.fqg-field__eyeSlash{ opacity: 0; transition: opacity .16s ease; }
.fqg-field__toggle.is-showing .fqg-field__eyeSlash{ opacity: 1; }

/* ---------------------------------------------------------------
   Knoppen
   --------------------------------------------------------------- */
.fqg-login__submit{
  margin-top: 6px;
  width: 100%;
  height: 52px;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: #fff;
  background: linear-gradient(180deg, var(--login-gold), var(--login-gold-dark));
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(168,124,34,.28);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.fqg-login__submit:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 12px 26px rgba(168,124,34,.34);
}
.fqg-login__submit:active{ transform: translateY(0); }
.fqg-login__submit:focus-visible{ outline: 2px solid var(--login-gold-dark); outline-offset: 3px; }

.fqg-login__forgot{
  display: inline-block;
  margin-top: 14px;
  font-size: var(--sm);
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,.18);
  padding-bottom: 1px;
}
.fqg-login__forgot:hover{ color: var(--login-gold); border-bottom-color: var(--login-gold); }

.fqg-login__divider{
  position: relative;
  margin: 18px 0 15px;
  text-align: center;
}
.fqg-login__divider::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
}
.fqg-login__divider span{
  position: relative;
  padding: 0 12px;
  background: #fbfaf8;
  font-size: var(--sm);
  color: var(--text-muted);
}

.fqg-login__guest{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  background: rgba(255,255,255,.6);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color .16s ease, background .16s ease;
}
.fqg-login__guest:hover{
  color: var(--text);
  background: #fff;
  border-color: var(--login-gold);
}

.fqg-login__note{
  margin: 13px 0 0;
  font-size: .76rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.fqg-login__help{
  margin: 11px 0 0;
  font-size: var(--sm);
  color: var(--text-secondary);
}
.fqg-login__help a{ color: var(--login-gold); font-weight: 600; }

/* Slogan onder de kaart. Op smalle schermen valt hij over het gebladerte, dus
   krijgt hij een lichte drager mee om leesbaar te blijven. */
.fqg-login__tagline{
  display: inline-block;
  position: relative;
  z-index: 1;
  margin: 26px 0 0;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--login-gold);
}

/* ---------------------------------------------------------------
   Klein scherm
   --------------------------------------------------------------- */
@media (max-width: 520px){
  .fqg-login{ padding: 86px 14px 44px; }
  .fqg-login__card{ padding: 26px 20px 24px; }
  .fqg-login__top{ padding: 16px; }
  /* Anders breekt "Terug naar de website" over twee regels. */
  .fqg-login__back{ font-size: .8rem; padding: 7px 12px; white-space: nowrap; }
  .fqg-login__langs a{ padding: 5px 9px; font-size: .72rem; }
}

/* Zonder backdrop-filter (oudere browsers) moet de kaart nog steeds leesbaar
   zijn, dus dan een dekkendere achtergrond. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .fqg-login__card{ background: rgba(255,255,255,.96); }
  .fqg-login__back,
  .fqg-login__langs{ background: rgba(255,255,255,.94); }
}

@media (prefers-reduced-motion: reduce){
  .fqg-login__submit,
  .fqg-field__input,
  .fqg-field__label{ transition: none; }
  .fqg-login__submit:hover{ transform: none; }
}