/* ============================================================
   mBuy Live — gedeelde stijllaag (mbuy-theme)
   Eén bron van waarheid voor login, dashboards, admin, en
   alles wat volgt. Wijzig een token hier = overal door.
   Huisstijl: Rosa (mBuy), juni 2026.
   ============================================================ */

/* — Lokaal gevendorde fonts (Google Fonts, OFL) — geen externe call.
     Plus Jakarta Sans (body) + Playfair Display (Butler-fallback, display).
     Zodra de Butler-webfontlicentie rond is: hieronder Butler als extra
     @font-face toevoegen en --font-display ongemoeid laten. */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/playfair-display-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/playfair-display-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-200-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-200-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* — Kleuren — */
  --teal:          #204546;   /* hoofdkleur: panelen, koppen        */
  --teal-soft:     #769B9D;   /* zacht grijsgroen: secundaire tekst */
  --orange:        #CE5624;   /* accent: knoppen, links             */
  --orange-hover:  #B8481A;   /* accent ingedrukt/hover             */
  --grey:          #646464;   /* bijschriften op licht              */
  --white:         #FFFFFF;
  --ink:           #1A2E2E;   /* tekst op licht (donkerder teal)    */
  --line:          rgba(32,69,70,0.12); /* hairline-scheidingen      */
  --field-bg:      #F4F6F6;   /* invoervelden                       */

  /* — Typografie —
     Display = Butler (serif). Butler is freemium (Fontfabric):
     webfont-licentie nog te bevestigen. Tot die tijd valt 'ie
     terug op Playfair Display (OFL, lokaal gevendord) die er
     dicht bij zit. */
  --font-display: "Butler", "Playfair Display", "Hoefler Text", Georgia, serif;
  --font-body:    "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* — Schaal & ritme — */
  --r-sm: 6px;   --r-md: 10px;  --r-lg: 16px;
  --gap:  clamp(20px, 4vw, 48px);
  --pad:  clamp(28px, 6vw, 88px);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--ink);
  background: var(--teal);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   Split-layout: teal verhaalpaneel links, formulier rechts.
   Onder 860px stapelt het: verhaal boven, formulier onder.
   ============================================================ */
.auth {
  min-height: 100%;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  background: var(--white);
}
.auth__brandpanel {
  position: relative;
  background:
    radial-gradient(120% 140% at 15% 10%, #2c595a 0%, var(--teal) 55%, #1a3a3b 100%);
  color: var(--white);
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* dunne witte kaderlijn binnen het paneel, zoals in het ontwerp */
  overflow: hidden;
}
.auth__brandpanel::before {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(255,255,255,0.22);
  pointer-events: none;
}
.auth__formpanel {
  background: var(--white);
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* — Merk — */
.brand {
  position: relative; z-index: 1;
  display: flex; align-items: baseline; gap: 10px;
}
.brand__mark { font-family: var(--font-body); font-weight: 700; font-size: 34px; letter-spacing: -0.01em; }
.brand__sub  { font-weight: 200; font-size: 22px; opacity: 0.85; }

/* — Verhaalblok midden — */
.story { position: relative; z-index: 1; max-width: 30ch; }
.story__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.08;
  margin: 0 0 18px;
}
.story__body { font-weight: 500; font-size: 16px; line-height: 1.65; color: rgba(255,255,255,0.82); margin: 0; }

/* — Statistieken onderaan — */
.stats { position: relative; z-index: 1; display: flex; gap: clamp(20px, 4vw, 44px); }
.stat__num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1;
}
.stat__label { font-size: 13px; color: var(--teal-soft); margin-top: 6px; }
.stat + .stat { padding-left: clamp(20px, 4vw, 44px); border-left: 1px solid rgba(255,255,255,0.18); }

/* ============================================================
   Formulier — herbruikbare componenten (.field, .btn, .link)
   ============================================================ */
