input,
textarea,
select {
    font-family: Poppins, "Segoe UI", Tahoma, sans-serif;
}
/* Basisstijl voor het formulier */
.form-container {
    display: flex;
    flex-direction: column;
    max-width: 600px;
    padding: 20px;
    align-items: flex-start;
}

/* Label styling */
.form-container label {
    font-weight: bold;
    margin-bottom: 5px;
}

/* Form-groepen (veld + label) */
.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

/* Inputs en selecties */
.form-container input,
.form-container select,
.form-container textarea {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 100%;
}

.form-container input {
    width: 100%; /* Forceer de inputs om dezelfde breedte te hebben */
    max-width: 100%;
    /*box-sizing: border-box; !* Voorkom dat padding de breedte beïnvloedt *!*/
}

/* Knoppen */
.form-container button {
    padding: 10px 15px;
    font-size: 16px;
    background: var(--color-logo-pink);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.form-container button:hover {
    background: var(--color-logo-orange);
}

form {
    width: 70%;
}

@media (max-width: 768px) {
    .form-group {
        display: flex;
        /*align-items: center; !* Zorgt ervoor dat alle elementen netjes uitgelijnd worden *!*/
    }

    form {
        width: 100%;
    }

    .form-group label {
        width: 30%;
        text-align: left;
        margin-right: 10px;
        white-space: nowrap; /* Voorkom dat labels over meerdere regels vallen */
    }

    .form-container input,
    .form-container select,
    .form-container textarea {
        width: 70%;
    }
}