/* --- ALGEMEEN & LETTERTYPE (SLICK) --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #f4f7f6;
    margin: 0;
    color: #1a202c;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
    color: #2c3e50;
    font-weight: 600;
}

/* --- KEET KLEUREN --- */
:root {
    --keet-dark-green: #276749;
    --keet-light-green: #37a169;
    --keet-dark-hover: #22543D;
    --keet-light-hover: #2f855a;
    --keet-gray: #f8f9fa;
    --keet-gray-dark: #6c757d; /* Grijze knop */
    --keet-red: #e53e3e;
    --keet-red-hover: #c53030;
    --keet-yellow: #f39c12;
    --keet-yellow-bg: #fffaf0;
    --keet-yellow-border: #f6e05e;
    --keet-blue: #3498db;
    
    /* Badge Kleuren */
    --badge-bestuur: #276749;
    --badge-gold: #FFD700;
    --badge-silver: #C0C0C0;
    --badge-bronze: #CD7F32;
    --badge-oudste: #3182ce;
    
    /* Tikkie */
    --tikkie-purple: #783BFF;
    --tikkie-purple-hover: #5A1FDB;
    
    /* Status Achtergronden */
    --keet-yellow-bg-badge: #FEFCBF; 
    --keet-yellow-text: #9B4C0A;
    --keet-green-bg: #C6F6D5;
    --keet-green-text: #22543D;
    --keet-red-bg: #FED7D7;
    --keet-red-text: #822727;
}

/* --- KNOPPEN (Groen) --- */
button, .button {
    background-color: var(--keet-dark-green);
    color: white !important;
    border: none;
    padding: 12px 18px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

button:hover, .button:hover {
    background-color: var(--keet-dark-hover);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

button:disabled {
    background-color: #bdc3c7;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* --- PUBLIEKE NAVIGATIEBALK (MOBILE-FIRST) --- */
.public-nav {
    background-color: white;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    /* Sticky Nav */
    position: sticky;
    top: 0;
    z-index: 50;
}
.public-nav .logo {
    font-size: 24px;
    font-weight: 700;
    color: var(--keet-dark-green);
    text-decoration: none;
}
.public-nav .nav-links {
    display: none;
    gap: 15px;
}
#hamburger-btn {
    display: block;
    background: none;
    border: none;
    box-shadow: none;
    cursor: pointer;
    padding: 0;
    transition: all 0.2s ease;
}
#hamburger-btn:hover {
    background: none;
    box-shadow: none;
    transform: scale(1.1);
}
#hamburger-btn svg {
    width: 24px;
    height: 24px;
    color: #2d3748;
}

/* --- MOBIEL MENU ANIMATIE --- */
#mobile-menu {
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    background: white;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: 50;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: all 0.3s ease-in-out;
}
#mobile-menu.mobile-menu-open {
    display: block;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

#mobile-menu a {
    display: block;
    padding: 15px 20px;
    text-decoration: none;
    color: #4a5568;
    font-weight: 500;
    border-bottom: 1px solid #f7fafc;
}
#mobile-menu a.login-btn {
    color: white !important;
    background-color: var(--keet-light-green);
}
@media (min-width: 768px) {
    .public-nav {
        padding: 15px 30px;
    }
    .public-nav .nav-links {
        display: flex;
    }
    #hamburger-btn {
        display: none;
    }
    #mobile-menu {
        display: none !important;
    }
}
.public-nav .nav-links a {
    color: #4a5568;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 5px;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.public-nav .nav-links a:hover {
    background-color: #f7fafc;
    color: #2d3748;
}
.public-nav .nav-links a.active {
    color: var(--keet-dark-green);
    font-weight: 600;
}
.public-nav .nav-links .login-btn {
    background-color: var(--keet-light-green);
    color: white !important;
}
.public-nav .nav-links .login-btn:hover {
    background-color: var(--keet-light-hover);
    color: white !important;
}

/* --- NIEUWE HERO SECTIE (Professioneel) --- */
.hero-section {
    position: relative;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}
.hero-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); 
    z-index: 2;
}
.hero-content {
    position: relative;
    z-index: 3;
    padding: 1.5rem;
    max-width: 600px;
}
.hero-content h1 {
    font-size: 3.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.hero-content p {
    font-size: 1.25rem;
    color: #e2e8f0;
    margin-bottom: 2rem;
}
.hero-content .button {
    font-size: 18px;
    padding: 15px 30px;
    background-color: var(--keet-light-green);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.hero-content .button:hover {
    background-color: var(--keet-light-hover);
    transform: translateY(-3px);
}
@media (max-width: 768px) {
    .hero-section {
        height: 400px;
    }
    .hero-content h1 {
        font-size: 2.5rem;
    }
    .hero-content p {
        font-size: 1rem;
    }
}

/* --- FEATURE BLOKKEN (BENTO GRID) --- */
.feature-section {
    padding: 40px 20px;
    background-color: #f4f7f6;
}
.bento-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.bento-item {
    background-color: white;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
}
.bento-item:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transform: translateY(-5px);
}
.bento-item h3, .bento-item h4 {
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--keet-dark-green);
    font-size: 1.5rem;
}
.bento-item p {
    color: #4a5568;
    line-height: 1.6;
    flex-grow: 1;
}
.bento-item .button {
    background-color: var(--keet-light-green);
    padding: 10px 20px;
    margin-top: 15px;
    text-align: center;
    width: fit-content;
}
.bento-item .button:hover {
    background-color: var(--keet-light-hover);
}
.bento-item-large {
    grid-column: span 2;
}
.bento-item-large h3 {
    color: white;
    font-size: 2.2rem;
}
.bento-item-large p {
    color: #e2e8f0;
    font-size: 1.1rem;
}
.bento-item-large .button {
    background-color: white;
    color: var(--keet-dark-green) !important;
}
.bento-item-large .button:hover {
    background-color: #f0f0f0;
}
@media (max-width: 768px) {
    .bento-grid {
        grid-template-columns: 1fr;
    }
    .bento-item-large {
        grid-column: span 1;
    }
    .bento-item-large h3 {
        font-size: 2rem;
    }
}

/* --- PROFESSIONELE INFO PAGINA --- */
.info-intro {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
}
.info-intro h1 {
    font-size: 2.5rem;
    margin-bottom: 15px;
}
.info-intro .info-lead {
    font-size: 1.25rem;
    color: #4a5568;
    max-width: 700px;
    margin: 0 auto;
}
.info-section-title {
    text-align: center;
    font-size: 2rem;
    color: var(--keet-dark-green);
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 10px;
    margin-bottom: 30px;
}
.info-data-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 768px) {
    .info-data-grid {
        grid-template-columns: 1fr 1fr;
    }
}
.info-card {
    background-color: white;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}
