/* ============================================================================
 * UNIVERSAL TRANSPARENT CAROUSEL STYLES
 * ============================================================================ */
.carousel { 
    overflow: hidden; 
    padding: 15px 0; 
    background: transparent !important; 
    position: relative; 
    user-select: none; 
    margin: 40px auto; 
    z-index: 5; 
    border-top: 2px solid var(--brand-blue); 
    border-bottom: 2px solid var(--brand-blue); 
    max-width: 1200px; 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
    box-sizing: border-box; 
}

.carousel::before {
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: linear-gradient(90deg, var(--bg-main) 0%, transparent 15%, transparent 85%, var(--bg-main) 100%) !important; 
    z-index: 1; 
    pointer-events: none; 
}

.carousel-track { 
    display: flex; 
    gap: 32px; 
    will-change: transform; 
    width: max-content; 
}

.carousel-card { 
    background: transparent !important; 
    border: none !important; 
    border-radius: 10px; 
    padding: 8px; 
    width: 147px; 
    flex-shrink: 0; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    box-sizing: border-box; 
}

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

/* PC Override */
@media (min-width: 769px) {
    .carousel { 
        margin: 40px 0 40px 2% !important; 
        max-width: 50% !important; 
    }
}

/* Mobile Override */
@media (max-width: 768px) {
    .carousel { 
        margin: 40px 0 !important; 
        border-radius: 0; 
        border-left: none; 
        border-right: none; 
        border-top: 2px solid var(--brand-blue); 
        border-bottom: 2px solid var(--brand-blue); 
        max-width: 100% !important; 
        margin-left: 0 !important; 
    }
}