/* Custom Grid Visuals for Math Questions */
.grid-options-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin: 15px 0;
}

.grid-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.grid-match-container {
    display: flex;
    gap: 30px;
    align-items: center;
    margin: 15px 0;
    flex-wrap: wrap;
}

.grid-target {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    border: 2px solid #0d6efd; /* Use Bootstrap primary color */
    padding: 10px;
    border-radius: 10px;
}

.grid-visual {
    display: inline-block;
    border: 1px solid #ccc;
    background-color: #fff; /* Always white for grid bg to see cells clearly */
}

.grid-row {
    display: flex;
}

.grid-cell {
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
}

.grid-cell.filled {
    background-color: #198754; /* Use Bootstrap success color */
}

.grid-cell.empty {
    background-color: transparent;
}