.payment-choices {
  background: var(--surface);
  border-radius: var(--radius-sm, 8px);
  overflow: hidden;
}

.payment-choices .payment-choice {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 12px 16px 12px 58px;
  box-sizing: border-box;
  font-size: 1em;
  color: var(--text-main);
  border-color: color-mix(in srgb, var(--text-muted) 20%, transparent);
  cursor: pointer;
}

.payment-choice .checkout-input-icon {
  left: 18px;
  width: 22px;
  height: 22px;
  opacity: 1;
}

.payment-choice strong,
.payment-choice small {
  display: block;
}

.payment-choice small {
  margin-top: 4px;
  font-size: 0.8em;
  font-weight: 400;
  color: var(--text-muted);
}

.payment-choice .checkout-input-icon svg,
.payment-choice .checkout-input-icon svg * {
  color: inherit;
}

.payment-choice:has(:checked) .checkout-input-icon {
  color: var(--primary);
}

.payment-choices input[type="radio"]:checked {
  background: var(--primary);
}

.payment-choices input[type="radio"]:checked::after {
  width: 10px;
  height: 10px;
  background: var(--text-contrast, #fff);
}

.payment-choices .payment-choice:has(:focus-visible) {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.payment-choices .payment-choice:has(:disabled) {
  opacity: 0.48;
  cursor: not-allowed;
}