/* ---------------------------------------------------------------
   Inloggen en aanmelden.

   Opzet: twee kolommen. Links de reden waarom je dit wilt (sfeer, wat je
   krijgt, geruststelling), rechts het formulier. Op mobiel stapelt het,
   waarbij de sfeerkant compact bovenaan blijft staan: die draagt de
   overtuiging, dus die mag niet verdwijnen.
   Bewust één lichte pastelwereld, net als de rest van Bloome.
   --------------------------------------------------------------- */

.auth-body { margin: 0; background: var(--paper); }

.auth-split {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
}
@media (max-width: 940px) {
  .auth-split { grid-template-columns: 1fr; min-height: auto; }
}

/* ---------- Linkerkant: de sfeer ---------- */

.auth-sfeer {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 2rem;
  padding: 2.2rem 4vw 3rem 5vw;
  background:
    radial-gradient(48vw 48vw at 108% -6%, var(--paper-yellow) 0%, transparent 62%),
    radial-gradient(56vw 56vw at -14% 104%, var(--paper-alt) 0%, transparent 64%),
    linear-gradient(160deg, #FFFDF9, #FDF2F6 70%, #FFFDF9);
}
/* Op mobiel staat de sfeerkant boven het formulier. Hij moet overtuigen, maar
   niet een heel scherm kosten voordat je het formulier ziet: wie hier komt via
   "Word lid" heeft de keuze vaak al gemaakt. Vandaar strakkere maten. */
@media (max-width: 940px) {
  .auth-sfeer { padding: 1.4rem 6vw 1.5rem; gap: 0.9rem; }
  .sfeer-titel { font-size: clamp(1.65rem, 7.4vw, 2.2rem); }
  .sfeer-lead { font-size: 0.92rem; line-height: 1.5; }
  .sfeer-lijst { gap: 0.45rem; }
  .sfeer-lijst li { font-size: 0.85rem; gap: 0.55rem; grid-template-columns: 1.15rem 1fr; }
  .sfeer-vink { width: 1.15rem; height: 1.15rem; font-size: 0.64rem; }
  .sfeer-gerust li { font-size: 0.7rem; padding: 0.3rem 0.6rem; }
  .sfeer-voet { padding-top: 0.8rem; font-size: 0.92rem; }
  .sfeer-voet span { margin-top: 0.25rem; }
}

.auth-blaadjes { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.auth-blaadje {
  position: absolute; border-radius: 60% 0 60% 0;
  opacity: 0.55; animation: authZweef linear infinite;
}
@keyframes authZweef {
  0% { transform: translate3d(0, -8vh, 0) rotate(0deg); opacity: 0; }
  12% { opacity: 0.55; }
  88% { opacity: 0.45; }
  100% { transform: translate3d(var(--drift, 40px), 108vh, 0) rotate(320deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .auth-blaadje { display: none; } }

.auth-sfeer .wordmark { position: relative; z-index: 1; align-self: flex-start; }

.sfeer-inhoud {
  position: relative; z-index: 1;
  margin: auto 0; max-width: 30rem;
  display: flex; flex-direction: column; gap: 1.25rem;
}
@media (max-width: 940px) { .sfeer-inhoud { margin: 0; max-width: none; gap: 1rem; } }

.sfeer-kicker {
  display: inline-flex; align-items: center; gap: 0.6em; margin: 0;
  font-family: 'Manrope', sans-serif; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent);
}
.sfeer-kicker::before { content: ''; width: 22px; height: 1px; background: var(--accent); }

.sfeer-titel {
  font-family: 'Fraunces', Georgia, serif; font-weight: 480;
  font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.08; margin: 0; color: var(--ink);
  text-wrap: balance;
}
.sfeer-titel em { font-style: italic; color: var(--accent); }

.sfeer-lead { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--ink-soft); max-width: 34ch; }

/* Wat je krijgt: het concrete bewijs onder de belofte. */
.sfeer-lijst { list-style: none; margin: 0.2rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.sfeer-lijst li {
  display: grid; grid-template-columns: 1.35rem 1fr; gap: 0.65rem; align-items: start;
  font-size: 0.9rem; line-height: 1.5; color: var(--ink);
}
.sfeer-vink {
  width: 1.35rem; height: 1.35rem; border-radius: 50%; margin-top: 0.05rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-size: 0.72rem; font-weight: 700;
}

/* Geruststelling vlak boven de vouw: haalt de laatste twijfel weg. */
.sfeer-gerust {
  display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.3rem 0 0; padding: 0; list-style: none;
}
.sfeer-gerust li {
  font-size: 0.74rem; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: 0.35rem 0.75rem;
  background: color-mix(in srgb, var(--paper) 70%, transparent);
}

.sfeer-voet {
  margin: 0; padding-top: 1.1rem; border-top: 1px solid var(--line);
  font-family: 'Fraunces', Georgia, serif; font-style: italic;
  font-size: 1rem; color: var(--ink); line-height: 1.4;
}
.sfeer-voet span { display: block; font-family: 'Manrope', sans-serif; font-style: normal; font-size: 0.72rem; color: var(--ink-soft); margin-top: 0.4rem; }

/* Journalkaartje als "het ding dat je wilt hebben". Op smalle schermen weg:
   daar telt de tekst zwaarder dan de illustratie. */
/* Bewust absoluut en half uit beeld in de hoek: zo kan het kaartje de hoogte
   van de kolom nooit oprekken, ongeacht hoeveel tekst erboven staat. */
.sfeer-journal {
  position: absolute; z-index: 0;
  right: -70px; bottom: -80px;
  width: 216px; aspect-ratio: 3 / 4;
  border-radius: 16px; padding: 1.3rem 1.2rem 1.2rem 1.9rem;
  background: linear-gradient(150deg, #FFFDF8, #FDF3F6);
  border: 1px solid var(--line);
  box-shadow: 0 30px 50px -28px rgba(74, 47, 53, 0.5);
  transform: rotate(-7deg);
  pointer-events: none;
}
@media (max-width: 1180px) { .sfeer-journal { opacity: 0.5; } }
.sfeer-journal::before {
  content: ''; position: absolute; left: 11px; top: 18px; bottom: 18px; width: 9px;
  background-image: radial-gradient(circle at center, var(--line) 0 3px, transparent 4px);
  background-size: 9px 20px; background-repeat: repeat-y;
}
@media (max-width: 940px) { .sfeer-journal { display: none; } }
.sj-eyebrow { font-size: 0.52rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); margin: 0; }
.sj-titel { font-family: 'Fraunces', serif; font-style: italic; font-size: 1.3rem; margin: 0.1rem 0 0.9rem; color: var(--ink); }
.sj-veld { font-family: 'Fraunces', serif; font-style: italic; font-size: 0.72rem; margin: 0.7rem 0 0.35rem; color: var(--ink); }
.sj-lijn { height: 1px; background: var(--line); margin: 0.6rem 0; position: relative; }
.sj-lijn i {
  position: absolute; left: 0; top: -0.72rem; font-style: normal;
  font-family: 'Caveat', 'Bradley Hand', cursive; font-size: 0.86rem; color: var(--accent);
  white-space: nowrap; overflow: hidden; width: 0;
  animation: sjSchrijf 2.4s steps(24) 0.9s forwards;
}
@keyframes sjSchrijf { to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .sj-lijn i { width: 100%; animation: none; } }
.sj-sterren { font-size: 0.78rem; color: var(--gold); margin: 0.8rem 0 0; letter-spacing: 0.1em; }

/* ---------- Rechterkant: het formulier ---------- */

.auth-vorm {
  display: flex; align-items: center; justify-content: center;
  padding: 3rem 5vw;
}
@media (max-width: 940px) { .auth-vorm { padding: 2.4rem 6vw 3rem; } }

.auth-form {
  width: 100%; max-width: 25rem;
  display: flex; flex-direction: column; gap: 1.1rem;
}
.auth-form h1 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin: 0; }
.auth-form .vorm-kop { display: flex; flex-direction: column; gap: 0.4rem; }
.auth-form .vorm-sub { margin: 0; font-size: 0.88rem; color: var(--ink-soft); line-height: 1.5; }

/* De knop is de belangrijkste klik van de pagina, dus die krijgt het accent
   en een subtiele glans, net als op de landingspagina. */
.auth-form .btn.hoofd {
  position: relative; overflow: hidden;
  background: linear-gradient(115deg, var(--accent-soft), var(--accent));
  border-color: transparent; color: #fff;
  padding: 0.95em 1.6em; border-radius: 999px; font-size: 0.95rem;
  box-shadow: 0 12px 26px -14px rgba(193, 95, 130, 0.85);
}
.auth-form .btn.hoofd::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
  transform: translateX(-130%); transition: transform 0.7s ease;
}
.auth-form .btn.hoofd:hover::after { transform: translateX(130%); }
.auth-form .btn.hoofd:disabled { opacity: 0.75; }

.vorm-onder { text-align: center; font-size: 0.85rem; color: var(--ink-soft); margin: 0; }
.vorm-onder a { color: var(--accent); font-weight: 600; text-decoration: none; }
.vorm-onder a:hover { text-decoration: underline; }

.vorm-terug {
  font-size: 0.78rem; color: var(--ink-soft); text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.35rem; align-self: flex-start;
}
.vorm-terug:hover { color: var(--accent); }

/* ---------- Membershipkeuze als echte kaarten ---------- */

.tier-kaarten { display: grid; gap: 0.6rem; }
.tier-kaart {
  position: relative; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 14px;
  padding: 0.85rem 1rem; background: var(--paper);
  display: grid; gap: 0.2rem;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
/* Deze kaart is zelf een <label> binnen .field, dus `.field label` (klasse plus
   tag) verslaat een losse `.tier-kaart`. Vandaar `.field .tier-kaart`, en voor
   de zekerheid ook expliciet op de kinderen: die erven anders alsnog de
   hoofdletter-opmaak van veldlabels. De badge houdt bewust wel hoofdletters. */
.field .tier-kaart,
.tier-kaart .tk-naam,
.tier-kaart .tk-wat,
.tier-kaart .tk-prijs {
  text-transform: none; letter-spacing: normal;
}
/* Alleen op de kaart zelf, niet op de kinderen: die houden hun eigen kleur
   (prijs in accent, omschrijving in de zachte tint). */
.field .tier-kaart { font-size: 1rem; font-weight: 400; color: var(--ink); }
.tier-kaart:hover { transform: translateY(-1px); border-color: var(--accent-soft); }
.tier-kaart input { position: absolute; opacity: 0; pointer-events: none; }
.tk-top { display: flex; align-items: baseline; gap: 0.6rem; }
.tk-naam { font-weight: 700; font-size: 0.94rem; color: var(--ink); }
.tk-prijs {
  margin-left: auto; font-family: 'Fraunces', serif; font-size: 1.15rem;
  color: var(--accent); font-weight: 500; line-height: 1;
}
.tk-prijs sup { font-size: 0.58em; }
.tk-prijs small { font-family: 'Manrope', sans-serif; font-size: 0.6rem; color: var(--ink-soft); font-weight: 600; margin-left: 0.15rem; }
.tk-wat { font-size: 0.78rem; color: var(--ink-soft); line-height: 1.45; }

.tier-kaart:has(input:checked) {
  border-color: var(--accent);
  background: linear-gradient(150deg, color-mix(in srgb, var(--paper-alt) 55%, var(--paper)), var(--paper));
  box-shadow: 0 10px 24px -18px rgba(193, 95, 130, 0.9);
}
.tier-kaart:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.tk-badge {
  position: absolute; top: -0.6rem; right: 0.9rem;
  background: var(--gold); color: var(--ink);
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 0.2rem 0.55rem; border-radius: 999px;
}

/* Kleine geruststelling direct onder de knop, waar de twijfel het grootst is. */
.vorm-mini {
  margin: -0.35rem 0 0; text-align: center;
  font-size: 0.74rem; color: var(--ink-soft);
}