.form { width: 100%; max-width: 360px; margin: 0 auto; }
.form__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 4vw, 44px);
  color: var(--teal);
  margin: 0 0 8px;
}
.form__lead { color: var(--grey); font-size: 15px; margin: 0 0 40px; }

.field { margin-bottom: 22px; }
.field__label { display: block; font-size: 14px; color: var(--ink); margin-bottom: 8px; }
.field__input {
  width: 100%;
  font-family: var(--font-body); font-size: 15px;
  padding: 14px 16px;
  background: var(--field-bg);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--ink);
  transition: border-color .15s, background .15s;
}
.field__input::placeholder { color: #9AA8A8; }
.field__input:focus {
  outline: none;
  border-color: var(--teal);
  background: var(--white);
}

.btn {
  width: 100%;
  font-family: var(--font-body); font-weight: 700; font-size: 15px;
  color: var(--white);
  background: var(--orange);
  border: none; border-radius: var(--r-sm);
  padding: 15px 20px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  cursor: pointer;
  transition: background .15s, transform .05s;
}
.btn:hover { background: var(--orange-hover); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid rgba(206,86,36,0.4); outline-offset: 2px; }
.btn:disabled { opacity: .6; cursor: default; }
.btn__arrow { font-size: 18px; line-height: 1; }

.note { margin-top: 28px; font-size: 14px; color: var(--ink); }
.link { color: var(--orange); text-decoration: none; font-weight: 700; }
.link:hover { text-decoration: underline; }

/* — Statusmelding (neutraal, geen account-enumeration) — */
.msg { margin-top: 16px; font-size: 14px; line-height: 1.5; min-height: 1.2em; }
.msg--info  { color: var(--teal); }
.msg--error { color: var(--orange-hover); }

/* — Twee-stappen: e-mail eerst, dan code — */
.step { display: none; }
.step.is-active { display: block; }

/* ============================================================
   Responsief — stapelt netjes op mobiel
   ============================================================ */
@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; }
  .auth__brandpanel { gap: 36px; min-height: auto; padding: clamp(32px,8vw,56px); }
  .auth__brandpanel::before { inset: 14px; }
  .story { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ============================================================
   Homepage (apex) — uitsluitend ADDITIEF.
   Alles hieronder is nieuw en wordt door /auth/login niet
   gebruikt. Geen enkele selector hierboven is aangepast, zodat
   de loginpagina exact blijft staan waar hij stond.
   ============================================================ */

/* — Klein labeltje boven de kop — */
.eyebrow {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
}

/* — Korte opsomming met teal vinkje — */
.usps { list-style: none; margin: 0 0 32px; padding: 0; }
.usps li {
  position: relative;
  margin-bottom: 11px;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
.usps li::before {
  content: "";
  position: absolute;
  left: 1px; top: 5px;
  width: 13px; height: 7px;
  border-left: 2px solid var(--teal);
  border-bottom: 2px solid var(--teal);
  transform: rotate(-45deg);
}

/* — Knoppen onder elkaar — */
.actions { display: flex; flex-direction: column; gap: 12px; }
/* .btn is gestyled voor <button>; als <a> moet de underline eraf.
   Bewust gescopet op .actions zodat de knop op /auth/login niet meebeweegt. */
.actions .btn { text-decoration: none; }

/* — Secundaire knop: zelfde maat, rustiger. Modifier, dus .btn alleen
     verandert nergens; deze regels vuren enkel op .btn.btn--ghost. — */
.btn--ghost {
  background: transparent;
  color: var(--teal);
  border: 1px solid var(--line);
}
.btn--ghost:hover { background: var(--field-bg); }
.btn--ghost:focus-visible { outline: 3px solid rgba(32,69,70,0.35); outline-offset: 2px; }

/* — Voetregel onder het rechterpaneel — */
.home__foot {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.6;
  color: var(--grey);
}
.home__foot a { color: var(--grey); text-decoration: underline; }
.home__foot a:hover { color: var(--teal); }