/* 🎨 ACHTERGROND STYLING 🎨 */
body {
    /* 1. Achtergrondafbeelding voor behangpapier-effect */
    background-image: url("background_1.f46357975017.jpg");
    background-repeat: repeat;
    background-size: initial;
    background-attachment: fixed;
    /* 2. Valback kleur die goed past bij het patroon */
    background-color: #f7f9fc;
}

/* --- GECOMBINEERD PALET DEFINITIES --- */

/* Card Achtergrond */
.card {
    background-color: rgba(255, 248, 220, 0.95);
    /* Licht Crèmegeel, licht doorschijnend */
    border-color: #9DCEC0;
    /* Pastel Groene rand (Accentkleur) */
}

/* Tekst Kleur (Hoge Contrast) */
.text-body,
.text-muted,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    --bs-body-color: #1E3044;
    /* Donker Grijsblauw */
}

/* 1. Primaire Kleur (Titels/Primaire Knoppen): NIEUW: Hemelsblauw (#77BBE6) is basiskleur */
.text-primary,
.btn-primary,
.btn-outline-primary {
    --bs-primary-rgb: 119, 187, 230;
    /* 77BBE6 */
    --bs-primary: #77BBE6;
}

.btn-primary {
    color: #fff;
    border-color: #77BBE6;
    background-color: #77BBE6;
}

/* HOVER KLEUR IS NU HET OORSPRONKELIJKE ROOD/ROZE (#D47E89) */
.btn-primary:hover,
.btn-primary:focus {
    background-color: #D47E89;
    /* Pastel Rood/Roze */
    border-color: #D47E89;
}

.btn-outline-primary {
    color: #77BBE6;
    border-color: #77BBE6;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: #D47E89;
    /* Pastel Rood/Roze */
    color: #fff;
}


/* 2. Secundaire/Accent Kleur (Secundaire Knoppen): Pastel Groen (#9DCEC0) */
.text-secondary,
.btn-secondary,
.btn-outline-secondary {
    --bs-secondary-rgb: 157, 206, 192;
    /* 9DCEC0 */
    --bs-secondary: #9DCEC0;
}

.btn-outline-secondary {
    color: #9DCEC0;
    border-color: #9DCEC0;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: #9DCEC0;
    color: #1E3044;
    /* Donkere tekst op Pastel Groen */
}

/* 3. Info Kleur (Alerts): Pastel Groen (#9DCEC0) */
.text-info,
.alert-info {
    --bs-info-rgb: 157, 206, 192;
    /* 9DCEC0 */
    --bs-info: #9DCEC0;
}

.alert-info {
    background-color: rgba(157, 206, 192, 0.2);
    border-color: #9DCEC0;
    color: #1E3044;
}

/* --- NAVIGATIEBALK AANPASSING (Hemelsblauw & Wit) --- */

/* Navigatiebalk Kleur: Zacht Hemelsblauw (#77BBE6) */
.navbar-themed {
    background-color: #77BBE6;
}

/* Navigatiebalk Tekst: Wit */
.navbar-themed .nav-link,
.navbar-themed .navbar-text {
    color: #fff;
}

/* Titel Lettertype (LINKS) */
.navbar-brand {
    font-family: 'Pacifico', cursive;
    font-size: 2.2rem;
    line-height: 1;
    color: #fff !important;
    padding-top: 5px;
    padding-bottom: 5px;
    display: block;
}

/* Subtitel Container (ABSOLUUT GECENTREERD) */
.navbar-center-absolute {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #fff !important;
    z-index: 100;
}

/* Subtitel Stijl */
.navbar-subtitle {
    font-size: 1.4rem;
    font-family: 'Pacifico', cursive;
    font-weight: 400;
    color: #fff;
    margin-top: 0;
    line-height: normal;
}

/* Center Card Style - BEHOUDEN */
.center-card {
    max-width: 600px;
    margin: 50px auto;
}

/* ⭐ NIEUW: Inverted Primary Button Stijl (Rood/Roze basis, Blauw hover) ⭐ */
.btn-primary-inverted {
    /* Basis: Pastel Rood/Roze */
    background-color: #77BBE6;
    border-color: #77BBE6;
    color: #fff;
    opacity: 0.9;
}

.btn-primary-inverted:hover,
.btn-primary-inverted:focus {
    /* Hover: Hemelsblauw (Navbar kleur) */
    background-color: #D47E89;
    color: #fff;
    border-color: #D47E89;
}

.custom-platinum-icon {
    /* 1. De Platinum kleur (Lichtgrijs/Zilver) */
    color: #e5e4e2 !important;

    /* 2. Een donker randje/schaduw zodat hij 'popt' op het geel */
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.4);
}

/* De container staat vast onderaan in het midden */
.message-container-bottom {
    position: fixed;
    bottom: 30px;
    left: 0;
    width: 100%;
    z-index: 2000;
    
    display: flex;
    flex-direction: column;
    align-items: center; /* Horizontaal centreren */
    
    pointer-events: none; /* Zodat je niet op de lege balk klikt */
}

/* De styling van het berichtje zelf */
.fade-message {
    pointer-events: auto; /* Het bericht zelf is wel klikbaar */
    min-width: 300px;
    max-width: 600px;
    margin-bottom: 10px;
    
    /* ANIMATIE BIJ BINNENKOMST */
    /* Een kleine 'fade in' en een klein stukje omhoog schuiven */
    animation: fadeInUp 0.5s ease-out forwards;
}

/* ANIMATIE BIJ WEGGAAN (wordt door JS toegevoegd) */
.fade-message.fading-out {
    opacity: 0;
    transition: opacity 1s ease-in-out; /* Duurt 1 seconde om te verdwijnen */
}

/* Fix voor Django 'error' naar Bootstrap kleuren */
.alert-error {
    background-color: #f8d7da; border-color: #f5c2c7; color: #842029;
}

/* De Keyframes voor het verschijnen */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}