@tailwind base;
@tailwind components;
@tailwind utilities;

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

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
}

/* Hide spin buttons for numbers */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance: textfield;
}

/* Modal Animations */
.modal.show {
    display: flex !important;
}

.modal.show .modal-content {
    animation: slideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Desktop Modal specific animations override */
@media (min-width: 640px) {
    .modal.show .modal-content {
        animation: popIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    @keyframes popIn {
        from {
            opacity: 0;
            transform: scale(0.95) translateY(10px);
        }
        to {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }
}

/* Custom Scrollbar for modern look */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: #3f3f46;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #52525b;
}

/* Price update visual flash */
.price-update {
    animation: text-flash 0.5s ease-out;
}

@keyframes text-flash {
    0% {
        color: #10b981;
        text-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
    }
    100% {
        color: inherit;
        text-shadow: none;
    }
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

input {
    appearance: none;
    -webkit-appearance: none;
}

#quick-pairs-container {
    cursor: grab;
    user-select: none;
}
#quick-pairs-container:active {
    cursor: grabbing;
}