/* Ticket Page Styles
   ========================================================================== */

/* Ticket card hover effects */
.ticket {
    transition: all 0.3s ease;
}

.ticket:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Ticket number styling with responsive sizing */
.ticket-number {
    transition: all 0.2s ease;
    max-width: 65px;
    aspect-ratio: 3 / 2;
    font-size: 0.875rem; /* Improved readability on mobile */
    padding: 0.5rem; /* Larger tap target */
}

/* Ticket container with dynamic height */
#ticket-container {
    max-height: 500px;
    overflow-y: auto;
}

/* Responsive selected tickets table/list */
#selected-tickets > div {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
}


/* Navigation link hover effects */
.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: #0f766e;
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* Jackpot modal scroll behavior */
#modal-content-jackpot {
    overflow-y: auto;
}

/* Ticket grid with dynamic height */
#ticket-grid {
    position: relative;
    min-height: 300px;
}

/* Loading spinner for ticket loading */
.loading-spinner {
    display: none;
    text-align: center;
    padding: 20px;
}

.loading-spinner svg {
    animation: spin 1s linear infinite;
}

/* Jackpot animation for modal */
.jackpot-animation {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.jackpot-animation .animate-spin {
    animation: spin 1s linear infinite;
}

/* Spin animation for loading and jackpot */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}