/* Base styles for lottery balls */
.lottery-ball {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 30px; /* Adjust size as needed */
    height: 30px; /* Adjust size as needed */
    border-radius: 50%;
    font-weight: bold;
    color: #fff; /* Default text color */
    margin: 2px;
    box-sizing: border-box;
    border: 1px solid transparent; /* Default border */
    transition: all 0.2s ease-in-out;
}

.ball-red {
    background-color: #d11717; /* Bootstrap red */
}

.ball-blue {
    background-color: #084bb1; /* Bootstrap blue */
}

/* Styles for consecutive balls (example, adjust as per actual implementation) */
.ball-consecutive-0 {
    background-color: #168163; /* Deeper Teal/Green */
}
.ball-consecutive-1 {
    background-color: #bdac16e8; /* Deeper Orange */
}
.ball-consecutive-2 {
    background-color: #4e2b91; /* Deeper Purple */
}

/* Styles for the prediction tab buttons */
.lottery-section-tabs .btn {
    border: 1px solid; /* Add a border to match the text color when unselected */
    transition: all 0.3s ease;
}

.lottery-section-tabs .btn-danger.active {
    background-color: #dc3545; /* Bootstrap red */
    color: #fff;
    border-color: #dc3545;
}

.lottery-section-tabs .btn-danger:not(.active) {
    background-color: transparent;
    color: #dc3545; /* Red text */
    border-color: #dc3545;
}

.lottery-section-tabs .btn-primary.active {
    background-color: #0d6efd; /* Bootstrap blue */
    color: #fff;
    border-color: #0d6efd;
}

.lottery-section-tabs .btn-primary:not(.active) {
    background-color: transparent;
    color: #0d6efd; /* Blue text */
    border-color: #0d6efd;
}

/* Highlight class for lottery balls */
.lottery-ball.highlighted {
    background-color: #ffc107; /* Bootstrap yellow */
    color: #212529; /* Dark text for contrast during highlight */
    box-shadow: 0 0 8px rgba(255, 193, 7, 0.8);
    transform: scale(1.1);
    /* transition: all 0.2s ease-in-out; */ /* Transition is already on base .lottery-ball */
}