/* Glassmorphism Utilities */
.bg-glass {
    background: rgba(255, 255, 255, 0.03);
}

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

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

/* Input reset to remove arrows on number input */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

/* Animations */
@keyframes pulse-slow {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(0.95); }
}

.animate-pulse-slow {
    animation: pulse-slow 3s infinite;
}

/* Modal Open State */
#topUpModal.open {
    opacity: 1;
    pointer-events: auto;
}
#topUpModal.open #modalContent {
    transform: translateY(0);
}

/* Custom Perspective for 3D card effect */
.perspective-1000 {
    perspective: 1000px;
}

/* Smooth Count Animation Class */
.counter {
    font-variant-numeric: tabular-nums;
    transition: color 0.3s ease;
}
/* Glassmorphism Utilities */
.bg-glass {
    background: rgba(255, 255, 255, 0.03);
}

/* Scrollbar Hiding */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Custom Scrollbar for Right Panel */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.2);
}

/* Inputs */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
input:focus {
    outline: none;
}

/* Animations */
@keyframes pulse-slow {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(0.95); }
}
.animate-pulse-slow {
    animation: pulse-slow 3s infinite;
}

/* Modal States */
#topUpModal.open {
    opacity: 1;
    pointer-events: auto;
}
#topUpModal.open #modalContent {
    transform: translateY(0);
}

/* 3D Card Perspective */
.perspective-1000 {
    perspective: 1000px;
}
/* Glassmorphism */
.bg-glass { background: rgba(255, 255, 255, 0.03); }

/* Hide Scrollbar */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Custom Scrollbar for Desktop Right Panel */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* Input Styles */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input:focus { outline: none; }

/* Animations */
@keyframes pulse-slow {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(0.95); }
}
.animate-pulse-slow { animation: pulse-slow 3s infinite; }

/* Modal Open States */
#topUpModal.open { opacity: 1; pointer-events: auto; }
#topUpModal.open #modalContent { transform: translateY(0); }

#qrModal.open { opacity: 1; pointer-events: auto; }
#qrModal.open #qrModalContent { transform: scale(1); }

/* 3D Card */
.perspective-1000 { perspective: 1000px; }