/* SuperBox Distributor Website - Custom Styles */

/* Smooth transitions */
* {
    transition: all 0.3s ease;
}

/* Logo consistency */
nav img, header img {
    max-height: 50px;
    width: auto;
}

/* Button hover effects */
button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Card hover effects */
.shadow-lg:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* Admin panel tab styles */
.tab-button {
    transition: all 0.2s ease;
}

.tab-button.active {
    border-bottom: 2px solid #2563eb;
}

/* Upload dropzone hover */
.border-dashed:hover {
    background-color: rgba(59, 130, 246, 0.05);
}

/* Marketing materials hover */
.border.rounded-lg:hover {
    border-color: #3b82f6;
    background-color: #f8fafc;
}

/* Status animations */
#uploadStatus {
    animation: slideIn 0.3s ease-out;
}

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

/* Marquee Success Stories */
.marquee-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.marquee-content {
    display: flex;
    animation: marqueeScroll 60s linear infinite;
    will-change: transform;
}

.marquee-content:hover {
    animation-play-state: paused;
}

.success-card {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.success-card:hover {
    transform: scale(1.05);
}

@keyframes marqueeScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* Ensure marquee works on mobile */
@media (max-width: 768px) {
    .marquee-content {
        animation-duration: 40s;
    }
    
    .success-card {
        min-width: 300px;
    }
}