.checkout-unit-price { text-align: right; flex-shrink: 0; }
.checkout-unit-price strong { font-size: 16px; }
.checkout-unit-price small { display: block; margin-top: 3px; font-size: 10px; color: var(--muted); }
.quantity-panel { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px 20px; padding: 18px; margin: 0 0 24px; border: 1px solid #efd6c6; border-radius: 14px; background: linear-gradient(115deg,#fff2e9,#fffdf6); }
.quantity-heading label { display: block; font-weight: 650; font-size: 14px; }
.quantity-heading span { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }
.quantity-stepper { display: flex; align-items: center; background: #fffefa; border: 1px solid #dbdfd4; border-radius: 10px; overflow: hidden; }
.quantity-stepper button { width: 42px; min-height: 44px; padding: 0; font-size: 22px; color: var(--orange-dark); }
.quantity-stepper button:hover:not(:disabled) { background: var(--orange-light); }
.quantity-stepper button:disabled { color: #a6aaa2; cursor: default; }
.quantity-stepper input { width: 47px; padding: 8px 2px; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); border-radius: 0; background: transparent; text-align: center; font-size: 16px; font-weight: 650; color: var(--ink); appearance: textfield; }
.quantity-stepper input::-webkit-inner-spin-button,.quantity-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.quantity-stepper:focus-within { outline: 2px solid #648c75; outline-offset: 3px; }
.quantity-stepper input[aria-invalid="true"] { color: #b23a24; }
.quantity-panel > p { grid-column: 1/-1; font-size: 11px; line-height: 1.75; }
.quantity-panel > .quantity-error { color: #ad3825; }
.checkout-total small { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }
#checkout-submit:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.success-order-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin: -5px 0 18px; font-size: 11px; color: var(--muted); }
.success-order-meta strong { color: var(--ink); font-size: 18px; }
.esim-page-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.esim-page-top > a { flex-shrink: 0; margin-top: 15px; }
.esim-order-link { display: flex; align-items: center; gap: 5px; max-width: 100%; padding: 4px 0; min-height: 36px; font-size: 10px; color: var(--muted); text-align: left; }
.esim-order-link:hover { color: var(--orange-dark); }
.esim-order-link .icon { width: 13px; height: 13px; }
.transaction-detail .transaction-reference { font-size: 12px; color: var(--muted); margin: 8px 0 15px; overflow-wrap: anywhere; }
.transaction-complete { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 7px; font-size: 11px; color: #50754b; background: #edf5e7; }
.transaction-complete .icon { height: 14px; width: 14px; }
.transaction-facts { margin: 25px 0; }
.transaction-facts > div { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.transaction-facts dt { color: var(--muted); font-size: 12px; }
.transaction-facts dd { margin: 0; font-size: 13px; text-align: right; font-weight: 550; }
.transaction-payment-logo { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.transaction-payment-logo img { height: 20px; width: 48px; object-fit: contain; }
.transaction-payment-logo span { font-size: 11px; }
.transaction-detail .page-notice { margin: 20px 0; }
@media(max-width:640px) {
  .quantity-panel { padding: 15px; gap: 13px 10px; }
  .quantity-heading label { font-size: 13px; }
  .quantity-heading span { font-size: 10px; max-width: 145px; }
  .quantity-stepper button { width: 36px; }
  .quantity-stepper input { width: 35px; }
  .quantity-panel > p { font-size: 10px; }
  .checkout-unit-price strong { font-size: 13px; }
  .checkout-total { gap: 12px; }
  .checkout-total small { font-size: 10px; }
  .esim-page-top { flex-direction: column; gap: 0; margin-bottom: 22px; }
  .esim-page-top .page-heading { margin-bottom: 9px; }
  .esim-page-top > a { margin-top: 0; font-size: 12px; min-height: 44px; }
  .transaction-facts > div { gap: 12px; }
  .transaction-facts dt,.transaction-facts dd { font-size: 11px; }
}
