/* === CSS/DEMONSTREREN_STYLES.CSS (of voeg toe aan style.css) === */

/* Styling voor lijsten specifiek voor deze pagina */
.regels-lijst, .effecten-lijst {
    list-style: none;
    padding-left: 0;
}
.regels-lijst li, .effecten-lijst li {
    padding-left: 25px;
    position: relative;
    margin-bottom: 10px;
}
.regels-lijst li::before {
    content: '📜'; /* Regel icoon */
    position: absolute;
    left: 0; top: 0;
}
.effecten-lijst li::before {
    content: '🎯'; /* Effect/doel icoon */
    position: absolute;
    left: 0; top: 0;
}

/* Styling voor de Spandoek Maker sectie */
#spandoek-maker-container {
    border: 3px solid #6d4c41; /* Bruine rand */
    padding: 20px;
    background-color: #efebe9; /* Lichtbruin/beige */
    color: #3e2723; /* Donkerbruin */
    margin-top: 20px;
    border-radius: 5px;
}
#spandoek-maker-container h4 {
    color: #4e342e; /* Iets donkerder bruin */
    margin-top: 0;
    margin-bottom: 15px;
}

/* Styling voor de tool elementen */
.spandoek-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
    align-items: flex-end; /* Zorgt dat knop naast input uitlijnt */
}
.spandoek-controls label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}
.spandoek-controls input[type="text"],
.spandoek-controls select {
    padding: 8px;
    border: 2px solid #a1887f; /* Lichter bruin */
    background-color: #ffffff;
    border-radius: 3px;
    min-width: 150px; /* Minimale breedte */
}
.spandoek-controls input[type="color"] { /* Speciale styling voor kleurkiezer */
    height: 40px; /* Maak even hoog als andere inputs */
    padding: 5px;
    cursor: pointer;
    border: 2px solid #a1887f;
}
.spandoek-controls button { /* Knop in de controls */
     background-color: #795548; /* Bruine knop */
    color: white;
    padding: 8px 15px;
    border: 2px solid #a1887f;
    box-shadow: 2px 2px 0px #4e342e;
    cursor: pointer;
    font-weight: bold;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.spandoek-controls button:hover {
    background-color: #8d6e63;
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0px #4e342e;
}


/* Styling voor het voorbeeld spandoek */
#spandoek-voorbeeld-wrapper {
    text-align: center; /* Centreer het spandoek */
    margin-top: 20px;
}
#spandoek-voorbeeld {
    display: inline-block; /* Om padding en achtergrond goed te krijgen */
    padding: 30px 40px; /* Ruimte binnen het spandoek */
    border: 5px solid #4e342e; /* Donkerbruine rand = stokken */
    background-color: #ffffff; /* Standaard wit doek */
    color: #000000; /* Standaard zwarte tekst */
    font-weight: bold;
    font-size: 1.5em;
    text-align: center;
    box-shadow: 3px 3px 5px rgba(0,0,0,0.2);
    min-height: 100px; /* Minimale hoogte */
    max-width: 100%; /* Voorkom te breed worden */
    word-wrap: break-word; /* Tekst afbreken */
}
#spandoek-voorbeeld span.spandoek-icon { /* Styling voor gekozen icoon */
    font-size: 1.8em;
    margin: 0 10px;
    vertical-align: middle;
}