/* ============================================================
   MSM Multi-Level Stock Manager — Frontend
   ============================================================ */

/* Base: colored availability text */
.stock.msm-stock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: .95em;
}

.stock.msm-stock::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    opacity: .85;
}

/* Single product page: pill/badge style + margin above add-to-cart */
.single-product p.stock.msm-stock,
.single-product span.stock.msm-stock {
    display: inline-block;
    padding: 5px 16px;
    border-radius: 20px;
    color: #fff !important;
    font-size: .875em;
    font-weight: 600;
    margin: 0 0 16px 0;
    line-height: 1.5;
    vertical-align: middle;
}

.single-product p.stock.msm-stock::before,
.single-product span.stock.msm-stock::before {
    display: none; /* dot replaced by pill background */
}

/* Colors + pill backgrounds are injected via wp_add_inline_style per level */

/* ── "Availability:" label removal ───────────────────────────────────────
   Some themes wrap the stock pill inside a .availability element and prepend
   the label as a text node or a <strong>. Hide it via the font-size:0 trick
   (JS in frontend.js handles the rest for other theme structures). */
.woocommerce div.product .availability {
    font-size: 0;
    line-height: 0;
}
.woocommerce div.product .availability .msm-stock {
    /* Restore size — use rem so it ignores the parent's font-size:0 */
    font-size: 0.875rem;
    line-height: 1.5;
    display: inline-block;
}