/* --- Google Fonts voor een trendy retro look --- */
@import url('https://googleapis.com');

/* --- Algemene Stijlen --- */
body {
    font-family: 'DM Sans', sans-serif;
    background-color: #EF9D65; /* Secundaire achtergrond: Zacht oranjebruin */
    margin: 0;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

/* --- Knop Sectie --- */
.action-container {
    margin-bottom: 30px;
}

.btn-primary {
    display: inline-block;
    background-color: #965335; /* Accent: Roestbruin */
    color: #FFFFFF; /* Wit voor een fris, leesbaar contrast */
    font-weight: 700;
    text-decoration: none;
    padding: 14px 28px;
    border-radius: 50px;
    box-shadow: 0 4px 10px rgba(71, 40, 25, 0.15);
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

.btn-primary:hover {
    background-color: #472819; /* Schakelt naar Donkerbruin bij hover */
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(71, 40, 25, 0.25);
}

/* --- Recept Kaart --- */
.recipe-container {
    background-color: #F1BFC8; /* Primaire achtergrond: Zacht roze */
    padding: 40px;
    border-radius: 24px;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 10px 30px rgba(71, 40, 25, 0.1);
    box-sizing: border-box;
}

/* --- Titels en Vet --- */
.recipe-title {
    font-family: 'Fraunces', serif; /* Elegante serif voor titels */
    color: #654AB8; /* Titels: iPaars */
    font-size: 2.2rem;
    margin-top: 0;
    margin-bottom: 25px;
    font-weight: 800;
}

/* --- Gewone tekst en lijst --- */
.ingredients-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ingredients-list li {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(101, 74, 184, 0.15); /* Subtiele paarse lijn */
    color: #1E252B; /* Gewone tekst: Antraciet */
    font-size: 1.1rem;
}

.ingredients-list li:last-child {
    border-bottom: none;
}

/* --- Checkbox Styling --- */
.ingredients-list input[type="checkbox"] {
    accent-color: #965335; /* Checkbox kleurt mee in Roestbruin */
    width: 20px;
    height: 20px;
    margin-right: 15px;
    cursor: pointer;
}

.ingredients-list label {
    cursor: pointer;
    user-select: none;
    width: 100%;
}

/* Als een ingrediënt is afgevinkt */
.ingredients-list input[type="checkbox"]:checked + label {
    text-decoration: line-through;
    opacity: 0.6;
}

/* Vetgedrukte tekst binnen de lijst */
.brand-text {
    font-weight: 700;
    color: #654AB8; /* Subtiel iPaars accent voor extra info */
    font-size: 0.95rem;
}

/* --- Notitie & Links --- */
.recipe-note {
    margin-top: 30px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #1E252B; /* Antraciet */
}

.recipe-link {
    color: #965335; /* Links: Roestbruin */
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid #965335;
    transition: all 0.2s ease;
}

.recipe-link:hover {
    color: #654AB8; /* iPaars bij hover */
    border-bottom-color: #654AB8;
}

/* --- Stappenplan Kaart --- */
.steps-container {
    background-color: #472819; /* Contrasterende achtergrond: Donkerbruin */
    padding: 40px;
    border-radius: 24px;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 10px 30px rgba(71, 40, 25, 0.2);
    box-sizing: border-box;
    margin-top: 30px; /* Ruimte tussen ingrediënten en stappen */
}

/* --- Titel --- */
.steps-title {
    font-family: 'Fraunces', serif;
    color: #fff; /* Titels: iPaars */
    font-size: 2.2rem;
    margin-top: 0;
    margin-bottom: 30px;
    font-weight: 800;
}

/* --- Individuele Stap --- */
.step-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(241, 191, 200, 0.15); /* Subtiele roze scheidingslijn */
}

.step-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* --- Stap Nummering --- */
.step-number {
    font-family: 'Fraunces', serif;
    color: #fff; /* Nummers en vetgedrukt: iPaars */
    font-size: 1.8rem;
    font-weight: 900;
    margin-right: 20px;
    line-height: 1;
    background-color: rgba(101, 74, 184, 0.1); /* Zacht paars achtergrondje voor het nummer */
    padding: 8px 12px;
    border-radius: 12px;
}

/* --- Stap Inhoud --- */
.step-content {
    color: #F1BFC8; /* Tekst op contrasterende achtergrond: Zacht roze */
    font-size: 1.05rem;
    line-height: 1.6;
}

.step-content p {
    margin: 0;
}

/* Vetgedrukte ingrediënten binnen de tekst */
.step-content strong {
    color: #fff; /* Belangrijke woorden/vet: iPaars */
    font-weight: 700;
}