* {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

.animated-gradient {
    background: linear-gradient( -45deg, oklch(var(--b1)), oklch(var(--b2)), oklch(var(--b1)), oklch(var(--b2)) );
    background-size: 300% 300%;
    animation: gradient 100s ease infinite;
}

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

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@media (max-width: 640px) {
    #modal-content {
        width: 100vw;
        max-width: none;
        max-height: none;
        margin: 0;
        padding: 1rem;
        overflow: auto;
        border-radius: 0;
    }
}

@media (max-width: 640px) {
    @supports (height: 100dvh) {
        #modal-content {
            height: 100dvh;
        }
    }

    @supports not (height: 100dvh) {
        #modal-content {
            height: 100vh;
        }
    }
}

/* Custom animate.css extension - headShake with pause */
@keyframes headShakeWithPause {
    0% { transform: translateX(0); }
    1.625% { transform: translateX(-6px) rotateY(-9deg); }
    3.25% { transform: translateX(5px) rotateY(7deg); }
    4.625% { transform: translateX(-3px) rotateY(-5deg); }
    7.75% { transform: translateX(2px) rotateY(3deg); }
    10.875% { transform: translateX(-1px) rotateY(-1deg); }
    12.5%, 100% { transform: translateX(0); }
}
.animate__headShakeWithPause {
    animation: headShakeWithPause 4s ease-in-out infinite;
}

/* Card flip animation styles */
.perspective-1000 {
    perspective: 1000px;
}
.transform-style-preserve-3d {
    transform-style: preserve-3d;
}
.backface-hidden {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.rotate-y-180 {
    transform: rotateY(180deg);
}
.card-flip.flipped {
    transform: rotateY(180deg);
}