/* assets/css/header.css */
/* Custom Styles for ReducePixel Navigation, Drawers & Modals */

/* Smooth Slide-up and Slide-down for Bottom Drawers */
@keyframes slide-up {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes slide-down {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(100%);
    }
}

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

.animate-slide-down {
    animation: slide-down 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Custom Scrollbar hiding utilities for horizontally scrollable sliders */
.scrollbar-none {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.scrollbar-none::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

/* Glassmorphism panel helper */
.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(209, 213, 219, 0.3);
}

.glass-dark-panel {
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Desktop Mega Menu visual adjustments */
.mega-menu-content {
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
}

.group:hover .mega-menu-content {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Keyboard outline visual indicators */
a:focus-visible, 
button:focus-visible, 
input:focus-visible, 
select:focus-visible {
    outline: 2px solid #2563EB;
    outline-offset: 2px;
}

/* Dynamic Rupee Locked Overlay */
.rupee-lock-overlay {
    background: rgba(37, 99, 235, 0.9);
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.group:hover .rupee-lock-overlay {
    opacity: 1;
}

/* Alternating mobile badge animation */
@keyframes text-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.65; }
}

.animate-text-pulse {
    animation: text-pulse 2s infinite ease-in-out;
}