:root{
    --bg: #f5f7fb;
    --card: #ffffff;
    --text: #111827;
    --muted:#6b7280;
    --border:#e5e7eb;
    --brand:#00BCCA;     /* De Passer accent blauw */
    --google:#4285F4;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family:Figtree, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
    color:var(--text);
    background: var(--bg);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

/* Layout */
.container{
    min-height:100dvh;
    display:grid;
    grid-template-rows:auto 1fr auto;
}
header{
    display:flex; align-items:center; justify-content:center;
    padding:24px;
}
header .brand{
    display:flex; align-items:center; gap:14px;
    color:var(--text); text-decoration:none;
    font-weight:700; letter-spacing:.12em;
    font-size: clamp(18px, 2.2vw, 26px);
}
header .brand img{height:56px; width:auto; filter: drop-shadow(0 4px 18px rgba(0,0,0,.15));}

main{
    display:grid; place-items:center; padding:24px;
}

.auth-grid{
    width:min(980px, 92vw);
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:24px;
}
@media (max-width: 820px){
    .auth-grid{ grid-template-columns: 1fr; }
}

.card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:0 12px 28px rgba(0,0,0,.06);
    padding:24px;
}
.card h2{
    margin:0 0 6px;
    font-size:20px; font-weight:700;
}
.card p.desc{
    margin:0 0 18px; color:var(--muted); font-size:14px;
}

/* Buttons */
.btn{display:flex; align-items:center; justify-content:center;
    width:100%; height:44px; padding:0 16px; border-radius:10px; border:0; cursor:pointer;
    font-weight:700; font-size:14px; line-height:1; text-decoration:none; user-select:none;
    transition:filter .15s ease, transform .05s ease, box-shadow .15s ease;
    margin-top:10px;
}
.btn:active{transform:translateY(1px)}

.btn-primary{ background:#111827; color:#fff; }
.btn-primary:hover{ filter:brightness(1.05) }

.btn-google{ background:var(--google); color:#fff; box-shadow:0 6px 16px rgba(66,133,244,.25); }
.btn-google:hover{ filter:brightness(1.06) }
.btn-google svg{ width:18px; height:18px; margin-right:8px }

/* Divider */
.divider{ display:flex; align-items:center; gap:10px; color:#9ca3af; font-size:12px; margin:16px 0 }
.divider:before,.divider:after{ content:""; flex:1 1 auto; height:1px; background:#e5e7eb }

/* Intro kaart links */
.intro{
    display:flex; flex-direction:column; justify-content:center; height:100%;
    background:
      radial-gradient(600px 280px at 0% 0%, rgba(0,188,202,.10), transparent 60%),
      radial-gradient(520px 260px at 100% 20%, rgba(242,24,79,.10), transparent 60%),
      var(--card);
}
.intro h2{ font-size:22px }
.intro ul{ margin:10px 0 0; padding-left:16px; color:#374151; }
.intro li{ margin:6px 0 }

footer{
    text-align:center; padding:22px; color:#9ca3af; font-size:12px;
}

.first-time {
    margin-top: 18px;
    padding: 12px 14px;
    border-left: 4px solid var(--brand);
    background: #f0fdfd;
    border-radius: 8px;
}
.first-time h3 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--brand);
}
.first-time p {
    margin: 0;
    font-size: 14px;
    color: #374151;
    line-height: 1.5;
}

.login-form {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.form-group input {
    width: 100%;
    border-radius: 0.5rem;
    border: 2px solid #e5e7eb;
    padding: 0.6rem 0.8rem;
    font-size: 0.95rem;
}

.form-group--inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.helper-text {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: #6b7280;
}

.alert {
    margin-top: 1rem;
    font-size: 0.875rem;
    background: #fef2f2;
    border-left: 4px solid #ef4444;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    color: #b91c1c;
}

.forgot-link {
    font-size: 0.8rem;
    text-decoration: underline;
}

.checkbox input {
    margin-right: 0.35rem;
}

/* Rij met knoppen */
.button-row {
    display: flex;
    gap: 1rem;
    margin-top: 1.25rem;
}

/* Lichte knop (wachtwoord vergeten) */
.btn-secondary {
    background: #f5f5f7;
    color: #333;
    padding: 0.75rem 1.25rem;
    border-radius: 0.65rem;
    font-weight: 500;
    flex: 1;
    text-align: center;
    display: inline-block;
}

/* Divider */
.divider {
    text-align: center;
    color: #bbb;
    margin: 1.75rem 0 1rem 0;
    font-size: 0.85rem;
}

/* Google lichte knop */
.btn-google-light {
    border: 1px solid #d6d6d6;
    background: #fafafa;
    padding: 0.75rem 1.25rem;
    border-radius: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    font-weight: 500;
    color: #444;
}

/* Kleine subtiele tekst */
.google-helper-text {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: #7a7a7a;
    text-align: center;
}

/* Rij met knoppen onder het formulier */
.button-row {
    display: flex;
    gap: 1rem;
    margin-top: 1.25rem;
}

/* Primaire knop (Aanmelden) */
.btn-primary {
    background: #0f0f10;
    color: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: 0.65rem;
    font-weight: 600;
    flex: 1;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
}

/* Secundaire knop (Wachtwoord vergeten) */
.btn-secondary {
    background: #f5f5f7;
    color: #333;
    padding: 0.75rem 1.25rem;
    border-radius: 0.65rem;
    font-weight: 500;
    flex: 1;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
}

/* Onderlijning weghalen die je van de globale <a>-styles erft */
.btn-secondary,
.btn-google-light {
    text-decoration: none;
}

/* Hover wat subtiel */
.btn-secondary:hover {
    background: #eceef1;
}

/* Container om Google-knop te centreren */
.google-row {
    display: flex;
    justify-content: center;
}

/* Lichte, niet-dominante Google-knop */
.btn-google-light {
    background: #fafafa;
    border: 1px solid #e3e3e3;
    padding: 0.6rem 1.2rem;
    border-radius: 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #444;
    font-weight: 500;
    max-width: 260px;
    width: 100%;
}

/* Eventuele globale .card a { padding: ... } wordt zo geneutraliseerd */
.card .btn-google-light {
    padding: 0.6rem 1.2rem;
}

/* SVG in Google-knop iets kleiner */
.btn-google-light svg {
    width: 18px;
    height: 18px;
}

/* Subtiele uitleg onder de knop */
.google-helper-text {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: #7a7a7a;
    text-align: center;
}

/* Onboarding block */
.first-time-section {
    margin-top: 2rem;
    text-align: center;
    color: #555;
    padding: 1rem 0 0.5rem;
}

.first-time-title {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.25rem;
    color: #222;
}

.first-time-text {
    font-size: 0.9rem;
    line-height: 1.45;
    max-width: 420px;
    margin: 0.25rem auto 1.25rem;
    color: #666;
}

/* Subtiele horizontale lijn */
.onboarding-divider {
    margin-top: 2rem;
    border: none;
    border-top: 1px solid #e5e5e5;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

/* Subtiele knop "Account aanvragen" */
.btn-account-request {
    display: inline-block;
    padding: 0.65rem 1.2rem;
    border-radius: 0.65rem;
    border: 1px solid #d1d1d1;
    background: #fafafa;
    color: #333;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: 0.15s ease;
}

.btn-account-request:hover {
    background: #f0f0f0;
    border-color: #c8c8c8;
}