/* Custom styles for CoinVault */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

body {
    font-family: 'Inter', sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #1a1a2e;
}

::-webkit-scrollbar-thumb {
    background: #4f46e5;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #6366f1;
}

/* Animation for buttons */
button {
    transition: all 0.2s ease;
}

/* Hover effect for cards */
.bg-gray-800:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Connect wallet button pulse animation */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

#connectWalletBtn {
    animation: pulse 2s infinite;
}
/* ============================================
   MOBILE RESPONSIVE FIXES
   ============================================ */

/* Prevent horizontal scroll on all pages */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Fix the card hover animation - disable on mobile to prevent layout shift */
@media (max-width: 768px) {
    .bg-gray-800:hover {
        transform: none;
        box-shadow: none;
    }
    
    /* Smaller headings on mobile */
    h1 { font-size: 1.5rem; }
    
    /* Make tables scroll horizontally instead of overflowing */
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Tighter container padding on very small screens */
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    /* Wallet address text - prevent overflow */
    .font-mono {
        word-break: break-all;
        font-size: 0.75rem;
    }
    
    /* Modal full-width on mobile */
    .max-w-md {
        max-width: calc(100vw - 1.5rem);
    }
    
    /* Modals take more screen on mobile */
    .fixed .bg-gray-800.rounded-2xl {
        margin: 0.75rem;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    /* Market table - hide less important columns on mobile */
    .market-col-volume { display: none; }
    .market-col-cap { display: none; }
}

@media (max-width: 480px) {
    /* Very small phones */
    .text-2xl { font-size: 1.25rem; }
    nav .text-xl { font-size: 1rem; }
    
    /* Stack footer on tiny screens */
    footer .grid { grid-template-columns: 1fr; }
}

/* Touch-friendly tap targets */
@media (hover: none) {
    button, a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}