/* PYP container stapelt input en blokjes verticaal */
.pyp-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* input en blokjes links uitlijnen */
    gap: 10px;
    margin-bottom: 10px;
	width:100%;
}

/* Input veld max 100px breed */
.pyp-input {
    width: 200px;
    padding: 6px 8px;
    font-size: 1em;
    box-sizing: border-box;
}

/* Blokjes container */
.pyp-predefined {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
	width: 100%;
}

/* Blokjes styling */
.pyp-block {
    flex: 1 1 calc(20% - 10px); /* 5 blokjes per rij */
    min-width: 50px; /* voorkom te klein op mobiel */
    text-align: center;
    padding: 8px 0;
    border: 1px solid #000;
    background-color: transparent;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.2s;
}

.pyp-block:hover {
    background-color: #f0f0f0;
}

/* Responsive: 2 blokjes per rij op smalle schermen */
@media (max-width: 600px) {
    .pyp-block {
        flex: 1 1 calc(50% - 10px);
    }
    .pyp-input {
        max-width: 80px; /* mobiel iets smaller */
    }
}