.info-card h2 {
    margin-top: 0;
    font-size: 1.8rem;
    color: var(--keet-dark-green);
}
.info-card .prijslijst-munt {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--keet-dark-hover);
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}
.info-card .prijslijst-items {
    list-style: none;
    padding: 0;
    margin: 0;
}
.info-card .prijslijst-items li {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    font-size: 1.1rem;
    border-bottom: 1px solid #f7fafc;
}
.info-card .prijslijst-items li span:first-child {
    font-weight: 500;
    color: #2d3748;
}
.info-card .prijslijst-items li span:last-child {
    font-weight: 600;
}
.bestuur-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}
.bestuur-list span {
    background-color: var(--keet-gray);
    padding: 8px 15px;
    border-radius: 20px;
    font-weight: 500;
    font-size: 15px;
    border: 1px solid #e2e8f0;
}
.info-gallery-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 768px) {
    .info-gallery-grid {
        grid-template-columns: 1fr 1fr;
    }
}
.info-gallery-grid img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.social-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}
@media (min-width: 768px) {
    .social-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.social-btn {
    font-size: 1rem;
    font-weight: 600;
    padding: 20px;
    text-align: center;
}
.social-facebook { background-color: #1877F2; }
.social-facebook:hover { background-color: #166CD7; }
.social-instagram { background-color: #E4405F; }
.social-instagram:hover { background-color: #D02D4C; }
.social-whatsapp { background-color: #25D366; }
.social-whatsapp:hover { background-color: #1EBE5A; }
.info-card .contact-subheader {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--keet-dark-green);
    margin-top: 25px;
    margin-bottom: 10px;
    border-top: 1px solid #eee;
    padding-top: 20px;
}
.info-card .contact-email-btn {
    background-color: var(--keet-gray-dark);
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    font-size: 0.9rem;
}
.info-card .contact-email-btn:hover {
    background-color: #5a6268;
}

/* --- PROFESSIONELE AANVRAAG PAGINA --- */
.aanvraag-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    background-color: white;
    padding: 20px;
    border-radius: 12px;
}
@media (min-width: 768px) {
    .aanvraag-grid {
        grid-template-columns: 1fr 1fr;
        padding: 40px;
    }
}
.aanvraag-info h1 {
    margin-top: 0;
}
.aanvraag-info .info-lead {
    font-size: 1.1rem;
    color: #4a5568;
    line-height: 1.6;
}
.aanvraag-subheader {
    font-size: 1.3rem;
    color: var(--keet-dark-green);
    margin-top: 30px;
    border-bottom: 2px solid var(--keet-gray);
    padding-bottom: 10px;
}
.aanvraag-stappen {
    list-style: none;
    padding-left: 0;
    margin-top: 20px;
}
.aanvraag-stappen li {
    display: flex;
    align-items: center;
    font-size: 1rem;
    color: #333;
    margin-bottom: 15px;
}
.aanvraag-stappen li span {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--keet-light-green);
    margin-right: 15px;
    background-color: var(--keet-green-bg);
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.aanvraag-form-container {
    background-color: var(--keet-gray);
    padding: 30px;
    border-radius: 12px;
}
.aanvraag-form-container .form-group {
    margin-bottom: 15px;
}
.aanvraag-form-container button[type="submit"] {
    width: 100%;
    font-size: 1.1rem;
    padding: 15px;
}


/* --- ALGEMENE CONTENT CONTAINER --- */
.container {
    max-width: 900px;
    margin: 20px auto;
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
@media (min-width: 768px) {
    .container {
        margin: 30px auto;
        padding: 30px;
    }
}

/* --- FORMULIER (Slick) --- */
.form-container {
    max-width: 500px;
}
.form-container h2 {
    text-align: center;
    margin-top: 0;
}
.form-container form {
    display: flex;
    flex-direction: column;
}
.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}
.form-group label {
    font-weight: 600;
    margin-bottom: 5px;
    font-size: 14px;
}
.form-group input {
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
}
.form-container button[type="submit"] {
    margin-top: 10px;
    font-weight: 600;
    background-color: var(--keet-light-green);
}
.form-container button[type="submit"]:hover {
    background-color: var(--keet-light-hover);
}
#form-status, #login-error {
    text-align: center;
    font-weight: 600;
    margin-top: 15px;
}
#form-status { color: green; }
#login-error { color: #e74c3c; }

/* --- Google Login Knoppen --- */
.google-btn {
    background-color: #4285F4;
    color: white;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    font-weight: 500;
}
.google-btn:hover {
    background-color: #357ae8;
}
.google-btn svg {
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    padding: 2px;
}
.divider {
    font-size: 14px;
    color: #6c757d;
    text-align: center;
    margin: 20px 0;
    display: flex;
    align-items: center;
}
.divider::before, .divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #e2e8f0;
}
.divider::before { margin-right: 10px; }
.divider::after { margin-left: 10px; }


/* ==========================================================================
   ADMIN DASHBOARD (VERNIEUWD: Sticky & Pills)
   ========================================================================== */
.admin-header {
    background: white;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    position: relative;
    z-index: 101;
}
.admin-header h1 {
    margin: 0;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

/* Sticky Tabs Container */
.admin-tabs-wrapper {
    background: white;
    padding: 10px 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    position: sticky; /* Blijft plakken bovenaan */
    top: 0;
    z-index: 100; /* Boven de rest van de pagina */
    margin-bottom: 25px;
    
    /* Voor mobiel scrollen (swipen) */
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    
    /* Verberg de lelijke scrollbar */
    scrollbar-width: none;
}
.admin-tabs-wrapper::-webkit-scrollbar { display: none; }

/* De Knoppen: PILL-STYLE (Afgerond & Gekleurd) */
.admin-tabs {
    display: flex;
    gap: 10px; /* Ruimte tussen de knoppen */
    border-bottom: none;
}
.tab-button {
    background-color: #4a5568;
    color: #4a5568; /* Donkergrijs voor inactief */
    padding: 8px 20px; /* Lekker wat ruimte */
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 30px; /* DIT ZORGT VOOR DE RONDE VORM (PILL) */
    border-bottom: none; /* Geen lijntjes meer onderaan */
    margin: 0;
    transition: all 0.2s ease;
    cursor: pointer;
    white-space: nowrap; /* Zorgt dat tekst op 1 regel blijft */
}
.tab-button:hover {
    background-color: #f7fafc; /* Lichte achtergrond bij hover */
    color: var(--keet-dark-green);
}
/* ACTIEVE STAAT: Groene achtergrond, witte tekst */
.tab-button.active {
    background-color: var(--keet-dark-green) !important;
    color: white !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    transform: translateY(-1px);
    border-bottom: none; /* Zeker weten geen lijntjes */
    opacity: 1;
}

/* DE CRUCIALE FIX VOOR ZICHTBAARHEID VAN DE CONTENT */
.tab-content {
    display: none !important; /* Verberg alles standaard */
    padding-bottom: 40px;
}
.tab-content.active {
    display: block !important; /* Toon alleen de actieve */
    animation: fadeIn 0.3s ease;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* Mobiele aanpassingen */
@media (max-width: 768px) {
    .admin-header { padding: 12px 15px; }
    .admin-tabs-wrapper { padding: 10px 15px; }
    
    /* Maak de uitlogknop iets kleiner op mobiel */
    .admin-header #logout-button {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }
}

/* --- ADMIN PAGINA CONTAINER --- */
.admin-container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0;
}

/* --- ADMIN SECTIE TITEL --- */
.admin-section-header {
    font-size: 22px;
    color: var(--keet-dark-green);
    border-bottom: 2px solid var(--keet-gray);
    padding-bottom: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.admin-section-header:first-of-type {
    margin-top: 0;
}


/* --- OPKOMST LIJST --- */
.opkomst-group {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    margin-bottom: 20px;
    overflow: hidden;
}
.opkomst-group-header {
    background: var(--keet-gray);
    padding: 15px 20px;
    border-bottom: 1px solid #e2e8f0;
}
.opkomst-group-header h3 {
    margin: 0;
}
.opkomst-visitor {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 15px 20px;
    border-bottom: 1px solid #f7fafc;
}
@media (min-width: 768px) {
    .opkomst-visitor {
        grid-template-columns: 1fr 1fr 1fr;
    }
}
.opkomst-visitor:last-child {
    border-bottom: none;
}
.opkomst-visitor span {
    font-size: 15px;
}
.opkomst-visitor .name {
    font-weight: 600;
}
.opkomst-visitor .email, .opkomst-visitor .phone {
    color: #4a5568;
}

/* --- HISTORIE TABEL --- */
.historie-table-wrapper {
    overflow-x: auto;
}
.historie-table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}
.historie-table th, .historie-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}
.historie-table th {
    background-color: var(--keet-gray);
    font-size: 13px;
    text-transform: uppercase;
    color: #4a5568;
}
.historie-table td {
    font-size: 15px;
}


/* --- ADMIN AANVRAAG KAARTEN --- */
.requests-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}
.request-card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: all 0.3s ease;
}
.request-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transform: translateY(-3px);
}
.request-card-header {
    padding: 15px 20px;
    background-color: #f9f9f9;
    border-bottom: 1px solid #eee;
}
.request-card-header h3 {
    margin: 0;
    color: var(--keet-dark-green);
}
.request-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.card-field {
    display: flex;
    flex-direction: column;
    font-size: 15px;
}
.card-field .label {
    font-weight: 600;
    color: #555;
    font-size: 13px;
}
.card-field .value {
    color: #333;
    text-align: left;
}
@media (min-width: 768px) {
    .card-field {
        flex-direction: row;
        justify-content: space-between;
    }
    .card-field .value { text-align: right; }
    .card-field .label { font-size: 15px; }
}
.request-actions {
    margin-top: 15px;
    padding: 20px;
    background-color: #f9f9f9;
    border-top: 1px solid #eee;
    display: flex;
    gap: 10px;
}
.approve-btn { background-color: var(--keet-light-green); }
.approve-btn:hover { background-color: var(--keet-light-hover); }
.reject-btn { background-color: var(--keet-red); }
.reject-btn:hover { background-color: #c53030; }


/* --- LEDENBEHEER LIJST --- */
.member-list {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}
.member-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease;
}
.member-item.pending {
    background-color: var(--keet-yellow-bg);
    border-left: 5px solid var(--keet-yellow);
}
.member-item:last-child {
    border-bottom: none;
}
.member-info {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}
@media (min-width: 768px) {
    .member-item {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .member-info { margin-bottom: 0; }
}
.member-info .name.pending-alert::before {
    content: '⚠️ ';
    color: var(--keet-yellow);
}
.member-info .member-name-clickable {
    cursor: pointer;
    color: var(--keet-dark-green);
    text-decoration: underline;
}
.member-info .email {
    font-size: 14px;
    color: #7f8c8d;
}
.member-actions .button {
    background-color: #1abc9c;
}
.member-actions .button:hover {
    background-color: #16a085;
}


/* --- MODAL (POP-UP) STIJLEN --- */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    overflow-y: auto; 
    padding: 20px 0;
}
.modal-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    max-width: 600px;
    width: 90%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    text-align: left;
    margin: auto;
}
@media (min-width: 768px) {
    .modal-content { padding: 30px; }
}
.modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
}
.modal-close:hover {
    color: #333;
}
.modal-content .button {
    margin-top: 20px;
    font-size: 16px;
    padding: 12px 20px;
}
.modal-content p {
    margin-top: 0;
}
.modal-content strong {
    color: var(--keet-red);
}

