/* ===== Refresh Button & Badge Styles ===== */

.control-btn.refresh-btn {
    position: relative;
}

.new-news-badge {
    position: absolute;
    top: -6px;
    left: -6px;
    background: linear-gradient(135deg, #dc3545, #ff4757);
    color: white;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.4);
    animation: pulse-badge 2s ease-in-out infinite;
    z-index: 10;
}

@keyframes pulse-badge {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.refresh-btn:hover .new-news-badge {
    animation: none;
}

.control-btn.refresh-btn i {
    transition: transform 0.5s ease;
}

.control-btn.refresh-btn:active i {
    transform: rotate(360deg);
}

/* ===== Notification Toast ===== */

.refresh-notification {
    position: fixed;
    top: 100px;
    right: -400px;
    background: linear-gradient(135deg, #0077b6, #00b4d8);
    color: white;
    padding: 16px 24px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 119, 182, 0.4);
    z-index: 10000;
    font-size: 14px;
    font-weight: 600;
    transition: right 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    min-width: 250px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.refresh-notification::before {
    content: "🔔";
    font-size: 20px;
}

.refresh-notification.show {
    right: 20px;
}

[data-theme="dark"] .refresh-notification {
    background: linear-gradient(135deg, #1f6feb, #58a6ff);
    box-shadow: 0 8px 32px rgba(31, 111, 235, 0.4);
}

/* ===== Responsive ===== */

@media (max-width: 768px) {
    .refresh-notification {
        top: 80px;
        right: -300px;
        min-width: 200px;
        padding: 12px 18px;
        font-size: 13px;
    }
    
    .refresh-notification.show {
        right: 10px;
    }
    
    .new-news-badge {
        font-size: 9px;
        min-width: 16px;
        height: 16px;
    }
}

/* ===== Loading State for Refresh Button ===== */

.control-btn.refresh-btn.loading i {
    animation: spin-refresh 1s linear infinite;
}

@keyframes spin-refresh {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}