/**
 * Reward Quantity Display Fix
 * This CSS ensures the reward quantity counter is properly styled and visible
 */

/* Make quantity display more visible */
.reward-item-card__quantity {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #583510 !important;
    padding: 6px 10px !important;
    min-width: 60px !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Highlight effect when quantity changes */
.reward-item-card__quantity.updating {
    background-color: #fff9e5 !important;
    border-color: #FE9F3A !important;
}

/* Make buttons more interactive */
.reward-item-card__plus,
.reward-item-card__minus {
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

.reward-item-card__plus:hover,
.reward-item-card__minus:hover {
    transform: scale(1.05) !important;
}

.reward-item-card__plus:active,
.reward-item-card__minus:active {
    transform: scale(0.95) !important;
}

/* Fix disabled buttons */
.reward-item-card__plus[disabled],
.reward-item-card__minus[disabled] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* Highlight counter */
/* .reward-selection-counter {
    background-color: #f8f8f8 !important;
    padding: 8px 16px !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
    color: #583510 !important;
    display: inline-block !important;
    margin: 10px auto !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    transition: background-color 0.3s ease !important;
} */

/* Fix in mobile view */
@media (max-width: 767px) {
    .reward-item-card__quantity {
        min-width: 40px !important;
        font-size: 16px !important;
        padding: 4px 8px !important;
    }
}