/* MetalMarket.cash - Core Styles */

/* Ticker animation */
@keyframes ticker {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.animate-ticker {
    animation: ticker 40s linear infinite;
}
.animate-ticker:hover {
    animation-play-state: paused;
}

/* Glassmorphism utilities */
.glass {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(51, 65, 85, 0.3);
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: rgb(15, 23, 42);
}
::-webkit-scrollbar-thumb {
    background: rgb(51, 65, 85);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgb(71, 85, 105);
}

/* Select styling */
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

/* Sparkline canvas reset */
canvas.sparkline {
    display: block;
}

/* Number input arrows */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    opacity: 0.5;
}

/* Focus ring for accessibility */
*:focus-visible {
    outline: 2px solid rgb(52, 211, 153);
    outline-offset: 2px;
    border-radius: 8px;
}

/* Loading pulse animation */
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
}
.pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
}

/* Transition for price updates */
.price-flash {
    animation: flash 0.5s ease-out;
}
@keyframes flash {
    0% { background-color: rgba(16, 185, 129, 0.2); }
    100% { background-color: transparent; }
}
.price-flash-down {
    animation: flash-down 0.5s ease-out;
}
@keyframes flash-down {
    0% { background-color: rgba(244, 63, 94, 0.2); }
    100% { background-color: transparent; }
}

/* Print styles */
@media print {
    nav, footer, #cookie-banner, .animate-ticker { display: none !important; }
    body { background: white; color: black; }
}