/* ==========================================================================
   1. PROTECTED HEADER STRUCTURE
   ========================================================================== */
.fi-post-header { overflow: visible !important; }
.fi-post-header .entry-meta__action { 
    display: inline-flex !important; align-items: center !important; 
    gap: 18px !important; margin-left: auto !important; overflow: visible !important; 
}
.fi-post-header .posted-on a, .fi-post-header .posted-on time { 
    pointer-events: none !important; color: inherit !important; text-decoration: none !important;
}

/* Push Typer's native buttons off-screen so they are invisible but remain fully clickable by our JS */
.fi-post-header .entry-meta__action > a:not(.fi-proxy-btn):not(.fi-dropdown-item) { 
    position: absolute !important; left: -9999px !important; top: -9999px !important;
    width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important;
}

/* ==========================================================================
   2. FLOATING SHARE (Absolute Override for Social Halos and Colors)
   ========================================================================== */
.svq-love-count, .btn-counter, .fi-proxy-count { color: #888 !important; }

/* Force Inner Spans to be transparent so Facebook/Twitter colors vanish */
body div.svq-share__action a.btn[class*="social-"] .svq-icon,
body div.svq-share__action a.btn[class*="social-"]:hover .svq-icon {
    background-color: transparent !important; background: transparent !important;
    box-shadow: none !important; border: none !important;
}

/* ==========================================================================
   3. CUSTOM PROXY ICONS
   ========================================================================== */
.fi-proxy-container { display: inline-flex !important; align-items: center !important; gap: 18px !important; overflow: visible !important; margin-left: auto !important; }
.fi-proxy-btn {
    display: inline-flex !important; align-items: center !important; justify-content: center !important; 
    cursor: pointer !important; color: #888 !important; font-size: 15px !important; font-weight: 600 !important; 
    transition: opacity 0.2s ease !important; text-decoration: none !important; background: transparent !important; 
    border: none !important; padding: 0 !important; box-shadow: none !important; margin: 0 !important; position: relative !important;
}
.fi-proxy-btn:hover { opacity: 0.6 !important; }

.fi-proxy-svg { width: 22px !important; height: 22px !important; margin-right: 5px !important; fill: transparent !important; stroke: #888 !important; stroke-width: 2px !important; }
.fi-proxy-svg-solid { fill: #888 !important; stroke: #888 !important; }
.fi-ok-img { width: 22px !important; height: 22px !important; margin-right: 5px !important; display: inline-block !important; }

/* Disabled State for Author viewing own post (Explicitly forced to show) */
.fi-is-disabled { pointer-events: none !important; opacity: 0.6 !important; cursor: default !important; display: inline-flex !important; }

/* ==========================================================================
   4. TINY TEAL FOLLOW PILL
   ========================================================================== */
.fi-header-follow-btn {
    margin-left: 10px !important; padding: 0 8px !important; border-radius: 12px !important;
    font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase !important;
    letter-spacing: 0.5px !important; display: inline-flex !important; align-items: center !important;
    justify-content: center !important; height: 20px !important; line-height: 20px !important;
    border: 1px solid #0bc0b4 !important; color: #0bc0b4 !important; background: transparent !important;
    text-decoration: none !important; white-space: nowrap !important; transition: all 0.2s ease !important; cursor: pointer !important;
}
.fi-header-follow-btn:hover, .fi-header-follow-btn.is-following { background-color: #0bc0b4 !important; color: #fff !important; }

/* ==========================================================================
   5. 3-DOT DROPDOWN MENU 
   ========================================================================== */
.fi-dropdown-wrapper { position: relative !important; display: inline-flex !important; align-items: center !important; overflow: visible !important; }
.fi-dropdown-menu {
    opacity: 0 !important; visibility: hidden !important; 
    position: absolute !important; top: 100% !important; right: 0 !important; background: #fff !important;
    border: 1px solid #eaeaea !important; box-shadow: 0 5px 15px rgba(0,0,0,0.08) !important; border-radius: 6px !important;
    padding: 6px 0 !important; min-width: 130px !important; margin-top: 10px !important; z-index: 999999 !important;
    transition: opacity 0.2s ease, visibility 0.2s ease !important;
}
.fi-dropdown-menu.fi-show-menu { opacity: 1 !important; visibility: visible !important; }

.fi-dropdown-item {
    display: block !important; padding: 8px 16px !important; color: #444 !important; font-size: 13px !important;
    text-decoration: none !important; font-weight: 500 !important; white-space: nowrap !important; transition: background 0.2s ease !important;
}
.fi-dropdown-item:hover { background: #f5f5f5 !important; color: #0bc0b4 !important; }

/* ==========================================================================
   6. TOOLTIPS & ANIMATIONS
   ========================================================================== */
[data-fi-tooltip]::after {
    content: attr(data-fi-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(0);
    background-color: #222; color: #fff; padding: 5px 9px; font-size: 11px; font-weight: 500; border-radius: 4px;
    white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 99999; letter-spacing: 0.5px; text-transform: none !important; line-height: 1 !important; font-family: sans-serif;
}
[data-fi-tooltip]::before {
    content: ''; position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%) translateY(0);
    border-width: 5px; border-style: solid; border-color: #222 transparent transparent transparent; opacity: 0; visibility: hidden;
    pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 99999;
}
[data-fi-tooltip]:hover::after, [data-fi-tooltip]:hover::before { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(-3px); }

@keyframes fi-pop { 0% { transform: scale(0.8); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }
.fi-pop-anim { animation: fi-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }