/* static/css/style.css */

/* Define CSS variables for the accent color for easier theming */
:root {
    --accent-color: #8b5cf6; /* Corresponds to violet-500 */
    --accent-color-light: #a78bfa; /* Corresponds to violet-400 */
}

/* Custom fade-in and slide-up animation for cards */
@keyframes card-entry {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Apply the animation with a stagger effect */
.trade-card {
    /* Set animation properties */
    animation: card-entry 0.5s ease-out forwards;
    opacity: 0; /* Start as invisible */
}

/* Stagger the animation for each card */
.trade-card:nth-child(1) { animation-delay: 0.1s; }
.trade-card:nth-child(2) { animation-delay: 0.2s; }
.trade-card:nth-child(3) { animation-delay: 0.3s; }
.trade-card:nth-child(4) { animation-delay: 0.4s; }
.trade-card:nth-child(5) { animation-delay: 0.5s; }
.trade-card:nth-child(6) { animation-delay: 0.6s; }


/* Custom animation for the AI insight section within a card */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animate-fade-in {
    animation: fadeIn 0.5s ease-in;
}

/* NEW: Custom animation for sections on the landing page */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(40px); /* Slightly more pronounced slide up */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out forwards; /* Longer duration */
    opacity: 0; /* Start hidden */
}


/* Custom scrollbar for a sleek, modern look */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #1e293b; /* slate-800 */
}

::-webkit-scrollbar-thumb {
    background: #475569; /* slate-600 */
    border-radius: 10px;
    border: 2px solid #1e293b; /* slate-800 */
}

::-webkit-scrollbar-thumb:hover {
    background: #64748b; /* slate-500 */
}

::-webkit-scrollbar-thumb:hover {
    background: #64748b; /* slate-500 */
}

/* Hide the native icon so only your SVG shows */
input[type="date"]::-webkit-calendar-picker-indicator { display: none; opacity: 0; }
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-clear-button { display: none; }

input[type="date"] { max-width: 100%; overflow: hidden; }

/* Remove native arrow from select elements */
select {
  -webkit-appearance: none; /* Chrome, Safari */
  -moz-appearance: none;    /* Firefox */
  appearance: none;         /* Standard */
  background-image: none;   /* Remove default arrow graphic */
}

/* date handler  */
@supports (-webkit-touch-callout: none) {
  input[type="date"] { height: 44px; line-height: 44px; }
  input[type="date"]::-webkit-date-and-time-value { text-align: left; }
  input[type="date"]::-webkit-datetime-edit { padding: 0; }
}