/* Tikkie Pop-up Stijlen */
#admin-notify-modal .modal-content, #confirm-modal .modal-content, #tikkie-warning-modal .modal-content, #tikkie-confirm-modal .modal-content {
    text-align: center;
}
#admin-notify-list {
    list-style-type: none;
    padding: 0;
    margin: 10px 0;
    font-weight: 600;
    color: var(--keet-dark-green);
}
.confirm-actions, .tikkie-confirm-actions, .tikkie-warning-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
@media (min-width: 768px) {
    .confirm-actions, .tikkie-confirm-actions, .tikkie-warning-actions {
        flex-direction: row;
        justify-content: center;
    }
}
.confirm-yes-btn {
    background-color: var(--keet-red);
}
.confirm-yes-btn:hover {
    background-color: var(--keet-red-hover);
}
.confirm-no-btn, .tikkie-confirm-no, .tikkie-warning-cancel {
    background-color: #6c757d;
    width: 100%;
}
.confirm-no-btn:hover, .tikkie-confirm-no:hover, .tikkie-warning-cancel:hover {
    background-color: #5a6268;
}
.confirm-yes-btn.green, .tikkie-confirm-yes, .tikkie-warning-proceed {
    background-color: var(--keet-light-green);
    width: 100%;
}
.confirm-yes-btn.green:hover, .tikkie-confirm-yes:hover, .tikkie-warning-proceed:hover {
    background-color: var(--keet-light-hover);
}
@media (min-width: 768px) {
    .confirm-no-btn, .tikkie-confirm-no, .tikkie-warning-cancel { width: auto; }
    .confirm-yes-btn.green, .tikkie-confirm-yes, .tikkie-warning-proceed { width: auto; }
}

/* Factuur pop-up */
#invoice-modal .form-group, #edit-invoice-modal .form-group {
    margin-bottom: 15px;
}
#invoice-modal .form-group label, #edit-invoice-modal .form-group label {
    font-weight: 600;
    margin-bottom: 5px;
}
#invoice-modal .form-group input, #edit-invoice-modal .form-group input {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
}
#edit-invoice-modal .tikkie-warning {
    font-size: 13px;
    color: #d69e2e;
    background-color: var(--keet-yellow-bg);
    border: 1px solid var(--keet-yellow-border);
    padding: 10px;
    border-radius: 5px;
}

/* Lid Details pop-up (Admin) */
#member-detail-modal .modal-content {
    max-width: 800px;
}
.modal-section {
    margin-top: 20px;
    border-top: 1px solid #eee;
    padding-top: 20px;
}
.invoice-list-item-admin {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f9f9f9;
}
@media (min-width: 768px) {
    .invoice-list-item-admin {
        grid-template-columns: 1fr auto auto;
    }
}
.invoice-list-item-admin:last-child {
    border-bottom: none;
}
.invoice-info .description {
    font-weight: 600;
}

/* --- STATUS BADGE --- */
.status-badge {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    display: inline-block;
    margin-top: 4px;
}
.status-badge.status-open, .status-badge.status-pending {
    background-color: var(--keet-yellow-bg-badge); 
    color: var(--keet-yellow-text);
    border: 1px solid var(--keet-yellow-border);
}
.status-badge.status-paid {
    background-color: var(--keet-green-bg);
    color: var(--keet-green-text);
    border: 1px solid var(--keet-light-green);
}
.status-badge.status-rejected {
    background-color: var(--keet-red-bg);
    color: var(--keet-red-text);
    border: 1px solid var(--keet-red);
}
.invoice-info .status { display: none; }
/* --- EINDE STATUS BADGE --- */


.invoice-amount {
    font-weight: 600;
    color: #2c3e50;
    font-size: 16px;
    text-align: left;
}
@media (min-width: 768px) {
    .invoice-amount {
        text-align: right;
        padding: 0 20px;
    }
}
.invoice-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: flex-start;
}
@media (min-width: 768px) {
    .invoice-actions {
        justify-content: flex-end;
    }
}
.invoice-actions .button {
    padding: 5px 10px;
    font-size: 13px;
    margin-top: 0;
}
.confirm-payment-btn { background-color: var(--keet-light-green); }
.confirm-payment-btn:hover { background-color: var(--keet-light-hover); }
.edit-btn { background-color: #f39c12; }
.edit-btn:hover { background-color: #d69e2e; }
.cancel-btn { background-color: var(--keet-red); }
.cancel-btn:hover { background-color: #c53030; }
.reject-payment-btn { background-color: var(--keet-red); }
.reject-payment-btn:hover { background-color: var(--keet-red-hover); }


/* --- LID DASHBOARD STIJLEN --- */
.invoice-summary {
    background: white;
    border: 1px solid #e2e8f0;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}
.invoice-summary h3 {
    margin-top: 0;
}
.invoice-summary .total-amount {
    font-size: 28px;
    font-weight: 600;
    color: var(--keet-red);
}

.invoice-list-member {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}
.invoice-item-member {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
}
@media (min-width: 768px) {
    .invoice-item-member {
        grid-template-columns: 1fr auto auto;
    }
}
.invoice-item-member:last-child {
    border-bottom: none;
}
.invoice-item-info .description {
    font-weight: 600;
    font-size: 17px;
}
.invoice-item-info .status { display: none; }
.invoice-item-info .status-badge {
    margin-top: 5px;
}
.invoice-item-amount {
    font-size: 18px;
    font-weight: 600;
    text-align: left;
}
@media (min-width: 768px) {
    .invoice-item-amount {
        text-align: right;
    }
}
.invoice-item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
}
@media (min-width: 768px) {
    .invoice-item-actions {
        justify-content: flex-end;
    }
}
.invoice-item-actions .button {
    margin-top: 0;
    padding: 8px 12px;
    font-size: 14px;
}
.tikkie-btn { background-color: var(--tikkie-purple); }
.tikkie-btn:hover { background-color: var(--tikkie-purple-hover); }
.cash-btn { background-color: var(--keet-dark-green); }
.cash-btn:hover { background-color: var(--keet-dark-hover); }
.cancel-pending-btn { background-color: var(--keet-gray-dark); }
.cancel-pending-btn:hover { background-color: #5a6268; }


/* --- FOOTER STIJLEN --- */
.site-footer {
    text-align: center;
    padding: 30px 20px;
    margin-top: 40px;
    background-color: #f8f9fa;
    border-top: 1px solid #e2e8f0;
    color: #7f8c8d;
}
.footer-links {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
}
@media (min-width: 768px) {
    .footer-links {
        flex-direction: row;
        gap: 20px;
    }
}
.footer-links a {
    color: #4a5568;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}
.footer-links a:hover {
    text-decoration: underline;
    color: var(--keet-dark-green);
}
.footer-copyright {
    font-size: 12px;
}

/* --- Stijlen voor Leden Slepen --- */
.member-list .member-item .member-info {
    cursor: grab;
}
.member-list .member-item.sortable-chosen {
    cursor: grabbing;
}
.member-list .member-item.sortable-ghost {
    opacity: 0.4;
    background: #eaf5ff;
}

/* --- Stijlen voor Munten Weergave --- */
.invoice-item-info .munt-aantal {
    display: block;
    font-size: 14px;
    color: var(--keet-gray-dark);
    font-weight: 500;
    margin-top: 4px;
}

/* --- Stijlen voor Factuur Datum (Leden Dashboard) --- */
.invoice-item-info .invoice-date {
    display: block;
    font-size: 14px;
    color: var(--keet-gray-dark);
    font-weight: 500;
    margin-top: 4px;
}
.invoice-item-info .status-badge {
    margin-top: 5px;
}

/* ======================================== */
/* === STIJLEN (Leden Dashboard Tabs) === */
/* ======================================== */

.member-tabs {
    display: flex;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 20px;
}
.member-tab-button {
    font-size: 16px;
    font-weight: 600;
    padding: 12px 20px;
    cursor: pointer;
    border: none;
    background-color: #4a5568;
    color: #4a5568;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s ease;
}
.member-tab-button:hover {
    background-color: var(--keet-dark-green);
    color: #2d3748;
}
.member-tab-button.active {
    color: var(--keet-dark-green);
    border-bottom-color: var(--keet-dark-green);
}
.member-tab-content {
    display: none;
}
.member-tab-content.active {
    display: block;
}

/* ======================================== */
/* === ✨ PREMIUM STATS GRID (FIXED) === */
/* ======================================== */

.stats-grid {
    display: grid;
    /* Magie: Dit zorgt dat ze op mobiel automatisch onder elkaar springen 
       en op desktop netjes naast elkaar staan, zonder media queries! */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    
    /* CRUCIAAL: Grote marge aan de onderkant om overlap te voorkomen */
    margin-bottom: 60px; 
    padding: 5px; /* Ruimte voor de schaduw */
}

.stat-card {
    background-color: var(--bg-card);
    border-radius: 16px; /* Mooie ronde hoeken */
    padding: 25px 20px; /* Ruimte binnenin */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04); /* Zeer subtiele schaduw */
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    
    /* Flexbox om tekst netjes uit te lijnen */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Hover effect: Kaartje komt iets omhoog */
.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.1);
    border-color: rgba(0,0,0,0.1);
}

/* --- KLEURACCENTEN (LINKS) --- */
/* Een mooi gekleurd balkje aan de linkerkant voor herkenning */
.stat-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 6px;
    background: var(--keet-gray-dark); /* Standaard */
}

/* 1e kaart (Openstaand) = Rood */
.stat-card:nth-child(1)::before { background-color: var(--keet-red); }

/* 2e kaart (Munten) = Geel/Goud */
.stat-card:nth-child(2)::before { background-color: #f6ad55; }

/* 3e kaart (Betaald) = Groen */
.stat-card:nth-child(3)::before { background-color: var(--keet-light-green); }


/* --- TYPOGRAFIE --- */
.stat-card h4 {
    margin: 0 0 10px 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px; /* Ruimte tussen letters voor 'chique' look */
}

.stat-card p {
    margin: 0;
    font-size: 2.2rem; /* Lekker groot cijfer */
    font-weight: 800;
    color: var(--text-main);
    line-height: 1;
}

/* Specifieke kleur voor het openstaande bedrag */
.stat-card p#outstanding-amount {
    color: var(--keet-red);
}

/* ======================================== */
/* === STIJLEN (Mijn Profiel Uploader) === */
/* ======================================== */
#profile-form {
    background-color: var(--keet-gray);
    padding: 30px;
    border-radius: 12px;
}
#profile-form .form-group input[disabled] {
    background-color: #e2e8f0;
    cursor: not-allowed;
    color: #718096;
}
#profile-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    min-height: 120px;
}
#profile-status {
    font-weight: 600;
}
.profile-uploader {
    align-items: center;
    text-align: center;
}
#profile-image-preview {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #e2e8f0;
    border: 3px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 15px;
}
/* Verberg de lelijke standaard 'kies bestand' knop */
#profile-image-input {
    display: none;
}
/* Stijl de 'label' als een knop */
.button-upload {
    background-color: var(--keet-gray-dark) !important;
    padding: 8px 15px !important;
    font-size: 14px !important;
}
.button-upload:hover {
    background-color: #5a6268 !important;
}
#upload-status {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 500;
}

/* ======================================== */
/* === STIJLEN (Admin Profiel Reset) === */
/* ======================================== */
.admin-profile-section {
    background-color: #f9f9f9;
    border-radius: 8px;
    padding: 20px;
}
.admin-profile-description {
    font-size: 15px;
    color: #333;
    line-height: 1.6;
    background-color: white;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #eee;
    min-height: 40px;
}
.reset-profile-btn {
    background-color: var(--keet-red) !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
    margin-top: 10px !important;
}
.reset-profile-btn:hover {
    background-color: var(--keet-red-hover) !important;
}

/* ======================================== */
/* === STIJLEN (Smoelenboek) === */
/* ======================================== */
.smoelenboek-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
.member-card {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
}
.member-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.member-card-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    background-color: #f0f0f0;
}
.member-card-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: var(--keet-dark-green);
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}
.member-card-body {
    padding: 20px;
}
.member-card-name {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.4rem;
    color: #2d3748;
}
.member-card-description {
    font-size: 15px;
    color: #4a5568;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;  
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 60px;
}

/* =============================================== */
/* === BADGES (FIX: ONDOORZICHTIG) === */
/* =============================================== */
.member-card { position: relative; }
.badge-container {
    position: absolute; top: 10px; right: 10px;
    display: flex; flex-direction: column; align-items: flex-end; gap: 5px; z-index: 10;
}
.member-badge {
    color: white; padding: 4px 10px; border-radius: 20px;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    opacity: 1 !important; /* Zorgt dat het niet doorzichtig is */
}
.badge-bestuur { background-color: var(--badge-bestuur) !important; }
.badge-gold { background-color: var(--badge-gold) !important; color: #5e4e08 !important; }
.badge-silver { background-color: var(--badge-silver) !important; color: #333 !important; }
.badge-bronze { background-color: var(--badge-bronze) !important; }
.badge-oudste { background-color: var(--badge-oudste) !important; }
.member-card-badge { display: none; }

/* ==========================================================================
   AANWEZIGHEID PAGINA (GEKLEURDE KNOPPEN)
   ========================================================================== */
.aanwezigheid-container { padding: 20px; }

.dag-header {
    display: flex; flex-direction: column; gap: 15px;
    border-bottom: 2px solid var(--border-subtle); padding-bottom: 15px; margin-bottom: 15px;
}
.dag-header h2 { margin: 0; text-align: center; }

.button-group {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
}
/* Standaard Grijs */
.button-group .button {
    background-color: var(--keet-gray-dark);
    padding: 10px 5px; font-size: 13px; margin: 0 !important;
    border-radius: 6px;
}
.button-group .button:hover { background-color: #5a6268; transform: none; }

/* Actieve Kleuren */
.button-group .button.active-ja { background-color: var(--keet-light-green); }
.button-group .button.active-ja:hover { background-color: var(--keet-light-hover); }

.button-group .button.active-misschien { background-color: var(--keet-yellow); }
.button-group .button.active-misschien:hover { background-color: #d69e2e; }

.button-group .button.active-nee { background-color: var(--keet-red); }
.button-group .button.active-nee:hover { background-color: var(--keet-red-hover); }

.status-lijsten { display: grid; grid-template-columns: 1fr; gap: 20px; }
.status-kolom h4 {
    display: block; border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 5px; color: var(--text-muted); margin-top: 0;
}
.status-kolom ul {
    list-style: none; padding: 0; margin: 0; min-height: 50px; max-height: 250px; overflow-y: auto;
    background: var(--bg-body); border: 1px solid var(--border-subtle); border-radius: 5px; padding: 10px;
}
.status-kolom li { padding: 6px 0; font-weight: 500; border-bottom: 1px solid var(--border-subtle); }

.aanwezigheid-mobile-tabs { display: none; }

@media (min-width: 768px) {
    .dag-header { flex-direction: row; justify-content: space-between; align-items: center; }
    .dag-header h2 { text-align: left; }
    .button-group { display: flex; width: auto; }
    .button-group .button { width: 110px; padding: 8px 15px; }
    .status-lijsten { grid-template-columns: repeat(3, 1fr); }
    .status-kolom ul { height: 200px; }
}


/* =============================================== */
/* === ADMIN AANWEZIGHEID STIJLEN === */
/* =============================================== */
.admin-aanwezigheid-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 768px) {
    .admin-aanwezigheid-grid {
        grid-template-columns: 1fr 1fr;
    }
}
.admin-aanwezigheid-grid .stat-card {
    background-color: white;
    padding: 20px;
}
.count-badges {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    font-size: 13px;
}
.count-badge {
    display: inline-flex;
    align-items: center;
}
.count-badge b { margin-left: 4px; }
.count-badge.green { color: var(--keet-dark-green); }
.count-badge.orange { color: #d69e2e; }
.count-badge.red { color: var(--keet-red); }

.detail-list {
    padding-left: 5px;
    margin: 0;
    list-style-type: none;
    font-size: 1rem;
    max-height: 300px;
    overflow-y: auto;
}
.detail-list li { margin-bottom: 5px; border-bottom: 1px solid #f9f9f9; padding-bottom: 5px; }


/* =============================================== */
/* === STIJLEN VOOR PROMPTS (POP-UPS) === */
/* =============================================== */
#historie-prompt-modal .form-group,
#planning-prompt-modal .form-group {
    margin-bottom: 20px;
}
#historie-prompt-modal .form-group label,
#planning-prompt-modal .form-group label {
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 10px;
    display: block;
}
#historie-prompt-modal .radio-group,
#planning-prompt-modal .radio-group {
    display: flex;
    gap: 20px;
}
#historie-prompt-modal .radio-group label,
#planning-prompt-modal .radio-group label {
    font-size: 1rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
}
#historie-prompt-modal input[type="radio"],
#planning-prompt-modal input[type="radio"] {
    width: 20px;
    height: 20px;
}
#planning-prompt-modal .button-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
#planning-prompt-modal .button {
    margin-top: 0 !important;
}


/* ==========================================================================
   NIEUW: IDEEËNBUS STIJLEN (CHAT/FORUM)
   ========================================================================== */
.ideas-grid { display: grid; gap: 20px; }
.idea-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0; /* Padding doen we in de inner divs */
    position: relative;
    overflow: hidden;
}
/* Header van idee */
.idea-main-content { padding: 20px; }
.idea-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.idea-header h3 { margin: 0; font-size: 18px; }
.idea-meta { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; }
.idea-desc { font-size: 15px; line-height: 1.5; margin-bottom: 15px; color: var(--text-main); }

