/* Custom Styles for RMA Slots Website */

/* Brand Color Variables - Core Colors */
:root {
    /* Core Brand Colors */
    --carbon-black: #111214;        /* Background, car body, depth, contrast */
    --racing-red: #C5161D;          /* Primary accent, stripe, motion lines, emphasis */
    --pure-white: #FFFFFF;           /* Logo text highlights, outlines, contrast */
    
    /* Secondary/Supporting Colors */
    --steel-gray: #5A5E63;          /* Car body highlights, metallic shading */
    --dark-graphite: #2A2D31;       /* Secondary background shading, depth behind text */
    --silver-gray: #BFC3C7;         /* Text bevels, reflective accents */
    
    /* Accent/Detail Colors */
    --teal-cyan: #2596be;           /* Rear wing detail, makes logo pop */
    --checkered-black: #000000;     /* Flag pattern, small graphic elements */
}

/* Apply Poppins font family globally for body text */
body {
    font-family: 'Poppins', sans-serif;
}

/* Apply Russo One font to all headings for racing theme */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Russo One', sans-serif;
    font-weight: 400; /* Russo One only has one weight */
}

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

/* Custom scrollbar styling - using Carbon Black and Teal Cyan */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--carbon-black);
}

::-webkit-scrollbar-thumb {
    background: var(--teal-cyan);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #1E7898; /* Slightly darker version for hover */
}

/* Additional speed line animation for hero section */
@keyframes speedLines {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* Enhanced hover effects for product cards - using Teal Cyan accent */
.product-card {
    transition: all 0.3s ease;
}

.product-card:hover {
    box-shadow: 0 10px 30px rgba(37, 150, 190, 0.2); /* Updated accent color with opacity */
}

/* Form input focus states - using Teal Cyan accent */
input:focus,
textarea:focus {
    box-shadow: 0 0 0 3px rgba(37, 150, 190, 0.1); /* Updated accent color with opacity */
}

/* Mobile menu animation */
#mobile-menu {
    transition: all 0.3s ease;
}

#mobile-menu.hidden {
    display: none;
}

/* Logo hover effect */
header img {
    transition: transform 0.3s ease;
}

header img:hover {
    transform: scale(1.05);
}

/* Additional utility classes for brand colors */
.text-racing-red {
    color: var(--racing-red);
}

.bg-racing-red {
    background-color: var(--racing-red);
}

.text-teal-cyan {
    color: var(--teal-cyan);
}

.bg-teal-cyan {
    background-color: var(--teal-cyan);
}

.bg-carbon-black {
    background-color: var(--carbon-black);
}

.bg-dark-graphite {
    background-color: var(--dark-graphite);
}

.text-steel-gray {
    color: var(--steel-gray);
}

.text-silver-gray {
    color: var(--silver-gray);
}

/* Ensure all heading accent text uses Teal/Cyan - override any other colors */
h1 span,
h2 span,
h3 span {
    color: #2596be !important; /* Teal/Cyan Accent - explicit override */
}

/* Carousel Styles */
#carousel-track {
    display: flex;
    will-change: transform;
}

#inventory-carousel {
    position: relative;
}

.carousel-indicator.active {
    background-color: #2596be !important;
}

/* Hide navigation buttons on very small screens */
@media (max-width: 640px) {
    #carousel-prev,
    #carousel-next {
        padding: 0.5rem;
    }
    
    #carousel-prev svg,
    #carousel-next svg {
        width: 1rem;
        height: 1rem;
    }
}