/**
 * MOBILE INTERACTION BUTTONS RESIZE & CENTERING
 * Makes Like, Comment, and Share buttons significantly larger, circular, and perfectly centered.
 */

@media (max-width: 768px) {

    /* Target the container to ensure flex spacing handles larger buttons */
    .interaction-buttons,
    .post-actions,
    .feed-actions,
    .feed-action-icons {
        gap: 16px !important;
        /* Increase gap between action groups */
        padding: 5px 0 !important;
        justify-content: space-between !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Target the wrapper div (button + count) */
    .feed-action {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        /* Space between circle button and number */
    }

    /* Target the buttons themselves - Make them perfect circles */
    .btn-like,
    .btn-comment,
    .btn-share {
        width: 48px !important;
        /* Fixed width */
        height: 48px !important;
        /* Fixed height */
        padding: 0 !important;
        /* Remove padding to ensure centering */
        min-height: 48px !important;
        min-width: 48px !important;
        border-radius: 50% !important;
        /* Perfect circle */
        display: flex !important;
        /* Use flex for internal centering */
        align-items: center !important;
        justify-content: center !important;
        transform: scale(1) !important;
        margin: 0 !important;
        /* Reset margins */
        flex-shrink: 0 !important;
        /* Prevent squishing */
    }

    /* Make icons larger and perfectly centered */
    .btn-like i,
    .btn-comment i,
    .btn-share i {
        font-size: 1.5rem !important;
        /* Bigger icons */
        margin: 0 !important;
        /* Remove any margins pushing it off-center */
        padding: 0 !important;
        line-height: 1 !important;
        /* Prevent line-height shifts */
        display: block !important;
        position: relative !important;
        top: 1px !important;
        /* Optical adjustment if needed, usually 0 or 1px helps FontAwesome vertical align */
    }

    /* Make text/numbers larger and distinct */
    .btn-like span,
    .btn-comment span,
    .btn-share span,
    .like-count,
    .comment-count,
    .share-count {
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #B0B3B8 !important;
        /* Ensure visibility */
        margin-left: 2px !important;
    }
}
/* =========================================
   MOBILE VIEW COUNT FIXES
   ========================================= */
@media (max-width: 768px) {
    /* FORCE HIDE desktop stats that might be overridden by generic flex rules */
    .feed-action.desktop-only {
        display: none !important;
    }

    /* Style for the top mobile stats override */
    .feed-item__stats-mobile {
        display: flex !important;
        background: transparent !important; /* Clean look */
        padding: 10px 24px 0 24px !important; /* Match header padding */
        margin-bottom: -4px !important; /* Tighten to actions */
    }

    .view-indicator-mobile {
        opacity: 0.9;
    }
    
    .view-label {
        font-size: 13px !important;
        opacity: 0.8;
    }
}

/* =========================================
   MOBILE VIEW COUNT STYLING (Background & Colors)
   ========================================= */
@media (max-width: 768px) {
    /* Base Style (Light Mode) */
    .feed-item__stats-mobile {
        background: #f3f4f6 !important; /* Light gray background */
        border-radius: 8px !important;
        margin: 0 16px 8px 16px !important; /* Inset margin */
        padding: 8px 12px !important; /* Comfortable padding */
        width: auto !important; /* Allow inset */
    }

    .view-label {
        color: #6b7280 !important; /* Distinct gray for text */
    }

    .view-count {
        color: #111827 !important; /* Strong dark for numbers */
    }
}

/* Dark Mode Overrides */
@media (prefers-color-scheme: dark) {
    .feed-item__stats-mobile {
        background: rgba(255, 255, 255, 0.05) !important; /* Subtle transparent white */
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
    }

    .view-label {
        color: #9ca3af !important; /* Lighter gray for dark mode */
    }
    
    .view-count {
        color: #f3f4f6 !important; /* Whiteish for numbers */
    }
}

/* Explicit class support for dark mode toggles */
[data-theme="dark"] .feed-item__stats-mobile,
body.dark-mode .feed-item__stats-mobile,
html.dark-mode .feed-item__stats-mobile {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .view-label,
body.dark-mode .view-label,
html.dark-mode .view-label {
    color: #9ca3af !important;
}

[data-theme="dark"] .view-count,
body.dark-mode .view-count,
html.dark-mode .view-count {
    color: #f3f4f6 !important;
}

/* =========================================
   MOBILE VIEW COUNT WIDTH FIX (100%)
   ========================================= */
@media (max-width: 768px) {
    .feed-item__stats-mobile {
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important; /* Remove radius for full integration */
        border-left: none !important;
        border-right: none !important;
        padding-left: 20px !important; /* Align with content padding */
        padding-right: 20px !important;
    }
    
    /* Ensure it sits nicely above the border-top of actions */
    .feed-item__actions {
        border-top: none !important; /* Let the stats background define the separation if needed, or keep it */
    }
}

/* =========================================
   MOBILE VIEW COUNT DARK MODE ADJUSTMENT (DARKER)
   ========================================= */
@media (prefers-color-scheme: dark) {
    .feed-item__stats-mobile {
        background: rgba(0, 0, 0, 0.3) !important; /* Darken the background instead of lightening */
        border: 1px solid rgba(255, 255, 255, 0.02) !important; /* Very subtle border */
    }
}

[data-theme="dark"] .feed-item__stats-mobile,
body.dark-mode .feed-item__stats-mobile,
html.dark-mode .feed-item__stats-mobile {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.02) !important;
}