/* ========================================================================== 
   MK STORE — UNIVERSAL MONEY PRESENTATION
   Keeps the Thai baht symbol and numeric amount visually balanced everywhere
   in both storefront and admin UI. Runtime wrapping is handled by
   system/js/money-format.js for server-rendered and dynamically injected text.
   ========================================================================== */

:root {
    --mk-money-gap: 0.28em;
    --mk-money-size: 0.92em;
    --mk-money-font: var(--font-main, 'Kanit', 'Prompt', sans-serif);
}

.mk-money {
    display: inline-flex !important;
    align-items: baseline !important;
    justify-content: flex-start;
    gap: var(--mk-money-gap) !important;
    white-space: nowrap !important;
    vertical-align: baseline;
    font-family: var(--mk-money-font) !important;
    font-size: var(--mk-money-size) !important;
    font-weight: inherit;
    font-style: inherit;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    font-variant-numeric: tabular-nums;
}

.mk-money-currency,
.mk-money-amount {
    display: inline-block !important;
    flex: 0 0 auto;
    font-family: inherit !important;
    font-size: 1em !important;
    font-weight: inherit !important;
    font-style: inherit !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    vertical-align: baseline;
}

/* Existing price components that already split the baht sign and amount into
   separate DOM nodes cannot be auto-wrapped, so enforce the same standard. */
.spp-final-price-wrap,
.spp-original-price,
.spp-var-price,
.backend-price-token {
    font-family: var(--mk-money-font) !important;
    align-items: baseline !important;
    gap: var(--mk-money-gap) !important;
    white-space: nowrap !important;
    letter-spacing: 0 !important;
    font-variant-numeric: tabular-nums;
}

.spp-price-currency,
.spp-price-number,
.spp-var-currency,
.backend-price-currency,
.backend-price-number {
    font-family: inherit !important;
    font-size: 1em !important;
    font-weight: inherit !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    vertical-align: baseline;
}

/* Keep compact money controls consistent without resizing unrelated labels. */
.apm-price-addon,
.input-group-text[data-mk-currency-addon='baht'] {
    font-family: var(--mk-money-font) !important;
    line-height: 1 !important;
}