/* Global Mobile Scroll Indicator - Option 8: Chevron Style */
.mobile-scroll-indicator {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    pointer-events: none;
}

.mobile-scroll-indicator.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.scroll-indicator-arrow {
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 15px;
    border-radius: 8px;
    animation: bounce 2.5s infinite;
    cursor: pointer;
    user-select: none;
}

.chevron {
    width: 20px;
    height: 20px;
    border-right: 3px solid white;
    border-bottom: 3px solid white;
    transform: rotate(45deg);
}

/* Bounce animation */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { 
        transform: translateY(0); 
    }
    40% { 
        transform: translateY(-8px); 
    }
    60% { 
        transform: translateY(-4px); 
    }
}

/* Touch feedback */
.scroll-indicator-arrow:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
}

/* Only show on mobile devices */
@media (max-width: 768px) {
    .mobile-scroll-indicator {
        display: block;
    }
}

/* Hide on desktop */
@media (min-width: 769px) {
    .mobile-scroll-indicator {
        display: none !important;
    }
}

/* Fade out when scrolling near bottom */
.mobile-scroll-indicator.fade-out {
    opacity: 0.3;
}