.accordion {
    width: 90%;
    margin: 1rem auto;
}

.accordion-item {
    border: none;
    margin-bottom: 0.5rem;
    background-color: transparent;
}

.accordion-button {
    padding: 1rem;
    transition: all 0.3s ease;
    border-radius: 8px !important;
    text-align: center;
    justify-content: center;
}

.accordion-button:not(.collapsed) {
    color: var(--kitchen-highlight) !important;
    background-color: var(--kitchen-blue) !important;
    border-radius: 8px 8px 0 0 !important;
}

.accordion-button::after {
    filter: invert(1);
    margin-left: 10px;
}

.accordion-body {
    padding: 1.5rem;
    background-color: var(--kitchen-blue);
    border-radius: 0 0 8px 8px;
    text-align: center;
}

.accordion-button i {
    margin-right: 10px;
    font-size: 1.2em;
}

/* Gekleurde iconen voor features */
.accordion-button i.fa-utensils {
    color: #FF6B6B;  /* Warm rood voor recepten */
}

.accordion-button i.fa-calculator {
    color: #4ECDC4;  /* Turquoise voor kostprijs */
}

.accordion-button i.fa-file-alt {
    color: #45B7D1;  /* Lichtblauw voor menukaarten */
}

.accordion-button i.fa-book-reader {
    color: #96CEB4;  /* Sage groen voor kookboek */
}

.accordion-button i.fa-shopping-basket {
    color: #FFEEAD;  /* Zacht geel voor bestellijst */
}

.accordion-button i.fa-clipboard-check {
    color: #88D8B0;  /* Mint groen voor HACCP */
}

.accordion-button i.fa-users-cog {
    color: #FFD93D;  /* Geel voor gebruikers */
}

.accordion-button i.fa-rocket {
    color: #FF9F1C;  /* Oranje voor quickstart */
}

/* Hover effect voor iconen */
.accordion-button:hover i {
    transform: scale(1.2);
    transition: transform 0.2s ease;
}

/* Behoud icon kleur wanneer accordion open is */
.accordion-button:not(.collapsed) i {
    color: inherit;  /* Terug naar standaard kleur wanneer geopend */
}

/* Footer centering fix */
.welcome-card .card-body .mt-4 {
    text-align: center !important;
    width: 100% !important;
}

.welcome-card .card-body .mt-4 a.btn {
    display: inline-block !important;
    margin: 0 5px !important;
    width: auto !important;
}

.welcome-card .card-body .mt-4 p {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
}

.welcome-card .card-body .mt-4 p.mt-2 {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
}

@media (max-width: 768px) {
    .accordion {
        width: 100%;
        margin: 1rem 0;
    }
    
    .card-body {
        padding: 1rem 0.5rem;
    }
    
    .accordion-button {
        padding: 0.75rem;
        font-size: 0.9rem;
    }
    
    .accordion-body {
        padding: 1rem;
        font-size: 0.9rem;
    }
    
    .btn {
        width: 100%;
        margin: 0.25rem 0;
    }
    
    img.img-fluid {
        max-width: 150px;
    }
    
    h1.card-title {
        font-size: 1.5rem;
    }
    
    h2.card-title {
        font-size: 1.25rem;
    }
    
    .welcome-card .card-body .mt-4 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .welcome-card .card-body .mt-4 a.btn {
        display: block !important;
        width: 80% !important;
        margin: 5px auto !important;
    }
    
    .welcome-card .card-body .mt-4 p.mt-2 {
        text-align: center !important;
        width: 80% !important;
        margin: 10px auto 0 !important;
    }
}