/* ========================================
   COUNTER BADGES ONLY - NO LAYOUT CHANGES
   ======================================== */

/* Counter badge styles - positioned to avoid cutoff without changing button layout */
.ffg-action-count {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    background: #ff0000 !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    padding: 2px 5px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    min-width: 16px !important;
    height: 16px !important;
    text-align: center !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
    z-index: 1000 !important;
    font-family: Arial, sans-serif !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* Hover effect for badges */
.ffg-action-count:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
}

/* Only ensure buttons have relative positioning for absolute counters */
.ffg-style-actions button {
    position: relative !important;
    overflow: visible !important;
}

/* Ensure parent containers don't cut off badges */
.ffg-style-actions {
    overflow: visible !important;
}

.ffg-style-row {
    overflow: visible !important;
}

.ffg-generator-container {
    overflow: visible !important;
}

/* Force visibility for all counter badges */
.ffg-action-count {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

/* Show badges even when count is 0 for testing */
.ffg-action-count[data-count="0"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Always show counters by default - loading state */
.ffg-action-count {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: #666666 !important;
    color: #ffffff !important;
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    border-radius: 50% !important;
    padding: 2px 5px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    min-width: 16px !important;
    height: 16px !important;
    text-align: center !important;
    line-height: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
    z-index: 1000 !important;
}

/* Only hide when explicitly hidden by JavaScript */
.ffg-action-count.ffg-hidden {
    display: none !important;
}

/* Ensure badges are visible on all button types */
.ffg-copy-btn .ffg-action-count,
.ffg-share-btn .ffg-action-count,
.ffg-download-btn .ffg-action-count,
.ffg-like-btn .ffg-action-count {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Specific button styles with counters */
.ffg-copy-btn:hover .ffg-action-count {
    background: #10b981;
}

.ffg-share-btn:hover .ffg-action-count {
    background: #8b5cf6;
}

.ffg-download-btn:hover .ffg-action-count {
    background: #f59e0b;
}

.ffg-like-btn:hover .ffg-action-count {
    background: #ef4444;
}

.ffg-like-btn.ffg-liked .ffg-action-count {
    background: #ef4444;
}

/* Loading state for buttons */
.ffg-style-actions button.ffg-loading .ffg-action-count {
    background: #9ca3af;
}

/* Dark theme counter styles */
.ffg-generator-container.dark-theme .ffg-action-count {
    background: #ff0000 !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.6) !important;
}

.ffg-generator-container.dark-theme .ffg-copy-btn:hover .ffg-action-count {
    background: #059669;
}

.ffg-generator-container.dark-theme .ffg-share-btn:hover .ffg-action-count {
    background: #7c3aed;
}

.ffg-generator-container.dark-theme .ffg-download-btn:hover .ffg-action-count {
    background: #d97706;
}

.ffg-generator-container.dark-theme .ffg-like-btn:hover .ffg-action-count {
    background: #dc2626;
}

.ffg-generator-container.dark-theme .ffg-like-btn.ffg-liked .ffg-action-count {
    background: #dc2626;
}

/* Mobile responsive counters */
@media (max-width: 768px) {
    .ffg-action-count {
        font-size: 9px !important;
        padding: 2px 4px !important;
        min-width: 14px !important;
        height: 14px !important;
        top: -3px !important;
        right: -3px !important;
    }
}

/* Universal widget counter visibility */
.ffg-widget-font-actions .ffg-action-count {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Override any conflicting styles */
.ffg-style-actions .ffg-action-count,
.ffg-widget-font-actions .ffg-action-count {
    position: absolute !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1000 !important;
}