/**
 * Najibul Interaction Engine - Master Single-Line Responsive Architecture
 * 100% 1-Line across Desktop, Tablet, and Mobile (Zero CLS, Lightning Fast)
 */

.najibul-interaction-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 12px;
    padding: 10px 0;
    margin: 14px 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible !important;
}

/* Ensure buttons never wrap and match exact capsule aesthetics */
.najibul-interaction-wrapper .najibul-ld-container {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px;
    flex-shrink: 0;
}

.najibul-interaction-wrapper .najibul-ld-btn,
.najibul-interaction-wrapper .nbs-share-btn-main,
.najibul-interaction-wrapper .najibul-save-pill-btn,
.najibul-interaction-wrapper .najibul-follow-btn {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    height: 38px;
    padding: 0 16px;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1;
    border-radius: 9999px;
    box-sizing: border-box;
}

/* Tablet Optimizations (Screen size <= 768px) */
@media screen and (max-width: 768px) {
    .najibul-interaction-wrapper {
        gap: 8px;
        padding: 8px 0;
        margin: 10px 0;
    }

    .najibul-interaction-wrapper .najibul-ld-container {
        gap: 6px;
    }

    .najibul-interaction-wrapper .najibul-ld-btn,
    .najibul-interaction-wrapper .nbs-share-btn-main,
    .najibul-interaction-wrapper .najibul-save-pill-btn,
    .najibul-interaction-wrapper .najibul-follow-btn {
        height: 34px !important;
        padding: 0 12px !important;
        font-size: 12.5px !important;
        gap: 5px !important;
    }

    .najibul-interaction-wrapper svg,
    .najibul-interaction-wrapper .najibul-ld-svg {
        width: 15px !important;
        height: 15px !important;
    }
}

/* Mobile Devices (Screen size <= 480px) - STRICT 1-LINE FIT */
@media screen and (max-width: 480px) {
    .najibul-interaction-wrapper {
        gap: 5px !important;
        padding: 6px 0 !important;
        margin: 8px 0 !important;
        justify-content: center !important;
    }

    .najibul-interaction-wrapper .najibul-ld-container {
        gap: 4px !important;
    }

    .najibul-interaction-wrapper .najibul-ld-btn,
    .najibul-interaction-wrapper .nbs-share-btn-main,
    .najibul-interaction-wrapper .najibul-save-pill-btn,
    .najibul-interaction-wrapper .najibul-follow-btn {
        height: 32px !important;
        padding: 0 8px !important;
        font-size: 11.5px !important;
        gap: 4px !important;
        letter-spacing: -0.2px;
    }

    .najibul-interaction-wrapper svg,
    .najibul-interaction-wrapper .najibul-ld-svg {
        width: 13px !important;
        height: 13px !important;
    }

    .najibul-interaction-wrapper .najibul-ld-count {
        font-size: 11px !important;
    }
}

/* Extra Compact Mobile (Screen size <= 360px) */
@media screen and (max-width: 360px) {
    .najibul-interaction-wrapper {
        gap: 3px !important;
    }

    .najibul-interaction-wrapper .najibul-ld-container {
        gap: 3px !important;
    }

    .najibul-interaction-wrapper .najibul-ld-btn,
    .najibul-interaction-wrapper .nbs-share-btn-main,
    .najibul-interaction-wrapper .najibul-save-pill-btn,
    .najibul-interaction-wrapper .najibul-follow-btn {
        height: 30px !important;
        padding: 0 6px !important;
        font-size: 10.5px !important;
        gap: 3px !important;
    }

    .najibul-interaction-wrapper svg,
    .najibul-interaction-wrapper .najibul-ld-svg {
        width: 12px !important;
        height: 12px !important;
    }
}