.daypass-bar {
    position: sticky;
    top: 0;
    z-index: 1000;

    width: 100%;
    height: 36px;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;

    font-size: 16px;
    letter-spacing: 0.3px;

    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: white;
}

.daypass-bar.warning {
    background: linear-gradient(135deg, #f39c12, #C46C1D);
}

.daypass-bar.danger {
    background: linear-gradient(135deg, #e74c3c, #A83226);
}

.daypass-bar.expired {
    background: #555555;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}

.daypass-bar.expired:hover {
    background: #454545;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
}


.fullpackage-bar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: linear-gradient(135deg, #020617, #3b0d50, #0d0a1a, #1a0f2f, #4b1e80, #0d0a1a);
    background-size: 300% 300%;
    color: white;
    font-size: 16px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: 0.3px;
    animation: backgroundShift 25s ease infinite;
}

@keyframes backgroundShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}