.lotto-ball {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: relative;
    margin: 0 4px 8px 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 27px;
    color: #000;
    box-shadow: inset -6px -10px 15px rgba(0,0,0,0.25),
                inset 4px 6px 10px rgba(255,255,255,0.6),
                0 6px 10px rgba(0,0,0,0.3);
    transition: transform .2s ease;
    flex-shrink: 0;
}



/* ✅ HOVER EXPAND */
.lotto-ball:hover {
    transform: scale(1.12);
}

/* KEEP YOUR ORIGINAL SHINE */
/*.lotto-ball::before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    top: 8px;*/
/*    left: 12px;*/
/*    width: 35%;*/
/*    height: 25%;*/
/*    background: rgba(255,255,255,0.7);*/
/*    border-radius: 50%;*/
/*    filter: blur(2px);*/
/*}*/


.lotto-ball::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 5px;
    width: 35%;
    height: 25%;
    background: rgba(255,255,255,0.7);
    border-radius: 50%;
    filter: blur(2px);
}



.winning-numbers-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.no-results {
    font-style: italic;
    color: #888;
}

@media (max-width: 576px) {
    .lotto-ball {
        width: 42px;
        height: 42px;
        font-size: 20px;
    }
}
        
        
.border-brown { border-color: #8B4513 !important; }
.border-purple { border-color: #6A0DAD !important; }
.border-beige { border-color: #cdb891 !important; }
.border-yellow { border-color: #FFD700 !important; }
.border-royal { border-color: #4169E1 !important; }
.justify-text { text-align: justify; }


.table-hover tbody tr:hover {
    background-color: #f8f9fa;
}
.table th, .table td {
    vertical-align: middle;
    font-size: 0.95rem;
}
.table thead th {
    font-size: 1rem;
}
.justify-text {
    text-align: justify;
}

.jackpot-header {
    background-color: #0d6efd; /* same as text-primary */
    color: #ffffff;
}

.jackpot-header th {
    background-color: #0d6efd !important; /* Bootstrap primary */
    color: #ffffff !important;
    border-color: #0a58ca;
}

.table-header-danger {
    background-color: #ff1c32;
    color: #ffffff;
}

.table-header-danger th {
    background-color: #ff1c32; 
    color: #ffffff;
}


.table-header-primary {
    background-color: #0068ff; 
    color: #ffffff;
}

.table-header-primary th {
    background-color: #0068ff; 
    color: #ffffff;
}

.table-header-warning {
    background-color: #fcd503; 
    color: #ffffff;
}

.table-header-warning th {
    background-color: #fcd503; 
    color: #ffffff;
}

.table-header-yellow {
    background-color: #fd7e14; 
    color: #ffffff;
}

.table-header-yellow th {
    background-color: #fd7e14; 
    color: #ffffff;
}

.table-header-success {
    background-color: #ff4578; 
    color: #ffffff;
}

.table-header-success th {
    background-color: #ff4578; 
    color: #ffffff;
}

.table-header-brown {
    background-color: #91cf67;
    color: #ffffff;
}

.table-header-brown th {
    background-color: #91cf67;
    color: #ffffff;
}

.table-header-purple {
    background-color: #b521ff; 
    color: #ffffff;
}

.table-header-purple th {
    background-color: #b521ff; 
    color: #ffffff;
}

.table-header-beige {
    background-color: #facf7f; 
    color: #ffffff;
}

.table-header-beige th {
    background-color: #facf7f; 
    color: #ffffff;
}

.table-header-royal {
    background-color: #BDBDBD; 
    color: #ffffff;
}

.table-header-royal th {
    background-color: #BDBDBD; 
    color: #ffffff;
}


/*Reminders*/
.reminder-box {
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 20px;
    background: #ffffff;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    transition: 0.2s;
}
.reminder-box:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}
.reminder-number {
    min-width: 45px;
    height: 45px;
    background: #0d6efd;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
}
.reminder-content h5 {
    margin-bottom: 5px;
}

.reminder-content p {
    font-size: 1.1rem; text-align: justify;
}

hr {
    width: 70%;
    margin: 0 auto;
}