/* all-news-scroll.css - Independent Scroll Button for All News Page - FIXED */

/* All News Page Scroll Button */
.all-news-scroll-btn {
    position: fixed !important;
    bottom: 100px !important;
    right: 25px !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--primary, #2c5aa0), var(--primary-light, #3a6bc5)) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(44, 90, 160, 0.3) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.5rem !important;
    z-index: 10000 !important; /* Higher than most elements */
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(20px) !important;
    pointer-events: auto !important;
}

.all-news-scroll-btn.visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    display: flex !important;
}

.all-news-scroll-btn:hover {
    background: linear-gradient(135deg, var(--primary-light, #3a6bc5), var(--primary-dark, #1d3a6e)) !important;
    transform: translateY(-5px) scale(1.1) !important;
    box-shadow: 0 6px 20px rgba(44, 90, 160, 0.4) !important;
}

.all-news-scroll-btn:active {
    transform: translateY(-2px) scale(0.98) !important;
}

/* Hide/show chevron icons based on direction */
.all-news-scroll-btn.up .fa-chevron-down {
    display: none !important;
}

.all-news-scroll-btn.up .fa-chevron-up {
    display: block !important;
}

.all-news-scroll-btn.down .fa-chevron-up {
    display: none !important;
}

.all-news-scroll-btn.down .fa-chevron-down {
    display: block !important;
}

/* Direction-specific colors */
.all-news-scroll-btn.up {
    background: linear-gradient(135deg, var(--secondary, #e74c3c), #c0392b) !important;
}

.all-news-scroll-btn.down {
    background: linear-gradient(135deg, var(--accent, #27ae60), #2ecc71) !important;
}

/* Floating animation for attention */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.all-news-scroll-btn.pulse {
    animation: float 2s ease-in-out infinite !important;
}

/* Ensure button is visible on All News page */
#allNewsPage.active ~ .all-news-scroll-btn.visible {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    pointer-events: auto !important;
}

/* Override any conflicting styles from other pages */
body.podcast-cover-active .all-news-scroll-btn {
    z-index: 10001 !important; /* Above podcast cover */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .all-news-scroll-btn {
        bottom: 90px !important;
        right: 20px !important;
        width: 45px !important;
        height: 45px !important;
        font-size: 1.3rem !important;
    }
}

@media (max-width: 480px) {
    .all-news-scroll-btn {
        bottom: 80px !important;
        right: 15px !important;
        width: 40px !important;
        height: 40px !important;
        font-size: 1.1rem !important;
    }
}

/* For dark mode */
@media (prefers-color-scheme: dark) {
    .all-news-scroll-btn {
        box-shadow: 0 4px 15px rgba(44, 90, 160, 0.5) !important;
    }
    
    .all-news-scroll-btn:hover {
        box-shadow: 0 6px 20px rgba(44, 90, 160, 0.7) !important;
    }
}

/* Override any conflicting inner-page styles */
.inner-page.active ~ .all-news-scroll-btn:not(.visible) {
    display: none !important;
}

/* Make sure button is clickable when visible */
.all-news-scroll-btn.visible {
    pointer-events: auto !important;
    }