/* Checkout-only order upgrade, using the existing website design tokens. */
.checkout-upsell {
  max-width: 480px;
  margin: 0 auto var(--space-6);
  padding: var(--space-6);
  text-align: left;
  background: var(--primary-light);
  border: 1px solid var(--primary);
  border-radius: var(--radius-xl);
}
.checkout-upsell-eyebrow {
  color: var(--primary-dark);
  font-size: var(--text-xs);
  font-weight: 700;
  margin-bottom: var(--space-2);
}
.checkout-upsell[hidden] { display: none; }
.checkout-upsell--scan { background: var(--white); border-width: 2px; }
.checkout-upsell h3 { font-size: var(--text-lg); line-height: 1.4; margin-bottom: var(--space-3); }
.checkout-upsell-description { font-size: var(--text-sm); color: var(--gray-700); line-height: 1.65; }
.checkout-upsell-choice {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-4);
  margin: var(--space-4) 0 var(--space-3);
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}
.checkout-upsell-choice input { width: 22px; height: 22px; accent-color: var(--primary); margin: 0; }
.checkout-upsell-choice:has(input:disabled) { cursor: default; }
.checkout-upsell-choice strong { color: var(--primary-dark); white-space: nowrap; }
.checkout-upsell-choice:focus-within { outline: 3px solid var(--primary); outline-offset: 3px; }
.checkout-upsell.is-selected .checkout-upsell-choice { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.checkout-upsell-tariff, .checkout-upsell-status, .checkout-upsell-link { font-size: var(--text-xs); line-height: 1.6; }
.checkout-upsell-tariff, .checkout-upsell-status { color: var(--gray-700); }
.checkout-upsell-total { font-size: var(--text-sm); font-weight: 700; margin: var(--space-3) 0; }
.checkout-upsell-link { display: inline-block; margin-top: var(--space-3); text-decoration: underline; text-underline-offset: 3px; }
.funnel-result-row { gap: var(--space-3); }
.funnel-result-value { min-width: 0; overflow-wrap: anywhere; text-align: right; }
@media (max-width: 420px) {
  .checkout-upsell { padding: var(--space-4); }
  .checkout-upsell-choice { grid-template-columns: 22px minmax(0, 1fr); }
  .checkout-upsell-choice strong { grid-column: 2; }
}