/*
 * SA Cold Chain Logistics — native emoji compatibility
 *
 * WordPress emoji image replacement is disabled by the plugin.
 * These selectors keep native emoji visible in product badges,
 * menus, cart rows, checkout notices and product carousels.
 */

.vsf-emoji-icon,
.vsf-cold-chain-card__icon,
.vsf-unified-fee-card__icon,
.vsf-lmc-collection-notice__icon,
.saf-eta-card__icon,
[data-sacc-icon]::before {
    font-family:
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Noto Color Emoji",
        "Twemoji Mozilla",
        sans-serif !important;
    font-variant-emoji: emoji;
    text-rendering: auto;
}

/* Compatibility for cached fragments already converted by WordPress. */
.vsf-temperature-badge img.emoji,
.vsf-temperature-badge img.wp-smiley,
.vsf-emoji-icon img.emoji,
.vsf-cold-chain-card__icon img.emoji,
.vsf-unified-fee-card__icon img.emoji,
.vsf-lmc-collection-notice__icon img.emoji,
.saf-eta-card__icon img.emoji,
.menu-item img.emoji,
.woocommerce img.emoji {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 1em !important;
    min-width: 1em !important;
    max-width: 1em !important;
    height: 1em !important;
    min-height: 1em !important;
    max-height: 1em !important;
    margin: 0 0.18em 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    object-fit: contain !important;
    vertical-align: -0.1em !important;
}

/* =========================================================
 * 2.5.0 Mobile product badges and cart fee width
 * ========================================================= */

/* Keep product badge content compact and evenly spaced. */
.vsf-temperature-badge {
    display: inline-flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-right: 11px !important;
    padding-left: 11px !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    white-space: nowrap !important;
}

.vsf-temperature-badge .vsf-emoji-icon {
    display: inline-grid !important;
    place-items: center !important;
    flex: 0 0 auto !important;
    width: 1em !important;
    min-width: 1em !important;
    margin: 0 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
}

.vsf-temperature-badge .vsf-temperature-badge__label {
    display: inline-block !important;
    flex: 0 1 auto !important;
    margin: 0 !important;
    letter-spacing: 0 !important;
    word-spacing: normal !important;
    white-space: nowrap !important;
}

.vsf-temperature-badge img.emoji,
.vsf-temperature-badge img.wp-smiley {
    margin: 0 !important;
}

/* Full-width packaging fee presentation in the cart totals table. */
.woocommerce-cart
.cart_totals
table.shop_table
tr.vsf-unified-fee-row,
.woocommerce-cart
.cart_totals
table.shop_table
tr.vsf-unified-fee-row
td.vsf-unified-fee-cell {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

.woocommerce-cart
.cart_totals
table.shop_table
tr.vsf-unified-fee-row
td.vsf-unified-fee-cell {
    display: table-cell !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.woocommerce-cart
.cart_totals
.vsf-unified-fee-card {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
}

.woocommerce-cart
.cart_totals
.vsf-unified-fee-label {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    white-space: nowrap !important;
}

.woocommerce-cart
.cart_totals
.vsf-unified-fee-price {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

@media (max-width: 600px) {
    .vsf-loop-temperature-wrap,
    .vsf-cart-temperature-wrap,
    .vsf-single-temperature-wrap {
        max-width: 100% !important;
        overflow: visible !important;
    }

    .vsf-temperature-badge {
        gap: 5px !important;
        padding-right: 9px !important;
        padding-left: 9px !important;
    }

    .woocommerce-cart
    .cart_totals,
    .woocommerce-cart
    .cart_totals table.shop_table {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* =========================================================
 * 2.5.3 Badge typography correction
 * ========================================================= */

/* Text must use the site font; only the emoji uses an emoji font. */
.vsf-temperature-badge {
    font-family: inherit !important;
    font-variant-emoji: normal !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
}

.vsf-temperature-badge > *:not(.vsf-emoji-icon),
.vsf-temperature-badge .vsf-temperature-badge__label {
    font-family: inherit !important;
    font-variant-emoji: normal !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
}

.vsf-temperature-badge .vsf-emoji-icon {
    margin-right: 0 !important;
}

.vsf-temperature-badge {
    gap: 5px !important;
}