/* VendMizer Pro — storefront styles.
 *
 * The checkout tip / service-charge selector that vmzp-checkout-tips.js
 * mounts into the core checkout's extension slots. The markup, classnames
 * and state keys are the ones the core checkout used before the tip UI
 * moved into this add-on, so these are the core's own rules, recovered.
 *
 * Loads after the core's vmz-store.css, whose `--sf-*` design tokens every
 * declaration below reads. No selector here is defined in vmz-store.css,
 * vmz-store-critical.css or vmz-store-noscript.css.
 */

.vmz-sf-order-summary__tip { margin:8px 0;border-top:1px dashed var(--sf-border);padding-top:8px }
.vmz-sf-tip-row { display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px }
.vmz-sf-tip-row__label { display:flex;align-items:center;gap:4px;font-size:13px;color:var(--sf-text-muted) }
.vmz-sf-tip-row__label--active { color:var(--sf-text);font-weight:600 }
.vmz-sf-tip-row__label svg { width:13px;height:13px;flex-shrink:0 }
.vmz-sf-tip-chips { display:flex;gap:5px;flex-wrap:wrap;margin-inline-start:auto }
.vmz-sf-tip-chip {
    height:28px;padding:0 10px;font-size:12px;font-weight:600;
    border:1px solid var(--sf-border);border-radius:var(--sf-radius-full);
    background:transparent;color:var(--sf-text-secondary);cursor:pointer;white-space:nowrap;
    font-family:var(--sf-font);
    transition:border-color var(--sf-transition-fast),background var(--sf-transition-fast),color var(--sf-transition-fast);
}
.vmz-sf-tip-chip:hover { border-color:var(--sf-text-muted) }
.vmz-sf-tip-chip--active { border-color:var(--sf-accent);background:var(--sf-accent-soft);color:var(--sf-accent);font-weight:700 }
.vmz-sf-tip-chip--clear { border-color:transparent;background:transparent;color:var(--sf-text-muted) }
.vmz-sf-tip-chip--clear:hover { color:var(--sf-danger) }
.vmz-sf-tip-custom { margin-top:8px;max-width:200px }
.vmz-sf-order-summary__tip-row { display:flex;justify-content:space-between;padding:4px 0;font-size:13px;color:var(--sf-text-muted) }