/* ===== XAPHIL DESIGNSYSTEEM ===== */
/* Centrale stijl voor de hele app. Pas hier iets aan → verandert overal. */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

:root {
    --xaphil-primary: #1799C9;
    --xaphil-accent: #E0C24E;
    --xaphil-bg: #EEF1F8;
    --xaphil-tekst: #2b2d42;
    --xaphil-grijs: #8890a8;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Nunito', sans-serif;
    background: var(--xaphil-bg);
    color: var(--xaphil-tekst);
    padding: 48px 32px;
}

.wrap { max-width: 720px; margin: 0 auto; }

h1 {
    color: var(--xaphil-primary);
    font-size: 28px;
    font-weight: 900;
    margin-bottom: 24px;
}

/* cl-soft: de zachte bubble-schaduw (opgetild effect) */
.cl-soft {
    box-shadow: 6px 6px 18px rgba(174,182,209,.5), -6px -6px 16px rgba(255,255,255,.9);
}

/* cl-soft-sm: kleinere variant */
.cl-soft-sm {
    box-shadow: 4px 4px 12px rgba(174,182,209,.4), -4px -4px 10px rgba(255,255,255,.8);
}

/* cl-gloss: glans-highlight bovenop een element */
.cl-gloss { position: relative; overflow: hidden; }
.cl-gloss::after {
    content: '';
    position: absolute;
    top: 3px; left: 8px; right: 45%;
    height: 28%;
    border-radius: 999px;
    background: rgba(255,255,255,.3);
    filter: blur(2px);
}

/* cl-bubble-btn: bubble-knop */
.cl-bubble-btn {
    border: none;
    border-radius: 14px;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 4px 4px 12px rgba(174,182,209,.5), -4px -4px 10px rgba(255,255,255,.8);
}

/* Herbruikbare kaart */
.kaart {
    background: #ffffff;       /* ← was var(--xaphil-bg), nu wit */
    border-radius: 22px;
    padding: 20px 24px;
    margin-bottom: 16px;
}

/* Label (bijv. type-badge) in accentkleur */
.label {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    color: #6b5900;
    background: linear-gradient(145deg, #E9CF66, var(--xaphil-accent));
    padding: 4px 14px;
    border-radius: 999px;
    box-shadow: 2px 2px 6px rgba(174,182,209,.5), -2px -2px 5px rgba(255,255,255,.8);
}

/* ═══════════════════════════════════════════ */
/* UITBREIDING — heldere klassen voor de app    */
/* ═══════════════════════════════════════════ */

.bijschrift {
    font-size: 13px;
    font-weight: 600;
    color: var(--xaphil-grijs);
}

.badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    padding: 4px 14px;
    border-radius: 999px;
}
.badge-blauw  { background: #e3f2fb; color: #0c5c85; }
.badge-groen  { background: #e4f7ec; color: #1c7a4a; }
.badge-amber  { background: #fdf0d5; color: #9a6410; }
.badge-rood   { background: #fde4e4; color: #b52020; }
.badge-paars  { background: #f0e6fb; color: #6b30a8; }
.badge-grijs  { background: #eceef5; color: #5b6178; }

.knop {
    display: inline-block;
    border: none;
    border-radius: 14px;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 14px;
    padding: 10px 20px;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    background: var(--xaphil-primary);
    box-shadow: 4px 4px 12px rgba(174,182,209,.5), -4px -4px 10px rgba(255,255,255,.8);
    transition: transform .08s ease;
}
.knop:active { transform: scale(.97); }

.knop-klein {
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 11px;
}
.knop-blauw  { background: var(--xaphil-primary); color: #fff; }
.knop-licht  { background: #e3f2fb; color: #0c5c85; }
.knop-rood   { background: #fde4e4; color: #b52020; }

.veld {
    width: 100%;
    font-family: 'Nunito', sans-serif;
    font-size: 15px;
    color: var(--xaphil-tekst);
    background: var(--xaphil-bg);
    border: none;
    border-radius: 14px;
    padding: 12px 16px;
    box-shadow: inset 3px 3px 8px rgba(174,182,209,.45), inset -3px -3px 7px rgba(255,255,255,.9);
}
.veld:focus {
    outline: none;
    box-shadow: inset 2px 2px 6px rgba(23,153,201,.25), inset -2px -2px 6px rgba(255,255,255,.9);
}

.veld-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--xaphil-tekst);
    margin-bottom: 6px;
}

.melding {
    border-radius: 14px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
}
.melding-succes { background: #e4f7ec; color: #1c7a4a; }
.melding-fout   { background: #fde4e4; color: #b52020; }

.titelbalk {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}