/*
 * MEDIS storefront emphasis layer.
 * The calculator implementation remains in pricing_calculator.css; this
 * layer owns the shared readability scale requested by the storefront brief.
 */
:root {
  --font-base: 15px;
  --font-metric: clamp(1.75rem, 2.5vw, 2.25rem);
  --control-h-md: 40px;
  --control-h-lg: 46px;
  --badge-font-size: 13px;
  --badge-padding: 3px 9px;
}

#medis-pricing-calculator-root {
  font-size: var(--font-base);
}

/* Keep both the work-order vocabulary and the live calculator vocabulary. */
#medis-pricing-calculator-root :where(.pricing-total, .pricing-grand-total, .price-display,
  .medis-calc__total strong, #calc-subtotal, #calc-total) {
  color: var(--calc-orange, #f07523);
  font-size: clamp(28px, 3vw, 32px);
  font-weight: 800;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

#medis-pricing-calculator-root :where(.spec-option-btn, .medis-calc__choice) {
  min-height: var(--control-h-md);
  padding: 11px 14px;
}

#medis-pricing-calculator-root :where(.spec-option-btn, .medis-calc__choice) :where(strong, span) {
  font-size: clamp(14px, 1.7vw, 14.5px);
}

#medis-pricing-calculator-root :where(.spec-option-btn, .medis-calc__choice) small {
  font-size: var(--badge-font-size);
}

#medis-pricing-calculator-root :where(.spec-badge, #calc-cai-badge) {
  font-size: var(--badge-font-size);
  padding: var(--badge-padding);
}

#medis-pricing-calculator-root .medis-calc__add {
  min-height: var(--control-h-lg);
}