/* Custom Glassmorphism and UI Overrides */

.glass-container {
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    transition: all 0.3s ease;
}

.btn-number,
.btn-operator,
.btn-secondary,
.btn-primary {
    @apply h-14 sm:h-16 rounded-2xl flex items-center justify-center text-lg font-medium transition-all duration-300 active:scale-95;
    position: relative;
    overflow: hidden;
}

.btn-number {
    @apply bg-white/5 hover:bg-white/10 border border-white/5 hover:border-white/20 hover:shadow-[0_0_15px_rgba(255, 255, 255, 0.05)];
}

.btn-operator {
    @apply bg-blue-500/10 hover:bg-blue-500/20 text-blue-400 border border-blue-500/10 hover:border-blue-400/30 hover:shadow-[0_0_20px_rgba(59, 130, 246, 0.15)];
}

.btn-secondary {
    @apply bg-white/10 hover:bg-white/20 text-white/80 border border-white/10 hover:border-white/30;
}

.btn-primary {
    @apply bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white shadow-xl shadow-blue-900/40 font-bold uppercase tracking-widest text-xs sm:text-sm;
    transition: transform 0.2s, box-shadow 0.2s, background 0.5s;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -6px rgba(59, 130, 246, 0.5);
}

/* Animations */
@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-4px);
    }

    75% {
        transform: translateX(4px);
    }
}

.error-shake {
    animation: shake 0.2s ease-in-out 0s 2;
}

#display {
    transition: opacity 0.15s ease-out;
}

/* Scrollbar styling for history and display */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

#history::-webkit-scrollbar {
    height: 2px;
}

#history::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}