/* Custom Styles over Tailwind */

.glass-panel {
    background: rgba(30, 41, 59, 0.4);
    /* slate-800 */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 1.5rem;
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 1);
    /* dark-900 */
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(51, 65, 85, 1);
    /* slate-700 */
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(71, 85, 105, 1);
    /* slate-600 */
}

/* Progress stripe animation */
.progress-stripe {
    background-image: linear-gradient(45deg,
            rgba(255, 255, 255, 0.15) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.15) 50%,
            rgba(255, 255, 255, 0.15) 75%,
            transparent 75%,
            transparent);
    background-size: 1rem 1rem;
    animation: move-stripes 1s linear infinite;
}

@keyframes move-stripes {
    from {
        background-position: 1rem 0;
    }

    to {
        background-position: 0 0;
    }
}

/* Specific status colors */
.status-badge-valid {
    @apply bg-emerald-500/10 text-emerald-400 border-emerald-500/20;
}

.status-badge-invalid {
    @apply bg-red-500/10 text-red-400 border-red-500/20;
}

.status-badge-catchall {
    @apply bg-yellow-500/10 text-yellow-400 border-yellow-500/20;
}

.status-badge-error {
    @apply bg-slate-500/10 text-slate-400 border-slate-500/20;
}

.status-badge-inconclusive {
    @apply bg-blue-500/10 text-blue-400 border-blue-500/20;
}

/* Single Result Card Animations */
#single-result-card.result-valid {
    border-color: rgba(16, 185, 129, 0.4);
    background: linear-gradient(to right, rgba(16, 185, 129, 0.05), rgba(30, 41, 59, 0.5));
}

#single-result-card.result-valid #single-result-icon {
    background-color: rgba(16, 185, 129, 0.15);
    color: #34d399;
    /* emerald-400 */
}

#single-result-card.result-invalid {
    border-color: rgba(239, 68, 68, 0.4);
    background: linear-gradient(to right, rgba(239, 68, 68, 0.05), rgba(30, 41, 59, 0.5));
}

#single-result-card.result-invalid #single-result-icon {
    background-color: rgba(239, 68, 68, 0.15);
    color: #f87171;
    /* red-400 */
}

#single-result-card.result-catchall {
    border-color: rgba(234, 179, 8, 0.4);
    background: linear-gradient(to right, rgba(234, 179, 8, 0.05), rgba(30, 41, 59, 0.5));
}

#single-result-card.result-catchall #single-result-icon {
    background-color: rgba(234, 179, 8, 0.15);
    color: #facc15;
    /* yellow-400 */
}

#single-result-card.result-error {
    border-color: rgba(100, 116, 139, 0.4);
    background: linear-gradient(to right, rgba(100, 116, 139, 0.05), rgba(30, 41, 59, 0.5));
}

#single-result-card.result-error #single-result-icon {
    background-color: rgba(100, 116, 139, 0.15);
    color: #94a3b8;
    /* slate-400 */
}

#single-result-card.result-inconclusive {
    border-color: rgba(59, 130, 246, 0.4);
    background: linear-gradient(to right, rgba(59, 130, 246, 0.05), rgba(30, 41, 59, 0.5));
}

#single-result-card.result-inconclusive #single-result-icon {
    background-color: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    /* blue-400 */
}