/* Footer met stemknoppen */
.idea-footer {
    padding: 15px 20px;
    background-color: var(--bg-body); /* Licht contrast */
    border-top: 1px solid var(--border-subtle);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.vote-buttons { display: flex; gap: 10px; }
.vote-btn {
    background: #4a5568;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 6px 12px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    display: flex; align-items: center; gap: 6px;
    transition: all 0.2s ease;
}
.vote-btn:hover { background: var(--border-subtle); }
.vote-btn.voted.up { background-color: #C6F6D5; color: #22543D; border-color: #22543D; }
.vote-btn.voted.down { background-color: #FED7D7; color: #822727; border-color: #822727; }

.toggle-comments-btn {
    background: #4a5568; border: none; color: var(--keet-blue); 
    font-weight: 600; font-size: 14px; cursor: pointer; padding: 0;
}
.toggle-comments-btn:hover { text-decoration: underline; }

/* --- CHAT SECTIE (VERBORGEN) --- */
.comments-section {
    display: none; /* Standaard dicht */
    background-color: #f8fafc; /* Zeer licht grijs/blauw */
    border-top: 1px solid var(--border-color);
    padding: 20px;
}
.comments-list {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* De Bubbles */
.comment-bubble {
    padding: 10px 15px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.4;
    max-width: 85%;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
/* Gewone leden */
.comment-bubble.member {
    background-color: white;
    align-self: flex-start;
    border-bottom-left-radius: 2px;
    border: 1px solid var(--border-color);
}
/* Eigen berichten (optioneel, als we current user checken) */
.comment-bubble.own {
    background-color: #EBF8FF;
    align-self: flex-end;
    border-bottom-right-radius: 2px;
    border: 1px solid #BEE3F8;
}
/* Bestuur berichten (GROEN & OPVALLEND) */
.comment-bubble.admin {
    background-color: var(--keet-light-green);
    color: white;
    align-self: flex-start; /* Of end, afhankelijk van wie kijkt */
    border-bottom-left-radius: 2px;
    border: 1px solid var(--keet-dark-green);
}
/* Naam boven bericht */
.comment-author {
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 2px;
    display: block;
    color: #4a5568;
}
.comment-bubble.admin .comment-author {
    color: #e6fffa; /* Lichtgroen/wit voor contrast */
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.5px;
}
.comment-bubble.admin .comment-author::after {
    content: " (BESTUUR)";
    font-weight: 800;
}

/* Input veld */
.comment-form { display: flex; gap: 10px; }
.comment-input {
    flex-grow: 1;
    padding: 10px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    font-size: 14px;
}
.send-comment-btn {
    border-radius: 50%;
    width: 40px; height: 40px;
    padding: 0;
    display: flex; align-items: center; justify-content: center;
}

/* --- BINGO PRO STYLING --- */
.bingo-wrapper {
    background-color: #2d3748; /* Donkergrijze 'tafel' achtergrond */
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    border: 4px solid var(--keet-dark-green); /* Keet randje */
    margin-bottom: 20px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.bingo-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.bingo-cell {
    background-color: #fff;
    aspect-ratio: 1 / 1; /* Altijd vierkant */
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(14px, 4vw, 20px); /* Schaalbare tekst */
    font-weight: 800;
    color: #2d3748;
    cursor: pointer;
    user-select: none;
    /* 3D Knop Effect */
    box-shadow: 0 4px 0 #cbd5e0; 
    transform: translateY(0);
    transition: all 0.1s ease;
    border: 1px solid #cbd5e0;
}

.bingo-cell:active {
    transform: translateY(4px); /* Indruk effect */
    box-shadow: 0 0 0 #cbd5e0;
}

/* Aangevinkt vakje */
.bingo-cell.marked {
    background-color: var(--keet-light-green);
    color: white;
    border-color: #2f855a;
    box-shadow: 0 4px 0 #2f855a;
}
.bingo-cell.marked:active {
    box-shadow: 0 0 0 #2f855a;
}

/* Het Middelste Vakje (KEET) */
.bingo-cell.center-cell {
    background-color: var(--keet-red);
    color: white;
    font-size: 10px;
    line-height: 1.2;
    border-color: #c53030;
    box-shadow: 0 4px 0 #9b2c2c;
    z-index: 2;
}

/* --- KEET TINDER STYLING (FIXED) --- */
.tinder-container {
    background: white;
    width: 90%; /* Mobiel vriendelijker */
    max-width: 380px;
    height: 650px; /* Iets hoger voor ruimte */
    max-height: 85vh; /* Past altijd op scherm */
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;
    margin: auto;
}

.tinder-header {
    padding: 15px;
    text-align: center;
    border-bottom: 1px solid #eee;
    background: white;
    z-index: 5;
}
.tinder-header h3 { margin: 0; color: #fd297b; font-size: 1.2rem; }

#tinder-card-wrapper {
    flex-grow: 1;
    position: relative;
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f0f2f5;
    overflow: hidden; /* Belangrijk! */
}

#tinder-card {
    background: white;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, opacity 0.2s ease;
}

/* Fix voor afbeelding: altijd passend maken */
#tinder-img-container {
    flex-grow: 1; /* Neemt alle ruimte in behalve tekst */
    background: #333; /* Donkere achtergrond voor foto's */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

#tinder-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Zorgt dat foto het vak vult */
    pointer-events: none; /* Zorgt dat je niet per ongeluk de foto sleept */
}

.tinder-info {
    padding: 15px;
    background: white;
    border-top: 1px solid #f0f0f0;
    flex-shrink: 0; /* Voorkomt dat tekst geplet wordt */
}
.tinder-info h2 { margin: 0; font-size: 22px; color: #333; }
.tinder-info p { color: #666; margin-top: 5px; font-size: 14px; line-height: 1.4; }

.tinder-controls {
    padding: 15px 20px 25px;
    display: flex;
    justify-content: center;
    gap: 40px;
    background: white;
    z-index: 5;
}

/* Knoppen */
.tinder-btn {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    border: none;
    font-size: 28px;
    cursor: pointer;
    transition: transform 0.2s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex; align-items: center; justify-content: center;
    background: white;
}
.tinder-btn:active { transform: scale(0.9); }
.tinder-btn.no { border: 2px solid #ec5e6f; color: #ec5e6f; }
.tinder-btn.yes { border: 2px solid #42e2a0; color: #42e2a0; }

/* MATCH OVERLAY (FIXED) */
#tinder-match-overlay {
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background: rgba(0, 0, 0, 0.92); /* Iets donkerder voor contrast */
    z-index: 100; /* Zeker weten boven alles */
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    padding: 20px;
    animation: popIn 0.3s ease;
}

@keyframes popIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

#tinder-match-overlay h1 {
    font-family: 'Inter', sans-serif;
    font-style: italic;
    color: #42e2a0;
    font-size: 42px;
    transform: rotate(-6deg);
    margin-bottom: 15px;
    text-shadow: 3px 3px 0 #fff;
}

#match-continue-btn {
    background: #fd297b;
    border: none;
    color: white;
    padding: 12px 30px;
    font-size: 16px;
    border-radius: 30px;
    margin-top: 30px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(253, 41, 123, 0.4);
    transition: transform 0.2s;
}
#match-continue-btn:active { transform: scale(0.95); }

/* Animatie Classes */
.swipe-left { transform: translateX(-300px) rotate(-30deg) !important; opacity: 0; }
.swipe-right { transform: translateX(300px) rotate(30deg) !important; opacity: 0; }

/* --- BAROMETER / SFEERMETER --- */
.barometer-container {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    margin-bottom: 30px;
    text-align: center;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
}

.barometer-label {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #718096;
    margin-bottom: 5px;
    font-weight: 700;
}

.barometer-status {
    font-size: 28px;
    font-weight: 900;
    margin: 0;
    text-transform: uppercase;
}

.barometer-bar-bg {
    height: 12px;
    background: #edf2f7;
    border-radius: 6px;
    margin-top: 15px;
    overflow: hidden;
    position: relative;
}

.barometer-bar-fill {
    height: 100%;
    width: 0%; /* Wordt via JS gezet */
    background: var(--keet-dark-green);
    border-radius: 6px;
    transition: width 0.5s ease-out, background-color 0.5s ease;
}

/* Animaties voor hoge niveaus */
@keyframes pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(229, 62, 62, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(229, 62, 62, 0); }
    100% { box-shadow: 0 0 0 0 rgba(229, 62, 62, 0); }
}

.status-alarm {
    animation: pulse-red 2s infinite;
    border-color: var(--keet-red);
}

/* --- BAROMETER ALARMS --- */

/* Bestaande pulse (voor druk/erg gezellig) */
@keyframes pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(229, 62, 62, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(229, 62, 62, 0); }
    100% { box-shadow: 0 0 0 0 rgba(229, 62, 62, 0); }
}

/* NIEUW: Extreem Knipperen (Rood/Zwart) voor VOL */
@keyframes flash-panic {
    0% { background-color: #e53e3e; border-color: black; color: black; }
    50% { background-color: black; border-color: #e53e3e; color: white; }
    100% { background-color: #e53e3e; border-color: black; color: black; }
}

/* NIEUW: Crisis Knipperen (Paars/Rood) voor BIER OP */
@keyframes flash-crisis {
    0% { background-color: #8400ff; border-color: red; color: white; }
    50% { background-color: red; border-color: #8400ff; color: white; }
    100% { background-color: #8400ff; border-color: red; color: white; }
}

.status-alarm {
    animation: pulse-red 2s infinite;
    border-color: var(--keet-red);
}

.status-panic {
    animation: flash-panic 0.5s infinite; /* Lekker snel knipperen */
    font-weight: 900;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

.status-crisis {
    animation: flash-crisis 0.4s infinite; /* Nog sneller */
    font-weight: 900;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.8);
}

/* Zorg dat de teksten binnenin ook leesbaar blijven tijdens knipperen */
.status-panic .barometer-label, 
.status-panic .barometer-status,
.status-panic p,
.status-crisis .barometer-label, 
.status-crisis .barometer-status,
.status-crisis p {
    color: inherit !important; /* Neemt kleur van animatie over */
}

/* --- LIVE STATUS BALK (REAL GLASS & PULSE) --- */
.status-bar {
    /* Positie */
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%); /* Alleen centreren, GEEN schaal animatie hier */
    z-index: 20;

    /* Layout */
    width: 90%;
    max-width: 450px;
    padding: 15px 20px;
    text-align: center;

    /* HET ECHTE GLAS EFFECT */
    /* We gebruiken een lage opacity (0.4 tot 0.6) zodat je er doorheen kijkt */
    backdrop-filter: blur(15px); 
    -webkit-backdrop-filter: blur(15px);
    border-radius: 50px;
    
    /* Standaard randje */
    border: 1px solid rgba(255, 255, 255, 0.2);

    /* Tekst */
    color: white;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5); /* Betere leesbaarheid op glas */
    
    transition: all 0.4s ease;
}

.status-bar.hidden {
    opacity: 0;
    top: -50px;
    pointer-events: none;
}

/* 1. DICHT (Donker Glas) */
.status-bar.closed {
    background: rgba(20, 20, 20, 0.7); /* Donker, maar doorzichtig */
    color: #a0aec0;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* 2. INLOOP (Blauw Glas - Alleen de gloed beweegt) */
@keyframes glow-blue {
    0% { 
        box-shadow: 0 0 10px rgba(49, 130, 206, 0.3); 
        border-color: rgba(49, 130, 206, 0.3);
    }
    50% { 
        box-shadow: 0 0 25px rgba(49, 130, 206, 0.8); /* Grote gloed */
        border-color: rgba(49, 130, 206, 0.8);
    }
    100% { 
        box-shadow: 0 0 10px rgba(49, 130, 206, 0.3); 
        border-color: rgba(49, 130, 206, 0.3);
    }
}

.status-bar.inloop {
    background: rgba(49, 130, 206, 0.45); /* Transparant Blauw */
    animation: glow-blue 2.5s infinite ease-in-out;
}

/* 3. OPEN (Groen Glas - Alleen de gloed beweegt) */
@keyframes glow-green {
    0% { 
        box-shadow: 0 0 10px rgba(72, 187, 120, 0.3); 
        border-color: rgba(72, 187, 120, 0.3);
    }
    50% { 
        box-shadow: 0 0 30px rgba(72, 187, 120, 0.8); /* Grote gloed */
        border-color: rgba(72, 187, 120, 0.9);
    }
    100% { 
        box-shadow: 0 0 10px rgba(72, 187, 120, 0.3); 
        border-color: rgba(72, 187, 120, 0.3);
    }
}

.status-bar.open {
    background: rgba(56, 161, 105, 0.45); /* Transparant Groen */
    animation: glow-green 2.5s infinite ease-in-out;
}

/* 4. ALARM (Rood Glas - Knipperend) */
@keyframes flash-glass {
    0% { background: rgba(229, 62, 62, 0.6); border-color: white; }
    50% { background: rgba(0, 0, 0, 0.8); border-color: #e53e3e; color: #e53e3e; }
    100% { background: rgba(229, 62, 62, 0.6); border-color: white; }
}

.status-bar.full {
    animation: flash-glass 0.6s infinite;
    box-shadow: 0 0 40px rgba(229, 62, 62, 0.6);
}

/* --- STATUS: KOFFIE (Level 8) --- */
@keyframes steam-glow {
    0% { box-shadow: 0 0 10px rgba(111, 78, 55, 0.4); border-color: rgba(111, 78, 55, 0.5); }
    50% { box-shadow: 0 0 25px rgba(196, 164, 132, 0.6); border-color: rgba(196, 164, 132, 0.8); } /* Goud/Bruine gloed */
    100% { box-shadow: 0 0 10px rgba(111, 78, 55, 0.4); border-color: rgba(111, 78, 55, 0.5); }
}

.status-bar.coffee {
    background: rgba(60, 40, 30, 0.9); /* Diep donkerbruin glas */
    color: #f0e6d2; /* Crème kleurige tekst (zoals melkschuim) */
    animation: steam-glow 4s infinite ease-in-out; /* Langzame, warme animatie */
}

/* =========================================
   🍟 SNACK-O-MATIC: ULTIMATE PRO EDITION
   ========================================= */

/* --- 1. BESTELGESCHIEDENIS (TICKETS) --- */
.my-orders-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.order-ticket {
    background: white;
    border: 1px solid #e2e8f0;
    border-left: 5px solid #cbd5e0;
    border-radius: 10px;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

.order-ticket.status-open { border-left-color: #3182ce; background-color: #f7fafc; }
.order-ticket.status-completed { border-left-color: #38a169; background-color: #f0fff4; }

.order-info h4 { margin: 0; font-size: 1rem; color: #2d3748; }
.order-info p { margin: 5px 0 0 0; font-size: 0.85rem; color: #718096; }

.order-status-badge {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 20px;
    white-space: nowrap;
}
.status-open .order-status-badge { background: #ebf8ff; color: #3182ce; }
.status-completed .order-status-badge { background: #c6f6d5; color: #2f855a; }


/* --- 2. HET MENU (De Kaarten & Knoppen) --- */
.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 15px;
    padding-bottom: 100px; 
}

.snack-card {
    background: white;
    border: 1px solid #f0f0f0;
    border-radius: 16px;
    padding: 15px;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.snack-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    border-color: var(--keet-light-green);
}

.snack-card.out-of-stock {
    opacity: 0.6;
    filter: grayscale(100%);
    pointer-events: none;
}

.snack-emoji {
    font-size: 3rem;
    margin: 10px 0;
    display: block;
}

.snack-card h4 { margin: 5px 0; font-size: 1.1rem; color: #2d3748; font-weight: 700; }
.snack-price { color: #718096; font-size: 0.85rem; font-weight: 600; margin-bottom: 15px; display: block; }

/* Voorraad Badge */
.stock-badge {
    position: absolute; top: 10px; right: 10px;
    background: #edf2f7; color: #4a5568;
    font-size: 0.65rem; font-weight: 700;
    padding: 4px 8px; border-radius: 6px;
}
.stock-badge.low { background: #fed7d7; color: #c53030; }

/* Sauzen Knoppen (Pills) */
.sauce-options {
    display: flex; gap: 8px; justify-content: center; margin-bottom: 15px;
}
.sauce-options input[type="checkbox"] { display: none; }

.sauce-label {
    cursor: pointer;
    padding: 6px 12px;
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    font-size: 0.8rem;
    color: #718096;
    font-weight: 600;
    transition: all 0.2s;
    user-select: none;
}
.sauce-label:hover { background: #edf2f7; }

/* Actieve Saus Knoppen */
.sauce-options input:checked + span {
    background: #ebf8ff; color: #3182ce; border-color: #3182ce;
}
.sauce-options input[data-sauce="curry"]:checked + span {
    background: #fff5f5; color: #c53030; border-color: #c53030;
}

/* Toevoegen Knop (Donkergrijs) */
.add-btn {
    width: 100%;
    background-color: #2d3748; /* Donkergrijs */
    color: white !important;
    border-radius: 10px;
    font-size: 0.9rem;
    padding: 12px;
    font-weight: 600;
    border: none;
    cursor: pointer;
}
.add-btn:hover { background-color: var(--keet-dark-green); }


/* --- 3. WINKELWAGEN BALK (PERFECT FIT) --- */
.cart-panel {
    position: fixed;
    
    /* HOOGTE FIX: Het menu is 70px hoog. We zetten deze op 70px.
       Hierdoor sluit hij naadloos aan op de bovenkant van je menu. */
    bottom: 70px !important; 
    
    left: 50%;
    transform: translate(-50%, 150%); /* Start verborgen naar beneden */
    
    /* BREEDTE FIX: Iets smaller (90%) en padding binnen de lijntjes houden */
    width: 90%;
    max-width: 420px;
    box-sizing: border-box; /* CRUCIAAL: Zorgt dat tekst niet buiten beeld valt */
    
    background: white;
    
    /* Styling: Schaduw alleen naar boven, zodat het één geheel lijkt met menu */
    box-shadow: 0 -5px 20px rgba(0,0,0,0.1); 
    padding: 15px;
    
    /* Alleen bovenkant afronden voor een 'lade' effect, of rond laten voor zwevend effect.
       Laten we hem rond houden, dat is vaak mooier losstaand. */
    border-radius: 16px; 
    
    /* Zorg dat hij altijd bovenop ligt */
    z-index: 9500; 
    
    border: 1px solid #f0f0f0;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    
    /* Max hoogte beperken zodat hij niet je hele scherm overneemt */
    max-height: 50vh; 
    overflow-y: auto;
}

/* Op Desktop (Groot scherm) mag hij gewoon rechtsonder */
@media (min-width: 768px) {
    .cart-panel {
        bottom: 20px !important;
        right: 20px !important;
        left: auto !important;
        transform: translate(0, 150%);
        width: 350px;
    }
    .cart-panel.visible {
        transform: translate(0, 0);
    }
}

/* Mobiel Zichtbaar maken */
.cart-panel.visible {
    transform: translate(-50%, 0);
}

/* --- INTERNE STYLING (Header, Lijst, Knop) --- */
.cart-header-row {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px;
}
.cart-header-row h3 { margin: 0; font-size: 1rem; color: #2d3748; }

#cart-total {
    background: #ebf8ff; color: #2b6cb0;
    padding: 5px 10px; border-radius: 8px;
    font-weight: 800; font-size: 0.8rem;
}

#cart-list li {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; border-bottom: 1px dashed #e2e8f0; font-size: 0.9rem;
}

#order-comment {
    width: 100%; height: 38px !important; min-height: 38px;
    padding: 8px; border: 1px solid #cbd5e0; border-radius: 8px;
    font-family: inherit; font-size: 0.85rem; margin-bottom: 8px;
    resize: none;
}

#place-order-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #48bb78, #38a169);
    color: white; border: none; border-radius: 10px;
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(56, 161, 105, 0.3);
    cursor: pointer; margin-top: 5px;
}
#place-order-btn:active { transform: scale(0.96); }


/* --- 4. ADMIN DASHBOARD (FIXED COLORS) --- */
.snack-admin-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 25px; align-items: start;
}
@media (max-width: 900px) { .snack-admin-grid { grid-template-columns: 1fr; } }

.admin-card {
    background: white; border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    border: 1px solid #f0f0f0; padding: 25px; margin-bottom: 20px;
}
.admin-card h3 {
    margin-top: 0; color: #2d3748; font-size: 1.2rem;
    border-bottom: 2px solid #f7fafc; padding-bottom: 15px; margin-bottom: 20px;
}

.inventory-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0; border-bottom: 1px solid #f7fafc;
}
.inventory-item input[type="number"] {
    width: 60px; padding: 8px;
    border: 1px solid #e2e8f0; border-radius: 8px;
    text-align: center; font-weight: bold; margin-right: 10px;
}

/* De knoppen in de voorraadlijst */
.delete-snack-btn {
    background-color: #fed7d7 !important; /* Forceer kleur */
    color: #c53030 !important;
    border: none; width: 36px; height: 36px;
    border-radius: 8px; cursor: pointer; font-weight: bold;
    display: flex; align-items: center; justify-content: center;
}
.delete-snack-btn:hover { background-color: #c53030 !important; color: white !important; }

.add-snack-form button {
    background-color: #2d3748 !important; /* Donkergrijs */
    color: white !important;
    border: none; padding: 0 20px; border-radius: 8px;
    font-weight: 600; cursor: pointer;
}

/* De Handmatige Bestelknoppen */
#manual-snack-list button {
    background-color: #edf2f7 !important;
    color: #4a5568 !important;
    border: 1px solid #cbd5e0;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 0.8rem;
    margin: 3px;
    cursor: pointer;
}
#manual-snack-list button:hover { background-color: #e2e8f0 !important; }

/* Live Orders */
#live-orders-list .request-card {
    border: none; border-left: 6px solid #4299e1;
    background: #f8fafc; margin-bottom: 15px;
    border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.finish-order-btn {
    background-color: #48bb78 !important;
    color: white !important;
    border: none; padding: 10px 20px;
    border-radius: 8px; font-size: 0.9rem; font-weight: 600; cursor: pointer;
}

/* --- ITEM STATUS IN BESTELLING (Lid) --- */
.item-status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 0.9rem;
    border-bottom: 1px dotted #eee;
}
.item-status-row:last-child { border-bottom: none; }

.item-ready { color: #38a169; font-weight: bold; } /* Groen */
.item-waiting { color: #3182ce; font-style: italic; } /* Blauw */

/* De opmerking in het ticket */
.ticket-comment {
    background: #fffaf0;
    color: #c05621;
    font-size: 0.8rem;
    padding: 5px 10px;
    border-radius: 4px;
    margin-top: 8px;
    font-style: italic;
    border-left: 3px solid #ed8936;
}

/* =========================================
   📱 MOBILE APP NAVIGATION (BOTTOM SHEET)
   ========================================= */

/* Alleen ruimte maken als we in 'App Modus' zijn */
body.app-mode {
    padding-bottom: 80px;
}

/* 1. DE BALK ONDERIN */
.bottom-nav-bar {
    position: fixed;
    bottom: 0; left: 0; width: 100%; height: 70px;
    background: white;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.05);
    display: flex; justify-content: space-around; align-items: center;
    z-index: 9000;
    border-top: 1px solid #f0f0f0;
}

/* Verberg op desktop */
@media (min-width: 768px) {
    .bottom-nav-bar { display: none; }
    body { padding-bottom: 0; }
}

/* --- CSS FIX VOOR DE ICONEN ONDERIN --- */

.nav-icon-btn {
    background: none; border: none;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: #a0aec0; /* Dit maakt de tekst grijs */
    font-size: 0.7rem; font-weight: 600;
    cursor: pointer; width: 100%; height: 100%;
    transition: color 0.2s;
}

/* HIER ZIT DE FIX: */
.nav-icon-btn svg {
    width: 24px; 
    height: 24px;
    margin-bottom: 4px;
    stroke: #a0aec0; /* Forceer grijs */
    stroke-width: 2;
    fill: none;
    display: block; /* Zorg dat ze ruimte innemen */
}

/* Actieve staat / Hover */
.nav-icon-btn:hover {
    color: var(--keet-dark-green);
}

.nav-icon-btn:hover svg {
    stroke: var(--keet-dark-green); /* Forceer groen bij hover */
}

/* 2. HET UITSCHUIF MENU (BOTTOM SHEET) */
.bottom-sheet-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 9100;
    opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.bottom-sheet-overlay.open { opacity: 1; pointer-events: auto; }

.bottom-sheet {
    position: fixed; bottom: 0; left: 0; width: 100%;
    
    /* FIX: Zorg dat padding de breedte niet opblaast */
    box-sizing: border-box; 
    
    background: white;
    border-top-left-radius: 25px; border-top-right-radius: 25px;
    padding: 25px;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 9200;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.2);
}
.bottom-sheet.open { transform: translateY(0); }

/* Grid voor de linkjes */
.sheet-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 15px;
}

.sheet-link {
    display: flex; flex-direction: column; align-items: center;
    background: #f7fafc; padding: 15px;
    border-radius: 12px; text-decoration: none;
    color: #2d3748; font-weight: 600; font-size: 0.9rem;
    border: 1px solid #edf2f7; transition: transform 0.1s, background 0.1s;
}
.sheet-link:active { transform: scale(0.96); background: #edf2f7; }

/* Iconen in het sheet menu */
.sheet-link svg {
    width: 28px; height: 28px;
    margin-bottom: 8px;
    stroke: var(--keet-dark-green);
    stroke-width: 1.5;
    fill: none;
}

.sheet-header {
    text-align: center; margin-bottom: 20px;
    font-size: 1.1rem; color: #a0aec0; font-weight: 800;
    text-transform: uppercase; letter-spacing: 1px;
}

/* --- TIKKIE PANIEK MODUS --- */
@keyframes extreme-pulse {
    0% { background-color: rgba(255, 165, 0, 0.95); } /* Fel Oranje */
    50% { background-color: rgba(255, 215, 0, 0.95); } /* Fel Geel */
    100% { background-color: rgba(255, 165, 0, 0.95); }
}

/* Deze class voegen we toe met JS als de modal opent */
.panic-overlay {
    animation: extreme-pulse 0.8s infinite; /* Snelle hartslag */
    backdrop-filter: blur(5px);
}

.panic-content {
    border: 5px solid red !important;
    box-shadow: 0 0 50px rgba(255, 0, 0, 0.5) !important;
    transform: scale(1.05);
}

.panic-text {
    font-size: 1.4rem;
    font-weight: 900;
    text-transform: uppercase;
    color: #c53030;
    line-height: 1.4;
}

/* --- FIXES VOOR DE PANIEK MELDING --- */

/* 1. Voorkom dat je het scherm heen en weer kunt schuiven */
html, body {
    overflow-x: hidden; /* Verbergt alles wat buiten beeld valt */
}

.modal-content {
    box-sizing: border-box; /* Zorgt dat padding niet de breedte opblaast */
    max-width: 90vw; /* Maximaal 90% van de breedte van het scherm */
}

/* 2. Verberg het kruisje (X) ALLEEN in Paniek Modus */
.panic-overlay .modal-close {
    display: none !important;
}

/* Zorg dat de tekst niet te breed wordt op mobiel */
.panic-text {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* --- BREAKING NEWS TICKER (LICHTKRANT) --- */
.news-ticker-container {
    width: 100%;
    overflow: hidden; /* Verberg tekst die buiten beeld is */
    white-space: nowrap;
    padding: 10px 0;
    position: relative;
    margin-bottom: 20px;
    border-radius: 8px;
    display: none; /* Standaard verborgen */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.ticker-text {
    display: inline-block;
    padding-left: 100%; /* Start buiten beeld rechts */
    animation: ticker-scroll 15s linear infinite;
    font-weight: 800;
    font-size: 1.2rem;
    text-transform: uppercase;
    color: white;
}

@keyframes ticker-scroll {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
}

/* Kleur Thema's */
.ticker-rood   { background: #e53e3e; border: 2px solid #9b2c2c; }
.ticker-oranje { background: #dd6b20; border: 2px solid #9c4221; }
.ticker-geel   { background: #d69e2e; border: 2px solid #975a16; color: black; } /* Geel krijgt zwarte tekst */
.ticker-groen  { background: #38a169; border: 2px solid #22543d; }
.ticker-blauw  { background: #3182ce; border: 2px solid #2c5282; }
.ticker-zwart  { background: #000000; border: 2px solid #333; }

/* Fix voor gele tekstkleur */
.ticker-geel .ticker-text { color: black; }

/* --- INSTALL MODAL TWEAKS --- */
#ios-instructions svg {
    vertical-align: middle;
    display: inline-block;
}

/* =========================================
   📸 INFINITE PHOTO WALL (FIXED LOOP)
   ========================================= */

.photo-wall-section {
    padding: 60px 0;
    overflow: hidden;
    background-color: #f4f7f6;
    position: relative;
}

.photo-wall-container {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Ruimte tussen de RIJEN (boven/onder) */
    transform: rotate(-2deg) scale(1.05); /* Iets groter om randen te verbergen */
    width: 120vw; /* Breder dan scherm */
    margin-left: -10vw;
}

.photo-row {
    display: flex;
    /* LET OP: Geen 'gap' hier gebruiken! Dat verpest de loop. */
    width: max-content;
    will-change: transform; /* Helpt de browser om het soepel te houden */
}

/* De Polaroid Kaartjes */
.photo-card {
    background: white;
    padding: 10px;
    padding-bottom: 30px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transition: transform 0.3s ease;
    border-radius: 4px;
    transform: scale(1);
    cursor: pointer;
    
    /* HIER ZIT DE FIX: Vaste ruimte rechts van elk kaartje */
    margin-right: 20px; 
    flex-shrink: 0; /* Zorgt dat ze niet geplet worden */
}

.photo-card img {
    height: 200px; 
    width: 280px;  
    object-fit: cover;
    border-radius: 2px;
    pointer-events: none;
    display: block;
}

/* Hover: Stoppen & Groeien */
.photo-card:hover {
    transform: scale(1.1) rotate(2deg);
    z-index: 100; /* Zorg dat hij bovenop ligt */
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
    border: 2px solid var(--keet-light-green);
}

/* Stop animatie bij hover over de RIJ */
.photo-row:hover {
    animation-play-state: paused;
}

/* --- ANIMATIES --- */
.scroll-left {
    animation: scrollLeft 40s linear infinite;
}

.scroll-right {
    animation: scrollRight 45s linear infinite;
}

@keyframes scrollLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } 
}

@keyframes scrollRight {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* Mobiel */
@media (max-width: 768px) {
    .photo-card img { height: 120px; width: 160px; }
    .photo-card { padding-bottom: 20px; margin-right: 10px; }
}

/* --- FAQ SECTIE (MODERN ACCORDION) --- */
.faq-mini {
    padding: 60px 0;
    background: #f4f7f6;
}

.small-title {
    font-size: 1.8rem;
    margin-bottom: 30px;
    color: #2d3748;
    text-align: center;
}

.faq-accordion {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    overflow: hidden; /* Belangrijk voor de animatie */
    border: 1px solid #e2e8f0;
    transition: box-shadow 0.2s;
}

.faq-item:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

/* De Knop (Vraag) */
.faq-question {
    width: 100%;
    background: #2d3748;
    border: none;
    padding: 18px 20px;
    text-align: left;
    font-size: 1rem;
    font-weight: 600;
    color: #2d3748;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    outline: none;
    transition: background-color 0.2s;
}

.faq-question:hover {
    background-color: var(--keet-dark-green);
}

/* Het Icoontje Links */
.faq-icon {
    background: #ebf8ff;
    color: #3182ce;
    font-size: 0.9rem;
    min-width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0; /* Zorgt dat hij rond blijft */
}

/* Het Pijltje Rechts (Draait om) */
.faq-arrow {
    margin-left: auto; /* Duwt pijl naar rechts */
    font-size: 1.2rem;
    color: #cbd5e0;
    transition: transform 0.3s ease;
}

/* Actieve Staat (Als hij open is) */
.faq-question.active .faq-arrow {
    transform: rotate(180deg);
    color: var(--keet-dark-green);
}

.faq-question.active .faq-icon {
    background: var(--keet-dark-green);
    color: white;
}

/* Het Antwoord (Verborgen) */
.faq-answer {
    max-height: 0; /* Start dicht */
    overflow: hidden;
    transition: max-height 0.3s ease-out; /* Soepele animatie */
    background-color: var(--keet-dark-green);
}

.faq-answer p {
    padding: 0 20px 20px 67px; /* Mooi uitgelijnd onder de tekst */
    margin: 0;
    color: white;
    line-height: 1.6;
    font-size: 0.95rem;
}


/* =========================================
   📱 MODERN ADMIN DASHBOARD & MOBILE FIX
   ========================================= */

/* 1. Algemene Layout & Grid */
.admin-grid-layout, 
.snack-admin-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Desktop: 2 kolommen */
    gap: 20px;
    align-items: start;
}

/* 2. De Kaarten (Modern Look) */
.admin-card, .stat-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); /* Zachte schaduw */
    border: 1px solid #e2e8f0;
    margin-bottom: 20px;
    height: 100%; /* Zorgt dat ze even lang zijn */
}

/* Titels in kaarten */
.admin-card h3, .stat-card h3 {
    margin-top: 0;
    color: #2d3748;
    font-size: 1.1rem;
    border-bottom: 2px solid #f7fafc;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

/* 3. Inputs & Knoppen (Vinger-vriendelijk) */
.input-field, select, input[type="text"], input[type="number"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #cbd5e0;
    border-radius: 8px;
    font-size: 1rem; /* Grotere tekst voor mobiel */
    margin-bottom: 10px;
    box-sizing: border-box; /* Zorgt dat padding niet buiten de breedte valt */
}

.button {
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* 4. Tabs Container (Scrollbaar op mobiel) */
.admin-tabs-wrapper {
    background: white;
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    margin: -20px -20px 20px -20px; /* Trek breder dan container */
}

.admin-tabs {
    display: flex;
    overflow-x: auto; /* Horizontaal scrollen */
    gap: 10px;
    padding: 0 20px;
    -webkit-overflow-scrolling: touch; /* Soepel op iPhone */
    scrollbar-width: none; /* Verberg scrollbar (Firefox) */
}
.admin-tabs::-webkit-scrollbar { display: none; /* Verberg scrollbar (Chrome) */ }

.tab-button {
    flex-shrink: 0; /* Niet pletten */
    white-space: nowrap;
    padding: 10px 16px;
    border-radius: 20px;
    background: #4a5568;
    border: 1px solid #e2e8f0;
    color: #4a5568;
}

.tab-button.active {
    background: var(--keet-dark-green);
    color: white;
    border-color: var(--keet-dark-green);
}

/* =========================================
   🚨 MOBIELE BREAKPOINT (HET BELANGRIJKSTE)
   ========================================= */
@media (max-width: 768px) {
    
    /* Forceer alles onder elkaar */
    .admin-grid-layout, 
    .snack-admin-grid,
    div[style*="grid-template-columns"] { 
        grid-template-columns: 1fr !important; /* Forceer 1 kolom */
        display: flex !important;
        flex-direction: column;
        gap: 15px;
    }

    /* Header aanpassen */
    .admin-header {
        flex-direction: column;
        text-align: center;
        gap: 15px;
        padding: 15px;
    }
    
    .admin-header h1 {
        font-size: 1.5rem;
    }

    /* Knoppen in header breed maken */
    .admin-header div {
        width: 100%;
        justify-content: center;
    }

    /* Inputs in lijsten (Bier tellen) */
    .stat-card .flex-row {
        flex-direction: column; /* Naast elkaar -> Onder elkaar */
    }
    
    /* Grote knoppen */
    .button {
        padding: 12px; 
        font-size: 1rem;
    }
}

/* =========================================
   🎄 KERST SNEEUW EFFECT
   ========================================= */
.snowflake {
    position: fixed;
    top: -20px;
    z-index: 99999; /* Boven alles */
    color: #FFF;
    background-color: #FFF; /* Witte vlekken */
    border-radius: 50%; /* Rondjes */
    user-select: none;
    pointer-events: none; /* Klikken gaat er doorheen */
    animation-name: fall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    box-shadow: 0 0 5px rgba(255,255,255,0.8); /* Gloed */
}

@keyframes fall {
    0% { transform: translateY(-20px) translateX(0px); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(110vh) translateX(20px); opacity: 0; }
}

/* =========================================
   🔔 NOTIFICATIE TOGGLES (ROOD / GROEN)
   ========================================= */

.setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}
.setting-row:last-child { border-bottom: none; }

/* De Container */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

/* Verberg de standaard checkbox */
.toggle-switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}

/* De Slider (Achtergrond) */
.slider-toggle {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #e53e3e; /* STANDAARD ROOD (UIT) */
    transition: .4s;
    border-radius: 34px;
}

/* Het Bolletje */
.slider-toggle:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* --- DE ACTIEVE STAAT (AAN) --- */
input:checked + .slider-toggle {
    background-color: #48bb78; /* GROEN (AAN) */
}

input:checked + .slider-toggle:before {
    transform: translateX(22px); /* Schuif naar rechts */
}

/* DISABLED STAAT (Voor iPhone als niet geïnstalleerd) */
input:disabled + .slider-toggle {
    background-color: #cbd5e0; /* Grijs */
    cursor: not-allowed;
    opacity: 0.5;
}