.wc-add-quantity-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2vwpx;
    margin-bottom: 1vh;
}

.wc-add-quantity-option {
    padding: 1vw;
    text-align: center;
}

.wc-add-quantity-image {
    max-width: 15vw !important;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.3s, box-shadow 0.3s;
    -webkit-transition: border-color 0.3s, box-shadow 0.3s;
    -moz-transition: border-color 0.3s, box-shadow 0.3s;
    -ms-transition: border-color 0.3s, box-shadow 0.3s;
    -o-transition: border-color 0.3s, box-shadow 0.3s;
}

@media screen and (min-width: 1000px) {
    .wc-add-quantity-image {
        max-width: 4vw !important;
    }
}

.wc-add-quantity-image.selected {
    border-color: #007cba;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.wc-add-quantity-message {
    font-size: 14px;
    color: #007cba;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 0.5vh;
}

/* Show the default selected message */
.wc-add-quantity-message.add-10-message {
    display: block;
}

p.wc-add-quantity-price {
    color: #ba0000;
    font-weight: bold;
}

/* Background color for the selected option */
.wc-add-quantity-option.selected-option {
    padding: 1vw;
    background-color: #f0f8ff;
    border-color: #007cba;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}