/* Article Analytics Styles */

/* Facebook Share Button Fix */
.share-facebook-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    background-color: #1877f2 !important;
}

.share-facebook-btn:hover {
    background-color: #166fe5 !important;
}

/* View and Share Count Badges */
.analytics-badge {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    transition: all 0.3s ease;
}

.analytics-badge:hover {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    transform: translateY(-1px);
}

/* Share Button Enhancements */
.share-button {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.share-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 100%
    );
    transition: left 0.5s ease;
}

.share-button:hover::before {
    left: 100%;
}

.share-button:active {
    transform: scale(0.95);
}

/* Share Count Badges */
.share-count-badge {
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.share-count-badge.animate {
    animation: bounceCount 0.5s ease;
}

@keyframes bounceCount {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Instagram Modal Styles */
.instagram-modal {
    backdrop-filter: blur(10px);
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.instagram-modal .modal-content {
    animation: slideUp 0.3s ease;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Success Message Animation */
.share-success-enter {
    animation: slideInSuccess 0.4s ease;
}

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

/* Responsive adjustments */
@media (max-width: 768px) {
    .share-button {
        font-size: 0.875rem;
        padding: 0.75rem;
    }
    
    .share-count-badge {
        font-size: 0.625rem;
        min-width: 1.25rem;
        height: 1.25rem;
    }
    
    .analytics-badge {
        font-size: 0.75rem;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .analytics-badge {
        background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
        color: #f3f4f6;
    }
    
    .analytics-badge:hover {
        background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    }
}

/* Pulse animation for real-time updates */
.pulse-update {
    animation: pulseGlow 1s ease-in-out;
}

@keyframes pulseGlow {
    0% { box-shadow: 0 0 0 0 rgba(245, 134, 52, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(245, 134, 52, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 134, 52, 0); }
}